0% found this document useful (0 votes)
17 views4 pages

Code Complet Projet3

The document describes creating a static website project. It includes the HTML and CSS code to build the basic structure and layout of the website with a header, navigation menu, content section, and footer. The CSS styles various elements like images, text, and links on the page.

Uploaded by

yacoubiyacoubi86
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
0% found this document useful (0 votes)
17 views4 pages

Code Complet Projet3

The document describes creating a static website project. It includes the HTML and CSS code to build the basic structure and layout of the website with a header, navigation menu, content section, and footer. The CSS styles various elements like images, text, and links on the page.

Uploaded by

yacoubiyacoubi86
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/ 4

Matière : STI Prof : Mme Asma Briki

Domaine d’apprentissage : Systèmes & technologies de l’informatique

Partie I : Création d’un site web statique

Fiche du projet 3

Classe : 4ème SI1/2 Lycée Hmida Bakir Mnihla

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Index</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<img src="images/logo.png" alt="logo" id="logo" />
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">S'inscrire</a></li>
<li><a href="#">Offres</a></li>
<li><a href="#">Commande</a></li>
</ul>
</nav>
</header>
<section>
<div id="texte">
Projet 3 : CSS3 4ème SI Lycée Hamida bakir
<h1>Bienvenue dans le monde des systèmes d’information</h1>
<h4>Un monde qui semble changer presque quotidiennement</h4>
</div>
<figure>
<img src="images/i1.jpg" alt="pc1" class="pict" />
<img src="images/i2.jpg" alt="pc2" class="pict" />
<img src="images/i3.jpg" alt="pc3" class="pict" />
<img src="images/i4.jpg" alt="pc4" class="pict" />
<img src="images/i5.jpg" alt="pc5" class="pict" />
</figure>
</section>
<footer>
<a href="#"><img src="images/Twitter.png" alt="Twitter" class="rs" /></a>
<a href="#"
><img src="images/Facebook.png" alt="Facebook" class="rs"/></a>
<a href="#"><img src="images/Linkedin.png" alt="Linkedin" lass="rs" /></a>
<a href="#"><img src="images/Website.png" alt="Website" class="rs" /></a>
<a href="#"><img src="images/Pinterest.png" alt="Pinterest"
class="rs" /></a>
</footer>
<script src="controle.js"></script>
</body>
</html>
Style.css
header {
width: 100%;
height: 15%;
background-color: rgb(0, 204, 255);
display: flex;
justify-content: space-around;
position: fixed;
}
#logo {
width: 100px;
height: 100%;
}
#logo:hover {
transition: 5s;
transform: skew(15deg, 15deg);
}
li a {
text-decoration: none;
color: #fff;
}
ul li {
display: inline-block;

2
Projet 3 : CSS3 4ème SI Lycée Hamida bakir
font-family: lato, sans-serif;
font-size: 24px;
margin-right: 20px;
padding-top: 15px;
text-transform: capitalize;
}
li a:hover {
border-bottom: 5px solid white;
color: rgb(20, 23, 209);
font-size: 30px;
background-color: aquamarine;
transition: 0.5s;
}
body {
width: 100%;
background-image: url("images/bg2.jpg");
background-repeat: no-repeat;
background-size: cover;
}
section {
width: 100%;
height: 400px;
margin: auto;
padding: 5%;
}
#texte {
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
font-size: 20px;
color: rgb(34, 8, 104);
background-image: linear-gradient(to top right, white, teal);
opacity: 0.8;
width: 500px;
height: 150px;
border-radius: 15%;
border-width: 6px;
padding: 10px;
text-align: center;
box-shadow: 5px 5px 5px rgb(240, 217, 9); /*inset*/
position: absolute;
top: 20%;
left: 30%;}
#texte:hover {
transition: width 2s, height 4s;
width: 600px;
height: 200px;
}

3
Projet 3 : CSS3 4ème SI Lycée Hamida bakir
figure {
margin-top: 20%;
margin-left: 15%;
display: flex;
}
.pict {
width: 150px;
height: 150px;
padding: 20px;
}
.pict:hover {
transform: scale(1.5);
}
footer {
width: 100%;
background-color: rgba(14, 210, 245, 0.733);
text-align: center;
border-top: 10px solid rgb(17, 0, 255);
position: absolute;
bottom: 0;
}
.rs {
width: 50px;
height: 50px;
margin: 20px;
opacity: 0.3;
}
/* exemple 1 avec rotation*/
.rs:hover {
opacity: 1;
/* transition-delay: 0.5s;
transition-duration: 1s;
transition-property: rotate;*/
transition: rotate 2s 0.5s;
rotate: -360deg;
}
/*Exemple2 avec zoom
.rs:hover {
opacity: 1; /*
transition-duration: 1s;
transition-delay: 0.5s;
transition-property: scale;
scale: 1.25; */
/*transition: scale 2s 0.5s;
scale: 1.25;
}*/

You might also like