Monochromatic landscape Made By Pure CSS – Monochromatic landscape

Monochromatic landscape Made By Pure CSS  –  Monochromatic landscape

Welcome๐ŸŽ‰ to Code With Random 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

Monochromatic landscape Made By Pure CSS  -  Monochromatic landscape
Blank Output, we use Css For Monochromatic landscape

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;
}
.s6 {
top: 38px;
left: 300px;
}
.s7 {
top: 180px;
left: 355px;
}
.s8 {
top: 270px;
left: 10px;
}
.s9 {
top: 130px;
left: 200px;
}
.s10 {
top: 10px;
left: 250px;
}

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 CSSHope 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.

Written by – Code With Random/Anki 

code by – Sushree Biswal

Check out more…..

Share on:

0 thoughts on “Monochromatic landscape Made By Pure CSS – Monochromatic landscape”

Leave a Comment