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>
<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/>
<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í:**
<!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>
</section>
<section>
</section>
<section>
</section>
</header>
<main>
<section>
</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 CLASS se van poniendo como se van ocupando y tratar de poner los necesarios para que nuestro código no se 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: 20px 30px;
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;
}
.headerContacto p {
margin: 0;
font-size: 1.5rem;
}
/*Menú*/
.menuHeader nav ul{
text-align: right;
list-style: none;
font-size: 1.5rem;
}
.menuHeader nav li {
display: inline-block;
margin: 10px;
}
.menuHeader {
background-color: #FCFCFC;
display: flex;
justify-content: space-between;
padding-right: 120px;
}
.menuHeader img {
width: 40px;
height: 40px;
padding-left: 10rem;
padding-top: 10px;
}
/*Imágen Header*/
.imagenHeader img {
width: 100%;
height: auto;
max-width: 100%;
display: block;
margin: auto;
padding-bottom: 100px;
position: relative;
overflow: hidden;
}
.imagenHeader div {
position: absolute;
top: 75%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 2rem;
color: #1C244B;
}
.imagenHeader div h2 {
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;
}
.carrusel img {
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;
}
.mainQuienesSomos img {
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;
}
.mainPorqueNosotros p{
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;
}
.menuFooter h2,
.contactoFooter h2,
.nuestroServiciosFooter h2 {
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.
Curso de Frontend Developer
