<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
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
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
003. Header Clássico + Topbar + Search - Comp. Interago
Cabeçalho clássico + Topbar + Search - Componente com UX aprimorada e Pesquisa para Catálogo
Em 09/06/2022 às 17h55 - Atualizado em 16/08/2022 às 09h09
001. Footer Clássico - Comp. Interago
Footer clássico - Componente responsivo e com todas as diretrizes pré-prontas
Em 10/06/2022 às 09h38 - Atualizado em 16/08/2022 às 09h09