├── README.md
├── css
    └── styles.css
├── images
    ├── about.png
    ├── car-card.png
    ├── car-header.png
    ├── facebook.png
    ├── feature-planet.png
    └── instagram.png
└── index.html


/README.md:
--------------------------------------------------------------------------------
 1 | # DevClass 001: Projeto DevCar
 2 | Repositório do nosso devClass de HTML e CSS para iniciantes.
 3 | 
 4 | ## Recursos: 
 5 | Template utilizado neste projeto
 6 | https://www.figma.com/file/zEdDGF7hn1AOmZHfI04Sz6/devClass_001_HTML_CSS?node-id=0%3A1
 7 | 
 8 | Domine o FlexBox com o FlexboxFroggy
 9 | https://flexboxfroggy.com/
10 | 
11 | Lista das transparências para adicionar opacidade a uma cor hexadecimal:
12 | https://gist.github.com/lucianodiisouza/bad9ee2e73bfd33fd6ca4a601fabf6c3
13 | 
14 | Link para a landing page já pronta:
15 | https://devclass-001.netlify.app/
16 | 


--------------------------------------------------------------------------------
/css/styles.css:
--------------------------------------------------------------------------------
  1 | /* font importing */
  2 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
  3 | 
  4 | /* reseting css rules */
  5 | * {
  6 |   margin: 0px;
  7 |   padding: 0px;
  8 |   box-sizing: border-box;
  9 |   outline: none;
 10 |   font-family: "Roboto", sans-serif;
 11 | }
 12 | 
 13 | :root {
 14 |   --orange: #f78b00;
 15 |   --blue: #00285f;
 16 |   --gray: #ededed;
 17 | }
 18 | 
 19 | html,
 20 | body {
 21 |   width: 100%;
 22 |   overflow-x: hidden;
 23 | }
 24 | 
 25 | header {
 26 |   width: 100%;
 27 |   height: 500px;
 28 |   background: var(--orange);
 29 | }
 30 | 
 31 | .content {
 32 |   max-width: 1000px;
 33 |   min-width: 300px;
 34 |   margin: 0 auto;
 35 |   display: flex;
 36 |   flex-direction: column;
 37 |   padding: 10px;
 38 | }
 39 | 
 40 | nav {
 41 |   width: 100%;
 42 |   height: 125px;
 43 |   display: flex;
 44 |   flex-direction: row;
 45 |   align-items: center;
 46 |   justify-content: space-between;
 47 | }
 48 | 
 49 | .brand {
 50 |   font-size: 24px;
 51 |   color: var(--blue);
 52 |   cursor: pointer;
 53 | }
 54 | 
 55 | nav ul {
 56 |   display: flex;
 57 |   flex-direction: row;
 58 | }
 59 | 
 60 | nav ul li {
 61 |   list-style: none;
 62 |   padding: 10px;
 63 |   cursor: pointer;
 64 | }
 65 | 
 66 | nav ul li a {
 67 |   color: var(--blue);
 68 |   text-decoration: none;
 69 | }
 70 | 
 71 | nav ul li a:hover {
 72 |   color: #00285f83;
 73 | }
 74 | 
 75 | nav ul button {
 76 |   border: 1px solid var(--blue);
 77 |   background: transparent;
 78 |   padding: 8px 40px;
 79 |   cursor: pointer;
 80 |   margin-left: 30px;
 81 |   color: var(--blue);
 82 |   font-weight: bold;
 83 |   border-radius: 4px;
 84 | }
 85 | 
 86 | nav ul button:hover {
 87 |   transition: background, color 0.6s;
 88 |   background: var(--blue);
 89 |   color: white;
 90 | }
 91 | 
 92 | .content .header-block {
 93 |   max-width: 1000px;
 94 |   min-width: 300px;
 95 |   height: 450px;
 96 |   background: var(--blue);
 97 |   border-radius: 8px;
 98 |   box-shadow: 1px 0px 10px 0px rgba(0, 0, 0, 0.5);
 99 |   -webkit-box-shadow: 1px 0px 10px 0px rgba(0, 0, 0, 0.5);
100 |   -moz-box-shadow: 1px 0px 10px 0px rgba(0, 0, 0, 0.5);
101 |   position: relative;
102 |   z-index: 10;
103 |   padding: 10px;
104 | }
105 | 
106 | .header-block img {
107 |   width: 50%;
108 |   position: absolute;
109 |   right: 2%;
110 |   bottom: 2%;
111 | }
112 | 
113 | .header-block .text {
114 |   position: absolute;
115 |   bottom: 30%;
116 |   left: 15%;
117 | }
118 | 
119 | .header-block .text h2 {
120 |   color: white;
121 |   margin-bottom: 20px;
122 |   text-align: right;
123 |   transform: translateX(-20px);
124 |   transition: transform 0.5s;
125 | }
126 | 
127 | .header-block .text p {
128 |   max-width: 280px;
129 |   color: white;
130 |   text-align: right;
131 |   transform: translateX(-20px);
132 |   transition: transform 0.4s;
133 | }
134 | 
135 | /* Product Catalog */
136 | 
137 | section .catalog {
138 |   width: 100vw;
139 |   padding: 100px;
140 | }
141 | 
142 | section .filter-card {
143 |   width: 980px;
144 |   height: 150px;
145 |   background: var(--gray);
146 |   border-radius: 8px;
147 |   margin: 0 auto;
148 |   display: flex;
149 |   flex-direction: row;
150 |   align-items: center;
151 |   justify-content: center;
152 | }
153 | 
154 | .search-input {
155 |   width: 700px;
156 |   height: 50px;
157 |   border: none;
158 |   border-radius: 4px 0px 0px 4px;
159 |   text-indent: 10px;
160 | }
161 | 
162 | .search-button {
163 |   width: 150px;
164 |   height: 50px;
165 |   border-radius: 0px 4px 4px 0px;
166 |   border: none;
167 |   background: var(--blue);
168 |   color: white;
169 |   cursor: pointer;
170 |   font-size: 1.1em;
171 |   transition: 0.2s ease;
172 | }
173 | 
174 | .search-button:hover {
175 |   background: #dedede;
176 |   color: var(--blue);
177 | }
178 | 
179 | .title-wrapper-catalog {
180 |   margin-top: 200px;
181 |   padding-bottom: 20px;
182 | }
183 | 
184 | section .card-wrapper {
185 |   max-width: 1000px;
186 |   height: 100%;
187 |   display: grid;
188 |   grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
189 |   grid-gap: 30px;
190 |   padding-top: 50px;
191 | }
192 | 
193 | section .card-item {
194 |   height: 400px;
195 |   background: var(--gray);
196 |   border-radius: 8px;
197 |   display: flex;
198 |   flex-direction: column;
199 |   align-items: center;
200 |   justify-content: space-around;
201 | }
202 | 
203 | .card-content {
204 |   height: 40%;
205 |   display: flex;
206 |   flex-direction: column;
207 |   align-items: center;
208 |   justify-content: space-around;
209 | }
210 | 
211 | .card-item img {
212 |   width: 85%;
213 | }
214 | 
215 | .card-item h4 {
216 |   width: 90%;
217 | }
218 | 
219 | .card-item p {
220 |   width: 90%;
221 |   font-style: italic;
222 |   color: #00000070;
223 | }
224 | 
225 | .card-item button {
226 |   width: 90%;
227 |   padding: 15px 0px;
228 |   border: none;
229 |   background: var(--blue);
230 |   border-radius: 4px;
231 |   color: white;
232 |   font-weight: bold;
233 |   font-size: 1.1em;
234 |   cursor: pointer;
235 |   transition: 0.3s ease;
236 |   margin-bottom: 10px;
237 | }
238 | 
239 | .card-item button:hover {
240 |   background: #dedede;
241 |   color: var(--blue);
242 | }
243 | 
244 | /* About */
245 | 
246 | .about {
247 |   width: 100%;
248 |   height: 100%;
249 |   display: flex;
250 |   align-items: center;
251 |   justify-content: center;
252 |   padding: 50px 10px;
253 | }
254 | 
255 | .about-content {
256 |   max-width: 1000px;
257 |   min-width: 300px;
258 |   height: 600px;
259 |   background: #dedede3b;
260 |   margin: 0 auto;
261 |   border-radius: 8px;
262 |   z-index: 10;
263 |   padding: 10px;
264 |   display: flex;
265 |   flex-direction: row;
266 |   align-items: center;
267 |   justify-content: space-between;
268 | }
269 | 
270 | .left {
271 |   width: 25%;
272 |   min-width: 300px;
273 |   height: 100%;
274 |   background: #000000a1;
275 |   border-radius: 8px;
276 | }
277 | 
278 | .right {
279 |   width: 65%;
280 |   height: 100%;
281 |   display: flex;
282 |   flex-direction: column;
283 |   align-items: flex-start;
284 |   justify-content: flex-start;
285 |   padding-top: 10%;
286 | }
287 | 
288 | .right h3 {
289 |   text-align: right;
290 |   width: 90%;
291 |   margin-bottom: 20px;
292 | }
293 | 
294 | .right p {
295 |   max-width: 90%;
296 |   font-size: 1em;
297 |   letter-spacing: 2px;
298 |   text-align: right;
299 |   color: rgba(0, 0, 0, 0.4);
300 | }
301 | 
302 | /* Features */
303 | .features {
304 |   width: 100%;
305 |   height: 100%;
306 |   background: var(--gray);
307 |   display: flex;
308 |   align-items: center;
309 |   justify-content: center;
310 |   padding: 50px 0px;
311 | }
312 | 
313 | .title-wrapper-features {
314 |   padding: 20px 0px;
315 | }
316 | 
317 | .feature-card-block {
318 |   max-width: 1000px;
319 |   min-width: 300px;
320 |   height: 600px;
321 |   background: white;
322 |   margin: 0 auto;
323 |   border-radius: 8px;
324 |   z-index: 10;
325 |   padding: 50px;
326 |   display: grid;
327 |   grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
328 |   grid-gap: 30px;
329 | }
330 | 
331 | .feature-card-item {
332 |   max-width: 420px;
333 |   height: 150px;
334 |   display: flex;
335 |   flex-direction: row;
336 |   align-items: center;
337 |   justify-content: space-around;
338 |   border: 1px solid #dedede3b;
339 |   border-radius: 4px;
340 | }
341 | 
342 | .feature-text-content {
343 |   max-width: 60%;
344 |   margin: 5px;
345 | }
346 | 
347 | .feature-card-item img {
348 |   width: 64px;
349 |   height: 64px;
350 | }
351 | 
352 | /* Footer */
353 | footer {
354 |   width: 100%;
355 |   height: 250px;
356 | }
357 | 
358 | footer .main {
359 |   width: 100%;
360 |   height: 200px;
361 |   background: var(--orange);
362 |   padding: 20px 10px;
363 | }
364 | 
365 | .footer-links {
366 |   max-width: 1000px;
367 |   min-width: 300px;
368 |   display: flex;
369 |   flex-direction: row;
370 |   justify-content: space-between;
371 |   margin-top: 20px;
372 | }
373 | 
374 | .footer-company,
375 | .footer-rental,
376 | .footer-contact,
377 | .footer-social {
378 |   color: white;
379 |   height: 100%;
380 |   min-height: 100px;
381 | }
382 | 
383 | .footer-links h4 {
384 |   margin-bottom: 10px;
385 | }
386 | 
387 | .footer-links {
388 |   margin-bottom: 8px;
389 | }
390 | 
391 | .main .footer-social img {
392 |   width: 32px;
393 |   height: 32px;
394 | }
395 | 
396 | footer .last {
397 |   width: 100%;
398 |   height: 50px;
399 |   background: var(--blue);
400 |   color: white;
401 |   display: flex;
402 |   align-items: center;
403 |   justify-content: center;
404 | }
405 | 
406 | /* Responsive adjustments */
407 | 
408 | @media (max-width: 576px) {
409 |   nav ul li {
410 |     display: none;
411 |   }
412 | 
413 |   .header-block img {
414 |     width: 70%;
415 |     position: absolute;
416 |     right: 16%;
417 |     top: 30%;
418 |   }
419 | 
420 |   .header-block .text {
421 |     position: absolute;
422 |     bottom: 10%;
423 |     left: 15;
424 |   }
425 | 
426 |   section .filter-card {
427 |     width: 390px;
428 |     padding: 0px 10px;
429 |   }
430 | 
431 |   .search-input {
432 |     max-width: 700px;
433 |     min-width: 240px;
434 |   }
435 | 
436 |   .search-button {
437 |     max-width: 150px;
438 |     min-width: 80px;
439 |   }
440 | 
441 |   .about {
442 |     margin-top: 100px;
443 |   }
444 | 
445 |   .title-wrapper-about {
446 |     margin-bottom: 20px;
447 |   }
448 |   .about-content {
449 |     flex-direction: column;
450 |     height: 100%;
451 |   }
452 |   .left {
453 |     display: none;
454 |   }
455 |   .right {
456 |     width: 90%;
457 |   }
458 | 
459 |   .right p {
460 |     width: 100%;
461 |     margin: 0px;
462 |     text-align: left;
463 |   }
464 | 
465 |   .features {
466 |     height: 100%;
467 |   }
468 | 
469 |   .feature-card-block {
470 |     height: 100%;
471 |     display: flex;
472 |     flex-direction: column;
473 |   }
474 | 
475 |   footer {
476 |     height: 100%;
477 |   }
478 | 
479 |   footer .main {
480 |     height: 100%;
481 |   }
482 | 
483 |   .footer-links {
484 |     flex-direction: column;
485 |     padding-left: 10%;
486 |   }
487 | }
488 | 


--------------------------------------------------------------------------------
/images/about.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsuperior/devclass-catalogo-carros/a6dd5c805fcfd4dfb8651e333c91521a8fad32c5/images/about.png


--------------------------------------------------------------------------------
/images/car-card.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsuperior/devclass-catalogo-carros/a6dd5c805fcfd4dfb8651e333c91521a8fad32c5/images/car-card.png


--------------------------------------------------------------------------------
/images/car-header.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsuperior/devclass-catalogo-carros/a6dd5c805fcfd4dfb8651e333c91521a8fad32c5/images/car-header.png


--------------------------------------------------------------------------------
/images/facebook.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsuperior/devclass-catalogo-carros/a6dd5c805fcfd4dfb8651e333c91521a8fad32c5/images/facebook.png


--------------------------------------------------------------------------------
/images/feature-planet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsuperior/devclass-catalogo-carros/a6dd5c805fcfd4dfb8651e333c91521a8fad32c5/images/feature-planet.png


--------------------------------------------------------------------------------
/images/instagram.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsuperior/devclass-catalogo-carros/a6dd5c805fcfd4dfb8651e333c91521a8fad32c5/images/instagram.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>devsuperior</title>
  8 |     <link rel="stylesheet" href="css/styles.css" />
  9 |   </head>
 10 |   <body>
 11 |     <header>
 12 |       <div class="content">
 13 |         <nav>
 14 |           <p class="brand">dev<strong>superior</strong></p>
 15 |           <ul>
 16 |             <li><a href="#catalog">Catalog</a></li>
 17 |             <li><a href="#about">About</a></li>
 18 |             <li><a href="#feature">Features</a></li>
 19 |             <button>Login</button>
 20 |           </ul>
 21 |         </nav>
 22 |         <div class="header-block">
 23 |           <div class="text">
 24 |             <h2>The perfect car for you</h2>
 25 |             <p>
 26 |               Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia,
 27 |               asperiores?
 28 |             </p>
 29 |           </div>
 30 |           <img src="images/car-header.png" alt="Car" />
 31 |         </div>
 32 |       </div>
 33 |     </header>
 34 |     <section class="catalog" id="catalog">
 35 |       <div class="content">
 36 |         <div class="title-wrapper-catalog">
 37 |           <p>Find what you want</p>
 38 |           <h3>Catalog</h3>
 39 |         </div>
 40 |         <div class="filter-card">
 41 |           <input
 42 |             type="text"
 43 |             class="search-input"
 44 |             placeholder="Choose your favorite model"
 45 |           />
 46 |           <button class="search-button">Search</button>
 47 |         </div>
 48 |         <div class="card-wrapper">
 49 |           <div class="card-item">
 50 |             <img src="images/car-card.png" alt="Car" />
 51 |             <div class="card-content">
 52 |               <h3>Audi Supra TT</h3>
 53 |               <p>
 54 |                 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 55 |                 Repellendus.
 56 |               </p>
 57 |               <button type="button">I want this!</button>
 58 |             </div>
 59 |           </div>
 60 |           <div class="card-item">
 61 |             <img src="images/car-card.png" alt="Car" />
 62 |             <div class="card-content">
 63 |               <h3>Audi Supra TT</h3>
 64 |               <p>
 65 |                 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 66 |                 Repellendus.
 67 |               </p>
 68 |               <button type="button">I want this!</button>
 69 |             </div>
 70 |           </div>
 71 |           <div class="card-item">
 72 |             <img src="images/car-card.png" alt="Car" />
 73 |             <div class="card-content">
 74 |               <h3>Audi Supra TT</h3>
 75 |               <p>
 76 |                 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 77 |                 Repellendus.
 78 |               </p>
 79 |               <button type="button">I want this!</button>
 80 |             </div>
 81 |           </div>
 82 |           <div class="card-item">
 83 |             <img src="images/car-card.png" alt="Car" />
 84 |             <div class="card-content">
 85 |               <h3>Audi Supra TT</h3>
 86 |               <p>
 87 |                 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 88 |                 Repellendus.
 89 |               </p>
 90 |               <button type="button">I want this!</button>
 91 |             </div>
 92 |           </div>
 93 |           <div class="card-item">
 94 |             <img src="images/car-card.png" alt="Car" />
 95 |             <div class="card-content">
 96 |               <h3>Audi Supra TT</h3>
 97 |               <p>
 98 |                 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 99 |                 Repellendus.
100 |               </p>
101 |               <button type="button">I want this!</button>
102 |             </div>
103 |           </div>
104 |           <div class="card-item">
105 |             <img src="images/car-card.png" alt="Car" />
106 |             <div class="card-content">
107 |               <h3>Audi Supra TT</h3>
108 |               <p>
109 |                 Lorem ipsum dolor sit amet consectetur adipisicing elit.
110 |                 Repellendus.
111 |               </p>
112 |               <button type="button">I want this!</button>
113 |             </div>
114 |           </div>
115 |           <div class="card-item">
116 |             <img src="images/car-card.png" alt="Car" />
117 |             <div class="card-content">
118 |               <h3>Audi Supra TT</h3>
119 |               <p>
120 |                 Lorem ipsum dolor sit amet consectetur adipisicing elit.
121 |                 Repellendus.
122 |               </p>
123 |               <button type="button">I want this!</button>
124 |             </div>
125 |           </div>
126 |           <div class="card-item">
127 |             <img src="images/car-card.png" alt="Car" />
128 |             <div class="card-content">
129 |               <h3>Audi Supra TT</h3>
130 |               <p>
131 |                 Lorem ipsum dolor sit amet consectetur adipisicing elit.
132 |                 Repellendus.
133 |               </p>
134 |               <button type="button">I want this!</button>
135 |             </div>
136 |           </div>
137 |           <div class="card-item">
138 |             <img src="images/car-card.png" alt="Car" />
139 |             <div class="card-content">
140 |               <h3>Audi Supra TT</h3>
141 |               <p>
142 |                 Lorem ipsum dolor sit amet consectetur adipisicing elit.
143 |                 Repellendus.
144 |               </p>
145 |               <button type="button">I want this!</button>
146 |             </div>
147 |           </div>
148 |         </div>
149 |       </div>
150 |     </section>
151 | 
152 |     <section class="about" id="about">
153 |       <div class="content">
154 |         <div class="title-wrapper-about">
155 |           <p>Know about us</p>
156 |           <h3>About</h3>
157 |         </div>
158 |         <div class="about-content">
159 |           <div class="left">
160 |             <img src="images/about.png" alt="About" />
161 |           </div>
162 |           <div class="right">
163 |             <h3>Join technology and mobility</h3>
164 |             <p>
165 |               Lorem ipsum dolor sit amet consectetur adipisicing elit.
166 |               Repudiandae ut inventore magni repellendus ab ad itaque facere. A
167 |               tenetur quam, nobis tempore illum laborum ipsa fuga, itaque
168 |               possimus repellat ad perspiciatis, velit reiciendis eos facilis
169 |               sapiente blanditiis quas officia hic beatae quibusdam! Quod
170 |               eligendi porro possimus voluptatum ad ipsum sapiente soluta,
171 |               maiores nobis tenetur adipisci officiis nisi illum quae natus
172 |               nostrum tempora accusantium blanditiis? Rem nesciunt illum
173 |               dolorum, perferendis quos consequatur suscipit cumque fugiat alias
174 |               sint repellat qui adipisci error est distinctio doloribus labore
175 |               sunt modi eos odio quibusdam dicta. Dignissimos voluptate illum
176 |               possimus quo. Ducimus repellat doloribus quisquam quidem?
177 |             </p>
178 |           </div>
179 |         </div>
180 |       </div>
181 |     </section>
182 | 
183 |     <section class="features" id="features">
184 |       <div class="content">
185 |         <div class="title-wrapper-features">
186 |           <p>What you can do</p>
187 |           <h3>Features</h3>
188 |         </div>
189 |         <div class="feature-card-block">
190 |           <div class="feature-card-item">
191 |             <img src="images/feature-planet.png" alt="Feature" />
192 |             <div class="feature-text-content">
193 |               <h3>Title</h3>
194 |               <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
195 |             </div>
196 |           </div>
197 |           <div class="feature-card-item">
198 |             <img src="images/feature-planet.png" alt="Feature" />
199 |             <div class="feature-text-content">
200 |               <h3>Title</h3>
201 |               <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
202 |             </div>
203 |           </div>
204 |           <div class="feature-card-item">
205 |             <img src="images/feature-planet.png" alt="Feature" />
206 |             <div class="feature-text-content">
207 |               <h3>Title</h3>
208 |               <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
209 |             </div>
210 |           </div>
211 |           <div class="feature-card-item">
212 |             <img src="images/feature-planet.png" alt="Feature" />
213 |             <div class="feature-text-content">
214 |               <h3>Title</h3>
215 |               <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
216 |             </div>
217 |           </div>
218 |           <div class="feature-card-item">
219 |             <img src="images/feature-planet.png" alt="Feature" />
220 |             <div class="feature-text-content">
221 |               <h3>Title</h3>
222 |               <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
223 |             </div>
224 |           </div>
225 |           <div class="feature-card-item">
226 |             <img src="images/feature-planet.png" alt="Feature" />
227 |             <div class="feature-text-content">
228 |               <h3>Title</h3>
229 |               <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
230 |             </div>
231 |           </div>
232 |         </div>
233 |       </div>
234 |     </section>
235 | 
236 |     <footer>
237 |       <div class="main">
238 |         <div class="content footer-links">
239 |           <div class="footer-company">
240 |             <h4>Company</h4>
241 |             <h6>About</h6>
242 |             <h6>Contact</h6>
243 |           </div>
244 |           <div class="footer-rental">
245 |             <h4>Rental</h4>
246 |             <h6>Self-Drive</h6>
247 |             <h6>Chauffer-Driven</h6>
248 |             <h6>Help</h6>
249 |           </div>
250 |           <div class="footer-social">
251 |             <h4>Stay connected</h4>
252 |             <div class="social-icons">
253 |               <img src="images/instagram.png" alt="Instagram" />
254 |               <img src="images/facebook.png" alt="Facebook" />
255 |             </div>
256 |           </div>
257 |           <div class="footer-contact">
258 |             <h4>Contact US</h4>
259 |             <h6>+55 31 988776655</h6>
260 |             <h6>contato@devsuperior.com.br</h6>
261 |             <h6>Nome da Rua, belo horizonte MG</h6>
262 |           </div>
263 |         </div>
264 |       </div>
265 |       <div class="last">DevSuperior 2021 - Use like you want</div>
266 |     </footer>
267 |   </body>
268 | </html>
269 | 


--------------------------------------------------------------------------------