-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
102 lines (99 loc) · 2.86 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/organico.css">
<title>Orgânico CSS</title>
</head>
<body>
<div class="container">
<div class="linha">
<div class="doze colunas">
<h1>Grid</h1>
</div>
</div>
<div class="linha">
<div class="uma coluna">UMA</div>
<div class="onze colunas">ONZE</div>
</div>
<div class="linha">
<div class="duas colunas">DUAS</div>
<div class="dez colunas">DEZ</div>
</div>
<div class="linha">
<div class="tres colunas">TRÊS</div>
<div class="nove colunas">NOVE</div>
</div>
<div class="linha">
<div class="quatro colunas">QUATRO</div>
<div class="oito colunas">OITO</div>
</div>
<div class="linha">
<div class="cinco colunas">CINCO</div>
<div class="sete colunas">SETE</div>
</div>
<div class="linha">
<div class="seis colunas">SEIS</div>
<div class="seis colunas">SEIS</div>
</div>
<div class="linha">
<div class="sete colunas">SETE</div>
<div class="cinco colunas">CINCO</div>
</div>
<div class="linha">
<div class="oito colunas">OITO</div>
<div class="quatro colunas">QUATRO</div>
</div>
<div class="linha">
<div class="nove colunas">NOVE</div>
<div class="tres colunas">TRÊS</div>
</div>
<div class="linha">
<div class="dez colunas">DEZ</div>
<div class="duas colunas">DUAS</div>
</div>
<div class="linha">
<div class="onze colunas">ONZE</div>
<div class="uma coluna">UMA</div>
</div>
<div class="linha">
<div class="doze colunas">DOZE</div>
</div>
<div class="linha">
<div class="doze colunas">
<h1>Tipografia</h1>
<h1>Cabeçalho 1</h1>
<h2>Cabeçalho 2</h2>
<h3>Cabeçalho 3</h3>
<h4>Cabeçalho 4</h4>
<h5>Cabeçalho 5</h5>
<h6>Cabeçalho 6</h6>
<p>Parágrafo em <strong>negrito</strong> com <em>itálico</em>,
um pouco de <u>sublinhado</u> e <mark>marcação</mark>.</p>
<p>Pra finalizar, um <a href="#">link</a>.</p>
</div>
</div>
<div class="linha">
<div class="doze colunas">
<h1>Botões</h1>
<button>Elemento button</button>
<input type="button" value="Input Button">
<input type="submit" value="Input Submit">
<a href="#" class="botao">Botão Link</a>
</div>
</div>
<div class="linha">
<div class="doze colunas">
<h1>Botões</h1>
<button class="botao destacado">Elemento button</button>
<input type="button" value="Input Button" class="botao destacado">
<input type="submit" value="Input Submit" class="botao destacado">
<a href="#" class="botao destacado">Botão Link</a>
</div>
</div>
</div>
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>
</html>