couldntfindabetterusername
4 years ago
parent
cd3d41c960
commit
1f744677ce
@ -0,0 +1,54 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>25 sticky navigation</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav id="nav">
|
||||||
|
<h2 class="icon">My website</h2>
|
||||||
|
|
||||||
|
<div class="nav-items">
|
||||||
|
<span class="nav-item active">Home</span>
|
||||||
|
<span class="nav-item">About</span>
|
||||||
|
<span class="nav-item">Services</span>
|
||||||
|
<span class="nav-item">Contact</span>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="hero" id='hero'>
|
||||||
|
<div class="container">
|
||||||
|
<h1>Welcome To My Website</h1>
|
||||||
|
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores, consequuntur?</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="content">
|
||||||
|
<h2>Content One</h2>
|
||||||
|
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione dolorem voluptates eveniet tempora ut
|
||||||
|
cupiditate magnam, sapiente, hic quo in ipsum iste soluta eaque perferendis nihil recusandae dolore officia
|
||||||
|
aperiam corporis similique. Facilis quos tempore labore totam! Consectetur molestiae iusto ducimus error
|
||||||
|
reiciendis aspernatur dolor, modi dolorem sit architecto, voluptate magni sunt unde est quas? Voluptates a
|
||||||
|
dolorum voluptatum quo perferendis aut sit. Aspernatur libero laboriosam ab eligendi omnis delectus earum
|
||||||
|
labore, placeat officiis sint illum rem voluptas ipsum repellendus iste eius recusandae quae excepturi
|
||||||
|
facere,
|
||||||
|
iure rerum sequi? Illum velit delectus dicta et iste dolorum obcaecati minus odio eligendi!</p>
|
||||||
|
|
||||||
|
<h3>Content Two</h3>
|
||||||
|
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur provident nostrum possimus inventore nisi
|
||||||
|
laboriosam consequatur modi nulla eos, commodi, omnis distinctio! Maxime distinctio impedit provident,
|
||||||
|
voluptates illo odio nostrum minima beatae similique a sint sapiente voluptatum atque optio illum est!
|
||||||
|
Tenetur
|
||||||
|
tempora doloremque quae iste aperiam hic cumque repellat?</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
const nav = document.getElementById("nav");
|
||||||
|
|
||||||
|
window.addEventListener("scroll", (e) => {
|
||||||
|
if (window.scrollY > nav.offsetHeight + 150) {
|
||||||
|
nav.classList.add("scrolled");
|
||||||
|
} else {
|
||||||
|
nav.classList.remove("scrolled");
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,89 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #222;
|
||||||
|
height: 80px;
|
||||||
|
width: 100vw;
|
||||||
|
color: #fff;
|
||||||
|
transition: all 0.3s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.scrolled {
|
||||||
|
background-color: #fff;
|
||||||
|
color: #000;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav h2 {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-items {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
grid-gap: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
font-size: 18px;
|
||||||
|
transition: color 0.3s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item.active,
|
||||||
|
.nav-item:hover {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background: url("https://images.pexels.com/photos/450035/pexels-photo-450035.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.hero .container h1 {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin-top: 30px;
|
||||||
|
padding: 0 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content h2 {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content p {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
letter-spacing: 15px;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
Loading…
Reference in new issue