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
Análisis del proyecto Google Clone
3/18Recursos
Transcripción
Vamos a analizar la página principal de búsqueda de Google.
Notamos que no es la versión original porque en la URL se refleja el localhost. Sin embargo, es casi idéntica. Piensa en cómo pudo haber sido creada su estructura.
- Podríamos usar un header con una etiqueta nav.
- En el body crearíamos una section con una etiqueta icon o img.
- Un input para poder ingresar información en él.
- Además de un par de button para enviar la información.
- En el footer tenemos dos etiquetas nav que están alineadas a la izquierda y derecha, cada una con hiperenlaces dentro de sus textos.
A continuación, vamos a configurar nuestro proyecto para empezar a escribir código.
Contribución creada con aportes de: José Miguel Veintimilla.
Aportes 1025
Preguntas 21
Ordenar por:
Amigos, este fue mi resultado. Como verán aún no le pongo el css, solo lo hice con HTML !
Mi primer intento de google clone uwu:
https://github.com/MrWolts/Google-Clone
Que alguien me diga si es normal que yo ya tenga en mi mente casi el código del proyecto :v desde que fui a unos cursos de arduino estoy así en cualquier cosa me imagino como seria en código y su esquema como si fuese un circuito
🟢Vamos con toda!👨🏼💻🚀
Lo complete viendo la pantalla original 😃
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Google</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<div class="nav">
<ul>
<li><a href="#">Gmail</a></li>
<li><a href="#">Imágenes</a></li>
<li><a href="#"><img src="images/menu.png" alt="menu"></a></li>
<li><a href="#"><img src="images/user.png" alt="user"></a></li>
</ul>
</div>
</header>
<section>
<div class="container">
<div class="googleContainer">
<figure>
<img src="images/google.png" alt="Google" class="imgGoogle">
</figure>
<input type="text">
<button>Buscar con Google</button><button>I´m Feeling Lucky</button>
</div>
</div>
</section>
<footer>
<div class="detailsLeft">
<p><a href="#">Publicidad</a></p>
<p><a href="#">Negocios</a></p>
<p><a href="#">Acerca de</a></p>
<p><a href="#">Cómo funciona la Búsqueda</a></p>
</div>
<div class="detailsRight">
<p><a href="#">Privacidad</a></p>
<p><a href="#">Condiciones</a></p>
<p><a href="#">Preferencias</a></p>
</div>
</footer>
</body>
</html>
No me quedo de la mejor manera, pero creo que para ser el segundo curso que voy a tomar no esta del todo mal :v
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
font-family: Arial, sans-serif;
}
.header {
width: 100%;
height: 60px;
}
.header-nav {
height: 60px;
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
}
.header-nav a {
text-decoration: none;
margin: 0 5px;
color: black;
font-size: 15px;
}
.header-nav img {
width: 20px;
margin: 0 15px;
}
.header-nav button {
background-color: #4584ED;
color: white;
padding: 8px 15px;
font-size: 12px;
font-weight: bold;
margin-right: 30px;
margin-left: 5px;
}
.main .main-logo {
display: flex;
width: 100%;
margin-top: 100px;
justify-content: center;
}
.main .main-logo img {
width: 280px;
}
.main .main-search {
display: flex;
justify-content: center;
}
.main .main-search input {
width: 45%;
height: 40px;
border: 1px solid #DFE1E5;
border-radius: 100px;
margin: 30px auto 10px;
outline: none;
}
.main-buttons {
display: flex;
justify-content: center;
margin-top: 20px;
}
.main-buttons button {
background-color: #F4F4F4;
color: #5F6368;
font-size: 15px;
padding: 10px 20px;
border-radius: 5px;
margin-left: 5px;
margin-right: 5px;
border: none;
}
.main-info {
margin-top: 30px;
text-align: center;
margin-bottom: 165px;
}
.footer {
height: 100px;
background-color: #F2F2F2;
display: grid;
grid-template-rows: 1fr 1fr;
}
.footer-country {
border: 1px solid #EAEAEA;
padding-left: 20px;
}
.footer-country p {
color: #7D8184;
}
.footer-info {
display: flex;
justify-content: space-between;
border: 1px solid #EAEAEA;
align-items: center;
padding: 0 20px;
}
.footer-info div a {
margin: 5px;
text-decoration: none;
color: #7D8184;
}
</style>
</head>
<body>
<header class="header">
<nav class="header-nav">
<a href="">Gmail</a>
<a href="">Imagenes</a>
<img src="icons8-squared_menu.png" alt="">
<button>Iniciar sesión</button>
</nav>
</header>
<main class="main">
<div class="main-logo">
<img src="googlelogo_color_272x92dp.png" alt="">
</div>
<div class="main-search">
<input type="text" placeholder="">
</div>
<div class="main-buttons">
<button>Buscar con Google</button>
<button>Me siento con suerte</button>
</div>
<div class="main-info">
<p>Ofrecido por Google en: <a href="">Español(Latinoamérica)</a></p>
</div>
</main>
<footer class="footer">
<div class="footer-country">
<p>Colombia</p>
</div>
<div class="footer-info">
<div>
<a href="">Publicidad</a>
<a href="">Negocios</a>
<a href="">Sobre Google</a>
<a href="">Cómo Funciona la Búsqueda</a>
</div>
<div>
<a href="">Privacidad</a>
<a href="">Condiciones</a>
<a href="">Preferencias</a>
</div>
</div>
</footer>
</body>
</html>
Para el 31 de octubre 😃
Lo logré! 😃
😄 Estoy muy feliz de ver aplicado lo que hemos aprendido!
intente hacer lo que dijo el profe e hice la página antes de ver la clase y lo logre!!! con esta actividad entendí muchos conceptos de especificidad y posicionamiento , aunque algunas debo entenderlas mejor! Para los que estan iniciando recomiendo que intenten hacer la pagina antes de empezar el curso! veran lo mucho que aprenderan! Yo noy nueva en esto y lo logre! Si no entienden algo miren las notas o videos de otras clases o usen los recursos que hay en la web que ayudan muchisimo también! Un saludo grande a todos!
Cambiaron al instructor?
Muchas cosas por mejorar aún, pero para crear todo por cuenta propia sin solo replicar, creo que es un buen comienzo, con muchas ganas de mejorar, y sobretodo nunca parar de aprender ! A los que comienzan este curso mucho animo, que el desarrallo es hermoso :3
https://github.com/julian1david/ClonGoogleOnlyView
Aquí mi primer resultado de Google Clone, todo gracias al excelente Curso definitivo de HTML y CSS del asombroso Diego de Granda:
No quedo como esperaba me falta mucho.
me lancé a hacer este proyecto sumamente intimidado por los resultados de mis companeros aqui en la caja de aportes. per no puedo creer que haya tenido un resultado tan satisfactorio.
les dejo mi repositorio, en el Readme podran ver como fue el proceso y los principales problemas que encontrè.
Este fue el resultado
https://alejandrocaputo.github.io/GoogleClone/google.html
Este es el readme:
donde escribì my aproach inicial y los problemas que fui encontrando
https://alejandrocaputo.github.io/GoogleClone
algo chistoso que me paso es que una vez terminado… se me olvido que tenia la ventana abierta del proyecto y la confundi con google hasta que presionè en el input bar (que definitivamente puedo aun mejorar)
asi quedo, faltaron algunos detallitos pero tiene buena pinta
No ha sido mi mejor maquetación pero me gusto el resultado.
Aquí mi humilde trabajo :3
(si, me gusta valorant jaja)
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,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<title>Google</title>
<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=Quicksand&display=swap" rel="stylesheet">
<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=Quicksand:[email protected];400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="estilos.css">
<script src="https://kit.fontawesome.com/881bb7d710.js" crossorigin="anonymous"></script>
</head>
<body>
<header class="google-header">
<nav>
<ul class="google-list-nav">
<li>Gmail</li>
<li>Imágenes</li>
<li><i class="fa-solid fa-bars"></i></li>
<li><button>Iniciar sesión</button></li>
</ul>
</nav>
</header>
<main>
<section class="menu-container">
<picture>
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png" alt="">
</picture>
<div class="search">
<button><i class="fa-solid fa-magnifying-glass"></i></button>
<input type="text">
</div>
<div class="main-buttons">
<button>Buscar con google</button>
<button>Me siento con suerte</button>
</div>
<p>Ofrecido por Google en: <a href="/">Español (Latinoamérica)</a></p>
</section>
</main>
</body>
</html>
CSS
:root {
--s: 14px;
--m: 16px;
--l: 18px;
--xl: 20px;
--xxl: 24px;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
color: #ededed;
font-family: 'Quicksand';
}
html {
font-size: 62.5%;
}
body {
background: url('./1.jpg');
object-fit: cover;
background-repeat:no-repeat;
background-position-x: center;
background-position-y: top;
}
.google-header {
background-color: #20212470;
padding: var(--l) var(--l) 10px var(--l);
}
.google-list-nav {
display: flex;
justify-content: end;
}
.google-list-nav li {
padding-left: var(--l);
list-style: none;
font-size: 1.6rem;
}
.google-list-nav li i {
cursor: pointer;
}
.google-list-nav li button {
margin-top: -8px;
background: #3498DB;
border: 1px solid transparent;
color: #202124;
cursor: pointer;
border-radius: 4px;
letter-spacing: 0.25px;
font-size: 14px;
font-weight: 500;
padding: 9px 23px;
}
main {
height: 560px;
}
.menu-container {
display: flex;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
}
.search {
margin: 32px 0;
display: flex;
justify-content: space-between;
padding: 4px;
border: 1px solid #fff;
border-radius: 37px;
width: 40%;
background: #202124ae;
}
.search input {
padding: 8px 0;
width: 93%;
background: transparent;
border: none;
border-radius: 16px
}
.search button {
background: transparent;
border: none;
border-radius: 50%;
cursor: pointer;
}
.search button i {
width: 20px;
margin-left: 8px;
}
.main-buttons {
width: 28%;
display: flex;
justify-content: space-between;
}
.main-buttons button {
margin-top: 4px;
background: #202124de;
border: 1px solid transparent;
color: #ffffff;
cursor: pointer;
border-radius: 4px;
letter-spacing: 0.25px;
font-size: 14px;
font-weight: 500;
padding: 8px 18px;
width: 48%;
}
.menu-container p {
font-size: 1.5rem;
margin-top: 24px;
}
.menu-container p a {
color: #8ab4f8
}
😆 Sé que soy pésimo nombrando clases pero les comparto mi reto completado. Usé un button en lugar de la barra de búsqueda y dos span para simular los buttons debajo de la misma.
👉 Código en 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>Google Clone</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<nav class="nav">
<span class="nav-item nav-item1">Gmail</span>
<Span class="nav-item nav-item2">Imágenes</Span>
<div class="nav-item nav-item3">Opciones</div>
<img class="nav-item nav-item4" src="./icons/blondewoman.png" alt="Blonde Woman">
</nav>
<main class="main">
<section class="main-section">
<img class="section-mainlogo" src="./icons/shark.png" alt="shark icon">
<button class="section-button">Navega como un tiburón</button>
<div class="section-option">
<div class="section-option1">Buscar con Google</div>
<div class="section-option2">I'm feeling lucky</div>
</div>
</section>
</main>
<footer class="footer">
<section class="section1">
<span class="span-section1 span-section1-1">Publicidad</span>
<span class="span-section1 span-section1-2">Negocios</span>
<span class="span-section1 span-section1-3">Acerca de</span>
<span class="span-section1 span-section1-4">Cómo funciona</span>
</section>
<section class="section2">
<span class="span-section2 span-section2-1">Privacidad</span>
<span class="span-section2 span-section2-2">Condiciones</span>
<span class="span-section2 span-section2-3">Preferencias</span>
</section>
</footer>
</body>
</html>
👉 Código en CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* Nav */
.nav {
height: 10vh;
background-color: lightpink;
font-size: 1.6rem;
display: flex;
justify-content: flex-end;
align-items: center;
}
.nav-item {
margin-right: 14px;
}
.nav-item4 {
height: 45px;
}
/* Main */
.main {
height: 85vh;
background-color: khaki;
font-size: 2.5rem;
display: grid;
}
.main-section {
display: grid;
place-content: center;
gap: 1.8rem;
padding: 20px 0;
}
.section-mainlogo {
justify-self: center;
height: 120px;
}
.section-button {
width: 50vw;
font-size: 2rem;
}
.section-option {
display: flex;
justify-content: space-around;
}
.section-option1 {
font-size: 1.4rem;
font-weight: bold;
background-color: darkslateblue;
color: aliceblue;
border: 2px solid darkslategrey;
border-radius: 15px;
padding:5px;
}
.section-option2 {
font-size: 1.4rem;
font-weight: bold;
background-color: darkslateblue;
color: aliceblue;
border: 2px solid darkslategrey;
border-radius: 15px;
padding:5px;
}
/* Footer */
.footer {
height: 5vh;
background-color: silver;
font-size: 1.4rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.span-section1 {
margin-left: 5px;
}
.span-section2 {
margin-right: 5px;
}
pc
movil
<!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="./CSS/base.css">
<link rel="stylesheet" href="./CSS/style.css">
<title>Google</title>
</head>
<body>
<header class="header">
<nav class="nav">
<a href="" class="nav-items">Gmail</a>
<a href="" class="nav-items"> Imágenes</a>
<div class="cuadrito nav-items">
<div class="cuadritos uno"></div>
<div class="cuadritos dos"></div>
<div class="cuadritos tres"></div>
<div class="cuadritos uno"></div>
<div class="cuadritos dos"></div>
<div class="cuadritos tres"></div>
<div class="cuadritos uno"></div>
<div class="cuadritos dos"></div>
<div class="cuadritos tres"></div>
</div>
<img class="nav-items img" alt="imagen aleatoria" src="https://picsum.photos/700/400?random">
</nav>
</header>
<main class="main">
<section class="doodle">
<img class="main-img" src="/SRC/pictures/great-american-eclipse-2017-5750068496826368-2xa.gif" alt="doodle">
</section>
<section class="search">
<button class="search-button">
<img class="button-icons" src="/SRC/pictures/lupa.png" alt="lupa">
<img class="button-icons" src="/SRC/pictures/microfono.png" alt="microfono">
</button>
</section>
<section class="options">
<button class="options-option">Buscar con google</button>
<button class="options-option">Voy a tener suerte</button>
</section>
</main>
<footer class="footer">
<span class="first">
<a href="">Privacidad</a>
<a href="">Negocios</a>
<a href="">Acerca de</a>
<a href="">Cómo funciona la busqueda</a>
</span>
<span class="second">
<a href="">Privacidad</a>
<a href="">Condiciones</a>
<a href="">Preferencias</a>
</span>
</footer>
</body>
</html>
main{
height: 86vh;
}
.nav{
display: flex;
justify-content: flex-end;
align-items: center;
height: 5rem;
width: 100%;
background-color:;
}
.nav-items{
margin: 0 1rem;
width:4rem ;
color: black
}
.cuadrito {
width: 20px;
height: 20px;
background-color: rgb(255, 255, 255);
display: flex;
flex-wrap: wrap;
}
.cuadritos.uno{
width: 4px;
height: 4px;
margin-right: 2;
background-color: rgb(0, 0, 0);
}
.cuadritos.dos{
width: 4px;
height: 4px;
margin: 0 2px;
background-color: black;
}
.cuadritos.tres{
width: 4px;
height: 4px;
margin-right:2px;
background-color: black;
}
.nav-items.img{
width: 3rem;
height: 3rem;
border-radius: 20rem;
}
.doodle{
display: flex;
justify-content: center;
}
.doodle{
width: 100%;
}
.main .main-img{
width: 50%;
margin-top: 2rem;
}
.search{
display: flex;
justify-content: center;
width: 100%;
margin-top: 2rem;
}
.search-button{
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 5rem;
width: 60%;
height: 50px;
background-color: white;
border: var(--color-gray) solid 2px;
padding: 0 10px;
}
.button-icons{
width: 3rem;
}
.options{
display: flex;
justify-content: center;
margin-top: 3rem;
}
.options-option{
width: 15rem;
height: 3rem;
margin: 0 1rem;
border: none;
background-color: ;var(--color-gray);
}
.footer{
background-color: var(--color-gray);
height: 45px;
display: flex;
align-items: center;
justify-content: space-between;
}
span a{
margin: 0 1rem;
color: rgb(46, 46, 46);
}
Lo intenté hacer antes y aquí está:
UFFFF me costó!!! Sobre todo el rectángulo ovalado que va alrededor del input de search, ya que lo dibujé con css3!!
Más aun me costó subirla a un repositorio Github!!! tuve que parar y hacer el curso de git y github! jajaj he aquí con orgullo mi bebé:
No quise seguir sin antes lograrlo, ahora puedo continuar en paz…
¡Me quedó así! Aún me faltan algunos elementos que espero aprender a incorporar en este curso 😃
Me quedaron varias cosas por pulir pero fue un gran impulso este reto, deje de tomar tanta nota y me puse manos a la obra, realmente se que el resultado no es el mejor pero disfrute mucho al estar a solas con la consola.
A seguir dandole 2022 - 2023
Mi primer intento 😂 me ha encantado el resultado, en el transcurso del curso seguro lo depurare mas pero el resultado fue el mejor :'3
index.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>Clone Google</title>
<link rel="stylesheet" href="./css/style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<header>
<nav>
<ul class="google_nav">
<li>
<a class="email" href="https://mail.google.com/mail/&ogbl" target="_blank">Gmail</a>
</li>
<li>
<a class="images" href="https://www.google.com.mx/imghp?hl=es-419&ogbl" target="_blank">Imágenes</a>
</li>
<li>
<a class="products-link" href="https://www.google.com.mx/intl/es-419/about/products" target="_blank">
<i class="material-icons">apps</i>
</a>
</li>
<li>
<a class="login-btn" href="https://accounts.google.com/ServiceLogin?hl=es-419&passive=true&continue=https://www.google.com/&ec=GAZAmgQ">Acceder</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="google_container">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="logo de Google">
<form action="#" method="get">
<label for="search">
<span><i class="material-icons">search</i></span>
<input type="text" name="search" id="search">
</label>
<div class="search-btn">
<input type="button" value="Buscar con Google">
<input type="button" value="Voy a tener suerte">
</div>
</form>
</div>
</main>
<footer>
<div class="country"><p>México</p></div>
<div class="footer_links">
<ul>
<li><a href="https://about.google/?utm_source=google-MX&utm_medium=referral&utm_campaign=hp-footer&fg=1" target="_blank" rel="noopener noreferrer">Sobre Google</a></li>
<li><a href="https://www.google.com/intl/es-419_mx/ads/?subid=ww-ww-et-g-awa-a-g_hpafoot1_1!o2&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpafooter&fg=1" target="_blank" rel="noopener noreferrer">Publicidad</a></li>
<li><a href="https://www.google.com/services/?subid=ww-ww-et-g-awa-a-g_hpbfoot1_1!o2&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpbfooter&fg=1" target="_blank" rel="noopener noreferrer">Negocios</a></li>
<li><a href="https://google.com/search/howsearchworks/?fg=1" target="_blank" rel="noopener noreferrer">Cómo funciona la Búsqueda</a></li>
</ul>
<ul>
<li><a href="https://policies.google.com/privacy?hl=es-419&fg=1" target="_blank" rel="noopener noreferrer">Privacidad</a></li>
<li><a href="https://policies.google.com/terms?hl=es-419&fg=1" target="_blank" rel="noopener noreferrer">Condiciones</a></li>
<li><a href="#">Preferencias</a></li>
</ul>
</div>
</footer>
</body>
</html>
style.css
/* DEFAULT */
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html{
font-size:62.5%
}
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4rem;
color: rgba(0,0,0,.87);
}
.google_nav, .google_nav li, .products-link, .google_container, .google_container form label, .search-btn, footer div ul, .footer_links{
display: flex;
}
.google_nav li, .google_container, .google_container form label{
align-items: center;
}
.products-link, .google_container, .google_container form label, .search-btn, footer div ul{
justify-content: center;
}
.google_container, .google_container form, #search, .search-btn, footer, .country {
width: 100%;
}
/* NAVBAR */
nav{
padding: 6px;
height: 60px;
}
.google_nav{
list-style: none;
justify-content: right;
justify-items: center;
font-size: 1.3rem;
}
li a{
text-decoration: none;
margin-left: 15px;
color: rgba(0,0,0,.87);
}
.products-link{
padding: 4px;
align-self: center;
}
.products-link i{
width: 40px;
height: 40px;
padding: 8px;
color: #5f6368;
}
.products-link:hover{
border-radius: 50%;
background-color: rgba(209, 209, 209, 0.534);
}
.login-btn{
padding: 9px 15px;
margin-right: 8px;
min-width: 80px;
color: white;
font-weight: 700;
background: #1a73e8;
border: 1px solid transparent;
border-radius: 4px;
}
.login-btn:hover{
background: #2b7de9;
box-shadow: 0 1px 2px 0 rgba(66,133,244,.3),0 1px 3px 1px rgba(66,133,244,.15);
}
/*FORMULARIO DE BUSQUEDA*/
.google_container{
flex-direction: column;
margin: 18vh 0;
}
.google_container img{
max-width: 67%;
min-height: 100%;
max-height: 92px;
width: auto;
margin-bottom: 8px;
}
.google_container form{
padding: 20px;
max-height: 160px;
}
.google_container form label{
border: 1px solid #dfe1e5;
padding: 5px 8px 5px 14px;
border-radius: 25px;
margin-bottom: 20px;
max-width: 584px;
margin: auto;
}
.google_container form label span i{
margin-right: 13px;
margin-top: 5px;
margin-bottom: 5px;
color: #9da0a3;
font-size: 2rem;
}
#search{
height: 34px;
border: 0px solid transparent;
font-size: 1.6rem;
}
#search:active, #search:focus, .google_container form label input:checked{
outline: none;
border: 0px solid transparent;
}
.google_container form label:hover{
box-shadow: 0 1px 6px rgb(32, 33, 36, .28);
border-color: rgb(223, 225, 229, 0);
}
.search-btn input{
padding: 0px 16px;
margin: 30px 4px;
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
font-size: 1.4rem;
height: 36px;
min-width: 54px;
line-height: 27px;
color: #3c4043;
cursor: pointer;
}
.search-btn input:hover{
box-shadow: 0 1px 1px rgba(0,0,0,.1);
background-color: #f8f9fa;
border: 1px solid #dadce0;
color: #202124;
}
/* FOOTER */
footer{
background-color: #f2f2f2;
color: #70757a;
position: absolute;
bottom: 0;
}
.country{
padding: 15px 30px;
border-bottom: 1px solid #dadce0;
font-size: 1.5rem;
}
footer div ul{
flex-wrap: wrap;
}
footer div ul li{
display: inline-flex;
}
footer div ul li a{
color: #70757a;
padding: 15px;
}
.footer_links{
padding: 0 20px;
justify-content: space-evenly;
flex-direction: column;
}
@media(min-width:863px) {
.footer_links{
display: inline-flex;
width: 100%;
flex-direction: row;
justify-content: space-between;
}
.footer_links ul li a{
margin-left: 0;
}
.login-btn{
padding: 9px 23px;
}
}
Mi enfoque son las ciencas de datos, y el backend de una aplicación, sin embargo aunque el frontend no es mi rama, me defiendo. 🚀
Mi humilde aporte, sé que lo hice con las patas, pero me siento orgulloso 😃
A fin de practicar decidí hacer el clone de google en dark theme 🌑.
Aquí pueden verlo en acción: https://mauricodev.github.io/google-clone-dark/
Vamos con el reto 😄
Que cambio tan radical, hace un minuto (video anterior) tenia barba y pos ahora ya no XD… como buena practica, tratare en lo posible de hacer el clone de google con NeoVim, herramienta muy poderosa, si la sabes usar, yo por ahora apenas se usarla como un bloc de notas cualquiera XD pero poco a poco
Hola a todos!
Acá dejo mi versión de este reto.
Éxito a todos!
Mi primer intento de replica de google en modo oscuro, del 1 al 10 me daria un 6 :p
https://garzonsergio.github.io/google-clone/
Este fue mi resultado del clon de google, aun me falta mejorar mucho, para que la pagina quede sin scroll en todas las pantallas.
Mi primer intento 😄
Falta ajustar algunos detalles
Primer intento. Satisfecho.
Después de horas sentado en la pantalla, este es mi resultado final (no es mucho, pero es trabajo honesto):
Me gustaria saber que opinan lo hice viendo la estructura la pagina principal los iconos que no consegui los suplante por un Mangekyou u.u y por el de google fotos espero les guste, puedo enviarles mi maquetacion para que practiquen.
Hice la versión de cuando generas una nueva ventana. No salio perfecta, pero me gusto como quedo
No es perfecto pero me sentí orgullosa de mí 😉
Aqui esta mi aporte en modo oscuro, nunca paren de aprender!!!
se logro!
Bueno se hizo todo lo que se pudo xD
https://ingdonovan.github.io/GoogleCopy/index.html
aunque me falta todo el tema de links y conexiones pero trate de poner lo aprendido en el curso pasado
se logro el reto mi gente, falta más practica
Creo que quedo más o menos considerando que no se casi nada de css 😃
*{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #202124;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: rgb(255, 255, 255);
}
a {
color: #d4d4d4;
outline: none;
text-decoration: none;
background: #151515;
}
header{
padding: 10px 50px;
display: flex;
text-align: right;
justify-content: right;
}
header p {
display: flex;
left: 5%;
margin-top: 17px;
}
#principal {
display: block;
text-align: center;
margin-top: 100px;
}
#logo {
width: 350px;
}
input {
margin-top: 15px;
color: rgb(255, 255, 255);
width: 400px;
border-color: #d4d4d4;
border-radius: 100px;
}
input, textarea {
padding: 5px;
}
button {
margin-top: 25px;
background-image: -webkit-linear-gradient(top,#3b3b3b,#383838);
color: whitesmoke;
width: 170px;
height: 30px;
border-radius: 5px;
border: 0px;
}
#bGoogle{
margin-right: 20px;
}
footer {
height: 75px;
width: 100%;
position: absolute;
bottom: 0;
}
#pais {
display: flex;
width: 100%;
background-color: #151515;
height: 35px;
padding-left: 25px;
padding-top: 5px;
}
#menu-footer {
width: 100%;
background: #151515;
height: 35px;
width: 100%;
align-items: center;
justify-content: space-between;
display: flex;
position: relative;
flex-wrap: wrap;
border-top: 1px solid #e4e4e4;
padding-left: 25px;
}
#menu-footer a {
margin-right: 15px;
}
#menu-left {
display: block;
position: relative;
text-align: left;
background: #151515;
}
#menu-right {
display: block;
position: relative;
text-align: right;
background: #151515;
}
Tomé la image de los diseños de Sabrena Khadija, su trabajo es fenomenal.
Mi primer clon, todo un reto, pero con mas habilidades para solucionar las dudas que me iban llegando.
Clon de mi página de Google:
Para Mobile (Mobile first)
Para Desktop
Acepté el reto de hacerlo antes de empezar el curso y así me quedó
Mobile
Tablet
Desk
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">
<title>Document</title>
</head>
<body>
<header class="pageHeader">
<nav class="pageHeader-bar">
<ul class="pageHeader-bar_one">
<li class="item1">
<figure>
<img src="./img/tresBarras.png" alt="Imagen de rayas">
</figure>
</li>
<li class="item2">
<a href="#">Todo</a>
</li>
<li class="item3">
<a href="#">Imagenes</a>
</li>
</ul>
<ul class="pageHeader-bar_two">
<li class="item4">
<figure>
<img src="./img/aplicasionesDeGoogle.png" alt="Imagen de puntos">
</figure>
</li>
<li class="item5">
<figure>
<img src="./img/sonia.jpg" alt="Foto de usuario">
</figure>
</li>
</ul>
</nav>
</header>
<main class="pageMainContents">
<section class="pageMainContents-s1">
<picture>
<source>
<source>
<img src="./img/logo-Google.png" alt="Logo de google">
</picture>
</section>
<section class="pageMainContents-s2">
<article class="pageMainContents-s2_busqueda">
<picture>
<img src="./img/lupa.png" alt="Icono de lupa">
</picture>
<label for="busqueda">
<input type="text" name="busqueda" id="busqueda" autocomplete="busqueda" required/>
</label>
<picture>
<img src="./img/microphone.png" alt="Icono de microfono" id="microfono">
</picture>
</article>
<article class="pageMainContents-s2_botones">
<button>Buscar con Google</button>
<button>Voy a tener suerte</button>
</article>
</section>
<section class="pageMainContents-s3">
<p>Ofrecido por Google en:</p>
<a href="#">Español (latinoamérica)</a>
</section>
</main>
<footer class="pageFooter">
<section class="pageFooter-pais">
<p>México</p>
</section>
<sectionsection class="pageFooter-vacio">
<p></p>
</sectionsection>
<section class="pageFooter-otros">
<ul class="pageFooter-otros_l1">
<li class="l1-item1">
<a href="#">Tema oscuro: Desactivado</a>
</li>
<li class="l1-item2">
<a href="#">Preferencias</a>
</li>
<li class="l1-item3">
<a href="#">Privacidad</a>
</li>
<li class="l1-item4">
<a href="#">Condiciones</a>
</li>
</ul>
<ul class="pageFooter-otros_l2">
<li class="l2-item1">
<a href="#">Publicidad</a>
</li>
<li class="l2-item2">
<a href="#">Negocios</a>
</li>
<li class="l2-item3">
<a href="#">Sobre Google</a>
</li>
</ul>
</section>
</footer>
</body>
</html>
CSS
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html{
font-size: 62.5%;
}
body{
font-size: 1.6rem;
font-family: Helvetica, Arial, sans-serif;
}
.pageHeader{
width: 100%;
height: 3rem;
display: flex;
align-items: center;
}
.pageHeader-bar{
display: flex;
width: 100%;
}
.pageHeader-bar_one {
display: flex;
width: 60%;
list-style: none;
}
.item1, .item2, .item3 {
display: flex;
justify-content: center;
align-items: center;
}
.item1 {
width: 20%;
}
.item2 {
width: 30%;
}
.item3 {
width: 50%;
}
.item2 a, .item3 a {
text-decoration: none;
color: rgb(70, 69, 69);
}
.item1 figure{
display: flex;
align-items: center;
}
.pageHeader-bar_two {
display: flex;
justify-content: end;
width: 40%;
list-style: none;
}
.item4, .item5{
display: flex;
justify-content: center;
align-items: center;
width: 30%;
}
.item4 figure, .item5 figure{
display: flex;
align-items: center;
}
.item5 figure img{
border-radius: 100%;
width: 2.5rem;
height: 2.5rem;
}
img{
width: 1.8rem;
height: 1.8rem;
}
.pageMainContents {
width: 100%;
height: 70vh;
}
.pageMainContents-s1{
width: 100%;
height: 30%;
display: flex;
justify-content: center;
align-items: flex-end;
}
.pageMainContents-s1 picture img {
width: 15rem;
height: 7.5rem;
}
.pageMainContents-s2 {
display: flex;
flex-direction: column;
align-items: center;
height: 20%;
}
.pageMainContents-s2_busqueda{
border: 0.1rem rgb(134, 133, 139) solid;
border-radius: 2rem;
width: 80%;
height: 2.5rem;
display: flex;
justify-content: center;
align-items: center;
}
.pageMainContents-s2_busqueda picture{
display: flex;
align-items: center;
}
#microfono{
width: 1.4rem;
}
.pageMainContents-s2_busqueda label{
width: 70%;
}
.pageMainContents-s2_busqueda label input{
border: none;
width: 100%;
}
.pageMainContents-s2_botones{
width: 100%;
height: 50%;
display: flex;
align-items: flex-end;
justify-content: space-around;
}
.pageMainContents-s2_botones button{
border: none;
background-color: white;
}
.pageMainContents-s3 {
font-size: 1.2rem;
display: flex;
}
.pageFooter{
background-color: rgb(206, 204, 204);
}
.pageFooter-pais p{
height: 2.5rem;
display: flex;
align-items: center;
color: rgb(70, 69, 69);
}
.pageFooter-vacio p{
height: 2.5rem;
border-top: 0.1rem rgb(134, 133, 139) solid;
border-bottom: 0.1rem rgb(134, 133, 139) solid;
}
.pageFooter-otros {
font-size: 1.2rem;
}
.pageFooter-otros_l1{
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style: none;
}
.pageFooter-otros_l1 li{
display: flex;
justify-content: center;
align-items: center;
height: 2.5rem;
}
.pageFooter-otros_l1 li a, .pageFooter-otros_l2 li a {
text-decoration: none;
color: rgb(70, 69, 69);
}
.pageFooter-otros_l1 .l1-item1 {
width: 60%;
}
.pageFooter-otros_l1 .l1-item2 {
width: 40%;
}
.pageFooter-otros_l1 .l1-item3 {
width: 50%;
}
.pageFooter-otros_l1 .l1-item4 {
width: 50%;
}
.pageFooter-otros_l2{
display: flex;
justify-content: center;
list-style: none;
}
.pageFooter-otros_l2 li{
display: flex;
justify-content: center;
align-items: center;
height: 2.5rem;
width: 30.33%;
}
@media (min-width: 600px) {
.pageHeader-bar_one {
width: 50%;
}
.item1 {
width: 10%;
}
.item2 {
width: 15%;
}
.item3 {
width: 25%;
}
.pageHeader-bar_two {
width: 50%;
}
.item4, .item5{
width: 15%;
}
.pageMainContents-s2_busqueda{
width: 50%;
height: 3rem;
}
.pageMainContents-s2_busqueda label{
width: 85%;
}
.pageMainContents-s2_botones{
width: 50%;
}
.pageMainContents-s3 {
justify-content: center;
align-items: flex-end;
height: 2rem;
}
.pageFooter-otros_l1 .l1-item1 {
width: 25%;
}
.pageFooter-otros_l1 .l1-item2 {
width: 25%;
}
.pageFooter-otros_l1 .l1-item3 {
width: 25%;
}
.pageFooter-otros_l1 .l1-item4 {
width: 25%;
}
}
@media (min-width: 900px) {
.pageHeader-bar_one {
width: 92%;
justify-content: end;
}
.item1 {
width: 5%;
}
.item2 {
width: 5%;
}
.item3 {
width: 10%;
}
.pageHeader-bar_two {
width: 8%;
}
.item4, .item5{
width: 50%;
}
.pageMainContents-s2_busqueda{
width: 50%;
height: 3rem;
}
.pageMainContents-s2_busqueda label{
width: 85%;
}
.pageMainContents-s2_botones{
width: 50%;
}
.pageMainContents-s3 {
justify-content: center;
align-items: flex-end;
height: 2rem;
}
.pageFooter-vacio p{
height: 0rem;
border-top: 0.05rem rgb(156, 156, 156) solid;
border-bottom: 0.05rem rgb(156, 156, 156) solid;
}
.pageFooter-otros {
font-size: 1.2rem;
display: flex;
}
.pageFooter-otros_l1 {
width: 50%;
justify-content: flex-start;
align-items: center;
}
.pageFooter-otros_l1 .l1-item1 {
width: 33%;
}
.pageFooter-otros_l1 .l1-item2 {
width: 18%;
}
.pageFooter-otros_l1 .l1-item3 {
width: 16%;
}
.pageFooter-otros_l1 .l1-item4 {
width: 16%;
}
.pageFooter-otros_l2{
width: 50%;
justify-content: flex-end;
align-items: center;
}
.pageFooter-otros_l2 .l2-item1 {
width: 14%;
}
.pageFooter-otros_l2 .l2-item2 {
width: 14%;
}
.pageFooter-otros_l2 .l2-item3 {
width: 20%;
}
}
Aquí mi intento: con una versión Dark
Aquí mi reto realizado, sé que al terminar este curso podré hacerlo mucho mejor, pero igualmente me siento muy feliz desde ya.
Aquí el código
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>Document</title>
<link rel="stylesheet" href="CSS/styles.css">
</head>
<body>
<header>
<nav class="header_nav">
<a class="correo" href="/">Gmail</a>
<a class="imagenes" href="/">Imágenes</a>
<a href="/"><img class="icon_menu" src="images/icons/menu-de-puntos.png" alt="menú"></a>
<a href="/"><img class="picture_perfil" src="images/perfil.jpg" alt="perfil"></a>
</nav>
</header>
<section>
<figure>
<a href="/"><img class="logo_google" src="images/logo/logo_google.png" alt="logo google"></a>
</figure>
<div class="container">
<div class="main_search">
<div class="contain_main">
<div class="contain">
<a href="/"><img src="images/icons/icons8-búsqueda-30.png" alt="lupa de Búsqueda"></a>
<input class="search" type="text">
<a href="/"><img src="./images/icons/icons8-microphone-64.png" alt="buscador por voz"></a>
</div>
</div>
</div>
<div class="buttom_main">
<button class="search_google buttom_search">
Buscar con Google
</button>
<button class="feeling buttom_search">
I'm feeling Lucky
</button>
</div>
</div>
</section>
<footer>
<div class="main_footer">
<nav class="footer_nav_left">
<a href="/">Publicidad</a>
<a href="/">Negocios</a>
<a href="/">Acerca de</a>
<a href="/">Cómo funciona la Búsqueda</a>
</nav>
<nav class="footer_nav_right">
<a href="/">Privacidad</a>
<a href="/">Condiciones</a>
<a href="/">Preferencias</a>
</nav>
</div>
</footer>
</body>
</html>
CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
font-family: Arial, Helvetica, sans-serif;
}
header {
width: 100%;
display: flex;
justify-content: end;
align-items: flex-end;
}
/* nav {
display: flex;
justify-content: end;
} */
.header_nav {
padding: 10px 30px;
}
.correo, .imagenes {
text-decoration: none;
padding: 8px;
font-size: 1.6rem;
color: black;
}
.icon_menu {
width: 20px;
height: 20px;
margin: 0 8px;
}
.picture_perfil {
width: 40px;
height: 40px;
border-radius: 50%;
margin: 0 8px;
}
section {
width: 100%;
}
figure {
display: flex;
justify-content: center;
}
.logo_google {
width: 400px;
height: auto;
margin: 150px 100px 50px 80px;
}
.container {
width: 100%;
}
.main_search {
width: 100%;
}
.contain_main {
display: flex;
justify-content: center;
}
.contain {
border: 1px solid gray;
width: 500px;
border-radius: 30px;
height: 36px;
display: flex;
align-items: center;
justify-content: space-around;
margin: 0 0 20px 0;
}
.main_search img {
width: 24px;
}
.search {
width: 80%;
border: 0px;
outline: none;
}
.buttom_main {
display: flex;
justify-content: center;
}
.buttom_search {
margin: 18px 20px 172px;
width: 150px;
height: 30px;
border: none;
color: gray;
font-weight: bold;
border-radius: 5px;
}
.buttom_search:hover {
border: 1px solid gray;
}
footer {
width: 100%;
background-color: rgba(238, 238, 238, 0.69);
}
.main_footer {
display: flex;
flex-direction: row;
align-items: flex-end;
height: 100%;
}
.main_footer nav {
width: 50%;
}
.footer_nav_left {
margin: 20px 0 30px 20px;
}
.footer_nav_left a,
.footer_nav_right a
{
text-decoration: none;
color: gray;
padding: 8px;
font-size: 1.6rem;
font-weight: bold;
}
.footer_nav_right {
display: flex;
justify-content: end;
margin: 20px 30px 20px 0;
}
Este fue mi intento inicial del clon de Google. Espero que les guste 😃
Se hizo lo que se pudo !!! 😊
Asi quedo mi pantalla:
- Hasta aqui llegué sin ayuda… Veremos el curso para concluir esto
Aun no me siento satisfecho con mi clon de google :c
.
.
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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:[email protected];500;900&display=swap" rel="stylesheet">
<title>Google clone</title>
</head>
<body>
<header class="header">
<nav class="nav">
<a href="#" class="n-i item-1">Gmail</a>
<a href="#" class="n-i item-2">Images</a>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAAAnElEQVRoge3WUQrDIACD4dDT9f5HaA+SPgy2QSt2K2iU/3s2Ql40EoCf2F5t767bbK8J2VKR7cZl70sTsqUitu1/zvXKStJSC46CImkokoYiaa6K7NLnvS75PhuQPfNrKtz5ZUszo3kWaMnMeGb846w0+Yc4JIqkoUiaqYsw43tlgZbMjGfGP85Kk3+IQ6JIGoqkmboIM75XFkDdAUMTqfAyg8JoAAAAAElFTkSuQmCC" class="n-i item-3">
<div class="item-4">
<h1 class="n-i item-4-1">S</h1>
</div>
</nav>
</header>
<main class="main">
<img src="https://pngimg.com/uploads/google/google_PNG19637.png" alt="google-img" class="m-i google-img">
<input type="text" class="m-i query" value="Search">
<div class="m-i buttons">
<input type="button" class="b button-1" value="Google Search">
<input type="button" class="b button-2" value="I'm Feeling Lucky">
</div>
<p class="m-i language">Google offered in: <a href="#">Español (Latinoamérica)</a></p>
</main>
<footer class="footer">
<div class="division-1">
<h3>Venezuela</h3>
</div>
<div class="division-2">
<div class="left-division">
<a href="#">About</a>
<a href="#">Advertising</a>
<a href="#">Business</a>
<a href="#">How Search works</a>
</div>
<div class="right-division">
<a href="#">Privacy</a>
<a href="#">Terms</a>
<a href="#">Settings</a>
</div>
</div>
</footer>
</body>
</html>
.
.
.
CSS
.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
}
:root {
--Background-color: #202124;
--Secondary-color: #3d3f44;
--Tertiary-color: #afafb0;
--Fourth-color: #141516;
--Link-color: #76a5d4;
--Standard-size: 1.4rem;
}
body {
font-family: 'Roboto Slab', serif;
background-color: var(--Background-color);
}
/* header */
.header {
width: 100vw;
height: 10vh;
display: flex;
justify-content: flex-end;
align-items: center;
}
.nav {
width: 20vw;
display: flex;
justify-content: space-around;
}
.item-1, .item-2 {
text-decoration: none;
margin-top: .5rem;
}
.n-i {
font-size: small;
color: white;
}
.item-3 {
height: 3rem;
width: 3rem;
}
.item-4 {
background-color: rgba(32, 63, 109, 0.881);
height: 3rem;
width: 3rem;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.item-4-1 {
font-size: medium;
font-weight: 400;
}
/* main */
.main {
width: 100vw;
height: 74vh;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.m-i {
margin-bottom: 3rem;
}
.query {
width: 40%;
height: 4.5rem;
border-radius: 2rem;
border: solid 1px lightslategray;
background-color: var(--Background-color);
color: white;
}
.buttons {
display: flex;
justify-content: center;
width: 30%;
}
.b {
margin-right: 1rem;
background-color: var(--Secondary-color);
color: white;
border: none;
padding: 1rem;
font-size: medium;
border-radius: 5%;
}
.language {
color: var(--Tertiary-color);
font-size: small;
}
.language a {
color: var(--Link-color);
text-decoration: none;
}
/* footer */
.footer {
height: 16vh;
width: 100vw;
display: flex;
flex-direction: column;
}
.division-1 {
height: 50%;
display: flex;
justify-content: flex-start;
align-items: center;
border: solid 1px var(--Background-color);
background-color: var(--Fourth-color);
}
.division-1 h3 {
margin-left: 2.4rem;
color: var(--Tertiary-color);
font-size: var(--Standard-size);
font-weight: 300;
}
.division-2 {
height: 50%;
display: flex;
justify-content: space-between;
align-items: center;
border: solid 1px var(--Background-color);
background-color: var(--Fourth-color);
}
.left-division {
margin-left: 2.4rem;
display: flex;
justify-content: space-between;
align-content: center;
width: 28%;
}
.left-division a {
text-decoration: none;
color: var(--Tertiary-color);
font-size: var(--Standard-size);
}
.right-division {
margin-right: 2.4rem;
display: flex;
justify-content: space-between;
align-content: center;
width: 14%;
}
.right-division a {
text-decoration: none;
color: var(--Tertiary-color);
font-size: var(--Standard-size);
}
✅ Terminado, dejo la demo en CodePen y el repositorio en GitHub
– Fuente usada para el logo: Jost (SemiBold 600) - Google Fonts
– Ícono de la pestaña: Google icon - flaticon
– Ícono del micrófono: Google voice - flaticon
.
HTML:
index.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>Googol</title>
<link rel="icon" href="./img/google-icon.png">
<!-- Estilos para cada tamaño de dispositivo -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/tablet.css" media="screen and (min-width: 768px)">
<link rel="stylesheet" href="css/desktop.css" media="screen and (min-width: 1024px)">
<!-- Fuente "Googol" -->
<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=Jost:[email protected]&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div class="options">
<div class="menu">
<div></div>
<div></div>
<div></div>
</div>
<div class="all"><span>ALL</span></div>
<span class="gmail">Gmail</span>
<span class="images">Images</span>
</div>
<div class="apps-user">
<div class="apps">
<div></div><div></div><div></div>
<div></div><div></div><div></div>
<div></div><div></div><div></div>
</div>
<div class="user">
<img src="img/user.png" alt="">
</div>
</div>
</nav>
</header>
<main>
<div class="googol">
<span class="g1">G</span>
<span class="o2">o</span>
<span class="o3">o</span>
<span class="g4">g</span>
<span class="o5">o</span>
<span class="l6">l</span>
</div>
<div class="search-box">
<div class="button-mg">
<img src="img/magnifying-glass.svg" alt="">
</div>
<input class="search-input" type="text">
<div class="button-voice">
<img src="img/google-voice.png" alt="">
</div>
</div>
<div class="search-buttons">
<a class="button-search">
Googol Search
</a>
<a class="button-lucky">
I'm Feeling Lucky
</a>
</div>
<div class="lang">
<span>Googol offered in:</span> <a href="#">Español (Latinoamérica) Quechua</a>
</div>
</main>
<footer>
<div class="location">
<span>Perú</span>
</div>
<div class="redirections">
<div class="about">
<span>About</span>
<span>Advertising</span>
<span>Business</span>
<span>How Search works</span>
</div>
<div class="info-settings">
<span>Privacy</span>
<span>Terms</span>
<span>Settings</span>
</div>
</div>
</footer>
</body>
</html>
.
CSS:
style.css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
}
:root {
--gray: #5F6368;
--gray-icon: #9aa0a6;
--light-gray: #dadce0;
--gray-footer: #f8f9fa;
--blue-url: #1558d6;
--blue: #4285F4;
--red: #EA4335;
--yellow: #FBBC05;
--green: #34A853;
--nav-height: 4.8rem;
/*
* * *
* * * Variables para apps-dots
* * *
*/
--apps-size: 1.8rem;
--apps-dot-size: calc(var(--apps-size) / 5);
--apps-dot-margin: calc(var(--apps-dot-size) / 3);
--user-size: 3rem;
--font-size-googol: 9rem;
--paddig-googol: 14rem 0 2rem;
--kerning-googol: calc(var(--font-size-googol)/-40);
--button-voice-size: 0;
--border-h: 0 2rem;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.3rem;
}
/* ************ HEADER ********** */
nav {
height: var(--nav-height);
padding: var(--border-h);
display: flex;
justify-content: space-between;
}
.options {
color: var(--gray);
display: flex;
justify-content: stretch;
align-items: center;
font-weight: bold;
font-size: 1.2rem;
}
.menu {
height: 1.2rem;
margin-right: 2rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.menu div {
background-color: var(--gray);
width: 1.8rem;
height: .14em;
}
.gmail {
width: 0;
overflow: hidden;
}
.all {
color: var(--blue);
border-bottom: 2px solid var(--blue);
height: 100%;
margin-right: 2rem;
display: flex;
align-items: center;
}
.all span {
padding: 0 1rem;
}
.images {
text-transform: uppercase;
}
.apps-user {
width: 7rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.apps {
width: var(--apps-size);
height: var(--apps-size);
display: flex;
flex-wrap: wrap;
}
.apps div {
background-color: var(--gray);
width: var(--apps-dot-size);
height: var(--apps-dot-size);
border-radius: var(--apps-dot-size);
margin: var(--apps-dot-margin);
}
.user {
width: var(--user-size);
height: var(--user-size);
border-radius: 5rem;
overflow: hidden;
}
.user img {
width: 100%;
}
/* *********** MAIN *********** */
main {
height: calc(100vh - var(--nav-height));
}
/* GOOGOL */
.googol {
font-family: 'Jost', sans-serif;
font-size: var(--font-size-googol);
padding: var(--paddig-googol);
display: flex;
justify-content: center;
}
.googol span {
margin-right: var(--kerning-googol);
}
.g1 { color: var(--blue); }
.o2 { color: var(--red); }
.o3 { color: var(--yellow); }
.g4 { color: var(--blue); }
.o5 { color: var(--green); }
.l6 { color: var(--red); }
/* SEARCH */
.search-box{
height: 3.8rem;
display: flex;
align-items: center;
padding: 0 1rem;
margin: var(--border-h);
border: 1px solid var(--light-gray);
border-radius: 5rem;
}
.button-mg {
width: 1.6rem;
min-width: 1.6rem;
}
.button-mg img { width: 100%; }
.search-input {
/* Quitar estilos */
border: none;
background-color: transparent;
resize: none;
outline: none;
font-size: 1.6rem;
flex-grow: 1;
padding: 0 2rem;
min-width: 0;
}
.button-voice {
width: var(--button-voice-size);
overflow: hidden;
}
.button-voice img { width: 100%; }
/* SEARCH BUTTONS */
.search-buttons { /* Ocultarlos */
height: 0;
overflow: hidden;
}
/* LANGUAGE */
.lang {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 2rem auto;
padding: var(--border-h);
}
.lang a {
color: var(--blue-url);
margin-left: 1rem;
}
/* *********** FOOTER *********** */
footer {
background-color: var(--gray-footer);
color: var(--gray);
width: 100%;
display: flex;
flex-direction: column;
}
.location {
background-color: var(--gray-footer);
border-bottom: 1px solid var(--light-gray);
width: 100%;
height: 8rem;
position: absolute;
bottom: 0;
display: flex;
}
.location span {
font-size: 1.6rem;
width: 100%;
height: 4rem;
padding: 1rem;
border-bottom: 1px solid var(--light-gray);
}
.redirections {
height: 100%;
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
flex-wrap: wrap;
}
.about, .info-settings {
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.redirections span {
padding-left: 2rem;
}
.
tablet.css
.search-box {
max-width: 73rem;
margin-left: auto;
margin-right: auto;
}
.
desktop.css
:root {
--black: #202124;
--button-voice-size: 2.4rem;
--paddig-googol: 18rem 0 2rem;
}
/* ******** HEADER ******* */
nav {
justify-content: end;
}
.menu {
width: 0;
overflow: hidden;
margin: 0;
}
.options {
color: var(--black);
font-size: 1.3rem;
font-weight: normal;
margin-right: 2rem;
}
.gmail {
width: auto;
margin-right: 2rem;
overflow: visible;
}
.all {
width: 0;
margin: 0;
overflow: hidden;
}
.images {
text-transform: none;
}
/* ******* MAIN ******** */
.search-box {
width: 58rem;
height: 4.7rem;
padding: 0 2rem;
}
/* SEARCH BUTTONS */
.search-buttons {
height: 5rem;
overflow: visible;
display: flex;
justify-content: center;
align-items: center;
margin: 2rem 0;
}
.search-buttons a {
background-color: var(--gray-footer);
color: var(--black);
font-size: 1.4rem;
padding: .9rem 2rem;
margin: 0 1rem;
border-radius: 0.3rem;
border: 1px solid transparent;
/* No seleccionar texto */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* *********** FOOTER *********** */
footer {
position: absolute;
bottom: 0;
}
.location {
height: 4.8rem;
position: relative;
align-items: center;
}
.location span {
width: fit-content;
height: fit-content;
border-bottom: none;
}
.redirections {
font-size: 1.4rem;
padding: 1rem;
flex-direction: row;
justify-content: space-between;
}
/* *********** EVENTS *********** */
.search-buttons a:hover {
filter: drop-shadow(0 0 1px var(--gray));
border: 0px;
cursor: pointer;
border: 1px solid transparent;
}
.search-buttons a:active {
filter: none;
border: 1px solid var(--blue);
}
Aquí mi versión maquetada de la pagina inicial de google
Aquí mi primer intento clonando la versión en “dark mode”!
Yo decidí hacer el clon a mi manera con lo aprendido en anteriores cursos. A su vez decidí hacerlo responsive, partiendo desde Mobile First. Al terminarlo, continué con el curso para ver cómo lo hizo el profesor y tener en cuenta mejores soluciones 😄
Mobile:
Tablet
Desktop
Cabe destacar que yo hice todo con flexbox, ya que no habíamos visto grid hasta el momento.
Aun me faltan algunas cositas… como poner la lupa el microfono y hacerla mas responsive …pasito a pasito se anda lejos …mente positiva para le proximo reto–y a seguir aprendiendo. Saludos
Buscando los iconos y el logo para hacer la página encontre esta página que me permite descargar png transparentes, y ahi encontre todo lo que necesitaba para este reto.
Listo! 😃
Esto es lo que pude hacer B)
Así quedó, batallé mucho pero al final creo que no me fue tan mal. No es mucho pero es un trabajo honesto.
Aqui mi browser minimalista:
Muy feliz de haber completado el reto, hice este clon, pero con temática de Nintendo !!!
Me demoré un poco hacerlo porque aún me hago bolas con el tema de display pero hice la versión oscura que es la que yo utilizo. En el buscador me quedó una barra blanca que es el input del formulario porque quise usarlo pero no sé cómo - desde CSS - cambiar sus dimensiones o que no tenga color.
Me guié de un compañero para hacer los botones, los que tenía eran muy toscos. El resto es bastante versión beta, y lo hice con el Doodle del día de ayer.
Clone Google
Acá esta mi clon de Google, espero pueda servir para ayudarles a la hora de realizar el desarrollo del código.
PD: Este proyecto lo hice y lo fui desarrollando completando el curso completo.
Haz clic aquí para ver el sitio web
Haz clic aquí para ver el repositorio
Sígueme en github
¡Puedes clonarlo si gustas!
Repo Toogle
Bueno aqui esta mi aporte, antes de ver la siguiente clase, hice algo de flex pero no muy bien asi que me costo bastante pero vamos avanzando
les dejo el codigo en el repositorio (eso fue otra lucha) jejejeje
https://github.com/araguaney911/Google-Clone
los dos minutos más rápidos de mi vida jajaja
Lo hice por mi cuenta. Complete el reto. Lo hice mobile first y responsive. Aquí dejo el link: https://pegadro.github.io/google-clone
Me demore un montón y no quedo tan bien, pero es trabajo honesto y estoy satisfecho.
Realizo mi aporte
La real:
La copia:
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.