Skip to content

Fixed Issue50: Added Navigation to different sections using nav bar links #78

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

Fixed Issue50: Added Navigation to different sections using nav bar links #78

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ae3dc58
Added an about section
iamvetruvian Oct 2, 2024
66335b1
Added custom cursor
iamvetruvian Oct 2, 2024
d387e69
Added feature to navigate to different sections using nav bar links
iamvetruvian Oct 2, 2024
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
76 changes: 61 additions & 15 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,16 @@
<title>Nike India</title>
</head>
<body>

<div class="custom-cursor" id="cursor"></div>
<div class="main">
<div class="header">
<header>
<img src="logo.png" alt="">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">products</a></li>
<li><a href="#">support</a></li>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#products">products</a></li>
<li><a href="#support">support</a></li>
</ul>

<i class="ri-shopping-cart-line" id="cart"></i>
Expand All @@ -30,10 +30,10 @@
</header>
<div class="Hamburger">
<ul>
<li><a href="#" class="active whiteTxt">Home</a></li>
<li><a href="#" class="whiteTxt">About</a></li>
<li><a href="#" class="whiteTxt">products</a></li>
<li><a href="#" class="whiteTxt">support</a></li>
<li><a href="index.html" class="active whiteTxt">Home</a></li>
<li><a href="#about" class="whiteTxt">About</a></li>
<li><a href="#products" class="whiteTxt">products</a></li>
<li><a href="#support" class="whiteTxt">support</a></li>
</ul>
</div>
</div>
Expand Down Expand Up @@ -255,13 +255,42 @@ <h5>Nike Air Max</h5>

</div>
</section>
<footer class="footer">
<div class="container">
<div class="footer-section">
<h3>About Us</h3>
<p>Nike is a global leader in sportswear, committed to innovation and inspiring athletes at all levels. Our mission is to bring performance-driven products that empower individuals to achieve their potential, while driving sustainability and creating a better future through sport.</p>
<section class="about-sec">
<div id="about">
<div class="about-content">
<h2>About Us</h2>

<p>At Nike, we are driven by a mission to bring inspiration and innovation to every athlete in the world. Founded in 1964 as Blue Ribbon Sports, we have grown to become a global leader in sportswear and athletic equipment. Our commitment to pushing boundaries and challenging the status quo is reflected in our diverse range of products, from high-performance shoes and apparel to cutting-edge sports technology. <br><br>

We believe that if you have a body, you are an athlete, and our goal is to support every individual in unlocking their full potential. Through constant innovation, collaboration with top athletes, and an unwavering focus on sustainability, we continue to lead the industry with breakthrough designs and products. <br><br>

At the heart of Nike is a deep passion for sport and an unwavering dedication to providing the best for athletes at all levels. From our iconic Air Max and Flyknit technologies to our commitment to reducing environmental impact, we strive to make a lasting impact on both the sporting world and the planet.

With a global presence and a community of passionate fans, Nike is more than just a brand—it’s a movement that empowers people to dream big, push boundaries, and just do it.</p>
</div>
<!-- <div class="headqrtrs">
<img src="headqrtr.png">
</div> -->
</div>


</section>
<section class="contact-us">
<div id="support">
<div class="support-content">
<h2>Get Help</h2>

<p>Customer Support: (82)-345-234-90<br> <a>Drop Us a Mail: support@nike.in</a></p>
</div>
<!-- <div class="headqrtrs">
<img src="headqrtr.png">
</div> -->
</div>


</section>
<footer class="footer">
<div class="container">
<div class="footer-section">
<h3>Quick Links</h3>
<ul class="links" id="link1">
Expand All @@ -279,6 +308,23 @@ <h3>Quick Links</h3>
&copy; 2024 | Nike India
</div>
</footer>

<div class="custom-cursor" id="cursor"></div>
<script>
const circle = document.getElementById('cursor');
document.addEventListener('mousemove', (evnt) => {
circle.style.left = evnt.pageX + 'px';
circle.style.top = evnt.pageY + 'px'
});

document.addEventListener('mouseenter', () => {
circle.style.display = 'block';
});

document.addEventListener('mouseleave', () => {
circle.style.display = 'none';
});

</script>

</body>
</html>
89 changes: 86 additions & 3 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@
background: #555;
}


body {
scrollbar-width: thin;
scrollbar-color: #888686 #f7f3f3;
Expand All @@ -34,8 +33,19 @@ body {
html,body{
width: 100vw;
height: 100vh;
cursor: none;

}
.custom-cursor{
width:20px;
height: 20px;
border-radius: 50%;
border: 4px solid red;
/* background-color: red; */
position: absolute;
/* pointer-events: none; */
z-index: 9999;
}

.main{
width: 100vw;
Expand Down Expand Up @@ -77,6 +87,7 @@ header{


}

.Hamburger ul li a{
text-transform: uppercase;
text-decoration: none;
Expand Down Expand Up @@ -305,7 +316,7 @@ header i:hover,header #cart:hover{

.sec{
width: 100%;
height: 269%;
height: 180%;
display: flex;
background-color: #414247;
overflow-x: hidden;
Expand All @@ -315,7 +326,7 @@ header i:hover,header #cart:hover{
.sec #para{
position:absolute;
margin-top: 50px;
left: 33%;
left: 33%;
}

.sec #para h1{
Expand Down Expand Up @@ -349,6 +360,77 @@ header i:hover,header #cart:hover{


}


.about-sec{
width: 100%;
height: 120%;
display: flex;
background-color: #232327;
overflow-x: hidden;

}
.about-sec #about h2{
position: absolute;
margin-top: 10%;
font-size: 2rem;
font-weight: 700;
color: rgb(255, 59, 59);
font-family: 'Poppins', sans-serif;
margin-left: 20px;


}
.about-sec #about p{
position: absolute;
margin-top: 15%;
font-size: 1.45rem;
color: white;
font-family: 'Poppins', sans-serif;
margin-left: 20px;

}


.contact-us{
width: 100%;
height: 50%;
display: flex;
background-color: #404347;
overflow-x: hidden;

}
.contact-us #support h2{
position: absolute;
margin-top: 10%;
font-size: 2rem;
font-weight: 700;
color: rgb(255, 59, 59);
font-family: 'Poppins', sans-serif;
margin-left: 20px;


}
.contact-us #support p{
position: absolute;
margin-top: 15%;
font-size: 1.45rem;
color: white;
font-family: 'Poppins', sans-serif;
margin-left: 20px;

}
.contact-us #support a{
position: absolute;
margin-top: 5%;
font-size: 1.45rem;
color: white;
font-family: 'Poppins', sans-serif;
margin-left: 0px;

}


.recommended-product img {
width: 100%; /* Responsive image */
height: auto; /* Maintain aspect ratio */
Expand Down Expand Up @@ -626,6 +708,7 @@ i.ri-menu-3-fill {


}

#recommendedproduct {
display: grid;
position: relative;
Expand Down