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

99
src/index.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<meta lang="fr" />
<link rel="stylesheet/css" href="main.css" />
<link rel="stylesheet" href="./main.css" />
<title>Métamorphose</title>
</head>
@ -11,13 +11,11 @@
<header>
<h1>Métamorphose</h1>
<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>
<section id="charte">
<header>
<h2>Le manifeste</h2>
</header>
<!--<section id="charte">
<h2>Le manifeste</h2>
<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.
@ -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.
</p>
</section>
</section>-->
<section id="qui">
<header>
<h2>Qui sommes nous&nbsp;?</h2>
</header>
<h2>Qui sommes nous&nbsp;?</h2>
<div class="content">
<div class="profil">
<h3>Louise Gouthéraud</h3>
<p class="role">Réalisatrice</p>
<img src="img/louise.jpg" />
<img src="img/louise.jpg"/>
<div>
<h3>Louise Gouthéraud</h3>
<p class="role">Réalisatrice</p>
</div>
</div>
<div class="profil">
<h3>Ayoub Imam</h3>
<p class="role">Photographe</p>
<img src="img/ayoub.jpg" />
<img src="img/ayoub.jpg"/>
<div>
<h3>Ayoub Imam</h3>
<p class="role">Photographe</p>
</div>
</div>
<div class="participants">
</div>
<div class="participants">
<div class="mannequins">
<h3>Mannequins</h3>
<ul>
<li>Jeanne Gouthéraud</li>
@ -69,19 +71,19 @@
<li>Louise Gouthéraud</li>
</ul>
</div>
<div class="participants">
<div class="ecrivains">
<h3>Écrivains</h3>
<ul>
<li>LouiseGouthéraud</li>
<li>Louise Gouthéraud</li>
<li>Jeanne Gouthéraud</li>
<li>Marylou Gricourt</li>
<li>Louise Dailloux</li>
</ul>
</div>
<div class="participants">
<div class="site">
<h3>Site internet</h3>
<ul>
<li>Élisa Blancart</li>
<li>Elisa Blancart</li>
<li>Adrian Amaglio</li>
</ul>
</div>
@ -89,27 +91,40 @@
</section>
<section id="galerie">
<header>
<h2>Galerie</h2>
</header>
<h2>Galerie</h2>
<div class="content">
<img src="img/galerie1.jpg" />
<img src="img/galerie1.jpg" />
<img src="img/galerie1.jpg" />
<img src="img/galerie1.jpg" />
<img src="img/galerie1.jpg" />
<img src="img/galerie1.jpg" />
<img src="img/galerie1.jpg" />
<img src="img/galerie1.jpg" />
<img src="img/galerie1.jpg" />
<img src="img/galerie1.jpg" />
<div>
<img src="img/galerie1.jpg" />
</div>
<div>
<img src="img/galerie1.jpg" />
</div>
<div>
<img src="img/galerie1.jpg" />
</div>
<div>
<img src="img/galerie1.jpg" />
</div>
<div>
<img src="img/galerie1.jpg" />
</div>
<div>
<img src="img/galerie1.jpg" />
</div>
<div>
<img src="img/galerie1.jpg" />
</div>
<div>
<img src="img/galerie1.jpg" />
</div>
<div>
<img src="img/galerie1.jpg" />
</div>
</div>
</section>
<section id="audio">
<header>
<h2>Écoutez nous</h2>
</header>
<h2>Écoutez nous</h2>
<div class="content">
<div class="audioblock">
<h3>Édito 1</h3>
@ -129,13 +144,11 @@
</section>
<section id="contact">
<header>
<h2>Contactez nous</h2>
</header>
<h2>Contactez nous</h2>
<form action="http://localhost:8080/submit" method="POST">
<input type="hidden" name="token" value="s0y6WANzU1XnYERoJxMwekP9pqilSVLK5Gbf3hmZadHB2rQ4u8" />
<div>
<label for="nom">Votre nom&nbsp;:</label>
<label for="nom">Nom&nbsp;:</label>
<input type="text" name="nom" required="required"/>
</div>
<div>
@ -147,8 +160,8 @@
<input type="text" name="objet" />
</div>
<div>
<label for="objet">Votre message&nbsp;:</label>
<textarea name="message" required="required"></textarea>
<label for="objet">Message&nbsp;:</label>
<textarea name="message" rows="8" required="required"></textarea>
</div>
<input type="submit" />
</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;
}