Maquetación HTML5: Clon de Página Web

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

Contenido del curso

Introducción

Análisis y creación del proyecto

Chrome Dev Tools como herramienta

5
Uso de Herramientas de Desarrollo en Navegadores para Depuración y CSS en Tiempo Real
03:05 min

Header Google Clone

Contenido principal Google Clone

Footer Google Clone

Cierre

Tomar examen

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

Miguel Angel Lozano Alvarez

Juan David HernandezPosso

Nabil Aparicio

Jhon Edward Bedoya

Benjamin Allen Ramirez Horna

Mateo Aquino

Joel Dominguez Merino

Alex Camacho

teacher•

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