Code Complet Projet3
Code Complet Projet3
Fiche du projet 3
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;
}*/