sigonasr2/stoplight-event-exercise
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Tweak HTML and CSS

Browse Source
This commit is contained in:
Ryan Sobol 2016-11-11 05:49:28 -08:00
parent bfec34aa0b
commit ffc92b74d4
2 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -8,9 +8,9 @@
</head> </head>
<body> <body>
<div id="controls"> <div id="controls">
<h1 id="stopButton" class="button">Stop</h1> <div id="stopButton" class="button">Stop</div>
<h1 id="slowButton" class="button">Slow</h1> <div id="slowButton" class="button">Slow</div>
<h1 id="goButton" class="button">Go</h1> <div id="goButton" class="button">Go</div>
</div> </div>
<div id="traffic-light"> <div id="traffic-light">

20
styles.css
View File

@ -5,29 +5,31 @@
.button { .button {
background-color: gray; background-color: gray;
color: white;
border-radius: 15px; border-radius: 15px;
color: white;
cursor: pointer;
font-size: 2em;
font-weight: bold;
margin: 90px 40px;
padding: 20px; padding: 20px;
text-align: center; text-align: center;
margin: 90px 40px;
cursor: pointer;
} }
#traffic-light { #traffic-light {
height: 550px;
width: 200px;
float: left;
background-color: #ababab; background-color: #ababab;
border-radius: 40px; border-radius: 40px;
float: left;
margin: 30px 0; margin: 30px 0;
height: 550px;
padding: 20px; padding: 20px;
width: 200px;
} }
.bulb { .bulb {
height: 150px;
width: 150px;
background-color: #111; background-color: #111;
border-radius: 50%; border-radius: 50%;
margin: 25px auto; margin: 25px auto;
transition: background 500ms; height: 150px;
transition: background 300ms;
width: 150px;
} }