Navegación del curso
Entonces, hemos completado la construcción de todas las partes de nuestro sitio web excepto el pie de página. Entonces, echemos un vistazo a cómo se verá nuestro pie de página final:
Nuestro pie de página consta principalmente de dos secciones:
- Detalles de la empresa: contiene tres columnas con detalles de la dirección, detalles del teléfono y detalles del correo electrónico.
- Información de derechos de autor : contiene información sobre los derechos de autor y enlaces a identificadores de redes sociales.
Antes de comenzar a construir el pie de página. Se recomienda ir una vez a este enlace: Font Awesome Icons .
Usaremos íconos de fuentes impresionantes en diferentes lugares del pie de página. Para usar iconos de fontawesome, siga los pasos a continuación:
- Incluye Font Awesome CSS. Pegue el siguiente código entre las etiquetas de encabezado presentes en la parte superior del archivo index.html.
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
- Ahora, para usar los íconos, simplemente agregue la siguiente clase a una etiqueta de intervalo.
<span class="fa fa-icon_name"></span> Where, icon_name is the name of the icon.
Comencemos ahora a escribir la estructura HTML del pie de página del sitio web . Hemos dividido el pie de página en dos secciones: Detalles de la empresa e Información de derechos de autor .
Siga los pasos a continuación:
- Cree dos div con nombres de clase como «detalles de la empresa» y «derechos de autor», respectivamente.
- Pasos para div con clase «detalles de la empresa»:
- Agregue un div con una clase llamada «fila».
- Agregue tres div dentro del div anterior con id col1, col2 y col3 respectivamente.
- Para cada una de las divisiones de columna, declare dos etiquetas de intervalo. Uno para el ícono de fuente impresionante y segundo para la información.
- Pasos para div con clase «copyright»:
- Agregue un elemento de párrafo para mostrar el texto: “© Todos los derechos reservados | Geeks para Geeks”.
- Agregue una lista desordenada de tres elementos para mostrar los tres íconos de redes sociales.
A continuación se muestra el código HTML completo del pie de página:
HTML
<!-- Footer Menu --> <footer id="footer"> <!-- Company Details --> <!-- 1. Address 2. Contact Number 3. Enquiry Mail --> <div class="company-details"> <div class="row"> <div id="col1"> <span id="icon" class="fa fa-map-marker"></span> <span> 710-B, Advant Navis Business Park, <br />Sector-142, Noida </span> </div> <div id="col2"> <span id="icon" class="fa fa-phone"></span> <span> Telephone: +91-890 * * * * * * * </span> </div> <div id="col3"> <span id="icon" class="fa fa-envelope"></span> <span>xyz@geeksforgeeks.org</span> </div> </div> </div> <!-- Copyright Section --> <div class="copyright"> <p>© All rights reserved | GeeksforGeeks.</p> <ul class="contact"> <li> <a href="#" class="fa fa-twitter"> </a> </li> <li> <a href="#" class="fa fa-facebook"> </a> </li> <li> <a href="#" class="fa fa-pinterest-p"> </a> </li> </ul> </div> </footer>
Mire la parte marcada en rojo en la imagen de abajo. Así es como se ve ahora el pie de página del sitio web:
Ahora agreguemos estilos al pie de página.
Agregar estilos a div «detalles del sitio web»
- Primero diseñe el diseño básico : configure los márgenes básicos, los rellenos, el color de fondo y alinee los textos al centro.
Agregue el siguiente código CSS a su estilo.css:
CSS
.company-details{
overflow: hidden;
padding: 3em 0em;
background: #E3F0F7;
text-align: center;
margin-top: 5em;
}
- Alineación de las tres columnas en una línea : haga flotar las tres columnas hacia la izquierda y asigne un ancho de 320 px a cada una de ellas.
Agregue el siguiente código CSS a su archivo style.css:
CSS
#footer #col1,
#footer #col2,
#footer #col3{
float: left;
width: 320px;
padding: 0px 40px 0px 40px;
}
- Adición de estilos a los iconos de FontAwesome : establezca el tamaño de fuente de los iconos en 3em y un margen inferior de 1em y muéstrelos como un bloque.
Agregue el siguiente código CSS a su archivo style.css:
CSS
#footer #icon{
display: block;
margin-bottom: 1em;
font-size: 3em;
}
Agregar estilos a div «copyright»
- Adición de estilos al diseño básico : establezca los márgenes básicos, rellenos, colores de fondo, etc. para la clase de derechos de autor.
Agregue el siguiente código CSS a su archivo style.css:
CSS
.copyright
{
overflow: hidden;
padding: 3em 0em;
border-top: 20px solid rgba(255, 255, 255, 0.08);
text-align: center;
background: #4CAF50;
}
- Agregar estilo al elemento de párrafo : agregue estilos a la información de derechos de autor almacenada en las etiquetas <p> . Agregue espaciado entre letras, color, etc.
Agregue el siguiente código CSS a su archivo style.css:
CSS
.copyright p
{
letter-spacing: 1px;
font-size: 0.90em;
color: rgba(255, 255, 255, 0.6);
}
- Adición de estilos a la etiqueta de anclaje : Establezca el color de la etiqueta de anclaje y la decoración del texto en ninguno:
CSS
.copyright a
{
text-decoration: none;
color: rgba(255, 255, 255, 0.8);
}
Si abre el archivo index.html en el navegador ahora, verá el pie de página como se muestra a continuación:
El pie de página anterior se ve bien, la única diferencia está en la visualización de los íconos sociales de Facebook, Twitter, etc. Arreglemos esto. Lo último que queda es agregar estilos a los íconos de las redes sociales.
Agregar estilos a los íconos sociales :
- Elimine el margen de la ul o clase llamada «contacto», agregue relleno y establezca el estilo de lista en ninguno:
CSS
ul.contact{
margin: 0;
padding: 2em 0em 0em 0em;
list-style: none;
}
- Configure los elementos de la lista para que se muestren como bloques en línea para que los iconos se puedan mostrar horizontalmente en lugar de verticalmente. También agregue relleno y tamaño de fuente a los elementos de la lista.
CSS
ul.contact li{
display: inline-block;
padding: 0em 0.10em;
font-size: 1em;
}
- Después de agregar los dos estilos anteriores, los íconos ahora se organizarán horizontalmente y en el centro del div de derechos de autor. Actualice y vea el resultado en su navegador después de realizar los cambios anteriores.
- Lo último es agregar un fondo para los íconos sociales. Para hacerlo, agregue el siguiente estilo para las etiquetas de anclaje de cada elemento de la lista:
CSS
ul.contact li a{
color: #FFF;
display: inline-block;
background: #4C93B9;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
}
El código CSS completo para el pie de página del sitio web es el siguiente:
CSS
/**********************************/
/* Styling Footer */
/**********************************/
/*** Adding Styles to Company Details ***/
.company-details{
overflow: hidden;
padding: 3em 0em;
background: #E3F0F7;
text-align: center;
margin-top: 5em;
}
#footer #col1,
#footer #col2,
#footer #col3{
float: left;
width: 320px;
padding: 0px 40px 0px 40px;
}
#footer #icon{
display: block;
margin-bottom: 1em;
font-size: 3em;
}
/*** Adding Styles to Copyright Div ***/
.copyright
{
overflow: hidden;
padding: 3em 0em;
border-top: 20px solid rgba(255, 255, 255, 0.08);
text-align: center;
background: #4CAF50;
}
.copyright p
{
letter-spacing: 1px;
font-size: 0.90em;
color: rgba(255, 255, 255, 0.6);
}
.copyright a
{
text-decoration: none;
color: rgba(255, 255, 255, 0.8);
}
/* Styling Social Icons */
ul.contact{
margin: 0;
padding: 2em 0em 0em 0em;
list-style: none;
}
ul.contact li{
display: inline-block;
padding: 0em 0.10em;
font-size: 1em;
}
ul.contact li a{
color: #FFF;
display: inline-block;
background: #4C93B9;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
}
Navegador compatible:
- Google Chrome
- Borde de Microsoft
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por harsh.agarwal0 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA