Pequenas correções

- página principal
  - Quest mais novas na frente
  - gap ao inves de margin
  - webp images
- quest 1
  - centralizando
  - arrumando créditos em mobile
- quest 2
  - submit: input -> button

1-huddle-landing-page-with-single-introductory-section/src/css/style.css

@@ -1,14 +1,21 @@
 html {
     font-family: 'Poppins', sans-serif;
     color:white;
+    display: flex;
+    min-width: 100%;
+    min-height: 100%;
+    align-items: center;
+    justify-content: center;
 }
 
 body {
     background: hsl(257, 40%, 49%) url("../images/bg-desktop.svg") no-repeat;
-    display:flex;
+    display: flex;
     flex-direction: column;
     justify-content: space-between;
     margin: 54px 72px 40px 72px;
+    background-position: center;
+
 }
 
 header {
@@ -85,9 +92,9 @@ footer a.social:hover > img {
     filter: invert(55%) sepia(31%) saturate(5377%) hue-rotate(292deg) brightness(99%) contrast(100%);
 }
 .attribution {
-    position: fixed;
+    position: absolute;
     top: 0;
-    margin-left: -72px;
+    left: 0;
     width: 100%;
     text-align: center;
     font-size: 11px; 

2-formulario-com-validacao/index.html

@@ -26,7 +26,7 @@ <h2>FICOU COM DÚVIDA?<br>NOS MANDE UMA MENSAGEM!</h2>
             <textarea name="mensagem" required placeholder="Mensagem *"></textarea>
             <span></span>
             <span class="alerta">*campos obrigatórios</span>
-            <input type="submit" value="Enviar">
+            <button type="submit">Enviar</button>
         </form>
     </main>
 </body>

2-formulario-com-validacao/src/css/style.css

@@ -10,11 +10,11 @@ html, body {
 }
 
 body {
-    min-height: 100vh;
+    min-height: 100dvh;
     display: flex;
     justify-content: center;
     align-items: center;
-    background-image: radial-gradient(rgba(223,101,150,0.65), rgba(98,130,229,0.85));
+    background-image: linear-gradient(rgb(223,101,150), rgb(98,130,229));
 }
 
 .container {
@@ -23,8 +23,7 @@ body {
     display: flex;
     align-items: center;
     justify-content: space-around;
-    outline: 1px outset black;
-    background-image: linear-gradient(rgb(223,101,150), rgb(98,130,229));
+    outline: 2px outset black;
 }
 
 .container .mensagem {
@@ -49,14 +48,16 @@ body {
 }
 
 .container .formulario input,
-.container .formulario textarea {
+.container .formulario textarea,
+.container .formulario button {
     border: 1px solid #000;
     border-radius: 5px;
     padding: 9px;
 }
 
 .container .formulario input:not(:first-child),
 .container .formulario textarea,
+.container .formulario button,
 .container .formulario .alerta {
     margin-top: 15px;
 }
@@ -89,7 +90,7 @@ body {
     scrollbar-width: thin;
 }
 
-.container .formulario input[type=submit] {
+.container .formulario button {
     color:white;
     background-color: #3CCC87;
     border-color: transparent;

index.html

@@ -12,14 +12,14 @@
     <main>
         <h1>DevQuest - Quests</h1>
         <div class="quests">
-            <a href="./1-huddle-landing-page-with-single-introductory-section/" class="quest">
-                <h3 class="titulo">1. HTML/CSS - huddle landing page with single introductory section</h3>
-                <img class="imagem" src="./src/images/1.png" alt="">
-                <span class="descricao"></span>
-            </a>
             <a href="./2-formulario-com-validacao/" class="quest">
                 <h3 class="titulo">2. HTML/CSS/JS - Formulário com validação</h3>
-                <img class="imagem" src="./src/images/2.png" alt="">
+                <img class="imagem" src="./src/images/2.webp" alt="">
+                <span class="descricao"></span>
+            </a>
+            <a href="./1-huddle-landing-page-with-single-introductory-section/" class="quest">
+                <h3 class="titulo">1. HTML/CSS - huddle landing page with single introductory section</h3>
+                <img class="imagem" src="./src/images/1.webp" alt="">
                 <span class="descricao"></span>
             </a>
         </div>

src/css/style.css

@@ -20,18 +20,18 @@ main .quests {
     display: grid;
     grid-template-columns: repeat(auto-fit, 500px);
     justify-content: center;
+    gap: 2rem;
 }
 
 main .quests .quest {
-    margin: 1em;
     outline: thin solid #c0c0c0;
     display: flex;
     flex-direction: column;
     padding: 5px;
     background-color: rgba(0,0,0,0.2);
     text-decoration: none;
     color: white;
-    border-radius: 1em;
+    border-radius: 1rem;
 }
 
 
@@ -49,8 +49,8 @@ main .quests .quest .titulo {
 main .quests .quest .imagem {
     object-fit: contain;
     max-width: 100%;
-    border-bottom-left-radius: 1em;
-    border-bottom-right-radius: 1em;
+    border-bottom-left-radius: 1rem;
+    border-bottom-right-radius: 1rem;
 }
 
 main .quests .quest .descricao {