Ajout 1 de tous les dossiers du site Ghibli

DIW/css/form.css

@@ -0,0 +1,24 @@
+.form{
+	padding: 50px;
+	text-align: center;
+	padding-top: 0px;
+	display: block;
+	justify-content: left;
+}
+
+h1{
+	text-align: center;
+}
+
+p{
+	text-align: center;
+	padding: 30px;
+	padding-top: 0px;
+	padding-bottom: 0px;
+}
+
+.baby{
+	display: flex;
+	justify-content: center;
+	padding: 0px;
+}

DIW/css/stylefilms.css

@@ -0,0 +1,48 @@
+h4{
+	margin-left: 20px;
+	padding: 10px;
+}
+
+table{
+	background-color: rgb(190, 171, 255);
+	border-radius: 10px;
+	border: solid;
+	margin-bottom: 20px;
+	margin: 100px;
+	margin-top: 40px;
+}
+
+th{
+	text-align: center;
+}
+
+td{
+	padding-right: initial;
+	text-align: center;
+	border-left: none;
+	border-top: 2px solid black;
+}
+
+.date{
+	border: 2px solid;
+	border-bottom: none;
+	border-radius: 20px;
+}
+
+.annee{
+	border: 2px solid;
+	border-bottom: none;
+	border-radius: 20px;
+	background-color: rgb(203, 223, 255);
+}	
+
+.resum{
+	border-left: 2px solid black;
+	border-radius: 20px;
+}
+
+.tab{
+	display: flex;
+	justify-content: center;
+}
+

DIW/css/stylegen.css

@@ -0,0 +1,108 @@
+@font-face {
+ font-family:"Kaushan";
+ src: url("../fonts/Caveat/kaushan-script/KaushanScript-Regular.otf") format("truetype");
+}
+
+body{
+	background-color: rgb(203, 223, 255);
+	margin: 0;
+  font-family:"Kaushan";
+  font-size: 17px;
+}
+
+header{
+	text-align: center;
+}
+
+.navbar {
+  background: linear-gradient(to right, #0063cd, #badbff);
+	box-shadow: 0px 10px 0px #6bb2ff;
+	height: 100px;
+	width: 100%;
+	margin: 0;
+	position: sticky;
+	top: 0;
+	padding: 0px;
+	display: flex;
+	justify-content: space-evenly;
+	align-items: center;
+  flex-flow: wrap;
+}
+
+.navbar a {
+  float: left;
+  font-size: 20px;
+  color: white;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+	border-radius: 20px;
+}
+
+.deroulant {
+  float: left;
+  overflow: hidden;
+	border-radius: 20px;
+}
+
+.deroulant .sousmenu {
+  font-size: 20px;  
+  border: none;
+  outline: none;
+  color: white;
+  padding: 14px 16px;
+  background-color: inherit;
+  font-family: inherit;
+  margin: 0;
+}
+
+.navbar a {
+  transition-duration: 0.5s;
+}
+
+.navbar a:hover, .deroulant:hover .sousmenu {
+  background-color: #aed5ff;
+  color: black;
+}
+
+.deroulant-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+
+.deroulant-content a {
+  float: none;
+  color: black;
+  padding: 10px 20px;
+  text-decoration: none;
+  display: block;
+  text-align: left;
+}
+
+.deroulant-content a:hover {
+  background-color: #aed5ff;
+}
+
+.deroulant:hover .deroulant-content {
+  display: block;
+  border-radius: 20px;
+}
+
+.debut{
+  padding: 80px;
+	margin: 0;
+}
+
+.clearfloat{
+	clear: left;
+}
+
+.fin{
+  padding-top: 30px;
+  text-align: center;
+  color: white;
+}

DIW/css/styleimg.css

@@ -0,0 +1,74 @@
+img{
+    display: flex;
+    flex: 1;
+    align-items: center;
+    vertical-align: middle;
+    padding: 30px;
+    background-color: rgb(190, 171, 255);
+    border: 1px solid black;
+    border-radius: 20px;
+    justify-content: space-around;
+    margin: 20px;
+}   
+
+figcaption{
+    visibility: hidden;
+}
+
+figure {
+  float: right;
+  text-align: center;
+  font-style: italic;
+  text-indent: 0;
+  margin: 10px;
+}
+
+.affich{
+    height: 150px;
+    width: 100px;
+}
+
+.affich{
+  transition-duration: 0.5s;
+}
+
+.affich:hover{
+    height: 350px;
+    width: 250px;
+    display: flex;
+    align-items: center;
+    margin: 10px;
+}
+
+.fig1:hover > figcaption{
+    visibility: visible;
+    text-align: center;
+    color: black;
+    transition-duration: 0.5s;
+    margin: 0px;
+}
+
+.pays{
+    height: 100px;
+    width: 150px;
+}
+
+.pays{
+  transition-duration: 0.5s;
+}
+
+.pays:hover{
+    height: 250px;
+    width: 450px;
+    display: flex;
+    align-items: center;
+    margin: 10px;
+}
+
+.col{
+    display: flex;
+    flex: 1px;
+    align-items: center;
+    justify-content: space-around;
+    margin: 10px;
+}    

DIW/css/styleind.css

@@ -0,0 +1,60 @@
+h1, h4, h3{
+	text-align: center;
+}
+
+.myDiv{
+	display: flex;
+	justify-content: space-around;
+	align-items: center;
+	flex-flow: wrap;
+}
+
+.lien{
+	border: solid;
+	padding: 30px;
+	height: 400px;
+	width: 400px;
+	border-radius: 20px;
+	background-color: rgb(190, 171, 255);
+	margin: 20px;
+	margin-top: 10px;
+	margin-bottom: 60px;
+}
+
+.article{
+	border: solid;
+	padding: 30px;
+	height: 400px;
+	width: 400px;
+	background-color: rgb(190, 171, 255);
+	border-radius: 20px;
+	margin: 20px;
+	margin-top: 10px;
+	margin-bottom: 60px;
+}
+
+.toutl{
+	outline: none;
+  text-decoration: none;
+ 	display: inline-block;
+  width: 20%;
+  margin-right: 0%;
+  text-align: left;
+ 	line-height: 4;
+}
+
+.suie{
+	height: 400px;
+	width: 350px;
+}
+
+.phrase{
+	padding: 30px;
+}
+
+
+@media only screen and (max-width: 620px) {
+  .med-1, .med-2, .med-3 {
+    width: 100%;
+  }
+}

DIW/css/styleinfo.css

@@ -0,0 +1,68 @@
+h2{
+	text-align: center;
+}
+
+.imageh{
+	display: block;
+	float: left;
+	margin: 40px;
+	height: 350px;
+	border-radius: 20px;
+}
+
+.clearfloat{
+	clear: left;
+}
+
+.explic{
+	padding: 40px;
+	margin: 40px;
+	margin-top: 150px;
+	border: 1px solid black;
+	border-radius: 20px;
+	background-color: rgb(190, 171, 255);
+	text-align: center;
+}
+
+.pp{
+	padding: 50px;
+	border-radius: 10px;
+	text-align: center;
+}
+
+.toto{
+	text-align: center;
+}
+
+.imagei{
+	display: block;
+	float: left;
+	margin: 40px;
+	height: 350px;
+	border-radius: 20px;
+}
+
+.satyre{
+	padding: 20px;
+	margin: 40px;
+	margin-top: 175px;
+	border: 1px solid black;
+	border-radius: 20px;
+	background-color: rgb(190, 171, 255);
+	text-align: center
+}
+
+.chitext{
+	padding: 40px;
+	margin: 40px;
+	border: 1px solid black;
+	border-radius: 20px;
+	background-color: rgb(190, 171, 255);
+	text-align: center;
+	display: flex;
+	align-items: center;
+}
+
+.sansvis{
+	text-align: right;
+}

DIW/css/styletest.css

@@ -0,0 +1,40 @@
+* {
+  box-sizing: border-box;
+}
+
+.article {
+  float: left;
+  width: 20%;
+  text-align: center;
+}
+
+.article a {
+  background-color: #e5e5e5;
+  padding: 8px;
+  margin-top: 7px;
+  display: block;
+  width: 100%;
+  color: black;
+}
+
+.main {
+  float: left;
+  width: 60%;
+  padding: 0 20px;
+}
+
+.right {
+  background-color: #e5e5e5;
+  float: left;
+  width: 20%;
+  padding: 15px;
+  margin-top: 7px;
+  text-align: center;
+}
+
+@media only screen and (max-width: 620px) {
+  
+  .article, .main, .right {
+    width: 100%;
+  }
+}

DIW/css/stylevid.css

@@ -0,0 +1,46 @@
+video{
+	text-align: center;
+}
+
+.texte{
+	padding: 30px;
+}
+
+.vid{
+	display: block;
+	float: left;
+	padding: 50px;
+	background-color: ;
+	display: flex;
+	justify-content: center;
+}
+
+.clearflot{
+	clear: left;
+}
+
+video{
+	padding: 30px;
+	height: 440px;
+	width: 520px;
+	background-color: rgb(190, 171, 255);
+	border-radius: 20px;
+	border: 1px solid black;
+}
+
+video{
+	transition-duration: 0.5s;
+}
+
+video:hover{
+	background-color: black;
+}
+
+.tout{
+	display: flex;
+	align-items: center;
+}
+
+.fin{
+	margin-top: 230px;
+}

DIW/fonts/Caveat/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2014 The Caveat Project Authors (https://github.com/googlefonts/caveat)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

DIW/fonts/Caveat/README.txt

@@ -0,0 +1,66 @@
+Caveat Variable Font
+====================
+
+This download contains Caveat as both a variable font and static fonts.
+
+Caveat is a variable font with this axis:
+  wght
+
+This means all the styles are contained in a single file:
+  Caveat-VariableFont_wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Caveat:
+  static/Caveat-Regular.ttf
+  static/Caveat-Medium.ttf
+  static/Caveat-SemiBold.ttf
+  static/Caveat-Bold.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.

DIW/fonts/Caveat/kaushan-script/SIL Open Font License.txt

@@ -0,0 +1,45 @@
+Copyright (c) 2011, Pablo Impallari (www.impallari.com|impallari@gmail.com),
+Copyright (c) 2011, Igino Marini. (www.ikern.com|mail@iginomarini.com),
+with Reserved Font Name Kaushan Script.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting, or substituting -- in part or in whole -- any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment.
+
+"Author" refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission.
+
+5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.

DIW/formulaire.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+
+<html>
+	<head>
+    	<meta charset="utf-8">
+   	 	<link rel="stylesheet" href="css/stylegen.css">
+   	 	<link rel="stylesheet" href="css/form.css">
+    	<title>Contact</title>
+	</head>
+
+
+<body>
+
+	<div class="navbar">  
+            <a href="html/informations.html">Informations</a>
+            <a href="html/donnees.html">Films</a>
+            <a href="index.html">Retour Accueil</a>
+            <div class="deroulant">
+              <a href="#" class="sousmenu">Médias</a>
+              <div class="deroulant-content">
+                <a href="html/images.html">Images</a>
+                <a href="html/video.html">Vidéos</a>
+              </div> 
+            </div>
+            <div class="logo">
+              <img src="image/facebook.png" alt="logo facebook" height="45" width="45">
+              <img src="image/insta.png" alt="logo instagram" height="45" width="45">
+              <img src="image/twitter1.png" alt="logo twitter" height="47" width="47">
+           </div>
+      </div>
+
+	<h1>Bienvenue sur notre page de contact !</h1>
+	<p>Ici, vous pouvez nous contacter pour nous transmettre vos idées, vos avis, vos retours sur notre site. 
+	<br>En attente de vos avis... nos petits chibi ont hâtes de vous lire :)</p>
+	<div class="baby">
+	<img src="image/babytotoro.png" alt="petit totoro" height="145" width="275">
+	</div>
+
+	
+	<div class="formu">
+
+	<form action="contact.php" method="gET" class="form">
+
+		<label for="idnom">Nom:</label>
+		<input type="text" name="nom" id="idnom"required/>
+		<br>
+		<br>
+		<label for="idprenom">Prénom:</label>
+		<input type="text" name="prenom" id="idprenom"required/>
+		<br>
+		<br>
+		<label for="idemail">Mail:</label>
+		<input type="email" name="mail" id="idemail"required/>
+		<br>
+		<br>
+		<label for="idtel">Téléphone:</label>
+		<input type="tel" name="tel" id="idtel" />
+		<br>
+		<br>
+		<h4>Pourquoi nous contactez-vous ?</h4>
+		<select>
+			<option>Besoin de plus d'informations</option>
+			<option>Bugs repérés sur le site</option>
+			<option>Fautes d'orthographes</option>
+			<option>Suggestions</option>
+		</select>
+		<br>
+		<br>
+		<br>
+		<label for="creneau">Date </label>
+		<input type="date" id="creneau" name="creneau"/>
+		<br>
+		<br>
+		<label for="idchoix"><h4>Première demande de contact ?</h4></label>
+		<label for="iddem">Oui</label>
+		<input type="radio" name="iddem" value="oui"/>
+		<label for="iddem">Non</label>
+		<input type="radio" name="iddem" value="non"/>
+		<br>
+		<br>
+		<label for="texte"><h4>Et bien dites-nous en plus:</h4></label>
+		<textarea cols="40" rows="5" required></textarea>
+		<br>
+		<br>
+		<h4>Cliquez maintenant juste en dessous pour nous envoyer ce formulaire :)</h4>
+		<input type="submit" value="Click sur moi !!"/>
+	</form>
+	</div>
+
+	<div class="fin">
+    	<p>Designed by LIVROZET Manon. All Rights Reserved.</p>
+	</div>
+
+</body>
+
+
+</html>

DIW/html/donnees.html

@@ -0,0 +1,233 @@
+<!DOCTYPE html>
+
+<html>
+  
+  <head>
+    <meta charset="utf-8" name="viewport">
+    <link rel="stylesheet" href="../css/stylegen.css">
+    <link rel="stylesheet" href="../css/stylefilms.css">
+    <title>Films</title>
+  </head>
+
+  <body>
+
+    <header>
+      <div class="navbar">  
+        <a href="../html/informations.html">Informations</a>
+        <a href="../index.html">Retour Accueil</a>
+        <a href="../formulaire.html">Contact</a>
+        <div class="deroulant">
+          <a href="#" class="sousmenu">Médias</a>
+          <div class="deroulant-content">
+            <a href="../html/images.html">Images</a>
+            <a href="../html/video.html">Vidéos</a>
+          </div> 
+        </div>
+      </div>
+    </header>
+
+    <div>
+       <p>Sur cette page, vous retrouverez les différents films des Studios Ghibli, parmit les plus connus, avec deux photos de ces derniers et leurs résuméss.<br>Nous vous invitons à aller voir notre page images pour découvrir plus de photos ;)</p>
+    </div>
+
+    <div class="tab">
+      <table align="center">
+
+        <tr>
+          <th>Nom</th>
+          <th>Date de sortie</th>
+          <th>Images</th>
+          <th>Résumé</th>
+        </tr>
+
+        <tr>
+          <th class="annee" colspan="4">Années 80</th>
+        </tr>
+
+        <tr>
+          <td>Nausicaä de la Vallée du Vent</td>
+          <td class="date">1984</td>  
+          <td>
+            <img src="../image/nausicaä.jpg" height ="150" width="100"> <img class="pays" src="../image/nausicaä2.jpg" height ="100" width="150">
+          </td> 
+          <td class="resum">Dans le futur, après qu'un conflit apocalyptique ait dévasté une grande partie de l'écosystème mondial, <br>les rares êtres humains survivants vivent dans des environnements semi-hospitaliers dispersés dans ce qui est devenu une jungle "toxique." <br>La jeune Nausicaä vit dans la vallée aride du vent et peut communiquer avec les insectes massifs qui peuplent la dangereuse jungle. <br>Sous la direction du vétéran guerrier songeur, Lord Yupa, Nausicaä travaille à rétablir la paix sur la planète ravagée.</td> 
+        </tr>
+
+        <tr>
+          <td>Le Chateau dans le ciel</td>
+          <td class="date">1986</td>  
+          <td>
+            <img src="../image/chaciel.jpeg" height ="150" width="100"> <img class="pays" src="../image/chaciel2.jpg" height ="100" width="150">
+          </td> 
+          <td class="resum">Enlevée par des pirates de l'air, la jeune Sheeta parvient à s'échapper en sautant d'un dirigeable où elle était prisonnière. <br>Sauvée de justesse par Pazu, jeune orphelin travaillant pour une cité minière, <br>elle révèle à ce dernier être la descendante des souverains de Laputa, une île flottante dans les cieux. <br>Ce royaume autrefois habité par un peuple pacifique doté d'une intelligence supérieure et d'une technologie des plus avancées attire les convoitises.</td> 
+        </tr>
+
+        <tr>
+          <td>Mon voisin Totoro</td>
+          <td class="date" rowspan="2">1988</td>
+          <td>
+            <img class="pays" src="../image/totoro2.jpg" height ="100" width="150"> <img class="pays" src="../image/Totoro.jpg" height ="100" width="150">
+          </td> 
+          <td class="resum">Deux petites filles, <br>Mei, 4 ans, et Satsuki, 10 ans,<br> s'installent dans une grande maison à la campagne avec leur père pour se rapprocher de l'hôpital où séjourne leur mère. <br>Elles découvrent la nature tout autour de la maison et, surtout, l'existence de créatures merveilleuses, les Totoros, avec qui elles deviennent très amies.</td>
+        </tr>
+     
+        <tr>
+          <td>Le tombeau des lucioles</td>
+          <td>
+            <img class="pays" src="../image/luciole.jpg" height ="100" width="150"> <img src="../image/luciole2.jpg" height ="150" width="100">
+          </td>
+          <td class="resum">Japon, été 1945. <br>Les bombardiers américains arrosent Kobé de plusieurs milliers de tonnes de bombes incendiaires. Un jeune adolescent et sa petite soeur perdent leurs parents. <br>Ils se réfugient dans leur famille proche mais cruelle. <br>Leur quête désespérée d'un monde meilleur les amènera à traverser autant les ruines du Japon ensanglanté par la fin de cette guerre <br>qu'à affronter l'indifférence et la cruauté des adultes...</td>
+        </tr>
+
+        <tr>
+          <td>Kiki la petite sorcière</td>
+          <td class="date">1989</td>
+          <td>
+            <img class="pays" src="../image/kiki.jpg" height ="100" width="150"> <img src="../image/kiki2.jpg" height ="150" width="100">
+          </td>  
+          <td class="resum">Comme toutes les sorcières qui atteignent l'âge de 13 ans, <br>Kiki doit quitter ses parents et s'établir pendant un an dans une autre ville, en exerçant un métier lié à son état de sorcière.<br> Dans la ville de Koriko, la jeune et espiègle Kiki, accompagnée de son chat noir Jiji et aux côtés de Osono, une gentille boulangère qui lui propose un emploi, <br>va commencer une activité de livraison de colis en volant sur son balai.</td>
+        </tr>
+
+        <tr>
+          <th class="annee" colspan="4">Années 90</th>
+        </tr>
+
+        <tr>
+          <td>Souvenirs goutte à goutte</td>
+          <td class="date">1991</td> 
+          <td>
+            <img class="pays" src="../image/goutte.jpg" height ="100" width="150"> <img class="pays" src="../image/goutte2.jpg" height ="100" width="150">
+          </td>
+          <td class="resum">1982. Taeko Okajima, jeune employée de bureau à Tokyo, <br> s'ennuie dans son travail et décide de passer quelque temps à la campagne, dans la région rurale de Yamagata pour travailler dans la ferme de son beau-frère. <br>Tokyoïte élevée à la ville, elle rêve de la campagne depuis l'enfance, mais n'y a presque jamais séjourné. <br>Pendant les préparatifs du voyage et le trajet en train, les souvenirs de son enfance, quand elle avait 10 ans (en 1966), remontent peu à peu à la surface.</td>    
+        </tr>
+
+        <tr>
+          <td>Porco Rosso</td>
+          <td class="date">1992</td>
+          <td>
+            <img class="pays" src="../image/porco.jpg" height ="100" width="150"> <img src="../image/porco2.jpg" height ="150" width="100">
+          </td>  
+          <td class="resum">En Italie, à la fin des années 20. <br>Refusant de devenir un héros de la nation, Marco, un pilote hors pair, accepte volontairement de subir un mauvais sort qui le transforme en cochon. <br>A la même période, bon nombre de pilotes désoeuvrés ont formé un gang de pirates de l'air, <br>pour mieux pouvoir détrousser les riches vacanciers amateurs de croisières nautiques.</td>   
+        </tr>
+
+        <tr>
+          <td>Pompoko</td>
+          <td class="date">1994</td>
+          <td>
+            <img src="../image/pompoko.jpg" height ="150" width="100"> <img class="pays" src="../image/pompoko2.jpg" height ="100" width="150">
+          </td>   
+          <td class="resum">Jusqu'au milieu du XXe siècle, les Tanuki, gentils petits rongeurs, partageaient leur habitat avec les paysans. La croissance économique, l'urbanisation massive et la déforestation ont fini par bouleverser leur vie douce et paisible. À présent, il leur faut élaborer un plan pour freiner l'expansionnisme des êtres humains : ils décident de réveiller leur pouvoir de transformation afin d'effrayer les humains par des peurs et des superstitions.</td>    
+        </tr>
+
+        <tr>
+          <td>Si tu tends l'oreille</td>
+          <td class="date">1995</td>  
+          <td>
+            <img src="../image/oreille.jpg" height ="150" width="100"> <img class="pays" src="../image/oreille2.jpg" height ="100" width="150">
+          </td> 
+          <td class="resum">Shizuku Tsukichima, une collégienne de 14 ans, est une jeune fille rêveuse qui emprunte souvent des livres à sa bibliothèque. Un jour, sur les fiches d'emprunt, elle remarque qu'un mystérieux Seiji Amasawa lit exactement les mêmes ouvrages avant elle. Shizuku décide alors d'en savoir plus sur cet inconnu et fait par hasard la connaissance d'un jeune garçon.</td>    
+        </tr>
+
+        <tr>
+          <td>Princesse Mononoké</td>
+          <td class="date">1997</td>
+          <td>
+            <img src="../image/mononoké1.jpg" height ="150" width="100"> <img class="pays" src="../image/mononoké2.jpg" height ="100" width="150">
+          </td>  
+          <td class="resum">Ashitaka, un jeune guerrier japonais, affronte un sanglier géant et furieux qui attaque son village. Il tue la bête, mais se retrouve atteint par un mal mystérieux. Sur le conseil des sages, il part vers l'Ouest, à la recherche de ce qui a transformé l'animal en démon. Au cours de son périple, il rencontre San, une jeune fille qui vit avec les loups. Ashitaka apprend que les humains sont à l'origine de tous ces maux, car ils détruisent la forêt, qu'ils exploitent pour alimenter leurs forges.</td>
+        </tr>
+
+        <tr>
+          <th class="annee" colspan="4">Années 2000</th>
+        </tr>
+
+        <tr>
+          <td>Le Voyage de Chihiro</td>
+          <td class="date">2001</td>
+          <td>
+            <img class="pays" src="../image/chihiro.jpg" height ="100" width="150"> <img src="../image/chihiro2.jpg" height ="150" width="100">
+          </td>  
+          <td class="resum">La petite Chihiro accompagne ses parents dans une promenade sylvestre qui doit les conduire vers leur nouvelle maison en banlieue. Alors qu'elle prend un raccourci à travers un tunnel peu emprunté, la petite famille se retrouve soudain en territoire inconnu. Le temps de retrouver leur chemin, ils font une halte dans un gigantesque restaurant en plein air, totalement déserté.</td>
+        </tr>
+
+        <tr>
+          <td>Le Royaume des chats</td>
+          <td class="date">2002</td> 
+          <td>
+            <img class="pays" src="../image/royaume2.jpg" height ="100" width="150"> <img src="../image/royaume.jpg" height ="150" width="100">
+          </td> 
+          <td class="resum">Une lycéenne nommée Haru sauve un chat qui a été renversé par un camion. Le chat s'avère être le prince du royaume des chats, et Haru se voit offrir de nombreux cadeaux en échange de son heroïsme, y compris une demande en mariage.</td>     
+        </tr>
+
+        <tr>
+          <td>Le Chateau Ambulant</td>
+          <td class="date">2004</td> 
+          <td>
+            <img class="pays" src="../image/chatambulant5.jpg" height ="100" width="150"> <img class="pays" src="../image/chatambulant3.jpg" height ="100" width="150">
+          </td> 
+          <td class="resum">Sophie, une orpheline de 18 ans, travaille dur dans la boutique de chapelier que lui a laissée son père. Un jour, en ville, elle croise Hauru, un magicien très séduisant, mais faible de caractère. Une sorcière, se méprenant sur leurs sentiments, change Sophie en une vieille femme de 90 ans. Désespérée, Sophie erre dans la campagne quand elle aperçoit un étrange château qui se déplace sur d'immenses pattes.</td>    
+        </tr>
+
+        <tr>
+          <td>Les Contes de Terremer</td>
+          <td class="date">2006</td> 
+          <td>
+            <img src="../image/terremer.jpg" height ="150" width="100"> <img class="pays" src="../image/terremer2.jpg" height ="100" width="150">
+          </td> 
+          <td class="resum">Terremer est une contrée magique dominée par les mers et peuplée de dragons. Depuis peu, l'ordre naturel est rompu par un sorcier maléfique. Arren, jeune prince du royaume d'Enlad, va allier ses forces à celles du grand magicien Epervier pour rétablir l'équilibre du monde. Dans le combat qui s'annonce, Arren et Epervier croiseront la route de Therru, une mystérieuse jeune fille. Ensemble, ils dépasseront leurs peurs et uniront leurs destins pour rétablir la paix.</td>     
+        </tr>
+
+        <tr>
+          <td>Ponyo sur la falaise</td>
+          <td class="date">2008</td>  
+          <td>
+            <img class="pays" src="../image/ponyo2.jpg" height ="100" width="150"> <img src="../image/ponyo.jpg" height ="150" width="100">
+          </td>   
+          <td class="resum">Le petit Sosuke, cinq ans, habite un village construit au sommet d'une falaise qui surplombe la mer intérieure. Un beau matin, alors qu'il joue sur la plage en contrebas, il découvre une petite fille poisson rouge nommée Ponyo, piégée dans un pot de confiture. Sosuke la sauve, et décide de la garder avec lui dans un seau. Ponyo est aussi fascinée par Sosuke que ce dernier l'est par elle.</td> 
+        </tr>
+
+        <tr>
+          <th class="annee" colspan="4">Années 2010</th>
+        </tr>
+
+        <tr>
+          <td>Arrietty : Le Petit Monde des Chapardeurs</td>
+          <td class="date">2010</td>
+          <td>
+            <img class="pays" src="../image/arrietty2.jpg" height ="100" width="150"> <img src="../image/arrietty.jpg" height ="150" width="100">
+          </td>  
+          <td class="resum">Dans la banlieue de Tokyo, sous le plancher d'une vieille maison perdue au coeur d'un immense jardin, la minuscule Arrietty vit en secret avec sa famille. Ce sont des Chapardeurs. Arrietty connaît les règles : on emprunte que ce dont on a besoin, en tellement petite quantité que les habitants de la maison ne s'en aperçoivent pas.</td>
+        </tr>
+
+        <tr>
+          <td>La colline aux coquelicots</td>
+          <td class="date">2011</td>
+          <td>
+            <img class="pays" src="../image/colline.jpg" height ="100" width="150"> <img src="../image/colline2.jpg" height ="150" width="100">
+          </td> 
+          <td class="resum">Chaque matin avant de se rendre au lycée, Umi hisse des drapeaux au mat planté dans son jardin. Ils servaient autrefois à envoyer des messages à son père, marin disparu pendant la guerre de Corée. Un de ses camarades de classe, Shun, écrit un poème dans le journal de l'école sur ses drapeaux flottant au vent pour tenter d'attirer son attention. Entre les deux adolescents vont alors naître de profonds sentiments, tandis qu'ils lutteront ensemble pour empêcher la fermeture du foyer des élèves.</td>      
+        </tr>
+
+        <tr>
+          <td>Le Vent se lève</td>
+          <td class="date">2013</td>  
+          <td>
+            <img src="../image/vent2.jpg" height ="150" width="100"> <img class="pays" src="../image/vent.jpg" height ="100" width="150">
+          </td>  
+          <td class="resum">Au Japon, dans les années 1910, <br>le jeune Jiro Horikoshi est fasciné par les réalisations du concepteur d'avions Giovanni Caproni. <br> Dans ses rêves, il s'envole dans l'azur et le rencontre. <br>Il voudrait devenir pilote, mais il sait que sa vue déficiente ne le lui permettra jamais. <br> Le temps venu, il décide d'entreprendre des études en génie aéronautique et les réussit brillamment. En 1927, il est engagé dans une prestigieuse entreprise d'ingénierie.</td>  
+        </tr>
+
+      </table>
+    </div>
+
+    <div class="scroll_to_top">
+      <a href="#top"><img src="../image/arrow.png" alt="Retourner en haut" /></a>
+    </div>
+
+    <div class="fin">
+      <p>Designed by LIVROZET Manon. All Rights Reserved.</p>
+    </div>
+
+  </body>
+
+</html>    

DIW/html/images.html

@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+
+<html>
+  
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="../css/stylegen.css">
+    <link rel="stylesheet" href="../css/styleimg.css">
+    <title>Images</title>
+  </head>
+
+  <body>
+
+    <header>
+      <div class="navbar">  
+        <a href="../html/informations.html">Informations</a>
+        <a href="../html/donnees.html">Films</a>
+        <a href="../index.html">Retour Accueil</a>
+        <a href="../formulaire.html">Contact</a>
+        <div class="deroulant">
+          <a href="#" class="sousmenu">Médias</a>
+          <div class="deroulant-content">
+            <a href="../html/images.html">Images</a>
+            <a href="../html/video.html">Vidéos</a>
+          </div> 
+        </div>
+      </div>
+    </header>
+
+    <div class="col">
+      <figure class="fig1">
+      <img class="affich" src="../image/chihiro2.jpg">
+      <figcaption>Affiche officielle du film<br>~ Le Voyage de Chihiro</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="pays" src="../image/chatambulant.jpeg">
+      <figcaption>Hauru sous une forme d'aigle<br> protégeant Sophie<br>~ Le Chateau Ambulant</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="pays" src="../image/chihiro.jpg">
+      <figcaption>Petite maison calme d'un esprit<br>apperçue par la vitre du train<br>~ Le Voyage de Chihiro</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="pays" src="../image/chatambulant4.jpg">
+      <figcaption>Portrait de Hauru et Sophie lors<br>de leur première rencontre<br>~ Le Chateau Ambulant</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="pays" src="../image/totoro2.jpg">
+      <figcaption>Mei poursuivant deux petits<br> totoro dans un passage secret dans le jardin<br>~ Mon Voisin Totoro</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="pays" src="../image/chatambulant5.jpg">
+      <figcaption>Sophie tenant entre ses mains la<br> boule de feu Calcifer<br>~ Le Chateau Ambulant</figcaption>
+      </figure>
+    </div>
+
+    <div class="col">
+      <figure class="fig1">
+      <img class="pays" src="../image/Totoro.jpg">
+      <figcaption>Première rencontre entre Satsuki,<br> Mei et Totoro à un arrêt de bus,<br> sous la pluie<br>~ Mon Voisin Totoro</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="pays" src="../image/chatambulant3.jpg">
+      <figcaption>Hin, le chien de hauru, Marco<br> et l'épouvantail dans<br>la montagne<br>~ Le Chateau Ambulant</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="affich" src="../image/chaciel.jpeg">
+      <figcaption>Affiche officielle du film<br>~ Le Chateau dans le Ciel</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="pays" src="../image/chaciel2.jpg">
+      <figcaption>Plan dans les nuages du<br>Royaume cachée: Laputa<br>~ Le Chateau dans le Ciel</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="pays" src="../image/kiki.jpg">
+      <figcaption>Plan de Kiki sur son balai<br> avec son chat Jii<br>~ Kiki la petite Sorcière</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="affich" src="../image/kiki2.jpg">
+      <figcaption>Affiche officielle du film<br>~ Kiki la petite Sorcière</figcaption>
+      </figure>
+    </div>
+
+    <div class="col"> 
+
+      <figure class="fig1">
+      <img class="pays" src="../image/luciole.jpg">
+      <figcaption>Seita avec sa petite soeur<br>Setsuko sous le feu<br>des bombardements<br>~ Le Tombau des Lucioles</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="affich" src="../image/oreille.jpg">
+      <figcaption>Affiche officielle du film<br>~ Si tu tends l'oreille</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="affich" src="../image/ponyo.jpg">
+      <figcaption>Affiche officielle du film<br>~ Ponyo sur la falaise</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="pays" src="../image/ponyo2.jpg">
+      <figcaption>Portrait de Sosuke et Ponyo<br>~ Ponyo sur la falaise</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="affich" src="../image/porco2.jpg">
+      <figcaption>Affiche officielle du film<br>~ Porco Rosso</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="affich" src="../image/royaume.jpg">
+      <figcaption>Affiche officielle du film<br>~ Le Royaume des Chats</figcaption>
+      </figure>
+    </div>
+
+    <div class="col"> 
+      <figure class="fig1">
+      <img class="pays" src="../image/colline.jpg">
+      <figcaption>Shun et Umi appuyés sur<br> un vélo devant un restaurant<br>~ La Colline aux coquelicots</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="pays" src="../image/royaume2.jpg">
+      <figcaption>Plan du Royaume des Chats<br>~ Le Royaume des Chats</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="affich" src="../image/pompoko.jpg">
+      <figcaption>Affiche officielle du film<br>~ Pompoko</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="affich" src="../image/luciole2.jpg">
+      <figcaption>Affiche officielle du film<br>~ Le Tombeau des Lucioles</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="pays" src="../image/oreille2.jpg">
+      <figcaption>Shizuku en train d'écrire dans<br> un livre, l'air concentré<br>~ Si tu tends l'oreille</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="affich" src="../image/arrietty.jpg">
+      <figcaption>Affiche officielle du film<br>~ Arrietty le Petit Monde<br> des Chapardeurs</figcaption>
+      </figure>
+    </div>
+
+    <div class="col"> 
+      <figure class="fig1">
+      <img class="pays" src="../image/goutte2.jpg">
+      <figcaption>Taeko (à droite) et<br> Toshio (à gauche), grand<br> sourire aux lèvres<br>~ Souvenirs goutte à goutte</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="affich" src="../image/vent2.jpg">
+      <figcaption>Affiche officielle du film<br>~ Le Vent se lève</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="affich" src="../image/mononoké1.jpg">
+      <figcaption>Affiche officielle du film<br>~ Princesse Monoké</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="pays" src="../image/mononoké2.jpg">
+      <figcaption>Plan des Komadas dans<br> la forêt<br>~ Princesse Mononoké</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="affich" src="../image/nausicaä.jpg">
+      <figcaption>Affiche officielle du film<br>~ Nausicäa de la Vallée<br> du Vent</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="pays" src="../image/arrietty2.jpg">
+      <figcaption>Affiche officielle du film<br>~ Arrietty le Petit Monde<br> des Chapardeurs</figcaption>
+      </figure>
+    </div>
+
+    <div class="col">
+      <figure class="fig1">
+      <img class="pays" src="../image/pompoko2.jpg">
+      <figcaption>Rassemblement de Tanukis<br> dans la joie<br>~ Pompoko</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="pays" src="../image/nausicaä2.jpg">
+      <figcaption>Nausicäa chevauchant un engin<br> volant accompagnée de son chat<br>~ Nausicäa de la Vallée du Vent </figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="pays" src="../image/porco.jpg">
+      <figcaption>Porco Rosso reparant<br> son avion<br>~ Porco Rosso</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="affich" src="../image/terremer.jpg">
+      <figcaption>Affiche officielle du film<br>~ Les Contes de<br> Terremer</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="pays" src="../image/vent.jpg">
+      <figcaption>Jiro embrassant sa femme<br>~ Le Vent <br>se lève</figcaption>
+      </figure>
+    </div>
+
+    <div class="col">
+      <figure class="fig1">
+      <img class="pays" src="../image/chatambulant2.jpg">
+      <figcaption>Plan du Chateau Ambulant<br> se déplaçant dans les montagnes<br>~ Le Chateau Ambulant</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="affich" src="../image/colline2.jpg">
+      <figcaption>Affiche officielle du film<br>~ La Colline aux coquelicots</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="pays" src="../image/mononoké.jpg">
+      <figcaption>Portrait de San chevauchant la<br> Mère Louve Moro<br>~ Princesse Mononoké</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="pays" src="../image/goutte.jpg">
+      <figcaption>Scène magnifique dans<br> un champ de récolte<br>~ Souvenirs goutte à goutte</figcaption>
+      </figure>
+      <figure class="fig1">
+      <img class="pays" src="../image/terremer2.jpg">
+      <figcaption>Le prince Arren fce à un dragon<br>~ Les Contes de<br> Terremer</figcaption>
+      </figure>
+    </div>
+
+    <div class="fin">
+       <p>Designed by LIVROZET Manon. All Rights Reserved.</p>
+    </div>
+
+  </body>
+
+</html>    

DIW/html/informations.html

@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+
+<html>
+  
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="../css/stylegen.css">
+    <link rel="stylesheet" href="../css/styleinfo.css">
+    <title>Informations</title>
+  </head>
+
+  <body>
+    <header>
+      <div class="navbar">  
+        <a href="../index.html">Retour Accueil</a>
+        <a href="../html/donnees.html">Films</a>
+        <a href="../formulaire.html">Contact</a>
+        <div class="deroulant">
+          <a href="#" class="sousmenu">Médias</a>
+          <div class="deroulant-content">
+            <a href="../html/images.html">Images</a>
+            <a href="../html/video.html">Vidéos</a>
+          </div> 
+        </div>
+      </div>
+    </header>
+
+    <footer>
+      <div class="hayao">
+        <img class="imageh" src="../image/hayao.jpg" alt="Portrait de hayao Miyazaki">
+        <div class="pp">
+          <h2>Hayao Miyazaki, mais qui est-il ?</h2>
+          <p>Hayao Miyazaki est un réalisateur, producteur, scénariste et écrivain ainsi qu'un célébre mangaka japonais. Il est le principal réalisateur des Studios Ghibli, il en est d'ailleurs le co-fondateur en 1985. Il réalise principalement des films d'animations, et obtient ainsi une renomée internationnale. Ces oeuvres sont caractérisées par une volontée de Hayao de mettre en avant le rapport entre l'homme et la nature et/ou la technologie, de satyriser la société, ou encore une mise en avant de l'art et l'artisanat.<br>Pour en savoir plus, <a href="https://fr.wikipedia.org/wiki/Hayao_Miyazaki">cliquez ici !</a></p>
+        </div>
+        <div class="toto">
+          <p>Le premier film de Hayao Miyazaki, réalisé en 1986, est le film "Le Chateau dans le ciel", le premier d'une longue lignée de chefs-d'oeuvres.</p>
+        </div>
+      </div>
+
+      <section class="explic">
+        <h2>Les films des studios</h2>
+        <p>"Studio Ghibli" est le nom du studio d'animation, fondé par Hayao Miyazaki et Isao Takahata en 1985. Ce studio produit des longs métrages d'animations mais également des courts métrages d'animations. Les films produits ont tous reçus une excellente critique au moment de leur sortie, et ont remportés plusieurs succès au près de la critique mais aussi du grand public. Par exemple, le film "Le Voyage de Chihiro" ("Spirited Away" en anglais) a remporté l'Oscar du meilleur film d'animation en 2003, et l'Ours d'Or de Berlin en 2002 (entre autre parmit ses 31 récompenses). 
+        <br>Tous ces films sont considérés comme des chef d'oeuvre. En effet, ils sont d'une part très baux, étant tous majoriatirement desiné à la main et animé par la suite. Mais au-delà de l'aspect visuel du film d'animation, tous les films ont un objectif plus profond. Chaque sujet, sous couvert de l'animation, cache une morale et/ou une satyre de la société, vraiment présente explicitement dans les films où la réalisation est surtout dirigée par Isao Takahata.</p>
+      </section>  
+
+      <div class="isao">
+        <img class="imagei" src="../image/isao.webp" alt="Portrait de Isao Takahata">  
+        <div class="pp">
+          <h2>Isao Takahata</h2>
+          <p>Hayao Miyazaki est un réalisateur japonais de films d'animations. Né en 29 octobre 1935, il vit en enfance traumatique pendant la seconde guerre mondiale, l'inspirant pour son futur film "Le tombeau des Lucioles". Il rencontre Hayao Miyaaki en 1959, en rejoignant les studios Toei Animation. Il co-fonde les Studios Ghibli avec Hayao Miyazaki en 1985. Parmit ses films les plus célébres, on notera Le tombeau des lucioles, Pompoko ou encore Souvenirs goutte à goutte. Malheuresement, il décedera le 5 avril 2018.<br>Pour en savoir plus, <a href="https://fr.wikipedia.org/wiki/Isao_Takahata">cliquez ici !</a></p></p>
+        </div>
+      </div>
+      
+      <div class="satyre">
+        <h2>Présentation des différentes satyres</h2>
+        <p>Dans cette partie, vous trouverez les différentes satyres dans chaque films. Attention spoiler !!</p>
+        <p>Tous les films ont une signification que l'ont pourrait qualifier de cachée, une morale sous couvert de l'animation pour montrer des défauts, des critiques de la société ou du comportement des hommes.<br>Le rapport à la nature est aussi beaucoup exploité, et présent dans la majorité des films. Voici une lise, non-exhaustive, des satyres des différents films:</p>
+        <ul>
+          <li>Le voyage de Chihiro</li>
+          <li>Le tombeau des Lucioles</li>
+          <li>Pompoko</li>
+          <li>Princesse Mononoké</li>
+        </ul>
+      </div>
+
+      <br>
+      <br>
+
+      <div class="chitext">
+        <p>Le Voyage de Chihiro, un des films les plus célébres des Studios Ghibli, est un chef d'oeuvre de l'animation. Outre ses scènes magnifiques, surpenantes et fantasmagoriques, ce film présentes une satyre de la société, mais aussi des hommes. Dans ce film, on a tous d'abbord affaire à une scène assez choquante: la transformation en cochon des parents de Chihiro. En effet, appaté par un stand de nourriture (plus ou moins douteuse), les parents se mettent à manger de façon déraisonnée les mets présentés. Leur gloutonnerie, leur envie de toujours manger plus que ce qu'ils ont besoins, les transforment en porc gras et gros. Cette scène est une métaphore de la société de consommation, de l'appât des gens à toujours vouloir consommer plus; cette surconsommation est alors punit par la transformation en cochon. L'appât du gain également est très présent à travers tout les personnages du Palais des Bains. En effet, un employé, appâter par l'argent, finit par se faire dévorer par le Sans-Visage. L'avarice est aussi profondément démontré à travers le personnage de Yubaba, toujours en quête de protection de son argent. On trouve aussi une critique de la société par rapport à Haku, présenté à la fin fu film comme Dieu de la rivière Ko-Haku et qui, semble-t-il, est arrivé au service de Yubaba en quête de quelque chose. En réalité, Haku est devenu une âme solitaire après que la construction d'immeubles, l'urbanisation, est détruite la rivière et détruit par la suite le Dieu de la rivière en question.</p>
+      </div>
+
+      <br>
+
+      <div class="chitext">
+        <p>Le Tombeau des Lucioles, vrai chef d'oeuvre, est considéré comme LE film le plus triste des Studio Ghibli. Dans ce film, on suit le parcours de deux enfants pendant la seconde guerre mondiale; ce film est une critique très profonde du Japon pendant la seconde guerre mondiale. Rien que sur l'affiche du film, on apperçoit les deux enfants, souriants, entourés de lucioles. Mais avec du recul, les lucioles en question se transforment en bombardements, largués par un avion de guerre. Dès le début du film, on commence avec un jeune adolescent, en train de mourir, racontant son histoire, son passée durant la guerre et l'après-guerre. Tout au long du film, les enfants doivent se débrouiller seuls, tout les adultes leurs tournant le dos. Désespéré, Seita donne tous pour essayer de nourrir sa petite soeur, qui s'affaiblit au fur et à mesure. Ce passage de leur vie représente la famine qui a reigné à cette période de l'histoire. A la fin du film, Sestuko, la petite soeur, finit par déceder, morte de la famine. Isao met en avant dans ce film la peur et la tristesse; mais aussi la cruauté et l'égoïsme des adultes, aucun ne voulant venir en aide à de pauvres enfants. Les lucioles, présentes tout le long du film, représente l'espoir de vivre, la lumière dans la pénombre. Mais, comme le montre la scène où les lucioles enfermées dans un bocal pour illuminer les enfants, décédent, l'espoir s'amoindrit tout le long du film. Le mot "Tombeau" est habilement choisit, faisant passer le message que la mort planera sur ses enfants tout le long du films, telle une épée de Damoclès, jusqu'à ce qu'ils décedent.</p>
+      </div>
+
+      <br>
+
+      <div class="chitext">
+        <p>Pompoko est un film très orienté dans la protection de la nature. En effet, on suit dans le film des Tanukis, animaux sacrés au Japon, qui vont se rebeller et tenter de protéger leur forêt de la destruction. Ce film, mélant comédie et drame, montre la tristesse de l'urbanisation, le changement de vie imposé aux animaux. Les tanuks, des animaux si adorables, se trouvent dans l'obligation de devenir méchant et sournois dans le but de faire échouer les projets de l'homme pour leur propre survit.</p>
+      </div>
+
+      <br>
+
+      <div class="chitext">
+        <p>Princesse Mononoké fait partit des films ayant fait connaître de façon majeure l'univers Ghibli dans le monde. Ce film, mélant guerre et nature, montre à quel point l'homme perverse la nature. Dans ce film, la guerre est présentée comme nocive, détruisant la forêt et les animaux qui y sont présent. San, aussi appelée Princesse Mononoké, représente la pureté et la defenseuse de la nature. Egalement, Hayao met en avant les femmes et leur émancipation, notamment au sein du village de dame Eboshi, où les femmes ne sont pas de simples "femmes des hommes". En effet, elles font à elles seules tourner toute les machineries du village, et n'hésite pas à prendre les armes face à l'armée d'animaux attaquant les hommes. Leur langage cru peut aussi paraître choquant à première vue. Hayao met en avant les femmes dans beaucoup de ces films, mais celui-ci est l'apogée du féminisme. Les animaux de ce film, comme le sanglier au début du film, sont représentés comme des esprits contaminés par la cruauté des hommes, les poussant à devenir démoniaques. Ce film est un parfait opposé au style animé des studios Disney. En effet, Hayao Miyazaki réalise des films avec une morale, une leçon de vie; jamais nous ne nous retrouvons devant un film présentant un camp de méchant et un camp de gentil. Tout les personnages ont leurs histoires, leurs soucis et leurs objectifs; il n'y a pas de rôles de méchants attitrés d'office. Par exemple, Princesse Mononoké oppose le camp de la nature et les camps des femmes, avec chacun leurs défauts mais aussi leurs objectifs, tous entendables; libre au téléspectateur de soutenir ou comprendre le camp qu'il souhaite.</p>
+      </div>
+
+      <div class="scroll_to_top">
+        <a href="#top"><img src="../image/arrow.png" alt="Retourner en haut" /></a>
+      </div>
+
+      <div class="fin">
+       <p>Designed by LIVROZET Manon. All Rights Reserved.</p>
+      </div>
+    </footer>  
+  </body>
+
+</html>    

DIW/html/test.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+
+<html>
+
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="styletest.css">
+    <title></title>
+  </head>
+
+  <body>
+
+  	<div class="toto">
+  		<p>L'astronomie est considérée comme la plus ancienne des sciences1. L'archéologie révèle en effet que certaines civilisations de l'Âge du bronze, et peut-être du Néolithique, avaient déjà des connaissances en astronomie. Elles avaient compris le caractère périodique des équinoxes et sans doute leur relation avec le cycle des saisons, elles savaient également reconnaître certaines constellations. L'astronomie moderne doit son développement à celui des mathématiques depuis l'Antiquité grecque et à l'invention d'instruments d'observation à la fin du Moyen Âge. Si l'astronomie est pratiquée pendant plusieurs siècles parallèlement à l'astrologie, le siècle des Lumières et la redécouverte de la pensée grecque voient naître la distinction entre la raison et la foi, si bien que l'astrologie n'est plus pratiquée par les astronomes.</p>
+
+  	</div>
+
+  	<div class="nom">
+  		<p>Les systèmes les mieux connus sinon les plus développés sont : dans l'Ancien Monde :
+        l'astronomie indienne et chinoise : le Rig-Véda mentionne 27 constellations associées au mouvement du Soleil ainsi que les 13 divisions zodiacales du ciel,
+        l'astronomie sumérienne, et ses dérivées les astronomies chaldéenne, mésopotamienne, égyptienne et hébraïque. Si bien que la Bible contient des énoncés au sujet de la position de la Terre dans l'Univers et sur la nature des étoiles et des planètes ;
+        dans le Nouveau Monde, les astronomies amérindiennes sont aussi déjà très développées, notamment la toltèque, la zapotèque (assez proche) et la maya tout à fait originale. Ainsi, sans aucun instrument optique, les Mayas avaient réussi à décrire avec précision les phases et éclipses de Vénus.</p>
+  		
+
+  	</div>
+
+
+
+  </body>
+
+
+</html>  

DIW/html/video.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+
+<html>
+  
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="../css/stylegen.css">
+    <link rel="stylesheet" href="../css/stylevid.css">
+    <title>Vidéos</title>
+  </head>
+
+  <body>
+    <header>
+    <div class="navbar">  
+            <a href="../html/informations.html">Informations</a>
+            <a href="../html/donnees.html">Films</a>
+            <a href="../index.html">Retour Accueil</a>
+            <a href="../formulaire.html">Contact</a>
+            <div class="deroulant">
+              <a href="#" class="sousmenu">Médias</a>
+              <div class="deroulant-content">
+                <a href="../html/images.html">Images</a>
+                <a href="../html/video.html">Vidéos</a>
+              </div> 
+            </div>
+      </div>
+    </header>
+
+    <div class="tout">
+      <div class="vid">
+        <video width="420" height="340" controls>
+          <source src="../image/video1.mp4" type="video/mp4">
+          Impossible de lire la vidéo
+        </video>
+      </div>
+
+      <div class="texte">
+        <p>Sur cette page, vous retrouverez une vidéo reprenant une grande partie des films des Studios Ghibli, classés dans un certain ordre de préference, mais également un ordre du "meilleur". Un ordre, assez subjectif mais regroupant tout de mêmes les meilleures oeuvres de Hayao Myazaki.</p>
+        <p>Vous pouvez lire la vidéo, la passée en mode grand écran ou la garder en incrustation sur votre écran.</p>
+        <br>
+        <p>~Crédits de la vidéo: Télérama'~</p>
+      </div> 
+    </div>
+
+    <div class="scroll_to_top">
+      <a href="#top"><img src="../image/arrow.png" alt="Retourner en haut" /></a>
+    </div>  
+
+    <div class="fin">
+      <p>Designed by LIVROZET Manon. All Rights Reserved.</p>
+    </div>
+
+
+
+  </body>
+
+</html>    

DIW/index.html

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+
+<html>
+  
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
+    <link rel="stylesheet" href="css/stylegen.css">
+    <link rel="stylesheet" href="css/styleind.css">
+    <title>Studio Ghibli</title>
+  </head>
+
+  <body>
+    <header>
+
+      <div class="navbar">  
+        <a href="html/informations.html">Informations</a>
+        <a href="html/donnees.html">Films</a>
+        <a href="formulaire.html">Contact</a>
+        <div class="deroulant">
+          <a href="#" class="sousmenu">Médias</a>
+          <div class="deroulant-content">
+            <a href="html/images.html">Images</a>
+            <a href="html/video.html">Vidéos</a>
+          </div> 
+        </div>
+        <div class="logo">
+          <img src="image/facebook.png" alt="logo facebook" height="45" width="45">
+          <img src="image/insta.png" alt="logo instagram" height="45" width="45">
+          <img src="image/twitter1.png" alt="logo twitter" height="47" width="47">
+        </div>
+      </div>
+
+      <div class="debut">
+        <img src="image/ghibli.png" alt="dessin des studio ghibli" style="width: 100%">
+      </div>
+
+      <div class="phrase">  
+        <p class="clearfloat">Bienvenu sur cette fan page des Studio Ghibli ! <br>Si vous êtes ici, nous supposons que ce merveilleux univers vous intéresses...<br>Du Voyage de Chihiro, à Princesse Mononoké en passant par Mon voisin Totoro, découvrez diverses informations et (re)découvrez vos films préférés.<br>Vous retrouverez diverses informations sur le réalisateur, Hayao Miyazaki, mais également une repertoriation des films, ainsi que des photos et vidéo. Bonne visite sur notre site !</p>
+      </div>
+      
+    </header>
+    <footer>
+
+      <div class="myDiv">
+        <section>
+          <div class="article">
+          <div class="med-1"> 
+            <h3>Petit guide pour ce site</h3>
+              <ul>
+                <li>Une page d'informations vous permettra de retrouver diverses informations</li>
+                <br>
+                <li>La page films vous permettra de découvrir les films et leurs résumés</li>
+                <br>
+                <li>Bien évidemment, une page contact pour nous retournez toute information vous semblant nécessaire</li>
+                <br>
+                <li>Une partie média, avec aux choix la galerie d'images, ou les vidéos à propos des Studio</li>
+              </ul>
+            <h4>Bonne visite dans ce petit univers !</h4>
+          </div>
+          </div>
+        </section> 
+
+                  
+        <div class="med-2"> 
+        <img class="suie" src="image/ghiblimimi.png" alt="image boule de suie">
+        </div>
+
+        <aside>
+          <div class="lien">
+          <div class="med-3"> 
+            <h3>Quelques liens pour en apprendre encore plus :)</h3>
+              <ul>
+                <li><a class="toutl" href="https://fr.wikipedia.org/wiki/Studio_Ghibli">Wikipédia</a></li>
+                <li><a class="toutl" href="https://www.studioghibli.fr/">Ghibli</a></li>
+                <li><a class="toutl" href="https://fr.wikipedia.org/wiki/Hayao_Miyazaki">Hayao.Miyazaki</a></li>
+                <li><a class="toutl" href="https://www.lepoint.fr/pop-culture/les-7-films-du-studio-ghibli-a-voir-absolument-sur-netflix-31-01-2020-2360684_2920.php">Le.Point.Ghibli</a></li>
+              </ul>
+          </div>
+          </div>
+        </aside>     
+      </div>
+
+      <div class="scroll_to_top">
+        <a href="#top"><img src="image/arrow.png" alt="Retourner en haut" /></a>
+      </div>
+
+      <div class="fin">
+        <p>Designed by LIVROZET Manon. All Rights Reserved.</p>
+      </div>
+
+    </footer>
+  </body>
+</html>