-
Notifications
You must be signed in to change notification settings - Fork 64
/
post2.html
97 lines (84 loc) · 4.45 KB
/
post2.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
<!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">
<link rel="stylesheet" href="assets/css/post.css">
<title>Desafio Front-end 01 - Post 02</title>
</head>
<body class="grid">
<header class="flex">
<img src="assets/img/svg/logo.svg" alt="Logo do blog">
<ul class="flex">
<a href="index.html"><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/computador.png" alt="">
<div class="pcontent post">
<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>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<ul>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
</ul>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
</ul>
<p> <i>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. </i></p>
<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>
</div>
<div class="coments">
<h1>Comentários</h1>
<form class="grid form">
<label class="name" for="name">Nome</label>
<input type="text" id="name">
<label class="email" for="email">E-mail</label>
<input type="email" id="email">
<label class="coment" for="comentario">Comentário</label>
<textarea name="" id="comentario" cols="30" rows="10"></textarea>
<button>Comentar</button>
</form>
</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>