Dépot : Modif1

2 years ago · 7ece4b51b7
9 changed files with 1094 additions and 96 deletions
--- a/MachineASous.css
+++ b/MachineASous.css
@ -8,20 +8,74 @@ body
 	background-attachment: fixed;
 }

+header {
+	background-image: linear-gradient(to bottom,  rgba(0,0,0,0.75) -10%,rgba(0,0,0,0) 100%);
+	text-align: center;
+	padding: 0.5rem 0 5rem;
+	font-size: 1.25rem;
+}
+
+ul {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+li {
+	display: inline-flex;
+}
+
+.textTab {
+	font-family: 'firamonobold', cursive;
+	position: relative;
+	color: #fff;
+	font-size: 2rem;
+	padding-left: 150px;
+}
+
+.Home {
+	position: relative;
+	padding: 1rem 0 0.5rem;
+	margin: 0 1.5rem;
+	color: white;
+	text-decoration: none;
+	text-transform: uppercase;
+}
+.Home::after {
+	content: "";
+	position: absolute;
+	left: 50%;
+	bottom: 0;
+	transform: translateX(-50%) scaleX(0);
+	transform-origin: 50% 50%;
+	width: 100%;
+	height: 1px;
+	background-color: rgba(255, 255, 255, 0.8);
+	transition: transform 250ms;
+}
+.Home:hover::after {
+	transform: translateX(-50%) scaleX(1);
+}
+
+th, td {
+	border-radius: 20px;
+	border-color: rgb(65, 63, 66);
+}
+
 .Menu
 {
+	margin-top: -2%;
+	font-family: 'Lobster Two', cursive;
+	font-size: 3rem;
+	text-shadow: 0px 1px 0px rgba(0, 0, 0, 1);
 	text-align: center;
 	color: rgb(110, 204, 175);
 }

 .presentation
 {	
-	left: 500%;
-	border: 1px solid black;
-}
-
-th, td {
-    border: 1px solid black;
+	margin-top: 4%;
+	margin-left: 5%;
 }

 .text
@ -32,8 +86,9 @@ th, td {
 	font-size: 1.2em;
 }

-.insta
+.reseaux
 {
+	margin: 0 1.5rem;
 	width: 50px;
 	height: auto;
 }
@ -44,30 +99,138 @@ th, td {
 	height: auto;
 }

-.rouleau1
-{
-	width: 500px;
-    height: auto;
-	font-size: 2em;
-	margin-left: 41%;
-	margin-top: 2%;
-	color: gold;
-}
-
-.Nbr
-{
+.content {
+	min-height: 100vh;
+	max-width: 28rem;
+	margin: 0 auto;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
 	text-align: center; 
-	padding-bottom: 5%;
 }

-.banque
-{
-	text-align: center;
-	padding-bottom: 5%;
+.cardBox {
+	float: left;
+	font-size: 1.2em;
+	margin: 0 0 0 0.5%;
+	perspective: 800px;
+	transition: all 0.4s ease 0s;
+	width: 100%;
 }
-
-.sous
-{
+.cardBox:hover .card {
+	transform: rotateY(180deg);
+}
+.card {
+	background: url(EV.jpg);
+	background-size: 100% 100%;
+	cursor: pointer;
+	height: 300px;
+	transform-style: preserve-3d;
+	transition: transform 0.5s ease 0s;
+	width: 100%;
+	border-radius: 10%;
+}
+.card p {
+	margin-bottom: 1.8em;
+}
+.card .front,
+.card .back {
+	backface-visibility: hidden;
+	box-sizing: border-box;
+	color: white;
+	display: block;
+	font-size: 1.2em;
+	height: 100%;
+	padding: 0.8em 0.7em;
+	position: absolute;
 	text-align: center;
-	padding-bottom: 5%;
+	width: 100%;
+	border-radius: 10%;
+}
+.card .front strong {
+	background: #fff;
+	border-radius: 100%;
+	color: #222;
+	font-size: 1.5em;
+	line-height: 30px;
+	padding: 0 7px 4px 6px;
+}
+.card .back {
+	transform: rotateY( 180deg);
+}
+.card .back a {
+	padding: 0.3em 0.5em;
+	background: #333;
+	color: #fff;
+	text-decoration: none;
+	border-radius: 1px;
+	font-size: 0.9em;
+	transition: all 0.2s ease 0s;
+}
+.card .back a:hover {
+	background: #fff;
+	color: #333;
+	text-shadow: 0 0 1px #333;
+}
+.cardBox:nth-child(1) .card .back {
+	background: #607d8b;
+}
+.cardBox:nth-child(2) .card .back {
+	background: #1c87c9;
+}
+.cardBox:nth-child(3) .card .back {
+	background: #ff6347;
+}
+.cardBox:nth-child(4) .card .back {
+	background: #8ebf42;
+}
+.cardBox:nth-child(2) .card {
+	-webkit-animation: giro 1.5s 1;
+	animation: giro 1.5s 1;
+}
+.cardBox:nth-child(3) .card {
+	-webkit-animation: giro 2s 1;
+	animation: giro 2s 1;
+}
+.cardBox:nth-child(4) .card {
+	-webkit-animation: giro 2.5s 1;
+	animation: giro 2.5s 1;
+}
+@-webkit-keyframes giro {
+	from {
+	transform: rotateY(180deg);
+	}
+	to {
+	transform: rotateY(0deg);
+	}
+}
+@keyframes giro {
+	from {
+	transform: rotateY(180deg);
+	}
+	to {
+	transform: rotateY(0deg);
+	}
+}
+@media screen and (max-width: 767px) {
+.cardBox {
+	margin-left: 2.8%;
+	margin-top: 3%;
+	width: 46%;
+}
+.card {
+	height: 285px;
+}
+.cardBox:last-child {
+	margin-bottom: 3%;
+}
+}
+@media screen and (max-width: 480px) {
+.cardBox {
+	width: 94.5%;
+}
+.card {
+	height: 260px;
+}
 }
--- a/MachineASous.html
+++ b/MachineASous.html
@ -1,84 +1,89 @@
 <!DOCTYPE html>
 <html lang="fr">
-<script>
-	banque = 1000;
-	sous = 100;
-	function nbAlea() {
-		nbr1 = Math.floor(Math.random() * 10);
-		nbr2 = Math.floor(Math.random() * 10);
-		nbr3 = Math.floor(Math.random() * 10);
-		document.getElementById("PlaceNbr1").innerHTML = nbr1;
-		document.getElementById("PlaceNbr2").innerHTML = nbr2;
-		document.getElementById("PlaceNbr3").innerHTML = nbr3;
-		gain()
-	}

-	function gain() {		
-		if (banque < 500) {
-			checkRefresh();
-		} else if (nbr1 == 9 && nbr2 == 9 && nbr3 == 9) {
-			result = "Bingo !";
-			sous = sous + banque;
-			banque = 0;
-			console.log("Bingo");
-		} else if (nbr1 == nbr2 && nbr2 == nbr3) {
-			result = "Mini Bingo !";
-			sous = sous + 6*Number(document.getElementById("searchbar").value);
-			banque = banque - 6*Number(document.getElementById("searchbar").value);
-			console.log("Mini Bingo");
-		} else if (nbr1 == nbr2) {
-			result = "Gagné !";
-			sous = sous + 3*Number(document.getElementById("searchbar").value);
-			banque = banque - 3*Number(document.getElementById("searchbar").value);
-			console.log("Gagné");
-		} else if (nbr1 == nbr3) {
-			result = "Gagné !";
-			sous = sous + 3*Number(document.getElementById("searchbar").value);
-			banque = banque - 3*Number(document.getElementById("searchbar").value);
-			console.log("Gagné");
-		} else if (nbr2 == nbr3) {
-			result = "Gagné !";
-			sous = sous + 3*Number(document.getElementById("searchbar").value);
-			banque = banque - 3*Number(document.getElementById("searchbar").value);
-			console.log("Gagné");
-		} else {
-			result = "Perdu !";
-			sous = sous - Number(document.getElementById("searchbar").value);
-			banque = banque + Number(document.getElementById("searchbar").value);
-			console.log("Perdu");
-		}
-		document.getElementById("Gain").innerHTML = result;
-		document.getElementById("Banque").innerHTML = banque;
-		document.getElementById("Sous").innerHTML = sous;
-	}
+<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
+<script id="rendered-js" >
+	jQuery(document).ready(function ($) {

-	function checkRefresh() {
-		console.log("ARRET!");
-		window.location.reload();
-	}
+	  $('a.scroll-link').click(function (e) {
+		e.preventDefault();
+		$id = $(this).attr('href');
+		$('body,html').animate({
+		  scrollTop: $($id).offset().top - 20 },
+		750);
+	  });

-	function regles() {
-		document.location.href="règle.html"; 
-	}
+	});
 </script>
+	
 	<head>
 		<title> Unicron03 </title>
 		<link href="MachineASous.css" rel="stylesheet">
 		<link rel="icon" type="image/x-icon" href="EV.jpg" />
 	</head>
+	
 	<body>
-		<h1 class="Menu"> Présentation </h1>
+		<div id="haut" class="container">
+			<header>
+				<nav>
+					<ul>
+						<li>
+							<a class="Home" href="#" onclick="window.location.href = 'projet.html';">Project</a>
+						</li>
+						<li>
+							<a class="Home" href="#" onclick="window.location.href = 'nouveau 2.html';">Skills</a>
+						</li>
+						<li>
+							<a class="Home" href="#">Contact</a>
+						</li>
+					</ul>
+				</nav>
+			</header>
+		</div>
+	
+		<h1 id="presentation" class="Menu"> <u> Présentation </u> </h1>
+		
 		<table class="presentation">
 			<tr>
-				<td> <a href="https://www.instagram.com/unicron_e"> <img class="insta" src="logo_instagram.png" title="Logo_Instagram"> </a> </td>
-				<td rowspan="3"> <img class="logo" src="EV.jpg" title="Logo_profil"> </td>
-			</tr
+				<td style="border-style:groove"> <a href="https://www.instagram.com/unicron_e"> <img class="reseaux" src="logo_instagram.png" title="Logo_Instagram"> </a> </td>
+				<td rowspan="3" class="logo">
+					<div class="boxesContainer">
+						<div class="cardBox">
+							<div class="card">
+								<div class="back">
+									<h3> <u> Date de développement : </u> </h3>
+									<li> Novembre 2022 - </li>
+									<li> Janvier 2023 </li>
+								</div>
+							</div>
+						</div>
+					</div>
+				</td>
+				<td rowspan="3">
+					<h1 class="textTab" align="left"> 
+						Salut, je suis Enzo.
+						<br>
+						Je suis un lycéen qui aime,
+						<br>
+						programmer,
+						<br>
+						et créer pleins de choses !
+					</h1>
+				</td>
+			</tr>
 			<tr>
-				<td> <a href="mailto:enzo.vandepoele2@gmail.com"> <img class="insta" src="logo_mail.png" title="Logo_Mail"> </a> </td>
+				<td style="border-style:groove"> <a href="mailto:enzo.vandepoele2@gmail.com"> <img class="reseaux" src="logo_mail.png" title="Logo_Mail"> </a> </td>
 			</tr>
 			<tr>
-				<td> <a href="https://github.com/Unicron03"> <img class="insta" src="logo_github.png" title="Logo_Github"> </a> </td>
+				<td style="border-style:groove"> <a href="https://github.com/Unicron03"> <img class="reseaux" src="logo_github.png" title="Logo_Github"> </a> </td>
 			</tr>
 		</table>		
+		<div id="content" class="content">
+			<h2>Content</h2>
+		</div>
+	
 	</body>
 </html>
+
+<td style="border-style:groove"> <a class="scroll-link" href="#haut"> <img class="insta" src="logo_instagram.png" title="Logo_Instagram"> </a> </td>
--- a/MachineASous.jpg
+++ b/MachineASous.jpg
--- a/RushOfLands.jpg
+++ b/RushOfLands.jpg
--- a/2.css
+++ b/2.css
@ -0,0 +1,390 @@
+body { 
+	margin: 0;
+	font-size: 1.1em;
+	background: url(background.jpg);
+	background-repeat: no-repeat;
+	background-size: 100% 100%;
+	background-attachment: fixed;
+}
+
+.Menu
+{
+	margin-top: 0%;
+	font-family: 'Lobster Two', cursive;
+	font-size: 3rem;
+	text-shadow: 0px 1px 0px rgba(0, 0, 0, 1);
+	text-align: center;
+	color: rgb(110, 204, 175);
+}
+
+.button {
+  font-family: 'Lobster Two', cursive;
+  font-size: 1.3rem;
+  margin-left: 2%;
+  position: relative;
+  display: inline-flex;
+  text-decoration: none;
+  color: #fff;
+  background-color: #76abe9;
+  padding-left: 2rem;
+  overflow: hidden;
+  z-index: 1;
+  align-items: center;
+  box-shadow: 0px 3px 4px -4px rgba(0, 0, 0, 0.75);
+}
+.button::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform: scaleX(0);
+  transform-origin: 0 50%;
+  width: 100%;
+  height: 100%;
+  background-color: #4A90E2;
+  z-index: -1;
+  transition: transform 750ms;
+}
+.button span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 2rem;
+  padding: 1rem;
+  overflow: hidden;
+  background-color: #4A90E2;
+}
+.button svg {
+  max-width: 20px;
+  width: 100%;
+  height: auto;
+  max-height: 18px;
+  fill: white;
+}
+.button:hover::before {
+  transform: scaleX(1);
+}
+.button:hover svg {
+  -webkit-animation: moveArrow 750ms;
+          animation: moveArrow 750ms;
+}
+
+@-webkit-keyframes moveArrow {
+  0% {
+    transform: translateX(0px);
+  }
+  49% {
+    transform: translateX(50px);
+  }
+  50% {
+    transform: translateX(-50px);
+  }
+  100% {
+    transform: translateX(0px);
+  }
+}
+
+@keyframes moveArrow {
+  0% {
+    transform: translateX(0px);
+  }
+  49% {
+    transform: translateX(50px);
+  }
+  50% {
+    transform: translateX(-50px);
+  }
+  100% {
+    transform: translateX(0px);
+  }
+}
+
+
+#SkillBox {
+    font-size: 20px;
+    font-family: 'Indie Flower', cursive;
+    width: 95%;
+    height: auto;
+    margin: 40px auto;
+    background-color: #607d8b;
+    //border: 1px solid #cdcdcd;
+    padding: 10px;
+    border-radius:20px;
+    -o-border-radius:20px;
+    -webkit-border-radius:20px;
+    -ms-border-radius:20px;
+    -moz-border-radius:20px;  
+}
+#SkillBox img {
+    width: 20%;
+    height: 10%;
+    margin: auto 35%;
+    padding: 10px;
+}
+.SkillBar {
+    width: 90%;
+    height: 50px;
+    position: relative;
+    background: rgba(17, 17, 17, .3);
+    margin: 20px auto;
+}
+#Skill-HTML {
+    width: 75%;
+    animation: Animate-HTML 4s;
+    -webkit-animation: Animate-HTML 4s;
+    -moz-animation: Animate-HTML 4s;
+    -o-animation: Animate-HTML 4s;
+    height: 50px;
+    position: absolute;
+    background-color: #ea8564;
+}
+@keyframes Animate-HTML {
+    from {
+    width: 10px;
+}
+to {
+    width: 75%}
+}@-webkit-keyframes Animate-HTML {
+    from {
+    width: 10px;
+}
+to {
+    width: 75%}
+}@-moz-keyframes Animate-HTML {
+    from {
+    width: 10px;
+}
+to {
+    width: 75%}
+}@-o-keyframes Animate-HTML {
+    from {
+    width: 10px;
+}
+to {
+    width: 75%}
+}#Skill-CSS {
+    animation: Animate-CSS 5s;
+    -webkit-animation: Animate-CSS 5s;
+    -moz-animation: Animate-CSS 5s;
+    -o-animation: Animate-CSS 5s;
+    width: 65%;
+    height: 50px;
+    position: absolute;
+    background-color: #55a69f;
+}
+@keyframes Animate-CSS {
+    from {
+    width: 10px;
+}
+to {
+    width: 65%}
+}@-webkit-keyframes Animate-CSS {
+    from {
+    width: 10px;
+}
+to {
+    width: 65%}
+}@-moz-keyframes Animate-CSS {
+    from {
+    width: 10px;
+}
+to {
+    width: 65%}
+}@-o-keyframes Animate-CSS {
+    from {
+    width: 10px;
+}
+to {
+    width: 65%}
+}#Skill-Python {
+    animation: Animate-Python 5s;
+    -webkit-animation: Animate-Python 5s;
+    -moz-animation: Animate-Python 5s;
+    -o-animation: Animate-Python 5s;
+    width: 100%;
+    height: 50px;
+    position: absolute;
+    background-color: #99856d;
+}
+@keyframes Animate-Python {
+    from {
+    width: 10px;
+}
+to {
+    width: 100%}
+}@-webkit-keyframes Animate-Python {
+    from {
+    width: 10px;
+}
+to {
+    width: 100%}
+}@-moz-keyframes Animate-Python {
+    from {
+    width: 10px;
+}
+to {
+    width: 100%}
+}@-o-keyframes Animate-Phyton {
+    from {
+    width: 10px;
+}
+to {
+    width: 100%}
+}#Skill-JS {
+    animation: Animate-JS 4s;
+    -webkit-animation: Animate-JS 4s;
+    -moz-animation: Animate-JS 4s;
+    -o-animation: Animate-JS 4s;
+    width: 25%;
+    height: 50px;
+    position: absolute;
+    background-color: #c44e45;
+}
+@keyframes Animate-JS {
+    from {
+    width: 10px;
+}
+to {
+    width: 25%}
+}@-webkit-keyframes Animate-JS {
+    from {
+    width: 10px;
+}
+to {
+    width: 25%}
+}@-moz-keyframes Animate-JS {
+    from {
+    width: 10px;
+}
+to {
+    width: 25%}
+}@-o-keyframes Animate-JS {
+    from {
+    width: 10px;
+}
+to {
+    width: 25%}
+}#Skill-Lua {
+    animation: Animate-Lua 4s;
+    -webkit-animation: Animate-Lua 4s;
+    -moz-animation: Animate-Lua 4s;
+    -o-animation: Animate-Lua 4s;
+    width: 90%;
+    height: 50px;
+    position: absolute;
+    background-color: #5aa669;
+}
+@keyframes Animate-Lua {
+    from {
+    width: 10px;
+}
+to {
+    width: 90%}
+}@-webkit-keyframes Animate-Lua {
+    from {
+    width: 10px;
+}
+to {
+    width: 90%}
+}@-moz-keyframes Animate-Lua {
+    from {
+    width: 10px;
+}
+to {
+    width: 90%}
+}@-o-keyframes Animate-Lua {
+    from {
+    width: 10px;
+}
+to {
+    width: 90%}
+}#Skill-PHP {
+    animation: Animate-PHP 4s;
+    -webkit-animation: Animate-PHP 4s;
+    -moz-animation: Animate-PHP 4s;
+    -o-animation: Animate-PHP 4s;
+    width: 50%;
+    height: 50px;
+    position: absolute;
+    background-color: #5A69A6;
+}
+@keyframes Animate-PHP {
+    from {
+    width: 10px;
+}
+to {
+    width: 50%}
+}@-webkit-keyframes Animate-PHP {
+    from {
+    width: 10px;
+}
+to {
+    width: 50%}
+}@-moz-keyframes Animate-PHP {
+    from {
+    width: 10px;
+}
+to {
+    width: 50%}
+}@-o-keyframes Animate-PHP {
+    from {
+    width: 10px;
+}
+to {
+    width: 50%}
+}#Skill-SQL {
+    animation: Animate-SQL 4s;
+    -webkit-animation: Animate-SQL 4s;
+    -moz-animation: Animate-SQL 4s;
+    -o-animation: Animate-SQL 4s;
+    width: 85%;
+    height: 50px;
+    position: absolute;
+    background-color: #23b1db;
+}
+@keyframes Animate-SQL {
+    from {
+    width: 10px;
+}
+to {
+    width: 85%}
+}@-webkit-keyframes Animate-SQL {
+    from {
+    width: 10px;
+}
+to {
+    width: 85%}
+}@-moz-keyframes Animate-SQL {
+    from {
+    width: 10px;
+}
+to {
+    width: 85%}
+}@-o-keyframes Animate-SQL {
+    from {
+    width: 10px;
+}
+to {
+    width: 85%}
+}.Skill-Area {
+    z-index: 1;
+    float: left;
+    //position: absolute;
+    margin-top: 15px;
+    margin-left: 15px;
+    text-shadow: none;
+    color: #fff;
+    //font-family: Lato-Regular, sans-serif;
+    font-size: 18px;
+}
+.PercentText {
+    z-index: 3;
+    position: relative;
+    padding-right: 15px;
+    margin-top: 15px;
+    float: right;
+    text-shadow: none;
+    color: #fff;
+    //font-family: Lato-Regular, sans-serif;
+    font-size: 18px;
+}
--- a/2.html
+++ b/2.html
@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="fr">
+	<head>
+		<title> Unicron03 </title>
+		<link href="nouveau 2.css" rel="stylesheet">
+		<link rel="icon" type="image/x-icon" href="EV.jpg" />
+	</head>
+	
+	<body>
+		<a href="#" onclick="window.location.href = 'MachineASous.html';" class="button">
+				Back
+				<span>
+					<svg>
+						<use xlink:href="#arrow" href="#arrow"></use>
+					</svg>
+				</span>
+			</a>
+
+		<center>
+		<div id="SkillBox">
+			<center><p class="Menu"><u>My Skills</u></p></center>
+				
+			<svg style="display: none;">
+			  <defs>
+				  <symbol id="arrow" viewBox="0 0 100 100">
+					<path d="M12.5 45.83h64.58v8.33H12.5z"/>
+						<path d="M59.17 77.92l-5.84-5.84L75.43 50l-22.1-22.08 5.84-5.84L87.07 50z"/>
+				  </symbol>
+			  </defs>
+			</svg>					
+				
+				<img src="https://2.bp.blogspot.com/--aPlnH6X1YA/UEf7yeJ3gGI/AAAAAAAATgw/TgMK9IVzipk/s1600/Skills%2B-%2BPawan%2BMall.png" alt="Skill" />
+		  <div class="SkillBar">
+			<div id="Skill-HTML"> 
+			  <span class="Skill-Area ">HTML</span>
+			  <span class="PercentText ">75%</span>
+			</div>
+		  </div>
+		  
+		  <div class="SkillBar">
+			<div id="Skill-CSS">
+			  <span class="Skill-Area ">CSS</span>
+			  <span class="PercentText ">65%</span>
+			</div>
+		  </div>
+
+		  <div class="SkillBar">
+			<div id="Skill-Python">
+			  <span class="Skill-Area ">Python</span>
+			  <span class="PercentText ">100%</span>
+			</div>
+		  </div>
+		  
+		  <div class="SkillBar">
+			<div id="Skill-JS">
+			  <span class="Skill-Area ">Javascript</span>
+			  <span class="PercentText ">25%</span>
+			</div>
+		  </div>
+		  
+		  <div class="SkillBar">
+			<div id="Skill-Lua">
+			  <span class="Skill-Area ">Lua</span>
+			  <span class="PercentText ">90%</span>
+			</div>
+		  </div>
+		  
+		<div class="SkillBar">
+			<div id="Skill-PHP">
+			  <span class="Skill-Area ">PHP </span>
+			  <span class="PercentText ">50%</span>
+			</div>
+		  </div>
+		  
+		<div class="SkillBar">
+			<div id="Skill-SQL">
+			  <span class="Skill-Area ">SQL </span>
+			  <span class="PercentText ">85%</span>
+			</div>
+		  </div>
+		  
+		</div>
+		</center>
+	</body>
+</html>
--- a/projet.css
+++ b/projet.css
@ -0,0 +1,204 @@
+@-webkit-keyframes up-in {
+  from {
+    opacity: 0;
+    bottom: 0%;
+  }
+  to {
+    opacity: 1;
+    bottom: 50%;
+  }
+}
+@keyframes up-in {
+  from {
+    opacity: 0;
+    bottom: 0%;
+  }
+  to {
+    opacity: 1;
+    bottom: 50%;
+  }
+}
+.fill {
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
+  background-attachment: fixed;
+}
+body,
+html {
+  height: 100%;
+  min-width: 100%;
+  min-height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  font-family: 'Lobster Two', cursive;
+}
+.flex-row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+.container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  width: 100%;
+  min-height: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: white;
+  position: relative;
+}
+.container.no-scroll {
+  overflow: hidden;
+}
+.page {
+  width: 100%;
+  padding: 10px;
+  background: url(background.jpg);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-attachment: fixed;
+}
+@media (max-width: 600px) {
+  .page {
+    width: 90%;
+  }
+}
+.grid {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+.grid .grid-item {
+  width: 33%;
+  position: relative;
+}
+.grid .grid-item:after {
+  content: '';
+  display: block;
+  margin-top: 100%;
+}
+@media (max-width: 600px) {
+  .grid .grid-item {
+    width: 50%;
+  }
+}
+.box {
+  position: absolute;
+  top: 10px;
+  bottom: 10px;
+  left: 10px;
+  right: 10px;
+  background-color: white;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center top;
+  overflow: hidden;
+  cursor: pointer;
+}
+.box img {
+  width: 100%;
+  transition: transform 0.6s ease;
+}
+.box.selected {
+  opacity: 0;
+}
+.box.on-top {
+  cursor: default;
+  transition: all 0.4s ease;
+  box-shadow: 2px 2px 19px -2px rgba(0, 0, 0, 0.44);
+}
+.box.image-out img {
+  transform: translateY(-100%);
+}
+.content {
+  position: absolute;
+  padding: 20px 40px;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity 0.5s ease;
+}
+.show .content {
+  opacity: 1;
+}
+@media (max-width: 600px) {
+  .content {
+    padding: 10px 20px;
+  }
+}
+.scroller {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow-y: auto;
+}
+.scroller h1 {
+  color: white;
+  width: 100%;
+  margin-bottom: 30px;
+  position: absolute;
+  bottom: 50%;
+  text-align: center;
+  -webkit-animation: up-in 1s ease;
+          animation: up-in 1s ease;
+}
+.top-up.ng-hide-add,
+.top-up.ng-hide-remove {
+  transition: 0s ease top;
+}
+.top-up.ng-hide-add-active,
+.top-up.ng-hide-remove-active {
+  transition: 0.6s ease top;
+}
+.top-up.ng-hide-add {
+  top: 0;
+}
+.top-up.ng-hide-add.ng-hide-add-active {
+  top: 100%;
+}
+.top-up.ng-hide-remove {
+  top: 100%;
+}
+.top-up.ng-hide-remove.ng-hide-remove-active {
+  top: 0;
+}
+.fullscreen-background {
+  overflow-y: auto;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: #333;
+  transition: top 0.5s ease;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
+  background-attachment: fixed;
+}
+.fullscreen-background.show {
+  top: 0;
+}
+.close-button {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  color: white;
+  cursor: pointer;
+}
+.close-button i {
+  font-size: 35px;
+}
+.close-button:hover {
+  color: #ddd;
+}
--- a/projet.html
+++ b/projet.html
@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="fr" >
+
+	<head>
+		<title> Unicron03 </title>
+		<link href="projet.css" rel="stylesheet">
+		<link rel="icon" type="image/x-icon" href="EV.jpg" />
+	</head>
+
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-animate.min.js'></script>
+<script src='https://codepen.io/ste-vg/pen/zBVaZw.js'></script>
+      <script id="rendered-js" >
+var app = angular.module('app', ['ngAnimate']);
+
+app.controller('mainCtrl', function ($scope) {
+  $scope.boxes = [{
+    name: 'RushOfLands',
+    image: 'RushOfLands.jpg' },{
+	
+	name: 'Volta',
+    image: 'voiture.png' },{
+  
+	name: 'MachineASous',
+    image: 'MachineASous.jpg' }];
+
+
+  $scope.selected = [];
+  $scope.selectBox = function (item, position) {
+    $scope.selected = [{
+      item: item,
+      position: position }];
+
+    $scope.$apply();
+  };
+  $scope.clearSelection = function () {
+    $scope.selected = [];
+  };
+});
+
+app.directive('box', function () {
+  return {
+    restrict: 'E',
+    scope: {},
+    bindToController: {
+      onSelect: "=",
+      item: "=" },
+
+    controllerAs: 'box',
+    controller: function () {
+      var box = this;
+
+      box.goFullscreen = function (e) {
+        box.onSelect(box.item, e.target.getBoundingClientRect());
+      };
+    },
+    link: function (scope, element) {
+      element.bind('click', scope.box.goFullscreen);
+      element.css({
+        'background-image': 'url(' + scope.box.item.image + ')' });
+
+    } };
+
+});
+
+app.directive('bigBox', function ($timeout) {
+  return {
+    restrict: 'AE',
+    scope: {},
+    bindToController: {
+      position: "=",
+      selected: "=",
+      onSelect: "=" },
+
+    controllerAs: 'box',
+    controller: function () {
+      var box = this;
+    },
+    link: function (scope, element) {
+      var css = {};
+      for (var key in scope.box.position) {
+        css[key] = scope.box.position[key] + 'px';
+      }
+
+      element.css(css);
+
+      $timeout(function () {
+        element.css({
+          top: '50%',
+          left: '10%' });
+
+        element.addClass('image-out');
+      }, 200);
+
+      $timeout(function () {
+        element.css({
+          width: '80%',
+          height: '100%' });
+
+      }, 500);
+
+      $timeout(function () {
+        element.addClass('show');
+      }, 800);
+    } };
+
+});
+    </script>
+
+	<body>
+		<div class="container" ng-class="{'no-scroll': selected.length}" ng-app="app" ng-controller="mainCtrl">
+			<div class="page">
+				<div class="grid">
+					<div class="grid-item" ng-repeat="item in boxes">
+						<box class="box" item="item" on-select="selectBox" ng-class="{'selected': selected[0].item.name == item.name}"></box>
+					</div>
+				</div>
+			</div>
+			<div class="fullscreen-background top-up" ng-show="selected.length" ng-style="{'background-image': 'url(' + selected[0].item.image + ')'}"></div>
+			<div class="scroller" ng-show="selected.length">
+				<a class="close-button" ng-click="clearSelection()">
+					<i class="material-icons" style="font-family: 'Lobster Two', cursive; padding-right: 20px">Back</i>
+				</a>
+				<h1>{{selected[0].item.name}}</h1>
+				<div big-box ng-repeat="item in selected" class="box on-top" position="item.position" selected="item.item">
+					<img ng-src="{{item.item.image}}" alt="" />
+					<div class="content">
+						<h2>Voiture autonome</h2>
+						<p>La voiture est composé d'une pyboard, de divers capteurs, de leds, d'un servo pour la direction et deux moteurs avec réducteur.</p>
+						<p>Elle se déplace de façon autonome en évitant les obstacles et en s'adaptant au milieu dans lequel elle évolue.</p>
+						<p>
+							Elle intégère aussi plusieurs contraintes :
+							<br>
+								• Si un obstacle est détecté la voiture ralenti de plus en plus jusqu’à l’arrêt complet;
+							<br>
+								• Si la voiture détecte une montée, elle accélére, si elle détecte une descente elle ralenti (avec allumage de deux leds différentes sur la carte pyboard);
+							<br>
+								• Si la voiture est dans le noir, une led s'allume;
+							<br>
+								• Si on appuie sur le bouton USR de la carte, le programme se mets en pause jusqu’à que le bouton soit rappuyer;
+							<br>
+								• Si la voiture est bloqué par un certain obstacle qu'elle ne détecte pas, elle repart automatiquement.
+						</p>
+					</div>	
+				</div>
+				
+			</div>
+		</div>  
+	</body>
+</html>
+ 
--- a/voiture.png
+++ b/voiture.png