Monochromatic landscape Made By Pure CSS - Monochromatic landscape
Welcome🎉 to Code Tech blog. In this blog, we learn how to create a monochromatic landscape. We use HTML & CSS for Monochromatic landscape . Hope you enjoy our blog so let's start with a basic HTML structure for the Monochromatic landscape.
HTML code
<div class="container">
<div class="disc-1"></div>
<div class="disc-2"></div>
<div class="disc-3"></div>
<div class="landscape-1"></div>
<div class="landscape-2"></div>
<div class="landscape-3"></div>
<div class="landscape-4"></div>
<div class="landscape-5"></div>
<div class="tree-1"></div>
<div class="tree-2"></div>
<div class="tree-3"></div>
<div class="tree-4"></div>
<div class="tree-5"></div>
<div class="tree-6"></div>
<div class="tree-7"></div>
<div class="star s1"></div>
<div class="star s2"></div>
<div class="star s3"></div>
<div class="star s4"></div>
<div class="star s5"></div>
<div class="star s6"></div>
<div class="star s7"></div>
<div class="star s8"></div>
<div class="star s9"></div>
<div class="star s10"></div>
</div>
There is all HTML code for the Monochromatic landscape. Now, you can see output without CSS, then we write CSS for the Monochromatic landscape.
Output
CSS Code
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background-color: #0a4b78;
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 367px;
height: 500px;
position: relative;
background: linear-gradient(to bottom, #01263a 0%, #4f94d4 70%, #c5d9ed 100%);
box-shadow: 0 10px 20px rgba(0, 0, 0, .3), 0 10px 10px rgba(0, 0, 0, .3);
border-radius: 80px;
overflow: hidden;
}
.disc-1 {
position: absolute;
top: 24%;
left: 1%;
width: 359px;
height: 358px;
background: #72aee6;
opacity: 0.2;
border-radius: 50%;
animation: glow infinite 2s;
animation-fill-mode: both;
animation-direction: alternate;
}
.disc-2 {
position: absolute;
top: 35%;
left: 16%;
width: 260px;
height: 260px;
background: #9ec2e6;
opacity: 0.4;
border-radius: 50%;
animation: glow infinite 2s;
animation-fill-mode: both;
animation-direction: alternate;
}
.disc-3 {
position: absolute;
top: 43%;
left: 27%;
width: 180px;
height: 180px;
border-radius: 50%;
background: #f0f6fc;
opacity: 0.6;
animation: glow infinite 2s;
animation-fill-mode: both;
animation-direction: alternate;
}
.landscape-1 {
position: absolute;
bottom: 119px;
left: -7px;
width: 250px;
height: 70px;
background-color: #9ec2e6;
transform: rotate(9deg);
}
.landscape-2 {
position: absolute;
bottom: 90px;
right: -7px;
width: 350px;
height: 90px;
background-color: #72aee6;
transform: rotate(-6deg);
}
.landscape-3 {
position: absolute;
bottom: 65px;
left: -4px;
width: 390px;
height: 80px;
background-color: #4f94d4;
transform: rotate(5deg);
}
.landscape-4 {
position: absolute;
bottom: 50px;
left: -4px;
width: 400px;
height: 70px;
background-color: #135e96;
transform: rotate(-4deg);
}
.landscape-5 {
position: absolute;
bottom: -10px;
left: -6px;
width: 370px;
height: 90px;
background-color: #043959;
transform: rotate(5deg);
}
.tree-1 {
position: absolute;
top: 63%;
left: 30%;
height: 15px;
width: 20px;
background-color: #59a5d8;
clip-path: polygon(50% 0%, 22% 100%, 75% 100%);
box-shadow: 2px 0 2px 4px rgba(0, 0, 0, .1);
}
.tree-2 {
position: absolute;
top: 65%;
left: 80%;
height: 20px;
width: 13px;
background-color: #4f94d4;
clip-path: polygon(50% 0%, 22% 100%, 75% 100%);
box-shadow: 2px 0 2px 4px rgba(0, 0, 0, .1);
}
.tree-3 {
position: absolute;
top: 65%;
left: 5%;
height: 20px;
width: 18px;
background-color: #386fa4;
clip-path: polygon(50% 0%, 22% 100%, 75% 100%);
box-shadow: 2px 0 2px 4px rgba(0, 0, 0, .1);
}
.tree-4 {
position: absolute;
top: 70%;
left: 60%;
height: 20px;
width: 15px;
background-color: #386fa4;
clip-path: polygon(50% 0%, 22% 100%, 75% 100%);
box-shadow: 2px 0 2px 4px rgba(0, 0, 0, .1);
}
.tree-5 {
position: absolute;
top: 69%;
left: 80%;
height: 30px;
width: 25px;
background-color: #133c55;
clip-path: polygon(50% 0%, 22% 100%, 75% 100%);
box-shadow: 2px 0 2px 4px rgba(0, 0, 0, .1);
}
tree-6 {
position: absolute;
top: 74%;
left: 11%;
height: 45px;
width: 35px;
background-color: #133c55;
clip-path: polygon(50% 0%, 22% 100%, 75% 100%);
box-shadow: 2px 0 2px 4px rgba(0, 0, 0, .1);
}
.tree-7 {
position: absolute;
top: 72%;
left: 40%;
height: 35px;
width: 25px;
background-color: #133c55;
clip-path: polygon(50% 0%, 22% 100%, 75% 100%);
box-shadow: 2px 0 2px 4px rgba(0, 0, 0, .1);
}
.star {
position: absolute;
width: 2px;
height: 2px;
background-color: white;
}
.s1 {
top: 50px;
left: 17px;
}
.s2 {
top: 80px;
left: 150px;
}
.s3 {
top: 100px;
left: 30px;
}
.s4 {
top: 200px;
left: 250px;
}
.s5 {
top: 160px;
left: 140px;
}
Now we have completed our CSS section, Here is our final updated output CSS.
Final Output
Monochromatic landscape Made By Pure CSS - Monochromatic landscape
Monochromatic landscape Made By Pure CSS - Monochromatic landscape
Now we have completed our CSS section, Here is our updated output with CSS. Hope you like the Monochromatic landscape, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕
In this post, we learn how to create a Monochromatic landscape using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.