Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
2
respuestas

La barbería de Alura

La barberia de Alura con un poco de toque personal, comparto ambos codigos `

<head>

    <meta charset="utf8">
    <title>Barberia Alura</title>
    <link rel="stylesheet" href="style.css">


</head>

<body>

    <header>
        <h1 class="titulo-principal">BARBERIA ALURA</h1>
    </header>


    <img id="banner"src="banner.jpg">

    <div class="principal">

        <h2 class="titulo-centrado">Sobre la Barbería Alura</h2>

        <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="mision"><strong>Nuestra misión es: <em>"Proporcionar autoestima y calidad de vida a nuestros clientes"</em></strong></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 class="titulo-centrado">Diferenciales</h2>

        <ul>
            <li class="items">Atenciòn personalizada a los clientes</li>
            <li class="items">Espacio diferenciado</li>
            <li class="items">localizaciòn</li>
            <li class="items">Profesionales calificados</li>
            <li class="items">Bar y cafeteria</li>
            <li class="items">Salon de juegos</li>
        </ul>

        <img src="diferenciales.jpg" class="imagenDiferenciales">

    </div>

</body>
`

ahora css

.titulo-principal{

    padding-left: 50px; 
    color: #6e0000;
}
body{

    background: #00000000; 
}

#banner{
    width:100%;
    margin-bottom: -4px;

}

.principal{

    background: #00000000; 
    padding: 1px;

}

.titulo-centrado {

    text-align: center;
    background: #6e0000;
    border: 1px solid #c56600;
    color: white;
    margin-left: -25px;
    margin-right: -25px;
}

p{
                text-align: center;

            }

strong em{

    color: red;
}

#mision{
    font-size: 20px;
}

.diferenciales{

    background: #73100459;
    padding: 15px;
}


.items{
    font-style: italic;

}

ul{

    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin-right: 20%;
    font-size: 22px;
    line-height: 2;
    margin-left: 100px;
    margin-top: 8 0px;
}

.imagenDiferenciales{

    width: 35%;
    border: 3px solid #991e00ab;
    margin-top: 23px;


}

Algo asi quedo mi pagina Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

2 respuestas

Te quedo genial, Diego. Yo también me puse a darle un estilo propio a la página.

Muy buena te quedo