- Get link
- X
- Other Apps
Source Code:
1) index.html
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>W E B P A G E</title>
</head>
<body>
<div class="bgimage">
<div class="navbar">
<h2>Website Name/Logo</h2>
<button type="button">Sign Up</button>
</div>
<div class="content">
<medium>Welcome to </medium>
<h1>World's<br> Creative Ideas</h1>
<button type="button">Take a Tour</button>
</div>
<div>
<div class="side-bar">
<div class="home">
<i class="fa fa-home"></i><br>
</div>
<div class="social-links">
<i class="fa fa-facebook"></i><br>
<i class="fa fa-instagram"></i><br>
<i class="fa fa-youtube"></i><br>
</div>
<div class="useful-links">
<i class="fa fa-share-alt"></i><br>
<i class="fa fa-info"></i>
</div>
</div>
<div class="bubble">
<img src="bubble.png">
<img src="bubble.png">
<img src="bubble.png">
<img src="bubble.png">
<img src="bubble.png">
<img src="bubble.png">
<img src="bubble.png">
<img src="bubble.png">
<img src="bubble.png">
<img src="bubble.png">
<img src="bubble.png">
<img src="bubble.png">
<img src="bubble.png">
<img src="bubble.png">
<img src="bubble.png">
<img src="bubble.png">
<img src="bubble.png">
<img src="bubble.png">
<img src="bubble.png">
<img src="bubble.png">
<img src="bubble.png">
<img src="bubble.png">
<img src="bubble.png">
<img src="bubble.png">
<img src="bubble.png">
<img src="bubble.png">
<img src="bubble.png">
<img src="bubble.png">
<img src="bubble.png">
<img src="bubble.png">
</div>
</div>
</body>
</html>
2) style.css
body{
margin:0;
padding:0;
font-family:sans-serif;
letter-spacing:2;
}
.bgimage{
width:100%;
height:100vh;
background-image:url(bgimage.png);
background-size:cover;
background-position:center;
position:relative;
overflow:hidden;
}
h2{
color:#fff;
cursor:pointer;
}
.navbar{
width:85%;
height:15%;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
}
button{
color:#fbfcfd;
padding:10px 25px;
background:transparent;
border:solid #fff 1px;
border-radius:20px;
outline:none;
cursor:pointer;
animation:btn 1s linear;
}
button:hover{
color:#006;
background:#fff;
transition:1s;
}
.content{
color:#fbfcfd;
position:absolute;
top:50%;
left:9%;
transform:translateY(-50%);
z-index:2;
}
h1{
font-size:85px;
margin:10px 0 30px;
line-height:80px;
}
.side-bar{
width:50px;
height:100vh;
background-color:rgb(0,0,0,.5);
position:absolute;
right:0;
top:0;
animation:side 1s linear infinite;
}
.menu{
display:block;
width:40px;
margin:40px auto 0;
cursor:pointer;
}
.home i, .social-links i, .useful-links i{
width:50px;
margin:0px;
cursor:pointer;
padding:5px;
color:#fff;
}
.home {
width:50px;
text-align:center;
position:absolute;
font-size:30px;
margin:0px;
top:8%;
transform:translateY(-50%);
}
.social-links {
width:50px;
text-align:center;
position:absolute;
font-size:20px;
margin:0px;
top:50%;
transform:translateY(-50%);
}
.useful-links {
width:50px;
text-align:center;
position:absolute;
font-size:20px;
margin:0px;
bottom:5%;
}
.bubble img{
width:50px;
animation:anim 5s linear infinite;
}
@keyframes anim{
0%{
transform:translateY(0);
opacity:0;
}
50%{
opacity:1;
}
70%{
opacity:1;
}
100%{
transform:translateY(-130vh);
opacity:0;
}
}
.bubble img:nth-child(1){
animation-delay:1s; width:15px;
}
.bubble img:nth-child(2){
animation-delay:2.5s; width:20px;
}
.bubble img:nth-child(3){
animation-delay:3s; width:10px;
}
.bubble img:nth-child(4){
animation-delay:4.5s; width:15px;
}
.bubble img:nth-child(5){
animation-delay:2s; width:25px;
}
.bubble img:nth-child(6){
animation-delay:4.5s; width:15px;
}
.bubble img:nth-child(7){
animation-delay:1.5s; width:20px;
}
.bubble img:nth-child(8){
animation-delay:2s; width:35px;
}
.bubble img:nth-child(9){
animation-delay:3s; width:20px;
}
.bubble img:nth-child(10){
animation-delay:2.5s; width:10px;
}
.bubble img:nth-child(11){
animation-delay:1s; width:15px;
}
.bubble img:nth-child(12){
animation-delay:2.5s; width:20px;
}
.bubble img:nth-child(13){
animation-delay:3s; width:10px;
}
.bubble img:nth-child(14){
animation-delay:4.5s; width:15px;
}
.bubble img:nth-child(15){
animation-delay:2s; width:20px;
}
.bubble img:nth-child(16){
animation-delay:4.5s; width:10px;
}
.bubble img:nth-child(17){
animation-delay:1.5s; width:18px;
}
.bubble img:nth-child(18){
animation-delay:2s; width:5px;
}
.bubble img:nth-child(19){
animation-delay:3s; width:35px;
}
.bubble img:nth-child(20){
animation-delay:2.5s; width:10px;
}
.bubble img:nth-child(21){
animation-delay:1s; width:15px;
}
.bubble img:nth-child(22){
animation-delay:2.5s; width:20px;
}
.bubble img:nth-child(23){
animation-delay:3s; width:10px;
}
.bubble img:nth-child(24){
animation-delay:4.5s; width:15px;
}
.bubble img:nth-child(25){
animation-delay:1.5s; width:25px;
}
.bubble img:nth-child(26){
animation-delay:3s; width:15px;
}
.bubble img:nth-child(27){
animation-delay:4s; width:20px;
}
.bubble img:nth-child(28){
animation-delay:2s; width:35px;
}
.bubble img:nth-child(29){
animation-delay:1.5s; width:20px;
}
.bubble img:nth-child(30){
animation-delay:2s; width:10px;
}
.bubble{
width:100%;
display:flex;
align-items:center;
justify-content:space-around;
position:absolute;
bottom:-50%;
}
Comments
Post a Comment
If you any Query and get more information please comment it. Thanks for visit our blog.