Scribd
Upload
4 views

HTML

The document contains an HTML structure for a website titled 'Site Web' with sections for a hero banner, about us, and services offered. It includes navigation links, descriptive text, and images for various services like web and mobile application creation. The accompanying CSS styles define the layout, colors, and hover effects for the website elements.

Uploaded by

ikenossama03
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

HTML

The document contains an HTML structure for a website titled 'Site Web' with sections for a hero banner, about us, and services offered. It includes navigation links, descriptive text, and images for various services like web and mobile application creation. The accompanying CSS styles define the layout, colors, and hover effects for the website elements.

Uploaded by

ikenossama03
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Index.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Site Web</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<ul>
<li><a href="#Hero">Acceuil</a></li>
<li><a href="#About">a propos de Nous</a></li>
<li><a href="#Services">Services</a></li>
<li><a href="#">Produits</a></li>
<li><a href="#">Contact</a></li>
</ul>

<div class="Hero" id="Hero">


<h1>MIAGE Casa</h1>
<p>Votre partenaire académique </p>
<a href="#">Inscrivez-Vous</a>
</div>

<div class="About" id="About">


<center>
<h1>A Propos de Nous</h1>
<img src="img/logo.png" alt="">
<h2>MIAGE Casa</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora maiores nesciunt, id
perferendis repellat nihil alias eligendi aliquid voluptates quae modi ullam aut voluptas cumque
consectetur ad ab, sint inventore?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates modi laboriosam
repudiandae. Possimus totam eveniet, quia quod sint porro, veniam optio facere cumque enim nisi
voluptas, neque fuga eius suscipit.
</p>
</center>
</div>

<div class="Services" id="Services">


<h1>Nos Services</h1>
<div class="SubServices">
<div >
<img src="img/1.png" alt="">
<h3>Création Site Web</h3>
<p>Création site vitrine à votre demande</p>
<a href="#">Lire plus...</a>
</div>
<div >
<img src="img/2.jpg" alt="">
<h3>Création Application Mobile</h3>
<p>Création Application Mobile à votre demande</p>
<a href="#">Lire plus...</a>
</div>
<div >
<img src="img/3.jpg" alt="">
<h3>Création Application Web</h3>
<p>Création Application Web à votre demande</p>
<a href="#">Lire plus...</a>
</div>
</div>
</div>

</body>
</html>
Style.css
*{
margin: 0px;
padding: 0px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/**** CSS Menu Debut ****/


ul{
list-style: none;
background-color: black;
text-align: center;
}
ul li{
display: inline-block;
}
ul li a{
color: white;
text-decoration: none;
display: block;
padding: 15px;

}
ul li a:hover{
color: black;
background-color: white;
transition: 0.5s;
}

/**** CSS Menu Fin ****/

/**** CSS Hero Debut ****/


.Hero{
height: 560px;
width: 100%;
text-align: center;
background: url(img/Hero-BG.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.Hero h1{
color: black;
padding: 100px 0px 30px 0px;
}
.Hero p{
color: black;
font-size: 20px;
letter-spacing: 5px;
text-transform: capitalize;
padding: 30px 0px 60px 0px;
}
.Hero a{
text-decoration: none;
color: white;
letter-spacing: 2px;
font-size: 20px;
background-color: black;
padding: 10px 20px;
border: white solid 2px;
}
.Hero a:hover{
background-color: white;
color: black;
border-color: black;
transition: 0.5s;
}

/**** CSS Hero Fin ****/

/**** CSS A propos Debut ****/


.About{
height: 560px;
width: 100%;
background-color: azure;
text-align: center;
}
.About h1{
padding: 50px 0px 30px 0px;
}
.About img{
height: 120px;
width: 150px;
}
.About h2{
margin: 20px 0px 20px 0px;
}
.About p{
width: 70%;
text-align: center;
text-align: justify;
line-height: 25px;
}

/**** CSS A propos Fin ****/


/**** CSS Services Début ****/

.Services {
height: 560px;
background: url(img/Services-BG.jpg);
background-size: cover;
background-position: fixed;
text-align: center;
padding: 20px;
}

.Services h1 {
font-size: 2rem;
margin-bottom: 20px;
}

.SubServices {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
}

.SubServices div {
background-color: white;
flex: 1;
border: 1px solid #ccc;
border-radius: 10px;
padding: 20px;
text-align: center;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.SubServices img {
width: 100%;
height: 150px;
margin-bottom: 10px;
object-fit: cover;
}

.SubServices h3 {
font-size: 1.2rem;
margin-bottom: 10px;
color: #333;
}

.SubServices p {
font-size: 1rem;
color: #666;
margin-bottom: 10px;
}

.SubServices a {
text-decoration: none;
color: #007BFF;
font-weight: bold;
transition: color 0.3s;
}

.SubServices a:hover {
color: #0056b3;
}

/**** CSS Services Fin ****/

You might also like