-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
123 lines (120 loc) · 5.8 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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Roboto:wght@400;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js" defer></script>
<title>RocketBlog</title>
</head>
<body>
<div class="overlay"></div>
<header>
<label class="logo"><img src="assets/icons/logo.svg" alt="Logo"></label>
<nav>
<a href="#">Home</a>
<a href="#">Sobre</a>
<a href="#">Categorias</a>
<a href="#">Contato</a>
<form class="search">
<input type="text" placeholder="Buscar">
<button class="srcBtn">
<img src="assets/icons/search.svg">
</button>
</form>
</nav>
<div class="hamburger-button">
<div class="burger"></div>
<div class="burger"></div>
<div class="burger"></div>
</div>
</header>
<main>
<section>
<div class="text-group">
<h1>Veja o guia definitivo para conquistar seus objetivos como DEV em 2022</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh nibh eu in aliquet ut adipiscing
neque.
Sed volutpat aenean sit vitae, sed tristique placerat hac. </p>
<a href="#" class="seeMore">Veja mais <img src="assets/icons/arrow-right.svg" alt="Arrow right"></a>
</div>
<figure>
<img src="assets/img/featured-image.png" alt="Código de programação">
</figure>
</section>
<section>
<div class="post-1">
<figure>
<img src="assets/img/post-1.png" alt="Notebook com o editor de código aberto">
</figure>
<p class="date">Janeiro 04, 2022</p>
<h2>Começando no ReactJS em 2022</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam, aliquid inventore pariatur
maximebeatae cum dicta nisi velit nobis laboriosam ut! Ex, quasi tenetur officiis sit
praesentium eius atque deserunt.</p>
</div>
<div class="side-posts">
<div class="side-post">
<p class="date">Janeiro 04, 2022</p>
<h2>Conheça as principais técnicas para conseguir uma vaga internacional em programação</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam tempora eum delectus quas
corrupti eligendi corporis, distinctio ea est, ipsum sunt debitis. Itaque doloremque sunt
sint facilis tempora nihil illo?</p>
</div>
<div class="rectangle"></div>
<div class="side-post">
<p class="date">Janeiro 04, 2022</p>
<h2>Veja a evolução do Front-end na prática</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam magnam ad nesciunt officia
nulla, recusandae necessitatibus. Accusantium, ea. Iste dolor harum odio impedit corrupti
cum itaque ullam debitis blanditiis nisi.</p>
</div>
</div>
</section>
<section>
<div class="posts">
<div class="post">
<figure>
<img src="assets/img/post-2.png" alt="">
</figure>
<div class="content">
<p class="date">Janeiro 04, 2022</p>
<h2>10 dicas para conseguir a vaga desejada</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum debitis facere est expedita,
repellat rem qui vitae, nihil, distinctio soluta voluptatibus? Quibusdam, doloribus aut
maxime placeat similique distinctio consectetur impedit?</p>
</div>
</div>
<div class="post">
<figure>
<img src="assets/img/post-3.png" alt="">
</figure>
<div class="content">
<p class="date">Janeiro 04, 2022</p>
<h2>Deixe seu código mais semântico com essas dicas</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est laboriosam culpa possimus
commodi dolor tempora doloribus fugit recusandae debitis nostrum. Voluptatem accusantium
culpa doloribus consectetur sapiente dolore modi ab quidem!</p>
</div>
</div>
<div class="post">
<figure>
<img src="assets/img/post-4.png" alt="">
</figure>
<div class="content">
<p class="date">Janeiro 04, 2022</p>
<h2>Use essas dicas nas suas aplicações mobile</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor odio doloribus nostrum id
molestias quo, excepturi quas laborum eveniet rem molestiae quod magnam. Aspernatur omnis
suscipit totam in, quibusdam doloribus.</p>
</div>
</div>
</div>
</section>
</main>
</body>
</html>