tesla clone 1)html file <! 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 "> < link rel =" stylesheet " href =" https://cdnjs.cloudflare.com/ajax/libs/font-awesome /6.0.0-beta3/css/all.min.css " integrity =" sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLa nw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA== " crossorigin =" anonymous " referrerpolicy =" no-referrer " /> < link rel =" preconnect " href =" https://fonts.googleapis.com "> < link rel =" preconnect " href =" https://fonts.gstatic.com " crossorigin > < link rel =" stylesheet " href =" ./style.css "...
navbar
1)html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="./style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav>
<h1>5star programmer</h1>
</nav>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script src="./index.js"></script>
</body>
</html>
2)css file
*{
padding: 0;
margin: 0;box-sizing: border-box;
}
body{
width: 100vw;
}
nav{
text-align: center;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0%;
left: 0%;right: 0%;
transition: all 0.5s;
}
.box{
width: 100vw;
height: 100vh;
}
.show{
background-color: orange;
}
3)javascript file
const Navbar = document.querySelector('nav');
window.addEventListener('scroll',()=>{
if(window.scrollY > 100)
{
Navbar.classList.add('show');
}
else
{
Navbar.classList.remove('show');
}
})
Comments
Post a Comment