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

Pawfect🐾








instagram viewer







 Serviço de cuidados domésticos para animais de estimação na Carolina do Norte




 Está ficando sem tempo? Não digas mais nada. Veniome Pawfect e a fugiat itaque, aut unde ratione veniam ipsum temporibus cumque sunt nemo assumenda facere?

Saída:

Agora é hora de estilizar o menu de navegação e a seção de herói.

CSS geral

Adicione o estilo CSS geral no topo do seu style.css Arquivo. A seção do herói tem uma imagem de fundo. Você pode acesse o código completo incluindo imagens no GitHubou use sua própria imagem.

* {
 margem: 0;
 preenchimento: 0;
 dimensionamento da caixa: caixa de borda;
}
html {
/ * 10px / 16px = 0,625 = 62,5 * /
 tamanho da fonte: 62,5%;
 overflow-x: oculto;
 comportamento de rolagem: suave;
}
corpo {
 família da fonte: 'Rubik', sans-serif;
 altura da linha: 1,5;
 tamanho da fonte: 1,5 rem;
 peso da fonte: 400;
 overflow-x: oculto;
 cor: # 523414;
 cor de fundo: # e9be5a;
}
.heading-primary,
.heading-secondary,
.heading-terciary {
 peso da fonte: 700;
 cor: # 523414;
 espaçamento entre letras: -0,5 px;
}
.heading-primary {
 tamanho da fonte: 5.2rem;
 altura da linha: 1,05;
 margem inferior: 3.2rem;
}
.heading-secondary {
 tamanho da fonte: 4,4 rem;
 altura da linha: 1,2;
 margem inferior: 5,6 rem;
 alinhamento de texto: centro;
}
.heading-terciary {
 tamanho da fonte: 3rem;
 altura da linha: 1,2;
 margem: 1,2 rem;
}
uma {
 decoração de texto: nenhum;
}
.first-fold {
 imagem de fundo: url (img / Pawfect-bg.png);
 altura mínima: 80rem;
}

Estilizando a barra de navegação

Usar CSS flexbox para ajustar o logotipo e os menus de navegação em uma linha. Definir cor de fundo para ser transparente e dar um raio de fronteira de 9px ao botão de apelo à ação (CTA).

CSS da barra de navegação

/* ****************** */
/ * Logo * /
/* ****************** */
.header {
 display: flex;
 justify-content: espaço entre;
 alinhar-itens: centro;
 cor de fundo: transparente;
 altura: 9,6 rem;
 preenchimento: 0 4,8 rem;
}
.logo {
 altura: 2,2 rem;
 tamanho da fonte: 3.6rem;
 decoração de texto: nenhum;
 alinhamento de texto: centro;
 intensidade da fonte: Negrito;
 cor: # 462d12;
}
/* ****************** */
/ * Navigation * /
/* ****************** */
.main-nav-list {
 estilo de lista: nenhum;
 display: flex;
 alinhar-itens: centro;
 gap: 4,8rem;
}
.main-nav-link {
 display: bloco embutido;
 decoração de texto: nenhum;
 cor: # 462d12;
 peso da fonte: 400;
 tamanho da fonte: 1.8rem;
}
.main-nav-link.nav-cta {
 preenchimento: 1.2rem 2.4rem;
 raio da borda: 9px;
 cor: #fff;
 cor de fundo: # 523414;
}

Saída:

Relacionado: Como construir uma barra de navegação responsiva usando HTML e CSS

Estilizando a Seção Hero

Defina um largura máxima na classe de herói aninhando o título principal e a descrição. Caso contrário, ele se estenderá até o fim em vez de ficar no lado esquerdo. Colocou o tamanho da fonte e preenchimento de acordo com sua exigência.

Hero Section CSS

/* ****************** */
/ * Seção Hero * /
/* ****************** */
.section-hero {
 preenchimento: 15rem 0 9.6rem;
}
.hero {
 largura máxima: 75rem;
 preenchimento: 0 9,6 rem;
 alinhar itens: esquerda;
}
.hero-description {
 tamanho da fonte: 2rem;
 altura da linha: 1,6;
 margem: 4,8 rem 0;
}

Saída:

Construindo a Seção de Serviços

O local oferece quatro serviços: limpeza completa, lavagem self-service para cães, lavagem e secagem com jato de ar e massagem corporal e de patas.

HTML da seção de serviços

Crie um pai classe = ”serviços de rede” e adicionar todos os quatro serviços usando. Adicione a imagem, o nome do serviço e uma pequena descrição dele.

Nossos serviços






Grooming Completo

Lorem ipsum consectetur adipisicing elit.







Self Service Dog Wash

Odit aliquam dolor ex doloremque sed itaque.







Lavar e secar

Voluptatem suscipit ut omnis quas saepe.







Massagem Corporal e Pata

Sapiente quos qui hic porro voluptatibus impedit.

CSS da seção de serviços

Crie uma grade com duas colunas iguais e defina o Gap = Vão para 4rem. Ajuste todos os itens de grade no centro e definir a imagem largura a 80% do tamanho original.

/* ****************** */
/* Nossos serviços */
/* ****************** */
.Nossos serviços {
 preenchimento: 9,6 rem 0;
}
.container {
 largura máxima: 120rem;
 margem: 0 automático;
 preenchimento: 1.5rem 3.2rem;
}
.rede {
 display: grade;
 colunas de modelo de grade: 1fr 1fr;
 gap: 4rem;
 alinhar-itens: centro;
 justificar-conteúdo: centro;
 alinhamento de texto: centro;
}
.services img {
 largura: 80%;
 raio da borda: 9px;
}

Saída:

Construindo a seção Sobre

A seção Sobre terá uma imagem e uma caixa de texto com algumas informações breves sobre a equipe.

Sobre a seção HTML

Crie um 
 e coloque a imagem e o texto dentro dela. 








Sobre nós


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

Sobre CSS da Seção

Estilize a imagem e a caixa de texto usando CSS Grid e adicione um sombra para torná-lo mais atraente. Use um margem negativa para definir a caixa de texto acima da imagem.

/* ****************** */
/* Sobre nós */
/* ****************** */
.grid-about {
 colunas de modelo de grade: 1,2fr 0,8fr;
 lacuna: 0;
}
.cerca de {
 preenchimento: 2rem 0 7rem 0;
}
.about img {
 largura: 98%;
 justificar-se: fim;
 raio da borda: 9px;
}
.about p {
 tamanho da fonte: 2.2rem;
}
.texto {
 largura máxima: 45rem;
 cor de fundo: # e7ac21;
 preenchimento: 10rem 5rem;
 margem esquerda: -5rem;
 raio da borda: 9px;
}
.text h2 {
 margem inferior: 4,5 rem;
 alinhamento de texto: centro;
}

Saída:

O rodapé de um site deixa uma impressão duradoura na mente dos visitantes, então certifique-se de que ele esteja limpo e bem organizado.

Adicione um título principal agradecendo aos visitantes. © é uma entidade HTML para o © símbolo.

Estilize o rodapé, dando-lhe um estilo diferente cor de fundo e configuração apropriada preenchimento.

/* ****************** */
/ * Rodapé * /
/* ****************** */
rodapé {
 alinhamento de texto: centro;
 cor de fundo: # e7ac21;
 preenchimento: 2,5 rem;
}

Saída:

Você pode ver o site final da Pawfect seguindo este link.

Publique o seu site

Parabéns, você criou um site completo do zero usando HTML e CSS! É hora de publicar seu site e obter feedback da comunidade. Esperamos que você tenha gostado do processo de elaboração do site. Se você é novo em hospedagem, dê uma olhada em como hospedar um site gratuitamente usando as páginas do GitHub.

Naincy Mourya (19 artigos publicados)

A Naincy é especializada na construção de sites altamente responsivos e estratégia de conteúdo eficiente, juntamente com cópias da web. Ela é redatora freelance de tecnologia que fica de olho nas tendências de tecnologia.

Mais de Naincy Mourya