Página web para cliente

5222

Lo que trato de hacer aquí es imitar el diseño una página web que ya existe hecha con wordpress.

Primero con el código HTML, estructuramos primero lo básico, que sería lo siguiente:

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="/style.css/>
    <title>Soluciones</title>
</head>
<body>
    
</body>
</html>```

**Después, colocamos lo que tendremos en el body y en el HEAD, hay que estructurar en órden lo que tendremos, como un HEADERm un MAIN y un FOOTER y dentro de cada uno hay que poner las secciones que tendremos.
así:**

    </section>
    <section>
        
    </section>
    <section>
        
    </section>
    <section>
        
    </section>
    <section>

    </section>
</main>
<footer>
    <section>
        
    </section>
    <section>
        
    </section>
    <section>
        
    </section>
    <section>
       
    </section>

</footer>

</body>
</html>

Ya que tenemos nuestra estructura base, hay que saber qué tendremos dentro de cada SECTION y empezar a poner las CLASS para lograr los estilos, en mi opinión, los CLASSse van poniendo como se van ocupando y tratar de poner los necesarios para que nuestro código nose cargue. 

Aquí el ejemplo:

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<link rel=“stylesheet” href="/style.css"/>
<link rel=“stylesheet” href=“https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap”>
<title>Soluciones</title>
</head>
<body>
<header>
<section class=“headerContacto”>
<p></p>
<p></p>
</section>
<section class=“menuHeader”>
<a href=“dirección web”>
<img class=“imagenLogo” src=“dirección de la imagen” alt=“nombre a colocar a la imagen, ésta no se verá pero es importante colocarla para ser más específico con lo que hacemos”>
</a>

        <nav>
            <ul>
                <li>nombre del menú 1</li>
                <li>nombre del menú 2</li>
                <li>nombre del menú 3</li>
                <li>nombre del menú 4</li>
            </ul>
        </nav>
    </section>
    <section class="imagenHeader">
        <a href="direccion web a donde será dirigido">
            <img src="direccion de la imagen" alt="ejemplo: imágen de una montaña">
            <div>
                <p></p>
                <h2></h2>
                <p></p>
                <button></button>
            </div>
        </a>
    </section>
</header>
<main>
    <section class="mainNuestrosServicios">
        <h2></h2>
        <p></p>
        <!-- Carrusel de imágenes-->
        <div class="carruselServicios">
            <div class="carrusel">
                <img src="" alt="imagen de carrusel 1">
                <img src="" alt="imagen de carrusel 2">
                <img src="" alt="imagen de carrusel 3">
                <img src="" alt="imagen de carrusel 4">
                <!-- Agrega más imágenes según sea necesario -->
            </div>
        </div>
        <button>aqui va un botón</button>
    </section>
    <section class="mainQuienesSomos">
        <h2>texto</h2>
        <p>texto de párrafo</p>
            
        <button>Aquí va un botón</button>
            <img src="" alt="nombre de lo que va la imágen"/> 
    </section>
    <section class="espacioEnBlancoMain">
        <p></p><!--Espacion en blanco-->
    </section>
    <section class="mainPorqueNosotros">
        <img/>
        <h2>Título</h2>
        <p>párrafo</p>

    </section>
    <section class="mainNuestrosClientes">
        <h2>título</h2>
        <!--carrusel de imágenes-->

    </section>
</main>
<footer>
    <section>
        <a href="link">
            <img class="dirección web de la imagen" alt="nombre de lo va la imagen">
        </a>
        <p>párrafo</p>
    </section>
    <section class="nuestroServiciosFooter">
        <h2>título</h2>
        <ul>
            <li>Matenimiento</li>
            <li>Venta</li>
            <li>Instalación</li>
            <li>Matenimiento</li>
            <li>Extra</li>
            <li>Ductería</li>
            <li>Inyección</li>
        </ul>
    </section>
    <section class="menuFooter">
        <h2>Menú</h2>
        <nav>
            <ul>
                <li>elemento 1</li>
                <li>elemento 2</li>
                <li>elemento 3</li>
                <li>elemento 4</li>
            </ul>
        </nav>
    </section>
    <section class="contactoFooter">
        <h2>titulo</h2>
        <p>México</p>
        <p>Email</p>
        <p>WA</p>
        <P>Horario: Lun - Vier 9:00 am -6:00 pm</P>
    </section>

</footer>

</body>
</html>```

Así ya que tenemos nuestro HTML estructurado nos pasamos al CSS

html {
    font-size: 62.5%;
}
button {
    background-color: #467FF7;
    color: #ffffff;
    border: none;
    border-radius: 30px;
    padding: 20px30px;
    font-size: 1.5rem;
}

h2 {
    font-size: 7rem;
    color: #1C244B;
}
    

body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
}
/*Header*//*Franja de contacto del header*/.headerContacto {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px;
    padding: 10px;
    padding-left: 120px;
    padding-right: 120px;
}
.headerContactop {
    margin: 0;
    font-size: 1.5rem;
    
}

/*Menú*/.menuHeadernavul{
    text-align: right;
    list-style: none;
    font-size: 1.5rem;
    
}

.menuHeadernavli {
    display: inline-block;
    margin: 10px;
}

.menuHeader {
    background-color: #FCFCFC;
    display: flex;
    justify-content: space-between;
    padding-right: 120px;
    
}

.menuHeaderimg {
    width: 40px;
    height: 40px;
    padding-left: 10rem;
    padding-top: 10px;
}

/*Imágen Header*/.imagenHeaderimg {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    margin: auto;
    padding-bottom: 100px;
    position: relative;
    overflow: hidden;
}

.imagenHeaderdiv {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 2rem;
    color: #1C244B;
}
.imagenHeaderdivh2 {
    font-size: 8rem;
}

/*--------Main----------*//*Servicios*/.mainNuestrosServicios {
    padding-top: 100px;
    padding-bottom: 150px;
    text-align: center;
    font-size: 2rem;
}

/*.mainNuestrosServicios h2 {
    font-size: 5rem;
}*/.carruselServicios {
    width: 100%;
    overflow: hidden;
}

.carrusel {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carruselimg {
    width: 100%;
    height: auto;
}

/*Quienes Somos*//*.mainNuestrosServicios button {
    background-color: #467FF7;
    color: #ffffff;
    border: none;
    border-radius: 30px;
    padding: 20px 30px;
}*/.mainQuienesSomos {
    background-color: #F3F5F8;
    padding-top: 100px;
    padding-bottom: 150px;
    font-size: 1.5rem;
    
}
.mainQuienesSomosimg {
    width: 48%;
    max-width: 300px;
    margin-left: 20px; /* Agregado margen izquierdo para separar la imagen del resto de los elementos */

}



.espacioEnBlancoMain {
    background-color: #ffffff;
    padding: 120px;
}

.mainPorqueNosotros {
    background-color: #F3F5F8;
    padding-top: 100px;
    padding-bottom: 150px;
    padding-right: 45rem;
    text-align: right;
}
.mainPorqueNosotrosp{
    padding: 10px;
    font-size: 1.5rem;
    
}

.mainNuestrosClientes {
    text-align: center;
}

footer {
    background-color: #F3F5F8;
    display: flex;
    justify-content: space-between;
    margin: 5px;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

.imagenLogoFooter {
    width: 40px;
    height: 40px;
    padding-left: 10rem;
    padding-top: 10px;
}


.menuFooterh2,
.contactoFooterh2,
.nuestroServiciosFooterh2 {
    font-size: 2rem;
}

Aquí en el CSS irá cualquier diseño que queramos, esto es mio pero se puede modificar al gusto de cada uno.

hace 9 meses

Escribe tu comentario

+ 2

Entradas relacionadas

Cómo hacer un piano sencillo con dos teclas de color rosa usando HTML y CSS

En este tutorial te mostraré cómo crear un piano básico con dos teclas usando solo HTML y CSS. Las teclas serán de color rosa y, cuando haga

carozamb

Crea un Piano con Botones usando HTML y CSS

Hola! 😄 Acompáñame en este pequeño tutorial a través del cual construiremos el aspecto gráfico de un piano usando botones de HTML y estilos

robledocorrea

Domina la creación de tarjetas HTML y CSS: ¡Conviértete en un maestro de las 🃏 Cards en Frontend! 🚀

En este emocionante tutorial, vamos a sumergirnos en el fascinante mundo de la creación de tarjetas HTML y CSS. Si eres como yo, un apasiona

cpedrozamesa

Chat entre amigos

Bueno, para crear una figura de chat con html y CSS primero debes saber de que se tratará el mensaje. Haz un borrador de lo que el mensaj

malexandrecrespo