3º Commit

- Criação de mais Designs Responsivos.
- Criação do README do Projeto.

README.md

@@ -1,2 +1,42 @@
-# final-challenge-vnw
- Projeto para Conclusão de Módulo do Curso Vai na Web
+<h1 align="center"> Final Challenge VNW </h1>
+
+<p align="center">
+  <a href="#-tecnologias">Tecnologias</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+  <a href="#-projeto">Projeto</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+  <a href="#-layout">Layout</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+  <a href="#memo-licença">Licença</a>
+</p>
+
+<p align="center">
+  <img alt="License" src="https://img.shields.io/static/v1?label=license&message=MIT&color=49AA26&labelColor=000000">
+</p>
+
+<br>
+
+<p align="center">
+  <img alt="Projeto Final Challenge VNW" src=".github/preview.png" width="100%">
+</p>
+
+## 🚀 Tecnologias
+
+Esse projeto foi desenvolvido com as seguintes tecnologias:
+
+- HTML e CSS
+- Git e Github
+- Adobe XD
+
+## 💻 Projeto
+
+O Final Challenge VNW é uma web page que tem como objetivo colocar em prática os conhecimentos e conceitos sobre HTML, CSS e Design Responsivo aprendidos ao longo do módulo I do curso de Desenvolivento Web do Vai Na Web.
+
+- [Visite o projeto online](https://ollieveira.github.io/final-challenge-vnw/)
+
+## 🔖 Layout
+
+Você pode visualizar o layout do projeto através [DESSE LINK](https://xd.adobe.com/view/c20d8ff9-baf0-4a06-b200-3ffde9c66040-975e/screen/af5cc547-c866-4eef-a092-487cd6f6c6aa/specs/).
+
+## :memo: Licença
+
+Esse projeto está sob a licença MIT.
+
+---

src/style.css

@@ -338,7 +338,7 @@ footer .container {
   }
 }
 
-/* ------------------- RESPONSIVIDADE MOBILE --------------------------*/
+/* ------------------- RESPONSIVIDADE DISPOSITIVOS 750 PIXELS --------------------------*/
 @media (max-width: 750px) {
   :root {
     font-size: 14px;
@@ -512,3 +512,65 @@ footer .container {
     font-size: 1.5rem;
   }
 }
+
+/* ------------------- RESPONSIVIDADE DISPOSITIVOS 660 PIXELS --------------------------*/
+
+@media (max-width: 660px) {
+  :root {
+    font-size: 12px;
+  }
+
+  .welcome .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    padding-top: 100px;
+  }
+
+  .welcome h1 {
+    width: 400px;
+    margin-top: 96px;
+
+    font-size: 3rem;
+  }
+
+  .welcome img {
+    width: 120px;
+    height: 120px;
+  }
+}
+
+/* ------------------- RESPONSIVIDADE DISPOSITIVOS 550 PIXELS --------------------------*/
+
+@media (max-width: 550px) {
+  .welcome h1 {
+    width: 300px;
+  }
+
+  .relax h2 {
+    width: 260px;
+  }
+
+  .relax p {
+    width: 260px;
+    word-wrap: break-word;
+  }
+
+  .health h2 {
+    width: 260px;
+  }
+
+  .health p {
+    width: 260px;
+    word-wrap: break-word;
+  }
+
+  .sponsors figure {
+    width: 80%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+  }
+}