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