Create botton
Review Request #28 — Created April 19, 2024 and updated
I Create button and expand image out of button to center.
- HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button popovertarget="mypopover" class="button"></button>
<div popover="auto" id="mypopover" class="page">
<div class="img">
<img src="https://occ-0-64-58.1.nflxso.net/dnm/api/v6/E8vDc_W8CLv7-yMQu8KMEC7Rrr8/AAAABUfAq4IluB2bN-Emx83cExyYhZwjXFJKSiRLCPdYEt3i9IjZNkh_p3f0bgMlJ8W-BX8AUPzmVPbivpHe-S9LJTwcoA0OJq8Hp_VP.webp?r=a00"><div class="Thubnail" > <img src="https://occ-0-64-58.1.nflxso.net/dnm/api/v6/tx1O544a9T7n8Z_G12qaboulQQE/AAAABYxuxaMPDeSz-olxjr9oz2rF3BCfL591J3kp6Bre-6qzhVlAjYuMcVfsh2z7Fsez8bMpL_EJ--B0GSo3js0LDaRnn7yS3JB7lQkwSMUlpuSu4gtG_W8fFxQnvjwQWYLhj1SvVVbN1BSM4P7WPJdkzYvacpn32LhWym96WV4Gc4S4i0fKvtZc.webp?r=84f" style=" height: 170px; width: 425px ; opacity: 1;"> </div></div>
<div id="info" >
<div class="box1" style="padding: 0 48px;">
<div class="line1">
<h3 style="color: green; font-weight: 300px ; margin-bottom: 10px;">99% March<span style="color: #BCBCBC;"> 2024 </span><span style="color: #BCBCBC;">16 Episode</span></h3>
</div>
<div class="line2" style="color: #FFFFFF; font-size: 20px; ">
<h3>New Episode Comming Saturday</h3>
</div>
<div class="line3" style="color: #FFFFFF;font-size: 14px; font-weight: 300; margin-bottom: 5px;">
<p>In this drama praised by TIME as 'fresh and transformative,' an heiress and her husband face the tumultuous waters of marriage amid chaos in their lives.</p>
</div>
</div>
<div class="box2" style="padding-right: 48px; padding-left: 24px;">
<div class="line1">
<h3 style="font-size: 14px; color: #777777;">Cast: <span style="color: #FFFFFF;">Kim Soo-hyun, kim Ji-won, Park Sung-hoon, more</span></h3></div> <div class="line2"> <h3 style="font-size: 14px; color: #777777;">Genres: <span style="color: #FFFFFF;">Korean, Tv Comedies, Remantic Tv Comedies</span></h3> </div> <div class="line3"> <h3 style="font-size: 14px; color: #777777;">This show is: <span style="color: #FFFFFF;">Swoonworthy, offbeat, Remantic</span></h3> </div> </div></div>
</div></body>
</html>
2. CSS Code
html {
font-family: Netflix Sans, Helvetica Neue, Segoe UI, Roboto, Ubuntu, sans-serif;
background-color: burlywood;
}[popover] {
font-size: 1.2rem;
padding: 10px;
}[popover]:popover-open {
opacity: 1;
transform: scale(1);
}[popover] {
opacity: 0;
transform: scale(0);
transition-property: opacity, transform, overlay, display;
transition-duration: 0.4s;
transition-behavior: allow-discrete;}
/ Needs to be included after the previous [popover]:popover-open
rule to take effect, as the specificity is the same /@starting-style {
[popover]:popover-open {
opacity: 0;
transform: scale(0);
}
}
.button {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: black;
border: 2px solid white;
position: relative;
}
.button::after {
content: '';
position: absolute;
border: 12px solid transparent;
border-top-color: white;
transform: translate(-50%, -50%);
top : 70%
}mypopover {
display: inline-block; position: absolute; padding: 0; border: 0; margin-top: 20px; background-color: #303030;}
img {
width: 1060px;
height: 600px;
margin: 0;
padding: 0;}
mypopover .Thubnail {
position: absolute; top: 15em; margin-left: 50px; height: 170px; width: 425px}
mypopover #info {
display: flex; width: 1060px; height: 1000px;}
mypopover .box1 {
width: 482px; height: 190px;}
mypopover .box2 {
width: 310px; height: 175px;}
