commit principal

lebusistemas · Jan 22, 2022 · b111c24 · b111c24
commit b111c24
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 0 deletions.
diff --git a/css/card.css b/css/card.css
@@ -0,0 +1,88 @@
+@import url('https://fonts.googleapis.com/css2?family=ABeeZee:ital@0;1&display=swap');
+
+*{
+    box-sizing: border-box;
+    margin: 0;
+}
+
+body{
+    font-family: 'ABeeZee', sans-serif;
+    background-color: #505285cc ;
+}
+
+.card{
+    width: 330px;
+    min-height: 400px;
+    background-color: #fff;
+    margin: 0 auto;
+    margin-top: 70px;
+    border-radius: 10px;
+    box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.24);
+    background-image: linear-gradient(to top, #505285 0%, #585e92 12%, #65689f 25%, #7474b0 37%, #7e7ebb 50%, #8389c7 62%, #9795d4 75%, #a2a1dc 87%, #b5aee4 100%);
+    background-image: linear-gradient(to top, #505285 0%, #3B2E59 100%);
+    background-size: 100% 150px;
+    background-repeat: no-repeat;
+
+    text-align: center;
+    padding: .1px;
+}
+
+.card__container{
+    display: flex;
+    flex-direction: column;
+}
+
+.card__binario{
+    height: 10px;
+    color: rgba(255, 255, 255, 0.1);
+    font-size: 15px;
+}
+
+.card__person{
+    background-image: url('../img/foto_2.jpg');
+    background-size: cover;
+    background-position: center;
+    width: 110px;
+    height: 110px;
+    margin: 0 auto;
+    margin-top: 105px;
+    border-radius: 50%;
+    border: 7px solid #fff;
+}
+
+.card__name{
+    margin-top: 20px;
+    margin-bottom: 10px;
+}
+
+
+.card__media{
+    margin-top: 40px;
+    width: 100%;
+    height: 90px;
+    border-top: 1px solid #b3a2a2;
+    display: flex;
+    justify-content: center;
+}
+
+.card__icon{
+    width: 25%;
+    height: 100%;
+    display: block;
+    background-repeat: no-repeat;
+    background-size: 30px;
+    background-position: center;
+}
+
+.card__icon--linkedin{
+    background-image: url('../icons/linkedin.svg');
+}
+.card__icon--instagram{
+    background-image: url('../icons/instagram.svg');
+}
+.card__icon--youtube{
+    background-image: url('../icons/youtube.svg');
+}
+.card__icon--whatsapp{
+    background-image: url('../icons/whatsapp.svg');
+}
diff --git a/icons/instagram.svg b/icons/instagram.svg
diff --git a/icons/linkedin.svg b/icons/linkedin.svg
diff --git a/icons/whatsapp.svg b/icons/whatsapp.svg
diff --git a/icons/youtube.svg b/icons/youtube.svg
diff --git a/img/foto.png b/img/foto.png
diff --git a/img/foto_2.jpg b/img/foto_2.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tarjeta de Contacto (Leandro Espinoza)</title>
+    <link rel="stylesheet" href="css/card.css">
+</head>
+<body>    
+    <section class="card">
+        <div class="card__container">
+            <div class="card__binario">
+                <p>01001100 01100101 01100001 01101110 01100100 01110010 01101111 00100000 01000101 01110011 01110000 01101001 01101110 01101111 01111010 01100001</p>
+            </div>
+            <div class="card__person"></div>
+            <h2 class="card__name">Leandro Espinoza</h2>
+            <p class="card__position">Full Stack Developer</p>
+        </div>
+
+        <div class="card__media">
+            <a href="https://api.whatsapp.com/send?phone=+584246527575&text=Hola, Leandro, necesito una página web...." target="_blank" class="card__icon card__icon--whatsapp"></a>
+            <a href="https://www.instagram.com/lebusistemas/" target="_blank" class="card__icon card__icon--instagram"></a>
+            <a href="https://www.youtube.com/channel/UCh_bSciop1dW8GbIZBAZEKQ" target="_blank" class="card__icon card__icon--youtube"></a>
+            <a href="https://www.linkedin.com/in/lebusistemas" target="_blank" class="card__icon card__icon--linkedin"></a>
+        </div>
+    </section>
+</body>
+</html>