Reto terminado:
https://byron7cueva.github.io/arquitecto-frontend/htmlCssPractico/wikipedia/
Introducción
#PlatziCodingChallenge || PlatziCodingChallenge
Lo que aprenderás sobre HTML y CSS
Análisis y creación del proyecto
Análisis del proyecto Google Clone
Configuración del proyecto
Chrome Dev Tools como herramienta
Chrome Dev Tools
Header Google Clone
Maquetado del Header
Agregando estilos al Header
Posicionar una lista en horizontal
Manejo de íconos e imágenes en etiquetas
Contenido principal Google Clone
Maquetado de la sección principal
Estilos en la sección principal
Estilos en la sección del input
Íconos y manejo de background hover
Estilos en los botones
Footer Google Clone
Maquetado del Footer
Estilos en Footer
Cierre
Cierre: diferencias entre CSS Grid y Flexbox
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Crear cuenta
Si ya tienes una cuenta,
Iniciar sesión
Estilos en Footer
16/17Recursos
Aportes 342
Preguntas 39
Ordenar por:
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
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
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.
El resultado del clon de Google:
https://ceporro.github.io/Curso-pr-ctico-de-HTML-y-CSS/Google clone/
Y de la Wikipedia:
https://ceporro.github.io/Curso-pr-ctico-de-HTML-y-CSS/Wikipedia clone/
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.
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
Mi código: https://github.com/jcavelez/google-clone
La página: https://github.com/jcavelez/google-clone
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
Reto finalizado:
https://samiralarcon.github.io/myclonewikipedia/
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&utm_campaign=portalFooter&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.
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 😉
url de mi clone google and wikipedia
https://mikekiller.github.io/Google-Clone/
https://mikekiller.github.io/Wikipedia-clone/
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
clon de Google : https://victormanu20.github.io/clonGoogle/
Repositorio: https://github.com/victormanu20/clonGoogle
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
Reto terminado. Llevó trabajo, pero es muy satisfactorio ir adquiriendo nuevos skills !
“yo lo estaré checando”
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.