-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
56 lines (55 loc) · 1.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pure CSS - Parallel Park</title>
<link rel="stylesheet" href="css/parallel-park.css">
</head>
<body>
<header>
<h1>
<span class="header-subtitile">PURE CSS</span>
<p class="header-title">Parallel park</p>
</h1>
</header>
<main>
<div class="car-line park">
<div class="car car-red">
<div class="car-front"></div>
<div class="car-middle"></div>
<div class="car-back"></div>
</div>
<span class="vacancy passo1"></span>
<div class="car car-blue">
<div class="car-front"></div>
<div class="car-middle"></div>
<div class="car-back"></div>
</div>
</div>
<div class="car-line">
<input class="passo1" id="passo1" type="checkbox" />
<input class="passo2" id="passo2" type="checkbox" />
<input class="passo3" id="passo3" type="checkbox" />
<input class="passo4" id="passo4" type="checkbox" />
<div class="car car-silver">
<div class="car-front"></div>
<div class="car-middle"></div>
<div class="car-back"></div>
</div>
<div class="breadcrumbs breadcrumbs-flat">
<label class="passo1-label" for="passo1">start</label>
<label class="passo2-label" for="passo2">step2</label>
<label class="passo3-label" for="passo3">step 3</label>
<label class="passo4-label" for="passo4">finish</label>
</div>
<div class="congrats">
<h2 class="congrats-title">Congratulations!</h2>
<h3 class="congrats-subtitle">You are now a parallel park master.</h3>
<p class="congrats-text">
<a class="congrats-link" href="https://twitter.com/intent/tweet?text=I liked this 'Pure CSS Parallel Park' on @codepen. Take a look and discover how to parallel park. http://codepen.io/teles/full/gbKeLR" target="_blank" title="And show them how to perfect parallel park.">Share this pen with your friends on twitter. ↗</a>
</p>
</div>
</div>
</main>
</body>
</html>