adrian/metamorphose
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update index.html and main.css

Browse Source
This commit is contained in:
Elisa 2020-05-15 00:22:58 +02:00
parent 257aad8af6
commit a210e737de
2 changed files with 191 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta lang="fr" /> <meta lang="fr" />
<link rel="stylesheet/css" href="main.css" /> <link rel="stylesheet" href="./main.css" />
<title>Métamorphose</title> <title>Métamorphose</title>
</head> </head>
@ -11,13 +11,11 @@
<header> <header>
<h1>Métamorphose</h1> <h1>Métamorphose</h1>
<p>Manifeste de mode de seconde main, Manifeste pour la mode de demain.</p> <p>Manifeste de mode de seconde main, Manifeste pour la mode de demain.</p>
<a href="pdf/métamorphose1.pdf" id="download">Télécharger le magazine</a> <a class="button" href="pdf/métamorphose1.pdf" id="download">Télécharger</a>
</header> </header>
<section id="charte"> <!--<section id="charte">
<header>
<h2>Le manifeste</h2> <h2>Le manifeste</h2>
</header>
<p> <p>
Optio sit quis itaque. Tempore ipsam ut dolor nesciunt quo voluptatem asperiores. Quidem aut veniam consequatur necessitatibus eligendi vero. Sed ad esse doloremque iure quasi officiis. Optio sit quis itaque. Tempore ipsam ut dolor nesciunt quo voluptatem asperiores. Quidem aut veniam consequatur necessitatibus eligendi vero. Sed ad esse doloremque iure quasi officiis.
@ -40,24 +38,28 @@
Est maiores eveniet rerum doloribus rerum possimus nesciunt. Labore exercitationem nesciunt sit sit. Nostrum velit quis minus eveniet quia ipsam. Et sunt ipsa sunt nemo rerum voluptates quisquam. Est est et iste. Dolorem sequi ab dignissimos neque tempore officia molestiae. Est maiores eveniet rerum doloribus rerum possimus nesciunt. Labore exercitationem nesciunt sit sit. Nostrum velit quis minus eveniet quia ipsam. Et sunt ipsa sunt nemo rerum voluptates quisquam. Est est et iste. Dolorem sequi ab dignissimos neque tempore officia molestiae.
</p> </p>
</section> </section>-->
<section id="qui"> <section id="qui">
<header>
<h2>Qui sommes nous&nbsp;?</h2> <h2>Qui sommes nous&nbsp;?</h2>
</header>
<div class="content"> <div class="content">
<div class="profil"> <div class="profil">
<img src="img/louise.jpg"/>
<div>
<h3>Louise Gouthéraud</h3> <h3>Louise Gouthéraud</h3>
<p class="role">Réalisatrice</p> <p class="role">Réalisatrice</p>
<img src="img/louise.jpg" /> </div>
</div> </div>
<div class="profil"> <div class="profil">
<img src="img/ayoub.jpg"/>
<div>
<h3>Ayoub Imam</h3> <h3>Ayoub Imam</h3>
<p class="role">Photographe</p> <p class="role">Photographe</p>
<img src="img/ayoub.jpg" /> </div>
</div>
</div> </div>
<div class="participants"> <div class="participants">
<div class="mannequins">
<h3>Mannequins</h3> <h3>Mannequins</h3>
<ul> <ul>
<li>Jeanne Gouthéraud</li> <li>Jeanne Gouthéraud</li>
@ -69,19 +71,19 @@
<li>Louise Gouthéraud</li> <li>Louise Gouthéraud</li>
</ul> </ul>
</div> </div>
<div class="participants"> <div class="ecrivains">
<h3>Écrivains</h3> <h3>Écrivains</h3>
<ul> <ul>
<li>LouiseGouthéraud</li> <li>Louise Gouthéraud</li>
<li>Jeanne Gouthéraud</li> <li>Jeanne Gouthéraud</li>
<li>Marylou Gricourt</li> <li>Marylou Gricourt</li>
<li>Louise Dailloux</li> <li>Louise Dailloux</li>
</ul> </ul>
</div> </div>
<div class="participants"> <div class="site">
<h3>Site internet</h3> <h3>Site internet</h3>
<ul> <ul>
<li>Élisa Blancart</li> <li>Elisa Blancart</li>
<li>Adrian Amaglio</li> <li>Adrian Amaglio</li>
</ul> </ul>
</div> </div>
@ -89,27 +91,40 @@
</section> </section>
<section id="galerie"> <section id="galerie">
<header>
<h2>Galerie</h2> <h2>Galerie</h2>
</header>
<div class="content"> <div class="content">
<div>
<img src="img/galerie1.jpg" /> <img src="img/galerie1.jpg" />
</div>
<div>
<img src="img/galerie1.jpg" /> <img src="img/galerie1.jpg" />
</div>
<div>
<img src="img/galerie1.jpg" /> <img src="img/galerie1.jpg" />
</div>
<div>
<img src="img/galerie1.jpg" /> <img src="img/galerie1.jpg" />
</div>
<div>
<img src="img/galerie1.jpg" /> <img src="img/galerie1.jpg" />
</div>
<div>
<img src="img/galerie1.jpg" /> <img src="img/galerie1.jpg" />
</div>
<div>
<img src="img/galerie1.jpg" /> <img src="img/galerie1.jpg" />
</div>
<div>
<img src="img/galerie1.jpg" /> <img src="img/galerie1.jpg" />
</div>
<div>
<img src="img/galerie1.jpg" /> <img src="img/galerie1.jpg" />
<img src="img/galerie1.jpg" /> </div>
</div> </div>
</section> </section>
<section id="audio"> <section id="audio">
<header>
<h2>Écoutez nous</h2> <h2>Écoutez nous</h2>
</header>
<div class="content"> <div class="content">
<div class="audioblock"> <div class="audioblock">
<h3>Édito 1</h3> <h3>Édito 1</h3>
@ -129,13 +144,11 @@
</section> </section>
<section id="contact"> <section id="contact">
<header>
<h2>Contactez nous</h2> <h2>Contactez nous</h2>
</header>
<form action="http://localhost:8080/submit" method="POST"> <form action="http://localhost:8080/submit" method="POST">
<input type="hidden" name="token" value="s0y6WANzU1XnYERoJxMwekP9pqilSVLK5Gbf3hmZadHB2rQ4u8" /> <input type="hidden" name="token" value="s0y6WANzU1XnYERoJxMwekP9pqilSVLK5Gbf3hmZadHB2rQ4u8" />
<div> <div>
<label for="nom">Votre nom&nbsp;:</label> <label for="nom">Nom&nbsp;:</label>
<input type="text" name="nom" required="required"/> <input type="text" name="nom" required="required"/>
</div> </div>
<div> <div>
@ -147,8 +160,8 @@
<input type="text" name="objet" /> <input type="text" name="objet" />
</div> </div>
<div> <div>
<label for="objet">Votre message&nbsp;:</label> <label for="objet">Message&nbsp;:</label>
<textarea name="message" required="required"></textarea> <textarea name="message" rows="8" required="required"></textarea>
</div> </div>
<input type="submit" /> <input type="submit" />
</form> </form>

135
src/main.css
View File

@ -0,0 +1,135 @@
body {
max-width: 1300px;
margin: auto;
}
header {
text-align: center;
}
header .button {
display: inline-block;
border-radius: 100%;
width: 4.9em;
height: 4.9em;
line-height: 4.75em;
text-align: center;
font-size: 1.25em;
padding: 0.5em;
background-color: #a7e3f0;
text-decoration: none;
color: black;
}
.profil {
display: inline-flex;
width: 49%;
}
.profil:nth-child(2n) {
flex-direction: row-reverse;
}
.profil > div {
padding: 0 10px;
}
.profil img {
height: 100px;
border-radius: 100%;
}
.participants {
display: flex;
}
.participants > div {
flex: 1 1 auto;
text-align: center;
}
#galerie .content{
display: grid;
grid-template-columns: repeat(11, 1fr);
grid-template-rows: repeat(9, 9%);
grid-gap: 1rem;
width: 1250px;
height: 670px;
margin: auto;
}
#galerie img{
width: 100%;
height: 100%;
object-fit: cover;
}
#galerie .content>div:nth-child(1){
grid-column: span 3;
grid-row: span 6;
}
#galerie .content>div:nth-child(2){
grid-column: span 2;
grid-row: span 3;
}
#galerie .content>div:nth-child(3){
grid-column: span 3;
grid-row: span 5;
}
#galerie .content>div:nth-child(4){
grid-column: span 3;
grid-row: span 2;
}
#galerie .content>div:nth-child(5){
grid-column: span 3;
grid-row: span 3;
}
#galerie .content>div:nth-child(6){
grid-column: span 2;
grid-row: span 3;
}
#galerie .content>div:nth-child(7){
grid-column: span 6;
grid-row: span 4;
}
#galerie .content>div:nth-child(8){
grid-column: span 2;
grid-row: span 3;
}
#galerie .content>div:nth-child(9){
grid-column: span 3;
grid-row: span 3;
}
#contact {
padding: 0 0 3em;
}
#contact form > div {
padding: 0 0 1.1rem;
}
#contact label {
display: block;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.075em;
text-transform: uppercase;
margin: 0 0 0.75rem 0;
}
#contact input[type="text"], #contact input[type="password"], #contact input[type="email"], #contact select, #contact textarea {
display: block;
outline: 0;
padding: 0 0.55rem;
text-decoration: none;
width: 100%;
color: inherit;
line-height: 2.8em;
}
#contact textarea {
padding: 0.75rem 0.55rem;
line-height: 1.1em;
}