Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Estilos en Footer

16/17
Recursos

Aportes 342

Preguntas 39

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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

Agradezo feedback

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

Clone google con funcionalidad de busqueda con js

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

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

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

mobile

tablets

desktop

Yo cloné una página de educación de acá de Colombia, SENA SOFIA PLUS.

Este es el resultado 😃

Buen curso corto de repaso de html y css.

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

Ahora intentaré con el de Wikipedia.

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

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

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

//copia

//original

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

Buenas, acá comparto los clones que realice:
   
Google Clone
   

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

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

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

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

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

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.

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

CODIGO HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Facebook - Inicia sesión o regístrate</title>
    <link rel="stylesheet" href="./css/main.css" />
  </head>
  <body>
    <main>
      <div class="main-container">
        <section class="main-logo">
          <img
            src="https://static.xx.fbcdn.net/rsrc.php/y8/r/dF5SId3UHWd.svg"
            alt="logo principal de Facebook"
          />
          <p>
            Facebook te ayuda a comunicarte y compartir con las personas que
            forman parte de tu vida.
          </p>
        </section>
        <section class="login">
          <form action="">
            <input
              class="input-email"
              type="email"
              name="email"
              id="email"
              placeholder="Correo electronico o número de teléfono"
            />
            <input
              class="input-password"
              type="password"
              name="password"
              id="password"
              placeholder="Contraseña"
            />
            <button class="button-login"><h4>Iniciar sesión</h4></button>
            <a href="#">¿Olvidaste tu contraseña?</a>
            <div>
              <button class="button-signup"><h3>Crear cuenta nueva</h3></button>
            </div>
          </form>
        </section>
      </div>
    </main>
    <footer>
      <ul class="top">
          <li><a href="#">Español</a></li>
        <li><a href="https://ja-jp.facebook.com/">日本語 </a></li>
        <li><a href="https://www.facebook.com/">English (US)</a></li>
        <li><a href="https://pt-br.facebook.com/">Português (Brasil) </a></li>
        <li><a href="https://fr-fr.facebook.com/">Français (France) </a></li>
        <li><a href="https://de-de.facebook.com/">Deutsch </a></li>
        <li><a href="https://it-it.facebook.com/">Italiano </a></li>
        <li><a href="https://ar-ar.facebook.com/">العربية </a></li>
        <li><a href="https://hi-in.facebook.com/">हिन्दी </a></li>
        <li><a href="https://zh-cn.facebook.com/">中文(简体) </a></li>
        <button>+</button>
      </ul>

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

CODIGO CSS

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

html {
    font-size: 62.5%;
}

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

Hola compañeros les comparto el reto:

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

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

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

Listo, reto completado 😎(Estuvo largo jeje)

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



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

Comparto mi resultado:

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

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

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.

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

Luego de intentar e intentar muchas veces lo logré 😃

Les comparto mi reto terminado

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

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

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

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

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

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

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

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

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

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

¡Que buen curso!

Asi me quedó usando flex

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

footer ul{
    list-style: none;
}

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

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

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

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

Me siento con suerte

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 💚

Yo tambien lo habia hecho con grid

Solo falto cambiar el favicon

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

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

Listo!! Ahora vamos con el clon de Wikipedia

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

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

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

Después de más de 2 días…

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

Da mucha satisfacción poder avanzar en los cursos.

Mi aporte en modo oscuro

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

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

En desktop

Para tablets:

para móviles:

html:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wikipedia</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="./tablet.css" media="screen and (min-width: 480px)">
    <link rel="stylesheet" href="./desktop.css" media="screen and (min-width: 770px)">
    <link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/7/75/Wikipedia_mobile_app_logo.png" type="image/x-icon">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <figure>
                <img src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png" alt="">
        </figure>
        <h1>  
            <span class="title-logo">WIKIPEDIA</span>
            <span class="subtitle-logo">La enciclopedia libre</span>
        </h1>
    </header>
    <main>
        <section class="languages">
            <div class="spanish mark">
                <a href="">
                <strong>Español</strong>
                <div>
                    <span>1 717 00+</span> 
                    <span>artículos</span>                    
                </div>
                </a>
            </div>
            <div class="ingles  mark">
                <a href="">
                    <strong>English</strong>
                    <div>
                        <span>6 383 000+</span>
                        <span>articles</span>                        
                    </div>
                </a>
            </div>
            <div class="chino  mark">
                <a href="">
                    <strong>日本語</strong>
                    <div>
                        <span>1 292 000+</span>
                        <span>記事</span>                        
                    </div>
                </a>
            </div>    
            <div class="ruso  mark">
                <a href="">
                    <strong>Русский</strong>
                    <div>
                        <span>1 756 000+</span>
                        <span>статей</span>                        
                    </div>
                </a>
            </div>
            <div class="aleman  mark">
                <a href="">
                    <strong>Deutsch</strong>
                    <div>
                        <span>2 617 000+</span>
                        <span>Artikel</span>                        
                    </div>
                </a>
            </div>
            <div class="frances  mark">
                <a href="">
                    <strong>Français</strong>
                    <div>
                        <span>2 362 000+</span>
                        <span>articles</span>                        
                    </div>

                </a>
            </div>            
            <div class="japones  mark">
                <a href="">
                    <strong>中文</strong>
                    <div>
                        <span>1 231 000+</span>
                        <span>條目</span>                        
                    </div>

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

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

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

CSS (el principal para moviles)

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

html{
    font-size: 62.5%;
}

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

ul{
    list-style: none;
}

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

img{
    width: 100%;
}

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

/* header */

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

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

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

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

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

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

/* contenido */

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

/* menu de lenguajes */

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

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

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

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

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

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

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

/* control de busqueda */

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

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

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

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

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

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

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

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

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

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

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

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

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

/* otras wikis */

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

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

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

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

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

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

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

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


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

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

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

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

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

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

.separator1{
    order: 4;
}

/* footer */

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

footer div{
    text-align: center;
}

footer div a{
    color: #4f94e2;
}

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

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

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

El CSS para tablets

header{
    margin-top: 4rem;
}

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

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

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

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

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

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

.mark a div{
    flex-direction: row;

}

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

.spanish{
    right: 35%;
}

.chino{
    right: 68%;
}

.aleman{
    right:75%;
}

.japones{
    right: 68%;
}

.portugues{
    right: 35%;
}

.ingles{
    left: 35%;
}

.ruso{
    left: 68%;
}

.frances{
    left:75%;
}

.italiano{
    left: 68%;
}

.polski{
    left: 35%;
}

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

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

Y por ultimo para PC

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



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

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

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

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

}

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

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

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

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

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

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

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

Se logro!

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

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

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

Clone de Google terminado!

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

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

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

Faltó agregar que los subrayados en efecto hover. en el menú principal y en el footer.


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

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

Hola señoras y señores, acabo de terminar el con de Wikipedia “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

Reto Wikipedia:

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

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

Hola, hice algunas modificaciones sobre el proyecto de Google.

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

Google Clone

Gracias!

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

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

Terminado Google clone y empezando Wikipedia clone

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

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

Muy bueno !!

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

listo estupendo 😄

en el hover en las etiquetas anclas ó <a/> falto agregar el text-decoration: underline, estuvo genial, excelente la manera de enseñar del profesor, excelente curso

Listo copia de Google, ahora pora la de WikipediA

Hola a todos, alguien me puede enseñar como publicar los retos?

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

Reto cumplido!!! - A seguir aprendiendo!!

CSS Grid Layout ofrece un sistema de diseño basado en cuadrícula, con filas y columnas, lo que facilita el diseño de páginas web sin tener que usar flotantes y posicionamiento.

Acá dejaré el proyecto de Wkipedia completo:
Antes de eso, algunos tips:

  • Perfeccionar el manejo de positión, es fundamnetal saber el uso de relative y absolute para completar el proyecto.

  • Aprender a usar formatos SVG para imagen

  • Tener demasiada paciencia

Bonus: Aprender los shorcuts de tu editos de texto

Este es mi Clon de google

Muy interesante este curso voy a hacer este reto de wikipedia. La practica hace el maestro.

Gracias a todos los comentarios pude terminar mi clon de Wikipedia, gracias a todos Wikis-Platzi

Comparto mi resultado del reto, yo fui rebelde y realice un clon de youtube 😁😉😅😆😏 dejo aquí el link del repositorio

https://github.com/Misael-GC/Mi-P-gina-tematica-youtube

Reto terminado. Llevó trabajo, pero es muy satisfactorio ir adquiriendo nuevos skills !

“yo lo estaré checando”