design: nav

linder3hs · Feb 9, 2024 · e9ea81b · e9ea81b
1 parent 9bf2eef
commit e9ea81b
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 7 deletions.
diff --git a/css/style.css b/css/style.css
@@ -79,3 +79,30 @@ main {
   height: 350px;
   border-radius: 50%;
 }
+
+.container-contact {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  align-items: end;
+}
+
+.container-contact > a {
+  text-decoration: none;
+  color: rgba(123, 74, 226, 0.5);
+}
+
+.container-contact > a:first-child {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.container-contact > a:last-child {
+  border: rgba(123, 74, 226, 0.5) solid;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px;
+  border-radius: 16px;
+}
diff --git a/images/download.svg b/images/download.svg
diff --git a/images/whatsapp.svg b/images/whatsapp.svg
diff --git a/index.html b/index.html
@@ -60,13 +60,15 @@ <h1 class="title">Linder Hassinger</h1>
           alt="Linder Hssinger - Foto de perfil"
         />
       </div>
-      <div>
-        <p>
-          <a href="#">Descargar CV</a>
-        </p>
-        <p>
-          <a href="">Vamos a conversar</a>
-        </p>
+      <div class="container-contact">
+        <a href="#">
+          Descargar CV
+          <img src="./images/download.svg" alt="" />
+        </a>
+        <a href="">
+          <img src="./images/whatsapp.svg" alt="" />
+          Vamos a conversar
+        </a>
       </div>
     </main>
   </body>