Pure CSS landing page for Track-a-Cat project

styles.css

@import url("https://fonts.googleapis.com/css?family=Baloo");body{padding-top:100px;background:linear-gradient(124deg,#b2e082,#fff);overflow-x:hidden}#road{width:auto;height:80px;background-color:gray;margin:55px 10px 0 10px;clear:both;border-radius:2px}.bus{display:inline-block;width:90px;height:45px;clear:both;margin:20px 0 0 10px;background-color:red;border-radius:17px 10px 2px 2px;background:green;position:relative;animation:mymove 7s infinite normal ease-in-out;-webkit-animation:mymove 7s infinite normal ease-in-out}@keyframes mymove {
    0% { left: -300px;}
    50% {left: 600px;}
    100% {left: 1400px;}
 }@-webkit-keyframes mymove {
    0% { left: -300px;}
    50% {left: 550px;}
    100% {left: 1400px;}
 }#whell1{position:absolute;display:inline-block;width:14px;height:14px;background-color:#000;border-radius:80px;margin:37px 65px;background-position:center center}#whell2{position:absolute;display:inline-block;width:14px;height:14px;background-color:#000;border-radius:80px;margin:37px 10px;background-position:center center}#whell3{position:absolute;display:inline-block;width:8px;height:8px;background-color:transparent;border:1.5px dotted #fff;border-radius:80px;margin:39px 67.1px;background-position:center center}#whell4{position:absolute;display:inline-block;width:8px;height:8px;background-color:transparent;border:1.5px dotted #fff;border-radius:80px;margin:39px 11.9px;background-position:center center}#win1{position:absolute;display:inline-block;width:12px;height:12px;background-color:#fff;border-radius:4px 0 0 0;margin:5px 20px 0 8px;background-position:center center}#win2{position:absolute;display:inline-block;width:18px;height:12px;background-color:#fff;border-radius:3px 3px 0 0;margin:5px 33px 0 24px;background-position:center center}#win3{position:absolute;display:inline-block;width:18px;height:12px;background-color:#fff;border-radius:3px 3px 0 0;margin:5px 54px 0 48px;background-position:center center}#win4{position:absolute;display:inline-block;width:12px;height:12px;background-color:#fff;border-radius:0 4px 0 0;margin:5px 54px 0 72px;background-position:center center}#line{position:relative;width:1200px;top:40px;height:1px;clear:both;margin-left:auto;margin-right:auto;border:1px dashed #fff}#fuel{position:absolute;display:inline-block;width:5px;height:1.5px;background-color:#1d1f20;border-radius:0;margin:42px -5px;background-position:center center;transform:rotate(-18deg)}#light{z-index:1;position:absolute;display:inline-block;width:4px;height:7.8px;background-color:#000;border-radius:80px;margin:27px 90px;border-radius:0 90px 90px 0;background:#f93100}#up1{position:absolute;display:inline-block;width:50px;height:2px;background-color:#fff;border-radius:4px 4px 0 0;margin:-5px 0 0 19px;background-position:center center}#up2{position:absolute;display:inline-block;width:2px;height:5px;background-color:#fff;margin:-5px 0 0 26px;background-position:center center}#up3{position:absolute;display:inline-block;width:2px;height:5px;background-color:#fff;margin:-5px 0 0 60px;background-position:center center}#foggy{width:4px;height:7.8px;border-right:200px solid #f7f771;border-top:20px solid transparent;border-left:20px solid transparent;border-bottom:20px solid transparent;border-radius:100px;margin:90px 60px;position:absolute;margin:7px 68px}#cloud1{width:100px;height:100px;margin:-90px;position:absolute;background:url("http://images.clipartpanda.com/clouds-background-png-cloud-edition.png");background-size:65% 45%;background-repeat:no-repeat;animation:cloudy 20s infinite normal;-webkit-animation:cloudy 20s infinite normal linear}@keyframes cloudy{
    0% { left: -100px;}
    100% {left: 1320px;}
 }@-webkit-keyframes cloudy {
    0% { left: -100px;}
    100% {left: 1320px;}
 }#cloud2{opacity:.7;width:100px;height:100px;margin:-120px;position:absolute;background:url("http://images.clipartpanda.com/clouds-background-png-cloud-edition.png");background-size:65% 45%;background-repeat:no-repeat;animation:cloudy2 23s infinite reverse;-webkit-animation:cloudy2 23s infinite reverse ease-in}@keyframes cloudy2{
    0% { left: -100px;}
    100% {left: 1300px;}
 }@-webkit-keyframes cloudy2 {
    0% { left: -100px;}
    100% {left: 1300px;}
 }#cloud3{opacity:.8;width:100px;height:100px;margin:-80px;position:absolute;background:url("http://images.clipartpanda.com/clouds-background-png-cloud-edition.png");background-size:70% 48%;background-repeat:no-repeat;animation:cloudy3 40s infinite normal;-webkit-animation:cloudy3 40s infinite normal linear}@keyframes cloudy3{
    0% { left: -100px;}
    100% {left: 1320px;}
 }@-webkit-keyframes cloudy3 {
    0% { left: -100px;}
    100% {left: 1320px;}
 }#cloud4{-webkit-transform:rotateY(180deg);transform:rotateY(180deg);opacity:1;width:100px;height:100px;margin:-80px;position:absolute;background:url("http://images.clipartpanda.com/clouds-background-png-cloud-edition.png");background-size:85% 70%;background-repeat:no-repeat;animation:cloudy4 38s infinite reverse;-webkit-animation:cloudy4 38s infinite reverse linear}@keyframes cloudy4{
    0% { left: -100px;}
    100% {left: 1300px;}
 }@-webkit-keyframes cloudy4 {
    0% { left: -100px;}
    100% {left: 1300px;}
 }p{color:#fff;font-family:helvetica}h1{font-family:Baloo;font-size:54px;margin-left:10%}h2{color:#000;font-size:28px;margin-left:10%;font-family:helvetica}
 footer{font-family: helvetica, arial, sans-serif; text-align: right; font-size: 10px;}
.myButton {
    background-color:#44c767;
    -moz-border-radius:28px;
    -webkit-border-radius:28px;
    border-radius:28px;
    border:1px solid #18ab29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:17px;
    padding:16px 31px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
    background-color:#5cbf2a;
}
.myButton:active {
    position:relative;
    top:1px;
}

trackacat.html

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

<title>Track a CAT - Savannah trolley tracking</title>
<link rel="stylesheet" href="styles.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

</head>
<body>
  <div id = 'road'>
    <div id = 'cloud1'></div>
      <div id = 'cloud2'></div>
      <div id = 'cloud3'></div>
      <div id = 'cloud4'></div>
      <div id = 'line'></div>
        <div id = 'tree'></div>   
        <div class = 'bus'>
          <div id = 'up1'></div>
          <div id = 'up2'></div>
          <div id = 'up3'></div>
          <div id = 'win1'></div>
          <div id = 'win2'></div>
          <div id = 'win3'></div>
          <div id = 'win4'></div>
          <div id = 'whell1'></div>
          <div id = 'whell2'></div>
          <div id = 'whell3'></div>
          <div id = 'whell4'></div>
          <div id = 'fuel'></div>
          <div id ='light'></div>
          <div id ='foggy'></div>


        <center>  <p>  CAT</p></center>
    </div> 
  </div>
  <h1>TRACK A CAT</h1>
  <h2> Real-time Savannah-area public transit app. Coming soon. </h2>
 <a href="https://www.meetup.com/OpenSavannah/events/239490874/" class="myButton">RSVP</a>
 
</body>
<footer>C. 2017 Open Savannah. Landing page design and code by Carl V. Lewis</footer>
</html>