Overviews
Hello readers, today in this blog you are going to learn how to create a responsive personal bubbles animation website using only HTML and CSS. Personal sites are consistent and should be taken care of throughout your business. It provides a convenient way for potential clients to showcase your business while also allowing you to expand your skills/experiences and services.
On the blog, I saw the Responsive Single Page bubbles animation Website, and I hope you understood the little icons of this design. I did my best to make this blog understandable to all readers. If this blog has been of some help to you, don't forget to leave a comment.
I have provided all the codes for this project below and also provided this project download link where you can easily download the source files of this animation website project. You can use this project with your own creative customization and you can take this project to the next level with your creativity.
------ SOURCE CODE ------
First, You need to create two files: html file and css file. After creating the files just copy the given code and paste code in your project where you create these files.
HTML
First, create an HTML file named (index.html) and paste the given code into your HTML file. Remember that you must create a file with a ( .html ) extension and the images used on this website will not appear. You have to download the files from the given download button to use the images as well.
Code is given below.👇👇👇
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Animation-Website || -Codewithzan</title>
<link rel="stylesheet" href="source/css/style.css">
</head>
<body>
<div class="header container">
<div class="navigation bar">
<span class="logo"><img src="source/img/logo.png" alt="logo"></span>
<span class="signup">
<a href="#">sign-up</a>
</span>
</div>
<div class="side-bar">
<div class="hamburger">
<img src="source/img/hamburger.png" alt="hamburger">
</div>
<div class="social">
<img src="source/img/facebook.png" alt="facebook" />
<img src="source/img/youtube.png" alt="youtube" />
<img src="source/img/instragram.png" alt="instragram" />
</div>
<div class="user">
<img src="source/img/share.png" alt="share">
<img src="source/img/email.png" alt="email">
</div>
</div>
<div class="main-content">
<span>The,</span>
<h2>web-development</h2>
<p>Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. </p>
<input class="active" type="button" value="Get start">
<input type="button" value="Learn more">
</div>
<div class="bubbles">
<img src="source/img/bubble.png" alt="bubbles">
<img src="source/img/bubble.png" alt="bubbles">
<img src="source/img/bubble.png" alt="bubbles">
<img src="source/img/bubble.png" alt="bubbles">
<img src="source/img/bubble.png" alt="bubbles">
<img src="source/img/bubble.png" alt="bubbles">
<img src="source/img/bubble.png" alt="bubbles">
</div>
</div>
</body>
</html>
We write simple html code in this project. Insert some images like background image, navigation logo, hamburger, some social media icons and finally bubbles. And link the css file.
CSS
Second, You need to create a CSS file named (style.css) and paste the given code into your CSS file. Code is given below.👇👇👇👇
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
.container {
height: 100vh;
width: 100%;
background-image: url(../img/background.jpg);
background-position: center;
background-size: cover;
background-repeat: none;
overflow: hidden;
}
.navigation {
position: relative;
margin-top: 20px;
}
.logo{
margin-left: 100px;
}
.logo img {
height: 40px;
width: auto;
}
.signup{
float: right;
margin-right: 80px;
border: 2px solid #67649A;
padding: 4px 8px;
border-radius: 10px;
}
.signup a {
text-decoration: none;
font-size: 24px;
text-transform: capitalize;
color: #ffffff;
}
.side-bar{
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 80px;
justify-content: center;
background: rgba(215, 210, 247, 1);
z-index: 1;
}
.hamburger,
.social,
.user{
margin-left: 24px;
}
.hamburger{
margin-top: 20px;
}
.hamburger img{
height: 35px;
}
.social{
margin-top: 140px;
}
.social img{
display: block;
height: 15px;
margin: 8px 0;
}
.user{
position: absolute;
bottom: 0;
}
.user img{
height: 30px;
}
.main-content{
margin: 95px 72px;
width: 380px;
background: transparent;
}
.main-content span{
font-size: 24px;
font-weight: 500;
color: #fff;
}
.main-content h2{
color: #0009D6;
font-size: 34px;
text-transform: capitalize;
}
.main-content p{
margin-top: 15px;
font-size: 14px;
color: #ffffff;
}
.main-content input{
width: 110px;
height: 45px;
margin: 25px 5px;
border-radius: 13px;
border: none;
background: #18D52A;
color: #fff;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: 1s;
}
.main-content input:hover,
.main-content input.active{
background: none;
border: 2px solid #fff;
color: #18D52A;
}
.bubbles{
position: absolute;
top: -50px;
width: 90%;
display: flex;
justify-content: space-around;
}
.bubbles img{
height: 40px;
animation: bubbles 10s linear infinite;
}
@keyframes bubbles{
0%{
transform: translateY(0);
opacity: 0;
}
30%{
opacity: 1;
}
50%{
opacity: 1;
}
100%{
transform: translateY(95vh);
opacity: 0;
}
}
.bubbles img:nth-child(1){
animation-delay: 3s;
height: 20px;
}
.bubbles img:nth-child(2){
animation-delay: 2s;
height: 25px;
}
.bubbles img:nth-child(3){
animation-delay: 4s;
height: 32px;
}
.bubbles img:nth-child(4){
animation-delay: 6s;
height: 24px;
}
.bubbles img:nth-child(5){
animation-delay: 5s;
height: 30px;
}
.bubbles img:nth-child(6){
animation-delay: 7s;
height: 34px;
}
.bubbles img:nth-child(7){
animation-delay: 1s;
height: 27px;
}
After linking html with a CSS file, We use simple css code. To manage background image, logo, social media icons, hamburger. After fixing this all positions, width, height, background colour, Font colour etc. Animation the bubbles, bubbles move slowly down top to bottom. With the help of code @key-fream. Animation time is different for all child.
Output
