-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
121 lines (121 loc) · 4.94 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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pure CSS Images: Desk Flatlay 2.0</title>
<link rel="stylesheet" href="stylesheets/setup.css" type="text/css">
<link rel="stylesheet" href="stylesheets/teal.css" type="text/css">
<link rel="stylesheet" href="stylesheets/ivory.css" type="text/css">
<link rel="stylesheet" href="stylesheets/phone.css" type="text/css">
<link rel="stylesheet" href="stylesheets/pencils.css" type="text/css">
<link rel="stylesheet" href="stylesheets/mouse.css" type="text/css">
</head>
<body>
<div id="desk">
<!-- Teal Book -->
<div class="item book--1">
<div class="item book--1__shadow"></div>
<div class="item book--1__ribbon"></div>
</div>
<!-- Ivory and Gold Dot Book -->
<div class="item book--2">
<!-- Row 1 -->
<div class="item book--2__dot dot--1a"></div>
<div class="item book--2__dot dot--1b"></div>
<div class="item book--2__dot dot--1c"></div>
<div class="item book--2__dot dot--1d"></div>
<div class="item book--2__dot dot--1e"></div>
<!-- Row 2 -->
<div class="item book--2__dot dot--2a"></div>
<div class="item book--2__dot dot--2b"></div>
<div class="item book--2__dot dot--2c"></div>
<div class="item book--2__dot dot--2d"></div>
<!-- Row 3 -->
<div class="item book--2__dot dot--3a"></div>
<div class="item book--2__dot dot--3b"></div>
<div class="item book--2__dot dot--3c"></div>
<div class="item book--2__dot dot--3d"></div>
<div class="item book--2__dot dot--3e"></div>
<!-- Row 4 -->
<div class="item book--2__dot dot--4a"></div>
<div class="item book--2__dot dot--4b"></div>
<div class="item book--2__dot dot--4c"></div>
<div class="item book--2__dot dot--4d"></div>
<!-- Row 5 -->
<div class="item book--2__dot dot--5a"></div>
<div class="item book--2__dot dot--5b"></div>
<div class="item book--2__dot dot--5c"></div>
<div class="item book--2__dot dot--5d"></div>
<div class="item book--2__dot dot--5e"></div>
<!-- Row 6 -->
<div class="item book--2__dot dot--6a"></div>
<div class="item book--2__dot dot--6b"></div>
<div class="item book--2__dot dot--6c"></div>
<div class="item book--2__dot dot--6d"></div>
<!-- Row 7 -->
<div class="item book--2__dot dot--7a"></div>
<div class="item book--2__dot dot--7b"></div>
<div class="item book--2__dot dot--7c"></div>
<div class="item book--2__dot dot--7d"></div>
<div class="item book--2__dot dot--7e"></div>
<!-- Row 8 -->
<div class="item book--2__dot dot--8a"></div>
<div class="item book--2__dot dot--8b"></div>
<div class="item book--2__dot dot--8c"></div>
<div class="item book--2__dot dot--8d"></div>
<!-- Row 9 -->
<div class="item book--2__dot dot--9a"></div>
<div class="item book--2__dot dot--9b"></div>
<div class="item book--2__dot dot--9c"></div>
<div class="item book--2__dot dot--9d"></div>
<div class="item book--2__dot dot--9e"></div>
<!-- Row 10 -->
<div class="item book--2__dot dot--10a"></div>
<div class="item book--2__dot dot--10b"></div>
<div class="item book--2__dot dot--10c"></div>
<div class="item book--2__dot dot--10d"></div>
<!-- Elastic -->
<div class="item elastic--shadow"></div>
<div class="item book--2__elastic"></div>
</div>
<!-- Phone -->
<div class="item phone">
<div class="item phone--speaker speaker--1"></div>
<div class="item phone--speaker speaker--2"></div>
<div class="item phone--speaker speaker--3"></div>
<div class="item phone--screen">
<p class="item phone--screen__text">Hello!</p>
</div>
<div class="item phone--home">
<div class="item phone--home__text"></div>
</div>
</div>
<!-- Mouse -->
<div class="item mouse"></div>
<!-- Pencils -->
<div class="item pencils">
<div class="item pencil pencil--1">
<div class="item pencil--end"></div>
<div class="item pencil--eraser"></div>
<div class="item pencil--tip">
<div class="item pencil--lead"></div>
</div>
</div>
<div class="item pencil pencil--2">
<div class="item pencil--end"></div>
<div class="item pencil--eraser"></div>
<div class="item pencil--tip">
<div class="item pencil--lead"></div>
</div>
</div>
<div class="item pencil pencil--3">
<div class="item pencil--end"></div>
<div class="item pencil--eraser"></div>
<div class="item pencil--tip">
<div class="item pencil--lead"></div>
</div>
</div>
</div>
</div>
</body>
</html>