href = " https://fonts.googleapis.com/css2?family=Rubik: wght @ 400; 500; 600; 700 & display = swap "
 rel = "hoja de estilo"
 />

Pawfect🐾










 Servicio de peluquería para mascotas en Carolina del Norte




 ¿Quedarse sin tiempo? No digas más. Veniome Pawfect ea fugiat itaque, aut unde ratione veniam ipsum temporibus cumque sunt nemo assumenda facere?

Producción:

Ahora es el momento de diseñar el menú de navegación y la sección de héroe.

CSS general

Agregue el estilo CSS general en la parte superior de su style.css Archivo. La sección de héroe tiene una imagen de fondo. Usted puede acceder al código completo incluyendo imágenes en GitHubo usa tu propia imagen.

* {
 margen: 0;
 acolchado: 0;
 tamaño de caja: caja de borde;
}
html {
/ * 10px / 16px = 0.625 = 62.5 * /
 tamaño de fuente: 62,5%;
 overflow-x: oculto;
 comportamiento de desplazamiento: suave;
}
cuerpo {
 familia de fuentes: 'Rubik', sans-serif;
 altura de línea: 1,5;
 tamaño de fuente: 1.5rem;
 peso de fuente: 400;
 overflow-x: oculto;
 color: # 523414;
 color de fondo: # e9be5a;
}
.cabecera-primaria,
.encabezado-secundario,
.heading-terciario {
 peso de fuente: 700;
 color: # 523414;
 espaciado entre letras: -0,5px;
}
.heading-primary {
 tamaño de fuente: 5.2rem;
 altura de línea: 1,05;
 margen inferior: 3.2rem;
}
.heading-secundaria {
 tamaño de fuente: 4.4rem;
 altura de línea: 1,2;
 margen inferior: 5.6rem;
 alineación de texto: centro;
}
.heading-terciario {
 tamaño de fuente: 3rem;
 altura de línea: 1,2;
 margen: 1.2rem;
}
a {
 decoración de texto: ninguna;
}
.first-fold {
 imagen de fondo: url (img / Pawfect-bg.png);
 altura mínima: 80rem;
}

Aplicar estilo a la barra de navegación

Usar Caja flexible CSS para ajustar el logotipo y los menús de navegación en una fila. Colocar color de fondo para transparentar y dar un radio de borde de 9px al botón de llamada a la acción (CTA).

Barra de navegación CSS

/* ****************** */
/ * Logotipo * /
/* ****************** */
.header {
 pantalla: flex;
 justificar-contenido: espacio-entre;
 alinear-elementos: centro;
 color de fondo: transparente;
 altura: 9.6rem;
 acolchado: 0 4.8rem;
}
.logo {
 altura: 2.2rem;
 tamaño de fuente: 3.6rem;
 decoración de texto: ninguna;
 alineación de texto: centro;
 font-weight: negrita;
 color: # 462d12;
}
/* ****************** */
/ * Navegación * /
/* ****************** */
.main-nav-list {
 estilo de lista: ninguno;
 pantalla: flex;
 alinear-elementos: centro;
 brecha: 4.8rem;
}
.main-nav-link {
 pantalla: bloque en línea;
 decoración de texto: ninguna;
 color: # 462d12;
 peso de fuente: 400;
 tamaño de fuente: 1.8rem;
}
.main-nav-link.nav-cta {
 acolchado: 1.2rem 2.4rem;
 radio del borde: 9px;
 color: #fff;
 color de fondo: # 523414;
}

Producción:

Relacionado: Cómo construir una barra de navegación receptiva usando HTML y CSS

Diseñando la sección de héroes

Establecer un anchura máxima en la clase de héroe anidando el encabezado principal y la descripción. De lo contrario, se extenderá hasta el final en lugar de quedarse en el lado izquierdo. Selecciona el tamaño de fuente y relleno según su requerimiento.

Sección de héroe CSS

/* ****************** */
/ * Sección de héroe * /
/* ****************** */
.section-hero {
 acolchado: 15rem 0 9.6rem;
}
.hero {
 ancho máximo: 75rem;
 acolchado: 0 9.6rem;
 alinear-elementos: izquierda;
}
.hero-description {
 tamaño de fuente: 2rem;
 altura de línea: 1,6;
 margen: 4.8rem 0;
}

Producción:

Construcción de la sección de servicios

El sitio ofrece cuatro servicios: aseo completo, lavado de perros de autoservicio, lavado y secado, y masaje corporal y de patas.

HTML de la sección de servicios

Crea un padre class = "servicios de red" y agregue los cuatro servicios usando. Agregue la imagen, el nombre del servicio y una pequeña descripción del mismo.

Nuestros servicios






Aseo completo

Lorem ipsum consectetur adipisicing elit.







Lavado de perros de autoservicio

Odit aliquam dolor ex doloremque sed itaque.







Lavar y secar

Voluptatem suscipit ut omnis quas saepe.







Masaje corporal y de patas

Sapiente quos qui hic porro voluptatibus impedit.

Sección de Servicios CSS

Cree una cuadrícula con dos columnas iguales y establezca el brecha a 4rem. Ajustar todos los elementos de cuadrícula en el centro y establezca la imagen ancho al 80% del tamaño original.

/* ****************** */
/* Nuestros servicios */
/* ****************** */
.Nuestros servicios {
 acolchado: 9.6rem 0;
}
.envase {
 ancho máximo: 120rem;
 margen: 0 automático;
 acolchado: 1.5rem 3.2rem;
}
.red {
 pantalla: cuadrícula;
 columnas-plantilla-cuadrícula: 1fr 1fr;
 brecha: 4rem;
 alinear-elementos: centro;
 justificar-contenido: centro;
 alineación de texto: centro;
}
.services img {
 ancho: 80%;
 radio del borde: 9px;
}

Producción:

Construyendo la sección Acerca de

La sección Acerca de tendrá una imagen y un cuadro de texto con información breve sobre el equipo.

Acerca del HTML de la sección

Crear un 
 y coloque la imagen y el texto en su interior. 








Sobre nosotros


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Cuas
 officiis, perferendis iure possimus dolor aspernatur incidunt rem
 ipsa, consectetur temporibus dolor ea? Tenetur nobis laboriosam
 dolor perspiciatis aspernatur incidunt rem placeat quis assumenda
 dicta!

Acerca de la sección CSS

Diseñe la imagen y el cuadro de texto usando CSS Grid y agregue un sombra paralela para hacerlo más atractivo. Utilizar una margen negativo para establecer el cuadro de texto sobre la imagen.

/* ****************** */
/* Sobre nosotros */
/* ****************** */
.grid-about {
 columnas de plantilla de cuadrícula: 1.2fr 0.8fr;
 brecha: 0;
}
.acerca de {
 acolchado: 2rem 0 7rem 0;
}
.about img {
 ancho: 98%;
 justificarse a sí mismo: fin;
 radio del borde: 9px;
}
.about p {
 tamaño de fuente: 2.2rem;
}
.texto {
 ancho máximo: 45rem;
 color de fondo: # e7ac21;
 acolchado: 10rem 5rem;
 margen izquierdo: -5rem;
 radio del borde: 9px;
}
.text h2 {
 margen inferior: 4.5rem;
 alineación de texto: centro;
}

Producción:

El pie de página de un sitio web deja una impresión duradera en la mente de los visitantes, así que asegúrese de que esté limpio y bien organizado.

Agregue un encabezado principal que diga gracias a los visitantes. © es una entidad HTML para el © símbolo.

Diseñe el pie de página dándole un estilo diferente. color de fondo y ajuste apropiado relleno.

/* ****************** */
/ * Pie de página * /
/* ****************** */
pie de página {
 alineación de texto: centro;
 color de fondo: # e7ac21;
 acolchado: 2.5rem;
}

Producción:

Puedes ver el sitio web final de Pawfect siguiendo este enlace.

Publique su sitio web

¡Felicitaciones, creó un sitio web completo desde cero utilizando HTML y CSS! Es hora de publicar su sitio web y obtener comentarios de la comunidad. Esperamos que haya disfrutado del proceso de creación del sitio. Si es nuevo en el alojamiento, eche un vistazo a cómo alojar un sitio web de forma gratuita con las páginas de GitHub.

Naincy Mourya (19 Artículos publicados)

Naincy se especializa en la creación de sitios web altamente receptivos y una estrategia de contenido eficiente junto con copias web. Ella es una escritora de tecnología independiente que está muy atenta a las tecnologías de tendencia.

Más de Naincy Mourya