No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Footer

28/32
Recursos

S贸lo nos queda una 煤ltima secci贸n a nuestro proyecto. Esta es la secci贸n del footer.

Vamos a nuestro archivo HTML y empecemos a maquetar.

Estructura del footer

El pie de p谩gina se divide en dos secciones bastante simples: una con los enlaces a redes sociales y otro con el logotipo de la empresa. Conociendo esto podemos crear las etiquetas que necesitamos.

  • En la primera secci贸n agregamos los nombres de las redes mostradas en el dise帽o. Agregamos # a la direcci贸n del enlace para evitar que se actualice la p谩gina al hacer clic sobre el mismo.
  • En la segunda secci贸n llamamos la imagen con una etiqueta img. Agregamos una descripci贸n sobre la imagen para la parte de accesibilidad.
  • Agregamos clases a cada una de las secciones con left y right, respectivamente.
    <footer>
        <section>
            <ul>
                <li><a href="#">Linkedin</a></li>
                <li><a href="#">Crunchbase</a></li>
                <li><a href="#">Hackernews</a></li>
            </ul>
        </section>
        <section>
            <img src="./assets/img/logo-footer.svg" alt="Logo Batatabit">
        </section>
    </footer>

C贸mo dar estilos al footer

Ten presente los siguientes elementos:

Contenedor

  • Llamamos la etiqueta footer directamente para aplicar estilos.
  • Usamos display: flex para que ambas secciones est茅n una a lado de otra.
  • Le damos un ancho del 100% y un alto de 150px.
  • Establecemos el color de fondo con la variable 鈥揵itcoin-orange.
footer {
    display: flex;
    width: 100%;
    height: 150px;
    background-color: var(--bitcoin-orange);
}

Secciones

  • Llamamos la etiqueta section desde la etiqueta footer para trabajar con las dos secciones.
  • Mantenemos el display: flex.
  • Centramos las cajas con justify-content: center.
  • Alineamos los elementos dentro de los contenedores con align-items: center.
footer section {
    display: flex;
    width: 50%;
    justify-content: center;
    align-items: center;
}
  • Llamamos la etiqueta ul desde la clase .left de la etiqueta footer para ser espec铆ficos.
  • Ajustamos el ancho de la fuente en 1.4rem y su peso en 500.
  • Le damos un interlineado de 1.8rem.
  • Quitamos los bullet points de los elementos con list-style: none.
footer .left ul {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    list-style: none;
}
  • A cada elemento de la lista le damos un margen superior e inferior de 10px y 0 a los lados.
  • Quitamos el subrrayado de los textos que genera la etiqueta a con text-decoration: none.
  • Cambiamos el color del texto con 鈥搄ust-white.
.left li {
    margin: 10px 0;
}
.left a {
    text-decoration: none;
    color: var(--just-white);
}

隆El dise帽o est谩 completo! 驴O no? Acabas de finalizar todas las secciones por trabajar y el resultado es bastante bueno desde un dispositivo m贸vil, 隆pero s贸lo desde all铆! A煤n nos queda la parte de los media queries que adaptar谩n todos los elementos a distintos anchos.

Contribuci贸n creada por: Jos茅 Miguel Veintimilla (Platzi Contributor).

Aportes 72

Preguntas 14

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Otra manera de centrar las dos secciones del footer:

footer {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    height: 150px;
    padding-left: 10px;
    background-color: var(--bitcoin-color);
}

El padding-left es para que no est茅 centrado del todo y desplazarlo un poco hacia la derecha. De 茅sta manera todos los estilos de footer section sobran.

Adem谩s le agregu茅 un underline para cuando pase el rat贸n por encima:

.footer__left a:hover {
    text-decoration: underline;
}

As铆 qued贸 mi footer:

As铆 quedo mi p谩gina con algunos estilos personales

y el icono de la hamburgesa para desplegar el menu de navegaci贸n? .-.

El contenedor del logo del footer es recomendable que sea figure

<footer>
        <div>
            <ul>
                <li><a href="#">Linkedin</a></li>
                <li><a href="#">Crunchbase</a></li>
                <li><a href="#">Hackernews</a></li>
            </ul>
        </div>
        <figure>
            <img src="./assets/img/logo-footer.svg" alt="Logo de batata 2020">
        </figure>
    </footer>

En CSS es preferible que aprovechemos el display flex del contenedor padre usando space-evenly para distribuir los elementos de forma similar:

footer {
    width: 100vw;
    min-width: 320px;
    height: 150px;
    background-color: var(--bitcoin-orange);
    display: flex;
    justify-content: space-evenly; 
    align-items: center;
}
footer li {
    list-style: none;
    margin-bottom: 8px;
}
footer ul li a {
    color: var(--just-white);
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.8rem;
}

Tenemos Footer.
Se ha pasado super r谩pido el curso y cuanto conocimiento me he llevado 馃槃

.footer{
    width: 100%;
    height: 150px;
    background-color: var(--bitcoin-orange);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 65px;
}

.footer ul{
    list-style: none;
}

.footer ul li{
    padding: 4px 0;
}

.footer ul li a{
    text-decoration: none;
    color: var(--just-white);
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 18px;
    
}

as铆 quedo el proyecto original

https://bata-bit.netlify.app/

As铆 quedo el m铆o enfocado en otra soluci贸n

Hola compa帽eros, en el scroll horizontal termin茅 de hacer todo lo que el profe indic贸 pero me sigue mandando al inicio izquierdo de las cajas. Me gustar铆a que se centrara en 鈥淩ECOMENDADO鈥. 驴C贸mo podr铆a hacerlo?

Se puede generar la estructura de la tabla con en VS code con:

(section>ul>(li>a)*3)+section>img[alt="Logo de Batatabit 2020"]

Oprimir tab y listo.
PD: si no te funciona intenta borrar y teclear el ultimo caracter.

Como va quedando mi beb茅 馃槂

Me adelant茅 un poco porque me emocionaba mucho hacer el footer, jajajajajaj

mi proyecto terminado

![](

lo pude hacer todo el mobile first

Con el flexbox se hace el centrado super f谩cil 馃槃

He llegado hasta ah铆 y desde que empec茅 a realizar las tarjetas todo se me descuadro Me toco repetir curso haber donde hayo el error. Esto es muy frustrante pero bueno nada repetir e intentar nuevamente hasta que todo me salga correcto. Respiro profundo y retomo

Les comparto este video donde explican subir nuestros archivos a una pagina web
馃殌 隆SUBE tu WEB a INTERNET GRATIS y SUPER F脕CIL!

Hola, les comparto algo que descubr铆 haciendo el footer

li*3>a    <!--As铆 se puede generar la etiqueta "a" dentro de la etiqueta "li"-->
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>

As铆 nos podemos ahorrar algo de tiempo, poquito pero tiempo es tiempo

Otra manera de hacerlo es con grid. Les comparto mi codigo.

.footer-container {
    width: 100%;
    min-width: 32rem;
    height: 15rem;
    background-color: var(--bitcon-orange);
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
}

.redes-content a {
    display: block;
    text-decoration: none;
    color: var(--just-white);
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.8rem;
    margin-bottom: 0.5rem;
}

驴Quieres obtener el siguiente resultado? Mira el tutorial debajo y encontrar谩s el paso a paso 馃憺馃憺馃憺馃毝鈥嶁檧锔忦煔垛嶁檪锔

_

TUTORIAL: 馃搾Tutorial de Clase 28
_

  • Vista mobile:
  • Vista pantallas m谩s grandes:

asi qued贸 el mio, faltan las query medias
Papapabit

Comparto el resultado de mi versi贸n de la aplicaci贸n siguiendo el dise帽o en figma: https://tibecvp.github.io/curso-mobile-first/

Ac谩 un screenshot del sitio:


Por el momento todo bien.

por el momento este ha sido el curso con el que he tenido el mejor workflow

Alguien podr铆a decirme cu谩l ser铆a la mejor forma de a帽adir el texto: 庐 Batatabit 2020 debajo del logo en el footer. Yo hab铆a pensado utilizando la etiqueta <figure> como contenedor de la imagen y luego utilizar <figcaption> Aunque de esta forma me da problemas para que el logo quede a la misma altura que en el dise帽o de prueba. S茅 que es algo sencillo pero es de las pocas cosas del curso que me han dado problemas. Gracias de antemano.

Con men煤 de hamburguesa qued贸 as铆.

Sigo trabajando en ello, pero ac谩 dejo el c贸digo, por si a alguien le sirve.

https://github.com/ChrisPrzR/bitcoinResponsive

/*HTML*/
<div class="menu">
            <a href="#" id="menu-btn">
                <svg viewBox="0 0 100 80" width="40" height="40">
                    <rect width="100" height="20" rx="8"></rect>
                    <rect y="30" width="100" height="20" rx="8"></rect>
                    <rect y="60" width="100" height="20" rx="8"></rect>
                </svg>
            </a>
            <div id="dropdown" class="show">
                <a href="#currency-info">Monedas</a>
                <a href="#benefits">Beneficios</a>
                <a href="#plans">Planes</a>
            </div>  
        </div>

/*CSS*/
.menu{
    position: relative;
}

#menu-btn{
    display: block;
    float: left;
    width: 40px;
    margin: 10px;
    fill: var(--just-white);
}

#dropdown{
    position: absolute;
    left: calc(7%);
    top:10px;

}

#dropdown a{
    display: inline-block;
    margin: 0 5px;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 2rem;
    text-decoration: none;
    color: var(--just-white);
}

.menu .hidden{
    display: none;
}
 
Unas lineas de JS solamente


let button = document.getElementById('menu-btn')
let dropdown = document.getElementById('dropdown')

button.addEventListener("click", function(){
    if(dropdown.className == "show"){
        dropdown.classList.toggle("hidden")
        dropdown.classList.remove("show")
    }else{
        dropdown.className = "show"
    }
}) 

Excelente el curso!
He repasado todo el conocimietno de html y css que venia estudiando

que curso tan excelente 馃槃

el alt de la taq img es una ayuda para las personas con problemas visuales

ultima section

https://ggosdinski.github.io/wdd130/practice/curso-practico-HTML-CSS/mobile.html#plans

Bueno, les comparto mi proyecto hasta ahora. Aun no esta trabajado para dispositivos mas grandes pero creo que viene bien. Cualquier comentario sera bienvenido! Gracias

As铆 qued贸 mi p谩gina, despu茅s de mucho esfuerzo

Esta es la forma en que hice para realizar mi footer CSS

footer{
  width: 100%;
  height: 150px;
  display: flex;
  min-width: 320px;
  align-items: center;
  justify-content: space-around;
  background-color: var(--bitcoin-orange);
}

footer ul{
  list-style: none;
}

footer li a{
  color: var(--just-white);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 2.8rem;
  text-decoration: none;
}

HTML:

    <footer>
      <section>
        <ul>
          <li><a href="#">Linkedin</a></li>
          <li><a href="#">Crunchbase</a></li>
          <li><a href="#">Hackernews</a></li>
        </ul>
      </section>
      <section>
        <img
          src="./src/assets/icons/logo-footer.svg"
          alt="Logo Batatabit 2020"
        />
      </section>
    </footer>

As铆 qued贸 visualmente

Termine :3

Ya falta poco, para acabar

Asi me quedo: 鉂わ笍

footer {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    height: 150px;
    padding-left: 10px;
    background-color: var(--bitcoin-orange);
}
footer .left ul{
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    list-style: none;
}
.left li{
    margin: 10px 0;
}
.left a{
    text-decoration: none;
    color: var(--just-white);
}
**隆HABEMUS FOOTER!**

Terminando secci贸n de footer antes de ver la clase, me enred茅 en una parte con las los estilos de las opciones de la lista, pero es parte del proceso. S煤per emocionado con lo aprendido hasta este punto con este curso.

No se si le paso a alguien mas PERO no me tomaba el color --just-white para el texto del footer. Asi lo solucione:

.left li{
  margin: 10px 0;
  color: var(--just-white);
}

.left a{
  text-decoration: none;
}

resultado final de la lecci贸n

.left li

footer .left ul

footer

.plans-container--card

me rei cuando vi 290

esto es para la tabla de precios, as铆 lo hice yo para el scroll horizontal, a煤n no he comprobado si es responsive

HTML

 <div class="scroll">        
                <section class="main-tables-container">
                    <div class="main-currency-table">
                        <p class="main-currency-title">Monedas</p>
                        <div class="currency-table-container">
                            <table>
                                <tr>
                                    <td class="table-top-left">Bitcoin</td>
                                    <td class="table-top-right table-right">$1.96 <span class="down"></span></td>
                                </tr>
                                <tr>
                                    <td>Ethereum</td>
                                    <td class="table-right">$0.07 <span class="up"></span></td>
                                </tr>
                                <tr>
                                    <td>Ripple</td>
                                    <td class="table-right">$2.17 <span class="down"></span></td>
                                </tr>
                                <tr>
                                    <td class="table-bottom-left">Stellar</td>
                                    <td class="table-bottom-right table-right">$4.96 <span class="down"></span></td>
                                </tr>
                            </table>
                        </div>
                        <div class="currency-table-date">
                            <p> <b>Actualizado:</b> 19 JULIO 23:45</p>
                        </div>
                    </div>
                </section>
                <section class="main-tables-container">
                    <div class="main-currency-table">
                        <p class="main-currency-title-2">Comisiones</p>
                        <div class="currency-table-container">
                            <table>
                                <tr>
                                    <td class="table-top-left">Bitrade</td>
                                    <td class="table-top-right table-right">$12.96</td>
                                </tr>
                                <tr>
                                    <td>Bitpreco</td>
                                    <td class="table-right">$13.07</td>
                                </tr>
                                <tr>
                                    <td>Novadax</td>
                                    <td class="table-right">$13.15</td>
                                </tr>
                                <tr>
                                    <td class="table-bottom-left">Coinext</td>
                                    <td class="table-bottom-right table-right">$14.96</td>
                                </tr>
                            </table>
                        </div>
                        <div class="currency-table-date-2">
                            <p> <b>Actualizado:</b> 19 JULIO 23:48</p>
                        </div>
                    </div>
                </section>
            </div>

CSS

.scroll {
    display: flex;
    overflow-x: scroll;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
}

.main-currency-table {
    width: 70%;
    min-width: 235px;
    max-width: 500px;
    height: 360px;
    margin: 0 10vw;
    font-family: "Inter", sans-serif;
    scroll-snap-align: center;
}

con el siguiente snippet:
section>ul>li*3^^section>img
se genera

<section>
	<ul>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</section>
<section>
	<img src="" alt="">
</section>

Comparto el c贸digo de mi footer

.footer-container {
    background-color: var(--bitcoin-orange);
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: 18vh;
}

.footer-links {
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.footer-links a {
    text-decoration: none;
    color: var(--just-white);
    font-size: 1.4rem;
    line-height: 1.8rem;
    font-weight: normal;
}

馃Le agregu茅 los logos de las redes :3

Mobile First

La forma mas facil es

footer {
  display: flex;
  background-color: var(--bitcoinOrange);
  width: 100%;
  height: 150px;
  justify-content: space-around;
}
footer section {
  align-self: center;
}
footer .left ul {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.8rem;

  list-style: none;
}
footer .left li {
  margin: 10px 0;
}
.left a {
  text-decoration: none;
  color: var(--justWhite);
}

Sin poner un display flex innecesario

ul>l1*3>a Con este snippet pueden generar los li del footer.

reto por el momento completado, excelente curso practico

Buen dia campeones鈥 es hora de poner los dedos en las teclas y a codear campeon鈥 Interesante curso, es mas ahora solo queda generar valor. Muy satisfecho.
馃憡

preferiblemente a un elemento flexible para establecer el ancho o el alto dependiendo del sentido del eje principal, se le deber铆a establecer con la propiedad de flex en lugar de width o height.

Por ejemplo:
Si tienes un elemento flexible cuya direcion es row si lo que te interesa es establecer el ancho del elemento debes emplear flex, con sus correspondientes valores en lugar de width, por otra parte si deseas establecer el alto si tendr铆as que implementar el height debido a q flexbox es un sistema unidimensional.

Lo menciono por que en la clase se le aplica a un elemento flexible el ancho con width desaprovechando las ventajas que que te ofrece flexbox.

Gracias,Diego. Excelente trabajar contigo de principio a fin. 馃憦馃徎

As铆 me qued贸!

Luego de agregar el scroll a la secci贸n de las tarjetas, se me agrega tambi茅n un peque帽o scroll horizontal a todo el proyecto. C贸mo podr铆a corregirlo, llevo un rato dando vueltas jaja

Listo para trabajar los Media Queries!

Impresionante lo f谩cil que ha sido implementar teniendo a Figma para guiarnos, les dejo mi versi贸n de este proyecto aqu铆:
https://arudope.github.io/batata_bit_concept/
Me qued贸 as铆, implement茅 distinto el tema de las tarjetas, con las flechas para darles clic usando un poco de javaScript, fue divertido implementarlo.
Adem谩s las tablas las hice con Grid y tambi茅n us茅 un poco de Javascript para cambiar de tabla.

馃憣

Display flex pocisiona los elementos uno enseguida del otro