11 Haga lo que hicimos en aula | HTML y CSS: ambientes de desarrollo, estructura de archivos y tags | Alura Latam

2
respuestas

por Estudiante

| 26.7k xp | 19 posts

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portafolio de Juan David Causil Vega</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Arial', sans-serif;
    }

    body {
      background-color: #000000;
      color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }

    .container {
      text-align: center;
      padding: 20px;
      max-width: 800px;
    }

    .content {
      background-color: #1a1a1a;
      padding: 40px;
      border-radius: 15px;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
      margin-bottom: 20px;
    }

    h1 {
      font-size: 2.5rem;
      color: #00FFB3;
    }

    p {
      font-size: 1.2rem;
      color: #ffffff;
      margin-top: 10px;
      line-height: 1.6;
    }

    img {
      width: 200px;
      height: auto;
      border-radius: 10px;
      margin: 20px 10px;
    }

    .btn-container {
      margin-top: 20px;
    }

    a.button {
      display: inline-block;
      background-color: #00FFB3;
      color: black;
      padding: 10px 20px;
      margin: 10px;
      text-decoration: none;
      border-radius: 5px;
      font-weight: bold;
      box-shadow: 0 5px 10px rgba(0, 255, 179, 0.4);
      transition: all 0.3s ease;
    }

    a.button:hover {
      background-color: #00d699;
    }

    .image-container {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin: 20px 0;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="content">
      <h1>Portafolio de Juan David Causil Vega</h1>
      <p>Hola, soy Juan David Causil Vega, soy de Colombia apasionado por la tecnología y el desarrollo web. Me especializo en la creación de soluciones innovadoras y funcionales, combinando diseño moderno con eficiencia técnica. Siempre estoy dispuesto a enfrentar nuevos retos y aprender de ellos.</p>
    </div>

    <div class="image-container">
      <img src="Img/Img6.jpeg" alt="Imagen de Juan David Causil Vega">
      <img src="Img/Img5.png" alt="Segunda imagen representativa">
    </div>

    <div class="btn-container">
      <a class="button" href="#">Instagram</a>
      <a class="button" href="#">GitHub</a>
    </div>
  </div>
</body>

</html>

2 respuestas

por Daysibel.pitter

| 286.7k xp | 1027 posts

Instructor

hace 1 semana

Hola , espero que estés muy bien.

Felicitaciones por tu aprendizaje. Cualquier duda, puedes llamarnos, estammos aqui para ayudar.

Un saludo.

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios

por Dayaan Miusset

| 27.8k xp | 33 posts

hace 7 días

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PICO DE GALLINA</title>
</head>
<body>
    <header></header>
    <main>
        <h1>Pico de Gallina. <strong>Huevo sano de gallina contenta</strong></h1>
        <p>Nuestros huevos vienen de gallinas contentas y felices. En nuestra huerta procuramos su salud,
             bienestar y comodidad
        </p>
        <a href="https://www.instagram.com/arbol_de_arrayann/" target="_blank"> Instagram </a>
        <a id="PedidoWhatsApp"> Pedidos <link href="#PedidoWhatsApp"
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
            <a href="https://wa.me/3321181409?text=Hola" class="float-wa" target="_blank">
                <i class="fa fa-whatsapp" style="margin-top:16px;"></i>
            </a> 
        </a>
        <style>
            .float-wa{
                position:fixed;
                width:60px;
                height:60px;
                bottom:40px;
                right:40px;
                background-color:#25d366;
                color:#FFF;
                border-radius:50px;
                text-align:center;
                font-size:30px;
                z-index:100;
            }
        </style>
        <img src="picoDeGallina.jpg.jpeg" alt="Imagen logo de gallina en naranja">
    </main>
    <footer>
        <p> Todos los derechos reservados &#169 </p>
    </footer>
</body>
</html>