Maquetación HTML5: Clon de Página Web

Clase 3 de 18 • Curso Práctico de HTML y CSS

Resumen

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.

John Steven Bernal Gonzalez

student•

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

Javier Eduardo Morón Mendoza

Cristian Andres Ladino Peña

William Leonardo Torres Toloza

Manuel E. Melendez Blanco

Bernardo Aguayo Ortega

Jerry Gil Contreras

Wilson Alexander Caal Pacay

Pablo Benedix

Usuario anónimo

user•

Juan Sebastián Vargas Castañeda

Esteban Blanco Ortuno

Sergio Maximiliano Salvatierra

Enrique Devars

teacher•

Miguel Angel Lozano Alvarez

Juan David HernandezPosso

Nabil Aparicio

Jhon Edward Bedoya

Benjamin Allen Ramirez Horna

Mateo Aquino

Joel Dominguez Merino

Alex Camacho

Luis Mojica

John Cardenas

Rodrigo Salazar Osnaya

Jean Nuñez

Ali Hilario

ERWIN CEDEÑO

Carol Estefanny Masmela Escamilla

Ricardo Rito Anguiano

Carlos David Ramírez Gómez

Alejandro Chaparro

Ines Patricia Contreras Espiritu

Lily Bejarano

Emmanuel Sánchez Da Silva

Eugenio Condori

Sandro Ciriaco Cruz Aleman

Pedro Isaac Aguilar

Laura Roa

Luis Guilermo Figueroa Hernandez

Aldo Juarez Virgen

Maquetación HTML5: Clon de Página Web

Introducción

Reto de Programación 100 Días: PlatziCodingChallenge

Construcción de un Clon Web con HTML y CSS

Análisis y creación del proyecto

Maquetación HTML5: Clon de Página Web

Organización de Archivos y Carpetas en Proyectos Web

Chrome Dev Tools como herramienta

Uso de Herramientas de Desarrollo en Navegadores para Depuración y CSS en Tiempo Real

Header Google Clone

Maquetación Semántica HTML5: Estructura y Navegación Básica

Estilos CSS para Clonar el Header de una Página Web

Posicionamiento Horizontal de Elementos en Listas HTML

Colocación de iconos e imágenes en la barra de navegación HTML/CSS

Contenido principal Google Clone

Maquetación HTML de un Clon de Google Paso a Paso

Estilos CSS para Posicionar Logos y Contenido en HTML

Estilos CSS para Inputs: Diseño y Personalización

Efecto Hover y Sombra en Inputs con CSS

Estilización de Botones en HTML y CSS

Footer Google Clone

Construcción de un Pie de Página con HTML y Enlaces

Estilos CSS para posicionamiento y diseño de contenedores en HTML

Cierre

Uso de CSS Grid y Flexbox para Diseño Web

Evaluación y Reflexión del Proyecto Clon de Google