Contenido del curso

Introducción

Análisis y creación del proyecto

Chrome Dev Tools como herramienta

5
Uso de Herramientas de Desarrollo en Navegadores para Depuración y CSS en Tiempo Real
03:05 min

Header Google Clone

Contenido principal Google Clone

Footer Google Clone

Cierre

Tomar examen

Estilos CSS para posicionamiento y diseño de contenedores en HTML

Resumen

¡Bienvenida y bienvenido a la recta final de nuestro proyecto! Ya sabes cómo maquetar la estructura del footer. Ahora, aplicaremos los estilos. Vamos directo a nuestro archivo CSS.

Etiqueta footer

Llamamos la etiqueta footer.
Le asignamos el width: 100% para que ocupe todo el ancho de la página y un height: 50px.
Para asegurarnos que el footer siempre esté al final de la página y no se mueva, le damos position: absolute.
Además, quitamos el espacio de abajo con bottom: 0.
Usamos display: grid para generar la cuadrícula en que estará el contenido de nuestro proyecto. La propiedad grid-template-colums: 1fr 1fr nos permite dividir el footer en dos fracciones.
Alineamos los elementos con align-items: center.
Cambiamos el tamaño de fuente con font-size: 13px.
Le damos un color de fondo con background-color: #f2f2f2.
Añadimos un borde superior con border-top: 1px solid #e4e4e4.

Etiqueta ul

Llamamos la etiqueta ul desde el footer.
Le damos un margin: 10px para que el contenido no esté tan pegado al contenedor padre.
Le quitamos los bullets con list-style: none.
Posicionamos el contenido en horizontal con display: flex.
Quitamos el espaciado interno izquierdo con padding-left: 0.

Contenedor izquierdo

Llamamos la clase footer-left desde nuestra etiqueta footer con footer .footer-left.
Movemos los elementos a la izquierda con justify-self: left.

Contenedor derecho

Llamamos la clase footer-left desde nuestra etiqueta footer con footer .footer-right.
Movemos los elementos a la derecha con justify-self: right.

Agregar estilos a los elementos

Llamamos a las etiquetas ancla dentro de los elementos li de las listas no ordenadas de nuestra etiqueta footer con footer ul li a.
Agregamos un margin: 10px para separar los elementos entre sí.
Cambiamos su color con color: #5f6368.

Nuestro proyecto final se debería ver así:

¡Y listo! Hemos terminado de trabajar en nuestro clon de Google. ¡Muy bien por ti! Hemos aplicado muchos de los conceptos aprendidos en el Curso Definitivo de HTML y CSS. Pero esto no termina aquí.

Te proponemos un reto

Aprendimos a modelar paso a paso un header, main y footer. Ahora te toca a ti clonar otra icónica página usada por los estudiantes, ¡Wikipedia!

Te dejo los enlaces de los íconos de pie de página para ahorrarte un poco de tiempo:

Contribución creada con aportes de: Carlos Orozco y José Miguel Veintimilla.

Manuel Cabos

student•

Wikipedia + Platzi

-- Dejo la demo en CodePen y el repositorio en GitHub – Fuente usada para el logo Wikilatzi: Crismon Text (400) - Google Fonts . index.html

<!DOCTYPE html>
<html school="en">
<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>Wikilatzi</title>

  <link rel="stylesheet" href="css/style.css">

  <link rel="icon" href="https://i.postimg.cc/s257Mzw4/platzi.png">

  <!-- Fuente Crismon Text (400) para el logo "Wikilatzi" https://fonts.google.com/specimen/Crimson+Text -->
  <!-- Fuente Roboto (400 y 700) para texto https://fonts.google.com/specimen/Roboto -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Crimson+Text&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
  <main>
    
    <div class="title-subtitle">
      <div class="title">
        <span class="w">W</span>
        <span class="ikilear">IKILATZ</span>
        <span class="n">I</span>
      </div>
      <span class="subtitle">Nunca pares de aprender</span>
    </div>

    <div class="logo">
      <img src="https://i.postimg.cc/s257Mzw4/platzi.png" alt="Logo de Platzi">
    </div>

    <ul class="schools">
      <li class="school s1">
        <a href="https://platzi.com/web/">
          <strong>Desarrollo Web</strong>
          <small>482 000+ Desarrolladores</small>
        </a>
      </li>
      <li class="school s2">
        <a href="https://platzi.com/datos/">
          <strong>Data Science e IA</strong>
          <small>343 000+ Data Scientists</small>
        </a>
      </li>

      <li class="school s3">
        <a href="https://platzi.com/idioma-ingles/">
          <strong>English Academy</strong>
          <small>608 000+ Students</small>
        </a>
      </li>
      <li class="school s4">
        <a href="https://platzi.com/idioma-ingles/">
          <strong>JavaScript</strong>
          <small>276 000+ JS Developers</small>
        </a>
      </li>

      <li class="school s5">
        <a href="https://platzi.com/marketing-digital/">
          <strong>Marketing Digital</strong>
          <small>405 000+ Digital Marketers</small>
        </a>
      </li>
      <li class="school s6">
        <a href="https://platzi.com/startups/">
          <strong>Startups</strong>
          <small>150 000+ Startuppers</small>
        </a>
      </li>
      
      <li class="school s7">
        <a href="https://platzi.com/software/">
          <strong class="mini">Programación y Des. de Software</strong>
          <small>460 000+ Programadores</small>
        </a>
      </li>
      <li class="school s8">
        <a href="https://platzi.com/diseno-producto/">
          <strong>Product Design</strong>
          <small>212 000+ Product Designers</small>
        </a>
      </li>
      
      
      <li class="school s9">
        <a href="https://platzi.com/publicidad/">
          <strong>Publicidad Digital</strong>
          <small>312 000+ Publicistas</small>
        </a>
      </li>
      <li class="school s10">
        <a href="https://platzi.com/periodismo-digital/">
          <strong>Periodismo Digital</strong>
          <small>130 000+ Periodistas</small>
        </a>
      </li>
    </ul>

    <div class="search-box">
      <input class="search-input" type="text">
      <div class="lang">ES &#9207;</div>
      <button>
        <img src="https://i.postimg.cc/h4sX6bDS/magnifying-glass.png" alt="Icono de lupa">
      </button>
    </div>

    <div class="language">
      <div class="line"></div>
      <div class="lang-selector">
        <div class="tl-icon">
          <span class="up">&#x6587;</span>
          <span class="down">A</span>
        </div>
        <span>Leer Wikilatzi en tu idiona &#9207;</span>
      </div>
      <div class="line"></div>
    </div>
    <div class="line"></div>
  </main>
  
  <footer>
    <div class="desc-app">
      <div class="description">
        <img src="https://static.platzi.com/media/achievements/badge-algoritmos-pensamiento-logico-4b7a05c5-470a-41e6-bcd9-4693f4207a03.png" alt="">
        <p>Transformamos la economía de nuestros países entrenando a la próxima generación de profesionales en tecnología.</p>
      </div>
  
      <div class="dowload-app">
        <div class="icon-app">
          <img src="https://play-lh.googleusercontent.com/miagFY2NtUmdu3Uy7o2bDDSL4pewRPa9k5PBa_EE7IlSHh8DZ4cV2ZvTi72cBMAo8o0=w240-h480-rw" alt="">
        </div>
        <div class="text">
          <span>Descarga Wikilatzi para Android o iOS</span>
          <p>Convierte tu smartphone en un aula personalizada para estudiar donde y cuando quieras. Aprende con nuestras Escuelas y miles de cursos de todos los niveles, con clases concretas y prácticas impartidas por expertos de sectores.</p>
          <div class="stores">
            <img class="ps" src="https://play.google.com/intl/es-419/badges/static/images/badges/es-419_badge_web_generic.png" alt="">
            <img class="as" src="https://bhejo.co/wp-content/uploads/2020/05/app-store-badge.png" alt="">
          </div>
        </div>
      </div>
    </div>

    <div class="others-schools">
      <a href="https://platzi.com/negocios/" class="other-school">
        <div class="school-icon"><img src="https://static.platzi.com/media/learningpath/badges/3801cc6a-27f9-4d65-b39f-ba478a314804.jpg" alt=""></div>
        <div class="info"><span>Business Management</span><span>330 000+</span></div>
      </a>
      <a href="https://platzi.com/ecommerce/" class="other-school">
        <div class="school-icon"><img src="https://static.platzi.com/media/learningpath/badges/98ff5389-59b9-4368-a23f-dd226cfee287.jpg" alt=""></div>
        <div class="info"><span>E-commerce y Negocios Digitales</span><span>293 000+</span></div>
      </a>
      <a href="https://platzi.com/matematicas/" class="other-school">
        <div class="school-icon"><img src="https://static.platzi.com/media/learningpath/badges/6e4f3ad0-d678-4ff5-bf91-56c389324ae0.jpg" alt=""></div>
        <div class="info"><span>Matemáticas</span><span>176 000+</span></div>
      </a>
      <a href="https://platzi.com/diseno-grafico/" class="other-school">
        <div class="school-icon"><img src="https://static.platzi.com/media/learningpath/badges/93a86f03-f15a-4641-8d38-c590c4d14324.jpg" alt=""></div>
        <div class="info"><span>Diseño Gráfico</span><span>311 000+</span></div>
      </a>
      <a href="https://platzi.com/habilidades-blandas/" class="other-school">
        <div class="school-icon"><img src="https://static.platzi.com/media/learningpath/badges/90291415-de42-4df7-9f4a-3b7bcd7ecf4b.jpg" alt=""></div>
        <div class="info"><span>Habilidades Blandas</span><span>292 000+</span></div>
      </a>
      <a href="https://platzi.com/produccion-video/" class="other-school">
        <div class="school-icon"><img src="https://static.platzi.com/media/learningpath/badges/07476be7-7132-47cf-93ea-82b1639b6e00.jpg" alt=""></div>
        <div class="info"><span>Producción Audiovisual</span><span>277 000+</span></div>
      </a>
      <a href="https://platzi.com/videojuegos/" class="other-school">
        <div class="school-icon"><img src="https://static.platzi.com/media/learningpath/badges/66766cd0-0772-4208-bd47-4b80f2944756.jpg" alt=""></div>
        <div class="info"><span>Videojuegos</span><span>243 000+</span></div>
      </a>
      <a href="https://platzi.com/finanzas/" class="other-school">
        <div class="school-icon"><img src="https://static.platzi.com/media/learningpath/badges/402797b7-6f9d-455c-b408-16892b7b5f34.jpg" alt=""></div>
        <div class="info"><span>Finanzas e Inversiones</span><span>291 000+</span></div>
      </a>
      <a href="https://platzi.com/azure/" class="other-school">
        <div class="school-icon"><img src="https://static.platzi.com/media/learningpath/badges/037d21d4-884b-436c-92c3-29971d50d29c.jpg" alt=""></div>
        <div class="info"><span>Cloud Computing con Azure</span><span>169 000+</span></div>
      </a>
      <a href="https://platzi.com/blockchain-criptomonedas/" class="other-school">
        <div class="school-icon"><img src="https://static.platzi.com/media/learningpath/badges/57d7a4b1-b706-454f-88a1-9fe36a1758f6.jpg" alt=""></div>
        <div class="info"><span>Blockchain y Criptomonedas</span><span>171 000+</span></div>
      </a>
      <a href="https://platzi.com/diversidad-inclusion/" class="other-school">
        <div class="school-icon"><img src="https://static.platzi.com/media/learningpath/badges/2667ed5e-b2ad-4b18-b391-36aacda9df18.jpg" alt=""></div>
        <div class="info"><span>Diversidad e Inclusión</span><span>32 000+</span></div>
      </a>
    </div>

    <div class="line"></div>

    <div class="end-footer">
      <span>Esta p&aacute;agina fue desarrollada por <a class="cabos" href="https://github.com/CabosManuel">@CabosManuel</a></span>
      <div class="dot">&bull;</div>
      <span>Combiando estilos de <a class="platzi" href="https://platzi.com/">Platzi</a> y <a class="wikipedia" href="https://www.wikipedia.org/">Wikipedia</a></span>
    </div>
  </footer>
</body>
</html>

. style.css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 62.5%;
}

:root {
  --green: #98ca3f;
  --drakblue: #121f3d;
  --lightblue: #24385b;
  --skyblue: #0791e6;
  --white: #eff3f8;
  --gray: #8da2c0;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  
  background-color: var(--drakblue);
  color: var(--white);
}

/* ******************** */
/* ******* MAIN ******* */
/* ******************** */
.title-subtitle {
  font-family: 'Crimson Text', serif;

  width: fit-content;
  margin: 4rem auto 0;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font-size: 3.8rem;

  display: flex;
  align-items: baseline;
}
.ikilear {
  font-size: 2.6rem;
}

.subtitle {
  font-size: 1.6rem;
  width: fit-content;
  padding-left: 1rem;
}

.logo {
  width: 20rem;
  margin: 9rem auto 6.7rem;
}

.logo img {
  width: 100%;
}

.schools {
  list-style-type: none;
  position: absolute;
  right: 0;
  left: 0;
  
  top: 12rem;
  
  width: 60rem;
  margin: 0 auto;
  
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.mini {
  width: 14rem;
  text-align: center;
}

.school a {
  text-decoration: none;
  color: var(--gray);

  padding: 1rem;
  margin: 0.5rem;

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Align schools around */
.s1 { margin-left: 10rem; }
.s3 { margin-left: 6rem; }
.s5 { margin-left: 1rem; }
.s7 { margin-left: 3rem; }
.s9 { margin-left: 10rem; }

.s2 { margin-right: 8rem; }
.s4 { margin-right: 4rem; }
.s6 { margin-right: 4rem; }
.s8 { margin-right: 2rem; }
.s10 { margin-right: 8rem; }

a strong {
  color: var(--skyblue);
  text-decoration-color: var(--skyblue);
}

/* Underline only in strong */
.school a:hover > strong{
  background-color: var(--lightblue);
  text-decoration: underline;
}
.school a:hover{
  background-color: var(--lightblue);
}

.search-box {
  border: 1px solid var(--lightblue);
  border-radius: 0.3rem;
  width: 45rem;

  margin: 0 auto 0;

  display: flex;
  align-items: center;
}

.search-input {
  /* Quitar estilos */
  border: 0.2rem solid transparent;
  background-color: transparent;
  resize: none;
  outline: none;

  color: var(--white);
  height: 4.2rem;

  font-size: 1.6rem;
  flex-grow: 1;
  padding: 0 2rem;
}

.lang {
  color: var(--gray);
  font-size: 1.4rem;
  cursor: pointer;

  height: 3rem;
  padding: .5rem;
  margin: 0 1rem;
}

button {
  border: none;
  outline: none;

  cursor: pointer;

  background-color: var(--skyblue);
  width: 5.5rem;
  height: 4.4rem;
  padding: 1.2rem 0;
}

button img {
  height: 100%;
}

/* Language selector */
.language {
  display: flex;
  justify-content: center;
  align-items: center;
}

.line {
  background-color: var(--lightblue);
  height: 0.1rem;
}

.language .line {
  width: 7rem;
}

.lang-selector {
  background-color: var(--lightblue);
  border: 0.1rem solid var(--gray);
  border-radius: 0.3rem;
  font-size: 1.4rem;
  font-weight: bold;
  cursor: pointer;

  width: 27rem;
  height: 3.6rem;

  margin: 3.2rem 2rem;
  padding: 0.8rem;

  display: flex;
  justify-content: center;
  align-items: center;
}

.tl-icon {
  display: flex;
  margin-right: 1rem;
}
.up { margin-top: -0.5rem; }
.down { margin-top: 0.3rem; }

main .line {
  margin: 0 2rem;
}

/* ****************************** */
/* *********** FOOTER *********** */
/* ****************************** */
footer {
  color: var(--gray);
  font-size: 1.4rem;
  
  padding: 4rem 0 0 0;

  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.desc-app { 
  width: 33rem;
}

/* ********* DESCRIPTION ******** */
.description {
  padding: 2rem;

  display: flex;
}

.description img {
  width: 4rem;
  height: 4rem;
}

.description p {
  padding: 0 0 0 2rem;
}

/* ******* DOWNLOAD APP ******* */
.dowload-app {
  background-color: var(--lightblue);
  margin: 1rem;
  padding: 1rem;

  display: flex;
  justify-content: start;
}

/* App icon */
.icon-app {
  width: 4.5rem;
  min-width: 4.5rem;
  height: 4.5rem;
  border-radius: 0.8rem;
  overflow: hidden;
  /* shadow */
  box-shadow: 0 0 0.3rem 0 var(--white);
}
.icon-app img { width: 100%; }

/* Texto */
.text {
  width: auto;
  padding: 0 0 0 2rem;
}
.text span {
  font-weight: bold;
}
.text p {
  margin: 1.5rem 0 1rem;
}

.stores {
  width: 16rem;
  height: auto;

  display: flex;
  flex-direction: column;
}
.stores img { 
  width: 100%; 
  cursor: pointer;
}
.ps { margin-left: -1rem; }
.as { margin: -1.6rem 0 0 -1.7rem; }

/* ********* OTHERS SCHOOLS ******** */
.others-schools {
  text-decoration: none;
  width: 55vw;
  height: fit-content;
  padding: 2rem 0;

  min-width: 60rem;

  display: flex;
  justify-content: right;
  flex-wrap: wrap;
}

.other-school {
  width: 30%;
  margin: 0 1rem 1rem;
  padding: 1rem;

  min-width: 18rem;
  min-height: 7rem;
  text-decoration: none;

  display: flex;
  align-items: center;
}

.other-school:hover {
  background-color: var(--lightblue);
}

.school-icon {
  width: 4rem;
  min-width: 4rem;
}
.school-icon img {
  width: 100%;
}

.info {
  width: auto;
  padding: 0 1rem;

  text-decoration: none;

  display: flex;
  flex-direction: column;
}

.info span{
  color: var(--gray);
}

.info span:first-child {
  color: var(--skyblue);
}

footer .line {
  width: 90%;
  margin: 0 2rem;
}

/* ********** END FOOTER ********** */
.end-footer {
  margin: 1.5rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.end-footer a {
  text-decoration: none;
}

.dot {
  margin: 0 0.8rem;
}

.cabos { 
  color: white;
  font-weight: bold;
  background-color: #0c8f63;
  border-radius: 0.5rem;
  padding: 0.3rem 0.5rem;
}

.cabos:hover {
  color: #0c8f63;
  background-color: white;
}

.platzi { color: var(--green); }
.wikipedia { color: #d1d1d1; }

PAULO GUERRERO

student•

jajaja muy bueno

Byron Mesias Cueva Cabrera

Mateo Arias

Carlos Hermosillo

Juan Esteban Galvis

Jean Nuñez

Gutierrez Diego

Abraham Serrano Montiel

Juan Quintero

Luis Diego Cárdenas Padilla

Aarón González

Lily Bejarano

Abdiel Carreño Rojas

Daniel alejandro cifuentes zuluaga

Danna Valentina Hernández Pinilla

Joshua Ortiz Rosales

Juan Camilo Valencia Silva

Eric Enrique Montes Alvis

Maria Alejandra Carrero

José B. Méndez Padín

Andres Evaristo Ruiz Gonzalez

Mariana Valencia Gallego

Luis Angel Rojas Estevez

Hameyalli Elizalde

Roger Carlos Ariel Alba

Sergio Mendoza

Beder Danilo Casa Condori

Usuario anónimo

user•

Sebastián Arredondo Posada

Jean Pierre Gálvez Castañeda

Danelia Sanchez Sanchez

Francisco Javier Suarez Verdugo

Abril Darynka Tapia Sosa

Wandy Rafael Santana Evangelista

César Andrés Aguilar Párraga

Tomás Sacripanti

CRISTIAN BARBERO PÉREZ

Luciano Cavallo

Introducción

Reto de Programación 100 Días: PlatziCodingChallenge

Construcción de un Clon Web con HTML y CSS

Análisis y creación del proyecto

Maquetación HTML5: Clon de Página Web

Organización de Archivos y Carpetas en Proyectos Web

Chrome Dev Tools como herramienta

Uso de Herramientas de Desarrollo en Navegadores para Depuración y CSS en Tiempo Real

Header Google Clone

Maquetación Semántica HTML5: Estructura y Navegación Básica

Estilos CSS para Clonar el Header de una Página Web

Posicionamiento Horizontal de Elementos en Listas HTML

Colocación de iconos e imágenes en la barra de navegación HTML/CSS

Contenido principal Google Clone

Maquetación HTML de un Clon de Google Paso a Paso

Estilos CSS para Posicionar Logos y Contenido en HTML

Estilos CSS para Inputs: Diseño y Personalización

Efecto Hover y Sombra en Inputs con CSS

Estilización de Botones en HTML y CSS

Footer Google Clone

Construcción de un Pie de Página con HTML y Enlaces