Create Responsive Animated Website Using HTML & CSS.
OUTPUT:
We have also created a custom scroll-bar with a gradient color.
index.html
#The navigation Bar:(html)
<div class="navbar">
<nav>
<ul>
<li class="icon"><i class="fa fa-headphones" id="headphone" aria-hidden="true"><a class="music">MyMusic</a></i></li>
<--!making the headphone icon !-->
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>CONTACT</li>
<button class="button-1">Sign Up</button>
</ul>
</nav>
</div>
'
#Styling the navigation:(CSS)-
.navbar {
height: 90px;
background: #0c1029;
}
ul {
margin-left: 250px;
display: flex;
}
li {
font-family: 'Dekko', cursive;
transition: .4s;
cursor: pointer;
margin-top: 20px;
color: antiquewhite;
padding: 20px;
list-style: none;
}
li:hover {
color: #b61ed1;
}
.button-1 {
cursor: pointer;
background: #d61155;
color: antiquewhite;
width: 110px;
height: 50px;
font-weight: bold;
border: solid #d61155;
border-radius: 35px;
margin-top: 24px;
margin-left: 400px;
transition: .6s;
}
.button-1:hover {
background: antiquewhite;
border-color: #ffffff;
color: #e20e5f;
transform: translateY(-10px);
}
We have also created an icon of our Webpage(MyMusic.com). So, we will first import that font from font awesome.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
Some amazing fonts from The Google fonts API:
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Dekko&family=Rubik:wght@500&display=swap" rel="stylesheet">
#We will be using them later...
LETS CREATE THE MAIN CONTENT.
<div class="header">
<h1><strong><a class="musicforall">Music</a> for everyone</strong></h1><img src="23938-removebg-preview.png"><br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusantium blanditiis, voluptate fuga doloribus ipsam debitis, ratione unde d
oloremque hic nostrum possimus vitae aliquam temporibus assumenda ducimus quas
ipsa perspiciatis, perferendis.</p><br>
<button class="but2"><a class="shu" href="#">Download App Now</a></button>
<button class="but3">Start 30 days Free Trial</button>
</div>
Styling it with CSS
.header {
margin-top: 140px;
margin-left: 140px;
font-size: 2rem;
font-family: Arial Rounded MT;
}
.musicforall {
color: #ff0089;
}
h1 {
color: aliceblue;
}
p {
width: 700px;
font-size: 20px;
color: azure;
font-family: Candara;
}
.but2,
.but3 {
border: solid;
border-radius: 50px;
padding: 10px;
font-family: Arial Rounded MT;
color: aliceblue;
}
.but2 {
background: #ff0045;
border-color: #ff0045;
}
.but3 {
background: grey;
border-color: grey;
}
.but2:hover {
transform: translateY(-10px);
}
.but3:hover {
transform: translateY(-10px);
}
img {
position: absolute;
margin-left: 720px;
margin-top: -130px;
width: 400px;
height: 400px;
animation-name: hovereffect;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes hovereffect {
from {
transform: scale(1);
}
to {
transform: scale(1.3);
}
}
.shu {
color: aliceblue;
}
CREATING THE CUSTOM SCROLL-BAR:-
main.css
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-thumb {
border-radius: 30px;
background: -webkit-gradient(linear, left top, left bottom, from(#ff8a00), to(#da1b60));
box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.25), inset -2px -2px -2px rgba(0, 0, 0, 0.25);
}
FULL CODE USED:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyMusic.com</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Dekko&family=Rubik:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<div class="navbar">
<nav>
<ul>
<li class="icon"><i class="fa fa-headphones" id="headphone" aria-hidden="true"><a class="music">MyMusic</a></i></li>
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>CONTACT</li>
<button class="button-1">Sign Up</button>
</ul>
</nav>
</div>
<div class="header">
<h1><strong><a class="musicforall">Music</a> for everyone</strong></h1><img src="23938-removebg-preview.png"><br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusantium blanditiis, voluptate fuga doloribus ipsam debitis, ratione unde d
oloremque hic nostrum possimus vitae aliquam temporibus assumenda ducimus quas
ipsa perspiciatis, perferendis.</p><br>
<button class="but2"><a class="shu" href="https://play.google.com/store/apps/details?id=com.spotify.music">Download App Now</a></button> <button class="but3">Start 30 days Free Trial</button>
</div><br>
</body></html>
main.css
* {
margin: 0;
padding: 0;
}
button {
cursor: pointer;
transition: .4s;
}
body {
height: 1400px;
background-color: #081d2f;
}
a {
text-decoration: none;
}
.navbar {
height: 90px;
background: #0c1029;
}
ul {
margin-left: 250px;
display: flex;
}
li {
font-family: 'Dekko', cursive;
transition: .4s;
cursor: pointer;
margin-top: 20px;
color: antiquewhite;
padding: 20px;
list-style: none;
}
li:hover {
color: #b61ed1;
}
.button-1 {
cursor: pointer;
background: #d61155;
color: antiquewhite;
width: 110px;
height: 50px;
font-weight: bold;
border: solid #d61155;
border-radius: 35px;
margin-top: 24px;
margin-left: 400px;
transition: .6s;
}
.button-1:hover {
background: antiquewhite;
border-color: #ffffff;
color: #e20e5f;
transform: translateY(-10px);
}
i {
margin-left: 10px;
position: relative;
margin-top: -6px;
font-size: 30px;
cursor: auto;
}
.music {
position: relative;
margin-top: 30px;
font-size: 15px;
text-decoration: none;
font-family: monospace;
}
.icon {
animation-name: rotateyo;
animation-direction: alternate;
animation-duration: .5s;
animation-iteration-count: infinite;
animation-fill-mode:
}
.icon:hover {
text-shadow: 2px 2px 8px #ff7600;
color: #ff0058;
}
@keyframes rotateyo {
from {
transform: rotate(5deg);
}
to {
transform: rotate(-5deg);
}
}
.header {
margin-top: 140px;
margin-left: 140px;
font-size: 2rem;
font-family: Arial Rounded MT;
}
.musicforall {
color: #ff0089;
}
h1 {
color: aliceblue;
}
p {
width: 700px;
font-size: 20px;
color: azure;
font-family: Candara;
}
.but2,
.but3 {
border: solid;
border-radius: 50px;
padding: 10px;
font-family: Arial Rounded MT;
color: aliceblue;
}
.but2 {
background: #ff0045;
border-color: #ff0045;
}
.but3 {
background: grey;
border-color: grey;
}
.but2:hover {
transform: translateY(-10px);
}
.but3:hover {
transform: translateY(-10px);
}
img {
position: absolute;
margin-left: 720px;
margin-top: -130px;
width: 400px;
height: 400px;
animation-name: hovereffect;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-thumb {
border-radius: 30px;
background: -webkit-gradient(linear, left top, left bottom, from(#ff8a00), to(#da1b60));
box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.25), inset -2px -2px -2px rgba(0, 0, 0, 0.25);
}
@keyframes hovereffect {
from {
transform: scale(1);
}
to {
transform: scale(1.3);
}
}
.shu {
color: aliceblue;
}
.copywright {
background: grey;
}
_________________________________________________
THANK YOU.....
No comments: