Diego André Montes de Oca Chávez
Preguntastudent•hace 2 años
Hola gente, espero que se encuentre bien
Tengo una duda respecto a la clase, específicamente respecto al ícono del micrófono porque la imagen de este no aparece en la página web. Yo rodeé el input y el anchor tag con un label, así que probablemente se deba a esto, pero ya intenté usar la especificidad; por ejemplo intenté con el siguiente código:
main .main-input label .micro-icon { background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/716px-Google_mic.svg.png"); background-repeat: no-repeat; /*Evitamos que la imagen se repita en caso de que haya espacio sobrante*/ background-position: center; /*Centramos la imagen*/ background-size: contain; /*La imagen toma el tamaño del contenedor padre*/ width: 18px; height: 180px; cursor: pointer; /*Cuando el cursor se pose sobre este ícono, saldrá una manita*/ }
Y no funciona
Les dejo mi código completo para ver si alguien me ayuda
<!DOCTYPE html> <!--Usamos HTML 5--> <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>Google</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <header> <nav> <ul class="nav-right-section"> <li> <a href="https://mail.google.com/mail/&ogbl">Gmail</a> </li> <li> <a href="https://www.google.com.mx/imghp?hl=es-419&ogbl">Imágenes</a> </li> <li class="menu-icon"> <a href="https://www.google.com.mx/intl/es-419/about/products"></a> <!--Ícono de menú, el cuál nos lleva a otros elementos de Google--> </li> <li> <a href=""> <img src="https://lh3.googleusercontent.com/ogw/AOh-ky0Xc1414bOmzjQ7xqP2Iopkrs0ljX3TARtxkuQh=s32-c-mo" alt=""> </a> <!--Foto de perfil del usuario--> </li> </ul> </nav> </header> <main> <section class="main-logo"> <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt=""> </section> <section class="main-input"> <!--Contenedor principal de la sección del input--> <div class="main-input-container"> <!--Contenedor principal del input--> <!--Para colocar un ícono--> <span class="search-icon"> </span> <label for="">. <input type="text" id=""> <a class="micro-icon" href=""></a> <!--Micro ícono, va dentro de la barra de navegación,está ligado a una acción--> </label> </div> </section> <section class="main-buttons"> <!--Sección de los botones--> <div> <button>Buscar con Google</button> </div> <div> <button>Voy a tener suerte</button> </div> </section> </main> </body> </html>
html { font-size: 62.5%; } body { margin: 0; padding: 0; font-size: 1.3rem; font-family: Arial, Helvetica, sans-serif; } a { text-decoration: none; cursor: pointer; } header { width: 100%; height: 60px; } header nav { display: flex; justify-content: flex-end; } header nav .nav-right-section { width: 250px; height: auto; /*El height se define en auto, porque esta sección no puede ser más alta que su elemento padre, osea el header*/ display: flex; list-style: none; justify-content: center; /*Se va al centro del contenedor de manera horizontal*/ align-items: center; /*Se va al centro del contenedor de manera vertical*/ } nav .nav-right-section a { /*Apuntamos a la etiqueta nav, que contiene un clase nav-right-section y que esa clase afecta a un elemento ancla*/ margin-right: 10px; color: #000000; } nav .nav-right-section .menu-icon { /*Apuntamos a la sección nav, que tiene una clase llamada nav-right section y que a su vez, tiene un clase llamada menu-icon*/ background-image: url("https://static.thenounproject.com/png/756729-200.png"); /*Para evitar que la imagen se repita, porque cuando la imagen es muy grande o pequeña y generamos una dimensión para el contenedor, la imagen se repite para poder llenar el espacio sobrante*/ background-repeat: no-repeat; /*La usamos para asegurarnos que la dimensión del contenedor sea del tamaño del ícono*/ background-position: center; /*Para que la imagen quede centrada*/ background-size: contain; /*Para que la imagen sea del tamaño de su contenedor o que por lo menos se aproxime*/ width: 25px; height: 25px; } nav .nav-right-section img { /*Apuntamos a la sección nav, que tiene una clase llamada nav-right section y que a su vez, tiene una imagen*/ border-radius: 50%; /*Redondeamos la imagen*/ margin-left: 10px; } main { margin-top: 150px; text-align: center; /*Centramos todo el contenido del main*/ } /*Apuntamos a la sección main, y al elemento con la clase main-logo*/ main .main-logo { width: 530px; /*Establecemos en ancho del contenedor*/ margin: 0 auto; /*Centramos el logo*/ margin-bottom: 35px; } /*Apuntamos a la sección main,al elemento con la clase main-logo que contenga una img*/ main .main-logo img { width: 300px; height: 92px; } /*Apuntamos a la sección main, al elemento con la clase main-input*/ main .main-input { width: 530px; /*Le agregamos esto para que no sea del mismo tamaño que su contenedor padre*/ margin: 0 auto; /*Centrar*/ margin-bottom: 35px; } /*Apuntamos a la sección main, al elemento con la clase main-input-container*/ main .main-input-container { width: 525px; /*Le agregamos esto para que no sea del mismo tamaño que su contenedor padre*/ border-radius: 100px; border: 1px solid #dfe1e5; display: flex; /*Acomodar el contenido de manera horizontal y vertical. Usamos esta propiedad porque debemos acomodar los íconos de manera horizontal*/ justify-content: center; align-items: center; } /*Apuntamos a la sección main, a la sección con la clase main-input y al elemento input dentro de esa sección*/ main .main-input input { width: 450px; /*Es más chico que su contenedor padre*/ height: 40px; /*Eliminamos el border y el contorno*/ border: none; outline: none; } /*Apuntamos a la sección main, al elemento con la clase main-input-container. Cuando el usuario pase el cursos sobre esta sección, el código de la pseudo clase se ejecutará*/ main .main-input-container:hover { box-shadow: 0 1px 6px 0 #20212447; /*Genera una sombra sobre el elemento*/ border-color: #dfe1e500; } /*Apuntamos a la sección main, al elemento con la clase main-input, que a su vez contiene un elemento con la clase search-icon */ main .main-input .search-icon { background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/945px-Vector_search_icon.svg.png"); background-repeat: no-repeat; /*Evitamos que la imagen se repita en caso de que haya espacio sobrante*/ background-position: center; /*Centramos la imagen*/ background-size: contain; /*La imagen toma el tamaño del contenedor padre*/ width: 18px; height: 18px; } /*Apuntamos a la sección main, al elemento con la clase main-input, que a su vez contiene un elemento con la clase micro-icon */ main .main-input label .micro-icon { background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/716px-Google_mic.svg.png"); background-repeat: no-repeat; /*Evitamos que la imagen se repita en caso de que haya espacio sobrante*/ background-position: center; /*Centramos la imagen*/ background-size: contain; /*La imagen toma el tamaño del contenedor padre*/ width: 18px; height: 180px; cursor: pointer; /*Cuando el cursor se pose sobre este ícono, saldrá una manita*/ }
