Desafío 1: Haga lo que hicimos | HTML y CSS: Clases, Posicionamiento y Flexbox | Alura Latam

1.- Estilizando elementos con clases CSS

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Estilizando elementos</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header></header>

    <main>
        <p class="texto-destacado"> ¡Hola! Soy Carlos Gonzalez, desarrollador Front-end con especialización en HTML y CSS. </p>
    </main>

    <footer></footer>
</body>
</html>

.texto-destacado {
    color: #D5D3C1;
}

2.- Destacando títulos con CSS

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1 class="titulo-blog">Bienvenido a mi blog personal</h1>
    </header>

    <main>
        <p> ¡Hola! Soy Carlos Gonzalez, desarrollador Front-end con especialización en HTML y CSS. </p>
    </main>

    <footer></footer>
</body>
</html>

.titulo-blog {
    color: #d2691e;
}

3.- Estilos situacionales con clases CSS

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Noticia</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header></header>

    <main>
        <p class="urgente"> Noticia Urgente: Alura Latam y Oracle lanzan cursos para programadores </p>
    </main>

    <footer></footer>
</body>
</html>

.urgente {
    color: red;
}

4.- Entendiendo y aplicando el reset CSS

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header></header>

    <main>
        <h1>Eleve tu negocio digital a otro nivel <strong class="titulo-destaque">con un Front-end de calidad!</strong></h1>

        <p>
            ¡Hola! Soy Carlos Gonzalez, desarrollador Front-end con especialización en HTML y CSS. Ayudo a pequeños negocios y diseñadores a llevar a cabo buenas ideas. ¿Hablamos?
        </p>

        <a href="https://www.linkedin.com/in/carlos-alberto-gonzalez-custodio">Linkedin</a>
        <a href="https://github.com/CarlosGC-LP">Github</a>
        
        <img src="img/perfil.jpg" alt="Imagen de perfil">
    </main>

    <footer></footer>
</body>
</html>

* {
    padding: 10;
    margin: 10;
}

5.- Inspeccionando elementos y entendiendo el modelo de caja

padding: Al manipular el padding, defines la posición y el tamaño del contenido dentro del espacio interior de su elemento border: Es una propiedad abreviada para propiedades de CSS como lo son: border-color, border-style, border-width, margin: Ayuda a definir dónde comienza y termina una línea de texto dando un margen entre el area del contenido y con los bordes de la misma

6.- Aplicando el modelo de caja en la práctica

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header></header>

    <main>
        <h1>Eleve tu negocio digital a otro nivel <strong class="titulo-destaque">con un Front-end de calidad!</strong></h1>

        <p>
            ¡Hola! Soy Carlos Gonzalez, desarrollador Front-end con especialización en HTML y CSS. Ayudo a pequeños negocios y diseñadores a llevar a cabo buenas ideas. ¿Hablamos?
        </p>

        <a href="https://www.linkedin.com/in/carlos-alberto-gonzalez-custodio">Linkedin</a>
        <a href="https://github.com/CarlosGC-LP">Github</a>
        
        <img src="img/perfil.jpg" alt="Imagen de perfil">
    </main>

    <footer></footer>
</body>
</html>

* {
    margin: 30px;
    padding: 30px;
}

body {
    background-color: #D5D3C1;
    color: #000000;
}

.titulo-destaque {
    color: #22D4FD;
    border: 2px solid #22D4FD;
}