Como hacer un pie de pagina en html y css

Sticky footer bootstrap

Hello, guys welcome to Code With Random blog, today we’ll learn about How to Create a footer with styling for Beginners .  In today’s tutorial we will be using font-awesome for icons, HTML 5 and some basic CSS.

<footer> <div class=»content»> <div class=»top»> <div class=»logo-details»> <span class=»logo_name»>Logo</span> </div> <div class=»media-icons»> </div> </div> <div class=»link- boxes»> <ul class=»box»> <li class=»link_name»>Links</li> </ul> <ul class=»box»> <li class=»link_name»>Services</li> </ul> <ul class=»box»> <li class=»link_name»>Other services</li> </ul> <ul class=»box»> <li class=»link_name»>Contact</li> </ul> </div> </div> </div> </footer>

@media (max-width: 900px) { footer .content .link-boxes{ flex-wrap: wrap; } footer .content .link-boxes .input-box{ width: 40%; margin-top: 10px; } } @media (max-width: 700px){ footer{ position: relative; } .content .top .logo-details{ font-size: 26px; } .content .top .media-icons a{ height: 35px; width: 35px; font-size: 14px; line-height: 35px; } footer . content .link-boxes .box{ width: calc(100% / 3 – 10px); } footer .content .link-boxes .input-box{ width: 60%; } .bottom-details .bottom_text span, .bottom-details .bottom_text a{ font-size: 12px; } } @media (max-width: 520px){ footer::before{ top: 145px; } footer .content .top{ flex-direction: column; } .content .top .media-icons{ margin-top: 16px; } footer .content .link-boxes .box{ width: calc(100% / 2 – 10px); } footer .content .link-boxes .input-box{ width: 100%; } }

Pie de página css

¿Cómo crear un pie de página usando Html y CSS? | Code With RandomHola, chicos bienvenidos a Code With Random blog, hoy vamos a aprender acerca de Cómo crear un pie de página con el estilo para los principiantes .  En el tutorial de hoy vamos a utilizar font-awesome para los iconos, HTML 5 y algunos CSS básico.A continuación se presentan los enlaces a los recursos que vamos a utilizar:1. Configurar nuestra estructura de pie de página

En el primer paso, vamos a codificar en primer lugar la estructura de nuestro pie de página con una estructura básica de pie de página utilizando div, ul, li, y la etiqueta de pie de página después de que el código de enlaces de nuestro footer.OutputBasic Estructura2. Codificar los enlaces del pie de página

Después de completar la estructura debemos codificar algunos enlaces con el nombre de Enlaces, Servicios, Otros Servicios, o Contacto, entonces completamos nuestra parte Html que es lo siguiente que hacemos algunos estilos.OutputFinal HTML Part3. Comenzar nuestro estilo básico

Después de codificar los enlaces, hacemos algunos estilos básicos como el restablecimiento del HTML, las fuentes, el color de fondo, la división superior o inferior, el estilo del logotipo y un poco de margen, relleno o alineación.OutputBasic Stylings4. Completar el diseño final

Html header footer

Usando la etiqueta Html Si queremos hacer el pie de página en el documento Html usando la etiqueta Html entonces tenemos que seguir los pasos que se dan a continuación. Usando estos pasos, podemos ver fácilmente el pie de página en una página web en el navegador: Paso 1: En primer lugar, tenemos que escribir el código Html en cualquier editor de texto o abrir el archivo Html existente en el editor de texto en el que queremos utilizar el Html para hacer un pie de página.

Pruébelo ahora La salida del código Html anterior se muestra en la siguiente captura de pantalla: Usando CSS interno Si queremos hacer el pie de página en el documento Html usando la hoja de estilo en cascada interna entonces tenemos que seguir los pasos que se dan a continuación. Usando estos pasos, podemos hacer fácilmente un pie de página con estilo: Paso 1: En primer lugar, tenemos que escribir el código Html en cualquier editor de texto o abrir el archivo Html existente en el editor de texto en el que queremos utilizar el CSS interno para hacer un pie de página.

Paso 2: Ahora, tenemos que colocar el cursor en la etiqueta head, justo después del cierre de la etiqueta title en el documento Html y luego definir la etiqueta de inicio y cierre de la etiqueta <style> como se muestra en el siguiente bloque.

Ejemplos de pies de página

Este tutorial es parte de una serie sobre la creación y personalización de este sitio web con CSS, un lenguaje de hojas de estilo utilizado para controlar la presentación de los sitios web. Puede seguir toda la serie para recrear el sitio web de demostración y familiarizarse con CSS o utilizar los métodos descritos aquí para otros proyectos de sitios web con CSS.

Antes de continuar, le recomendamos que tenga algún conocimiento de HTML, el lenguaje de marcado estándar utilizado para mostrar documentos en un navegador web. Si no estás familiarizado con HTML, puedes seguir los diez primeros tutoriales de nuestra serie Cómo construir un sitio web con HTML antes de empezar esta serie.

En el último tutorial de la serie CSS, crearás un pie de página estático que se mantiene en una posición fija en la parte inferior de la ventana gráfica mientras el visitante se desplaza por la página. Este tutorial recreará el pie de página del sitio web de demostración, pero también puede utilizar estos métodos para otros proyectos web.

Para descargar estas imágenes, haga clic en el nombre del archivo vinculado arriba y luego haga clic en CTRL + clic izquierdo (en Mac) o clic derecho (en Windows) mientras pasa por encima de la imagen y seleccione «Guardar imagen como». Guarde las imágenes con los nombres de archivo indicados en su carpeta de imágenes.