A beautiful day

Developer
Xavier Martínez
Size
2,973 Kb
Views
26,312
  1. A beautiful day Previews
  2. A beautiful day HTML Codes
  3. A beautiful day CSS Codes

How do I make an a beautiful day?

Simple CSS Drawings + Animations. Have a nice day! :). What is a a beautiful day? How do you make a a beautiful day? This script and codes were developed by Xavier Martínez on 19 September 2022, Monday.

A beautiful day Previews
IQ Test

A beautiful day - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A beautiful day</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="sky"> <div class="sun"> <div class="eye"></div> <div class="eye"></div> <div class="smile"></div> </div> <div class="cloud anicloud1"> <div class="eye-cloud"></div> <div class="eye-cloud"></div> <div class="smile-cloud"></div> </div> <div class="cloud anicloud2"> <div class="eye-sleepy"></div> <div class="eye-sleepy"></div> <div class="sleep-cloud"></div> </div> <div class="cloud anicloud3"> <div class="eye-cloud"></div> <div class="eye-cloud"></div> <div class="smile-cloud"></div> </div>
</div>
</body>
</html>

A beautiful day - Script Codes CSS Codes

body { margin: 0;
}
.sky { overflow: hidden; height: 100vh; background-image: linear-gradient(to top, #d299c2 0%, #fef9d7 100%);
}
.sun { position: absolute; top: 100px; left: 70%; width: 120px; height: 120px; background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%); border-radius: 60px;
}
.sun .smile { position: relative; top: 32px; left: calc(50% - 10px); width: 20px; height: 10px; border-bottom: 10px solid #880E4F; border-radius: 100%;
}
.sun .eye { display: inline-block; position: relative; top: 37px; width: 10px; height: 10px; border-radius: 10px; background-color: #880E4F;
}
.sun .eye:nth-child(1) { left: 30%;
}
.sun .eye:nth-child(2) { left: 50%;
}
.cloud { width: 250px; height: 100px; background: linear-gradient(to bottom, #fff1f3 55%, #f9cbd2 100%); border-radius: 50px; position: absolute;
}
.cloud .smile-cloud, .cloud .sleep-cloud { position: relative; top: 12px; left: calc(50% + 30px); width: 50px; height: 20px; border-bottom: 20px solid #EF9A9A; border-radius: 100%;
}
.cloud .eye-cloud, .cloud .eye-sleepy { display: inline-block; position: relative; top: 15px; width: 10px; height: 20px; border-radius: 20px; background-color: #EF9A9A;
}
.cloud .eye-cloud:nth-child(1), .cloud .eye-sleepy:nth-child(1) { left: 65%;
}
.cloud .eye-cloud:nth-child(2), .cloud .eye-sleepy:nth-child(2) { left: 70%;
}
.cloud .eye-sleepy { width: 20px; height: 10px;
}
.cloud .sleep-cloud { width: 40px; height: 40px; top: 0px;
}
.cloud::after { position: absolute; width: 80px; height: 80px; top: -40px; left: 40px; border-radius: 40px; content: ''; background: #fff1f3; z-index: -1;
}
.cloud::before { width: 120px; height: 120px; top: -60px; right: 40px; border-radius: 200px; content: ''; position: absolute; background: #fff1f3; z-index: -1;
}
.anicloud1 { top: 200px; z-index: 100; animation: drift 25s linear infinite;
}
.anicloud2 { top: 400px; left: -200px; z-index: 100; animation: drift 35s 10s linear infinite backwards;
}
.anicloud3 { top: 100px; left: -200px; z-index: 100; animation: drift 35s 5s linear infinite backwards;
}
@keyframes drift { from { transform: translateX(-255px); } to { transform: translateX(calc(100vw + 125px)); }
}
A beautiful day - Script Codes
A beautiful day - Script Codes
Home Page Home
Developer Xavier Martínez
Username xmjol
Uploaded September 19, 2022
Rating 3
Size 2,973 Kb
Views 26,312
Do you need developer help for A beautiful day?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Xavier Martínez (xmjol) Script Codes
Name
React UI - 01 - Voting System
React UI - 04 Steps Form
Let
ReactJS Arrays
Background Styles
React UI - 07 - Random Image Generator Giphy API
4-block-flex Round
Article Header Collapse
ResaFav Customizer
Flex Side-content-2
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!