Create Scrolling Effect Using CSS and HTML

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>

reecry

Next Program to find Sum of three numbers in C++ Programming Language »

Previous « How to Create Login /Sign In form Using HTML and CSS (JavaScript)

View Comments

pratimarani says:

August 18, 2018 at 7:51 am

http://www.shreyasenterprisesvizag.com

Shreyas Enterprises Vizag is engaged in offering Home Loans to the clients In Visakhapatnam. A crew of experienced personnels

works with enthusiasm for rendering best services