Skip to content

Enhanced the footer section and added a "back to top" button #54

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
Methika2005 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Enhanced the footer section and added a "back to top" button #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3f5d273
Enhanced the footer section with back to top button
Methika2005 Aug 3, 2025
fad1189
Merge branch 'main' into main
Methika2005 Aug 3, 2025
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
89 changes: 73 additions & 16 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,6 +302,20 @@ <h2>Frequently Asked Questions</h2>
</section>
<div class="separation"></div>


<!-- FOOTER START -->
<footer >
<!-- SIGN-UP SECTION -->
<div class="footer-signup">
<p>Ready to watch? Enter your email to create or restart your membership.</p>
<form class="footer-signup-box">
<div class="input-container">
<input type="email" id="email-footer" required placeholder=" " />
<label for="email-footer">Email Address</label>
</div>
<button class="btn btn-red" type="submit">Get Started &gt;</button>
</form>
</div>
<!--FOOTER START-->
<footer>
<!-- SIGN-UP SECTION -->
Expand All @@ -320,10 +334,10 @@ <h2>Frequently Asked Questions</h2>
</div>
</div>

<!-- QUESTIONS -->
<div class="questions">
<p>Questions? Call <a href="tel:0008009191694">000-800-919-1694</a></p>
</div>
<!-- QUESTIONS -->
<div class="questions">
<p>Questions? Call <a href="tel:0008009191694">000-800-919-1694</a></p>
</div>

<!-- FOOTER LINKS -->
<div class="footer-links">
Expand Down Expand Up @@ -352,16 +366,61 @@ <h2>Frequently Asked Questions</h2>
</ul>
</div><br>

<!-- LANGUAGE + BRANDING -->
<div class="footer-bottom">
<select class="language-select" aria-label="Select Language">
<option value="en">English</option>
<option value="hi">हिन्दी</option>
</select>
<p class="netflix-india">Netflix India</p>
</div>
</footer>
<!--FOOTER END-->

<!-- Grouped Footer Links -->
<div class="footer-links">
<!-- Left Side -->
<div class="footer-links-column">
<ul>
<li style="color:red;><strong>Support</strong></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Help Centre</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Speed Test</a></li>
</ul>
<ul>
<li style="color:red;><strong>Company</strong></li>
<li><a href="#">Account</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Media Centre</a></li>
<li><a href="#">Investor Relations</a></li>
</ul>
</div>

<!-- Right Side -->
<div class="footer-links-column">
<ul>
<li style="color:red;"><strong>Legal</strong></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Cookie Preferences</a></li>
<li><a href="#">Legal Notices</a></li>
</ul>
<ul>
<li style="color:red;><strong>Platform</strong></li>
<li><a href="#">Ways to Watch</a></li>
<li><a href="#">Only on Netflix</a></li>
<li><a href="#">Corporate Information</a></li>
</ul>
</div>
</div>


<!-- Language + Branding -->
<div class="footer-bottom">
<select class="language-select" aria-label="Select Language">
<option value="en">English</option>
<option value="hi">हिन्दी</option>
</select>
<p class="netflix-india">Netflix India © <span id="year"></span></p>
</div>
</footer>

<!-- Back to Top Button -->
<button onclick="window.scrollTo({ top: 0, behavior: 'smooth' });" class="back-to-top" title="Back to top">
↑
</button>
<!-- FOOTER END -->

<!-- Chatbot Widget Start -->
<div id="chatbot-widget">
Expand Down Expand Up @@ -477,8 +536,6 @@ <h2>Frequently Asked Questions</h2>
setTheme(newTheme);
});

// =======

function toggleFAQ(element) {
// Close all other FAQ items
const allFAQs = document.querySelectorAll(".faqbox");
Expand Down
109 changes: 91 additions & 18 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

@import url("https://fonts.googleapis.com/css2?family=Martel+Sans:wght@200;300;400;600;700;800;900&display=swap");

@font-face {
Expand Down Expand Up @@ -440,7 +441,7 @@ section.first > div :nth-child(2) {
cursor: pointer;
border-radius: 15px;
}
footer{
/* footer{
color: white;
max-width: 60vw;
margin: auto;
Expand All @@ -458,7 +459,7 @@ footer{
.faqbox:hover {
background-color: var(--faq-box-hover-bg);

}
} */
.faqbox svg {
filter: var(--faq-svg-filter);
}
Expand Down Expand Up @@ -745,7 +746,6 @@ body {
font-size: 16px;
}
}
/* >>>>>>> main */

/* FOOTER SIGNUP */
.footer-signup {
Expand All @@ -755,27 +755,36 @@ body {
}

.footer-signup p {
font-size: 18px;
font-size: 25px;
margin-bottom: 20px;
color:white;
}

.footer-signup-box {
display: flex;
justify-content: center;
align-items: center; /*Vertically aligns input and button */
gap: 10px;
flex-wrap: wrap;
}

/* Floating label for footer input */
.input-container {
position: relative;
display: inline-block;
flex: 1;
min-width: 280px;
padding-right: 25px;
}


.input-container input {
width: 100%;
padding: 16px 14px 8px 14px;
font-size: 16px;
border: 1px solid rgba(137, 134, 134, 0.7);
background: rgba(23, 23, 23, 0.7);
color: white;
border-radius: 4px 0 0 4px; /* left rounded */
height: 56px;
box-sizing: border-box;
.footer-input-container{
padding: 16px 14px 8px 14px;
font-size: 16px;
Expand All @@ -784,12 +793,13 @@ body {
background: rgba(23, 23, 23, 0.7);
color:white;
width: 100%;

}

.input-container label {
position: absolute;
left: 14px;
top: 50%;
left: 14px;
transform: translateY(-50%);
color: #aaa;
font-size: 16px;
Expand All @@ -801,16 +811,38 @@ body {
.input-container input:not(:placeholder-shown) + label {
top: 6px;
font-size: 12px;
color: #aaa; /* keep same grey color */
color: #aaa;
}

.input-container input,
.btn-red {
height: 50px; /* Same height for both */
font-size: 16px;
box-sizing: border-box;
}

.btn-red {
padding: 0 20px;
border-radius: 4px;
border: none;
background-color: #e50914;
color: white;
font-weight: bold;
cursor: pointer;
}

.btn-red:hover {
background-color: #b20710;
}


/* FOOTER LINKS & LANGUAGE */
footer {
max-width: 75vw;
margin: auto;
padding: 40px 0;
color: #b3b3b3;
font-size: 14px;
font-size: 15px;
}

footer .questions {
Expand All @@ -823,37 +855,51 @@ footer .questions a {
}

.footer-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
display: flex;
justify-content: space-between;
gap: 500px;
flex-wrap: wrap;
margin-bottom: 30px;
}

.footer-links ul {
.footer-links-column {
flex: 1;
min-width: 250px;
}

.footer-links-column ul {
list-style: none;
margin-bottom: 20px;
}

.footer-links li {
.footer-links-column li {
margin-bottom: 12px;
}

.footer-links-column a {
color: #b3b3b3;

.footer-links a {
color: #b3b3b3;;
text-decoration: none;
}

.footer-links a:hover {
.footer-links-column a:hover {
text-decoration: underline;
}

.footer-bottom {
display: flex;
flex-direction: column; /* stack vertically */
align-items: flex-start;
flex-direction: column;
align-items: center;
gap: 10px;
margin-top: 20px;
border-top: 1px solid #333;
padding-top: 20px;
text-align: center;
}


.language-select {
background: rgba(0, 0, 0, 0.7);
color: #b3b3b3;
Expand All @@ -869,3 +915,30 @@ footer .questions a {
color: #b3b3b3;
padding-top: 20px;
}

/* Back to Top Button */
.back-to-top {
position: fixed;
bottom: 30px;
left:30px;
right: 30px;
width: 60px;
height: 60px;
font-size: 30px;
background: #e50914;
color: #fff;
border: none;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
z-index: 1000;
transition: background-color 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
}

.back-to-top:hover {
background-color: #b20710;
}