/* flexbox */
html{
display: flex;
}
body{
display: flex;
flex-wrap: wrap;
background-color: #5299E3;
font-family: Arial, sans-serif;
font-size: 100%;
}
header, nav, .content, footer{
display: flex;
padding: 3px;
margin: 5px;
border-radius: 10px;
background-color: skyblue;
flex-basis: 100%;
}
header{
flex-direction: row;
justify-content: space-between;
}
nav{
justify-content: space-around;
flex-wrap: wrap;
padding-top: 1.2em;
padding-bottom: 1.2em;
}
content{
flex: auto;
flex-wrap: wrap;
}
footer{
padding: 10px;
}
/* balise perso */
.logo{
width: 15%;
}
.boutondeco{
font-size: 1em;
background-color:#54AAFF;
border-color: #54AAFF;
border-radius: 30px 30px 30px 30px;
color: white;
}
.bouton{
text-align: right;
}
.connecter{
font-size: 1em;
background-color:#54AAFF;
border-color: #54AAFF;
border-radius: 30px 30px 30px 30px;
}
.icon{
display: flex;
justify-content: space-around;
}
.carte{
text-align: center;
}
.soulignement{
text-decoration: underline;
text-decoration-style: double;
}
.formulaire{
padding: 1em;
}
.img-respensive{
max-width: 100%;
height: auto;
display: block;
}
/* Balise */
ul{
list-style:linear-gradient(to left bottom, #F5ABF7, #4D99FF);
color: #066DF9;
}
Strong{
font-size: 1.5em;
color: #2F51ED;
text-transform: uppercase;
}
img{
border-radius: 20px;
}
video{
border-radius: 20px;
max-width: 100%;
height: auto;
display: block;
}
h1{
text-align: center;
text-decoration: underline;
text-shadow: 0px 0px 10px blue;
text-transform : uppercase;
color: white;
}
h2{
text-align: center;
color: white;
text-shadow: 0px -1px 11px rgba(159, 108, 255, 1);
}
h3{
color: white;
}
h4{
color: white;
font-size: 1.3em;
text-align: justify;
}
/* taille texte */
@media screen and (max-width: 60em){
h1{
font-size: 1.5em;
}
}
@media screen and (max-width: 50em) {
h1 {
font-size: 1.2em;
}
}
@media screen and (max-width: 30em){
h1 {
font-size: 0.9em;
}
}
@media screen and (max-width: 60em){
h2{
font-size: 1.5em;
}
}
@media screen and (max-width: 50em) {
h2 {
font-size: 1.2em;
}
}
@media screen and (max-width: 30em){
h2 {
font-size: 0.9em;
}
}
@media screen and (max-width: 64em){
h3{
font-size: 1.5em;
}
}
@media screen and (max-width: 50em) {
h3 {
font-size: 1.2em;
}
}
@media screen and (max-width: 30em){
h3 {
font-size: 0.9em;
}
}
@media screen and (max-width: 64em){
h4{
font-size: 1em;
}
}
@media screen and (max-width: 50em) {
h4 {
font-size: 1em;
}
}
@media screen and (max-width: 30em){
h4 {
font-size: 0.9em;
}
}
/* liens */
a, a:hover, a:visited{
text-decoration: none;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Acceuil</title>
<meta charset="utf-8">
<!--taille text-->
<style type="text/css">
@media screen and (min-width:1024px) {
p+p {display: none;}
}
@media screen and (max-width:1024px) {
p:first-child {display: none;}
}
</style>
<!--fin-->
<!--telephone-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--bootstrap-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="shortcut icon" href="images/logo.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img class="logo" src="images/logoetnom.png" alt="logo et nom">
<form>
<div><button type="submit" class="connecter"><a class="boutondeco" href="Connection.html">Se connecter</a></button></div>
</form>
</header>
<nav>
<a href="Accueil.html">Acceuil</a>
<Strong>Présentation</Strong>
<a href="Modele.html">Modèles</a>
</nav>
<div class="content">
<div class="col justify-content-md">
<div class="col col-lg">
<h1>Pourquoi choisir nos portes ?</h1>
</div>
<div class="col col-lg">
<h2>Parce qu'elles sont les meilleurs qualités-prix !<br> Ce sont également les plus sécurisés.</h2><br>
</div>
<div class="col col-lg">
<h3>Nos portes disposent d'un système de <span class="soulignement">reconnaissance faciale</span> et d'<span class="soulignement">identification</span> qui permettent de détecter :</h3>
</div>
<div class="col col-lg">
<ul>
<li>Si des individus sont à moins d’un mètre de celle-ci.<br> Elle enverra une notification d’avertissement au propriétaire. Il pourra donc regarder ce qu’il se passe en direct.</li>
<li>Si un individu essaye de forcer la porte, elle contactera les forces de l’ordre en leur envoyant une photo de la personne et enverra un message au propriétaire.<br> Ceux-ci pourront également regarder ce qu’il se passe en direct.</li>
</ul>
</div>
<div class="col col-lg">
<h3>Elles disposent également de plusieurs options :</h3>
</div>
<div class="col col-lg">
<ul>
<li>Caméra de surveillance</li>
<li>Historique des individus détecter (vidéo et photo du visage)</li>
<li>Ouverture et fermeture grâce au smartphone</li>
<li>Ouverture automatique de la porte.<br> Celle-ci pourrra identifier votre plaque d'immatriculation et pourra donc ouvrir la porte lorsque votre véhicule sera à 3m de la porte.</li>
<li>Capteur qui vérifie si il n'y a rien en dessous de celle-ci.<br>Elle s'arrêtera à 30cm de l'objet ou de la personnes.</li>
</ul>
</div>
<div class="col col-lg">
<h3>
Elles sera aussi équipé d'un système anti-suicide :
</h3>
</div>
<div class="col col-lg">
<ul>
<li>Lorsque la porte détectera une masse accroché à la porte, celle-ci se refermera immédiatement.</li>
<li>Elle pourra détecter le taux de gaz (CO2, ...) dans le garage. La porte ouvrira automatique des trappes d'air qui permettront l'aération du garage.</li>
</ul>
</div>
</div>
</div>
<footer class="icon">
<a href="https://www.facebook.com/Porsecu-106066048767413/"><img width="75px" src="images/facebook.jpg" alt="icone facebook"></a>
<a href="https://www.instagram.com/invites/contact/?i=opsrxvlmu55v&utm_content=nkfx343">
<img width="75px" src="images/instagram.jpg" alt="icone facebook">
</a>
<a href="https://twitter.com/porsecu1"><img width="75px" src="images/twitter.jpg" alt="icone facebook"></a>
</footer>
</body>
</html>
