-
Notifications
You must be signed in to change notification settings - Fork 64
/
index.html
86 lines (77 loc) · 4.31 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
<!DOCTYPE html>
<html lang="pt-br">
<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">
<link rel="stylesheet" href="assets/css/main.css">
<title>Desafio Front-end 01 - HOME</title>
</head>
<body class="grid">
<header class="flex">
<img src="assets/img/svg/logo.svg" alt="Logo do blog">
<ul class="flex">
<a href=""><li>Início</li></a>
<a href=""><li>Sobre</li></a>
<a href="contato.html"><li>Contato</li></a>
</ul>
</header>
<section class="flex main">
<div class="grid content">
<h2>Lorem ipsum dolor sit amet</h2>
<p class="date">26/07/2020 às 00:04 - By: Fulano</p>
<img src="assets/img/png/pessoa.png" alt="">
<div class="pcontent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus quis augue elementum vestibulum. Nam a orci erat. Aenean arcu mauris, finibus a rutrum quis, commodo sollicitudin nibh. Morbi diam lacus, suscipit nec maximus et, tincidunt at quam. </p>
<p>Curabitur sit amet euismod mi. Duis dictum vel ipsum vel tempus. Etiam diam nisl, feugiat ornare enim ac, aliquam ultrices erat. Nam tincidunt cursus dui. Integer varius nisi quis dui commodo, vitae euismod nisi elementum. Vivamus tincidunt id massa eget blandit.</p>
</div>
<a href="post.html"><button>Continuar lendo</button></a>
</div>
<div class="grid content">
<h2>Lorem ipsum dolor sit amet</h2>
<p class="date">26/07/2020 às 00:04 - By: Fulano</p>
<img src="assets/img/png/computador.png" alt="">
<div class="pcontent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus quis augue elementum vestibulum. Nam a orci erat. Aenean arcu mauris, finibus a rutrum quis, commodo sollicitudin nibh. Morbi diam lacus, suscipit nec maximus et, tincidunt at quam. </p>
<p>Curabitur sit amet euismod mi. Duis dictum vel ipsum vel tempus. Etiam diam nisl, feugiat ornare enim ac, aliquam ultrices erat. Nam tincidunt cursus dui. Integer varius nisi quis dui commodo, vitae euismod nisi elementum. Vivamus tincidunt id massa eget blandit.</p>
</div>
<a href="post2.html"><button>Continuar lendo</button></a>
</div>
<div class="grid content">
<h2>Lorem ipsum dolor sit amet</h2>
<p class="date">26/07/2020 às 00:04 - By: Fulano</p>
<img src="assets/img/png/pintura.png" alt="">
<div class="pcontent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus quis augue elementum vestibulum. Nam a orci erat. Aenean arcu mauris, finibus a rutrum quis, commodo sollicitudin nibh. Morbi diam lacus, suscipit nec maximus et, tincidunt at quam. </p>
<p>Curabitur sit amet euismod mi. Duis dictum vel ipsum vel tempus. Etiam diam nisl, feugiat ornare enim ac, aliquam ultrices erat. Nam tincidunt cursus dui. Integer varius nisi quis dui commodo, vitae euismod nisi elementum. Vivamus tincidunt id massa eget blandit.</p>
</div>
<a href="post3.html"><button>Continuar lendo</button></a>
</div>
</section>
<section class="grid aside">
<input type="text" name="search" id="search" placeholder="Pesquise aqui...">
<div class="categories">
<h3>Categorias</h3>
<ul>
<li><div class="flex item"><p>Tecnologia</p> <p>25</p> </div></li>
<li><div class="flex item"><p>Estilo de vida</p> <p>8</p></div></li>
<li><div class="flex item"><p>Arte</p> <p>2</p> </div></li>
<li><div class="flex item"><p>Comida</p> <p>12</p> </div></li>
<li><div class="flex item"><p>Aventura</p> <p>9</p> </div></li>
<li><div class="flex item"><p>Moda</p> <p>12</p> </div></li>
</ul>
</div>
<div class="ads">
<h3>Publicidade</h3>
<div class="flex ads-content">
<div class="flex ads-img">340 x 240</div>
<div class="flex ads-img">340 x 240</div>
<div class="flex ads-img">340 x 240</div>
</div>
</div>
</section>
<footer class="flex">
<p>Copyright ©2021 Todos os direitos reservados | by Gabriel Espinosa</p>
</footer>
</body>
</html>