-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
201 lines (178 loc) · 13.1 KB
/
index.html
File metadata and controls
201 lines (178 loc) · 13.1 KB
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!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">
<title>RocketBlog</title>
<link rel="stylesheet" href="styles.css">
<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">
</head>
<body>
<section id="home">
<div class="container">
<header>
<div id="logo">
<svg width="162" height="37" viewBox="0 0 162 37" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M162 22V27H157V22H162Z" fill="#4FFF4B" />
<path d="M20.412 1.72798V6.65999H13.716V27H7.56001V6.65999H0.864014V1.72798H20.412Z" fill="white" />
<path
d="M35.8495 6.69599C38.1535 6.69599 40.0015 7.46399 41.3935 8.99999C42.7855 10.512 43.4815 12.6 43.4815 15.264V27H37.3615V16.092C37.3615 14.748 37.0135 13.704 36.3175 12.96C35.6215 12.216 34.6855 11.844 33.5095 11.844C32.3335 11.844 31.3975 12.216 30.7015 12.96C30.0055 13.704 29.6575 14.748 29.6575 16.092V27H23.5015V0.359985H29.6575V9.61199C30.2815 8.72398 31.1335 8.01598 32.2135 7.48798C33.2935 6.95998 34.5055 6.69599 35.8495 6.69599Z"
fill="white" />
<path
d="M66.6954 16.632C66.6954 17.208 66.6594 17.808 66.5874 18.432H52.6554C52.7514 19.68 53.1474 20.64 53.8434 21.312C54.5634 21.96 55.4394 22.284 56.4714 22.284C58.0074 22.284 59.0754 21.636 59.6754 20.34H66.2274C65.8914 21.66 65.2794 22.848 64.3914 23.904C63.5274 24.96 62.4354 25.788 61.1154 26.388C59.7954 26.988 58.3194 27.288 56.6874 27.288C54.7194 27.288 52.9674 26.868 51.4314 26.028C49.8954 25.188 48.6954 23.988 47.8314 22.428C46.9674 20.868 46.5354 19.044 46.5354 16.956C46.5354 14.868 46.9554 13.044 47.7954 11.484C48.6594 9.92399 49.8594 8.72398 51.3954 7.88399C52.9314 7.04398 54.6954 6.62398 56.6874 6.62398C58.6314 6.62398 60.3594 7.03198 61.8714 7.84799C63.3834 8.66398 64.5594 9.82799 65.3994 11.34C66.2634 12.852 66.6954 14.616 66.6954 16.632ZM60.3954 15.012C60.3954 13.956 60.0354 13.116 59.3154 12.492C58.5954 11.868 57.6954 11.556 56.6154 11.556C55.5834 11.556 54.7074 11.856 53.9874 12.456C53.2914 13.056 52.8594 13.908 52.6914 15.012H60.3954Z"
fill="white" />
<path
d="M92.8719 14.04C94.3359 14.352 95.5119 15.084 96.3999 16.236C97.2879 17.364 97.7319 18.66 97.7319 20.124C97.7319 22.236 96.9879 23.916 95.4999 25.164C94.0359 26.388 91.9839 27 89.3439 27H77.5719V1.72798H88.9479C91.5159 1.72798 93.5199 2.31598 94.9599 3.49198C96.4239 4.66798 97.1559 6.26398 97.1559 8.27998C97.1559 9.76798 96.7599 11.004 95.9679 11.988C95.1999 12.972 94.1679 13.656 92.8719 14.04ZM83.7279 11.952H87.7599C88.7679 11.952 89.5359 11.736 90.0639 11.304C90.6159 10.848 90.8919 10.188 90.8919 9.32399C90.8919 8.45999 90.6159 7.79999 90.0639 7.34399C89.5359 6.88799 88.7679 6.65999 87.7599 6.65999H83.7279V11.952ZM88.2639 22.032C89.2959 22.032 90.0879 21.804 90.6399 21.348C91.2159 20.868 91.5039 20.184 91.5039 19.296C91.5039 18.408 91.2039 17.712 90.6039 17.208C90.0279 16.704 89.2239 16.452 88.1919 16.452H83.7279V22.032H88.2639Z"
fill="white" />
<path d="M107.458 0.359985V27H101.302V0.359985H107.458Z" fill="white" />
<path
d="M121.064 27.288C119.096 27.288 117.32 26.868 115.736 26.028C114.176 25.188 112.94 23.988 112.028 22.428C111.14 20.868 110.696 19.044 110.696 16.956C110.696 14.892 111.152 13.08 112.064 11.52C112.976 9.93598 114.224 8.72398 115.808 7.88399C117.392 7.04398 119.168 6.62398 121.136 6.62398C123.104 6.62398 124.88 7.04398 126.464 7.88399C128.048 8.72398 129.296 9.93598 130.208 11.52C131.12 13.08 131.576 14.892 131.576 16.956C131.576 19.02 131.108 20.844 130.172 22.428C129.26 23.988 128 25.188 126.392 26.028C124.808 26.868 123.032 27.288 121.064 27.288ZM121.064 21.96C122.24 21.96 123.236 21.528 124.052 20.664C124.892 19.8 125.312 18.564 125.312 16.956C125.312 15.348 124.904 14.112 124.088 13.248C123.296 12.384 122.312 11.952 121.136 11.952C119.936 11.952 118.94 12.384 118.148 13.248C117.356 14.088 116.96 15.324 116.96 16.956C116.96 18.564 117.344 19.8 118.112 20.664C118.904 21.528 119.888 21.96 121.064 21.96Z"
fill="white" />
<path
d="M142.473 6.62398C143.889 6.62398 145.125 6.91198 146.181 7.48798C147.261 8.06398 148.089 8.81998 148.665 9.75598V6.91198H154.821V26.964C154.821 28.812 154.449 30.48 153.705 31.968C152.985 33.48 151.869 34.68 150.357 35.568C148.869 36.456 147.009 36.9 144.777 36.9C141.801 36.9 139.389 36.192 137.541 34.776C135.693 33.384 134.637 31.488 134.373 29.088H140.457C140.649 29.856 141.105 30.456 141.825 30.888C142.545 31.344 143.433 31.572 144.489 31.572C145.761 31.572 146.769 31.2 147.513 30.456C148.281 29.736 148.665 28.572 148.665 26.964V24.12C148.065 25.056 147.237 25.824 146.181 26.424C145.125 27 143.889 27.288 142.473 27.288C140.817 27.288 139.317 26.868 137.973 26.028C136.629 25.164 135.561 23.952 134.769 22.392C134.001 20.808 133.617 18.984 133.617 16.92C133.617 14.856 134.001 13.044 134.769 11.484C135.561 9.92399 136.629 8.72398 137.973 7.88399C139.317 7.04398 140.817 6.62398 142.473 6.62398ZM148.665 16.956C148.665 15.42 148.233 14.208 147.369 13.32C146.529 12.432 145.497 11.988 144.273 11.988C143.049 11.988 142.005 12.432 141.141 13.32C140.301 14.184 139.881 15.384 139.881 16.92C139.881 18.456 140.301 19.68 141.141 20.592C142.005 21.48 143.049 21.924 144.273 21.924C145.497 21.924 146.529 21.48 147.369 20.592C148.233 19.704 148.665 18.492 148.665 16.956Z"
fill="white" />
</svg>
</div>
<nav id="menuNavigation">
<a href="#">Home</a>
<a href="#">Sobre</a>
<a href="#">Categorias</a>
<a href="#">Contato</a>
</nav>
<div id="searchFieldContainer">
<input type="search" placeholder="Buscar" id="searchField">
<button id="searchButton">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z"
stroke="#9e6dc2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M21 21L16.65 16.65" stroke="#9e6dc2" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</button>
</div>
<div id="mobileMenuIcons">
<!-- Menu Open -->
<svg id="openButton" width="24" height="8" viewBox="0 0 24 8" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M24 0H0V2H24V0Z" fill="#9e6dc2" />
<path d="M24 6H8V8H24V6Z" fill="#9e6dc2" />
</svg>
<!-- Menu Close -->
<svg id="closeButton" width="18" height="17" viewBox="0 0 18 17" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M17.4963 16.0872L1.93994 0.530884L0.525729 1.9451L16.0821 17.5014L17.4963 16.0872Z"
fill="#9e6dc2" />
<path d="M16.0822 0.530809L0.525879 16.0872L1.94009 17.5014L17.4964 1.94502L16.0822 0.530809Z"
fill="#9e6dc2" />
</svg>
</div>
</header>
<main class="col-2">
<div>
<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="#">Veja mais
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 12H19" stroke="#4FFF4B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 5L19 12L12 19" stroke="#4FFF4B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
</div>
<div>
<img src="./assets/featured-image.png"
alt="imagem de uma parte de teclado e parte de uma tela,mostrando um script com códigos.">
</div>
</main>
</div>
</section>
<section id="content">
<div class="container">
<div class="col-2">
<div id="postPrincipalContentSection">
<img src="./assets/post-1.png" alt="">
<span>Janeiro 04, 2022</span>
<h2>Começando no ReactJS em 2022</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh nibh eu in aliquet ut adipiscing
neque.
Sed volutpat aenean sit vitae, sed tristique nibh nibh eu in aliquet ut adipiscing neque. Sed
volutpat aenean sit vitae, sed tristique. Sed volutpat aenean.
</p>
</div>
<div id="sidePostsContent">
<div class="sidePost">
<span>Janeiro 04, 2022</span>
<h2>Conheça as principais técnicas para conseguir uma vaga internacional em programação</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh nibh eu in aliquet ut
adipiscing
neque. Sed volutpat aenean sit vitae, sed tristique.
</p>
</div>
<div class="sidePost">
<span>Janeiro 04, 2022</span>
<h2>Veja a evolução do Front-end na prática</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh nibh eu in aliquet ut
adipiscing neque.
</p>
</div>
</div>
</div>
<div class="col-3">
<div class="post">
<img src="./assets/post-2.png" alt="">
<span>Janeiro 04, 2022</span>
<h2>10 dicas para conseguir a vaga desejada</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh nibh eu in aliquet ut adipiscing
neque. Sed volutpat aenean sit vitae, sed tristique.
</p>
</div>
<div class="post">
<img src="./assets/post-3.png" alt="">
<span>Janeiro 04, 2022</span>
<h2>Deixe seu código mais semântico com essas dicas</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh nibh eu in aliquet ut adipiscing
neque. Sed volutpat aenean sit vitae, sed tristique.
</p>
</div>
<div class="post">
<img src="./assets/post-4.png" alt="">
<span>Janeiro 04, 2022</span>
<h2>Use essas dicas nas suas aplicações mobile</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh nibh eu in aliquet ut adipiscing
neque. Sed volutpat aenean sit vitae, sed tristique.</p>
</div>
</div>
</div>
</section>
</body>
<script>
function openMenu() {
searchField.classList.remove('active');
mobileMenuIcons.classList.add('iconMenuOpen');
menuNavigation.classList.add('menuOpen');
document.body.style.overflow = "hidden";
}
function closeMenu() {
mobileMenuIcons.classList.remove('iconMenuOpen');
menuNavigation.classList.remove('menuOpen');
document.body.style.overflow = "initial";
}
function showSearchInput(){
searchField.classList.toggle('active');
}
openButton.addEventListener('click', openMenu);
closeButton.addEventListener('click', closeMenu);
searchButton.addEventListener('click', showSearchInput);
</script>
</html>