HTML
<html>
<head>
<meta charset="ISO-8859-1">
<title>India Gate</title>
</head>
<body>
<div class="container pr">
<div class="sun pa"></div>
<div class="fl gate pr tc brdb">
<div class="brd bg1 e1 fc"></div>
<div class="brd bg2 e2 fc mtm2"></div>
<div class="brd mtm2 bg1 e3 fc"></div>
<div class="brd mtm2 bg2 e4 fc cf pr">
<div class="brdb pa e39"></div>
<div class="brdb pa e40"></div>
<div class="brd mr10 fl bg1 e5 bs"></div>
<div class="brd mr10 fl e6 bs">
<div class="e7 bg2 brdb brdr brdl fc bs"></div>
</div>
<div class="brd fl bg1 e5 bs"></div>
</div>
<div class="brd mtm2 fc bg1 e8"></div>
<div class="brd mtm2 fc bg2 e9">
<div class="brdb e38"></div>
</div>
<div class="e10 fc">
<div class="e11 brd mtm2 fc bg1">
<div class="e12 brdb bg4"></div>
<ul class="cf e13">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="cf mtm2 brd fc e14 mbm2">
<div class="fl e15 brdr bg2 bs2">
<div class="e18 bs brd bg1">
<div class="e19 brd bg2"></div>
</div>
<div class="brd e20 fc bg3 pr">
<div class="cf brdb bs">
<div class="brdr fl e21 bg2"></div>
<div class="brdr fl e21 bg1"></div>
<div class="fl e21 bg2"></div>
</div>
<div class="brd fc bg1 e22 bs"></div>
<div class="brdb e37"></div>
<div class="fc e23">
<div class="e24 bg1 brd bs"></div>
</div>
<div class="e25 pa brdb"></div>
<div class="e26 pa brdb"></div>
<div class="e27 pa brdb"></div>
<div class="e28 pa brdb"></div>
<div class="e29 bs pa brdb"></div>
<div class="e30 pa brdr brdl bg1"></div>
</div>
</div>
<div class="fl bg1 e16 brdr pr">
<div class="brdb bg2 bs e32"></div>
<div class="brdb brdr brdl bg2 bs e33 fc mtm2"></div>
<div class="e34 pa brd"></div>
<div class="e31 pa brd pr">
<div class="fogg7 bg5 pa"></div>
<div class="fogg8 bg5 pa"></div>
</div>
<div class="brdb pa e35"></div>
<div class="brdb pa e36"></div>
</div>
<div class="fl e17 bg2">
<div class="e18 bs brd bg1">
<div class="e19 brd bg2"></div>
</div>
<div class="brd e20 fc bg3 pr">
<div class="cf brdb bs">
<div class="brdr fl e21 bg2"></div>
<div class="brdr fl e21 bg1"></div>
<div class="fl e21 bg2"></div>
</div>
<div class="brd fc bg1 e22 bs"></div>
<div class="brdb e37"></div>
<div class="fc e23">
<div class="e24 bg1 brd bs"></div>
</div>
<div class="e25 pa brdb"></div>
<div class="e26 pa brdb"></div>
<div class="e27 pa brdb"></div>
<div class="e28 pa brdb"></div>
<div class="e29 pa brdb bs"></div>
<div class="e30 pa brdr brdl bg1"></div>
</div>
</div>
</div>
</div>
</div>
<div class="tree pa tree1">
<div class="leaf"></div>
<div class="base"></div>
</div>
<div class="tree pa tree2">
<div class="leaf"></div>
<div class="base"></div>
</div>
<div class="tree pa tree3">
<div class="leaf"></div>
<div class="base"></div>
</div>
<div class="tree pa tree4">
<div class="leaf"></div>
<div class="base"></div>
</div>
<div class="fogg_container">
<div class="fogg1 pa bg5"></div>
<div class="fogg2 pa bg5"></div>
<div class="fogg3 pa bg5"></div>
<div class="fogg4 pa bg5"></div>
<div class="fogg5 pa bg5"></div>
<div class="fogg6 pa bg5"></div>
</div>
</div>
</body>
</html>
CSS
html,body{
padding: 0;
margin: 0;
}
.container{
height: 800px;
width: 800px;
margin: 5% auto 0 auto;
background-color: #CDEFFF;
border-radius: 50%;
position: relative;
}
.cf{
clear: both;
display: table;
}
.fl{float: left}
.fr{float: right}
.fc{margin-left: auto; margin-right: auto}
.tc{text-align: center}
.pr{position: relative}
.pa{position: absolute}
.pf{position: fixed}
.bg1{background-color: #DEA863}
.bg2{background-color: #E6BC87}
.bg3{background-color: #EBC99F}
.bg4{background-color: #DDA55D}
.bg5{background-color: #FAFAFA}
.bg6{background-color: #DBF3FC}
.brd{border: 2px solid #213A3D}
.brdt{border-top: 2px solid #213A3D}
.brdr{border-right: 2px solid #213A3D}
.brdb{border-bottom: 2px solid #213A3D}
.brdl{border-left: 2px solid #213A3D}
.mtm2{margin-top: -2px}
.mbm2{margin-bottom: -2px}
.bs{
box-shadow: 0 3px 0 rgba(0,0,0,.17)
}
.mr10{margin-right: 10px;}
.sun{
background-color: #FFD56C;
height: 100px;
width: 100px;
border-radius: 50%;
left: 170px;
overflow: hidden;
}
.sun:after{
content: '';
background-color: #FFE693;
height: 100px;
width:85px;
position: absolute;
border-radius: 50px 0 0 50px;
right: 0;
}
.gate{
width: 550px;
margin: 120px 130px 0 125px;
z-index: 2;
}
.gate:after{
content: '';
width: 550px;
background-color: #EBC99F;
height: 10px;
margin: 2px auto;
position: absolute;
left:0;
}
.e1{
height: 7px;
width: 40px;
}
.e2{
width: 70px;
height: 15px;
border-radius: 90px 90px 0 0;
}
.e3{
height: 7px;
width: 150px;
}
.e4{
width: 230px;
padding: 20px;
}
.e5{
height: 25px;
width: 25px;
border-radius: 50%;
}
.e6{
height: 15px;
width: 148px
}
.e7{
height: 10px;
width: 50px;
margin-top: 15px;
}
.e8{
height: 20px;
width: 320px;
}
.e9{
height: 30px;
width: 350px;
}
.e10{
perspective: 300px;
margin-top: -9px;
width: 380px;
}
.e11{
transform: rotateX(-50deg);
height: 40px;
}
.e12{
height: 15px;
}
.e13{
padding: 0px;
margin-top: 0;
overflow: hidden;
height: 22px;
width: 100%;
}
.e13 li{
height: 22px;
display: inline-block;
list-style-type: none;
width: 30px;
border-right: 2px solid #213A3D;
}
.e13 li:nth-child(even){
background-color: #DDA55D;
}
.e13 li:nth-child(odd){
background-color: #CE975B;
}
.e13 li:first-child{
border-left: 2px solid #213A3D;
}
.e14{
height: 300px;
width: 350px;
z-index: 2;
}
.e15, .e17{
width: 100px;
height: 350px;
}
.e16{
width: 146px;
height: 350px;
}
.e18{
height: 40px;
width: 40px;
border-radius: 50%;
margin: 20px auto 10px auto;
}
.e19{
height: 25px;
width: 25px;
border-radius: 50%;
margin: 5.5px auto;
}
.e20{
width: 70px;
height: 274px
}
.e21{
height: 20px;
width: 22px;
}
.e22{
margin: 30px auto 5px auto;
height: 30px;
width: 55px;
}
.e23{
perspective: 100px;
width: 83px;
margin-left: -6px
}
.e24{
transform: rotateX(-50deg);
height: 20px;
}
.e25{
width: 15px;
left: 5px;
bottom: 80px;
}
.e26{
width: 30px;
left: 5px;
bottom: 70px;
}
.e27{
width: 75px;
left: -15px;
bottom: 60px;
}
.e28{
width: 15px;
right: -15px;
bottom: 60px;
}
.e29{
width: 100px;
left: -15px;
bottom: 25px;
}
.e30{
height: 25px;
width: 40px;
bottom: 0;
left: 13px
}
.e17 .e25{
right: 5px;
left: auto;
}
.e17 .e26{
right: 5px;
left: auto;
}
.e17 .e27{
right: -15px;
left: auto;
}
.e17 .e28{
left: -15px;
right: auto;
}
.e31{
height: 300px;
width: 100px;
left: 20px;
bottom: -2px;
border-radius: 50px 50px 0 0;
background-color: #CDEFFF;
overflow: hidden;
}
.e32{
height: 15px;
border-top: 1px solid #213A3D;
}
.e33{
height: 12px;
width: 10px;
}
.e34{
height: 70px;
width: 120px;
left: 10px;
top: 35px;
border-radius: 60px 60px 0 0;
borer-bottom: 0px;
}
.e35{
top: 107px;
left: -103px;
width: 130px;
}
.e36{
top: 107px;
right: -103px;
width: 130px;
z-index: 2;
}
.e37{
margin-bottom: -5px;
width: 85px;
z-index: 2;
}
.e17 .e37{
margin-left: -15px;
}
.e38{
width: 20px;
margin: 5px;
}
.e39{
width: 20px;
top: 7px;
left: 5px;
}
.e40{
width: 12px;
top: 18px;
left: 5px;
}
.tree{
z-index: 1;
}
.leaf{
border-right: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 100px solid #8BC53F;
border-radius: 0px 0px 50px 50px;
}
.base{
width: 2px;
height: 110px;
background-color: #213A3D;
margin: -40px 0 0 50px;
}
.base:after{
content: "";
width: 2px;
height: 20px;
background-color: #213A3D;
position: absolute;
top: 75px;
transform: rotate(45deg);
left: 57px;
}
.base:before{
content: "";
width: 2px;
height: 20px;
background-color: #213A3D;
position: absolute;
top: 60px;
transform: rotate(-40deg);
left: 43px;
}
.tree1{
bottom: 132px;
left: 100px;
z-index: 2;
}
.tree2{
bottom: 80px;
left: 135px;
transform: scale(0.4);
}
.tree3{
bottom: 132px;
right: 100px;
z-index: 2;
}
.tree4{
bottom: 80px;
right: 135px;
transform: scale(0.4);
}
.fogg1{
height: 500px;
width: 1000px;
border-radius: 50%;
top: 400px;
left: -100px;
}
.fogg2{
height: 100px;
width: 100px;
border-radius: 50%;
top: 420px;
left: -20px
}
.fogg3{
height: 80px;
width: 80px;
border-radius: 50%;
top: 430px;
left: 50px
}
.fogg4{
height: 150px;
width: 150px;
border-radius: 50%;
top: 390px;
left: 120px
}
.fogg5{
height: 150px;
width: 150px;
border-radius: 50%;
top: 390px;
right: -10px
}
.fogg6{
height: 150px;
width: 150px;
border-radius: 50%;
top: 400px;
right: 120px;
}
.fogg7{
height: 250px;
width: 130px;
border-radius: 50%;
top: 70px;
left: -50px;
}
.fogg8{
height: 250px;
width: 130px;
border-radius: 50%;
top: 70px;
right: -50px;
}
