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
<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>