[Sugerencia] CONCLUSION - Home de pagina Barberia Alura

Código CSS aplicado

body {
    font-family: 'Montserrat', sans-serif;
}

header {
    background-color: #BBBBBB;
    padding: 20px 0;
}

.caja{
    width: 940px;
    position: relative;
    margin: 0 auto;
}

nav{
    position: absolute;
    top:110px;
    right: 0;
}

nav ul {   
    display: flex;
}

nav li{  
    padding:5px 10px 5px 10px;
    margin: 0 15px 0 15px;
}

nav a{
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

nav a:hover{
    color: #c78c19;
    text-decoration: underline;
}

.productos{
    width: 940px;
    margin: 0 auto;
    padding: 50px;
}


.productos li{
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid #000000;
    border-radius: 10px;
}

.productos li:hover{
    border-color:#c78c19;
}

.productos li:active{
    border-color:#088c19;
}

.productos h2{
    font-size: 30px;
    font-weight: bold;
}

.productos li:hover h2{
    font-size: 33px;
}

.producto-descripcion{
    font-size: 18px;
}

.producto-precio{
    font-size: 20px;
    font-weight: bold;
    margin-top:10px;
}

footer{
    text-align: center;
    background: url(imagenes/bg.jpg);
    padding:40px;
}

.copyright{
    color:#FFFFFF;
    font-size: 14px;
    margin:20px;
}


.copyright a{
    text-decoration: none;
    color: #fff;;
}

.copyright a:hover{
    color: #c78c19;
    text-decoration: underline;
}

/* Formulario */
.contenedor-main{
    width:940px;
    margin:0 auto;
    padding: 50px;
}

main h1{
 text-align: center;
 font-size: 2em;
 font-weight: 600;
}

form{
    margin:40px 0; 
}

form label{
    display:block;
    font-size:20px;
    margin:0 0 10px;
}

.enviar{
    width: 40%;
    padding: 15px 0;
    font-size: 18px;
    font-weight: bold;
    color:black;
    background: orange;
    border:none;
    border-radius: 5px;
    transition: 1s all;
    cursor:pointer;
}

.enviar:hover {
    background: darkorange;
    transform: scale(1.2);
}

form label {
    display:block;
    font-size: 20px;
    margin: 0 0 10px;
}

form label, form legend {
    display:block;
    font-size: 20px;
    margin: 0 0 10px;
}

form .input-form {
    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 50%;
}

.input-padron {
    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 50%;
}

.checkbox {
    margin: 20px 0;
}

table {
    margin: 40px 40px;
}

thead {
    background: #555555;
    color: white;
    font-weight: bold;
}

.trazado {
    border: 3px solid #000000;
    padding: 8px 15px;
}

/*Aquí inicia el CSS para nuestra home*/
#banner{
    width:100%;
}


.titulo-principal{
    text-align: center;
    font-size: 2em;
    margin: 0 0 1em;
    clear:left;
}


.principal p{
    margin: 0 0 1em;
}


.principal strong{
    font-weight: bold;
}


.principal em{
    font-style: italic;
}


.utensilios{
    width: 120px;
    float:left;
    margin: 0 20px 20px 0;
}

.diferenciales {
    padding: 3em 0;
    background: #888888;
}

.contenido-diferenciales {
    width: 640px;
    margin: 0 auto;
}

.lista-diferenciales {
    width: 40%;
    display: inline-block;
    vertical-align: top;
}

.items {
    line-height: 1.5;
}

.items:first-child {
    font-weight: bold;
}

.items:before{
    content:"★"
}

.imagen-diferenciales{
    width: 60%;
    transition: 400ms;
    box-shadow: 10px 10px 30px 15px #000000;
}

.imagen-diferenciales:hover{
    opacity: 0.3;
}

.mapa-contenido {
    width: 940px;
    margin: 0 auto;
}

.principal {
    padding: 3em 0;
    background: #FEFEFE;
    width: 940px;
    margin: 0 auto;
}

.mapa {
    padding: 3em 0;
    background: linear-gradient(#FEFEFE, #888888);
}

.mapa p {
    margin: 0 0 2em;
    text-align: center;
}

.video {
    width: 560px;
    margin: 1em auto;
}

/* Responsive */
@media screen and (max-width:480px){
    h1{
        text-align: center;
    }
    nav{
        position: static;   
    }
    nav ul{
        display: block;   
        text-align: center;
    }
    .caja, .principal, .mapa-contenido, .contenido-diferenciales, .video {
        width: auto;
    }
    .lista-diferenciales, .imagen-diferenciales{
        width: 100%;
    }
}

Hola Heiner, espero que estés bien! ¡Que increible! Felicitaciones por la creatividad! Gracias por compartir tu código con nosotros. Le recomendamos que comparta su código con sus colegas en Discord, allí es posible que todos lo vean e interactúen contigo. Si tiene alguna pregunta sobre el contenido del curso, estamos aquí para ayudarlo. ¡Sigue practicando! ¡Vamos juntos! :)

¡Hola, Einer! ¿Cómo estás?

¡Estás progresando en tu aprendizaje! Hacer los ejercicios y finalizar los proyectos indica que estás captando los conceptos de front-end de manera efectiva. ¡Sigue adelante!