Haga lo que hicimos en aula | HTML y CSS: header, footer y variables CSS | Alura Latam

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">Torres del Paine</h1>

        <p class="Presentación_contenido_texto">Es el parque nacional más importante de Chile.

            Se encuentra cerca de Los Andes, en el externo sur de Chile, en la Región de

            Magallanes y la Antártica chilena. Está situado a 154 kilómetros al noroeste de

            Puerto Natales y a 399 kilómetros de Punta Arenas.

```
        </p>
```

        <div class="Presentación_enlaces">

            <h2 class="presentación_enlaces_subtitulos">Acceder a las redes:</h2>

            <a href="https://www.instagram.com/torresdelpainenp/?hl=es" class="boton instagram">

                <img src="./Assets/instagram.png">

```
            instagram</a>
```

            <a href="https://x.com/i/flow/login?redirect_after_login=%2Ftorrespainecom" class="boton X">

                <img src="./Assets/X.png">

```
            X</a>
```
```
        </div>
```
```
    </section>
```

    <img src="./Assets/torres.jpg" alt="Torres del Paine">

```
</main>
```
```
<footer>
```

    <p>Contacto: belen.turbes@gmail.com</p>

```
</footer>
```

CSS

@import url("https://fonts.googleapis.com/css2?family=krona+One&family=Montserrat:ital,wight@0,100..900;1,100..900&display=swap");
*{
```
padding: 0;
```
```
margin: 0;
```
}
body{
```
background-color:rgb(181, 147, 205);
```
```
color: white;
```
```
height: 100vh;
```
```
box-sizing: border-box;
```
}
h1 {
```
color: #0e0e0e; /* Verde marino */
```
```
font-size: 2.5em;
```
```
text-align: center;
```
```
}
```
.Texto-destacado{
```
margin: 20px;
```
```
padding: 10px;
```
```
border: 2px solid #000;
```
```
background-color: #e54848;
```
}
.Presentación{
```
display: flex;
```
```
align-items:center;
```
```
margin: 10% 15%;
```
```
justify-content: space-between;
```
}
.Presentación_contenido{
```
  width: 500px;
```
```
  display: flex;
```
```
  flex-direction: column;
```
```
  gap: 40px;
```
```
 }
```
.Presentación_contenido__titulo{
```
font-size: 36px; 
```
```
font-family: "krona One, sans-serif";
```
}
.Presentación_contenido_texto{
```
font-size: 24px;
```
```
font-family:"Montserrat , sans-serif"
```
}
.Presentación_enlaces{
```
display: flex;
```
```
justify-content: space-between;
```
```
flex-direction:column; 
```
```
align-items:center;
```
```
gap: 32px;
```
}
.presentación_enlaces_subtitulos{
```
font-family: "krona One, sans-serif";
```
```
font-size: 24px;
```
```
font-weight: 400;
```
}
.boton.instagram {
```
width: 378px;
```
```
color: black;
```
```
background-color:rgb(192, 187, 187); 
```
```
text-align: center;
```
```
padding: 21.5px 0;
```
```
border-radius: 8px;
```
```
font-family: "monserrat" sans-serif;
```
```
font: size 20px;
```
```
font-weight: 600;
```
```
text-decoration:none;
```
```
border: 2px solid #22d4fd;
```
```
display: flex;
```
```
justify-content: center;
```
```
gap: 10px;
```
```
}
```
.boton.X {
```
 width: 378px;
```
```
 color: black;
```

 background-color: rgb(192, 187, 187);

```
 text-align: center;
```
```
 padding: 21.5px 0;
```
```
 border-radius: 8px;
```
```
 font-family: "monserrat" sans-serif;
```
```
 font: size 20px;
```
```
 font-weight: 600;
```
```
 text-decoration:none;
```
```
 border: 2px solid #22d4fd;
```
```
 display: flex;
```
```
 justify-content: center;
```
```
 gap: 30px;
```
```
 }
```
.boton.instagram:hover {
```
 background-color: #4867e5;
```
}
.boton.X:hover{
```
 background-color: #253576;
```
}