No tienes acceso a esta clase

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

Estilos en Footer

16/18
Recursos

隆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

  1. Llamamos la etiqueta footer.
  2. Le asignamos el width: 100% para que ocupe todo el ancho de la p谩gina y un height: 50px.
  3. Para asegurarnos que el footer siempre est茅 al final de la p谩gina y no se mueva, le damos position: absolute.
  4. Adem谩s, quitamos el espacio de abajo con bottom: 0.
  5. 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.
  6. Alineamos los elementos con align-items: center.
  7. Cambiamos el tama帽o de fuente con font-size: 13px.
  8. Le damos un color de fondo con background-color: #f2f2f2.
  9. A帽adimos un borde superior con border-top: 1px solid #e4e4e4.

Etiqueta ul

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

Contenedor izquierdo

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

Contenedor derecho

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

Agregar estilos a los elementos

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

Nuestro proyecto final se deber铆a ver as铆:
image.png

隆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.

Aportes 419

Preguntas 45

Ordenar por:

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

o inicia sesi贸n.

El reto era hacer Wikipedia, pero decid铆 hacer un clon de la p谩gina de Platzi. Logr茅 hacer aproximadamente el 90 u 80% porciento del sitio original. Adem谩s algunos cambios:

Agradezo feedback

Les comparto todos los PNG de las apps del footer, s贸lo den clic en cada uno y les dar谩 la URL

Clone google con funcionalidad de busqueda con js

Si desean agregar el icono de google en la pesta帽a pueden usar

 <link rel="shortcut icon" href="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-512.png" type="image/x-icon">

Yo clon茅 una p谩gina de educaci贸n de ac谩 de Colombia, SENA SOFIA PLUS.

Este es el resultado 馃槂

yo clone el de codigo facilito me parecio un poco mas complicado

mobile

tablets

desktop

Les comparto un reto personal que hice hace un tiempo para practicar maquetaci贸n es un dibujo en css de un samsung:

Ac谩 esta el codigo : https://codepen.io/mariacch/pen/zYrwGyv 鉂わ笍

Buen curso corto de repaso de html y css.

Listo!
Me cost贸 mucho trabajo el clon de wikipedia,
pero LO LOGRE!!! 馃槂
Se aceptan criticas! 馃槃

Ahora intentar茅 con el de Wikipedia.

Mi propia versi贸n de Facebook, un toque m谩s cl谩sico.

Buenas noches compa帽eros, yo varie un poco el reto propuesto, hice la portada de la pagina de netflix, les dejo imagenes y el codigo.

//copia

//original

//codigo
https://github.com/felipeth04/Netflix-Clone
Espero se pongan creativo y terminen la parte restante, y me regalen una estrellita al repositorio. En caso de que lo usen, tampoco duden en hacer Pull Request ya que obviamente el codigo es mejorable.

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; }

El reto me cost贸 pero lo saqu茅 y en verdad estoy orgullosa, nada m谩s no supe como poner el t铆tulo con esa fuente, si alguien sabe, en verdad le agradecer铆a su aporte.

Buenas, ac谩 comparto los clones que realice:
聽聽聽
Google Clone
聽聽聽

聽聽聽
Repositorio Google Clone: https://github.com/Ulzahk/Practica-Clon-Google-Version-Escritorio
Enlace Google Clone: https://ulzahk.github.io/Practica-Clon-Google-Version-Escritorio/index.html
聽聽聽
Wikipedia Clone
聽聽聽

聽聽聽聽
Repositorio Wikipedia Clone: https://github.com/Ulzahk/Clon-Wikipedia-Version-Escritorio
Enlace Wikipedia Clone: https://ulzahk.github.io/Clon-Wikipedia-Version-Escritorio/index.html

He terminado el reto y el proyecto de clase, aqu铆 est谩n los resultados publicados en github pages
Clon de google
Clon de wikipedia

Me gust贸 el curso, corto, pr谩ctico y toca todo sobre html y css, un buen repaso la verdad. Muchas gracias y felicitaciones al equipo de Platzi.

Finalmente, proyecto fachero y sin los bugs que tra铆a antes XD
fijaos aaa

Hay juegos que nos ense帽an a manejar flexbox y grid

Lo que he estado haciendo es el clone de Youtube, me parec铆o un dise帽o bastante completo para practicar todo lo aprendido hasta ahora en la ruta de frontend

Les dejo el enlace del repositorio, no est谩 completamente terminado como quisiera pero ah铆 vamos https://github.com/Pieu11/Youtube-clone

Listo, reto completado 馃槑(Estuvo largo jeje)

No hice wikipedia, pero me dieron ganas de intentarlo con facebook, asi que este fue el resultado

CODIGO HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Facebook - Inicia sesi贸n o reg铆strate</title>
    <link rel="stylesheet" href="./css/main.css" />
  </head>
  <body>
    <main>
      <div class="main-container">
        <section class="main-logo">
          <img
            src="https://static.xx.fbcdn.net/rsrc.php/y8/r/dF5SId3UHWd.svg"
            alt="logo principal de Facebook"
          />
          <p>
            Facebook te ayuda a comunicarte y compartir con las personas que
            forman parte de tu vida.
          </p>
        </section>
        <section class="login">
          <form action="">
            <input
              class="input-email"
              type="email"
              name="email"
              id="email"
              placeholder="Correo electronico o n煤mero de tel茅fono"
            />
            <input
              class="input-password"
              type="password"
              name="password"
              id="password"
              placeholder="Contrase帽a"
            />
            <button class="button-login"><h4>Iniciar sesi贸n</h4></button>
            <a href="#">驴Olvidaste tu contrase帽a?</a>
            <div>
              <button class="button-signup"><h3>Crear cuenta nueva</h3></button>
            </div>
          </form>
        </section>
      </div>
    </main>
    <footer>
      <ul class="top">
          <li><a href="#">Espa帽ol</a></li>
        <li><a href="https://ja-jp.facebook.com/">鏃ユ湰瑾 </a></li>
        <li><a href="https://www.facebook.com/">English (US)</a></li>
        <li><a href="https://pt-br.facebook.com/">Portugu锚s (Brasil) </a></li>
        <li><a href="https://fr-fr.facebook.com/">Fran莽ais (France) </a></li>
        <li><a href="https://de-de.facebook.com/">Deutsch </a></li>
        <li><a href="https://it-it.facebook.com/">Italiano </a></li>
        <li><a href="https://ar-ar.facebook.com/">丕賱毓乇亘賷丞 </a></li>
        <li><a href="https://hi-in.facebook.com/">啶灌た啶ㄠ啶︵ </a></li>
        <li><a href="https://zh-cn.facebook.com/">涓枃(绠浣) </a></li>
        <button>+</button>
      </ul>

      <ul class="bottom">
        <li><a href="https://es-la.facebook.com/r.php">Registrarse</a></li>
        <li><a href="https://es-la.facebook.com/login/">Iniciar sesi贸n</a></li>
        <li><a href="https://es-la.messenger.com/">Messenger</a></li>
        <li><a href="https://es-la.facebook.com/lite/">Facebook Lite</a></li>
        <li><a href="https://es-la.facebook.com/watch/">Watch</a></li>
        <li><a href="https://es-la.facebook.com/directory/people/">Personas</a></li>
        <li><a href="https://es-la.facebook.com/directory/pages/">P谩ginas</a></li>
        <li><a href="https://es-la.facebook.com/pages/category/">Categorias de p谩ginas</a></li>
        <li><a href="https://es-la.facebook.com/places/">Lugares</a></li>
        <li><a href="https://es-la.facebook.com/games/">Juegos</a></li>
        <li><a href="https://es-la.facebook.com/directory/places/">Ubicaciones</a></li>
        <li><a href="https://es-la.facebook.com/marketplace/">Marketplace</a></li>
        <li><a href="https://pay.facebook.com/">Facebook Play</a></li>
        <li><a href="https://es-la.facebook.com/directory/groups/">Grupos</a></li>
        <li><a href="https://es-la.facebook.com/jobs/">Empleos</a></li>
        <li><a href="https://www.oculus.com/">Oculus</a></li>
        <li><a href="https://portal.facebook.com/">Portal</a></li>
        <li><a href="https://www.instagram.com/">Instagram</a></li>
        <li><a href="https://es-la.facebook.com/local/lists/245019872666104/">Local</a></li>
        <li><a href="https://es-la.facebook.com/fundraisers/">Recaudaciones de fondos</a></li>
        <li><a href="https://es-la.facebook.com/biz/directory/">Servicios</a></li>
        <li><a href="https://es-la.facebook.com/votinginformationcenter/?entry_point=c2l0ZQ%3D%3D">Centro de informacion de votaci贸n</a></li>
        <li><a href="https://es-la.facebook.com/facebook">Informaci贸n</a></li>
        <li><a href="https://es-la.facebook.com/ad_campaign/landing.php?placement=pflo&campaign_id=402047449186&extra_1=auto">Crear anuncio</a></li>
        <li><a href="https://es-la.facebook.com/pages/create/?ref_type=site_footer">Crear p谩gina</a></li>
        <li><a href="https://developers.facebook.com/?ref=pf">Desarrolladores</a></li>
        <li><a href="https://es-la.facebook.com/careers/?ref=pf">Empleo</a></li>
        <li><a href="https://es-la.facebook.com/privacy/explanation">privacidad</a></li>
        <li><a href="https://es-la.facebook.com/policies/cookies/">Coockies</a></li>
        <li><a href="https://es-la.facebook.com/help/568137493302217">Opciones de anuncios</a></li>
        <li><a href="https://es-la.facebook.com/policies?ref=pf">Condiciones</a></li>
        <li><a href="https://es-la.facebook.com/help/?ref=pf">Ayuda</a></li>
      </ul>
    </footer>
  </body>
</html>

CODIGO CSS

* {
box-sizing: border-box;
padding: 0;
margin: 0;
}

html {
    font-size: 62.5%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.6rem;
    background-color: #f0f2f5;
    justify-content: center;
    flex-wrap: wrap;
}

main {
    width: 100%;
    height: 57vh;
    display: flex;
    justify-content: space-between;
    margin-top: 150px;
}

.main-container {
    margin: 0 auto;
    width: 50%;
    display: flex;
    align-items: flex-start;
}

main .main-logo{
    width: 520px;
    height: 116px;
    font-size: 2.8rem;
    margin-right: 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

main .main-logo img {
    width: 300px;
    height: 106px;
}

main .main-logo p {
    margin-left: 25px;
}

main .login {
    display: flex;
    width: 396px;
    height: 360px;
    box-shadow: 1px 1px 6px 1px #0f0f0f33;
    border-radius: 5px;
}

main .login form {
    background-color: #fff;
    border-radius: 7px;
    display: flex;
    flex-wrap: wrap;
}

main .login form input {
    outline: none;
    margin: 0 auto;
    margin-top: 15px;
    width: 90%;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #dddfe2;
    padding: 10px;
}

main .login form .button-login {
    margin: 0 auto;
    margin-top: 20px;
    width: 90%;
    height: 40px;
    color: #ffff;
    font-size: 2rem;
    background-color: #3477f2;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    
}   

main .login form .button-login:hover {
    background-color: #306fe5;
}

main .login form .button-signup {
    position: relative;
    bottom: 15px;
    background-color: #42b729;
    border: none;
    border-radius: 5px;
    color: #ffff;

}

main .login form a {
    margin:  0 auto;
    text-decoration: none;
    color: #3c90f8;
}

main .login form div {
    border-top: 1px solid #dadde1;
    width: 90%;
    margin: 0 auto;
    height: 40px;
    display: flex;
    flex-wrap: wrap;
}

main .login form div button {
    margin: 0 auto;
    margin-top: 30px;
    width: 50%;
    height: 40px;
}

footer {
    width: 100%;
    height: 270px;
    position: absolute;
    bottom: 0;
    background-color: #fff;
    display: inline-block;
    flex-wrap: wrap;
}

footer .top {
    margin: 0 auto;
    list-style: none;
    font-size: 1.2rem;
    width: 50%;
    height: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

footer .top a {
    color: #9497a2;
    text-decoration: none;
    padding-right: 15px;
}

footer .top button {
    font-size: 1.4rem;
    width: 30px;
}

footer .bottom {
    text-align: center;
    border-top: 1px solid #dadde1; 
    font-size: 1.2rem;
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    list-style: none;
}

footer .bottom a {
    color: #9497a2;
    text-decoration: none;
    padding-right: 20px;
}

footer .bottom li {
    padding-top: 5px;
}

Hola compa帽eros les comparto el reto:

En este enlace les dejo m谩s info acerca del JUSTIFY-SELF igual algunas opciones las pueden probar en el inspector de elementos 馃敟馃敟馃敟

Que bestia!!!馃槺 me tomo como 4 dias enteros terminar la pagina馃槳, pero al fin lo logre, y esta casi con todos los detalles con respecto a la original馃挭馃挭
Lo que si, me quedo con un scroll horizontal y se que se puede optimizar demasiado porque me quedaron bastantes lineas de codigo en CSS


Reto cumplido
Es un poco diferente pero es responsive y bastante bonito, trate de no usar tantos divs para cuidar la semantica, repeti alguna imagenes para que fuera m谩s r谩pido el desarrollo.

Este es mi repositorio

Copia del Trial de Spotify
Nota: el bot贸n salir es porque estaba haciendo practicas con nodeJs


Quize darle un dark theme, espero que te guste 馃槂
puedes probarlo en: https://raularmas.github.io/googledarkmode/

Comparto mi resultado:

Wow, muy buen repaso del contenido del Curso de Desarrollo Web. A parte a cumplir el desaf铆o planteado para potenciar la memorizaci贸n con la pr谩ctica constante.

Listo!!! le a帽ad铆 un div para poner mi pais鈥 Ecuador =)

Decid铆 tomar el reto e intentar hacer el clon de Wikipedia con HTML y CSS. Pude hacer el header y una primera parte del main content, donde lo m谩s dif铆cil fue ordenar los distintos lenguajes alrededor del t铆pico logo de Wikipedia, pero lo hice probando por primera vez CSS Grid gracias al repositorio dejado en el sistema de comentarios por Byron Mesias Cueva. No es mucho pero es trabajo honesto jeje Nunca paren de aprender 馃挌

Un peque帽o aporte para el uso de grid-template-columns. Pueden utilizar repeat para no estar repitiendo, les paso como quedar铆a.

    grid-template-columns: repeat(2, 1fr);

Tarde como un poco m谩s de una semana; pero intente lo m谩s que se pareciera al sitio original.

https://yael-code.github.io/Wikipedia.org-CLONE/

Repositorio: https://github.com/yael-code/Wikipedia.org-CLONE

Reto Wikipedia terminado.

Se me complico mucho, siento que coloque mucho elementos a la 鈥淔uerza鈥, no se si me hago entender. Aun me falta por mejorar mucho.

https://edgardoavs.github.io/WikipediaClone/index.html

Luego de intentar e intentar muchas veces lo logr茅 馃槂

Les comparto mi reto terminado

Me tomo un rato pero finalmente pude terminar mi clon de Wikipedia, dejo repositorio de Github por si alguien quiere ver el codigo .

https://github.com/TomasNA-123/Google-Wikipedia-clone

Les comparto en enlace de mi proyecto. 馃殌
https://ernerdo-google.vercel.app/

As铆 quedo mi clon, planeo cambiar unas cositas en el footer. Pero me siento satisfecha, todo lo aprendido tiene m谩s loica cuando se aplica de inmediato.

incre铆ble proyecto me encanto el resultado el profe Diego explica muy bien pero lo que me encanto es que todo el proyecto es de una forma semantica

Reto terminado, dur茅 un poco, pero lo termin茅, aunque s茅 que todav铆a quedan cositas por mejorar

Me tomo 4 d铆as, que horror. Lo bueno de hacer el reto es que se aprende mucho m脿s.
Definitivamente hay que practicar mucho.

隆Que buen curso!

Asi me qued贸 usando flex

footer{
    width: 100%;
    height: 60px;
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    background-color: #f2f2f2;
}

footer ul{
    list-style: none;
}

footer a{
    color: #5f6368;
    margin-right: 17px;
    font-size: 14px;
}

footer .footer-right{    
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer .footer-left{
    padding: 0;
    margin-left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

que genial que poco a poco se fue practicando todo lo aprendido en cursos anteriores y se reforzaron algunas contenidos. excelente profesor

Me siento con suerte

Yo tambien lo habia hecho con grid

Solo falto cambiar el favicon

Si es que les confunde como funciona CSS Grid, CSS-Tricks tiene una gu铆a muy f谩cil de entender aqu铆

Por fin acab茅 :'v :

Clon de Wikipedia

HTML:

<!DOCTYPE html>
<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>Clon de Wikipedia</title>
    <meta name="description" content="Clon de Wikipedia">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <main>
        <section class="sectionInicio">
            <div class="sectionInicio__containerPortada">
                <h1 class="sectionInicio__containerPortada-titulo">WikipediA</h1>
                <p class="sectionInicio__containerPortada-subtitulo">La enciclopedia libre</p>
                <div class="sectionInicio__containerPortada-paises">
                    <div class="containerPortada__paises1">
                        <a>
                            <span>Espa帽ol</span>
                            <span>1 823 000+ art铆culos</span>
                        </a>
                        <a>
                            <span>鏃ユ湰瑾</span>
                            <span>1 354 000+ 瑷樹簨</span>
                        </a>
                        <a>
                            <span>Fran莽ais</span>
                            <span>2 477 000+ articles</span>
                        </a>
                        <a>
                            <span>Italiano</span>
                            <span>1 785 000+ voci</span>
                        </a>     
                        <a>
                            <span>賮丕乇爻蹖</span>
                            <span>941 000+ 賲賯丕賱賴</span>
                        </a> 
                    </div>
                    <figure>
                        <img src="./img/wikipedia-logo.png" class="sectionInicio__containerPortada-logo" alt="Logo de Wikipedia">
                    </figure>
                    <div class="containerPortada__paises2">
                        <a>
                            <span>English</span>
                            <span>6 585 000+ articles</span>
                        </a>  
                        <a>
                            <span>袪褍褋褋泻懈泄</span>
                            <span>1 875 000+ 褋褌邪褌械泄</span>
                        </a>  
                        <a>
                            <span>Deutsch</span>
                            <span>2 751 000+ Artikel</span>
                        </a>  
                        <a>
                            <span>涓枃</span>
                            <span>1 323 000+ 鏉$洰 / 姊濈洰</span>
                        </a>  
                        <a>
                            <span>Portugu锚s</span>
                            <span>1 096 000+ artigos</span>
                        </a>   
                    </div>
                </div>
            </div>
            <div class="sectionInicio__containerSearcher">
                <div class="containerSearcher-input">
                    <input type="text" class="containerSearcher-input-caja">
                    <span>ES</span>
                    <img src="./img/arrow.svg" alt="" class="containerSearcher-input-img">
                </div>                    
                <button class="sectionInicio__containerSearcher-btn">
                    <img src="./img/search-icon.png" alt="">
                </button>
            </div>
            <div class="sectionInicio__containerLeer">
                <span class="sectionInicio__containerLeer-linea"></span>
                <button class="sectionInicio__containerLeer-btn">
                    <img src="./img/language-icon.png" alt="" class="sectionInicio__containerLeer-img1">Leer Wikipedia en tu idioma 
                    <img src="./img/arrow.svg" alt="" class="sectionInicio__containerLeer-img2">
                </button>
                <span class="sectionInicio__containerLeer-linea"></span>
            </div>
        </section>
        <section class="sectionInformation">
            <div class="sectionInformation__linea">
                <span class="sectionInformation__linea-span"></span>
            </div>
            <div class="sectionInformation__contenido">
                <div class="containerAboutwiki">
                    <div class="containerAboutwiki1">
                        <img src="./img/wikimedia-icon.png" alt="" class="containerAboutwiki--img1">
                        <p class="containerAboutwiki--texto">Wikipedia es alojada por la Fundaci贸n Wikimedia, una organizaci贸n sin fines de lucro que tambi茅n alberga una gama de otros proyectos.
                        <a href="#" class="containerAboutwiki--a">Puedes apoyar nuestro trabajo con una donaci贸n.</a>
                        </p>
                    </div>
                    <div class="containerAboutwiki2">
                        <img src="./img/wikipedia-ico.png" alt="" class="containerAboutwiki--img2">
                        <div class="containerAboutwiki--informativo">
                            <p class="containerAboutwiki--titulo"><strong>Descargar Wikipedia para Android o iOS</strong></p>
                            <p class="containerAboutwiki--texto">Guarda tus art铆culos favoritos para leerlos sin conexi贸n, sincroniza tus listas de lectura en varios dispositivos y personaliza tu experiencia de lectura con la aplicaci贸n oficial de Wikipedia.
                            </p>
                            <img src="./img/google-app-icon.png" alt="" class="containerAboutwiki--a1">
                            <img src="./img/apple-app-icon.png" alt="" class="containerAboutwiki--a2">
                        </div>
                    </div>
                </div>
                <div class="containerEnlaces">
                    <a href="#" class="containerEnlacesitem">
                        <figure>
                            <img src="./img/Commons-logo.svg" alt="" class="containerEnlacesitem__img">
                        </figure>
                        <div class="containerEnlacesitem__descripcion">
                            <p class="containerEnlacesitem__titulo">Commons</p>
                            <p class="containerEnlacesitem__texto">Fotos libremente utilizables y m谩s</p>
                        </div>
                    </a>
                    <a href="#" class="containerEnlacesitem">
                        <figure>
                            <img src="./img/Wikilibros-logo.png" alt="" class="containerEnlacesitem__img">
                        </figure>
                        <div class="containerEnlacesitem__descripcion">
                            <p class="containerEnlacesitem__titulo">Wikilibros</p>
                            <p class="containerEnlacesitem__texto">Libros de contenido libre</p>
                        </div>
                    </a>
                    <a href="#" class="containerEnlacesitem">
                        <figure>
                            <img src="./img/Wikiversity-logo.png" alt="" class="containerEnlacesitem__img">
                        </figure>
                        <div class="containerEnlacesitem__descripcion">
                            <p class="containerEnlacesitem__titulo">Wikiversidad</p>
                            <p class="containerEnlacesitem__texto">Plataforma educativa libre</p>
                        </div>
                    </a>
                    <a href="#" class="containerEnlacesitem">
                        <figure>
                            <img src="./img/Wikisource-logo.png" alt="" class="containerEnlacesitem__img">
                        </figure>
                        <div class="containerEnlacesitem__descripcion">
                            <p class="containerEnlacesitem__titulo">Wikisource</p>
                            <p class="containerEnlacesitem__texto">La biblioteca libre</p>
                        </div>
                    </a>
                    <a href="#" class="containerEnlacesitem">
                        <figure>
                            <img src="./img/Wikiviajes-logo.png" alt="" class="containerEnlacesitem__img">
                        </figure>
                        <div class="containerEnlacesitem__descripcion">
                            <p class="containerEnlacesitem__titulo">Wikiviajes</p>
                            <p class="containerEnlacesitem__texto">La gu铆a de viajes libre</p>
                        </div>
                    </a>
                    <a href="#" class="containerEnlacesitem">
                        <figure>
                            <img src="./img/Wikinoticias-logo.png" alt="" class="containerEnlacesitem__img">
                        </figure>
                        <div class="containerEnlacesitem__descripcion">
                            <p class="containerEnlacesitem__titulo">Wikinoticias</p>
                            <p class="containerEnlacesitem__texto">La fuente de noticias libres</p>
                        </div>
                    </a>
                    <a href="#" class="containerEnlacesitem">
                        <figure>
                            <img src="./img/Wikiquote-logo.png" alt="" class="containerEnlacesitem__img">
                        </figure>
                        <div class="containerEnlacesitem__descripcion">
                            <p class="containerEnlacesitem__titulo">Wikiquote</p>
                            <p class="containerEnlacesitem__texto">La colecci贸n de citas</p>
                        </div>
                    </a>
                    <a href="#" class="containerEnlacesitem">
                        <figure>
                            <img src="./img/Wikispecies-logo.png" alt="" class="containerEnlacesitem__img">
                        </figure>
                        <div class="containerEnlacesitem__descripcion">
                            <p class="containerEnlacesitem__titulo">Wikispecies</p>
                            <p class="containerEnlacesitem__texto">Directorio de especies libre</p>
                        </div>
                    </a>
                    <a href="#" class="containerEnlacesitem">
                        <figure>
                            <img src="./img/Wikcionary-logo.png" alt="" class="containerEnlacesitem__img">
                        </figure>
                        <div class="containerEnlacesitem__descripcion">
                            <p class="containerEnlacesitem__titulo">Wikcionario</p>
                            <p class="containerEnlacesitem__texto">El diccionario libre</p>
                        </div>
                    </a>
                    <a href="#" class="containerEnlacesitem">
                        <figure>
                            <img src="./img/Wikidata-logo.png" alt="" class="containerEnlacesitem__img">
                        </figure>
                        <div class="containerEnlacesitem__descripcion">
                            <p class="containerEnlacesitem__titulo">Wikidata</p>
                            <p class="containerEnlacesitem__texto">Base de conocimiento libre</p>
                        </div>
                    </a>
                    <a href="#" class="containerEnlacesitem">
                        <figure>
                            <img src="./img/MediaWiki-logo.png" alt="" class="containerEnlacesitem__img">
                        </figure>
                        <div class="containerEnlacesitem__descripcion">
                            <p class="containerEnlacesitem__titulo">MediaWiki</p>
                            <p class="containerEnlacesitem__texto">Aplicaci贸n wiki libre y abierta</p>
                        </div>
                    </a>
                    <a href="#" class="containerEnlacesitem">
                        <figure>
                            <img src="./img/Meta-Wiki-logo.png" alt="" class="containerEnlacesitem__img">
                        </figure>
                        <div class="containerEnlacesitem__descripcion">
                            <p class="containerEnlacesitem__titulo">Meta-Wiki</p>
                            <p class="containerEnlacesitem__texto">Coordinaci贸n y documentaci贸n comunitaria</p>
                        </div>
                    </a>
                </div>
            </div>
        </section>
        <footer class="footer">
            <div class="footer__linea">
                <span class="footer__lineaspan"></span>
            </div>
            <div class="containerFooter">
                <p class="footer__texto">
                    Esta p谩gina est谩 disponible bajo la <a href="" class="footer__texto-a">licencia Creative Commons Atribuci贸n-CompartirIgual</a>    
                </p>
                <ul class="footer__ul">
                    <li>T茅rminos de uso</li>
                    <li>Normativa de privacidad</li>
                </ul>
            </div>
        </footer>
    </main>
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
}
html{
    font-size: 62.5%;
}
.sectionInicio{
    width: 100%;
}
.sectionInicio__containerPortada{
    width: 800px;
    margin: 40px auto 0;
    text-align: center;
}
.sectionInicio__containerPortada-titulo{
    font-size: 2.8rem;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.sectionInicio__containerPortada-subtitulo{
    font-size: 1.6rem;
}
.sectionInicio__containerPortada-paises{
    display: flex;    
    justify-content: center;
    align-items: center;
    margin-top: 15px;
}
/*Mundo Wikipedia*/
.sectionInicio__containerPortada-logo{
    width: 200px;    
    height: 195px;  
}
/*Items paises*/
.containerPortada__paises1 a,
.containerPortada__paises2 a{
    display: block;
    padding-bottom: 15px;
    width: fit-content;
}
.containerPortada__paises1 a:nth-child(1){
    padding-left: 62px;
}
.containerPortada__paises1 a:nth-child(2){
    padding-left: 38px;
}
.containerPortada__paises1 a:nth-child(3){
    padding-left: 14px;
}
.containerPortada__paises1 a:nth-child(4){
    padding-left: 51px;
}
.containerPortada__paises1 a:nth-child(5){
    padding-left: 101px;
}
.containerPortada__paises2 a:nth-child(1){
    padding-left: 0;
}
.containerPortada__paises2 a:nth-child(2){
    padding-left: 37px;
}
.containerPortada__paises2 a:nth-child(3){
    padding-left: 51px;
}
.containerPortada__paises2 a:nth-child(4){
    padding-left: 42px;
}
.containerPortada__paises2 a:nth-child(5){
    padding-left: 0;
}
.containerPortada__paises1 a span:first-child,
.containerPortada__paises2 a span:first-child{
    display: block;    
    font-size: 1.7rem;
    color: #36c;
    font-weight: bold;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    cursor: pointer;
}
.containerPortada__paises1 a span:first-child:hover,
.containerPortada__paises2 a span:first-child:hover{
    text-decoration: underline;
}
.containerPortada__paises1 a span:last-child,
.containerPortada__paises2 a span:last-child{    
    font-size: 1.4rem;
    color: black;
    font-family: Helvetica;
    font-weight: normal;
    text-decoration: none;
}
/*buscador*/
.sectionInicio__containerSearcher{
    width: 800px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
}
.containerSearcher-input{
    position: relative;
    height: 42px;
}
.containerSearcher-input-caja{
    height: 42px;
    width: 400px;
    padding: 0 0 0 12px;
    border: 1px solid #a3a9b0;
    outline: #36c;
}
.containerSearcher-input-caja:hover{
    border-color: #72777d;
}
.containerSearcher-input-caja:focus{
    border: 2px solid #36c;
}
/*ES*/
.containerSearcher-input span{
    position: absolute;
    right: 35px;    
    font-family: monospace;
    font-size: 1.5rem;
    padding: 13px 0;
}
/*鈫*/
.containerSearcher-input-img{
    position: absolute;
    right: 4px;
    width: 24px;
    padding: 10px 0;
    transform: rotate(180deg);
}
.sectionInicio__containerSearcher-btn{
    height: 46px;
    width: 60px;
    background-color: #36c;
    border: 1px solid #36c;
    cursor: pointer;
}
.sectionInicio__containerSearcher-btn:hover{
    background-color: #447ff5;
    border-color: #447ff5;
}
.sectionInicio__containerSearcher-btn img{
    height: 22px;
    width: 22px;
}
/*leer wikipedia*/
.sectionInicio__containerLeer{
    display: flex;
    justify-content: center;
    width: 800px;
    margin: auto;
    margin-top: 32px;
}
.sectionInicio__containerLeer-linea{
    border-top: 1px solid #a3a9b0;
    width: 90px;
    margin: 17px 20px 0;
}
.sectionInicio__containerLeer-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 320px;
    height: 35px;
    border: 1px solid #a3a9b0;
    background-color: #f8f9fa;
    color: #36c;
    font-weight: bold;
    font-size: 1.5rem;
}
.sectionInicio__containerLeer-btn:hover{
    background-color: #fff;
    border-color: #a2a9b1;
    cursor: pointer;
}
.sectionInicio__containerLeer-btn:focus{
    outline: 1px solid #36c;
}
.sectionInicio__containerLeer-img1{
    height: 22px;
    width: 22px;
}
.sectionInicio__containerLeer-img2{
    height: 22px;
    width: 22px;
    transform: rotate(180deg);
    color: #36c;
}
/*segunda secci贸n*/
.sectionInformation{
    width: 100%;
    margin-top: 28px;
    margin-bottom: 55px;
}
.sectionInformation__linea{
    width: 95%;
    margin: 2px auto;
}
.sectionInformation__linea-span{
    display: inline-block;
    border-top: 1px solid #a3a9b0;
    width: inherit;
}
.sectionInformation__contenido{
    display: grid;
    grid-template-columns: 1fr 2.5fr;
    grid-template-rows: 1fr;
    padding: 20px 100px;
}
 @media (max-width:1119px){
    .sectionInformation__contenido{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }
    .containerAboutwiki{
        margin-bottom: 30px;
    }
}
.containerAboutwiki{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    justify-content: center;
    align-items: center;
    width: auto;
}
.containerAboutwiki1,
.containerAboutwiki2{
    display: flex;
    gap: 12px;    
    width: 350px;
    margin: auto;
}
.containerAboutwiki--img1,
.containerAboutwiki--img2{
    width: 50px;
    height: 50px;
}
.containerAboutwiki--texto{
    margin-bottom: 20px;
}
.containerAboutwiki--texto,
.containerAboutwiki--titulo{
    font-size: 1.4rem;
    font-family: Helvetica;
    text-align: justify;
    line-height: 1.6rem;
}
.containerAboutwiki--a{
    display: block;
    color: #36c;
    text-decoration: none;
}
.containerAboutwiki--titulo{
    font-weight: bold;
    margin-bottom: 20px;
}
.containerAboutwiki--a1,
.containerAboutwiki--a2{
    cursor: pointer;
}
.containerEnlaces{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
}
.containerEnlacesitem{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    margin: 10px;
    padding-left: 10px;
}
.containerEnlacesitem:hover{
    background-color: #eaecf0;
}
.containerEnlacesitem:focus{
    outline: 1px solid #36c;
}
.containerEnlacesitem__img{
    width: 50px;
    height: 50px;
}
.containerEnlacesitem__descripcion{

}
.containerEnlacesitem__titulo,
.containerEnlacesitem__texto{
    font-size: 1.4rem;
    font-family: Helvetica;
    line-height: 1.6rem;
    color: #36c;
    
}
.containerEnlacesitem__texto{
    color: black;
}
.footer{
    width: 100%;
    margin-bottom: 18px;
}
.footer__linea{
    width: 95%;
    margin: 2px auto;
}
.footer__lineaspan{
    display: inline-block;
    border-top: 1px solid #a3a9b0;
    width: inherit;
}
.containerFooter{
    display: flex;
    justify-content: center;
    align-items: center;   
    margin-top: 15px; 
}
.footer__texto{ 
    text-align: right;
}
.footer__texto,
.footer__texto-a,
.footer__ul{
    font-size: 1.4rem;
    font-family: Helvetica;
    line-height: 1.6rem;      
}
.footer__texto-a{
    color: #36c;
    text-decoration: none;
}
.footer__ul{ 
    display: flex;
    color: #36c;
    gap: 28px;
    margin-left: 25px;
    cursor: pointer;
}
.footer__texto-a:hover,
.footer__ul li:hover{
    text-decoration: underline;
}

Resultado:

En ves de Wikipedia quise tratar de hacerlo con un perfil de Twitter, este es el resultado.

Este es mi proyecto de wikipedi:

Genial el curso! 馃槃
Les comparto mi repositorio de Clon de Google 馃槈

Hola a todos, ac谩 les comparto el ejercicio del clon de la p谩gina de Google, montada en GitHub Pages y el respositorio, y tambi茅n del reto de clonar la p谩gina de Wikipedia. El clon de Google es tal cual el que se hizo ac谩 en el curso. El clon de Wikipedia es responsive y trat茅 de clonar todas las caracter铆sticas de los componentes, media queries, layouts y estilos de cada elemento. Espero les sirva. Saludos

  1. Repositorio del Clon de Google
  2. P谩gina del Clon de Google
  3. Repositorio del Clon de Wikipedia
  4. P谩gina del Clon de Wikipedia

Mi wikiClone con responsive design:

Desk

Tablet

Movil

Codigo
HTML

<!DOCTYPE html>
<html lang="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">
        <link rel="stylesheet" href="./style.css">
        <link rel="stylesheet" href="./tabletStyle.css" media="screen and (min-width: 480px)">
        <link rel="stylesheet" href="./desktopStyle.css" media="screen and (min-width: 769px)">
        <title>WikiClone</title>
    </head>
    <body>
        <header>
            <picture class="wikiLogo">
                <img src="./img/Wikipedia-logo-v2.png" alt="Logo de wikipedia">
            </picture>
            <figure class="wikiLogo-text">
                <img src="./img/WikipediaText.svg.png" alt="Logo en texto de wikipedia">
            </figure>
        </header>
        <main>
            <section class="mainBuscador">
                <div class="mainBuscador-contenedor">
                    <label for="" class="mainBuscador-contenedor_input">
                        <input type="text">
                    </label>
                    <a href="" class="mainBuscador-contenedor_texto">
                        <span>ES 鈭</span>
                    </a>
                    <a href="" class="mainBuscador-contenedor_lupa">
                        <img src="./img/lupa-blanca.png" alt="">
                    </a>
                </div>
            </section>
            <section class="mainIdiomas">
                <div class="mainIdiomas-1">
                    <a href="">
                        <strong>English</strong>
                        <span>6 458 000+ articles</span>
                    </a>
                </div>
                <div class="mainIdiomas-2">
                    <a href="">
                        <strong>鏃ユ湰瑾</strong>
                        <span>1 314 000+ 瑷樹簨</span>
                    </a>
                </div>
                <div class="mainIdiomas-3">
                    <a href="">
                        <strong>Espa帽ol</strong>
                        <span>1 755 000+ art铆culos</span>
                    </a>
                </div>
                <div class="mainIdiomas-4">
                    <a href="">
                        <strong>袪褍褋褋泻懈泄</strong>
                        <span>1 798 000+ 褋褌邪褌械泄</span>
                    </a>
                </div>
                <div class="mainIdiomas-5">
                    <a href="">
                        <strong>Deutsch</strong>
                        <span>2 667 000+ Artikel</span>
                    </a>
                </div>
                <div class="mainIdiomas-6">
                    <a href="">
                        <strong>Fran莽ais</strong>
                        <span>2 400 000+ articles</span>
                    </a>
                </div>
                <div class="mainIdiomas-7">
                    <a href="">
                        <strong>Italiano</strong>
                        <span>1 742 000+ voci</span>
                    </a>
                </div>
                <div class="mainIdiomas-8">
                    <a href="">
                        <strong>涓枃</strong>
                        <span>1 256 000+ 鏉$洰/姊濈洰</span>
                    </a>
                </div>
                <div class="mainIdiomas-9">
                    <a href="">
                        <strong>Portugu锚s</strong>
                        <span>1 085 000+ artigos</span>
                    </a>
                </div>
                <div class="mainIdiomas-10">
                    <a href="">
                        <strong>丕賱毓乇亘賷丞</strong>
                        <span>1 159 000+ 賲賯丕賱丞</span>
                    </a>
                </div>
            </section>
            <div class="lang-list-border"></div>
            <section class="mainBoton">
                <div>
                    <button>
                        <img src="./img/translate.png" alt="">
                        <span>Leer Wikipedia en tu idioma 鈭</span>
                    </button>
                </div>
            </section>
        </main>
        <footer>
            <hr>
            <section class="footerWikiVers">
                <article class="footerWikiVers-1">
                    <div class="footerWikiVers-fundacion">
                        <img src="./img/WikimediaFoundation.jpg" alt="">
                        <div>
                            <span>Wikipedia es alojada por la Fundaci贸n Wikimedia, una organizaci贸n sin fines de lucro que tambi茅n alberga una gama de otros proyectos.</span>
                            <a href="">Puedes apoyar nuestro trabajo con una donaci贸n.</a>
                        </div>
                    </div>
                </article>
                <article class="footerWikiVers-3">
                    <div class="footerWikiVers-download">
                        <div class="footerWikiVers-download_titulo">
                            <img src="./img/w.png" alt="">
                            <strong>Descargar Wikipedia para Android o iOS</strong>    
                        </div>
                        <div class="footerWikiVers-download_titulo2">
                            <span class="footerWikiVers-download_texto">Guarda tus art铆culos favoritos para leerlos sin conexi贸n, sincroniza tus listas de lectura en varios dispositivos y personaliza tu experiencia de lectura con la aplicaci贸n oficial de Wikipedia.</span>
                            <div class="footerWikiVers-download_stores">
                                <a href="">
                                    <img src="./img/googlePlay.png" alt="">
                                </a>
                                <a href="">
                                    <img src="./img/appStore.png" alt="">
                                </a>
                            </div>
                        </div>
                    </div>
                </article>
                <article class="footerWikiVers-2">
                    <div class="footerWikiVers-wikisContainer">
                        <div class="footerWikiVers-wikis">
                            <picture class="footerWikiVers-wikis_imagen">
                                <img src="./img/commonswiki-3x.png" alt="">
                            </picture>
                            <div class="footerWikiVers-wikis_texto">
                                <a href="">Commons</a>
                                <span>Fotos libremente utilizables y m谩s</span>
                            </div>
                        </div>
                        <div class="footerWikiVers-wikis">
                            <picture class="footerWikiVers-wikis_imagen">
                                <img src="./img/Wikivoyage.png" alt="">
                            </picture>
                            <div class="footerWikiVers-wikis_texto">
                                <a href="">Wikiviajes</a>
                                <span>La gu铆a de viajes libre</span>
                            </div>
                        </div>
                        <div class="footerWikiVers-wikis">
                            <picture class="footerWikiVers-wikis_imagen">
                                <img src="./img/Wiktfavicon.png" alt="">
                            </picture>
                            <div class="footerWikiVers-wikis_texto">
                                <a href="">Wikcionario</a>
                                <span>El diccionario libre</span>
                            </div>  
                        </div>
                        <div class="footerWikiVers-wikis">
                            <picture class="footerWikiVers-wikis_imagen">
                                <img src="./img/Wikibooksg.png" alt="">
                            </picture>
                            <div class="footerWikiVers-wikis_texto">
                                <a href="">Wikilibros</a>
                                <span>Libros de contenido libre</span>
                            </div>
                        </div>
                        <div class="footerWikiVers-wikis">
                            <picture class="footerWikiVers-wikis_imagen">
                                <img src="./img/Wikinews.png" alt="">
                            </picture>
                            <div class="footerWikiVers-wikis_texto">
                                <a href="">Wikinoticias</a>
                                <span>La fuente de noticias libres</span>
                            </div>
                        </div>
                        <div class="footerWikiVers-wikis">
                            <picture class="footerWikiVers-wikis_imagen">
                                <img src="./img/Wikidata.png" alt="">
                            </picture>
                            <div class="footerWikiVers-wikis_texto">
                                <a href="">Wikidata</a>
                                <span>Base de conocimiento libre</span>
                            </div>
                        </div>
                        <div class="footerWikiVers-wikis">
                            <picture class="footerWikiVers-wikis_imagen">
                                <img src="./img/Wikiversity.png" alt="">
                            </picture>
                            <div class="footerWikiVers-wikis_texto">
                                <a href="">Wikiversidad</a>
                                <span>Plataforma educativa libre</span>
                            </div>
                        </div>
                        <div class="footerWikiVers-wikis">
                            <picture class="footerWikiVers-wikis_imagen">
                                <img src="./img/Wikiquote.png" alt="">
                            </picture>
                            <div class="footerWikiVers-wikis_texto">
                                <a href="">Wikiquote</a>
                                <span>La colecci贸n de citas</span>
                            </div>
                        </div>
                        <div class="footerWikiVers-wikis">
                            <picture class="footerWikiVers-wikis_imagen">
                                <img src="./img/MediaWiki.png" alt="">
                            </picture>
                            <div class="footerWikiVers-wikis_texto">
                                <a href="">MediaWiki</a>
                                <span>Aplicaci贸n wiki libre y abierta</span>
                            </div>
                        </div>
                        <div class="footerWikiVers-wikis">
                            <picture class="footerWikiVers-wikis_imagen">
                                <img src="./img/Wikisource.png" alt="">
                            </picture>
                            <div class="footerWikiVers-wikis_texto">
                                <a href="">Wikisource</a>
                                <span>La biblioteca libre</span>
                            </div>
                        </div>
                        <div class="footerWikiVers-wikis">
                            <picture class="footerWikiVers-wikis_imagen">
                                <img src="./img/Wikispecies.png" alt="">
                            </picture>
                            <div class="footerWikiVers-wikis_texto">
                                <a href="">Wikispecies</a>
                                <span>Directorio de especies libre</span>
                            </div>
                        </div>
                        <div class="footerWikiVers-wikis">
                            <picture class="footerWikiVers-wikis_imagen">
                                <img src="./img/Proposed.png" alt="">
                            </picture>
                            <div class="footerWikiVers-wikis_texto">
                                <a href="">Meta-Wiki</a>
                                <span>Coordinaci贸n y documentaci贸n comunitaria</span>
                            </div>
                        </div>
                    </div>
                </article>
            </section>
            <hr>
            <section class="footerList">
                <span>Esta p谩gina est谩 disponible bajo la </span>
                <a href="">licencia Creative Commons Atribuci贸n-CompartirIgual</a>
                <a href="">T茅rminos de uso</a>
                <a href="" class="footerList-3">Normativa de privacidad</a>   
            </section>
        </footer>
    </body>
</html>

CSS
Movil:

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    font-size: 62.5%;
}
body{
    font-size: 1.4rem;
    font-family: Helvetica, Arial, sans-serif;
}
img{
    width: 4rem;
    height: auto;  
}
a {
    text-decoration: none;
    cursor: pointer;
    color: #3366cc;
}
hr {
    width: 100%;
    max-width: 95%;
    margin: 0 auto;
    border: 0.1rem solid #c8ccd1;
    border-top: solid white;
    border-left: solid white;
    border-right: solid white;
    height: 0;
    
}
header{
    width: 100%;
    height: 6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4.5rem;
}
header .wikiLogo img {
    width: 5.7rem;
}
header .wikiLogo-text img {
    width: 16.5rem;
}
main{
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
main .mainBuscador{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 1.2rem;
}
main .mainBuscador-contenedor {
    border: 0.1rem #a2a9b1 solid;
    border-radius: 0.2rem;
    height: 4.4rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 1rem;
    margin-right: 1rem;
}
main .mainBuscador-contenedor_input {
    width: 100%;
}
main .mainBuscador-contenedor_input input{
    margin-left: 0.8rem;
    border: none;
    outline: none;
    width: 100%;
}
main .mainBuscador-contenedor_texto{
    padding-left: 1.1rem;
    padding-right: 1.1rem;
    width: 9rem;
    color: #686b6e;
}
main .mainBuscador-contenedor_texto span {
    padding: 0.5rem;
}
main .mainBuscador-contenedor_texto span:hover{
    background-color: #f5f5f5;
}
main .mainBuscador-contenedor_lupa {
    height: 4.4rem;
    border-radius: 0.3rem;
    background-color: #3366cc;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
}
main .mainBuscador-contenedor_lupa:hover {
    background-color: #3f7af0;
}
main .mainBuscador-contenedor_lupa img {
    width: 2.2rem;
}
main .mainIdiomas {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
main .mainIdiomas div{
    width: 33.33%;
    height: 6.4rem;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    margin-bottom: 1.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
main .mainIdiomas div a{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
main .mainIdiomas div a strong{
    margin-bottom: 0.4rem;
}
main .mainIdiomas div a span{
    text-align: center;
    color: #686b6e;
    align-self: center;
}
main .mainIdiomas div a:hover {
    background-color: #f5f5f5;
}
main .mainBoton{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 4rem;
    margin-top: 3.5rem;
}
main .mainBoton div{
    display: block;
    position: absolute;
}
main .mainBoton button  {
    width: 27.6rem;
    height: 3.6rem;
    background-color: #f8f9fa;
    border: 0.1rem #a2a9b1 solid;
    border-radius: 0.2rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
main .mainBoton button:hover {
    background-color: white;
}
main .mainBoton button img {
    width: 2.2rem;
}
main .mainBoton button span {
    font-weight: bold;
    color: #3366cc;
    padding-left: 0.6rem;
}
main .lang-list-border{
    background-color: #c8ccd1;
    height: 0.1rem;
    width: 80%;
    max-width: 460px;
    margin: -1.6rem auto 1.6rem;
    display: block;
    position: relative;
    top: 5.2rem;
}
footer .footerWikiVers {
    display: flex;
    flex-wrap: wrap;
    padding: 1rem;
}
footer .footerWikiVers article {
    display: flex;
    flex-wrap: wrap;
}
footer .footerWikiVers .footerWikiVers-1{
    order: 1;
}
footer .footerWikiVers .footerWikiVers-3{
    order: 3;
}
footer .footerWikiVers .footerWikiVers-2{
    order: 2;
}
footer .footerWikiVers .footerWikiVers-fundacion {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
footer .footerWikiVers .footerWikiVers-fundacion img{
    width: 4.2rem;
    margin-bottom: 1.3rem;
}
footer .footerWikiVers .footerWikiVers-fundacion a{
    margin-bottom: 3rem;
}
footer .footerWikiVers span{
    color: #686b6e;
    font-size: 1.3rem;
}
footer .footerWikiVers .footerWikiVers-wikisContainer {
    display: flex;
    flex-wrap: wrap;
}
footer .footerWikiVers .footerWikiVers-wikis {
    width: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 1rem; 
    cursor: pointer;
}
footer .footerWikiVers .footerWikiVers-wikis:hover{
    background-color: #f5f5f5;
}
footer .footerWikiVers .footerWikiVers-wikis .footerWikiVers-wikis_imagen{
    width: 5.7rem;
}
footer .footerWikiVers .footerWikiVers-wikis .footerWikiVers-wikis_imagen img {
    width: 4.7rem;
    margin-right: 1rem;
}
footer .footerWikiVers .footerWikiVers-wikis .footerWikiVers-wikis_texto{
    display: flex;
    flex-direction: column;
}
footer .footerWikiVers .footerWikiVers-wikis .footerWikiVers-wikis_texto a{
    margin-bottom: 0.5rem;
}
footer .footerWikiVers .footerWikiVers-download {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    text-align: center;
}
footer .footerWikiVers .footerWikiVers-download .footerWikiVers-download_titulo {
    display: flex;
    justify-items: center;
    align-items: center;
    margin-bottom: 1.5rem;
}
footer .footerWikiVers .footerWikiVers-download .footerWikiVers-download_titulo img {
    width: 2.5rem;
    margin-right: 1rem;
}
footer .footerWikiVers .footerWikiVers-download .footerWikiVers-download_titulo strong {
    color: #686b6e;
}
footer .footerWikiVers .footerWikiVers-download .footerWikiVers-download_texto {
    margin-top: 1.3rem;
    margin-bottom: 1.3rem;
}
footer .footerWikiVers .footerWikiVers-download .footerWikiVers-download_stores {
    margin-bottom: 4rem;
    margin-top: 2rem;
}
footer .footerWikiVers .footerWikiVers-download .footerWikiVers-download_stores a img{
    height: 3.8rem;
    width: auto;
}
footer .footerList {
    margin: 1.5rem .5rem 1.4rem .6rem;
    text-align: center;
}
footer .footerList a::after {
    margin-left: 0.8rem;
    margin-right: 0.5rem;
    content: "鈥";
    color: #686b6e;
}
footer .footerList .footerList-3::after {
    content: none;
}

Tablet:


header .wikiLogo-text {
    display: block;
    position: absolute;
}
header .wikiLogo {
    display: block;
    position: relative;
    top: 19.2rem;
}
header .wikiLogo img{
    width: 20rem;
}

main {
    max-width: 540px;
    margin: 0 auto;
}
main .mainIdiomas{
    order: 1;
}
main .mainBuscador{
    order: 2;
    max-width: 43rem;
    margin: 0 auto;
    margin-top: 1.5rem;
}
main .lang-list-border{
    order: 3;
}
main .mainBoton{
    order: 4;
}

main .mainIdiomas div{
    width: 50%;
    margin-bottom: 0rem;
}
main .mainIdiomas .mainIdiomas-3 {
    justify-content: flex-start;
    padding-left: 2.6rem;
}
main .mainIdiomas .mainIdiomas-5 {
    justify-content: flex-start;
}
main .mainIdiomas .mainIdiomas-7 {
    justify-content: flex-start;
    padding-left: 2.6rem;
}
main .mainIdiomas .mainIdiomas-4 {
    justify-content: flex-end;
    padding-right: 2.6rem;
}
main .mainIdiomas .mainIdiomas-6 {
    justify-content: flex-end;
}
main .mainIdiomas .mainIdiomas-8 {
    justify-content: flex-end;
    padding-right: 2.6rem;
}
footer .footerWikiVers .footerWikiVers-wikis {
    width: 33.33%;
    
}

Desk:

footer .footerWikiVers{
    display: block;
}
footer .footerWikiVers .footerWikiVers-1{
    width: 30%;
    float: left;
    clear: left;
}
footer .footerWikiVers .footerWikiVers-3{
    width: 30%;  
    float: left;
    clear: left;
}
footer .footerWikiVers .footerWikiVers-2{
    width: 70%;
}
footer .footerWikiVers .footerWikiVers-wikisContainer{
    margin-left: 2rem;
}
footer .footerWikiVers .footerWikiVers-fundacion{
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 1rem;
}
footer .footerWikiVers .footerWikiVers-fundacion div {
    text-align: start;
}
footer .footerWikiVers .footerWikiVers-fundacion img {
    margin-right: 1rem;
}
footer .footerWikiVers .footerWikiVers-download {
    align-items: flex-start;
    text-align: start;
}
footer .footerWikiVers .footerWikiVers-download .footerWikiVers-download_titulo img{
    width: 3.5rem;
    margin-right: 1.7rem;
}
footer .footerWikiVers .footerWikiVers-download .footerWikiVers-download_titulo2 {
    padding-left: 5.2rem;
}

Bueno yo lo personalic茅 un poco jeje

Reto terminado, estoy super feliz de haberlo logrado, s茅 que en un futuro lo ver茅 y dir茅 wow, qu茅 feo est谩 este c贸digo, jejeje, pero por ahora es trabajo honesto y estoy orgullosa de ello.
Se los comparto por aqu铆!

https://lizzquintero.github.io/clone_wikipedia/

y aqu铆 encuentran el repositorio, luego lo har茅 en responsive design.

https://github.com/LizzQuintero/clone_wikipedia

Asi quedo mi versi贸n de wikipedia. no la hice responsive, e intente acercarme lo mas posible a la version original. tiene bastantes errores y me llevo dos dias en hacerlo. ahora con el curso que sigue de mobil first voy a volver a hacerla para que quede 100% responsive y subirlo a github

Tambien se me complico mucho para no usar muchos div lo cual no encontre la forma de solucionarlo

Asi y todo, muy contento con mi resultado y lo esperado del curso

Mi trabajo humilde 馃槃

Listo.
Pueden ver mis otros proyectos en https://leodexe.github.io

Para que puedan realizar otros proyectos para su portafolio https://platzi.com/blog/5-proyectos-para-tu-portafolio-como-frontend-developer/

Listo!! Ahora vamos con el clon de Wikipedia

Les comparto mi version del clon de la pagina de google en modo nocturno-

Despu茅s de m谩s de 2 d铆as鈥

Un lindo desaf铆o que puso a prueba los conocimientos adquiridos en el curso. Para poder completarlo tuve que buscar informaci贸n, pero pude hacerlo!!

Da mucha satisfacci贸n poder avanzar en los cursos.

Mi aporte en modo oscuro

Reto completado.
Me costo bastante realizarlo, aqu铆 se los comparto.

Me cost贸 lo suyo, pero aqu铆 est谩. mi Clonepedia, hecho con media queries para que sea totalmente responsive 馃槢

En desktop

Para tablets:

para m贸viles:

html:

<!DOCTYPE html>
<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>Wikipedia</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="./tablet.css" media="screen and (min-width: 480px)">
    <link rel="stylesheet" href="./desktop.css" media="screen and (min-width: 770px)">
    <link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/7/75/Wikipedia_mobile_app_logo.png" type="image/x-icon">
    <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=EB+Garamond&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <figure>
                <img src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png" alt="">
        </figure>
        <h1>  
            <span class="title-logo">WIKIPEDIA</span>
            <span class="subtitle-logo">La enciclopedia libre</span>
        </h1>
    </header>
    <main>
        <section class="languages">
            <div class="spanish mark">
                <a href="">
                <strong>Espa帽ol</strong>
                <div>
                    <span>1 717 00+</span> 
                    <span>art铆culos</span>                    
                </div>
                </a>
            </div>
            <div class="ingles  mark">
                <a href="">
                    <strong>English</strong>
                    <div>
                        <span>6 383 000+</span>
                        <span>articles</span>                        
                    </div>
                </a>
            </div>
            <div class="chino  mark">
                <a href="">
                    <strong>鏃ユ湰瑾</strong>
                    <div>
                        <span>1 292 000+</span>
                        <span>瑷樹簨</span>                        
                    </div>
                </a>
            </div>    
            <div class="ruso  mark">
                <a href="">
                    <strong>袪褍褋褋泻懈泄</strong>
                    <div>
                        <span>1 756 000+</span>
                        <span>褋褌邪褌械泄</span>                        
                    </div>
                </a>
            </div>
            <div class="aleman  mark">
                <a href="">
                    <strong>Deutsch</strong>
                    <div>
                        <span>2 617 000+</span>
                        <span>Artikel</span>                        
                    </div>
                </a>
            </div>
            <div class="frances  mark">
                <a href="">
                    <strong>Fran莽ais</strong>
                    <div>
                        <span>2 362 000+</span>
                        <span>articles</span>                        
                    </div>

                </a>
            </div>            
            <div class="japones  mark">
                <a href="">
                    <strong>涓枃</strong>
                    <div>
                        <span>1 231 000+</span>
                        <span>姊濈洰</span>                        
                    </div>

                </a>
            </div>
            <div class="italiano  mark">
                <a href="">
                    <strong>Italiano</strong>
                    <div>
                        <span>1 718 000+</span>
                        <span>voci</span>                        
                    </div>

                </a>
            </div>            
            <div class="portugues  mark">
                <a href="">
                    <strong>Portugu锚s</strong>
                    <div>
                        <span>1 074 000+</span>
                        <span>artigos</span>                        
                    </div>
                </a>
            </div>
            <div class="polski mark">
                <a href="">
                    <strong>Polski</strong>
                    <div>
                        <span>1 490 000</span>
                        <span>hase艂</span>                        
                    </div>
                </a>
            </div>
        </section>
        <section class="searchbar">
            <div class="search-rectangle">
                <label for="">
                    <input type="text" name="" id="">
                    <select name="" id="">
                        <option value="es">ES</option>
                        <option value="en">EN</option>
                        <option value="jp">涓枃</option>
                    </select>
                </label>
            </div>
            
                <div class="search-icon">
                    <svg x="0px" y="0px"
                        width="22" height="22"
                        viewBox="0 0 30 30"
                        style=" fill:#ffffff;"><path d="M 13 3 C 7.4889971 3 3 7.4889971 3 13 C 3 18.511003 7.4889971 23 13 23 C 15.396508 23 17.597385 22.148986 19.322266 20.736328 L 25.292969 26.707031 A 1.0001 1.0001 0 1 0 26.707031 25.292969 L 20.736328 19.322266 C 22.148986 17.597385 23 15.396508 23 13 C 23 7.4889971 18.511003 3 13 3 z M 13 5 C 17.430123 5 21 8.5698774 21 13 C 21 17.430123 17.430123 21 13 21 C 8.5698774 21 5 17.430123 5 13 C 5 8.5698774 8.5698774 5 13 5 z"></path>
                    </svg>
            </div>
        </section>
        <section class="language-read">
            <div class="container-border">
                <button class="lang-conainertext">
                <span><svg x="0px" y="0px"
                    width="2.2rem" height="2.2rem"
                    viewBox="0 0 50 50"
                    style=" fill:#5c98d6;"><path d="M 6 3 C 4.300781 3 3 4.300781 3 6 L 3 26 C 3 27.699219 4.300781 29 6 29 L 6.40625 29 L 8 27 L 6 27 C 5.398438 27 5 26.601563 5 26 L 5 6 C 5 5.398438 5.398438 5 6 5 L 26 5 C 26.601563 5 27 5.398438 27 6 L 27 21 L 24 21 C 22.300781 21 21 22.300781 21 24 L 21 27 L 16 27 L 17.59375 29 L 21 29 L 21 32.40625 L 23 34.09375 L 23 24 C 23 23.398438 23.398438 23 24 23 L 44 23 C 44.601563 23 45 23.398438 45 24 L 45 44 C 45 44.601563 44.601563 45 44 45 L 24 45 C 23.398438 45 23 44.601563 23 44 L 23 42 L 21 43.6875 L 21 44 C 21 45.699219 22.300781 47 24 47 L 44 47 C 45.699219 47 47 45.699219 47 44 L 47 24 C 47 22.300781 45.699219 21 44 21 L 29 21 L 29 6 C 29 4.300781 27.699219 3 26 3 Z M 16 8 L 16 10 L 8 10 L 8 12 L 19.90625 12 C 19.597656 14.226563 18.292969 16.054688 16.65625 17.53125 C 14.148438 15.332031 12.875 13.03125 12.875 13.03125 L 11.125 13.96875 C 11.125 13.96875 12.433594 16.378906 15.0625 18.78125 C 14.996094 18.828125 14.941406 18.890625 14.875 18.9375 C 12.234375 20.757813 9.59375 21.65625 9.59375 21.65625 L 10.21875 23.5625 C 10.21875 23.5625 13.125 22.597656 16.03125 20.59375 C 16.238281 20.449219 16.449219 20.28125 16.65625 20.125 C 17.796875 20.96875 19.125 21.742188 20.625 22.34375 L 21.375 20.46875 C 20.226563 20.011719 19.199219 19.417969 18.28125 18.78125 C 20.109375 17.050781 21.636719 14.792969 21.9375 12 L 25 12 L 25 10 L 18 10 L 18 8 Z M 12 25 L 7 31 L 10 31 L 10 35 L 14 35 L 14 31 L 17 31 Z M 33 26.40625 L 27.8125 40.1875 L 30.3125 40.1875 L 31.40625 37 L 36.6875 37 L 37.8125 40.1875 L 40.3125 40.1875 L 35.09375 26.40625 Z M 34 29.40625 L 36 35.09375 L 32 35.09375 Z M 19 33 L 19 36 L 10 36 L 14 40 L 19 40 L 19 43 L 25 38 Z"></path></svg></span>
                <span>Leer Wikipedia en tu idioma</span>
                <span><img src="https://img.icons8.com/material-outlined/24/4a90e2/expand-arrow--v1.png"/></span>
                </button>
            </div>
        </section>
        <hr class="separator1">
        <section class="bottom-page">
            <div class="wikigroup-title">
                <figure><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Wikimedia_logo_white.svg/1024px-Wikimedia_logo_white.svg.png" alt=""></figure>
                <div class="wikigroup-title_info">
                    <div>Wikipedia es alojada por la Fundaci贸n Wikimedia, una organizaci贸n sin fines de lucro que tambi茅n alberga una gama de otros proyectos.</div> 
                    <div><a style="color: #5c98d6;" href="">Usted puede apoyar nuestro trabajo con una donaci贸n.</a></div>                    
                </div>

            </div>
            <div class="wikigroup-buttons">
                <a href="">
                    <div class="apps commons">
                        <div><img style="width: 4.7rem; height: 4.7rem;" src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Commons-logo.svg" alt=""></div>
                        <div class="apps-title">
                            <span style="color: #5c98d6;">Commons</span> 
                            <span style="color: #b0a99f;">Fotos libremente utilizables y m谩s</span>
                        </div>
                    </div>
                </a>
                <a href="">
                    <div class="apps wikiviajes">
                        <div><img style="width: 3.6rem;height: 3.6rem;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Wikivoyage-Logo-v3-icon.svg/1024px-Wikivoyage-Logo-v3-icon.svg.png" alt=""></div>
                        <div class="apps-title">
                            <span style="color: #5c98d6;">Wikiviajes</span>
                            <span style="color: #b0a99f;">La gu铆a de viajes libre</span>
                        </div>
                    </div>
                </a>
                <a href="">
                    <div class="apps wikciionario">
                        <div><img style="width: 3.7rem;height: 3.7rem;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Wiktfavicon_en.svg/1024px-Wiktfavicon_en.svg.png" alt=""></div>
                        <div class="apps-title">
                            <span  style="color: #5c98d6;">Wikcionario</span>
                            <span style="color: #b0a99f;">El diccionario libre</span>
                        </div>
                    </div>
                </a>
                <a href="">
                    <div class="apps wikilibros">
                        <div><img style="width: 3.6rem;height: 3.6rem;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Wikibooks-logo.svg/1200px-Wikibooks-logo.svg.png" alt=""></div>
                        <div class="apps-title">
                            <span style="color: #5c98d6;">Wikilibros</span>
                            <span style="color: #b0a99f;">Libros de contenido libre</span>
                        </div>
                    </div>
                </a>                
                <a href="">
                    <div class="apps wikinoticias">
                        <div><img style="width: 4.7rem;height: 2.6rem;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Wikinews-logo.svg/1200px-Wikinews-logo.svg.png" alt=""></div>
                        <div class="apps-title">
                            <span style="color: #5c98d6;">Wikinoticias</span>
                            <span style="color: #b0a99f;">La fuente de noticias libres</span>
                        </div>
                    </div>
                </a>
                <a href="">
                    <div class="apps wikidata">
                        <div><img style="width: 4.9rem;height: 4.9rem;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Notification-icon-Wikidata-logo.svg/1200px-Notification-icon-Wikidata-logo.svg.png" alt=""></div>
                        <div class="apps-title">
                            <span style="color: #5c98d6;">Wikidata</span>
                            <span style="color: #b0a99f;">Base de conocimiento libre</span>
                        </div>
                    </div>
                </a>
                <a href="">
                    <div class="apps wikiversidad">
                        <div><img style="width: 4.3rem;height: 3.7rem;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Wikiversity_logo_2017.svg/1200px-Wikiversity_logo_2017.svg.png" alt=""></div>
                        <div class="apps-title">
                            <span style="color: #5c98d6;">Wikiversidad</span>
                            <span style="color: #b0a99f;">Plataforma educativa libre</span>
                        </div>
                    </div>
                </a>
                <a href="">
                    <div class="apps wikiquote">
                        <div><img style="width: 4.2rem;height: 4.2rem;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Notification-icon-Wikiquote.svg/1200px-Notification-icon-Wikiquote.svg.png" alt=""></div>
                        <div class="apps-title">
                            <span style="color: #5c98d6;">Wikiquote</span>
                            <span style="color: #b0a99f;">La colecci贸n de citas</span>
                        </div>
                    </div>
                </a>
                <a href="">
                    <div class="apps mediawiki">
                        <div><img style="width: 4.2rem;height: 4.2rem;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/MediaWiki-2020-large-icon.svg/222px-MediaWiki-2020-large-icon.svg.png" alt=""></div>
                        <div class="apps-title">
                            <span style="color: #5c98d6;">MediaWiki</span>
                            <span style="color: #b0a99f;">Aplicaci贸n wiki libre y abierta</span>
                        </div>
                    </div>
                </a>
                <a href="">
                    <div class="apps wikisource">
                        <div><img style="width: 3.9rem;height: 3.9rem;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Wikisource-logo.svg/1200px-Wikisource-logo.svg.png" alt=""></div>
                        <div class="apps-title">
                            <span style="color: #5c98d6;">Wikisource</span>
                            <span style="color: #b0a99f;">La biblioteca libre</span>
                        </div>
                    </div>
                </a>
                <a href="">
                    <div class="apps wikispecies">
                        <div><img style="width: 4.2rem;height: 4.2rem;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Wikispecies-logo.svg/1200px-Wikispecies-logo.svg.png" alt=""></div>
                        <div class="apps-title">
                            <span style="color: #5c98d6;">Wikispecies</span>
                            <span style="color: #b0a99f;">Directorio de especies libre</span>
                        </div>
                    </div>
                </a>
                <a href="">
                    <div class="apps metawiki">
                        <div><img style="width: 3.7rem;height: 3.7rem;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Meta-Wiki_Proposed_logo.svg/1200px-Meta-Wiki_Proposed_logo.svg.png" alt=""></div>
                        <div class="apps-title">
                            <span style="color: #5c98d6;">Meta-Wiki</span>
                            <span style="color: #b0a99f;">Coordinaci贸n y documentaci贸n comunitaria</span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="mobile-dowload">
                <div class="mobiletitle"><img src="https://upload.wikimedia.org/wikipedia/commons/7/75/Wikipedia_mobile_app_logo.png" alt="">
                <strong>Descargar Wikipedia para Android o iOS</strong></div>
                <p>Guarda tus art铆culos favoritos para leerlos sin conexi贸n, sincroniza tus listas de lectura en varios dispositivos y personaliza tu experiencia de lectura con la aplicaci贸n oficial de Wikipedia.</p>
                <ul>
                    <li><a href="https://play.google.com/store/apps/details?id=org.wikipedia&referrer=utm_source%3Dportal%26utm_medium%3Dbutton%26anid%3Dadmob"><figure class="shop-icon"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Google_Play_Store_badge_EN.svg/512px-Google_Play_Store_badge_EN.svg.png" alt=""></figure></a></li>
                    <li><a href="https://itunes.apple.com/app/apple-store/id324715238?pt=208305&ct=portal&mt=8"><figure class="shop-icon"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Download_on_the_App_Store_Badge.svg/135px-Download_on_the_App_Store_Badge.svg.png" alt=""></figure></a></li>
                </ul>
            </div>
        </section>
    </main>
    <hr>
    <footer>
        <div>
            Esta p谩gina est谩 disponible bajo la
                <a href="">licencia Creative Commons Atribuci贸n-CompartirIgual</a>
                <a href="">T茅rminos de uso</a>
                <a href="">Normativa de privacidad</a>
            </ul>
        </div>
    </footer>
</body>
</html>

CSS (el principal para moviles)

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html{
    font-size: 62.5%;
}

body{
    background-color: #181a1b;
    color: #b0a99f;
    display: flex;
    flex-direction: column;
    margin: .4rem 0 1.6rem 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

ul{
    list-style: none;
}

a{
    color: white;
    text-decoration: none;
}

img{
    width: 100%;
}

hr{
    border-bottom: 0.1rem solid;
    border-color:#535c61 ;
    margin: .26rem 1.3rem;
}

/* header */

header{
    margin-top: 2rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

header figure{
    width: 5.2rem;
    position: relative;
}

header h1{
    margin-left: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'EB Garamond', serif;
    font-weight: normal;
    font-size: 1.4rem;
    color: white;
    position: relative;
}

header h1 .title-logo{
    font-size: 2.2rem;
}

header h1 .title-logo::first-letter{
    font-size: 3.2rem;
}

header h1 .subtitle-logo{
    position: relative;
    bottom: .9rem;
    left: .3rem;
}

/* contenido */

main{
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* menu de lenguajes */

.languages{
    order:2;
    display: grid;
    grid-template-columns: auto auto auto;
}

.mark{
    padding: 0 1.6rem;
    margin-bottom: 1.6rem;
}

.mark a{
    display: flex;
    flex-direction: column;
    text-align: center;
}

.mark a div{
    display: flex;
    flex-direction: column;
    text-align: center;
}

.mark:hover{
    background-color: #222526;
}

.mark a strong{
    font-size: 1.4rem;
    color: #5c98d6;
}

.mark a span{
    font-size: 1.3rem;
    color: #b0a99f;
}

/* control de busqueda */

.searchbar{
    order: 1;
    margin: 1rem;
    display: flex;
    justify-content: center;
}

.searchbar .search-rectangle{
    border: solid #484e51 ;
    border-width: .1rem 0 .1rem .1rem;
    padding: .8rem;
    width: 100%;
}

.searchbar .search-rectangle:hover{
    border: #655d53 solid;
    border-width: .1rem 0 .1rem .1rem;;
}

.searchbar .search-rectangle:focus-within{
    border: rgb(36, 71, 143) .1rem solid;
}

.searchbar .search-rectangle label{
    display: flex;
    justify-content: space-between;    
}

.searchbar .search-rectangle select{
    color: white;
    background-color: #181a1b;
    border: none;
}

.searchbar .search-rectangle input{
    color: white;
    background-color: #181a1b;
    border: none;
    height: 2.4rem;
    outline: none;
    flex-grow: 1;
    margin-right: 1rem;
}

.search-icon{
    width: 5.6rem;
    height: 4.2rem;
    background-color: #2952a3;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.search-icon:hover{
    background-color: #093ba1;
}

.language-read{
    order: 3;
    margin: 1rem;
    display: flex;
    justify-content: center;
}

.container-border{
    background-color: #303436;
    padding: 2rem;
    border-radius: 2rem;
    width: 30rem;
}

.lang-conainertext{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: .6rem 1.2rem;
    border: .1rem #484e51 solid;
    background-color: #1b1e1f;
    color: #5c98d6;
    font-weight: bold;
    cursor: pointer;
}

.lang-conainertext:hover{
    background-color: rgba(0, 0, 0, 0.514);
}

/* otras wikis */

.bottom-page{
    order: 5;
    margin: .96rem .64rem 1.28rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.3rem;
}
.bottom-page .wikigroup-title figure{
    width: 4.2rem;
    margin: 0 auto 1.2rem auto;
}

.bottom-page .wikigroup-title div{
    text-align: center;
}

.wikigroup-buttons{
    display: grid;
    grid-template-columns: auto auto;
    margin:2rem 0
}

.wikigroup-buttons a .apps{
    display: flex;
    padding: 1.3rem;
    align-items: center;
}

.wikigroup-buttons a .apps .apps-title{
    display: flex;
    flex-direction: column;
    font-size: 1.3rem;
}

.wikigroup-buttons a .apps:hover{
    background-color: #222526;
}

.wikigroup-buttons .apps img{
    margin-right: 1rem;
}

.apps:hover{
background-color: #222526 ;
}


.mobile-dowload{
    background-color: #1b1e1f;
    padding: 1rem;
}

.mobile-dowload .mobiletitle{
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-dowload .mobiletitle img{
    width: 2.9rem;
    margin-right: .5rem;
    border-radius: .5rem;
}

.mobile-dowload p{
    text-align: center;
    margin: 1.3rem 0;
}

.mobile-dowload ul{
    display: flex;
    width: 100%;
    justify-content: center;
}

.shop-icon{
    width: 12.4rem;
    margin: 1rem;
}

.separator1{
    order: 4;
}

/* footer */

footer{
    width: 100%;
    font-size: 1.3rem;
    padding: 1.4rem;
}

footer div{
    text-align: center;
}

footer div a{
    color: #4f94e2;
}

footer div a::after{
    content: "鈥";
    color: rgb(128, 128, 128);
    padding: .8rem;
}

footer div a :nth-child(3)::after{
    content: none;
}

footer div a:hover{
    text-decoration: underline;
    color: #4f94e2;
}

El CSS para tablets

header{
    margin-top: 4rem;
}

header h1 .title-logo{
    font-size: 2.6rem;
}

header h1 .title-logo::first-letter{
    font-size: 3.6rem;
}

header h1 .subtitle-logo{
    font-size: 1.5rem;
}

header figure{
    position: absolute;
    width: 20rem;
    margin: 0 auto;
    top: 17rem;
}

.languages{
    grid-template-columns: auto auto;
    height: 32.5rem;
    margin: 0 auto;
    max-width: 54.6rem;
}

.mark{
    position: relative;
    top: 0;
}

.mark a div{
    flex-direction: row;

}

.mark a div span{
    margin:0 .2rem        
}

.spanish{
    right: 35%;
}

.chino{
    right: 68%;
}

.aleman{
    right:75%;
}

.japones{
    right: 68%;
}

.portugues{
    right: 35%;
}

.ingles{
    left: 35%;
}

.ruso{
    left: 68%;
}

.frances{
    left:75%;
}

.italiano{
    left: 68%;
}

.polski{
    left: 35%;
}

.searchbar{
    order: 2;
}
.search-rectangle{
    max-width: 39rem;
}

.wikigroup-buttons{
    display: grid;
    grid-template-columns: auto auto auto;
}

Y por ultimo para PC

.bottom-page{
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    justify-content: center;
    padding: 4.16rem 0 1.28rem 1.28rem;
    position: relative;
    width: 99%;
}



.bottom-page .wikigroup-title{
    order: 1;
    max-width: 35rem;
    margin-right: 10%
}

.bottom-page .mobile-dowload{
    order: 2;
    grid-row: 2 / 2;
    max-width: 35rem;
    margin-right: 10%;
}

.bottom-page .wikigroup-buttons{
    order: 3;
    grid-column: 2/ 3;
    grid-row: 1 / 3;
    position: relative;
    
}

.bottom-page .mobile-dowload{
    position: relative;
    right: 1rem;

}

.bottom-page .mobile-dowload .mobiletitle{
    justify-content: start;
}

.bottom-page .mobile-dowload div img{
    width: 4.2rem;
    height: 4.2rem;
    text-align: start;        
}

.bottom-page .wikigroup-title{
    display: flex;
    margin-bottom: 3.2rem;
}

.bottom-page .wikigroup-title figure img{
    width: 4.2rem;
    height: 4.2rem;
}

.bottom-page .wikigroup-title .wikigroup-title_info div{
    text-align: start;
    margin-left: 1rem;
}

.mobile-dowload p{
    padding-left: 5rem;
    text-align: start;
}

.mobile-dowload ul{
    display: flex;
    flex-wrap: wrap;
}

Se logro!

increible curso me ayudo a practicar con los conocimientos que ya tenia y ahora solo falta hacer el reto de wikipedia

seguimos las indicaciones del profe y ac谩 estamos finalizando el curso, con el gusto de saber que hice una muy buena practica de mis habilidades.

Aca dejo el github鈥 no me gusto como quedo la barra de busqueda https://github.com/edumoyano86/wikipediaClon

Clone de Google terminado!

隆Reto completado!
No estaba aplicando el principio de mobile first, cuando me enter茅 ya era muy tarde, y pr谩cticamente inescalable. xD
Entonces, aqu铆 dejo mi reto en modo Desktop:

Live preview: https://angelnewgate.github.io/wiki-clone-desktop/
Repositorio: https://github.com/angelNewgate/wiki-clone-desktop

Falt贸 agregar que los subrayados en efecto hover. en el men煤 principal y en el footer.


header ul li a:hover {
    text-decoration: underline;
}
.footer-container__left ul li a:hover {
    text-decoration: underline;
}

.footer-container__right ul li a:hover {
    text-decoration: underline;

Hola se帽oras y se帽ores, acabo de terminar el con de Wikipedia 鈥渕e tom贸 3 dias鈥 desde su versi贸n m贸vil hasta la de escritorio. Clon茅 ma mayoria de detalles 鈥渃reo鈥 aunque no pude adaptar algunos T-T como el focus en el input de busqueda ya que en la construcci贸n del boton habria que hacerla de otra manera para que funcionala o eso pienso 馃槮

he aqu铆 mi humilde repositorio en Github.

Aqu铆 est谩 en GitHub Pages

MOBILE

TABLET

DESKTOP

Reto Wikipedia:

  • HTML
<!DOCTYPE html>
<html lang="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>Wikipedia Clon</title>
    <link rel="stylesheet" href="./main.css">
</head>
<body>
    <header>
        <section class="header-logo1">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Wikipedia-logo-textonly.svg/1200px-Wikipedia-logo-textonly.svg.png" alt="">
        </section>
        <section class="header-logo2">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Wikipedia-logo-v2.svg/1200px-Wikipedia-logo-v2.svg.png" alt="">
        </section>
    </header>
    <main>
        <div class="main-idiomas">
            <section>
                <div class="main-idioma01" href="">
                    <a href="">Espa帽ol</a>
                    <span>1 696 000+ art铆culos</span>
                </div>
                <div class="main-idioma03" href="">
                    <a href="">鏃ユ湰瑾</a>
                    <span>1 275 000 + 瑷樹簨</span>
                </div>
                <div class="main-idioma05" href="">
                    <a href="">袪褍褋褋泻懈泄</a>
                    <span>1 734 000+ 褋褌邪褌械泄</span>
                </div>
                <div class="main-idioma07" href="">
                    <a href="">涓枃</a>
                    <span>1 206 000+ 姊濈洰</span>
                </div>
                <div class="main-idioma09" href="">
                    <a href="">Portugu锚s</a>
                    <span>1 066 000+ artigos</span>
                </div>
            </section>
            <section>
                <div class="main-idioma02" href="">
                    <a href="">English</a>
                    <span>6 326 000+ articles</span>
                </div>
                <div class="main-idioma04" href="">
                    <a href="">Deutsch</a>
                    <span>2 590 000+ Artikel</span>
                </div>
                <div class="main-idioma06" href="">
                    <a href="">Fran莽ais</a>
                    <span>2 340 000+ articles</span>
                </div>
                <div class="main-idioma08" href="">
                    <a href="">Italiano</a>
                    <span>1 701 000+ voci</span>
                </div>
                <div class="main-idioma10" href="">
                    <a href="">Polski</a>
                    <span>1 480 000+ hase艂</span>
                </div>
            </section>
        </div>
        <div class="main-buscar">
            <div class="main-buscar-input">
                <input type="text">
                <img src="./icon-leng.PNG" alt="">
            </div>
            <div class="main-buscar-lupa"></div>
        </div>
        <div class="main-boton">
            <hr>
            <button>
                <span class="boton-icon"></span>
                <span class="boton-text">Leer Wikipedia en tu idioma</span>
                <span class="boton-down"></span>
            </button>
            <hr>
            <!-- div class="main-boton-linea"></div> -->
        </div>
    </main>
    <footer>
        <hr>
        <div class="footer-lateral">
            <div class="footer-lateral-contenido">
                <div class="lateral-icon">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSlUiB5Pnbr95NuUX4xAI7YHQwl3S30dwdzDWL0bMUMHuOsU-vYRgqrtrcH-x5Xjlk71JI&usqp=CAU" alt="">
                </div>
                <div class="lateral-texto">Wikipedia es alojada por la Fundaci贸n Wikimedia, una organizaci贸n sin fines de lucro que tambi茅n alberga una gama de otros proyectos.</div>
                <div class="lateral-texto">
                    <a href="https://donate.wikimedia.org/?utm_medium=portal&amp;utm_campaign=portalFooter&amp;utm_source=portalFooter">
                        Usted puede apoyar nuestro trabajo con una donaci贸n
                    </a>
                </div>
            </div>
        </div>
        <div class="footer-lateral">
            <div class="footer-lateral-contenido">
                <div class="lateral-texto">
                    <div class="lateral-icon">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/7/75/Wikipedia_mobile_app_logo.png" alt="">
                    </div>
                    <strong >Descargar Wikipedia para Android o iOS</strong>
                    <p>Guarda tus art铆culos favoritos para leerlos sin conexi贸n, sincroniza tus listas de lectura en varios dispositivos y personaliza tu experiencia de lectura con la aplicaci贸n oficial de Wikipedia.</p>
                    <ul>
                        <li>
                            <img src="https://tucita247.com/wp-content/uploads/2021/01/appstore.png" alt="">
                        </li>
                        <li>
                            <img src="https://www.gocanvas.com/content/images/image-uploads/Badge_Play_Store.png" alt="">
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer-proyectos">
            <div class="footer-proyecto">
                <a href="//commons.wikimedia.org/">
                    <div class="proyecto-icon">
                        <img src="https://upload.wikimedia.org/wikipedia/en/4/4a/Commons-logo.svg" alt="">
                    </div>
                    <div class="proyecto-text">
                        <span class="proyecto-text1">Commons</span>
                        <span class="proyecto-text2">Fotos libremente utilizables y m谩s</span>
                    </div>
                </a>
            </div>
            <div class="footer-proyecto">
                <a href="//www.wikivoyage.org/">
                    <div class="proyecto-icon">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Wikivoyage-Logo-v3-icon.svg/1200px-Wikivoyage-Logo-v3-icon.svg.png" alt="">
                    </div>
                    <div class="proyecto-text">
                        <span class="proyecto-text1">Wikiviajes</span>
                        <span class="proyecto-text2">La gu铆a de viajes libre</span>
                    </div>
                </a>
            </div>
            <div class="footer-proyecto">
                <a href="//www.wiktionary.org/">
                    <div class="proyecto-icon">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Wiktfavicon_en.svg/1024px-Wiktfavicon_en.svg.png" alt="">
                    </div>
                    <div class="proyecto-text">
                        <span class="proyecto-text1">Wikcionario</span>
                        <span class="proyecto-text2">El diccionario libre</span>
                    </div>
                </a>
            </div>
            <div class="footer-proyecto">
                <a href="//www.wikibooks.org/">
                    <div class="proyecto-icon">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Wikibooks-logo.svg/1200px-Wikibooks-logo.svg.png" alt="">
                    </div>
                    <div class="proyecto-text">
                        <span class="proyecto-text1">Wikilibros</span>
                        <span class="proyecto-text2">Libros de contenido libre</span>
                    </div>
                </a>
            </div>
            <div class="footer-proyecto">
                <a href="//www.wikinews.org/">
                    <div class="proyecto-icon">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Wikinews-North_America-logo.svg/2560px-Wikinews-North_America-logo.svg.png" alt="">
                    </div>
                    <div class="proyecto-text">
                        <span class="proyecto-text1">Wikinoticias</span>
                        <span class="proyecto-text2">La fuente de noticias libres</span>
                    </div>
                </a>
            </div>
            <div class="footer-proyecto">
                <a href="//www.wikidata.org/">
                    <div class="proyecto-icon">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Notification-icon-Wikidata-logo.svg/1200px-Notification-icon-Wikidata-logo.svg.png" alt="">
                    </div>
                    <div class="proyecto-text">
                        <span class="proyecto-text1">Wikidata</span>
                        <span class="proyecto-text2">Base de conocimiento libre</span>
                    </div>
                </a>
            </div>
            <div class="footer-proyecto">
                <a href="//www.wikiversity.org/">
                    <div class="proyecto-icon">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Wikiversity-logo.svg/2560px-Wikiversity-logo.svg.png" alt="">
                    </div>
                    <div class="proyecto-text">
                        <span class="proyecto-text1">Wikiversidad</span>
                        <span class="proyecto-text2">Plataforma educativa libre</span>
                    </div>
                </a>
            </div>
            <div class="footer-proyecto">
                <a href="//www.wikiquote.org/">
                    <div class="proyecto-icon">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Wikiquote-logo.svg/300px-Wikiquote-logo.svg.png" alt="">
                    </div>
                    <div class="proyecto-text">
                        <span class="proyecto-text1">Wikiquote</span>
                        <span class="proyecto-text2">La colecci贸n de citas</span>
                    </div>
                </a>
            </div>
            <div class="footer-proyecto">
                <a href="//www.mediawiki.org/">
                    <div class="proyecto-icon">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/MediaWiki-2020-icon.svg/1024px-MediaWiki-2020-icon.svg.png" alt="">
                    </div>
                    <div class="proyecto-text">
                        <span class="proyecto-text1">MediaWiki</span>
                        <span class="proyecto-text2">Aplicaci贸n wiki libre y abierta</span>
                    </div>
                </a>
            </div>
            <div class="footer-proyecto">
                <a href="//www.wikisource.org/">
                    <div class="proyecto-icon">
                        <img src="https://www.wikimedia.de/wp-content/uploads/2019/09/1200px-Wikisource-logo.svg-1.png" alt="">
                    </div>
                    <div class="proyecto-text">
                        <span class="proyecto-text1">Wikisource</span>
                        <span class="proyecto-text2">La biblioteca libre</span>
                    </div>
                </a>
            </div>
            <div class="footer-proyecto">
                <a href="//species.wikimedia.org/">
                    <div class="proyecto-icon">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/d/df/Wikispecies-logo.svg" alt="">
                    </div>
                    <div class="proyecto-text">
                        <span class="proyecto-text1">Wikispecies</span>
                        <span class="proyecto-text2">Directorio de especies libre</span>
                    </div>
                </a>
            </div>
            <div class="footer-proyecto">
                <a href="//meta.wikimedia.org/">
                    <div class="proyecto-icon">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Meta-Wiki_Proposed_logo.svg/900px-Meta-Wiki_Proposed_logo.svg.png" alt="">
                    </div>
                    <div class="proyecto-text">
                        <span class="proyecto-text1">Meta-Wiki</span>
                        <span class="proyecto-text2">Coordinaci贸n y documentaci贸n comunitaria</span>
                    </div>
                </a>
            </div>
        </div>
        <hr>
    </footer>
    <p class="licencias">
        <small class="licencia">Esta p谩gina est谩 disponible bajo la <a href="https://creativecommons.org/licenses/by-sa/3.0/">licencia Creative Commons Atribuci贸n-CompartirIgual</a></small>
        <small class="licencia"><a href="https://meta.wikimedia.org/wiki/Terms_of_use/es">T茅rminos de uso</a></small>
        <small class="licencia"><a href="https://meta.wikimedia.org/wiki/Privacy_policy/es">Normativa de privacidad</a></small>
    </p>
</body>
</html> 
  • CSS
body {
    margin: 0;
    padding: 0;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif;
    font-size: 62.5%;
}
header {
    width: 100%;
    height: 60px;
}
header .header-logo1 {
    width: 250px;
    margin: 0 auto; 
    margin-top: 65px;
    text-align: center;
}
header .header-logo2 {
    width: 250px;
    margin: 0 auto; 
    margin-top: 65px;
    text-align: center;
}
header img {
    width: 210px;
}
main {
    width: 100%;
    text-align: center;
}
main .main-idiomas {
    width: 50%;
    text-align: center;
    font-size: 1.1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 auto;
}
main a {
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    margin: 0 auto;
    padding: 5px;
    font-size: 1rem;
    color: #36c;
}
main span {
    color: #54595d;
    margin: 0 auto;
    font-size: 0.75rem;
}
main section div {
    width: 125px;
    display: flex;
    flex-wrap: wrap;
    padding: 8px;
}
main .main-idioma01 {
    margin-left: 45%;
}
main .main-idioma02 {
    margin-left: 12%;
}
main .main-idioma03 {
    margin-left: 30%;
}
main .main-idioma04 {
    margin-left: 25%;
}
main .main-idioma05 {
    margin-left: 25%;
}
main .main-idioma06 {
    margin-left: 28%;
}
main .main-idioma07 {
    margin-left: 30%;
}
main .main-idioma08 {
    margin-left: 25%;
}
main .main-idioma09 {
    margin-left: 45%;
}
main .main-idioma10 {
    margin-left: 12%;
}
main section div:hover {
    background-color: #eaecf0;
}
main a:hover {
    text-decoration: underline;
}
main .main-buscar {
    width: 530px;
    margin: 0 auto;
    margin-top: 40px;
    border-radius: 5px;
    display: flex;
}
main .main-buscar-input {
    width: 480px;
    border: 1px solid #dfe1e5;
    display: flex;
    justify-content: center;
    align-items: center;
}
main .main-buscar-input input {
    width: 400px;
    border: none;
    outline: none;
    font-size: 2rem;
    height: 45px;
}
main .main-buscar-input img {
    width: 60px;
    height: 45px;
}
main .main-buscar-input:hover {
    border: 1px solid #36c;
}
main .main-buscar-lupa {
    background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxzA__o-B9dRQz2eCejrJ3CT5qnqK29l7WFCdtJsIVM8MtYgh408M3wdFzhd47iGD9hnM&usqp=CAU');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 45px;
    height: 45px;
    border: 2px solid #36c;
}
main .main-boton {
    width: 530px;
    margin: 0 auto;
    margin-top: 40px;
    display: flex;
}

main .main-boton button {
    background-color: #f8f9fa;
    position: relative;
    z-index: 1;
    margin: 0 auto;
    border: 1px solid #a2a9b1;
    border-radius: 2px;
    display: flex;
    width: 250px;
    height: 30px;
    justify-content: center;
    align-items: center;
}
main .main-boton .boton-text {
    color: #648dd9;
    font-size: 14px;
    font-weight: 700;
}
main .main-boton .boton-icon {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/OOjs_UI_icon_language-ltr-progressive.svg/1024px-OOjs_UI_icon_language-ltr-progressive.svg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 16px;
    width: 16px;
}
main .main-boton .boton-down {
    background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTIKhcnaVzlMW6ReiS2G8eJ8JwKEqGgZm3B8AeRBADfl-EnMIz9HaGWiuDGJY89bpMMwc8&usqp=CAU');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 12px;
    width: 12px;
}
main .main-boton hr {
    flex: 1 1;
    color: #a2a9b1;
    border: 0.5px solid #a2a9b1;
    height: 0px;
    margin: 15px;
}
footer {
    overflow: hidden;
    max-width: 100%;
    margin: 0 auto;
    padding: 2rem 1.28rem 0 1.28rem;
    font-size: 1.3rem;
}
footer .footer-lateral {
    width: 35%;
    float: left;
    clear: left;
    margin-bottom: 2rem;
    margin-top: 1.5rem;
    vertical-align: top;
}
footer .footer-lateral-contenido {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
}
footer .lateral-icon{
    position: absolute;
    top: 0;
    left: 8px;
    left: .8rem;
}
footer .lateral-icon img {
    width: 42px;
    height: 42px;
}
footer .lateral-texto {
    position: relative;
    margin: 0;
    padding-left: 6rem;
    padding-right: 2rem;
    color: #54595d;
    font-size: 0.8rem;
}
footer .lateral-texto a {
    unicode-bidi: embed;
    outline: 0;
    color: #36c;
    text-decoration: none;
}
footer .lateral-texto a:hover {
    text-decoration: underline;
}
footer ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
}
footer ul li img {
    width: 100px;
}
footer ul li {
    padding: 10px;
}
footer .footer-proyectos {
    display: inline-block;
    width: 65%;
}
footer .footer-proyecto {
    float: left;
    position: relative;
    width: 33%;
    height: 6rem;
}
footer .footer-proyecto a {
    text-decoration: none;
    display: inline-block;
    min-height: 50px;
    width: 90%;
    padding: 0.8em;
    white-space: nowrap;
    outline: 0;
    color: #36c;
}
footer .footer-proyecto a:hover {
    background-color: #eaecf0;
}
footer .proyecto-icon {
    display: inline-block;
    width: 50px;
    text-align: center;
}
footer .proyecto-icon img {
    width: 47px;
    height: 47px;
}
footer .proyecto-text {
    max-width: 65%;
    font-size: 0.8rem;
    white-space: normal;
    display: inline-block;
}
footer .proyecto-text2 {
    color: #54595d;
    display: block;
}
.licencias {
    color: #54595d;
    text-align: center;
    font-size: 1rem;    
    margin: 0 0 15px 0;
}
.licencias a {
    unicode-bidi: embed;
    outline: 0;
    color: #36c;
    text-decoration: none;
}
.licencias a:hover {
    text-decoration: underline;
}
.licencias small:after {
    content: "\2022";
    display: inline-block;
    font-size: 1.3rem;
    line-height: inherit;
    margin-left: .8rem;
    margin-right: .5rem;
}
.licencias small:last-child:after {
    display: none;
}

Hola, hice algunas modificaciones sobre el proyecto de Google.

Us茅 un Grid en el footer, actualic茅 links y coloqu茅 una herramienta de ayuda visual.
Ser铆a genial si tu que me lees, lo ves y me das feedback.

Google Clone

Gracias!

Aqu铆 mi practica del clon de google
https://jahiker.github.io/clon-google/

Porfi lo termine, ahora de ir por el reto Wikipedia!!

Terminado Google clone y empezando Wikipedia clone

Aqu铆 mi primera parte del clon de Wikipedia.
Falta lo que entiendo puede ser el footer.

Genial, ahora a intentar clonar wikipedia para poner en pr谩ctica lo aprendido.

Muy bueno !!

Aqui esta mi proyecto totalmente funcional de Wikipedia.org:
Wikipedia.org clon

listo estupendo 馃槃