Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Haga lo que hicimos en aula

html

  • <meta charset="UTF-8">
    
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
  • <title>Portafolio de Belén Turbes</title>
    
  • <link rel="stylesheet" href="style.css">
    
  • <header></header>
    
  • <main class="Presentación">
    
  •     <section class=" Presentación_contenido">
    
  •          <h1 class=" Presentación_contenido__titulo">
    
  •              <p class="Presentación_contenido_texto>"<strong>¡Hola! Soy Belén, estoy aprendiendo cómo programar.</strong></p>
    
  •              <p class="texto destacado">Torres del Paine</h1>
    
  •              </p>
    
  •              <a href="https://www.instagram.com/" class="boton instagram">Instagram</a>
    
  •              <a href="https://github.com/" class="boton github">Github</a>
    
  •          </section>
    
  •          <img src="torres.jpg" alt="Torres del Paine">
    
  •      </main>
    
  • <footer>
    
  •     <p>Contacto: belen.turbes@gmail.com</p>
    
  • </footer>
    

css

  1. @import url("https://fonts.googleapis.com/css2?family=krona+One&family=Montserrat:ital,wight@0,100..900;1,100..900&display=swap");
  2. *{
  3. padding: 0;
    
  4. margin: 0;
    
  5. }
  6. body{
  7. background-color:rgb(181, 147, 205);
    
  8. color: white;
    
  9. height: 100vh;
    
  10. box-sizing: border-box;
    
  11. }
  12. h1 {
  13. color: #0e0e0e; /* Verde marino */
    
  14. font-size: 2.5em;
    
  15. text-align: center;
    
  16. }
    
  17. .Texto-destacado{
  18. margin: 20px;
    
  19. padding: 10px;
    
  20. border: 2px solid #000;
    
  21. background-color: #e54848;
    
  22. }
  23. strong{
  24. color: black;
    
  25. font-size: 2em;
    
  26. text-align: center;
    
  27. }
  28. .Presentación{
  29. display: flex;
    
  30. align-items:center;
    
  31. margin: 10%;
    
  32. justify-content: space-between;
    
  33. }
  34. .boton.instagram {
  35. color: black;
    
  36. background-color: #6cadcd; 
    
  37. }
    
  38. .boton.github {
  39.     color: black;
    
  40.     background-color: #47c140; 
    
  41.     }
    
  42. .Presentación_contenido{
  43.         width: 500px;
    
  44.     }
    
  45. .Presentación_contenido__titulo{
  46. font-size: 36px; 
    
  47. font-family: "krona One, sans-serif";
    
  48. }
  49. .Presentación_contenido_texto{
  50. font-size: 24px;
    
  51. font-family:"Montserrat , sans-serif"
    
  52. }
1 respuesta

Hola,

Gracias por compartir tu experiencia con nosotros. Recuerda que estamos aquí para ayudarte. Si necesitas más ayuda, no dudes en buscarnos en el foro.

¡Gracias nuevamente!

Saludos,

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