-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
94 lines (92 loc) · 3.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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./styles.css">
<title>Style Guide</title>
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,400i,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500,700&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<ul>
<a href=#color>Colors</a>
<a href=#fonts>Fonts</a>
<a href=#text-styles>Styles</a>
<a href=#media>Media</a>
</ul>
</nav>
<h1 class="title" id ="color">My Website Style Guide</h1>
<table class ="color-table" >
<thead>
<th><h2>Colors</h2></th>
</thead>
<tr class ="color-name">
<td class ="blue">Cool Blue</td>
<td class = "pink">Pink</td>
<td class = "beige">Beige</td>
<td class = "green">Mint Green</td>
</tr>
<tr class ="color-code">
<td class ="blue">#2d5dcc</td>
<td class ="pink">#d957d9</td>
<td class = "beige">#efd9ca</td>
<td class = "green">#4fe0b0</td>
</tr>
</table>
<table class ="fonts" id ="fonts">
<thead>
<th><h2>Fonts</h2></th>
</thead>
<tr class ="font-name">
<td class ="source-code">Source Code Pro</td>
<td class = "nutino-sans">Nunito Sans</td>
<td class = "poppins">Poppins</td>
</tr>
<tr class ="font-normal">
<td class ="source-code">The quick brown fox jumps over the lazy dog.</td>
<td class = "nutino-sans">The quick brown fox jumps over the lazy dog.</td>
<td class = "poppins">The quick brown fox jumps over the lazy dog.</td>
</tr>
<tr class ="font-strong">
<td class ="source-code">The quick brown fox jumps over the lazy dog.</td>
<td class = "nutino-sans">The quick brown fox jumps over the lazy dog.</td>
<td class = "poppins">The quick brown fox jumps over the lazy dog.</td>
</tr>
<tr class ="font-cursive">
<td class ="source-code">The quick brown fox jumps over the lazy dog.</td>
<td class = "nutino-sans">The quick brown fox jumps over the lazy dog.</td>
<td class = "poppins">The quick brown fox jumps over the lazy dog.</td>
</tr>
</table>
<div class = "text-styles" id="text-styles">
<h2 class = "text-styles">Text-styles</h2>
<h1 class = "h1-example">H1: Main page heading</h1>
<ul>
<li>Font-weight:700(bold)</li>
<li>Font-size:26px</li>
<li>Font-Family: Nunito Sans</li>
</ul>
<h2 class = "h2-example">H2: Subheading</h2>
<ul>
<li>Font-weight:500</li>
<li>Font-size:18px</li>
<li>Font-Family: Popins</li>
</ul>
<p class = "p-example">P - Paragraph text</p>
<ul>
<li>Font-weight:400(regular)</li>
<li>Font-size:14px</li>
<li>Font-Family: Poppins</li>
</ul>
</div>
</body>
<footer>
<h2 class ="media" id ="media">Media</h2>
<table>
<td><a href ="https://www.facebook.com/" target =_bland class="media-link">Facebook</a></td>
<td> </td>
<td><a href = "https://github.com/Axword" target =_bland class="media-link">Github </a></td>
</table>
</footer>
</html>