-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
84 lines (75 loc) · 2.83 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
<!doctype html>
<html lang="es">
<head>
<title>Ejemplus</title>
<meta charset="utf-8">
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<header class="header bar-wrapper">
<div class="header__logo-and-title-wrapper">
<img class="header__image" src="./images/logo.png" alt="logo" />
<h1 class="header__title">LayoutDeEjemplo</h1>
</div>
<div class="flex-layout-spacer"></div>
<div class="header__menu-wrapper">
<button class="header__menu-link">Link1</button>
<button class="header__menu-link">Link2</button>
<button class="header__menu-link">Link3</button>
<button class="header__menu-link">Link4</button>
</div>
</header>
<section class="content">
<div class="content__left-side">
<article class="content__article">
<h2 class="content__title">Lorem ipsum dolor sit amet</h2>
<p class="content__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus scelerisque faucibus diam et luctus. Vivamus egestas, orci ac viverra bibendum, nisi mauris vestibulum nisi, ut
efficitur sapien
purus ac augue. Nam non fermentum mi. Fusce fringilla turpis consectetur ex porttitor euismod.
</p>
</article>
<hr>
<article class="content__article">
<h2 class="content__title">Lorem ipsum dolor sit amet</h2>
<p class="content__text--quote">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus scelerisque faucibus diam et luctus. Vivamus egestas, orci ac viverra bibendum, nisi mauris vestibulum nisi, ut
efficitur
sapien
purus ac augue. Nam non fermentum mi. Fusce fringilla turpis consectetur ex porttitor euismod.
</p>
</article>
<hr>
<article class="content__article">
<h2 class="content__title">Lorem ipsum dolor sit amet</h2>
<p class="content__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus scelerisque faucibus diam et luctus. Vivamus egestas, orci ac viverra bibendum, nisi mauris vestibulum nisi, ut
efficitur
sapien
purus ac augue. Nam non fermentum mi. Fusce fringilla turpis consectetur ex porttitor euismod.
</p>
</article>
</div>
<div class="content__right-side">
<div class="content__floating-things">
<div class="content__thing"></div>
<div class="content__thing"></div>
</div>
</div>
</section>
<footer class="footer bar-wrapper">
<div class="footer__menu-wrapper">
<button class="footer__menu-link">Link1</button>
<button class="footer__menu-link">Link2</button>
<button class="footer__menu-link">Link3</button>
<button class="footer__menu-link">Link4</button>
</div>
<div class="flex-layout-spacer"></div>
<div class="footer__social-wrapper">
<button class="footer__social-link">FB</button>
<button class="footer__social-link">TW</button>
<button class="footer__social-link">G+</button>
</div>
</footer>
</body>
</html>