sitio

243 programme

Abrir en el editor Publica tu código

Recomendado

10 April 2025

Sitio web del blog de Daniel

10 April 2026

sitio web del restaurante

17 May 2025

sitio web moderno

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