Create landscape Design Made By Pure HTML and CSS

 

Welcome to the Codewithrandom blog. In this blog, We learn how to create a landscape Design. We use HTML and CSS  for Landscape Design. We create Monochromatic landscape Designs using Html and Css.

I hope you enjoy our blog so let’s start with a basic html structure for the landscape Design.

HTML Code For Landscape Design

<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 the html code for the Landscape Design. Now, you can see output without Css. then we write Css code for the Monochromatic landscape Design.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

Output

Blank Output, we use Css For Monochromatic landscape

CSS Code For Landscape Design

 * {
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;
}

Portfolio Website Using HTML ,CSS ,Bootstrap and JavaScript

We have completed our landscape Design. Here is our final updated output HTML+ CSS.

Final Output landscape Design Using HTML and CSS

100+ JavaScript Projects With Source Code ( Beginners to Advanced)