<div class="layout">
<div class="nav">
<img src="https://1000logos.net/wp-content/uploads/2017/05/Netflix-Logo-2006.png" alt="" class="logo">
<div class="spro">
<svg class="search" width="216" height="196" viewBox="0 0 216 196" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="92" cy="92" r="85" stroke="white" stroke-width="14"/>
<rect x="160.665" y="141" width="70.0141" height="14" transform="rotate(38.2379 160.665 141)" fill="white"/>
</svg>
<img src="https://ih0.redbubble.net/image.618427277.3222/flat,1000x1000,075,f.u2.jpg" alt="">
</div>
</div>
<div class="poster">
</div>
<div class="options"></div>
<div class="catogery">
<h4>Tv Shows</h4>
<h4>Movies</h4>
<h4>My List</h4>
</div>
<div class="buttons">
<div class="plus">
<svg width="auto" height=".9rem" viewBox="0 0 182 182" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="82" width="18" height="182" fill="white"/>
<rect y="100" width="18" height="182" transform="rotate(-90 0 100)" fill="white"/>
</svg>
<p>My List</p>
</div>
<div class="playbtn">
<svg width="auto" height="1.6rem" viewBox="0 0 198 77" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 10C0 4.47715 4.47715 0 10 0H188C193.523 0 198 4.47715 198 10V67C198 72.5228 193.523 77 188 77H10C4.47715 77 0 72.5228 0 67V10Z" fill="white"/>
<path d="M72 38L42 56.1865L42 19.8135L72 38Z" fill="black"/>
<path d="M106.993 40.5371V50H103.806V25.8281H112.721C115.366 25.8281 117.436 26.5033 118.93 27.8535C120.435 29.2038 121.188 30.9912 121.188 33.2158C121.188 35.5622 120.451 37.3717 118.979 38.6445C117.519 39.9062 115.421 40.5371 112.688 40.5371H106.993ZM106.993 37.9307H112.721C114.425 37.9307 115.731 37.5322 116.639 36.7354C117.546 35.9274 118 34.7653 118 33.249C118 31.8102 117.546 30.6592 116.639 29.7959C115.731 28.9326 114.486 28.4844 112.903 28.4512H106.993V37.9307ZM128.11 50H125.039V24.5H128.11V50ZM144.131 50C143.954 49.6458 143.81 49.015 143.699 48.1074C142.271 49.5905 140.567 50.332 138.586 50.332C136.815 50.332 135.36 49.834 134.22 48.8379C133.091 47.8307 132.526 46.5579 132.526 45.0195C132.526 43.1491 133.235 41.6992 134.651 40.6699C136.079 39.6296 138.082 39.1094 140.661 39.1094H143.649V37.6982C143.649 36.6247 143.328 35.7725 142.687 35.1416C142.045 34.4997 141.098 34.1787 139.848 34.1787C138.752 34.1787 137.833 34.4554 137.092 35.0088C136.35 35.5622 135.979 36.2318 135.979 37.0176H132.892C132.892 36.1211 133.207 35.2578 133.838 34.4277C134.48 33.5866 135.343 32.9225 136.428 32.4355C137.523 31.9486 138.724 31.7051 140.03 31.7051C142.1 31.7051 143.721 32.2253 144.895 33.2656C146.068 34.2949 146.676 35.7171 146.721 37.5322V45.7998C146.721 47.4489 146.931 48.7604 147.352 49.7344V50H144.131ZM139.034 47.6592C139.997 47.6592 140.91 47.4102 141.773 46.9121C142.637 46.4141 143.262 45.7666 143.649 44.9697V41.2842H141.242C137.479 41.2842 135.598 42.3854 135.598 44.5879C135.598 45.5508 135.919 46.3034 136.561 46.8457C137.202 47.388 138.027 47.6592 139.034 47.6592ZM157.146 45.501L161.33 32.0371H164.617L157.396 52.7725C156.278 55.7607 154.501 57.2549 152.066 57.2549L151.485 57.2051L150.34 56.9893V54.499L151.17 54.5654C152.21 54.5654 153.018 54.3551 153.594 53.9346C154.18 53.514 154.662 52.7448 155.038 51.627L155.719 49.8008L149.311 32.0371H152.664L157.146 45.501Z" fill="black"/>
</svg>
</div>
<div class="info">
<svg width="auto" height=".9rem" viewBox="0 0 184 184" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="92" cy="92" r="85" stroke="white" stroke-width="14"/>
<rect x="82" y="76" width="19" height="72" fill="white"/>
<circle cx="92" cy="50" r="15" fill="white"/>
</svg>
<p>Info</p>
</div>
</div>
<div class="cards">
<h5>Popular on Netflix</h5>
<div class="movies">
<div class="c c1"></div>
<div class="c c2"></div>
<div class="c c3"></div>
</div>
</div>
</div>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #ececec;
.layout{
padding-top: 1rem;
position: relative;
width: 250px;
height: 500px;
border-radius: 20px;
background-color: #111;
overflow: hidden;
.nav{
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 1rem;
z-index: 99;
.spro{
z-index: 99;
.search{
width: auto;
height: 1rem;
margin-right: .8rem;
z-index: 99;
}
img{
height: 1rem;
width: auto;
border-radius: 1px;
}
}
}
.logo{
width: auto;
height: 30px;
z-index: 99;
}
.poster{
position: absolute;
top: -80px;
border-radius: 20px 20px 0 0;
height: 370px;
width: 250px;
background-image: url("https://i.ibb.co/DYpKQhL/9729d1d29d1a6cae70558b80f09c81c0a5-11-stranger-things-s2.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.options{
height: 231px;
position: absolute;
bottom: 0;
width: 250px;
background-image: linear-gradient(#000000de,10%, black);
}
}
.catogery{
width: 250px;
padding: 1rem 2rem;
position: absolute;
display: flex;
justify-content: space-between;
h4{
font-weight: 400;
font-family: sans-serif;
color: #fff;
font-size: .7rem;
}
}
.buttons{
position: absolute;
width: 250px;
height: 45px;
display: flex;
justify-content: space-between;
align-items: center;
top: 286px;
padding: 0 .5rem;
.plus{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
p{
margin-top: .5rem;
color: #fff;
font-family: sans-serif;
font-size: .5rem;
}
}
.info{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
p{
margin-top: .5rem;
color: #fff;
font-family: sans-serif;
font-size: .5rem;
}
}
}
.cards{
padding: 0 .9rem;
position: absolute;
top:340px;
h5{
font-family: sans-serif;
color: white;
}
.movies{
margin-top: .5rem;
display: flex;
justify-content: space-between;
.c{
height: 100px;
width: 65px;
margin: 0 .25rem;
border-radius: 8px;
background-color: white;
}
.c1{
background-image: url("https://wallpapercave.com/wp/wp7150790.jpg");
background-size: cover;
}
.c2{
background-image: url("https://static.wikia.nocookie.net/13reasonswhy/images/5/5c/13_Reasons_Why_poster.jpg");
background-size: cover;
}
.c3{
background-image: url("https://m.media-amazon.com/images/M/MV5BNDVkYjU0MzctMWRmZi00NTkxLTgwZWEtOWVhYjZlYjllYmU4XkEyXkFqcGdeQXVyNTA4NzY1MzY@._V1_.jpg");
background-size: cover;
}
}
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.