Create How to Create Scrolling effect using HTML and CSS Only from scratch.
Output :
 |
| Output |
Download Images :
Image 1 –
Image 2 –
<!DOCTYPE html>
<html>
<head>
<title>Website Design</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
font-family: sans-serif;
}
div{
height: 1000px;
}
.img-1{
background: url("file:///C:/Users/HP-Pavilion/Desktop/img-1.jpg");
background-attachment: fixed;
background-size: cover;
background-position: center;
}
.img-2{
background: url("file:///C:/Users/HP-Pavilion/Desktop/img-2.jpg");
background-attachment: fixed;
background-size: cover;
background-position: center;
}
/* Creating section Now */
.sec{
height: auto;
background-color: black;
padding: 50px;
}
h1{
color: white;
text-align: center;
font-size: 21px;
}
form{
text-align: center;
padding: 20px;
}
/*Designing Input Box */
input{
font-size: 21px;
padding: 5px;
border-radius: 5px;
outline: none;
border: none;
}
button{
font-size: 21px;
padding: 5px;
border-radius: 5px;
outline: none;
border: none;
background-color: red;
transition: .3s;
}
button:hover{
background-color: tomato;
}
/*Creating Menu */
nav{
background-color: #ffffff42;
position: fixed;
width: 100%;
}
ul{
list-style: none;
}
li{
display: inline-block;
padding: 20px;
transition: .3s;
}
li:hover{
background-color: white;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
<li>About Us</li>
</ul>
</nav>
<div class="img-1">
</div>
<div class="sec">
<h1>
Hey My name is Rajeev... Whats Your Name ?</h1>
<form>
<input type="text" name="username" placeholder="Enter Your Name">
<button>Subscribe</button>
</form>
</div>
<div class="img-2">
</div>
</body>
</html>
