-
Notifications
You must be signed in to change notification settings - Fork 2
/
index-flex.html
77 lines (73 loc) · 6.24 KB
/
index-flex.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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>School Of Net</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<a href="" class="menu-icon"></a>
<h1><a href="https://schoolofnet.com">School Of Net</a></h1>
</header>
<menu>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Sobre mim</a></li>
<li><a href="">Serviços</a></li>
<li><a href="">Parceiros</a></li>
<li><a href="">Contato</a></li>
</ul>
</menu>
<main class="container">
<section>
<div>
<img src="background.jpg" alt="Elefante" class="responsive">
</div>
</section>
<section class="row-flex">
<div class="col-flex col-1 order-3">
<h3>Primeiro assunto</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel lectus sodales, fringilla metus eu, elementum est. Phasellus ultrices ante in elit mattis, vitae finibus dolor volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla vitae dictum magna. Maecenas a neque ullamcorper, commodo nisi et, faucibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel lectus sodales, fringilla metus eu, elementum est. Phasellus ultrices ante in elit mattis, vitae finibus dolor volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla vitae dictum magna. Maecenas a neque ullamcorper, commodo nisi et, faucibus leo.</p>
</div>
<div class="col-flex col-1 order-2">
<h3>Segundo assunto</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel lectus sodales, fringilla metus eu, elementum est. Phasellus ultrices ante in elit mattis, vitae finibus dolor volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla vitae dictum magna. Maecenas a neque ullamcorper, commodo nisi et, faucibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel lectus sodales, fringilla metus eu, elementum est. Phasellus ultrices ante in elit mattis, vitae finibus dolor volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla vitae dictum magna. Maecenas a neque ullamcorper, commodo nisi et, faucibus leo.</p>
</div>
<div class="col-flex col-1 order-1">
<h3>Terceiro assunto</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel lectus sodales, fringilla metus eu, elementum est. Phasellus ultrices ante in elit mattis, vitae finibus dolor volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla vitae dictum magna. Maecenas a neque ullamcorper, commodo nisi et, faucibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel lectus sodales, fringilla metus eu, elementum est. Phasellus ultrices ante in elit mattis, vitae finibus dolor volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla vitae dictum magna. Maecenas a neque ullamcorper, commodo nisi et, faucibus leo.</p>
</div>
</section>
<section class="row-flex">
<div class="col-flex col-2">
<h3>Primeiro assunto</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel lectus sodales, fringilla metus eu, elementum est. Phasellus ultrices ante in elit mattis, vitae finibus dolor volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla vitae dictum magna. Maecenas a neque ullamcorper, commodo nisi et, faucibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel lectus sodales, fringilla metus eu, elementum est. Phasellus ultrices ante in elit mattis, vitae finibus dolor volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla vitae dictum magna. Maecenas a neque ullamcorper, commodo nisi et, faucibus leo.</p>
</div>
<div class="col-flex col-1">
<h3>Segundo assunto</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel lectus sodales, fringilla metus eu, elementum est. Phasellus ultrices ante in elit mattis, vitae finibus dolor volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla vitae dictum magna. Maecenas a neque ullamcorper, commodo nisi et, faucibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel lectus sodales, fringilla metus eu, elementum est. Phasellus ultrices ante in elit mattis, vitae finibus dolor volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla vitae dictum magna. Maecenas a neque ullamcorper, commodo nisi et, faucibus leo.</p>
</div>
</section>
<section class="row-flex">
<div class="col-flex col-1">
<h3>Primeiro assunto</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel lectus sodales, fringilla metus eu, elementum est. Phasellus ultrices ante in elit mattis, vitae finibus dolor volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla vitae dictum magna. Maecenas a neque ullamcorper, commodo nisi et, faucibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel lectus sodales, fringilla metus eu, elementum est. Phasellus ultrices ante in elit mattis, vitae finibus dolor volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla vitae dictum magna. Maecenas a neque ullamcorper, commodo nisi et, faucibus leo.</p>
</div>
</section>
<section>
<div>
<div class="video-responsive">
<iframe width="560" height="315" src="https://www.youtube.com/embed/yzBXcMUSwMM" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</section>
</main>
<footer>
<small>by Erik A. F. - School of Net</small>
</footer>
</body>
</html>