Pagina Web Barbería Alura | HTML5 y CSS3 parte 2: Posicionamiento, listas y navegación | Alura Latam

body{ margin: 0; padding: 0; }

header{ display: grid; grid-template-columns: 50% 50%; align-items: center; background-color: gray; }

header ul li{ padding: 0px 10px; display: inline; }

ul{ margin: 0px; padding: 0px; padding-right: 100px; }

#divLogo{ width: 100%; padding-left: 100px; }

#divLogo img{ width: 150px; }

nav{ width: 100%; text-align: right; }

nav a{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: bold; font-size: 20px; text-decoration: none; color: white; }

a:hover{ text-decoration: none; color: rgb(44, 44, 44); }

section{ width: 100%; margin: 0px; padding: 0px; }

.targets{ display: flex; padding: 100px 120px; }

.target{ text-align: center; display: inline-grid; width: 100%; margin-left: 30px; border: 2px solid black; border-radius: 1em; padding: 20px; }

.target:hover{ border-color: brown; width: 102%; }

.target:active{ border-color: rgb(49, 189, 107); width: 102%; }

.target img{ display:block; margin: auto; width: 100%; }

.target label{ font-size: 20px; font-weight: bold; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

footer{ background-image: url("../images/bg.jpg"); width: 100%; margin: auto; display: block; }

footer img{ margin: auto; padding: 30px; display: block; } footer p{ width: 100%; text-align: center; padding-bottom: 100px; margin: auto; color: white; font-size: 13px; }

INICIO
PRODUCTOS
CONTACTANOS

<main>
    <section>
        <div class="targets">
            <div class="target">
                <label>Cabello</label>
                <img src="images/cabello.jpg" alt="cabello">
                <span>Paquete de cabello y barba.</span>
                <br>
                <span><strong>$ 10.00</strong></span>
            </div>
            <div class="target">
                <label>Barba</label>
                <img src="images/barba.jpg" alt="Barba">
                <span>Corte y diseño profesional de barba..</span>
                <br>
                <span><strong>$ 08.00</strong></span>
            </div>
            <div class="target">
                <label>Cabello + Barba</label>
                <img src="images/cabello+barba.jpg" alt="CabelloBarba">
                <span>Con tijera o maquina, a gusto del cliente.</span>
                <br>
                <span><strong>$ 15.00</strong></span>
            </div>
        </div>
    </section>
</main>
<script>
    var actual_page = window.location.href;
    var menu = document.querySelectorAll("#menu a");

    menu.forEach(function (item) {
        if (actual_page === item.href) {
            //item.style.color = "rgb(44, 44, 44)";
            item.style.textDecoration = "underline";
            item.style
        }
    });
</script>