Haga lo que hicimos en aula | HTML y CSS: Clases, Posicionamiento y Flexbox | Alura Latam

html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Portafolio de Belén Turbes</title>

<link rel="stylesheet" href="style.css">

    <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>

             <a href="https://www.instagram.com/" class="boton instagram">Instagram</a>

             <a href="https://github.com/" class="boton github">Github</a>

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

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

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;
```
}
strong{
```
color: black;
```
```
font-size: 2em;
```
```
text-align: center;
```
}
.Presentación{
```
display: flex;
```
```
align-items:center;
```
```
margin: 10%;
```
```
justify-content: space-between;
```
}
.boton.instagram {
```
color: black;
```
```
background-color: #6cadcd; 
```
```
}
```
.boton.github {
```
    color: black;
```
```
    background-color: #47c140; 
```
```
    }
```
.Presentación_contenido{
```
        width: 500px;
```
```
    }
```
.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"
```
}