<style>
/* GLOBAL CSS */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
margin: 0px;
}
h1,
h2,
h3,
h4,
h5,
h6,
input,
input.formInput::placeholder,
input.formTextArea::placeholder,
input.formLink::placeholder,
a.formLink,
textarea,
label {
font-family: 'Open Sans', sans-serif;
}
a {
outline: none;
transition: 0.3s ease;
text-decoration:none;
}
ul {
list-style: none;
padding: 0px;
}
/* FONT ALIGN */
.textCenter {
text-align: center;
}
.textRight {
text-align: right;
}
.textLeft {
text-align: left;
}
.imgFluid {
max-width: 100%;
height: auto;
}
/* FONT WEIGHTS */
.fLight {
font-weight: 200;
}
.fLight300 {
font-weight: 300;
}
.fRegular {
font-weight: 400;
}
.fBold {
font-weight: 700;
}
.fBlack {
font-weight: 900;
}
/* FONT SIZES */
.f45 {
font-size: 45px;
}
.f30 {
font-size: 30px;
}
.f20 {
font-size: 20px;
}
.f16 {
font-size: 16px;
}
/* DEFAULT COLORS */
.cLight {
color: white;
}
.cCark {
color: #000
}
.cGrey {
color: #ccc;
}
.cPrimary {
color: #0198db;
}
.cSecondary {
color: #163d4f;
}
/* FORM GLOBAL CSS */
label {
display: block;
font-size: 14px;
color: #4A596B;
font-weight: bold;
margin-bottom: 5px;
}
.formControl {
width: 98%;
background-color: #f9f9f9;
border: none;
border-radius: 5px;
padding: 10px 5px;
margin-bottom: 10px;
outline: none;
box-shadow: 5px 5px 20px #f6f6f6 inset;
}
.formControl:focus {
box-shadow: 0 0 3px 2px #c9daf9bf;
}
textarea {
height: 80px;
}
/* BUTTONS */
.btn-default {
width: auto;
background-color: #0198db;
border-radius: 5px;
font-weight: 500;
padding: 10px 15px;
display: inline-block;
align-items: center;
border: none;
font-size: 14px;
transition: 0.2s ease;
color: #fff;
cursor: pointer;
}
.btn-default:hover {
background-color: #00638E;
}
/* BREADCRUMBS */
.sectionBreadcrumbs {
background-color: #f9f9f9;
padding-block: 15px;
}
.sectionBreadcrumbs .container {
display: flex;
justify-content: space-between;
}
.sectionBreadcrumbs .container h1.pageIdentify {
font-size: 20px;
}
.sectionBreadcrumbs .container ol#breadcrumb {
display: flex;
gap: 10px;
list-style: none;
padding: 0px;
}
.sectionBreadcrumbs .container ol#breadcrumb li {
display: flex;
gap: 10px;
}
.sectionBreadcrumbs .container ol#breadcrumb li a {
color: #000;
}
.sectionBreadcrumbs .container ol#breadcrumb li a:hover {
color: #0098db;
}
.sectioNBreadcrumbs .container #pageName {
text-transform: capitalize;
}
@media (max-width: 772px) {
.sectionBreadcrumbs .container {
display: flex;
justify-content: space-between;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
}
}
</style>
Você também pode gostar de ler
Exemplo de artigo com multi títulos, mas usando só o principal
Exemplo de artigo com multi títulos, mas usando só o principal, Exemplo de artigo com multi títulos, mas usando só o principal
Em 01/04/2025 às 14h41 - Atualizado em 22/04/2025 às 15h41
Guia da Extensão #13 - Avaliação e Comentários
Como usar e inserir corretamente nos websites - requer a Extensão de Usuários #8
Em 01/04/2025 às 14h35 - Atualizado em 01/04/2025 às 14h41
Teste de matéria ao vivo
Criando um teste de matéria ao vivo. Criando um teste de matéria ao vivo Criando um teste de matéria ao vivo
Em 05/11/2024 às 16h12 - Atualizado em 07/02/2025 às 11h01
Extensão #14 WebStories ou histórias web
Uso da extensão para escrever web stories. Pode ser usado em todos os websites;
Em 23/07/2024 às 09h28 - Atualizado em 11/11/2024 às 10h34
Guia da Extensão #13 - Avaliação e Comentários
Como usar e inserir corretamente nos websites - requer a Extensão de Usuários #8
Em 26/05/2024 às 21h39 - Atualizado em 23/09/2024 às 09h36
Call to Action - Website Inicial - App ou Botão
Call to Action estilo aplicativo motorista, fora da grid bootstrap.
Em 22/07/2022 às 10h21 - Atualizado em 07/10/2022 às 11h02
Modelo Página de Contato - Websites Iniciaiss
Modelo de página de contato padrão para os websites iniciais.
Em 22/07/2022 às 09h09 - Atualizado em 07/10/2022 às 10h29
Grid - Bootstrap v5 - Grid oficial em todos os sites - Atualizado
Conceito de 12 colunas, mas aplicado com um código leve e sintetizado com grid do css
Em 29/06/2022 às 12h21 - Atualizado em 16/08/2022 às 09h09
Global CSS - ATUALIZADO - Estilo para dar os primeiros passos ao criar um site
Atributos e valores de estilo padrão com reset e alguns elementos específicos usados em nossos sites
Em 29/06/2022 às 17h06 - Atualizado em 16/08/2022 às 09h09
.htaccess com principais funcionalidades
Redirecionamento para sempre HTTPS, sempre www., esconder .html, nunca pastas e cache
Em 23/06/2022 às 20h16 - Atualizado em 16/08/2022 às 09h09