-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
180 lines (161 loc) · 6.74 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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website Style Guide</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="./images/favicon.ico" type="image/x-icon">
</head>
<body>
<header>
<h1 id="site-name">My Website Style Guide</h1>
<nav class="header-nav">
<ul>
<li><a href="#colors">Color Palette</a></li>
<li><a href="#text-style">Text Style</a></li>
<li><a href="#fonts">Fonts</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#logo">Logo</a></li>
</ul>
</nav>
</header>
<main>
<section class="color">
<h2 id="colors">Color Palette</h2>
<h4 class="name">Main Color Palette</h4>
<div class="color-box desert">
<p class="bold">Desert</p>
<p class="bold">#F5A056</p>
</div>
<div class="color-box tierra">
<p class="bold">Tierra</p>
<p class="bold">#A8662C</p>
</div>
<div class="color-box dark-beige">
<p class="bold">Dark Beige</p>
<p class="bold">#F7DFCA</p>
</div>
<div class="color-box deep-sea">
<p class="bold">Deep Sea</p>
<p class="bold">#088CA8</p>
</div>
<div class="color-box light-water">
<p class="bold">Light Water</p>
<p class="bold">#90E3F5</p>
</div>
<h4 class="name">Secondary Color Palette</h4>
<div class="color-box desert2">
<p class="bold">Desert-2</p>
<p class="bold">#f48320</p>
</div>
<div class="color-box tierra2">
<p class="bold">Tierra-2</p>
<p class="bold">#5d3b1d</p>
</div>
<div class="color-box dark-beige2">
<p class="bold">Dark Beige-2</p>
<p class="bold">#fcf3ea</p>
</div>
<div class="color-box deep-sea2">
<p class="bold">Deep Sea-2</p>
<p class="bold">#074857</p>
</div>
<div class="color-box light-water2">
<p class="bold">Light Water-2</p>
<p class="bold">#bff3ff</p>
</div>
</section>
<section>
<h2 id="text-style">Text Style</h2>
<h4 class="name">Headlines</h4>
<h1>H1: Main page heading</h1>
<ul>
<li>Font-weight: 400</li>
<li>Font-size: 300%</li>
<li>Font-family: Yeseva One</li>
</ul>
<h2>H2: Subheading</h2>
<ul>
<li>Font-weight: 400</li>
<li>Font-size: 220%</li>
<li>Font-family: Exo 2</li>
</ul>
<h3>H3: Paragraph text</h3>
<ul>
<li>Font-weight: 400</li>
<li>Font-size: 170%</li>
<li>Font-family: Exo 2</li>
</ul>
<h4>H4: Paragraph text</h4>
<ul>
<li>Font-weight: 400</li>
<li>Font-size: 120%</li>
<li>Font-family: Exo 2</li>
</ul>
</section>
<section>
<h2 id="fonts">Fonts</h2>
<div class="yeseva">
<p class="name">Yeseva One</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="bold-italic">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="philosopher">
<p class="name">Philosopher</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="italic">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="bold-italic">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="exo">
<p class="name">Exo 2</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="italic">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="bold-italic">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</section>
<section>
<h2 id="buttons">Buttons</h2>
<h4 class="name">Buttons: Skeuomorphic styling</h4>
<p>3-D button design with animation</p>
<div class="button-box oval">BUTTON 1</div>
<div class="button-box round">BUTTON 2</div>
<div class="button-box">BUTTON 3</div>
<p>2.5-D button design static</p>
<div class="button-static oval">BUTTON 1</div>
<div class="button-static round">BUTTON 2</div>
<div class="button-static">BUTTON 3</div>
<h4 class="name">Buttons: Flat styling</h4>
<p>2-D flat button</p>
<div class="button-flat oval">BUTTON 1</div>
<div class="button-flat round">BUTTON 2</div>
<div class="button-flat">BUTTON 3</div>
<p>Outlined Button</p>
<div class="button oval">BUTTON 1</div>
<div class="button round">BUTTON 2</div>
<div class="button">BUTTON 3</div>
<p>Text Button</p>
<a href="#site-name">Up to Top text button</a>
</section>
<section>
<h2 id="logo">Logo</h2>
<div class="logo-box">
<h4 class="name">Logo Color</h4>
<img src="./images/logo-dl-web.png" alt="Logo colored">
<h4 class="name">Logo Sepia</h4>
<img src="./images/logo-dl-sepia.png" alt="Logo sepia">
<h4 class="name">Logo black and white</h4>
<img src="./images/logo-dl-black.png" alt="Logo black and white">
</div>
</section>
<footer>
<img id="avatar" src="./images/mTapirina-ava.png" alt="my-img">
<p class="ava">About me:
<a href="https://www.behance.net/mtapirina" title="Creative Artist - Designer" target="_blank">Behance Portfolio Maria M. Tapirina</a></p>
</footer>
</main>
</body>
</html>