Premier dépot sur Git

3 years ago · e00d32c542
43 changed files with 515 additions and 0 deletions
--- a/PRINCIPAL.html
+++ b/PRINCIPAL.html
@ -0,0 +1,93 @@
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Saint Seiya : Les Chevaliers du Zodiaque</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="STYLE PRINCIPAL.css">
+</head>
+<body>
+    <nav>
+        <h1>Saint Seiya : Les Chevaliers du Zodiaque</h1>
+        <div class="onglets">
+			<a href="#"> Acceuil</a>
+            <a href="chevaliers de bronze.html">Bronze</a>
+            <a href="chevaliers d'argent.html">Argent</a>
+            <a href="chevaliers d'or.html">Or</a>
+        </div>
+    </nav>
+
+    <header>
+        <h1>Saint Seiya : Les Chevaliers du Zodiaque</h1>
+        <h4>POUR DEVENIR UN VRAI CHEVALIER...</h4>
+        <button>Parcourir</button>
+    </header>
+
+    <section class="main" id="produits">
+
+        <div class="content">
+            <div class="card">
+                <div class="left">
+                    <h1>Chevaliers de bronze</h1>
+                    <p>Ceux-ci sont les principaux protagonistes de l'histoire.<br>
+					Certes, ils se situent en bas de la hiérarchie des chevaliers, mais les chevaliers de bronze ont la particularité de réussir à remporter des combats contre des adversaires supposés bien plus forts qu'eux.</p>
+					<p></p>
+					<p>Vous pouvez cliquer sur l'image à droite ou sur l'onglet "bronze" pour découvrir chacun d'entre eux.</p>
+                </div>
+                <div class="right">
+                    <a href="chevaliers de bronze.html"><img src="chevaliers de bronze.jpg" alt=""></a>
+                </div>
+            </div>
+
+            <div class="card">
+                <div class="left">
+                    <h1>Chevaliers d'argent</h1>
+                    <p>Les chevaliers d'argent sont des personnages secondaires qui obéissent aux chevaliers d'or et ont pour mission de punir les malfrats.</p>
+					<p></p>
+					<p>Vous pouvez cliquer sur l'image à droite ou sur l'onglet "argent" pour découvrir chacun d'entre eux.</p>
+                </div>
+                <div class="right">
+                    <a href="chevaliers d'argent.html"><img src="chevaliers d'argent.png" alt=""></a>
+                </div>
+            </div>
+			
+			<div class="card">
+                <div class="left">
+                    <h1>Chevaliers d'or</h1>
+                    <p>Les chevaliers d'or sont incontestablement les plus puissants de tous.<br>
+		Ceux-ci sont capables d'envoyer des coups à la vitesse de la lumière. </p>	
+		<p></p>
+		<p>Chacun d'entre eux a été choisi pour sa bravoure, sa force et sa sagesse afin de protéger la déesse Athéna.<br>
+		Pour cela, ils sont dotés d'une armure d'or représentant l'un des douze signes du zodiaque.<br>
+		Les chevaliers d'or se comptent donc au nombre de 12 : Vous pouvez cliquer sur l'image à droite ou sur l'onglet "Or" pour découvrir chacun d'entre eux.</p>
+                </div>
+                <div class="right">
+                    <a href="chevaliers d'or.html"><img src="chevaliers d'or.jpg" alt=""></a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <footer>
+
+        <h1>Réveil ton cosmos jeune chevalier !</h1>
+        <div class="services">
+            
+            <div class="service">
+                <h3>Contact</h3>
+                <p>Loulou</p>
+            </div>
+
+            <div class="service">
+                <h3>Informations</h3>
+                <p>Lycée Paul Constans</p>
+            </div>
+
+            
+
+        </div>
+
+        <p id="">| &copy; 2021, Saint Seiya.</p>
+    </footer>
+</body>
+</html>
--- a/PRINCIPAL.css
+++ b/PRINCIPAL.css
@ -0,0 +1,140 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap');
+html{
+    scroll-behavior: smooth;
+}
+body{
+    margin: 0px;
+    padding: 0px;
+    font-family: 'Montserrat', sans-serif;
+}
+nav{
+    display:flex;
+    flex-wrap:wrap;
+    justify-content: center;
+    align-items: center;
+    border-bottom: 5px solid #6f6f6f;
+}
+nav h1{
+    color: #717171;
+    font-family: 'Playfair Display', serif;
+    font-size: 30px;
+}
+nav .onglets{
+    margin-top: 3px;
+    margin-left: 300px;
+}
+nav .onglets a{
+    text-decoration: none;
+    color: #000;
+    margin-right: 10px;
+    border-bottom: 1px solid #000;
+    padding-bottom: 5px;
+}
+
+header{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: url('Saint-seiya.png');
+    background-size: cover;
+    color: #fff;
+    padding: 40px;
+}
+header h1{
+    font-family: 'Playfair Display', serif;
+    font-size: 60px;
+	margin-top: -25px;
+	color: gold
+}
+header h4{
+    margin-top: -20px;
+    font-size: 20px;
+    text-align: center;
+    border-bottom: 1px solid #fff;
+	color: gold
+}
+header button{
+    padding: 10px 20px;
+    background-color: #fff;
+    color:#000;
+    border:none;
+    margin-bottom: 30px;
+    outline:none;
+    font-size: 20px;
+    font-family: 'Playfair Display', serif;
+    cursor: pointer;
+}
+
+.main{
+    margin-top: 40px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.main .content .card{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-bottom:20px;
+}
+.main .content .card .left{
+   flex: 0 0 30%;
+   padding: 20px;
+   background-color:black;
+   color:#fff;
+}
+.main .content .card .right img{
+    height:300px;
+    width: 400px;
+    margin-top: 5px;
+}
+
+footer{
+    margin-top: 40px;
+    border-top: 5px solid #6f6f6f;
+    background-color: rgb(0, 0, 0);
+    color: #fff;
+    padding: 30px 100px;;
+}
+footer h1{
+    font-family: 'Playfair Display', serif;
+    border-bottom: 1px solid white;
+    width: 20%;
+    padding-bottom: 5px;
+}
+footer .services{
+    margin-top: -10px;
+    display:flex;
+    flex-wrap:wrap;
+}
+footer .services .service{
+    margin-right: 30px;
+}
+footer .services .service p{
+    max-width: 300px;
+}
+footer #contact{
+    color: rgb(181, 181, 181);
+}
+
+@media screen and (max-width:680px){
+    nav .onglets {
+        margin-left: 0px;
+        margin-bottom: 20px;
+    }
+    .main .card {
+        margin: 10px;
+    }
+    .main .content .card .right img{
+        height:200px;
+        width: 100%;
+        margin-top: -0px;
+    }
+    .main .content .card{
+        display: block;
+    }
+    footer{
+        padding: 30px;
+    }
+}
--- a/Saint-seiya.png
+++ b/Saint-seiya.png
--- a/Thumbs.db
+++ b/Thumbs.db
--- a/aigle.jpg
+++ b/aigle.jpg
--- a/andromede.png
+++ b/andromede.png
--- a/balance.jpg
+++ b/balance.jpg
--- a/belier.jpg
+++ b/belier.jpg
--- a/cancer.jpg
+++ b/cancer.jpg
--- a/capricorne.jpg
+++ b/capricorne.jpg
--- a/centaure.jpg
+++ b/centaure.jpg
--- a/2.jpg
+++ b/2.jpg
--- a/3.jpeg
+++ b/3.jpeg
--- a/d'argent.html
+++ b/d'argent.html
@ -0,0 +1,34 @@
+<!DOCTYPE html>
+
+<html>
+
+	<head>
+		<meta charset="utf-8">
+		<title>Saint Seiya : Les Chevaliers du Zodiaque</title>
+		<link rel= "stylesheet" href="style2.css">
+	</head>
+	
+	<body>
+	
+		<div id="cadre">
+			<h3>CHEVALIERS D'ARGENT</h3>
+		<ul>
+			<li>Marine de l'aigle<br>
+			<img src="aigle.jpg" height="500"</li>
+			<li>Shaina du serpentaire<br>
+			<img src="serpentaire.jpg" height="500"</li>
+			<li>Misty du lézard<br>
+			<img src="lezard.png" height="500"</li>
+			<li>Jamian du corbeau<br>
+			<img src="corbeau.jpg" height="500"</li>
+			<li>Babel du centaure<br>
+			<img src="centaure.jpg" height="500"</li>
+			<li>Astérion du grand chien<br>
+			<img src="chien.jpg" height="500"</li>
+			<li>Algol de persée<br>
+			<img src="persee.jpg" height="500"</li>
+		</ul>
+		</div>
+	</body>
+		
+</html>
--- a/d'argent.png
+++ b/d'argent.png
--- a/2.jpg
+++ b/2.jpg
--- a/3.jpg
+++ b/3.jpg
--- a/d'or.html
+++ b/d'or.html
@ -0,0 +1,46 @@
+<!DOCTYPE html>
+
+<html>
+
+	<head>
+		<meta charset="utf-8">
+		<title>Saint Seiya : Les Chevaliers du Zodiaque</title>
+		<link rel= "stylesheet" href="style3.css">
+	</head>
+	
+	<body>
+	
+		<div id="cadre">
+			<h4>CHEVALIERS D'OR</h4>
+		
+		<ul>
+			<li>Mü du bélier<br>
+			<img src="belier.jpg" height=""</li>
+			<li>Aldébarant du taureau<br>
+			<img src="taureau.jpg" height=""</li>
+			<li>Saga des gémaux<br>
+			<img src="gemaux.jpg" height=""</li>
+			<li>Masque de mort du cancer<br>
+			<img src="cancer.jpg" height=""</li>
+			<li>Aiolia du lion<br>
+			<img src="lion.jpg" height=""</li>
+			<li>Shaka de la vierge<br>
+			<img src="vierge.jpg" height="500px"</li>
+			<li>Dokho de la balance<br>
+			<img src="balance.jpg" height=""</li>
+			<li>Milo du scorpion<br>
+			<img src="scorpion.jpg" height=""</li>
+			<li>Aiolos du sagittaire<br>
+			<img src="sagittaire.jpg" height=""</li>
+			<li>Shura du capricorne<br>
+			<img src="capricorne.jpg" height="500"</li>
+			<li>Camus du verseau<br>
+			<img src="verseau.jpg" height="500"</li>
+			<li>Aphrodite des poissons<br>
+			<img src="poissons.jpg" height=""</li>
+		</ul>
+			
+		</div>
+	</body>
+		
+</html>
--- a/d'or.jpg
+++ b/d'or.jpg
--- a/2.jpg
+++ b/2.jpg
--- a/2.png
+++ b/2.png
--- a/bronze.html
+++ b/bronze.html
@ -0,0 +1,30 @@
+<!DOCTYPE html>
+
+<html>
+
+	<head>
+		<meta charset="utf-8">
+		<title>Saint Seiya : Les Chevaliers du Zodiaque</title>
+		<link rel= "stylesheet" href="style1.css">
+	</head>
+	
+	<body>
+	
+		<div id="cadre">
+			<h2>CHEVALIERS DE BRONZE</h2>
+		<ul>
+			<li>Seiya de pégase<br>
+			<img src="pegase.png" height="500px"</li>
+			<li>Shiryu du dragon<br>
+			<img src="dragon.jpg" height="500px"</li>
+			<li>Hyoga du cygne<br>
+			<img src="cygne.jpg" height="500"</li>
+			<li>Shun d'andromède<br>
+			<img src="andromede.png" height="500"</li>
+			<li>Ikki du phoenix<br>
+			<img src="phoenix.jpg" height="500"</li>	
+		</ul>
+		</div>
+	</body>
+		
+</html>
--- a/bronze.jpg
+++ b/bronze.jpg
--- a/chien.jpg
+++ b/chien.jpg
--- a/corbeau.jpg
+++ b/corbeau.jpg
--- a/cygne.jpg
+++ b/cygne.jpg
--- a/dragon.jpg
+++ b/dragon.jpg
--- a/gemaux.jpg
+++ b/gemaux.jpg
--- a/lezard.png
+++ b/lezard.png
--- a/lion.jpg
+++ b/lion.jpg
--- a/pegase.png
+++ b/pegase.png
--- a/persee.jpg
+++ b/persee.jpg
--- a/phoenix.jpg
+++ b/phoenix.jpg
--- a/poissons.jpg
+++ b/poissons.jpg
--- a/sagittaire.jpg
+++ b/sagittaire.jpg
--- a/scorpion.jpg
+++ b/scorpion.jpg
--- a/serpentaire.jpg
+++ b/serpentaire.jpg
--- a/style1.css
+++ b/style1.css
@ -0,0 +1,61 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap');
+
+h1
+{
+	color: blak;
+}
+
+
+	
+
+body
+{
+	background-color: grey;
+	background-size: 2000px;
+	background-image: url("chevaliers de bronze 2.png")
+	
+	
+}
+
+
+
+#cadre
+{
+	width: 800px;
+	margin:0 auto;
+	background-color: white;
+	text-align: center;
+	align-content: center;
+}
+
+ul li
+{
+	list-style-type: none;
+}
+
+h2
+{
+	font-family: 'Montserrat', sans-serif;
+	color: bronze;
+	font-size: 40px;
+}
+
+h3
+{
+	font-family: 'Montserrat', sans-serif;
+	color: silver;
+	font-size: 40px;
+}
+
+h4
+{
+	font-family: 'Montserrat', sans-serif;
+	color: gold;
+	font-size: 40px;
+}
+
+div
+{
+	font-family: 'Montserrat', sans-serif;
+}
--- a/style2.css
+++ b/style2.css
@ -0,0 +1,61 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap');
+
+h1
+{
+	color: blak;
+}
+
+
+	
+
+body
+{
+	background-color: grey;
+	background-size: 2000px;
+	background-image: url("chevaliers d'argent 2.jpg")
+	
+	
+}
+
+
+
+#cadre
+{
+	width: 800px;
+	margin:0 auto;
+	background-color: white;
+	text-align: center;
+	align-content: center;
+}
+
+ul li
+{
+	list-style-type: none;
+}
+
+h2
+{
+	font-family: 'Montserrat', sans-serif;
+	color: bronze;
+	font-size: 40px;
+}
+
+h3
+{
+	font-family: 'Montserrat', sans-serif;
+	color: silver;
+	font-size: 40px;
+}
+
+h4
+{
+	font-family: 'Montserrat', sans-serif;
+	color: gold;
+	font-size: 40px;
+}
+
+div
+{
+	font-family: 'Montserrat', sans-serif;
+}
--- a/style3.css
+++ b/style3.css
@ -0,0 +1,50 @@
+body
+{
+	background-color: grey;
+	background-size: 2000px;
+	background-image: url("chevaliers d'or.jpg")
+	
+	
+}
+
+
+
+#cadre
+{
+	width: 800px;
+	margin:0 auto;
+	background-color: white;
+	text-align: center;
+	align-content: center;
+}
+
+ul li
+{
+	list-style-type: none;
+}
+
+h2
+{
+	font-family: 'Montserrat', sans-serif;
+	color: bronze;
+	font-size: 40px;
+}
+
+h3
+{
+	font-family: 'Montserrat', sans-serif;
+	color: silver;
+	font-size: 40px;
+}
+
+h4
+{
+	font-family: 'Montserrat', sans-serif;
+	color: gold;
+	font-size: 40px;
+}
+
+div
+{
+	font-family: 'Montserrat', sans-serif;
+}
--- a/taureau.jpg
+++ b/taureau.jpg
--- a/verseau.jpg
+++ b/verseau.jpg
--- a/vierge.jpg
+++ b/vierge.jpg