site

155 programme

Ouvrir dans l'éditeur Publiez votre code

Recommandé

27 January 2025

Un site de journal réactif

4 November 2024

page d'accueil pour un site de portfolio

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
<div class="bt">.</div>
<h1>Protegez ce qui compte</h1>
<p>Securite professionnelle,24/7 pour proteger <br> vos bien et vos proches</p>
<button>Obtenir un devis</button>
<h2>Nos Services</h2>
<div class="tt">
  <div class="nn">
    <img src="https://th.bing.com/th/id/OIP.ajSTQx2QoR8RqDSIGmC6UQHaIV?w=153&h=180&c=7&r=0&o=7&pid=1.7&rm=3" width="50" height="50">
    <h3>surveillance 24/7</h3>
    <p class="qq">Vigilance constante,<br>jour et nuit</p>
    <h2 class="pp">5.000FCFA</h2>
  </div>
  <div class="nn">
    <img src="https://th.bing.com/th/id/OIP.n9VJg59SiIky3ZiSF7EmmgAAAA?w=173&h=180&c=7&r=0&o=7&pid=1.7&rm=3" width="50" class="vv">
    <h3 class="ee" >Proteger et Personnes</h3>
    <p class="aa">Securite rapprochee pour votre serenite</p>
    <h2 class="pp">3.500FCFA</h2>
  </div>
  <div class="nn">
    <img src="https://th.bing.com/th/id/OIP.tqlg1WKgN-l8C4a-HCuASgHaIV?w=171&h=193&c=7&r=0&o=7&pid=1.7&rm=3" width="50" class="vv">
    <h3 class="ee">Sytemes de securite</h3>
    <p class="aa">Innstallation et gestion de cameras, alarmes</p>
    <h2 class="ii">2.500FCFA</h2>
  </div>
</div>
</body>
</html>

CSS

body{
    margin: 0;
}
.bt{
   background: url(https://media.istockphoto.com/id/1618820974/fr/photo/heureux-portrait-et-policier-les-bras-crois%C3%A9s-dans-la-ville-pour-la-s%C3%A9curit%C3%A9-la-s%C3%BBret%C3%A9-et-la.webp?b=1&s=612x612&w=0&k=20&c=MgLFYhD8A76J7Kq2qMPS9rHLffk1VGwQvFnY-ukhFGk=);
   width: 100%;
   height: 20em;
}
h1{
    text-align: center;
    font-family: ARIAL;
}
p{
    text-align: center;
    font-family: ARIAL;
}
button{
    display: block;
    margin: 30px auto;
    padding: 5px 20px;
    color: black;
    border-radius: 10px;
    border: none;
    font-size: 17px;
    background-color: orange;
    transition: 2s;
}
button:hover{
    transform: scale(1.05);
}
h2{
    text-align: center;
    font-family: ARIAL;
}
.tt{
    display: flex;
    justify-content: space-evenly;
}
img{
    display: block;
    margin: 20px auto;
}
h3{
    text-align: center;
}
.qq{
    font-size: 14px;
    margin-top: -4px;
}
.pp{
    color: orangered;
    text-align: center;
}
.ee{
    margin-top: -10px;
}
.aa{
    font-size: 14px;
    margin-top: -10px;
}
.vv{
    margin-top: 12px;
}
.ii{
    color: orangered;
    margin-top: -0.5px;
}
.nn{
    background: rgb(245, 239, 239);
    border: 2px solid rgb(240, 238, 238);
    border-radius: 20px;
    width: 150px;
    height: 200px;
    margin-bottom: 50px;
}