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

[Proyecto] Haz lo que hicimos en el aula

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BARBERIA</title>
    <link rel="stylesheet" href="CursoHTMyCss_style_ejerc1.css">
</head>
<body>
    <img id="baner" src="img/barberia_baner.jpg" alt="">
    <div class="principal">
        <h1>Sobre la Barbería Alura</h1>
        <p>Ubicada en el corazón de la ciudad, la <strong>Barbería Alura</strong> trae para el mercado lo que hay de mejor para su cabello y barba. 
        Fundada en 2020, la Barbería Alura ya es destaque en la ciudad y conquista nuevos clientes diariamente.</p>
        <p id="misión"><em>Nuestra misión es: <strong>"Proporcionar autoestima y calidad de vida a nuestros clientes"</strong>.</em></p>
        <p>Ofrecemos profesionales experimentados que están constantemente observando los cambios y movimiento en el mundo de la moda, 
        para así ofrecer a nuestros clientes las últimas tendencias.
        El atendimiento posee un padrón de excelencia y agilidad, garantizando calidad y satisfacción de nuestros clientes.</p> 
    </div>

    <div class="Diferenciales">
        <h2>Diferenciales</h2>
    <ul>
        <li class="item">Atencion al clientes</li>
        <li class="item">Localización</li>
        <li class="item">Espacio Diferenciales</li>
        <li class="item">Profesionales</li> 
    </ul>
    <img src="img/barber_action.jpg" alt="" class="imgbarber_action">
    </div>


</body>
</html>

css

body{
    background-color: #e6e6e6;
}
h1{
    font-size: 50px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif, sans-serif;
    color: #9e3333c9;
    text-align: center;
}
h2{
    font-size: 40px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif, sans-serif;
    color: #9e3333c9;
    text-align: center;
}

.principal{
    width: 100%;
    height: 100%;
    margin: 2.5px;
    padding: 15px;
    border: 10px;
}

p{
    font-size: 25px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif, sans-serif;
    color: #9e3333c9;
}

#misión{
    font-size: 27px;
    font-family:  Arial, sans-serif, sans-serif;
    color: #a2752ec9;
}

#baner{
    width: 10%;
    height: 10%;
    border-radius: 50%;
    border: 5px solid #e6e6e6;
    margin: 20px;
}
.item{
    font-size: 25px;
    font-family:  'Arial Narrow', Arial, sans-serif, sans-serif;
    color: #9e3333c9;
}
ul{
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin: 15%;
}
.imgbarber_action{
    width: 30%;
    height: 30%;
    border-radius: 15%;
    border: 5px solid #e6e6e6;
}
1 respuesta

¡Hola Walter!

Gracias por compartir tu código con nosotros. Parece que estás trabajando en una página web para una barbería. Tu código HTML y CSS se ven bien estructurados y organizados. Sin embargo, hay algunos detalles que podrías mejorar.

En tu archivo CSS, en la definición de la clase .principal, tienes un valor de height: 100%;. Esto hace que el elemento ocupe toda la altura de la ventana del navegador, lo que hace que el contenido se vea muy estirado y poco legible. Te sugiero que cambies este valor a height: auto; para que el elemento tenga la altura necesaria para mostrar todo su contenido.

También noté que en tu archivo CSS, en la definición de la clase .imgbarber_action, estás usando un valor de border-radius: 15%;. Este valor es demasiado alto y hace que la imagen se vea muy redondeada. Te sugiero que cambies este valor a border-radius: 5px; para que la imagen tenga esquinas más suaves pero no se vea demasiado redondeada.

Por último, te sugiero que agregues algunos comentarios en tu código HTML y CSS para que sea más fácil entender lo que estás haciendo en cada parte de tu página web.

Te recomiendo que compartas la solución de tus ejercicios en nuestro servidor de Discord, allí tenemos un canal exclusivo para eso (#compartatucodigo) y el foro solo quedaría para esclarecer cualquier duda que puedas tener sobre el contenido de los cursos.

¡Espero haber ayudado y buenos estudios!

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