ADVERTISEMENT

Create landscape Design Made By Pure HTML and CSS

Telegram Group Join Now

ADVERTISEMENT

Create landscape Design Made By Pure HTML and CSS

landscape Design Made By Pure HTML and CSS
landscape Design Made By Pure HTML and CSS

 

ADVERTISEMENT

ADVERTISEMENT

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.

ADVERTISEMENT

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.

ADVERTISEMENT

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

Output

landscape Design Made By Pure HTML and CSS
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

ADVERTISEMENT

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

Final Output landscape Design Using HTML and CSS

landscape Design Made By Pure HTML and CSS
landscape Design Made By Pure HTML and CSS

 

ADVERTISEMENT

landscape Design Made By Pure HTML and CSS
landscape Design Made By Pure HTML and CSS

 

ADVERTISEMENT

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

I hope you like the Monochromatic landscape Design. 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 landscape Design Made By Pure HTML and CSS. If we made a mistake or any confusion, please drop a comment to reply or help you learn easily.

Written by – Code With Random/Anki

ADVERTISEMENT

code by – Sushree Biswal

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

0 thoughts on “Create landscape Design Made By Pure HTML and CSS”

  1. ADVERTISEMENT

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT