Skip to content

I would try to improvements to the current styling of the Netflix Clone page to enhance the overall visual appear . #57

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kumari06khushi wants to merge 1 commit into
base: main
Choose a base branch
from
Open

I would try to improvements to the current styling of the Netflix Clone page to enhance the overall visual appear . #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 19 additions & 19 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,15 @@
<div class="nav-btn">
<button class="btn" id="theme-toggle">☀️</button>
<div class="btn btn-lang">
<img class="language-switch" src="assets/language-svgrepo-com.svg"/>
<img class="language-switch" src="https://cdn2.iconfinder.com/data/icons/basic-ui-elements-line/512/World_logo_line_earth-512.png"/>
<select name="language" id="language-select">
<option value="english">English</option>
<option value="hindi">Hindi</option>
</select>
<img class="down-arrow" src="assets/down-arrow-svgrepo-com.svg"/>
<img class="down-arrow" src="https://icons.veryicon.com/png/o/system/eva-all/chevron-down-outline-2.png"/>
</div>

<button class="btn btn-red-sm">Sign_In</button>
<button class="btn btn-red-sm">Sign In</button>
</div>
</nav>
<div class="box"></div>
Expand All @@ -33,45 +33,45 @@
<span>Starts at ₹149. Cancel at any time.</span>
<span>
Ready to watch? Enter your email to create or restart your
membership </span>
membership. </span>
<!-- Remove <br></br> -->
<div class="hero-buttons">
<input type="text" placeholder="Email Address" />
<button class="btn btn-red">Get Started &gt;</button>
<input type="text" placeholder="Email address" />
<button class="btn btn-red">Get Started &rarr;</button>
</div>
</div>
<div class="separation"></div>
<div class="separation"></div> //first page end
</div>
<section class="first">
<section class="first">
<div>
<span>Enjoy on your TV</span>
<span
>Watch on smart TVs, PlayStations, XBox, Chromecast, Apple TV, Blu-ray
> <br>Watch on smart TVs, PlayStations, XBox, Chromecast, Apple TV, Blu-ray
Players and more.</span
>
</div>
<div class="secImg">
<div class="secImg">
<img
width="50vm"
src="https://st3.depositphotos.com/5689602/17945/i/450/depositphotos_179451970-stock-photo-tv-screen-with-noise-glitcher.jpg"
alt=""
src="https://s3-alpha.figma.com/hub/file/4711603543/c35e3e9b-7203-4f50-9425-c850336a2e7b-cover.png"
alt="nexflix show"
/>
</div>
</section>
<div class="separation"></div>
<section class="first second">
<div class="secImg">
<div>
<span>Download your shows to watch offline</span>
<span
>Save your favourites easily and always have something to watch.</span>
</div>
<br>
<div class="secImg">
<img
src="https://tse2.mm.bing.net/th?id=OIP.aNDBtSjZWVGuq1XUBp4P5QHaFj&pid=Api&P=0&h=180"
alt=""
/>
</div>
<br>
<div>
<span>Download your shows to watch offline</span>
<span
>Save your favourites easily and always have something to watch.</span>
</div>
</section>
<div class="separation"></div>
<section class="first third">
Expand Down
51 changes: 29 additions & 22 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@

--first-image-filter: none;

--btn-text-on-light-bg:white;
--btn-text-on-light-bg:rgb(239, 232, 232);
--btn-lang-svg-filter: invert(1);

--separation-color:rgb(248, 38, 38);
Expand All @@ -31,7 +31,7 @@
}

/* Light Mode Overrides for the variables */
body[data-theme="light"] {
body[data-theme="light"]{
--main-page-bg: white;
--main-text-color: black;

Expand All @@ -42,10 +42,10 @@ body[data-theme="light"] {
--faq-box-hover-bg: lightgray;
--faq-svg-filter: none;

--first-image-filter: brightness(1.5) grayscale(0.5);
--first-image-filter: brightness(1.2) grayscale(0.5);

--btn-text-on-light-bg:black;
--btn-lang-svg-filter: none;
--btn-lang-svg-filter:none;
}
* {
padding: 0;
Expand Down Expand Up @@ -127,30 +127,31 @@ nav button {
color: var(--main-text-color);
position: relative;
font-family: "Martel Sans", serif;
gap: 23px;
gap:23px;
padding: 0 30px;

}

.hero > :first-child {
font-weight: bolder;
font-weight:500;
font-size: 48px;
text-align: center;
}

.hero > :nth-child(2) {
font-weight: 400;
font-size: 24px;
font-weight: 300;
font-size: 25px;
text-align: center;
}

.hero > :nth-child(3) {
font-weight: 400;
font-weight: 300;
font-size: 20px;
text-align: center;
}

.separation {
height: 6px;
height: 2px;
background-color: var(--separation-color);
position: relative;
z-index: 20;
Expand All @@ -166,7 +167,7 @@ nav button {

.btn {
background: #666;
color: rgb(255, 255, 255);
color: rgb(245, 241, 241);
padding:5px 25px;
margin: 10px 12px;
border: none;
Expand All @@ -185,6 +186,7 @@ transform: scale(1.05);
background:rgb(228, 15, 15);
font-size:15px;
font-weight:lighter;
padding: 10px 30px;
}

.btn-red:hover {
Expand All @@ -211,12 +213,12 @@ transform: scale(1.05);
border: none;
font-size: 16px;
appearance: none;
padding: 8px;
padding: 2px 4px;
cursor: pointer;
}

.down-arrow {
width: 8px;
width:12px;
padding: 0 2px;
}

Expand All @@ -239,12 +241,14 @@ transform: scale(1.05);

.btn-lang {
background-color: var(--section-bg);
border: 1px solid var(--btn-default-text);
border: 1px solid (--btn-default-bg);
color: var(--btn-text-on-light-bg);
display: flex;
align-items: center;
border-radius: 4px;
}


.english {
padding: 0 5px;
}
Expand All @@ -254,7 +258,9 @@ transform: scale(1.05);
color: var(--btn-red-text);
display: flex;
align-items: center;
padding: 8 20px;
margin:3px;
white-space: nowrap;
}

.btn-lang .language-switch,
Expand Down Expand Up @@ -284,7 +290,8 @@ transform: scale(1.05);
font-size: 32px;
}
.hero > :nth-child(2) {
font-size: 18px;
font-size:20px;

}
.hero > :nth-child(3) {
font-size: 18px;
Expand All @@ -307,7 +314,7 @@ transform: scale(1.05);
flex-wrap: wrap;
}

.second {
.second{
flex-direction: row-reverse;
}

Expand Down Expand Up @@ -369,10 +376,7 @@ section.first > div :nth-child(2) {
justify-content: center;
gap: 14px;
}
.faq h2{
text-align: center;
font-size: 32px;
}

footer{
max-width: 90vw;
}
Expand All @@ -384,8 +388,10 @@ section.first > div :nth-child(2) {
grid-template-columns: 1fr 1fr;
color: white;
gap: 25px;
}
flex-direction: column;
}

display: flex;
flex-direction:column;
align-items: center;
justify-content: center;
gap: 14px;
Expand Down Expand Up @@ -455,6 +461,7 @@ footer{
display: flex;
flex-direction: column;
gap: 23px;
}
.faqbox:hover {
background-color: var(--faq-box-hover-bg);

Expand Down