Estilos en Footer

https://byron7cueva.github.io/arquitecto-frontend/htmlCssPractico/wikipedia/

Reto terminado:

Juan Esteban Galvis

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

Abraham Serrano Montiel

Clone google con funcionalidad de busqueda con js

Byron Mesias Cueva Cabrera

Proyecto terminado:
Solo block e inline-block: https://byron7cueva.github.io/arquitecto-frontend/htmlCssPractico/google/
Solo flexbox: https://byron7cueva.github.io/arquitecto-frontend/htmlCssPractico/google/flexbox.html
Solo Css Grid: https://byron7cueva.github.io/arquitecto-frontend/htmlCssPractico/google/grid.html

zayelmech

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">

JochuaOrtiz

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

mobile

tablets

desktop

Maria Alejandra Carrero

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 ❤️

José B. Méndez Padín

Buen curso corto de repaso de html y css.

Andres Evaristo Ruiz Gonzalez

Listo!
Me costó mucho trabajo el clon de wikipedia,
pero LO LOGRE!!! 😃
Se aceptan criticas! 😄

Hame Elizalde

Ahora intentaré con el de Wikipedia.

Sergio Mendoza

WhatsApp Image 2021-03-03 at 15.27.21.png

SebasPosada

Mi propia versión de Facebook, un toque más clásico.

user_deleted_1644795

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.

Danelia Sanchez Sanchez

Clone de Wikipedia

Manuel Cabos

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

Danna Valentina Hernández Pinilla

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.

Francisco Javier Suarez Verdugo

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

Abril Darynka Tapia Sosa

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

Tomás Sacripanti

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.

CRISTIAN BARBERO PÉREZ

https://ceporro.github.io/Curso-pr-ctico-de-HTML-y-CSS/Wikipedia clone/

El resultado del clon de Google:
https://ceporro.github.io/Curso-pr-ctico-de-HTML-y-CSS/Google clone/

Y de la Wikipedia:

user_deleted_1059746

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

OZKAR

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

Valentina Arenas Lozano

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

Carol Estefanny Masmela Escamilla

Listo, reto completado 😎(Estuvo largo jeje)

Jose Luis Barbosa Cepeda

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

captura de pantalla de 2020-11-26 20-23-52.png

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

Rabi Leonel Leon Chan

Hola compañeros les comparto el reto:

WikipediaClone

César Andrés Aguilar Párraga

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

Dario Paladines

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

Andrés Argote

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

Captura de pantalla 2020-06-01 a las 11.32.00.png

alvaro_iv

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

Captura de Pantalla 2021-11-24 a la(s) 23.42.33.png

Raul Armas

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

Enrique Orozco Gaytán

Comparto mi resultado:

Wladimir

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.

Maria Auxiliadora Sanchez

Listo!!! le añadí un div para poner mi pais… Ecuador =)

Ixchel Garcia

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 💚

Screen Shot 2020-10-22 at 6.36.31 PM.png

Guillermo Olvera López

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

Yael Manuel Flores Cornejo

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

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

Screenshot_2021-04-13 Wikipedia CLON ( yael_code).png

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

Edgardo Andres Vargas Saenz

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

Reto Wikipedia terminado.

Se me complico mucho, siento que coloque mucho elementos a la “Fuerza”, no se si me hago entender. Aun me falta por mejorar mucho.

edgardoavs.github.io_WikipediaClone_index.html (1).png

Hvnt3rK3ys

Luego de intentar e intentar muchas veces lo logré 😃

Simón Arenas

⚡ https://simonarenas.github.io/Google_replica/

Repo: https://github.com/SimonArenas/Google_replica

Carlos Orozco

Les comparto mi reto terminado

LUIS FELIPE RESTREPO ARGÜELLO

Captura de Pantalla 2020-01-08 a la(s) 2.01.14 p. m..png

Yasmil Gonzalez

hace 5 meses

Hasta que lo logre!!..me costo pero termine 😊

Fabiola Jessica Huancollo Chambi

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:

FireShot Capture 002 - Clon de Wikipedia - 127.0.0.1.png

Alexander Saldivar Quispe

Abigail Perez

Abigail Perez

Tomás Navarro Angeles

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

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

José Ernesto Silva Herrera

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

Maria Villegas Borray

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.

WhatsApp Image 2022-03-20 at 3.22.31 AM.png

Andy Antonio Paz Cambara

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

César Velandia

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

jonathan gonzalez

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!

alextorrer

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

Enrique Gutierrez

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

Jonathan Uriel Jiménez Soveranes

Me siento con suerte

Juan Camilo Vélez Granados

Mi código: https://github.com/jcavelez/google-clone

La página: https://github.com/jcavelez/google-clone

Kevin Parra Lopez

Yo tambien lo habia hecho con grid

Juan Felipe Ángel Martínez Bernal

Solo falto cambiar el favicon

luisrovez

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

Misael Joel Pérez Vargas

![](
Fue difícil, avance con prueba y error, la primera parte fue una práctica de position, copie el input buscar de esta clase. Y la parte baja una mixtura de flexbox y grid. Me ayudo mucho antes hacer una maqueta en paint de las diversas cajas a realizar con ellas la maquetación en html y la aplicación de BEM se me hizo mas fácil.
![](

LESTHER XITUMUL MANUEL

Gestionar los colores mediante variables facilita agregar soporte para dispositivos que tengan configurado su esquema como Dark/Oscuro, aquí el enlace de mi proyecto: <https://lestherxm.github.io/google_clone_v1/:> ![](https://static.platzi.com/media/user_upload/00-e65ea99b-fb4b-4918-baac-e6459086e41e.jpg)![](https://static.platzi.com/media/user_upload/01-258139a4-72c8-4b82-b904-ef9c72ca3b24.jpg)

humbertopeaton

hace 9 meses

Version mobile: ![](https://static.platzi.com/media/user_upload/Imagen%20de%20WhatsApp%202024-01-07%20a%20las%2003.04.09_7b554ebb-452233c8-6d1c-44d1-8de9-9565cd66e6f1.jpg)![](https://static.platzi.com/media/user_upload/Imagen%20de%20WhatsApp%202024-01-07%20a%20las%2003.04.09_7b554ebb-52996eb7-1490-4e7f-9548-b64785def90d.jpg)![](https://static.platzi.com/media/user_upload/Imagen%20de%20WhatsApp%202024-01-07%20a%20las%2003.04.09_7b554ebb-0f008dab-62ff-4ea6-b28d-78913fa3ec1f.jpg)![](https://static.platzi.com/media/user_upload/Imagen%20de%20WhatsApp%202024-01-07%20a%20las%2003.04.09_7b554ebb-34be2bf8-21bd-4ebc-be25-38b68d2dbdbd.jpg)![](https://static.platzi.com/media/user_upload/Imagen%20de%20WhatsApp%202024-01-07%20a%20las%2003.04.09_7b554ebb-0e760386-4c79-40a2-a82e-6f0b34200573.jpg)![](https://static.platzi.com/media/user_upload/Imagen%20de%20WhatsApp%202024-01-07%20a%20las%2003.04.09_7b554ebb-02f2b659-6bf3-44f8-909b-733e0c01b2cd.jpg)![](https://static.platzi.com/media/user_upload/Imagen%20de%20WhatsApp%202024-01-07%20a%20las%2003.04.09_7b554ebb-67e43dc1-86de-4647-98dc-e691f3753f99.jpg)![](https://static.platzi.com/media/user_upload/Imagen%20de%20WhatsApp%202024-01-07%20a%20las%2003.04.09_7b554ebb-4339f1d4-a1e8-427f-bd0f-bede3ba42d4e.jpg)![](https://static.platzi.com/media/user_upload/Imagen%20de%20WhatsApp%202024-01-07%20a%20las%2003.04.09_7b554ebb-8310a328-00c1-4a23-96c3-0e5dd9484d5d.jpg)![](https://static.platzi.com/media/user_upload/Imagen%20de%20WhatsApp%202024-01-07%20a%20las%2003.04.09_7b554ebb-9262923e-6dca-4960-98b0-1ab9e3dfc1b7.jpg) version tablet: ![](https://static.platzi.com/media/user_upload/Imagen%20de%20WhatsApp%202024-01-07%20a%20las%2003.04.44_d5c6f634-9f39a1ec-9914-4617-996f-d494bc381776.jpg) version desktop ![](https://static.platzi.com/media/user_upload/Imagen%20de%20WhatsApp%202024-01-07%20a%20las%2003.05.01_c0c60b90-214fee7c-990d-4e45-9ac6-4591d38d33ef.jpg)

Kevin Yair Salazar Molinares

hace 6 meses

![](https://static.platzi.com/media/user_upload/image-67964487-6e30-4f35-8eac-223c4d0b9813.jpg)

Estefania Oropeza Reyes

Captura de pantalla 2023-08-31 a la(s) 20.27.15.png

Sebastian Ariza

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

Captura de pantalla 2023-04-15 110614.png

Yerti Mariela Mosqueira briceño

Este es mi proyecto de wikipedi:

Sergio Estrella

Profe Platzi

Genial el curso! 😄
Les comparto mi repositorio de Clon de Google 😉

José Fernando Fuentes Roa

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

Sonia Mendoza

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

Lariur Alejandra Avila

Bueno yo lo personalicé un poco jeje

Lisbeth Quintero

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

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í!

y aquí encuentran el repositorio, luego lo haré en responsive design.

https://github.com/LizzQuintero/clone_wikipedia

Sebastián Asenjo

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

pedro figueredo

Mi trabajo humilde 😄

Leonardo Véliz

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

OmarLp19

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

Edward Cabrera

Listo!! Ahora vamos con el clon de Wikipedia

Santiago Rodriguez Chaves

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

Pablo Andrés Rojo Paz

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.

Oscar Daniel Bernal Guzman

Mi aporte en modo oscuro

Erick Manuel Villafuerte Ramírez

Maria Esther Mendoza Zafra

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

Alvaro Barrera

Me costó lo suyo, pero aquí está. mi Clonepedia, hecho con media queries para que sea totalmente responsive 😛

En desktop

Web capture_12-1-2022_181548_127.0.0.1.jpg

Para tablets:

Web capture_12-1-2022_181616_127.0.0.1.jpg

para móviles:

Web capture_12-1-2022_181633_127.0.0.1.jpg

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

Jorge Calzada

Se logro!

Eber Eliud Rodriguez Alvarado

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

JOSE PINTO VEGA

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.

Franco Lucchini

https://replit.com/@FrancoLucchini1/Google-Clone#index.html

Footer con flexbox

Eduardo Moyano

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

Yhovany Alarcon Pillco

Reto finalizado:
https://samiralarcon.github.io/myclonewikipedia/

José Luis Ramírez Ruiz

Clone de Google terminado!

WhatsApp Image 2021-12-13 at 5.23.17 PM.jpg

angelqui

¡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

Víctor Jara

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;

Carlos Machado

Hola señoras y señores, acabo de terminar el con de Wikipedia “me tomó 3 dias” desde su versión móvil hasta la de escritorio. Cloné ma mayoria de detalles “creo” 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

Jessica Alexandra Navarrete Bermeo