2
Good morning to all.
I’m doing a study in Html5 semantics and ended up with a knot in my head...
I wonder if I’m applying semantics correctly.
footer {
position: relative;
bottom: 0;
width: 100%;
background-color: #34495e;
color: white;
}
.m5 {
margin: 25px 0 25px 0;
}
.he1 {
height: 100px;
}
.text-blue {
color: #016bae;
}
.bg-blue {
background-color: #2980b9;
}
.bg-orange {
background-color: #f39c12;
}
footer p {
height: 13px;
color: white !important;
}
footer p a {
color: white !important;
}
.menu-recursos {
margin: 0;
padding: 0;
list-style-type: none !important;
}
.menu-recursos li a {
position: relative;
display: block;
padding: 12px 20px;
border: 1px solid transparent;
color: #333;
border-width: 1px 1px 0px 0px;
border-style: solid;
border-color: #d2d2d2;
font-size: 15px;
}
.list-group-item {
border-left: 0px !important;
}
.list-group a h2 {
font-size: medium !important;
font-weight: normal !important;
}
.list-group-item.active {
background-color: #3498db !important;
border-color: #3498db !important;
}
a.navbar-brand h1 {
font-size: 0;
}
.row.titulo {
background-color: #3498db;
color: #FFF;
padding-top: 8px;
}
h1.head {
font-size: 0;
margin: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<?php include 'config.php'; ?>
<!doctype html>
<html lang="pt-br">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<?php include 'inc_head.php'; ?>
<title>Sobre a empresa 7Carros - 7Carros</title>
</head>
<body>
<header>
<h1 class="head">Sobre a empresa 7Carros</h1>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<img src="<?= $site; ?>/imagens/logo.png" width="" height="75" title="Sistema para locadora de veículos" alt="[Sistema para locadora de veículos]">
<h1>Sistema para locadora de veículos</h1>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-lg-flex justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav nav-pills">
<li class="nav-item active"><a class="nav-link" href="<?= $site; ?>" title="Sistema para locadora de veículos">Inicio</a></li>
<li class="nav-item"><a class="nav-link" href="<?= $site; ?>/empresa" title="Sobre o sistema de locadora de veíclulos">A empresa</a></li>
<li class="nav-item"><a class="nav-link" href="<?= $site; ?>/recursos" title="Recursos do sistema de locadora de veículos">Recursos</a></li>
<li class="nav-item"><a class="nav-link" href="<?= $site; ?>/planos" title="Planos do sistema de locadora de veículos">Planos</a></li>
<li class="nav-item"><a class="nav-link" href="<?= $site; ?>/contato" title="Contato com 7Carros">Contato</a></li>
<li class="nav-item"><a class="nav-link" href="https://painel.7carros.com.br" rel="nofollow" title="Acessar sistema 7Carros">Painel</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<div class="row titulo">
<div class="container">
<div class="mb-3 text-right">
<h1>Sobre a empresa 7Carros</h1>
</div>
</div>
</div>
<article>
<div class="container">
<div class="mb-3"></div>
<div class="row">
<div class="col-sm">
<figure>
<img src="imagens/hostcia.png" class="float-right" alt="A empresa">
</figure>
</div>
<div class="col-sm">
<p class="tagline">O sistema 7Carros iniciou em agosto de 2012. Vimos que os sistemas atuais era feito com tecnologias defasadas e que não existia possibilidades de expansão. <br><br> Pensando iniciamos desenvolvimento e focamos no constante aperfeisoamento
do sistema, na segurança dos dados, rapidez no processamento e facilidade na visualização dos comandos. <br><br> Nosso sistema conseguiu simplificar os processos ao mesmo tempo alto controle das informações.<br><br> Temos um compromisso
com nossos clientes em que estaremos em constantes aperfeisoamento.</p>
</div>
</div>
<div class="p-5"></div>
</div>
</article>
</main>
<footer class="footer mt-auto py-3">
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="row">
<img src="./imagens/logo.png" alt="Logo" width="100">
</div>
<div class="row">
<h1 class="small">Solução completa para locadora de veículos</h1>
</div>
</div>
<div class="col-sm-3">
<h5><strong>Menu</strong></h5>
<p>- <a href="#">Inicio</a></p>
<p>- <a href="#">A empresa</a></p>
<p>- <a href="#">Recursos</a></p>
<p>- <a href="#">Planos</a></p>
<p>- <a href="#">Contato</a></p>
<p>- <a href="#">Painel</a></p>
</div>
<div class="col-sm-3">
<h5><strong>Recursos</strong></h5>
</div>
<div class="col-sm-3">
<h5><strong>Rede social</strong></h5>
<p> <a href="#"><i class="fa fa-facebook-official"></i> Facebook</a></p>
<p> <a href="#"><i class="fa fa-twitter"></i> Twitter</a></p>
<p> <a href="#"><i class="fa fa-youtube-play"></i> Youtube</a></p>
</div>
</div>
</div>
</footer>
</body>
</html>
good morning, the first thing I would recommend is not to use php so, you will spend a lot of resources of your web server and if you pay per resource, will be very expensive, the second is, da para guaribada in your css, a good way to study this is by using a manual of some famous library/framework like Less/Sass, for example, margin you do so . mt-1, mr-1, Mb-1 and ml-1 and the same theory with padding, height and width, already in html, the order is good
– flourigh
@flourigh Thanks. I tried to study Laravel but I found it so complicated, so much back to create a simple thing...rs
– Tiago
Have you heard about HTML Outline?
– Woss
@Tiago o Laravel at first glance is very complicated but to serve the API you can use several other features comp the Nodejs for Apis itself but the Laravel with Lumen is also pretty cool
– flourigh