Desafio de fitness de 30 dias Template CSS

O bloco do desafio fitness de 30 dias combina um fundo cinza-claro com um painel de texto centralizado e três áreas para fotografia esportiva. Uma imagem grande ocupa o lado esquerdo, enquanto duas imagens menores estão alinhadas verticalmente à direita, criando uma moldura visual ao redor do subtítulo superior, do título "30 dias de mudança", do parágrafo de apoio e do botão arredondado "começar agora". A tipografia display condensed em preto confere grande destaque à mensagem principal, enquanto o botão magenta cria um ponto de contraste evidente. O espaçamento amplo separa o texto das imagens e permite assimilar a introdução do desafio com facilidade.

Espaço cinza, tipografia condensed e toques de magenta estruturam o bloco do desafio

O estilo deste bloco depende de um equilíbrio refinado entre cor, tipografia e imagens. Um fundo cinza-claro cria uma área suave para o conteúdo centralizado, enquanto o texto em preto confere ao título "30 dias de mudança" contraste suficiente para comandar a hierarquia visual. A aplicação da tipografia display condensed em negrito confere forte presença ao título sem demandar uma área de texto maior, mantendo a leitura fluida do parágrafo de apoio logo abaixo.

O botão arredondado magenta "começar agora" traz o contraste de cor mais marcante de toda a seção. Seu contorno e tom saturado diferenciam a chamada para ação do fundo neutro e do texto escuro, enquanto o espaço ao redor evita que ele se misture ao bloco de texto. A foto de fitness ampla à esquerda e as duas imagens verticais à direita acrescentam dinamismo, mas seu enquadramento garante que a mensagem central continue sendo o eixo de organização.

Como interpretação de um modelo CSS, essas propriedades definem a aparência deste bloco específico e não um sistema visual para todo o site. O tom do fundo, o peso do título, a cor do botão, o arredondamento dos cantos, as proporções das imagens e os espaçamentos podem ser ajustados sem alterar o conteúdo do desafio ou a disposição tripartite. O enquadramento repetido das imagens também imprime à seção um ritmo visual harmônico: um painel largo equilibra os dois painéis mais estreitos sem exigir componentes ou interações extras.

Personalize com Nicepage

Ao usar o Construtor de modelos CSS, você poderá ajustar cores, fontes, cabeçalho e base, layout, colunas e outros elementos de design, bem como conteúdo e imagens.

Download

Editar modelo offline

1. Baixe e instale o aplicativo Nicepage para Windows e Mac. Ou os plugins WordPress e Joomla do página de download
2. Crie uma nova página ou selecione existente
3. Clique em Adicionar novo bloco, pesquise a id 50307 e clique em entrar

Editar modelo online

Comece Construtor online este modelo em nossa hospedagem

Crie sites incríveis

WordPress

Windows App

Joomla

Mac OS App

HTML5

Online

Construtor Nicepage grátis

Mais de 15.000 modelos

Arrastar e soltar fácil

Sem codificação

Compatível com dispositivos móveis

Palavras-chave

Personalize este modelo com CSS

Controle o estilo específico da página

Personalize a aparência visual deste modelo pronto diretamente no editor do Nicepage. Ajuste a tipografia, o espaçamento, os planos de fundo, as bordas, as cores, o posicionamento e outras propriedades de estilo usando controles visuais, mantendo o layout da página fácil de gerenciar sem precisar escrever CSS manualmente.

Adicione CSS personalizado quando necessário

Para requisitos de estilo que vão além das opções padrão do editor, use o CSS personalizado para adicionar regras específicas. O CSS pode ser aplicado a elementos individuais, páginas específicas ou a todo o site, dependendo do escopo da personalização, enquanto as classes CSS podem ser usadas para conectar regras personalizadas a elementos selecionados.

Exporte o CSS mínimo por página

Para projetos em que o tamanho do CSS e o desempenho da página são importantes, o Nicepage pode exportar o CSS mínimo para cada página. Em vez de depender de uma única folha de estilo comum, cada página pode usar um arquivo CSS separado contendo apenas as regras de estilo necessárias para aquela página específica. De acordo com a documentação do Nicepage, esses arquivos CSS específicos da página podem ser até dez vezes mais compactos, ajudando a reduzir o CSS desnecessário e a melhorar o desempenho de carregamento da página.

Esse fluxo de trabalho combina estilização visual com CSS personalizado opcional e saída CSS otimizada específica da página, oferecendo controle adicional quando um projeto exige, sem tornar a edição manual de CSS a principal forma de personalizar o modelo.