India Gate

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; }
JAVASCRIPT
Expand for more options Login