Scribd
Upload
1 views

Css

The document contains CSS styles for a web page with a dark theme, primarily designed for a Netflix-like interface. It includes styles for the navbar, hero section, cards, and footer, with specific properties for layout, colors, and typography. Key components include buttons, dropdowns, and responsive design elements for a visually appealing user experience.

Uploaded by

wajeehazia12
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
1 views

Css

The document contains CSS styles for a web page with a dark theme, primarily designed for a Netflix-like interface. It includes styles for the navbar, hero section, cards, and footer, with specific properties for layout, colors, and typography. Key components include buttons, dropdowns, and responsive design elements for a visually appealing user experience.

Uploaded by

wajeehazia12
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

* {

margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background-color: black;
color: white;
font-family: "Poppins", sans-serif;
}

.navbar {
position: absolute;
top: 0;
width: 100%;
display: flex;
justify-content: space-between;
padding: 3% 10%;
z-index: 10;
}

.navbar_netflix {
height: 100%;
width: 148px;
}

.navbar_nav_items {
display: flex;
gap: 10px;
}

.netflix_logo {
width: 100%;
height: 100%;
}

.language_drop_down {
background: transparent;
border: none;
color: white;
}

.dropdown_container {
border: 1px solid #535352;
padding: 0.4rem;
border-radius: 4px;
background: rgba(0, 0, 0, 0.4);
}

.sign_in_button {
border: #E50914;
background-color: #E50914;
color: white;
padding: 0.25rem 0.5rem;
border-radius: 4px;
height: 35px;
width: 100px;
}
button:hover {
background-color: rgb(193, 17, 25);
}

.hero_bg_img_cont {
width: 100%;
height: 100%;
}

.hero_bg_img {
width: 100%;
height: 100%;
object-fit: cover;
}

.hero_bg_overlay {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.61);
}

.hero_card {
position: absolute;
top: 38%;
left: 12%;
text-align: center;
display: flex;
flex-direction: column;
gap: 10px;
}

.hero_title {
font-weight: 800;
font-size: 3rem;
}

.hero_subtitle,
hero_desc {
font-weight: 400;
font-size: 1.3rem;
}

.email {
width: 368.75px;
height: 56px;
color: white;
border-radius: 4px;
padding: 0.25rem 0.5rem;
border: 1px solid #535352;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}

.get_started {
font-size: 24px;
width: 209.25px;
height: 56px;
background-color: #E50914;
border: 1px solid #E50914;
border-radius: 4px;
color: white;
}

.card-1,
.card-2,
.card-3 {
border-top: 8px rgb(69, 69, 69);
padding: 50px;
}

.card-1 {
position: relative;
display: inline-grid;
grid-template-columns: 50% 40%;
text-align: left;
align-items: center;
padding: 25px 45px 50px;
}

.desc-1 {
padding-left: 80px;
}

.card-1 video {
position: relative;
width: 100%;
height: 54%;
grid-column: 2/2;
grid-row: 1/2;
z-index: -1;
}

.card-1 img {
grid-column: 2/2;
grid-row: 1/2;
}

.style-cards h1 {
font-size: 3rem;
padding: 1rem;
padding-left: 0;
}

.style-cards h3 {
font-size: 1.6rem;
line-height: 2rem;
}

.card-2 {
position: relative;
display: inline-grid;
grid-template-columns: 50% 40%;
text-align: left;
align-items: center;
padding: 25px 45px 50px;
}

.desc-2 {
padding-left: 30%;
}

.card-3 {
position: relative;
display: inline-grid;
grid-template-columns: 50% 40%;
text-align: left;
align-items: center;
padding: 25px 45px 50px;
}

.desc-3 {
padding-left: 80px;
padding-right: 20px;
}

.card-3 img {
width: 110%;
grid-column: 2/2;
grid-row: 1/2;
}

.card-3 video {
position: relative;
top: -87px;
left: 125px;
width: 65%;
height: 78%;
grid-column: 2/2;
grid-row: 1/2;
z-index: -1;
}

.footer,
.footer a {
color: #999;
font-size: 0.9rem;
}

.footer p {
margin-bottom: 1.5rem;
padding-left: 50px;
}

.footer .footer-cols {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2rem;
padding-left: 50px;
}

.footer li {
line-height: 1.9;
}
h1 {
font-size: 3rem;
}

You might also like