adicionando responsividade

about.html

@@ -33,7 +33,7 @@ <h1 class="apresentacao__conteudo__titulo">Sobre mim</h1>
                 perferendis doloribus asperiores ipsum delis forum birol parela maxime infena. Excepteur sint occaecat
                 cupidatat non.</p>
         </section>
-        <img src="./assets/imagem.png" alt="Foto da Joana Santos programando">
+        <img class="apresentacao__imagem" src="./assets/imagem.png" alt="Foto da Joana Santos programando">
     </main>
 
     <footer class="rodape">

index.html

@@ -28,21 +28,25 @@ <h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro n
             conversar?</p>
             <div class="apresentacao__links">
                 <h2 class="apresentacao__links__subtitulo">Acesse minhas redes</h2>
-                <a class="apresentacao__links__link" href="https://github.com/rafaballerini">
+                <a class="apresentacao__links__navegacao" href="https://github.com/rafaballerini">
                     <img src="./assets/github.png">
                     Github
                 </a>
-                <a class="apresentacao__links__link" href="https://linkedin.com/in/rafaellaballerini">
+                <a class="apresentacao__links__navegacao" href="https://linkedin.com/in/rafaellaballerini">
                     <img src="./assets/linkedin.png">
                     linkedin
                 </a>
-                <a class="apresentacao__links__link" href="https://twitch.tv/guilimadev">
+                <a class="apresentacao__links__navegacao" href="https://twitch.tv/guilimadev">
                     <img src="./assets/twitch.png">
                     Twitch
                 </a>
+                <a class="apresentacao__links__navegacao" href="https://twitch.tv/guilimadev">
+                    <img src="./assets/whatsapp.png">
+                    Whatsapp
+                </a>
             </div>
         </section>
-        <img src="./assets/imagem.png" alt="Foto da Joana Santos programando">
+        <img class="apresentacao__imagem" src="./assets/imagem.png" alt="Foto da Joana Santos programando">
     </main>
     <footer class="rodape">
         <p>Desenvolvido por Alura.</p>

styles/style.css

@@ -19,6 +19,7 @@ body{
     background-color: var(--cor-primaria);
     color: var(--cor-secundaria);
 }
+
 .cabecalho{
     padding: 2% 0% 0% 15%;
 }
@@ -28,7 +29,7 @@ body{
 }
 .cabecalho__menu__link{
     font-family: var(--fonte-secundaria);
-    font-size: 24px;
+    font-size: 1.5rem;
     font-weight: 600;
     color: var(--cor-terciaria);
     text-decoration: none;
@@ -38,23 +39,24 @@ body{
     display: flex;
     align-items: center;
     justify-content: space-between;
+    gap: 82px;
 }
 .apresentacao__conteudo{
-    width: 615px;
+    width: 50%;
     display: flex;
     flex-direction: column;
     gap: 40px;
 }
 
 .apresentacao__conteudo__titulo{
-    font-size: 36px;
+    font-size: 2.25rem;
     font-family: var(--fonte-primaria);
 }
 .titulo-destaque{
     color: var(--cor-terciaria);
 }
 .apresentacao__conteudo__texto{
-    font-size: 24px;
+    font-size: 1.5rem;
     font-family: var(--fonte-secundaria);
 }
 
@@ -68,32 +70,51 @@ body{
 .apresentacao__links__subtitulo{
     font-family: var(--fonte-primaria);
     font-weight: 400;
-    font-size: 24px;
+    font-size: 1.5rem;
 }
-.apresentacao__links__link{
+.apresentacao__links__navegacao{
     display: flex;
     justify-content: center;
     gap: 16px;
     border: 2px solid var(--cor-terciaria);
-    width: 378px;
+    width: 50%;
     text-align: center;
     border-radius: 8px;
-    font-size: 24px;
+    font-size: 1.5rem;
     font-weight: 600;
     padding: 21.5px 0;
     text-decoration: none;
     color: var(--cor-secundaria);
     font-family: var(--fonte-secundaria);
 }
-.apresentacao__links__link:hover{
+.apresentacao__links__navegacao:hover{
     background-color: var(--cor-hover);
 }
+.apresentacao__imagem{
+    width: 50%;
+}
 .rodape{
     color: var(--cor-primaria);
     background-color: var(--cor-terciaria);
     padding: 24px;
     text-align: center;
     font-family: var(--fonte-secundaria);
-    font-size: 24px;
+    font-size: 1.5rem;
     font-weight: 400;
+}
+
+@media (max-width: 1200px) {
+    .cabecalho{
+         padding: 10%;  
+    }
+    .cabecalho__menu{
+        justify-content: center;
+    }
+    .apresentacao{
+        flex-direction: column-reverse;
+        padding: 5%;
+    }
+    .apresentacao__conteudo{
+        width: auto;
+    }
 }