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
Qué son las Chrome Dev Tools
Header Google Clone
Qué es el Header y cómo hacer su maqueteado
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
Comparte tu proyecto y certifícate
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Iniciar sesión
Estilos en Footer
16/18Recursos
¡Bienvenida y bienvenido a la recta final de nuestro proyecto! Ya sabes cómo maquetar la estructura del footer. Ahora, aplicaremos los estilos. Vamos directo a nuestro archivo CSS.
Etiqueta footer
- Llamamos la etiqueta footer.
- Le asignamos el width: 100% para que ocupe todo el ancho de la página y un height: 50px.
- Para asegurarnos que el footer siempre esté al final de la página y no se mueva, le damos position: absolute.
- Además, quitamos el espacio de abajo con bottom: 0.
- Usamos display: grid para generar la cuadrícula en que estará el contenido de nuestro proyecto. La propiedad grid-template-colums: 1fr 1fr nos permite dividir el footer en dos fracciones.
- Alineamos los elementos con align-items: center.
- Cambiamos el tamaño de fuente con font-size: 13px.
- Le damos un color de fondo con background-color: #f2f2f2.
- Añadimos un borde superior con border-top: 1px solid #e4e4e4.
Etiqueta ul
- Llamamos la etiqueta ul desde el footer.
- Le damos un margin: 10px para que el contenido no esté tan pegado al contenedor padre.
- Le quitamos los bullets con list-style: none.
- Posicionamos el contenido en horizontal con display: flex.
- Quitamos el espaciado interno izquierdo con padding-left: 0.
Contenedor izquierdo
- Llamamos la clase footer-left desde nuestra etiqueta footer con footer .footer-left.
- Movemos los elementos a la izquierda con justify-self: left.
Contenedor derecho
- Llamamos la clase footer-left desde nuestra etiqueta footer con footer .footer-right.
- Movemos los elementos a la derecha con justify-self: right.
Agregar estilos a los elementos
- Llamamos a las etiquetas ancla dentro de los elementos li de las listas no ordenadas de nuestra etiqueta footer con footer ul li a.
- Agregamos un margin: 10px para separar los elementos entre sí.
- Cambiamos su color con color: #5f6368.
Nuestro proyecto final se debería ver así:
¡Y listo! Hemos terminado de trabajar en nuestro clon de Google. ¡Muy bien por ti! Hemos aplicado muchos de los conceptos aprendidos en el Curso Definitivo de HTML y CSS. Pero esto no termina aquí.
Te proponemos un reto
Aprendimos a modelar paso a paso un header, main y footer. Ahora te toca a ti clonar otra icónica página usada por los estudiantes, ¡Wikipedia!
Te dejo los enlaces de los íconos de pie de página para ahorrarte un poco de tiempo:
- Commons
- Wikivoyage
- Wiktionary
- Wikibooks
- Wikinews
- Wikidata
- Wikiversity
- Wikiquote
- Mediawiki
- Wikisource
- Wikispecies
- Metawiki
Contribución creada con aportes de: Carlos Orozco y José Miguel Veintimilla.
Aportes 392
Preguntas 43
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 cloné una página de educación de acá de Colombia, SENA SOFIA PLUS.
Este es el resultado 😃
yo clone el de codigo facilito me parecio un poco mas complicado
mobile
tablets
desktop
Les comparto un reto personal que hice hace un tiempo para practicar maquetación es un dibujo en css de un samsung:
Acá esta el codigo : https://codepen.io/mariacch/pen/zYrwGyv ❤️
Buen curso corto de repaso de html y css.
Listo!
Me costó mucho trabajo el clon de wikipedia,
pero LO LOGRE!!! 😃
Se aceptan criticas! 😄
Ahora intentaré con el de Wikipedia.
Mi propia versión de Facebook, un toque más clásico.
Buenas noches compañeros, yo varie un poco el reto propuesto, hice la portada de la pagina de netflix, les dejo imagenes y el codigo.
//copia
//original
//codigo
https://github.com/felipeth04/Netflix-Clone
Espero se pongan creativo y terminen la parte restante, y me regalen una estrellita al repositorio. En caso de que lo usen, tampoco duden en hacer Pull Request ya que obviamente el codigo es mejorable.
El reto me costó pero lo saqué y en verdad estoy orgullosa, nada más no supe como poner el título con esa fuente, si alguien sabe, en verdad le agradecería su aporte.
Buenas, acá comparto los clones que realice:
Google Clone
Repositorio Google Clone: https://github.com/Ulzahk/Practica-Clon-Google-Version-Escritorio
Enlace Google Clone: https://ulzahk.github.io/Practica-Clon-Google-Version-Escritorio/index.html
Wikipedia Clone
Repositorio Wikipedia Clone: https://github.com/Ulzahk/Clon-Wikipedia-Version-Escritorio
Enlace Wikipedia Clone: https://ulzahk.github.io/Clon-Wikipedia-Version-Escritorio/index.html
He terminado el reto y el proyecto de clase, aquí están los resultados publicados en github pages
Clon de google
Clon de wikipedia
Me gustó el curso, corto, práctico y toca todo sobre html y css, un buen repaso la verdad. Muchas gracias y felicitaciones al equipo de Platzi.
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/
Finalmente, proyecto fachero y sin los bugs que traía antes XD
fijaos aaa
Hay juegos que nos enseñan a manejar flexbox y grid
Lo que he estado haciendo es el clone de Youtube, me parecío un diseño bastante completo para practicar todo lo aprendido hasta ahora en la ruta de frontend
Les dejo el enlace del repositorio, no está completamente terminado como quisiera pero ahí vamos https://github.com/Pieu11/Youtube-clone
Listo, reto completado 😎(Estuvo largo jeje)
No hice wikipedia, pero me dieron ganas de intentarlo con facebook, asi que este fue el resultado
CODIGO HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Facebook - Inicia sesión o regístrate</title>
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<main>
<div class="main-container">
<section class="main-logo">
<img
src="https://static.xx.fbcdn.net/rsrc.php/y8/r/dF5SId3UHWd.svg"
alt="logo principal de Facebook"
/>
<p>
Facebook te ayuda a comunicarte y compartir con las personas que
forman parte de tu vida.
</p>
</section>
<section class="login">
<form action="">
<input
class="input-email"
type="email"
name="email"
id="email"
placeholder="Correo electronico o número de teléfono"
/>
<input
class="input-password"
type="password"
name="password"
id="password"
placeholder="Contraseña"
/>
<button class="button-login"><h4>Iniciar sesión</h4></button>
<a href="#">¿Olvidaste tu contraseña?</a>
<div>
<button class="button-signup"><h3>Crear cuenta nueva</h3></button>
</div>
</form>
</section>
</div>
</main>
<footer>
<ul class="top">
<li><a href="#">Español</a></li>
<li><a href="https://ja-jp.facebook.com/">日本語 </a></li>
<li><a href="https://www.facebook.com/">English (US)</a></li>
<li><a href="https://pt-br.facebook.com/">Português (Brasil) </a></li>
<li><a href="https://fr-fr.facebook.com/">Français (France) </a></li>
<li><a href="https://de-de.facebook.com/">Deutsch </a></li>
<li><a href="https://it-it.facebook.com/">Italiano </a></li>
<li><a href="https://ar-ar.facebook.com/">العربية </a></li>
<li><a href="https://hi-in.facebook.com/">हिन्दी </a></li>
<li><a href="https://zh-cn.facebook.com/">中文(简体) </a></li>
<button>+</button>
</ul>
<ul class="bottom">
<li><a href="https://es-la.facebook.com/r.php">Registrarse</a></li>
<li><a href="https://es-la.facebook.com/login/">Iniciar sesión</a></li>
<li><a href="https://es-la.messenger.com/">Messenger</a></li>
<li><a href="https://es-la.facebook.com/lite/">Facebook Lite</a></li>
<li><a href="https://es-la.facebook.com/watch/">Watch</a></li>
<li><a href="https://es-la.facebook.com/directory/people/">Personas</a></li>
<li><a href="https://es-la.facebook.com/directory/pages/">Páginas</a></li>
<li><a href="https://es-la.facebook.com/pages/category/">Categorias de páginas</a></li>
<li><a href="https://es-la.facebook.com/places/">Lugares</a></li>
<li><a href="https://es-la.facebook.com/games/">Juegos</a></li>
<li><a href="https://es-la.facebook.com/directory/places/">Ubicaciones</a></li>
<li><a href="https://es-la.facebook.com/marketplace/">Marketplace</a></li>
<li><a href="https://pay.facebook.com/">Facebook Play</a></li>
<li><a href="https://es-la.facebook.com/directory/groups/">Grupos</a></li>
<li><a href="https://es-la.facebook.com/jobs/">Empleos</a></li>
<li><a href="https://www.oculus.com/">Oculus</a></li>
<li><a href="https://portal.facebook.com/">Portal</a></li>
<li><a href="https://www.instagram.com/">Instagram</a></li>
<li><a href="https://es-la.facebook.com/local/lists/245019872666104/">Local</a></li>
<li><a href="https://es-la.facebook.com/fundraisers/">Recaudaciones de fondos</a></li>
<li><a href="https://es-la.facebook.com/biz/directory/">Servicios</a></li>
<li><a href="https://es-la.facebook.com/votinginformationcenter/?entry_point=c2l0ZQ%3D%3D">Centro de informacion de votación</a></li>
<li><a href="https://es-la.facebook.com/facebook">Información</a></li>
<li><a href="https://es-la.facebook.com/ad_campaign/landing.php?placement=pflo&campaign_id=402047449186&extra_1=auto">Crear anuncio</a></li>
<li><a href="https://es-la.facebook.com/pages/create/?ref_type=site_footer">Crear página</a></li>
<li><a href="https://developers.facebook.com/?ref=pf">Desarrolladores</a></li>
<li><a href="https://es-la.facebook.com/careers/?ref=pf">Empleo</a></li>
<li><a href="https://es-la.facebook.com/privacy/explanation">privacidad</a></li>
<li><a href="https://es-la.facebook.com/policies/cookies/">Coockies</a></li>
<li><a href="https://es-la.facebook.com/help/568137493302217">Opciones de anuncios</a></li>
<li><a href="https://es-la.facebook.com/policies?ref=pf">Condiciones</a></li>
<li><a href="https://es-la.facebook.com/help/?ref=pf">Ayuda</a></li>
</ul>
</footer>
</body>
</html>
CODIGO CSS
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
font-size: 62.5%;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.6rem;
background-color: #f0f2f5;
justify-content: center;
flex-wrap: wrap;
}
main {
width: 100%;
height: 57vh;
display: flex;
justify-content: space-between;
margin-top: 150px;
}
.main-container {
margin: 0 auto;
width: 50%;
display: flex;
align-items: flex-start;
}
main .main-logo{
width: 520px;
height: 116px;
font-size: 2.8rem;
margin-right: 100px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
main .main-logo img {
width: 300px;
height: 106px;
}
main .main-logo p {
margin-left: 25px;
}
main .login {
display: flex;
width: 396px;
height: 360px;
box-shadow: 1px 1px 6px 1px #0f0f0f33;
border-radius: 5px;
}
main .login form {
background-color: #fff;
border-radius: 7px;
display: flex;
flex-wrap: wrap;
}
main .login form input {
outline: none;
margin: 0 auto;
margin-top: 15px;
width: 90%;
height: 40px;
border-radius: 5px;
border: 1px solid #dddfe2;
padding: 10px;
}
main .login form .button-login {
margin: 0 auto;
margin-top: 20px;
width: 90%;
height: 40px;
color: #ffff;
font-size: 2rem;
background-color: #3477f2;
border: none;
border-radius: 5px;
cursor: pointer;
}
main .login form .button-login:hover {
background-color: #306fe5;
}
main .login form .button-signup {
position: relative;
bottom: 15px;
background-color: #42b729;
border: none;
border-radius: 5px;
color: #ffff;
}
main .login form a {
margin: 0 auto;
text-decoration: none;
color: #3c90f8;
}
main .login form div {
border-top: 1px solid #dadde1;
width: 90%;
margin: 0 auto;
height: 40px;
display: flex;
flex-wrap: wrap;
}
main .login form div button {
margin: 0 auto;
margin-top: 30px;
width: 50%;
height: 40px;
}
footer {
width: 100%;
height: 270px;
position: absolute;
bottom: 0;
background-color: #fff;
display: inline-block;
flex-wrap: wrap;
}
footer .top {
margin: 0 auto;
list-style: none;
font-size: 1.2rem;
width: 50%;
height: 50px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
footer .top a {
color: #9497a2;
text-decoration: none;
padding-right: 15px;
}
footer .top button {
font-size: 1.4rem;
width: 30px;
}
footer .bottom {
text-align: center;
border-top: 1px solid #dadde1;
font-size: 1.2rem;
width: 50%;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
list-style: none;
}
footer .bottom a {
color: #9497a2;
text-decoration: none;
padding-right: 20px;
}
footer .bottom li {
padding-top: 5px;
}
Hola compañeros les comparto el reto:
En este enlace les dejo más info acerca del JUSTIFY-SELF igual algunas opciones las pueden probar en el inspector de elementos 🔥🔥🔥
Wikipedia + Platzi
– Dejo la demo en CodePen y el repositorio en GitHub
– Fuente usada para el logo Wikilatzi: Crismon Text (400) - Google Fonts
.
index.html
<!DOCTYPE html>
<html school="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wikilatzi</title>
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="https://i.postimg.cc/s257Mzw4/platzi.png">
<!-- Fuente Crismon Text (400) para el logo "Wikilatzi" https://fonts.google.com/specimen/Crimson+Text -->
<!-- Fuente Roboto (400 y 700) para texto https://fonts.google.com/specimen/Roboto -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text&family=Roboto:[email protected];700&display=swap" rel="stylesheet">
</head>
<body>
<main>
<div class="title-subtitle">
<div class="title">
<span class="w">W</span>
<span class="ikilear">IKILATZ</span>
<span class="n">I</span>
</div>
<span class="subtitle">Nunca pares de aprender</span>
</div>
<div class="logo">
<img src="https://i.postimg.cc/s257Mzw4/platzi.png" alt="Logo de Platzi">
</div>
<ul class="schools">
<li class="school s1">
<a href="https://platzi.com/web/">
<strong>Desarrollo Web</strong>
<small>482 000+ Desarrolladores</small>
</a>
</li>
<li class="school s2">
<a href="https://platzi.com/datos/">
<strong>Data Science e IA</strong>
<small>343 000+ Data Scientists</small>
</a>
</li>
<li class="school s3">
<a href="https://platzi.com/idioma-ingles/">
<strong>English Academy</strong>
<small>608 000+ Students</small>
</a>
</li>
<li class="school s4">
<a href="https://platzi.com/idioma-ingles/">
<strong>JavaScript</strong>
<small>276 000+ JS Developers</small>
</a>
</li>
<li class="school s5">
<a href="https://platzi.com/marketing-digital/">
<strong>Marketing Digital</strong>
<small>405 000+ Digital Marketers</small>
</a>
</li>
<li class="school s6">
<a href="https://platzi.com/startups/">
<strong>Startups</strong>
<small>150 000+ Startuppers</small>
</a>
</li>
<li class="school s7">
<a href="https://platzi.com/software/">
<strong class="mini">Programación y Des. de Software</strong>
<small>460 000+ Programadores</small>
</a>
</li>
<li class="school s8">
<a href="https://platzi.com/diseno-producto/">
<strong>Product Design</strong>
<small>212 000+ Product Designers</small>
</a>
</li>
<li class="school s9">
<a href="https://platzi.com/publicidad/">
<strong>Publicidad Digital</strong>
<small>312 000+ Publicistas</small>
</a>
</li>
<li class="school s10">
<a href="https://platzi.com/periodismo-digital/">
<strong>Periodismo Digital</strong>
<small>130 000+ Periodistas</small>
</a>
</li>
</ul>
<div class="search-box">
<input class="search-input" type="text">
<div class="lang">ES ⏷</div>
<button>
<img src="https://i.postimg.cc/h4sX6bDS/magnifying-glass.png" alt="Icono de lupa">
</button>
</div>
<div class="language">
<div class="line"></div>
<div class="lang-selector">
<div class="tl-icon">
<span class="up">文</span>
<span class="down">A</span>
</div>
<span>Leer Wikilatzi en tu idiona ⏷</span>
</div>
<div class="line"></div>
</div>
<div class="line"></div>
</main>
<footer>
<div class="desc-app">
<div class="description">
<img src="https://static.platzi.com/media/achievements/badge-algoritmos-pensamiento-logico-4b7a05c5-470a-41e6-bcd9-4693f4207a03.png" alt="">
<p>Transformamos la economía de nuestros países entrenando a la próxima generación de profesionales en tecnología.</p>
</div>
<div class="dowload-app">
<div class="icon-app">
<img src="https://play-lh.googleusercontent.com/miagFY2NtUmdu3Uy7o2bDDSL4pewRPa9k5PBa_EE7IlSHh8DZ4cV2ZvTi72cBMAo8o0=w240-h480-rw" alt="">
</div>
<div class="text">
<span>Descarga Wikilatzi para Android o iOS</span>
<p>Convierte tu smartphone en un aula personalizada para estudiar donde y cuando quieras. Aprende con nuestras Escuelas y miles de cursos de todos los niveles, con clases concretas y prácticas impartidas por expertos de sectores.</p>
<div class="stores">
<img class="ps" src="https://play.google.com/intl/es-419/badges/static/images/badges/es-419_badge_web_generic.png" alt="">
<img class="as" src="https://bhejo.co/wp-content/uploads/2020/05/app-store-badge.png" alt="">
</div>
</div>
</div>
</div>
<div class="others-schools">
<a href="https://platzi.com/negocios/" class="other-school">
<div class="school-icon"><img src="https://static.platzi.com/media/learningpath/badges/3801cc6a-27f9-4d65-b39f-ba478a314804.jpg" alt=""></div>
<div class="info"><span>Business Management</span><span>330 000+</span></div>
</a>
<a href="https://platzi.com/ecommerce/" class="other-school">
<div class="school-icon"><img src="https://static.platzi.com/media/learningpath/badges/98ff5389-59b9-4368-a23f-dd226cfee287.jpg" alt=""></div>
<div class="info"><span>E-commerce y Negocios Digitales</span><span>293 000+</span></div>
</a>
<a href="https://platzi.com/matematicas/" class="other-school">
<div class="school-icon"><img src="https://static.platzi.com/media/learningpath/badges/6e4f3ad0-d678-4ff5-bf91-56c389324ae0.jpg" alt=""></div>
<div class="info"><span>Matemáticas</span><span>176 000+</span></div>
</a>
<a href="https://platzi.com/diseno-grafico/" class="other-school">
<div class="school-icon"><img src="https://static.platzi.com/media/learningpath/badges/93a86f03-f15a-4641-8d38-c590c4d14324.jpg" alt=""></div>
<div class="info"><span>Diseño Gráfico</span><span>311 000+</span></div>
</a>
<a href="https://platzi.com/habilidades-blandas/" class="other-school">
<div class="school-icon"><img src="https://static.platzi.com/media/learningpath/badges/90291415-de42-4df7-9f4a-3b7bcd7ecf4b.jpg" alt=""></div>
<div class="info"><span>Habilidades Blandas</span><span>292 000+</span></div>
</a>
<a href="https://platzi.com/produccion-video/" class="other-school">
<div class="school-icon"><img src="https://static.platzi.com/media/learningpath/badges/07476be7-7132-47cf-93ea-82b1639b6e00.jpg" alt=""></div>
<div class="info"><span>Producción Audiovisual</span><span>277 000+</span></div>
</a>
<a href="https://platzi.com/videojuegos/" class="other-school">
<div class="school-icon"><img src="https://static.platzi.com/media/learningpath/badges/66766cd0-0772-4208-bd47-4b80f2944756.jpg" alt=""></div>
<div class="info"><span>Videojuegos</span><span>243 000+</span></div>
</a>
<a href="https://platzi.com/finanzas/" class="other-school">
<div class="school-icon"><img src="https://static.platzi.com/media/learningpath/badges/402797b7-6f9d-455c-b408-16892b7b5f34.jpg" alt=""></div>
<div class="info"><span>Finanzas e Inversiones</span><span>291 000+</span></div>
</a>
<a href="https://platzi.com/azure/" class="other-school">
<div class="school-icon"><img src="https://static.platzi.com/media/learningpath/badges/037d21d4-884b-436c-92c3-29971d50d29c.jpg" alt=""></div>
<div class="info"><span>Cloud Computing con Azure</span><span>169 000+</span></div>
</a>
<a href="https://platzi.com/blockchain-criptomonedas/" class="other-school">
<div class="school-icon"><img src="https://static.platzi.com/media/learningpath/badges/57d7a4b1-b706-454f-88a1-9fe36a1758f6.jpg" alt=""></div>
<div class="info"><span>Blockchain y Criptomonedas</span><span>171 000+</span></div>
</a>
<a href="https://platzi.com/diversidad-inclusion/" class="other-school">
<div class="school-icon"><img src="https://static.platzi.com/media/learningpath/badges/2667ed5e-b2ad-4b18-b391-36aacda9df18.jpg" alt=""></div>
<div class="info"><span>Diversidad e Inclusión</span><span>32 000+</span></div>
</a>
</div>
<div class="line"></div>
<div class="end-footer">
<span>Esta páagina fue desarrollada por <a class="cabos" href="https://github.com/CabosManuel">@CabosManuel</a></span>
<div class="dot">•</div>
<span>Combiando estilos de <a class="platzi" href="https://platzi.com/">Platzi</a> y <a class="wikipedia" href="https://www.wikipedia.org/">Wikipedia</a></span>
</div>
</footer>
</body>
</html>
.
style.css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
}
:root {
--green: #98ca3f;
--drakblue: #121f3d;
--lightblue: #24385b;
--skyblue: #0791e6;
--white: #eff3f8;
--gray: #8da2c0;
}
body {
font-family: 'Roboto', sans-serif;
font-size: 1.6rem;
background-color: var(--drakblue);
color: var(--white);
}
/* ******************** */
/* ******* MAIN ******* */
/* ******************** */
.title-subtitle {
font-family: 'Crimson Text', serif;
width: fit-content;
margin: 4rem auto 0;
display: flex;
flex-direction: column;
align-items: center;
}
.title {
font-size: 3.8rem;
display: flex;
align-items: baseline;
}
.ikilear {
font-size: 2.6rem;
}
.subtitle {
font-size: 1.6rem;
width: fit-content;
padding-left: 1rem;
}
.logo {
width: 20rem;
margin: 9rem auto 6.7rem;
}
.logo img {
width: 100%;
}
.schools {
list-style-type: none;
position: absolute;
right: 0;
left: 0;
top: 12rem;
width: 60rem;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.mini {
width: 14rem;
text-align: center;
}
.school a {
text-decoration: none;
color: var(--gray);
padding: 1rem;
margin: 0.5rem;
display: flex;
flex-direction: column;
align-items: center;
}
/* Align schools around */
.s1 { margin-left: 10rem; }
.s3 { margin-left: 6rem; }
.s5 { margin-left: 1rem; }
.s7 { margin-left: 3rem; }
.s9 { margin-left: 10rem; }
.s2 { margin-right: 8rem; }
.s4 { margin-right: 4rem; }
.s6 { margin-right: 4rem; }
.s8 { margin-right: 2rem; }
.s10 { margin-right: 8rem; }
a strong {
color: var(--skyblue);
text-decoration-color: var(--skyblue);
}
/* Underline only in strong */
.school a:hover > strong{
background-color: var(--lightblue);
text-decoration: underline;
}
.school a:hover{
background-color: var(--lightblue);
}
.search-box {
border: 1px solid var(--lightblue);
border-radius: 0.3rem;
width: 45rem;
margin: 0 auto 0;
display: flex;
align-items: center;
}
.search-input {
/* Quitar estilos */
border: 0.2rem solid transparent;
background-color: transparent;
resize: none;
outline: none;
color: var(--white);
height: 4.2rem;
font-size: 1.6rem;
flex-grow: 1;
padding: 0 2rem;
}
.lang {
color: var(--gray);
font-size: 1.4rem;
cursor: pointer;
height: 3rem;
padding: .5rem;
margin: 0 1rem;
}
button {
border: none;
outline: none;
cursor: pointer;
background-color: var(--skyblue);
width: 5.5rem;
height: 4.4rem;
padding: 1.2rem 0;
}
button img {
height: 100%;
}
/* Language selector */
.language {
display: flex;
justify-content: center;
align-items: center;
}
.line {
background-color: var(--lightblue);
height: 0.1rem;
}
.language .line {
width: 7rem;
}
.lang-selector {
background-color: var(--lightblue);
border: 0.1rem solid var(--gray);
border-radius: 0.3rem;
font-size: 1.4rem;
font-weight: bold;
cursor: pointer;
width: 27rem;
height: 3.6rem;
margin: 3.2rem 2rem;
padding: 0.8rem;
display: flex;
justify-content: center;
align-items: center;
}
.tl-icon {
display: flex;
margin-right: 1rem;
}
.up { margin-top: -0.5rem; }
.down { margin-top: 0.3rem; }
main .line {
margin: 0 2rem;
}
/* ****************************** */
/* *********** FOOTER *********** */
/* ****************************** */
footer {
color: var(--gray);
font-size: 1.4rem;
padding: 4rem 0 0 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.desc-app {
width: 33rem;
}
/* ********* DESCRIPTION ******** */
.description {
padding: 2rem;
display: flex;
}
.description img {
width: 4rem;
height: 4rem;
}
.description p {
padding: 0 0 0 2rem;
}
/* ******* DOWNLOAD APP ******* */
.dowload-app {
background-color: var(--lightblue);
margin: 1rem;
padding: 1rem;
display: flex;
justify-content: start;
}
/* App icon */
.icon-app {
width: 4.5rem;
min-width: 4.5rem;
height: 4.5rem;
border-radius: 0.8rem;
overflow: hidden;
/* shadow */
box-shadow: 0 0 0.3rem 0 var(--white);
}
.icon-app img { width: 100%; }
/* Texto */
.text {
width: auto;
padding: 0 0 0 2rem;
}
.text span {
font-weight: bold;
}
.text p {
margin: 1.5rem 0 1rem;
}
.stores {
width: 16rem;
height: auto;
display: flex;
flex-direction: column;
}
.stores img {
width: 100%;
cursor: pointer;
}
.ps { margin-left: -1rem; }
.as { margin: -1.6rem 0 0 -1.7rem; }
/* ********* OTHERS SCHOOLS ******** */
.others-schools {
text-decoration: none;
width: 55vw;
height: fit-content;
padding: 2rem 0;
min-width: 60rem;
display: flex;
justify-content: right;
flex-wrap: wrap;
}
.other-school {
width: 30%;
margin: 0 1rem 1rem;
padding: 1rem;
min-width: 18rem;
min-height: 7rem;
text-decoration: none;
display: flex;
align-items: center;
}
.other-school:hover {
background-color: var(--lightblue);
}
.school-icon {
width: 4rem;
min-width: 4rem;
}
.school-icon img {
width: 100%;
}
.info {
width: auto;
padding: 0 1rem;
text-decoration: none;
display: flex;
flex-direction: column;
}
.info span{
color: var(--gray);
}
.info span:first-child {
color: var(--skyblue);
}
footer .line {
width: 90%;
margin: 0 2rem;
}
/* ********** END FOOTER ********** */
.end-footer {
margin: 1.5rem 0;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.end-footer a {
text-decoration: none;
}
.dot {
margin: 0 0.8rem;
}
.cabos {
color: white;
font-weight: bold;
background-color: #0c8f63;
border-radius: 0.5rem;
padding: 0.3rem 0.5rem;
}
.cabos:hover {
color: #0c8f63;
background-color: white;
}
.platzi { color: var(--green); }
.wikipedia { color: #d1d1d1; }
Que bestia!!!😱 me tomo como 4 dias enteros terminar la pagina😪, pero al fin lo logre, y esta casi con todos los detalles con respecto a la original💪💪
Lo que si, me quedo con un scroll horizontal y se que se puede optimizar demasiado porque me quedaron bastantes lineas de codigo en CSS
Reto cumplido
Es un poco diferente pero es responsive y bastante bonito, trate de no usar tantos divs para cuidar la semantica, repeti alguna imagenes para que fuera más rápido el desarrollo.
Copia del Trial de Spotify
Nota: el botón salir es porque estaba haciendo practicas con nodeJs
Quize darle un dark theme, espero que te guste 😃
puedes probarlo en: https://raularmas.github.io/googledarkmode/
Comparto mi resultado:
Wow, muy buen repaso del contenido del Curso de Desarrollo Web. A parte a cumplir el desafío planteado para potenciar la memorización con la práctica constante.
Listo!!! le añadí un div para poner mi pais… Ecuador =)
Decidí tomar el reto e intentar hacer el clon de Wikipedia con HTML y CSS. Pude hacer el header y una primera parte del main content, donde lo más difícil fue ordenar los distintos lenguajes alrededor del típico logo de Wikipedia, pero lo hice probando por primera vez CSS Grid gracias al repositorio dejado en el sistema de comentarios por Byron Mesias Cueva. No es mucho pero es trabajo honesto jeje Nunca paren de aprender 💚
Un pequeño aporte para el uso de grid-template-columns. Pueden utilizar repeat para no estar repitiendo, les paso como quedaría.
grid-template-columns: repeat(2, 1fr);
Tarde como un poco más de una semana; pero intente lo más que se pareciera al sitio original.
https://yael-code.github.io/Wikipedia.org-CLONE/
Repositorio: https://github.com/yael-code/Wikipedia.org-CLONE
Reto Wikipedia terminado.
Se me complico mucho, siento que coloque mucho elementos a la “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
Me tomo un rato pero finalmente pude terminar mi clon de Wikipedia, dejo repositorio de Github por si alguien quiere ver el codigo .
https://github.com/TomasNA-123/Google-Wikipedia-clone
Les comparto en enlace de mi proyecto. 🚀
https://ernerdo-google.vercel.app/
Así quedo mi clon, planeo cambiar unas cositas en el footer. Pero me siento satisfecha, todo lo aprendido tiene más loica cuando se aplica de inmediato.
increíble proyecto me encanto el resultado el profe Diego explica muy bien pero lo que me encanto es que todo el proyecto es de una forma semantica
Reto terminado, duré un poco, pero lo terminé, aunque sé que todavía quedan cositas por mejorar
Me tomo 4 días, que horror. Lo bueno de hacer el reto es que se aprende mucho màs.
Definitivamente hay que practicar mucho.
¡Que buen curso!
Asi me quedó usando flex
footer{
width: 100%;
height: 60px;
position: absolute;
bottom: 0;
display: flex;
justify-content: space-between;
background-color: #f2f2f2;
}
footer ul{
list-style: none;
}
footer a{
color: #5f6368;
margin-right: 17px;
font-size: 14px;
}
footer .footer-right{
margin-right: 10px;
display: flex;
align-items: center;
justify-content: center;
}
footer .footer-left{
padding: 0;
margin-left: 20px;
display: flex;
align-items: center;
justify-content: center;
}
que genial que poco a poco se fue practicando todo lo aprendido en cursos anteriores y se reforzaron algunas contenidos. excelente profesor
Me siento con suerte
Mi código: https://github.com/jcavelez/google-clone
La página: https://github.com/jcavelez/google-clone
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í
Hola a todos, acá les comparto el ejercicio del clon de la página de Google, montada en GitHub Pages y el respositorio, y también del reto de clonar la página de Wikipedia. El clon de Google es tal cual el que se hizo acá en el curso. El clon de Wikipedia es responsive y traté de clonar todas las características de los componentes, media queries, layouts y estilos de cada elemento. Espero les sirva. Saludos
Mi wikiClone con responsive design:
Desk
Tablet
Movil
Codigo
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./tabletStyle.css" media="screen and (min-width: 480px)">
<link rel="stylesheet" href="./desktopStyle.css" media="screen and (min-width: 769px)">
<title>WikiClone</title>
</head>
<body>
<header>
<picture class="wikiLogo">
<img src="./img/Wikipedia-logo-v2.png" alt="Logo de wikipedia">
</picture>
<figure class="wikiLogo-text">
<img src="./img/WikipediaText.svg.png" alt="Logo en texto de wikipedia">
</figure>
</header>
<main>
<section class="mainBuscador">
<div class="mainBuscador-contenedor">
<label for="" class="mainBuscador-contenedor_input">
<input type="text">
</label>
<a href="" class="mainBuscador-contenedor_texto">
<span>ES ∨</span>
</a>
<a href="" class="mainBuscador-contenedor_lupa">
<img src="./img/lupa-blanca.png" alt="">
</a>
</div>
</section>
<section class="mainIdiomas">
<div class="mainIdiomas-1">
<a href="">
<strong>English</strong>
<span>6 458 000+ articles</span>
</a>
</div>
<div class="mainIdiomas-2">
<a href="">
<strong>日本語</strong>
<span>1 314 000+ 記事</span>
</a>
</div>
<div class="mainIdiomas-3">
<a href="">
<strong>Español</strong>
<span>1 755 000+ artículos</span>
</a>
</div>
<div class="mainIdiomas-4">
<a href="">
<strong>Русский</strong>
<span>1 798 000+ статей</span>
</a>
</div>
<div class="mainIdiomas-5">
<a href="">
<strong>Deutsch</strong>
<span>2 667 000+ Artikel</span>
</a>
</div>
<div class="mainIdiomas-6">
<a href="">
<strong>Français</strong>
<span>2 400 000+ articles</span>
</a>
</div>
<div class="mainIdiomas-7">
<a href="">
<strong>Italiano</strong>
<span>1 742 000+ voci</span>
</a>
</div>
<div class="mainIdiomas-8">
<a href="">
<strong>中文</strong>
<span>1 256 000+ 条目/條目</span>
</a>
</div>
<div class="mainIdiomas-9">
<a href="">
<strong>Português</strong>
<span>1 085 000+ artigos</span>
</a>
</div>
<div class="mainIdiomas-10">
<a href="">
<strong>العربية</strong>
<span>1 159 000+ مقالة</span>
</a>
</div>
</section>
<div class="lang-list-border"></div>
<section class="mainBoton">
<div>
<button>
<img src="./img/translate.png" alt="">
<span>Leer Wikipedia en tu idioma ∨</span>
</button>
</div>
</section>
</main>
<footer>
<hr>
<section class="footerWikiVers">
<article class="footerWikiVers-1">
<div class="footerWikiVers-fundacion">
<img src="./img/WikimediaFoundation.jpg" alt="">
<div>
<span>Wikipedia es alojada por la Fundación Wikimedia, una organización sin fines de lucro que también alberga una gama de otros proyectos.</span>
<a href="">Puedes apoyar nuestro trabajo con una donación.</a>
</div>
</div>
</article>
<article class="footerWikiVers-3">
<div class="footerWikiVers-download">
<div class="footerWikiVers-download_titulo">
<img src="./img/w.png" alt="">
<strong>Descargar Wikipedia para Android o iOS</strong>
</div>
<div class="footerWikiVers-download_titulo2">
<span class="footerWikiVers-download_texto">Guarda tus artículos favoritos para leerlos sin conexión, sincroniza tus listas de lectura en varios dispositivos y personaliza tu experiencia de lectura con la aplicación oficial de Wikipedia.</span>
<div class="footerWikiVers-download_stores">
<a href="">
<img src="./img/googlePlay.png" alt="">
</a>
<a href="">
<img src="./img/appStore.png" alt="">
</a>
</div>
</div>
</div>
</article>
<article class="footerWikiVers-2">
<div class="footerWikiVers-wikisContainer">
<div class="footerWikiVers-wikis">
<picture class="footerWikiVers-wikis_imagen">
<img src="./img/commonswiki-3x.png" alt="">
</picture>
<div class="footerWikiVers-wikis_texto">
<a href="">Commons</a>
<span>Fotos libremente utilizables y más</span>
</div>
</div>
<div class="footerWikiVers-wikis">
<picture class="footerWikiVers-wikis_imagen">
<img src="./img/Wikivoyage.png" alt="">
</picture>
<div class="footerWikiVers-wikis_texto">
<a href="">Wikiviajes</a>
<span>La guía de viajes libre</span>
</div>
</div>
<div class="footerWikiVers-wikis">
<picture class="footerWikiVers-wikis_imagen">
<img src="./img/Wiktfavicon.png" alt="">
</picture>
<div class="footerWikiVers-wikis_texto">
<a href="">Wikcionario</a>
<span>El diccionario libre</span>
</div>
</div>
<div class="footerWikiVers-wikis">
<picture class="footerWikiVers-wikis_imagen">
<img src="./img/Wikibooksg.png" alt="">
</picture>
<div class="footerWikiVers-wikis_texto">
<a href="">Wikilibros</a>
<span>Libros de contenido libre</span>
</div>
</div>
<div class="footerWikiVers-wikis">
<picture class="footerWikiVers-wikis_imagen">
<img src="./img/Wikinews.png" alt="">
</picture>
<div class="footerWikiVers-wikis_texto">
<a href="">Wikinoticias</a>
<span>La fuente de noticias libres</span>
</div>
</div>
<div class="footerWikiVers-wikis">
<picture class="footerWikiVers-wikis_imagen">
<img src="./img/Wikidata.png" alt="">
</picture>
<div class="footerWikiVers-wikis_texto">
<a href="">Wikidata</a>
<span>Base de conocimiento libre</span>
</div>
</div>
<div class="footerWikiVers-wikis">
<picture class="footerWikiVers-wikis_imagen">
<img src="./img/Wikiversity.png" alt="">
</picture>
<div class="footerWikiVers-wikis_texto">
<a href="">Wikiversidad</a>
<span>Plataforma educativa libre</span>
</div>
</div>
<div class="footerWikiVers-wikis">
<picture class="footerWikiVers-wikis_imagen">
<img src="./img/Wikiquote.png" alt="">
</picture>
<div class="footerWikiVers-wikis_texto">
<a href="">Wikiquote</a>
<span>La colección de citas</span>
</div>
</div>
<div class="footerWikiVers-wikis">
<picture class="footerWikiVers-wikis_imagen">
<img src="./img/MediaWiki.png" alt="">
</picture>
<div class="footerWikiVers-wikis_texto">
<a href="">MediaWiki</a>
<span>Aplicación wiki libre y abierta</span>
</div>
</div>
<div class="footerWikiVers-wikis">
<picture class="footerWikiVers-wikis_imagen">
<img src="./img/Wikisource.png" alt="">
</picture>
<div class="footerWikiVers-wikis_texto">
<a href="">Wikisource</a>
<span>La biblioteca libre</span>
</div>
</div>
<div class="footerWikiVers-wikis">
<picture class="footerWikiVers-wikis_imagen">
<img src="./img/Wikispecies.png" alt="">
</picture>
<div class="footerWikiVers-wikis_texto">
<a href="">Wikispecies</a>
<span>Directorio de especies libre</span>
</div>
</div>
<div class="footerWikiVers-wikis">
<picture class="footerWikiVers-wikis_imagen">
<img src="./img/Proposed.png" alt="">
</picture>
<div class="footerWikiVers-wikis_texto">
<a href="">Meta-Wiki</a>
<span>Coordinación y documentación comunitaria</span>
</div>
</div>
</div>
</article>
</section>
<hr>
<section class="footerList">
<span>Esta página está disponible bajo la </span>
<a href="">licencia Creative Commons Atribución-CompartirIgual</a>
<a href="">Términos de uso</a>
<a href="" class="footerList-3">Normativa de privacidad</a>
</section>
</footer>
</body>
</html>
CSS
Movil:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html{
font-size: 62.5%;
}
body{
font-size: 1.4rem;
font-family: Helvetica, Arial, sans-serif;
}
img{
width: 4rem;
height: auto;
}
a {
text-decoration: none;
cursor: pointer;
color: #3366cc;
}
hr {
width: 100%;
max-width: 95%;
margin: 0 auto;
border: 0.1rem solid #c8ccd1;
border-top: solid white;
border-left: solid white;
border-right: solid white;
height: 0;
}
header{
width: 100%;
height: 6rem;
display: flex;
justify-content: center;
align-items: center;
margin-top: 4.5rem;
}
header .wikiLogo img {
width: 5.7rem;
}
header .wikiLogo-text img {
width: 16.5rem;
}
main{
width: 100%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
main .mainBuscador{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 1.2rem;
}
main .mainBuscador-contenedor {
border: 0.1rem #a2a9b1 solid;
border-radius: 0.2rem;
height: 4.4rem;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-left: 1rem;
margin-right: 1rem;
}
main .mainBuscador-contenedor_input {
width: 100%;
}
main .mainBuscador-contenedor_input input{
margin-left: 0.8rem;
border: none;
outline: none;
width: 100%;
}
main .mainBuscador-contenedor_texto{
padding-left: 1.1rem;
padding-right: 1.1rem;
width: 9rem;
color: #686b6e;
}
main .mainBuscador-contenedor_texto span {
padding: 0.5rem;
}
main .mainBuscador-contenedor_texto span:hover{
background-color: #f5f5f5;
}
main .mainBuscador-contenedor_lupa {
height: 4.4rem;
border-radius: 0.3rem;
background-color: #3366cc;
display: flex;
justify-content: center;
align-items: center;
padding-left: 1.1rem;
padding-right: 1.1rem;
}
main .mainBuscador-contenedor_lupa:hover {
background-color: #3f7af0;
}
main .mainBuscador-contenedor_lupa img {
width: 2.2rem;
}
main .mainIdiomas {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
}
main .mainIdiomas div{
width: 33.33%;
height: 6.4rem;
padding-left: 1.6rem;
padding-right: 1.6rem;
margin-bottom: 1.6rem;
display: flex;
justify-content: center;
align-items: center;
}
main .mainIdiomas div a{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
main .mainIdiomas div a strong{
margin-bottom: 0.4rem;
}
main .mainIdiomas div a span{
text-align: center;
color: #686b6e;
align-self: center;
}
main .mainIdiomas div a:hover {
background-color: #f5f5f5;
}
main .mainBoton{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 4rem;
margin-top: 3.5rem;
}
main .mainBoton div{
display: block;
position: absolute;
}
main .mainBoton button {
width: 27.6rem;
height: 3.6rem;
background-color: #f8f9fa;
border: 0.1rem #a2a9b1 solid;
border-radius: 0.2rem;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
main .mainBoton button:hover {
background-color: white;
}
main .mainBoton button img {
width: 2.2rem;
}
main .mainBoton button span {
font-weight: bold;
color: #3366cc;
padding-left: 0.6rem;
}
main .lang-list-border{
background-color: #c8ccd1;
height: 0.1rem;
width: 80%;
max-width: 460px;
margin: -1.6rem auto 1.6rem;
display: block;
position: relative;
top: 5.2rem;
}
footer .footerWikiVers {
display: flex;
flex-wrap: wrap;
padding: 1rem;
}
footer .footerWikiVers article {
display: flex;
flex-wrap: wrap;
}
footer .footerWikiVers .footerWikiVers-1{
order: 1;
}
footer .footerWikiVers .footerWikiVers-3{
order: 3;
}
footer .footerWikiVers .footerWikiVers-2{
order: 2;
}
footer .footerWikiVers .footerWikiVers-fundacion {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
footer .footerWikiVers .footerWikiVers-fundacion img{
width: 4.2rem;
margin-bottom: 1.3rem;
}
footer .footerWikiVers .footerWikiVers-fundacion a{
margin-bottom: 3rem;
}
footer .footerWikiVers span{
color: #686b6e;
font-size: 1.3rem;
}
footer .footerWikiVers .footerWikiVers-wikisContainer {
display: flex;
flex-wrap: wrap;
}
footer .footerWikiVers .footerWikiVers-wikis {
width: 50%;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 1rem;
cursor: pointer;
}
footer .footerWikiVers .footerWikiVers-wikis:hover{
background-color: #f5f5f5;
}
footer .footerWikiVers .footerWikiVers-wikis .footerWikiVers-wikis_imagen{
width: 5.7rem;
}
footer .footerWikiVers .footerWikiVers-wikis .footerWikiVers-wikis_imagen img {
width: 4.7rem;
margin-right: 1rem;
}
footer .footerWikiVers .footerWikiVers-wikis .footerWikiVers-wikis_texto{
display: flex;
flex-direction: column;
}
footer .footerWikiVers .footerWikiVers-wikis .footerWikiVers-wikis_texto a{
margin-bottom: 0.5rem;
}
footer .footerWikiVers .footerWikiVers-download {
width: 100%;
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
text-align: center;
}
footer .footerWikiVers .footerWikiVers-download .footerWikiVers-download_titulo {
display: flex;
justify-items: center;
align-items: center;
margin-bottom: 1.5rem;
}
footer .footerWikiVers .footerWikiVers-download .footerWikiVers-download_titulo img {
width: 2.5rem;
margin-right: 1rem;
}
footer .footerWikiVers .footerWikiVers-download .footerWikiVers-download_titulo strong {
color: #686b6e;
}
footer .footerWikiVers .footerWikiVers-download .footerWikiVers-download_texto {
margin-top: 1.3rem;
margin-bottom: 1.3rem;
}
footer .footerWikiVers .footerWikiVers-download .footerWikiVers-download_stores {
margin-bottom: 4rem;
margin-top: 2rem;
}
footer .footerWikiVers .footerWikiVers-download .footerWikiVers-download_stores a img{
height: 3.8rem;
width: auto;
}
footer .footerList {
margin: 1.5rem .5rem 1.4rem .6rem;
text-align: center;
}
footer .footerList a::after {
margin-left: 0.8rem;
margin-right: 0.5rem;
content: "•";
color: #686b6e;
}
footer .footerList .footerList-3::after {
content: none;
}
Tablet:
header .wikiLogo-text {
display: block;
position: absolute;
}
header .wikiLogo {
display: block;
position: relative;
top: 19.2rem;
}
header .wikiLogo img{
width: 20rem;
}
main {
max-width: 540px;
margin: 0 auto;
}
main .mainIdiomas{
order: 1;
}
main .mainBuscador{
order: 2;
max-width: 43rem;
margin: 0 auto;
margin-top: 1.5rem;
}
main .lang-list-border{
order: 3;
}
main .mainBoton{
order: 4;
}
main .mainIdiomas div{
width: 50%;
margin-bottom: 0rem;
}
main .mainIdiomas .mainIdiomas-3 {
justify-content: flex-start;
padding-left: 2.6rem;
}
main .mainIdiomas .mainIdiomas-5 {
justify-content: flex-start;
}
main .mainIdiomas .mainIdiomas-7 {
justify-content: flex-start;
padding-left: 2.6rem;
}
main .mainIdiomas .mainIdiomas-4 {
justify-content: flex-end;
padding-right: 2.6rem;
}
main .mainIdiomas .mainIdiomas-6 {
justify-content: flex-end;
}
main .mainIdiomas .mainIdiomas-8 {
justify-content: flex-end;
padding-right: 2.6rem;
}
footer .footerWikiVers .footerWikiVers-wikis {
width: 33.33%;
}
Desk:
footer .footerWikiVers{
display: block;
}
footer .footerWikiVers .footerWikiVers-1{
width: 30%;
float: left;
clear: left;
}
footer .footerWikiVers .footerWikiVers-3{
width: 30%;
float: left;
clear: left;
}
footer .footerWikiVers .footerWikiVers-2{
width: 70%;
}
footer .footerWikiVers .footerWikiVers-wikisContainer{
margin-left: 2rem;
}
footer .footerWikiVers .footerWikiVers-fundacion{
flex-direction: row;
align-items: flex-start;
margin-bottom: 1rem;
}
footer .footerWikiVers .footerWikiVers-fundacion div {
text-align: start;
}
footer .footerWikiVers .footerWikiVers-fundacion img {
margin-right: 1rem;
}
footer .footerWikiVers .footerWikiVers-download {
align-items: flex-start;
text-align: start;
}
footer .footerWikiVers .footerWikiVers-download .footerWikiVers-download_titulo img{
width: 3.5rem;
margin-right: 1.7rem;
}
footer .footerWikiVers .footerWikiVers-download .footerWikiVers-download_titulo2 {
padding-left: 5.2rem;
}
Bueno yo lo personalicé un poco jeje
Reto terminado, estoy super feliz de haberlo logrado, sé que en un futuro lo veré y diré wow, qué feo está este código, jejeje, pero por ahora es trabajo honesto y estoy orgullosa de ello.
Se los comparto por aquí!
https://lizzquintero.github.io/clone_wikipedia/
y aquí encuentran el repositorio, luego lo haré en responsive design.
Asi quedo mi versión de wikipedia. no la hice responsive, e intente acercarme lo mas posible a la version original. tiene bastantes errores y me llevo dos dias en hacerlo. ahora con el curso que sigue de mobil first voy a volver a hacerla para que quede 100% responsive y subirlo a github
Tambien se me complico mucho para no usar muchos div lo cual no encontre la forma de solucionarlo
Asi y todo, muy contento con mi resultado y lo esperado del curso
Mi trabajo humilde 😄
Listo.
Pueden ver mis otros proyectos en https://leodexe.github.io
Para que puedan realizar otros proyectos para su portafolio https://platzi.com/blog/5-proyectos-para-tu-portafolio-como-frontend-developer/
Listo!! Ahora vamos con el clon de Wikipedia
Les comparto mi version del clon de la pagina de google en modo nocturno-
Después de más de 2 días…
Un lindo desafío que puso a prueba los conocimientos adquiridos en el curso. Para poder completarlo tuve que buscar información, pero pude hacerlo!!
Da mucha satisfacción poder avanzar en los cursos.
Mi aporte en modo oscuro
Reto completado.
Me costo bastante realizarlo, aquí se los comparto.
Me costó lo suyo, pero aquí está. mi Clonepedia, hecho con media queries para que sea totalmente responsive 😛
En desktop
Para tablets:
para móviles:
html:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wikipedia</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="./tablet.css" media="screen and (min-width: 480px)">
<link rel="stylesheet" href="./desktop.css" media="screen and (min-width: 770px)">
<link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/7/75/Wikipedia_mobile_app_logo.png" type="image/x-icon">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap" rel="stylesheet">
</head>
<body>
<header>
<figure>
<img src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png" alt="">
</figure>
<h1>
<span class="title-logo">WIKIPEDIA</span>
<span class="subtitle-logo">La enciclopedia libre</span>
</h1>
</header>
<main>
<section class="languages">
<div class="spanish mark">
<a href="">
<strong>Español</strong>
<div>
<span>1 717 00+</span>
<span>artículos</span>
</div>
</a>
</div>
<div class="ingles mark">
<a href="">
<strong>English</strong>
<div>
<span>6 383 000+</span>
<span>articles</span>
</div>
</a>
</div>
<div class="chino mark">
<a href="">
<strong>日本語</strong>
<div>
<span>1 292 000+</span>
<span>記事</span>
</div>
</a>
</div>
<div class="ruso mark">
<a href="">
<strong>Русский</strong>
<div>
<span>1 756 000+</span>
<span>статей</span>
</div>
</a>
</div>
<div class="aleman mark">
<a href="">
<strong>Deutsch</strong>
<div>
<span>2 617 000+</span>
<span>Artikel</span>
</div>
</a>
</div>
<div class="frances mark">
<a href="">
<strong>Français</strong>
<div>
<span>2 362 000+</span>
<span>articles</span>
</div>
</a>
</div>
<div class="japones mark">
<a href="">
<strong>中文</strong>
<div>
<span>1 231 000+</span>
<span>條目</span>
</div>
</a>
</div>
<div class="italiano mark">
<a href="">
<strong>Italiano</strong>
<div>
<span>1 718 000+</span>
<span>voci</span>
</div>
</a>
</div>
<div class="portugues mark">
<a href="">
<strong>Português</strong>
<div>
<span>1 074 000+</span>
<span>artigos</span>
</div>
</a>
</div>
<div class="polski mark">
<a href="">
<strong>Polski</strong>
<div>
<span>1 490 000</span>
<span>haseł</span>
</div>
</a>
</div>
</section>
<section class="searchbar">
<div class="search-rectangle">
<label for="">
<input type="text" name="" id="">
<select name="" id="">
<option value="es">ES</option>
<option value="en">EN</option>
<option value="jp">中文</option>
</select>
</label>
</div>
<div class="search-icon">
<svg x="0px" y="0px"
width="22" height="22"
viewBox="0 0 30 30"
style=" fill:#ffffff;"><path d="M 13 3 C 7.4889971 3 3 7.4889971 3 13 C 3 18.511003 7.4889971 23 13 23 C 15.396508 23 17.597385 22.148986 19.322266 20.736328 L 25.292969 26.707031 A 1.0001 1.0001 0 1 0 26.707031 25.292969 L 20.736328 19.322266 C 22.148986 17.597385 23 15.396508 23 13 C 23 7.4889971 18.511003 3 13 3 z M 13 5 C 17.430123 5 21 8.5698774 21 13 C 21 17.430123 17.430123 21 13 21 C 8.5698774 21 5 17.430123 5 13 C 5 8.5698774 8.5698774 5 13 5 z"></path>
</svg>
</div>
</section>
<section class="language-read">
<div class="container-border">
<button class="lang-conainertext">
<span><svg x="0px" y="0px"
width="2.2rem" height="2.2rem"
viewBox="0 0 50 50"
style=" fill:#5c98d6;"><path d="M 6 3 C 4.300781 3 3 4.300781 3 6 L 3 26 C 3 27.699219 4.300781 29 6 29 L 6.40625 29 L 8 27 L 6 27 C 5.398438 27 5 26.601563 5 26 L 5 6 C 5 5.398438 5.398438 5 6 5 L 26 5 C 26.601563 5 27 5.398438 27 6 L 27 21 L 24 21 C 22.300781 21 21 22.300781 21 24 L 21 27 L 16 27 L 17.59375 29 L 21 29 L 21 32.40625 L 23 34.09375 L 23 24 C 23 23.398438 23.398438 23 24 23 L 44 23 C 44.601563 23 45 23.398438 45 24 L 45 44 C 45 44.601563 44.601563 45 44 45 L 24 45 C 23.398438 45 23 44.601563 23 44 L 23 42 L 21 43.6875 L 21 44 C 21 45.699219 22.300781 47 24 47 L 44 47 C 45.699219 47 47 45.699219 47 44 L 47 24 C 47 22.300781 45.699219 21 44 21 L 29 21 L 29 6 C 29 4.300781 27.699219 3 26 3 Z M 16 8 L 16 10 L 8 10 L 8 12 L 19.90625 12 C 19.597656 14.226563 18.292969 16.054688 16.65625 17.53125 C 14.148438 15.332031 12.875 13.03125 12.875 13.03125 L 11.125 13.96875 C 11.125 13.96875 12.433594 16.378906 15.0625 18.78125 C 14.996094 18.828125 14.941406 18.890625 14.875 18.9375 C 12.234375 20.757813 9.59375 21.65625 9.59375 21.65625 L 10.21875 23.5625 C 10.21875 23.5625 13.125 22.597656 16.03125 20.59375 C 16.238281 20.449219 16.449219 20.28125 16.65625 20.125 C 17.796875 20.96875 19.125 21.742188 20.625 22.34375 L 21.375 20.46875 C 20.226563 20.011719 19.199219 19.417969 18.28125 18.78125 C 20.109375 17.050781 21.636719 14.792969 21.9375 12 L 25 12 L 25 10 L 18 10 L 18 8 Z M 12 25 L 7 31 L 10 31 L 10 35 L 14 35 L 14 31 L 17 31 Z M 33 26.40625 L 27.8125 40.1875 L 30.3125 40.1875 L 31.40625 37 L 36.6875 37 L 37.8125 40.1875 L 40.3125 40.1875 L 35.09375 26.40625 Z M 34 29.40625 L 36 35.09375 L 32 35.09375 Z M 19 33 L 19 36 L 10 36 L 14 40 L 19 40 L 19 43 L 25 38 Z"></path></svg></span>
<span>Leer Wikipedia en tu idioma</span>
<span><img src="https://img.icons8.com/material-outlined/24/4a90e2/expand-arrow--v1.png"/></span>
</button>
</div>
</section>
<hr class="separator1">
<section class="bottom-page">
<div class="wikigroup-title">
<figure><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Wikimedia_logo_white.svg/1024px-Wikimedia_logo_white.svg.png" alt=""></figure>
<div class="wikigroup-title_info">
<div>Wikipedia es alojada por la Fundación Wikimedia, una organización sin fines de lucro que también alberga una gama de otros proyectos.</div>
<div><a style="color: #5c98d6;" href="">Usted puede apoyar nuestro trabajo con una donación.</a></div>
</div>
</div>
<div class="wikigroup-buttons">
<a href="">
<div class="apps commons">
<div><img style="width: 4.7rem; height: 4.7rem;" src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Commons-logo.svg" alt=""></div>
<div class="apps-title">
<span style="color: #5c98d6;">Commons</span>
<span style="color: #b0a99f;">Fotos libremente utilizables y más</span>
</div>
</div>
</a>
<a href="">
<div class="apps wikiviajes">
<div><img style="width: 3.6rem;height: 3.6rem;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Wikivoyage-Logo-v3-icon.svg/1024px-Wikivoyage-Logo-v3-icon.svg.png" alt=""></div>
<div class="apps-title">
<span style="color: #5c98d6;">Wikiviajes</span>
<span style="color: #b0a99f;">La guía de viajes libre</span>
</div>
</div>
</a>
<a href="">
<div class="apps wikciionario">
<div><img style="width: 3.7rem;height: 3.7rem;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Wiktfavicon_en.svg/1024px-Wiktfavicon_en.svg.png" alt=""></div>
<div class="apps-title">
<span style="color: #5c98d6;">Wikcionario</span>
<span style="color: #b0a99f;">El diccionario libre</span>
</div>
</div>
</a>
<a href="">
<div class="apps wikilibros">
<div><img style="width: 3.6rem;height: 3.6rem;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Wikibooks-logo.svg/1200px-Wikibooks-logo.svg.png" alt=""></div>
<div class="apps-title">
<span style="color: #5c98d6;">Wikilibros</span>
<span style="color: #b0a99f;">Libros de contenido libre</span>
</div>
</div>
</a>
<a href="">
<div class="apps wikinoticias">
<div><img style="width: 4.7rem;height: 2.6rem;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Wikinews-logo.svg/1200px-Wikinews-logo.svg.png" alt=""></div>
<div class="apps-title">
<span style="color: #5c98d6;">Wikinoticias</span>
<span style="color: #b0a99f;">La fuente de noticias libres</span>
</div>
</div>
</a>
<a href="">
<div class="apps wikidata">
<div><img style="width: 4.9rem;height: 4.9rem;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Notification-icon-Wikidata-logo.svg/1200px-Notification-icon-Wikidata-logo.svg.png" alt=""></div>
<div class="apps-title">
<span style="color: #5c98d6;">Wikidata</span>
<span style="color: #b0a99f;">Base de conocimiento libre</span>
</div>
</div>
</a>
<a href="">
<div class="apps wikiversidad">
<div><img style="width: 4.3rem;height: 3.7rem;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Wikiversity_logo_2017.svg/1200px-Wikiversity_logo_2017.svg.png" alt=""></div>
<div class="apps-title">
<span style="color: #5c98d6;">Wikiversidad</span>
<span style="color: #b0a99f;">Plataforma educativa libre</span>
</div>
</div>
</a>
<a href="">
<div class="apps wikiquote">
<div><img style="width: 4.2rem;height: 4.2rem;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Notification-icon-Wikiquote.svg/1200px-Notification-icon-Wikiquote.svg.png" alt=""></div>
<div class="apps-title">
<span style="color: #5c98d6;">Wikiquote</span>
<span style="color: #b0a99f;">La colección de citas</span>
</div>
</div>
</a>
<a href="">
<div class="apps mediawiki">
<div><img style="width: 4.2rem;height: 4.2rem;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/MediaWiki-2020-large-icon.svg/222px-MediaWiki-2020-large-icon.svg.png" alt=""></div>
<div class="apps-title">
<span style="color: #5c98d6;">MediaWiki</span>
<span style="color: #b0a99f;">Aplicación wiki libre y abierta</span>
</div>
</div>
</a>
<a href="">
<div class="apps wikisource">
<div><img style="width: 3.9rem;height: 3.9rem;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Wikisource-logo.svg/1200px-Wikisource-logo.svg.png" alt=""></div>
<div class="apps-title">
<span style="color: #5c98d6;">Wikisource</span>
<span style="color: #b0a99f;">La biblioteca libre</span>
</div>
</div>
</a>
<a href="">
<div class="apps wikispecies">
<div><img style="width: 4.2rem;height: 4.2rem;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Wikispecies-logo.svg/1200px-Wikispecies-logo.svg.png" alt=""></div>
<div class="apps-title">
<span style="color: #5c98d6;">Wikispecies</span>
<span style="color: #b0a99f;">Directorio de especies libre</span>
</div>
</div>
</a>
<a href="">
<div class="apps metawiki">
<div><img style="width: 3.7rem;height: 3.7rem;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Meta-Wiki_Proposed_logo.svg/1200px-Meta-Wiki_Proposed_logo.svg.png" alt=""></div>
<div class="apps-title">
<span style="color: #5c98d6;">Meta-Wiki</span>
<span style="color: #b0a99f;">Coordinación y documentación comunitaria</span>
</div>
</div>
</a>
</div>
<div class="mobile-dowload">
<div class="mobiletitle"><img src="https://upload.wikimedia.org/wikipedia/commons/7/75/Wikipedia_mobile_app_logo.png" alt="">
<strong>Descargar Wikipedia para Android o iOS</strong></div>
<p>Guarda tus artículos favoritos para leerlos sin conexión, sincroniza tus listas de lectura en varios dispositivos y personaliza tu experiencia de lectura con la aplicación oficial de Wikipedia.</p>
<ul>
<li><a href="https://play.google.com/store/apps/details?id=org.wikipedia&referrer=utm_source%3Dportal%26utm_medium%3Dbutton%26anid%3Dadmob"><figure class="shop-icon"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Google_Play_Store_badge_EN.svg/512px-Google_Play_Store_badge_EN.svg.png" alt=""></figure></a></li>
<li><a href="https://itunes.apple.com/app/apple-store/id324715238?pt=208305&ct=portal&mt=8"><figure class="shop-icon"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Download_on_the_App_Store_Badge.svg/135px-Download_on_the_App_Store_Badge.svg.png" alt=""></figure></a></li>
</ul>
</div>
</section>
</main>
<hr>
<footer>
<div>
Esta página está disponible bajo la
<a href="">licencia Creative Commons Atribución-CompartirIgual</a>
<a href="">Términos de uso</a>
<a href="">Normativa de privacidad</a>
</ul>
</div>
</footer>
</body>
</html>
CSS (el principal para moviles)
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html{
font-size: 62.5%;
}
body{
background-color: #181a1b;
color: #b0a99f;
display: flex;
flex-direction: column;
margin: .4rem 0 1.6rem 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
ul{
list-style: none;
}
a{
color: white;
text-decoration: none;
}
img{
width: 100%;
}
hr{
border-bottom: 0.1rem solid;
border-color:#535c61 ;
margin: .26rem 1.3rem;
}
/* header */
header{
margin-top: 2rem;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
header figure{
width: 5.2rem;
position: relative;
}
header h1{
margin-left: 1rem;
display: flex;
flex-direction: column;
align-items: center;
font-family: 'EB Garamond', serif;
font-weight: normal;
font-size: 1.4rem;
color: white;
position: relative;
}
header h1 .title-logo{
font-size: 2.2rem;
}
header h1 .title-logo::first-letter{
font-size: 3.2rem;
}
header h1 .subtitle-logo{
position: relative;
bottom: .9rem;
left: .3rem;
}
/* contenido */
main{
width: 100%;
display: flex;
flex-direction: column;
}
/* menu de lenguajes */
.languages{
order:2;
display: grid;
grid-template-columns: auto auto auto;
}
.mark{
padding: 0 1.6rem;
margin-bottom: 1.6rem;
}
.mark a{
display: flex;
flex-direction: column;
text-align: center;
}
.mark a div{
display: flex;
flex-direction: column;
text-align: center;
}
.mark:hover{
background-color: #222526;
}
.mark a strong{
font-size: 1.4rem;
color: #5c98d6;
}
.mark a span{
font-size: 1.3rem;
color: #b0a99f;
}
/* control de busqueda */
.searchbar{
order: 1;
margin: 1rem;
display: flex;
justify-content: center;
}
.searchbar .search-rectangle{
border: solid #484e51 ;
border-width: .1rem 0 .1rem .1rem;
padding: .8rem;
width: 100%;
}
.searchbar .search-rectangle:hover{
border: #655d53 solid;
border-width: .1rem 0 .1rem .1rem;;
}
.searchbar .search-rectangle:focus-within{
border: rgb(36, 71, 143) .1rem solid;
}
.searchbar .search-rectangle label{
display: flex;
justify-content: space-between;
}
.searchbar .search-rectangle select{
color: white;
background-color: #181a1b;
border: none;
}
.searchbar .search-rectangle input{
color: white;
background-color: #181a1b;
border: none;
height: 2.4rem;
outline: none;
flex-grow: 1;
margin-right: 1rem;
}
.search-icon{
width: 5.6rem;
height: 4.2rem;
background-color: #2952a3;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.search-icon:hover{
background-color: #093ba1;
}
.language-read{
order: 3;
margin: 1rem;
display: flex;
justify-content: center;
}
.container-border{
background-color: #303436;
padding: 2rem;
border-radius: 2rem;
width: 30rem;
}
.lang-conainertext{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: .6rem 1.2rem;
border: .1rem #484e51 solid;
background-color: #1b1e1f;
color: #5c98d6;
font-weight: bold;
cursor: pointer;
}
.lang-conainertext:hover{
background-color: rgba(0, 0, 0, 0.514);
}
/* otras wikis */
.bottom-page{
order: 5;
margin: .96rem .64rem 1.28rem;
display: flex;
flex-direction: column;
justify-content: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 1.3rem;
}
.bottom-page .wikigroup-title figure{
width: 4.2rem;
margin: 0 auto 1.2rem auto;
}
.bottom-page .wikigroup-title div{
text-align: center;
}
.wikigroup-buttons{
display: grid;
grid-template-columns: auto auto;
margin:2rem 0
}
.wikigroup-buttons a .apps{
display: flex;
padding: 1.3rem;
align-items: center;
}
.wikigroup-buttons a .apps .apps-title{
display: flex;
flex-direction: column;
font-size: 1.3rem;
}
.wikigroup-buttons a .apps:hover{
background-color: #222526;
}
.wikigroup-buttons .apps img{
margin-right: 1rem;
}
.apps:hover{
background-color: #222526 ;
}
.mobile-dowload{
background-color: #1b1e1f;
padding: 1rem;
}
.mobile-dowload .mobiletitle{
display: flex;
align-items: center;
justify-content: center;
}
.mobile-dowload .mobiletitle img{
width: 2.9rem;
margin-right: .5rem;
border-radius: .5rem;
}
.mobile-dowload p{
text-align: center;
margin: 1.3rem 0;
}
.mobile-dowload ul{
display: flex;
width: 100%;
justify-content: center;
}
.shop-icon{
width: 12.4rem;
margin: 1rem;
}
.separator1{
order: 4;
}
/* footer */
footer{
width: 100%;
font-size: 1.3rem;
padding: 1.4rem;
}
footer div{
text-align: center;
}
footer div a{
color: #4f94e2;
}
footer div a::after{
content: "•";
color: rgb(128, 128, 128);
padding: .8rem;
}
footer div a :nth-child(3)::after{
content: none;
}
footer div a:hover{
text-decoration: underline;
color: #4f94e2;
}
El CSS para tablets
header{
margin-top: 4rem;
}
header h1 .title-logo{
font-size: 2.6rem;
}
header h1 .title-logo::first-letter{
font-size: 3.6rem;
}
header h1 .subtitle-logo{
font-size: 1.5rem;
}
header figure{
position: absolute;
width: 20rem;
margin: 0 auto;
top: 17rem;
}
.languages{
grid-template-columns: auto auto;
height: 32.5rem;
margin: 0 auto;
max-width: 54.6rem;
}
.mark{
position: relative;
top: 0;
}
.mark a div{
flex-direction: row;
}
.mark a div span{
margin:0 .2rem
}
.spanish{
right: 35%;
}
.chino{
right: 68%;
}
.aleman{
right:75%;
}
.japones{
right: 68%;
}
.portugues{
right: 35%;
}
.ingles{
left: 35%;
}
.ruso{
left: 68%;
}
.frances{
left:75%;
}
.italiano{
left: 68%;
}
.polski{
left: 35%;
}
.searchbar{
order: 2;
}
.search-rectangle{
max-width: 39rem;
}
.wikigroup-buttons{
display: grid;
grid-template-columns: auto auto auto;
}
Y por ultimo para PC
.bottom-page{
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto;
justify-content: center;
padding: 4.16rem 0 1.28rem 1.28rem;
position: relative;
width: 99%;
}
.bottom-page .wikigroup-title{
order: 1;
max-width: 35rem;
margin-right: 10%
}
.bottom-page .mobile-dowload{
order: 2;
grid-row: 2 / 2;
max-width: 35rem;
margin-right: 10%;
}
.bottom-page .wikigroup-buttons{
order: 3;
grid-column: 2/ 3;
grid-row: 1 / 3;
position: relative;
}
.bottom-page .mobile-dowload{
position: relative;
right: 1rem;
}
.bottom-page .mobile-dowload .mobiletitle{
justify-content: start;
}
.bottom-page .mobile-dowload div img{
width: 4.2rem;
height: 4.2rem;
text-align: start;
}
.bottom-page .wikigroup-title{
display: flex;
margin-bottom: 3.2rem;
}
.bottom-page .wikigroup-title figure img{
width: 4.2rem;
height: 4.2rem;
}
.bottom-page .wikigroup-title .wikigroup-title_info div{
text-align: start;
margin-left: 1rem;
}
.mobile-dowload p{
padding-left: 5rem;
text-align: start;
}
.mobile-dowload ul{
display: flex;
flex-wrap: wrap;
}
Se logro!
increible curso me ayudo a practicar con los conocimientos que ya tenia y ahora solo falta hacer el reto de wikipedia
seguimos las indicaciones del profe y acá estamos finalizando el curso, con el gusto de saber que hice una muy buena practica de mis habilidades.
Aca dejo el github… no me gusto como quedo la barra de busqueda https://github.com/edumoyano86/wikipediaClon
Reto finalizado:
https://samiralarcon.github.io/myclonewikipedia/
Clone de Google terminado!
¡Reto completado!
No estaba aplicando el principio de mobile first, cuando me enteré ya era muy tarde, y prácticamente inescalable. xD
Entonces, aquí dejo mi reto en modo Desktop:
Live preview: https://angelnewgate.github.io/wiki-clone-desktop/
Repositorio: https://github.com/angelNewgate/wiki-clone-desktop
Faltó agregar que los subrayados en efecto hover. en el menú principal y en el footer.
header ul li a:hover {
text-decoration: underline;
}
.footer-container__left ul li a:hover {
text-decoration: underline;
}
.footer-container__right ul li a:hover {
text-decoration: underline;
Hola señoras y señores, acabo de terminar el con de Wikipedia “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/
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.