Skip to content

Instantly share code, notes, and snippets.

@BlackDahlia313

BlackDahlia313/animated-city.markdown

Created July 6, 2023 18:04
Show Gist options
  • Save BlackDahlia313/abad1a84d5a805fcda810c9c04e540e2 to your computer and use it in GitHub Desktop.
Save BlackDahlia313/abad1a84d5a805fcda810c9c04e540e2 to your computer and use it in GitHub Desktop.
Download ZIP
Animated City 🏭🏢🏡
Raw
animated-city.markdown
Raw
index.html
<div class="container">
<!-- sky stuff -->
<div class="cloud" style="bottom:980px;"></div>
<div class="cloud2" style="bottom:1100px;"></div>
<!-- background bushes and hills behind city -->
<div class="green-lighterer hill" style="bottom:700px;left:15%;"></div>
<div class="green-lighterer hill" style="bottom:525px;left:38%;"></div>
<div class="green-lighterer hill" style="bottom:525px;left:58%;"></div>
<div class="green-lighterer hill" style="bottom:700px;left:85%;"></div>
<div class="green-lighter hill" style="bottom:575px;left:-10%;"></div>
<div class="green-lighter hill" style="bottom:475px;left:10%;"></div>
<div class="green-lighter hill" style="bottom:375px;left:40%;"></div>
<div class="green-lighter hill" style="bottom:500px;left:60%;"></div>
<div class="green-lighter hill" style="bottom:400px;left:70%;"></div>
<div class="bushes" style="bottom:430px;left:58%;">
<div class="green-light bush h200"></div>
<div class="green-light bush h225"></div>
<div class="green-light bush h200"></div>
<div class="green-light bush h175"></div>
<div class="green-light bush h150"></div>
</div>
<div class="bushes" style="bottom:330px;left:58%;">
<div class="green-light bush h200"></div>
<div class="green-light bush h225"></div>
<div class="green-light bush h200"></div>
<div class="green-light bush h175"></div>
<div class="green-light bush h150"></div>
</div>
<div class="bushes" style="bottom:430px;left:78%;">
<div class="green-light bush h200"></div>
<div class="green-light bush h225"></div>
<div class="green-light bush h200"></div>
<div class="green-light bush h175"></div>
<div class="green-light bush h150"></div>
</div>
<div class="bushes" style="bottom:330px;left:78%;">
<div class="green-light bush h200"></div>
<div class="green-light bush h225"></div>
<div class="green-light bush h200"></div>
<div class="green-light bush h175"></div>
<div class="green-light bush h150"></div>
</div>
<!-- city buildings -->
<!-- tower building -->
<div class="structure" style="bottom:435px;right:45%">
<div class="building green" style="width:30px;height:300px;"></div>
<div class="building green-dark" style="width:30px;height:300px;"></div>
</div>
<div class="structure" style="bottom:425px;right:45%">
<div class="building white" style="width:30px;height:300px;">
<div class="window-long green-rich"></div>
</div>
<div class="building green-rich" style="width:30px;height:300px;">
<div class="window-long green"></div>
</div>
</div>
<div class="structure" style="bottom:755px;right:45%">
<div class="left-tower-base"></div>
<div class="right-tower-base"></div>
</div>
<div class="structure" style="bottom:775px;right:45%">
<div class="left-tower"></div>
<div class="right-tower"></div>
</div>
<!-- far right building -->
<div class="structure" style="bottom:705px;right:2%;">
<div class="pipe green-rich" style="margin-right:15px"></div>
<div class="pipe green-rich" style="height:25px;margin-right:25px"></div>
</div>
<div class="structure" style="bottom:400px;right:2%;">
<div class="building white" style="width:60px;height:300px;">
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
</div>
<div class="building green-rich" style="width:110px;height:300px;">
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
<div class="window-small green"></div>
</div>
</div>
<!-- tallest building -->
<div class="structure" style="bottom:945px;right:20%;">
<div class="pipe green-dark" style="height:25px;margin-right:10px"></div>
<div class="pipe green-dark" style="margin-right:55px"></div>
</div>
<div class="structure" style="bottom:915px;right:20%;">
<div class="building white" style="width:100px;height:20px">
<div class="window-round blue"></div>
<div class="window-round blue"></div>
</div>
<div class="building green-light" style="width:50px;height:20px">
<div class="window-round green-rich"></div>
<div class="window-round green-rich"></div>
</div>
<div class="building" style="width:5px;height:20px"></div>
</div>
<div class="structure" style="bottom:395px;right:20%;">
<div class="building white" style="width:80px;height:500px;">
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
</div>
<div class="building green-rich" style="width:40px;height:500px;">
<div class="window-long green"></div>
<div class="window-long green"></div>
<div class="window-long green"></div>
<div class="window-long green"></div>
<div class="window-long green"></div>
<div class="window-long green"></div>
<div class="window-long green"></div>
<div class="window-long green"></div>
<div class="window-long green"></div>
<div class="window-long green"></div>
<div class="window-long green"></div>
<div class="window-long green"></div>
<div class="window-long green"></div>
<div class="window-long green"></div>
<div class="window-long green"></div>
<div class="window-long green"></div>
</div>
<div class="building green-light" style="width:60px;height:500px;">
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
</div>
</div>
<!-- close short building -->
<!-- <div class="structure" style="bottom:715px;right:20%;">
<div class="building white" style="width:100px;height:20px">
<div class="window-round blue"></div>
<div class="window-round blue"></div>
</div>
<div class="building green-light" style="width:50px;height:20px">
<div class="window-round green-rich"></div>
<div class="window-round green-rich"></div>
</div>
<div class="building" style="width:5px;height:20px"></div>
</div> -->
<div class="structure" style="bottom:165px;right:10%;">
<div class="building white" style="width:40px;height:340px;">
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
</div>
<div class="building white" style="width:40px;height:400px;">
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
<div class="window-long blue"></div>
</div>
<div class="building green-light" style="width:40px;height:400px;">
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
</div>
<div class="building green-light" style="width:40px;height:340px;">
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
<div class="window-long green-dark"></div>
</div>
</div>
<!-- mid bushes just in front of buildings-->
<div class="bushes" style="bottom:430px;left:38%;">
<div class="green bush h200"></div>
<div class="green bush h225"></div>
<div class="green bush h200"></div>
</div>
<div class="bushes" style="bottom:390px;left:48%;">
<div class="green bush h200"></div>
<div class="green bush h225"></div>
<div class="green bush h200"></div>
<div class="green bush h150"></div>
<div class="green bush h100"></div>
</div>
<!-- close hill area to left -->
<div class="bushes" style="bottom:650px;left:-25px;">
<div class="green bush h125"></div>
<div class="green bush h175"></div>
<div class="green bush h150"></div>
</div>
<div class="small-green tree" style="left:8%;bottom:735px;"></div>
<div class="small-green tree" style="left:9%;bottom:745px;"></div>
<div class="small-green tree" style="left:11%;bottom:755px;"></div>
<div class="small-green tree" style="left:13%;bottom:740px;"></div>
<div class="small-green tree" style="left:17%;bottom:755px;"></div>
<div class="small-green tree" style="left:19%;bottom:740px;"></div>
<div class="small-green tree" style="left:20%;bottom:735px;"></div>
<div class="small-green tree" style="left:25%;bottom:755px;"></div>
<div class="small-green tree" style="left:26%;bottom:755px;"></div>
<div class="small-green tree" style="left:30%;bottom:760px;"></div>
<div class="small-green tree" style="left:33%;bottom:755px;"></div>
<div class="small-green tree" style="left:42%;bottom:585px;"></div>
<div class="small-green tree" style="left:44%;bottom:575px;"></div>
<div class="green-light hill" style="bottom:450px;left:50px;"></div>
<div class="green-light hill" style="bottom:275px;left:325px;"></div>
<div class="green-single tree" style="left:6%;bottom:590px;"></div>
<div class="green-single tree" style="left:15%;bottom:580px;"></div>
<div class="green-single tree" style="left:17%;bottom:610px;"></div>
<div class="green-single tree" style="left:20%;bottom:605px;"></div>
<div class="big-green tree" style="left:25%;bottom:610px;">
<div class="green-single tree" style="bottom:0px;"></div>
<div class="green-single tree" style="bottom:25px;"></div>
<div class="green-single tree" style="bottom:50px;"></div>
</div>
<div class="green hill" style="bottom:300px;left:50px;"></div>
<div class="green hill" style="bottom:200px;left:134px;"></div>
<div class="big-dark-single tree" style="left:2%;bottom:490px;"></div>
<div class="big-dark-single tree" style="left:5%;bottom:515px;"></div>
<div class="big-dark-single tree" style="left:10%;bottom:575px;"></div>
<div class="big-dark-single tree" style="left:29%;bottom:490px;"></div>
<div class="big-dark-circle tree green-dark" style="left:40%;bottom:440px;"></div>
<div class="green-dark hill" style="bottom:250px;left:-150px;"></div>
<div class="green-dark hill" style="bottom:175px;left:50px;"></div>
<!-- bushes near road -->
<div class="bushes" style="bottom:275px;left:70%;">
<div class="green bush h150"></div>
<div class="green bush h200"></div>
<div class="green bush h175"></div>
<div class="green bush h150"></div>
</div>
<div class="bushes" style="bottom:350px;">
<div class="green bush h100"></div>
<div class="green bush h150"></div>
<div class="green bush h125"></div>
<div class="green bush h100"></div>
</div>
<div class="bushes" style="bottom:325px;left:45%;">
<div class="green-dark bush h150"></div>
<div class="green-dark bush h200"></div>
<div class="green-dark bush h175"></div>
<div class="green-dark bush h150"></div>
<div class="green-dark bush h125"></div>
</div>
<div class="bushes" style="bottom:300px;left:85%;">
<div class="green bush h150"></div>
<div class="green bush h200"></div>
<div class="green bush h175"></div>
<div class="green bush h150"></div>
</div>
<div class="bushes" style="bottom:300px;left:90%;">
<div class="green-dark bush h150"></div>
<div class="green-dark bush h125"></div>
</div>
<div class="big-bright-single tree" style="left:15%;bottom:425px;"></div>
<!-- near water area -->
<div class="bridge"></div>
<div class="lights">
<div class="light">
<div class="lid"></div>
<div class="bulb"></div>
<div class="base"></div>
<div class="pole"></div>
</div>
<div class="light">
<div class="lid"></div>
<div class="bulb"></div>
<div class="base"></div>
<div class="pole"></div>
</div>
<div class="light">
<div class="lid"></div>
<div class="bulb"></div>
<div class="base"></div>
<div class="pole"></div>
</div>
</div>
<div class="water"></div>
<div class="shore"></div>
<div class="shore2"></div>
<!-- BOAT! -->
<div class="boat">
<div class="boat-wakeup"></div>
<div class="boat-wakeup2"></div>
<div class="boat-top"></div>
<div class="boat-flag"></div>
<div class="boat-back"></div>
<div class="boat-base"></div>
<div class="boat-cabin-base"></div>
<div class="boat-cabin"></div>
<div class="boat-window"></div>
<div class="boat-window bw2"></div>
<div class="boat-window bw3 green"></div>
<div class="boat-cabin-top"></div>
<div class="boat-tippy-top"></div>
<div class="boat-splash"></div>
<div class="boat-wake"></div>
<div class="boat-wake2"></div>
</div>
</div>
Raw
script.js
// inspired by:
// https://dribbble.com/shots/3391805-European-City
Raw
style.css
@keyframes beachwaves{
0% {height:30px;bottom:170px;opacity: 0}
25% {opacity: 1}
100% {height:0px;bottom:200px}
}
@keyframes wind{
0% {right:-220px;}
100% {right:120%;}
}
@keyframes splashup{
0% {width:90px;}
50% {width:95px;}
100% {width:90px;}
}
@keyframes wakeawayup{
0% {height:11px;width: 100px;right:190px;bottom: 0px;opacity: 1;}
50% {width: 65px;opacity: 0.9}
100% {height:1px;width: 40px;right:-190px;bottom: 25px;opacity: 0.1;}
}
@keyframes wakeaway{
0% {height:11px;width: 100px;right:190px;bottom: 0px;opacity: 1;}
50% {width: 75px;opacity: 0.9}
100% {height:5px;width: 40px;right:-200px;bottom:-15px;opacity: 0.1;}
}
@keyframes boatfloat {
0% {left:110%;bottom: 100px; transform: rotate(0deg)}
25% {bottom:115px;transform: rotate(1deg)}
33% {transform: rotate(-1deg)}
50% {bottom:100px;transform: rotate(1deg)}
66% {transform: rotate(-1deg)}
75% {bottom:85px;transform: rotate(1deg)}
100% {left:-350px;bottom: 100px; transform: rotate(-1deg)}
}
.cloud, .cloud2{
position: absolute;
right: -220px;
width: 220px;
height: 75px;
border-radius: 50px;
background: rgba(200,200,200,0.5);
}
.cloud{
animation-name: wind;
animation-duration: 120s;
animation-delay: -75s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.cloud2{
animation-name: wind;
animation-duration: 90s;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.boat-splash{
background: var(--sky);
width: 90px;
height: 12px;
bottom: 0px;
right: 200px;
animation-name: splashup;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
border-radius: 5px;
}
.boat-wake,.boat-wake2,.boat-wakeup,.boat-wakeup2{
background: var(--sky);
width: 100px;
height: 15px;
bottom: 0px;
right: -100px;
border-radius: 5px;
}
.boat-wake{
animation-name: wakeaway;
animation-duration: 6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.boat-wake2{
animation-name: wakeaway;
animation-duration: 6s;
animation-delay: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}.boat-wakeup{
animation-name: wakeawayup;
animation-duration: 6s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.boat-wakeup2{
animation-name: wakeawayup;
animation-duration: 6s;
animation-delay: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.boat{
position: absolute;
bottom: 100px;
left: 300px;
width: 300px;
height: 150px;
animation-name: boatfloat;
animation-duration: 25s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.boat *{
position:absolute;
}
.boat-tippy-top{
background: var(--green-rich);
height: 10px;
width: 130px;
bottom: 115px;
left:55px;
}
.boat-tippy-top:after{
content: "";
position: absolute;
background: var(--green-rich);
height: 30px;
width: 10px;
top: -20px;
left:20px;
}
.boat-cabin-top{
background: var(--green);
height: 10px;
width: 150px;
bottom: 105px;
left:35px;
}
.boat-window{
background: var(--blue-dark);
height: 40px;
width: 50px;
bottom: 75px;
left:45px;
}
.boat-window:after{
content: "";
position: absolute;
background: var(--green-light);
height: 10px;
width: inherit;
bottom: -10px;
/* left:45px; */
}
.bw2{
width: 30px;
left: 105px;
}
.bw3{
width: 10px;
left: 145px;
}
.boat-cabin{
background: var(--green);
height: 50px;
width: 130px;
bottom: 65px;
left:45px;
}
.boat-cabin-base{
background: var(--green);
height: 15px;
width: 175px;
bottom: 50px;
left:45px;
border-radius: 0 0 0 15px;
}
.boat-cabin-base:after{
background: var(--green);
content: "";
width: 10px;
height: 20px;
position: absolute;
top: -20px;
right: 25px;
}
.boat-top{
border-top: 30px solid var(--blue-dark);
border-left: 25px solid transparent;
height: 0;
width: 200px;
bottom: 30px;
right:100px;
}
.boat-back{
background: var(--blue-dark);
height: 30px;
width: 100px;
bottom: 20px;
right:0px;
border-radius: 0 10px 0 0;
}
.boat-flag{
background: darkorange;
height: 25px;
width: 35px;
bottom: 65px;
right:-10px;
}
.boat-flag:after{
background: var(--blue-dark);
content: "";
width: 7px;
height: 20px;
position: absolute;
top: 24px;
left: 0px;
}
.boat-base{
border-top: 30px solid var(--green-dark);;
border-left: 25px solid transparent;
height: 0;
width: 275px;
bottom: 0px;
}
.small-green{
position: absolute;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 30px solid var(--green-light);
}
.small-green:after{
position: absolute;
top: 30px;
left:-2px;
content: "";
width: 4px;
height: 15px;
background: var(--green-light);
}
.big-green{
position: absolute;
}
.green-single{
position: absolute;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 60px solid var(--green);
}
.green-single:after{
position: absolute;
top: 50px;
left:-4px;
content: "";
width: 8px;
height: 25px;
background: var(--green);
}
.big-dark-circle{
position: absolute;
width: 65px;
height: 95px;
border-radius: 50px;
}
.big-dark-circle:after{
position: absolute;
top: 90px;
left:26px;
content: "";
width: 10px;
height: 45px;
background: var(--green-dark);
}
.big-dark-single{
position: absolute;
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 120px solid var(--green-dark);
}
.big-dark-single:after{
position: absolute;
top: 120px;
left:-5px;
content: "";
width: 10px;
height: 25px;
background: var(--green-dark);
}
.big-bright-single{
position: absolute;
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 120px solid var(--green-rich);
}
.big-bright-single:after{
position: absolute;
top: 120px;
left:-5px;
content: "";
width: 10px;
height: 25px;
background: var(--blue-dark);
}
.window-long{
height: 20px;
margin: 10px 5px;
}
.window-small{
display: inline-block;
position: relative;
right: 0px;
bottom: 0px;
width: 12px;
height: 20px;
margin: 10px 0 0 10px;
}
.window-round{
display: inline-block;
position: relative;
right: 0px;
top: 0px;
width: 12px;
height: 12px;
margin: 5px 0 0 5px;
border-radius: 50%;
}
.building{
display: inline-block;
margin-left: -4px;
padding: 10px;
}
.structure{
position: absolute;
}
.left-tower-base{
display: inline-block;
border-bottom: 20px solid var(--green-lighter);
border-left: 15px solid transparent;
border-right: 0px solid transparent;
height: 0;
width: 35px;
margin-left: -4px;
}
.right-tower-base{
display: inline-block;
border-bottom: 20px solid var(--green-light);
border-left: 0px solid transparent;
border-right: 15px solid transparent;
height: 0;
width: 35px;
margin-left: -4px;
}
.left-tower{
display: inline-block;
width: 0;
height: 0;
border-bottom: 150px solid var(--green-rich);
border-left: 35px solid transparent;
margin-right: -4px;
}
.right-tower{
display: inline-block;
width: 0;
height: 0;
border-bottom: 150px solid var(--green);
border-right: 35px solid transparent;
margin-right: 15px;
}
.pipe{
display: inline-block;
width:10px;
height:50px;
}
.hill{
position: absolute;
border-radius: 50px;
width: 33%;
height: 300px;
}
.hill:before{
content: "";
position: absolute;
top: 59px;
left: -129px;
width: 300px;
height: 200px;
background: inherit;
border-radius: 50px;
transform: rotate(-50deg)
}
.hill:after{
content: "";
position: absolute;
top: 59px;
right: -130px;
width: 300px;
height: 200px;
background: inherit;
border-radius: 50px;
transform: rotate(50deg)
}
.h100{
height: 100px;
}
.h125{
height: 125px;
}
.h150{
height: 150px;
}
.h175{
height: 175px;
}
.h200{
height: 200px;
}
.h225{
height: 225px;
}
.bushes{
position: absolute;
min-width: 600px;
}
.bush{
margin-left: -10px;
display: inline-block;
/* background: #0e5666; */
width: 75px;
border-radius: 60px 60px 0 0;
}
.lights{
position: absolute;
width:100%;
height: 100px;
bottom: 390px;
overflow: hidden;
}
.lights .light{
display: inline-block;
position: relative;
}
.light{
margin-left: 25%;
}
.light .lid{
border-bottom: 10px solid var(--blue-dark);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
height: 0;
width: 20px;
}
.light .bulb{
/* border-top: 20px solid #d6ffd4; */
border-top: 20px solid var(--green-lighterer);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
height: 0;
width: 20px;
}
.light .base{
border-top: 10px solid var(--blue-dark);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
height: 0;
width: 10px;
margin-left: 5px;
}
.light .pole{
background: var(--blue-dark);
height: 50px;
width: 10px;
margin-left: 10px;
}
.bridge{
background-color: #063444;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='200px' width='120px' viewBox='0 0 100 100' %3E%3Cdefs%3E%3CclipPath id='round-corner'%3E%3Crect x='0' y='70' width='70' height='280' rx='35' ry='35'/%3E%3C/clipPath%3E%3C/defs%3E%3Crect x='10' y='-25' width='40' height='25' style='fill: %230e5666;'%3E%3C/rect%3E%3Crect x='60' y='-25' width='40' height='25' style='fill: %230e5666;'%3E%3C/rect%3E%3Crect x='0' y='70' width='70' height='80' clip-path='url(%23round-corner)' style='fill: %230e5666;'%3E%3C/rect%3E%3C/svg%3E");
background-repeat: repeat-x;
background-position: center bottom;
position: absolute;
bottom: 200px;
width: 100%;
height: 200px;
}
.water{
background: #5ed8e5;
position: absolute;
bottom: 0px;
width: 100%;
height: 200px;
}
.shore,.shore2{
background: rgba(255,255,255,0.3);
position: absolute;
bottom: 170px;
width: 100%;
height: 30px;
}
.shore{
animation-name: beachwaves;
animation-duration: 4s;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.shore2{
animation-name: beachwaves;
animation-duration: 4s;
animation-delay: -2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.container{
background: var(--sky);
position: absolute;
width: 100%;
height: 100%;
min-width: 700px;
}
body{
margin: 0;
overflow: hidden;
}
.sky{background-color: var(--sky)}
.green-dark{background-color: var(--green-dark)}
.green{background: var(--green)}
.green-light{background: var(--green-light)}
.green-lighter{background: var(--green-lighter)}
.green-lighterer{background: var(--green-lighterer)}
.green-rich{background: var(--green-rich)}
.white{background: white}
.blue-dark{background-color: var(--blue-dark)}
.blue{background: var(--blue)}
:root {
--sky: #dff;
--water-main: #5ed8e5;
--green-dark: #0e5666;
--green: #1b8f85;
--green-light: #58ba94;
--green-lighter: #bff4bd;
--green-lighterer: #d6ffd4;
--green-rich: #96dd93;
--blue-dark: #063444;
--blue: #42bed3;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment