Skip to content

Instantly share code, notes, and snippets.

@carlvlewis

carlvlewis/index.html

Created May 5, 2017 00:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save carlvlewis/89f95627626907e0c9e8d24aa2b595b3 to your computer and use it in GitHub Desktop.
Save carlvlewis/89f95627626907e0c9e8d24aa2b595b3 to your computer and use it in GitHub Desktop.
Download ZIP
Track-A-Cat-Landing
Raw
index.html
<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>
</body>
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.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;
}
/*#tree{
z-index:1;
position:absolute;
width:150px;
height:150px;
background: url(http://th07.deviantart.net/fs71/150/f/2012/176/f/4/tree_yay_by_rhubarb_leaf-d54swby.png);
background-repeat: no-repeat;
margin:-50px 0 0 500px ;
}*/
.bus {
display: inline-block;
width: 90px;
height: 45px;
clear:both;
margin:20px 0px 0px 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:black;
border-radius:80px;
margin:37px 65px;
background-position: center center;
}
#whell2{
position:absolute;
display: inline-block;
width:14px;
height:14px;
background-color:black;
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 white;
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 white;
border-radius:80px;
margin:39px 11.9px;
background-position: center center;
}
#win1{
position:absolute;
display: inline-block;
width:12px;
height:12px;
background-color:white;
border-radius:4px 0 0 0;
margin:5px 20px 0px 8px;
background-position: center center;
}
#win2{
position:absolute;
display: inline-block;
width:18px;
height:12px;
background-color:white;
border-radius:3px 3px 0px 0px;
margin:5px 33px 0px 24px;
background-position: center center;
}
#win3{
position:absolute;
display: inline-block;
width:18px;
height:12px;
background-color:white;
border-radius:3px 3px 0px 0px;
margin:5px 54px 0 48px;
background-position: center center;
}
#win4{
position:absolute;
display: inline-block;
width:12px;
height:12px;
background-color:white;
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 white;
}
#fuel{
position:absolute;
display: inline-block;
width:5px;
height:1.5px;
background-color:#1D1F20;
border-radius:0px;
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:black;
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:white;
border-radius:4px 4px 0 0;
margin:-5px 0px 0px 19px;
background-position: center center;
}
#up2{
position:absolute;
display: inline-block;
width:2px;
height:5px;
background-color:white;
margin:-5px 0px 0px 26px;
background-position: center center;
}
#up3{
position:absolute;
display: inline-block;
width:2px;
height:5px;
background-color:white;
margin:-5px 0px 0px 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:0.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:0.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;
}
Raw
track-a-cat-landing.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment