Entrar ¿Aún no tienes acceso?
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: Selectores y pocisionamiento

Referente al curso HTML y CSS: Clases, Posicionamiento y Flexbox, en el capítulo Selectores y posicionamiento y actividad Haga lo que hicimos

por Anderson Felipe Estrada Sánchez
| 25.3k xp | 68 posts

HTML:

<!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="style.css">
</head>
<body>
    <header></header>
    <main>
        <h1 class="título-blog">
            ¡Aprendiendo junto a <strong>Alura Latam!</strong>
        </h1>
        <p>
            ¡Hola! Soy Anderson Estrada, y estoy realizando este <strong class="texto-destaque">Challenge de Alura Latam</strong> 
            para entrar al bootcamp de ciencia de datos.
        </p>
        <a href="https://github.com/Afes-reop/challenge-amigo-secreto_esp-main.git">GitHub</a>
        <img src="alura.jpeg" alt="Alura Challenge"

CSS:

body {
    background-color: rgb(114, 174, 172);
    color: white;
    padding: 30px ;
    margin: 20px;
    border:5px solid;
}

main{
    background-color: rgb(156, 67, 12);
    color: white;
    text-align: center;
    
}

.h1 título-blog,h3,p{
    font-family: Arial, Helvetica, sans-serif;
    font-style:normal;
}

.texto-destaque{
    font-size: 20px;
    column-gap: 20px; 
    width: 40%;
    text-align:center;
    margin:auto;
}

img {
    width: 500px; 
    height: auto; 
    display: block;
    margin: auto;
    border-style: solid;
}

a{
    display: inline-block;
    font-size: 20px;
    padding: 10px 20px;
    background-color: #000000;
    text-decoration: none; 
    border-radius: 8px;
    font-weight: bold;
    color: #41d08b;
}

h1, p{
    margin-bottom: 40px;
}

img, a, h3 {
    margin-bottom: 20px;
}

strong{
    color: #79ecf5;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', ;
}
1 respuesta
por Brenda Souza
| 4968.2k xp | 17914 posts
Instructor Scuba

¡Hola Anderson, espero que estés bien!

Veo que estás trabajando en un ejercicio que implica el uso de selectores y posicionamiento en CSS. Vamos a revisar algunos puntos que podrían ayudarte a resolver tu duda.

  1. Errores de Sintaxis en CSS:

    • En tu CSS, el selector para .h1 título-blog, h3, p parece incorrecto. Si estás intentando estilizar el h1 con la clase título-blog, deberías usar .título-blog sin el h1 delante. Así que el selector correcto sería .título-blog, h3, p.

  2. Estilizando Clases:

    • Según la descripción del ejercicio, necesitas crear una clase titulo-blog y aplicarla a los elementos <h1>. Ya lo has hecho en tu HTML, pero asegúrate de que el CSS también esté correcto. Aquí tienes un ejemplo de cómo podrías estilizarlo:
      .titulo-blog {
    color: #ff6347; /* Un color que resalte */
    font-weight: bold;
    text-align: center;
}

  3. Verificando el HTML y CSS:

    • Asegúrate de que el archivo style.css esté correctamente vinculado a tu HTML. Si no ves los cambios, verifica que el nombre del archivo y la ruta sean correctos.

  4. Prueba y Error:

    • Si los cambios no se reflejan, intenta limpiar el caché del navegador o usar el modo incógnito para asegurarte de que estás viendo la versión más reciente de tu página.

Espero que estos consejos te ayuden a avanzar en tu ejercicio. ¡Sigue experimentando y aprendiendo!

Espero ter ayudado y bons estudos!