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

Merge branch 'master' of https://git.jean-cloud.net/adrian/metamorphose.git

Browse Source
This commit is contained in:
Elisa 2020-06-17 18:39:45 +02:00
parent 40eec0474c
commit 8bb1154c04
7 changed files with 153 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/fonts/fonts.css
View File

@ -15,7 +15,7 @@
@font-face {
font-family: "GoldenRatio";
src: url("golden_ratio/GoldenRatio-Demo.otf");
src: url("golden_ratio/GoldenRatio-accents2.otf");
}
@font-face {

BIN
src/fonts/golden_ratio/GoldenRatio-accents2.otf Normal file
View File

Binary file not shown.

BIN
src/img/Page_de_couverture.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 276 KiB

BIN
src/img/ayoub.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 425 KiB

BIN
src/img/louise.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 410 KiB

85
src/index.html
View File

@ -21,24 +21,35 @@
<path d="M103.2,11.61l35.69,35.69h-35.69v-35.69M103.2,8.6h-2.15v40.85h40.85v-2.15l-38.7,-38.7zM52.245,129c-3.01,0 -4.945,-2.365 -4.945,-4.515c0,-5.805 7.74,-10.75 17.845,-14.19c4.3,-7.525 8.385,-16.985 11.18,-25.585c-2.365,-6.235 -3.87,-12.04 -3.87,-16.125c0,-2.365 0.43,-4.3 1.29,-5.59c1.075,-1.72 2.795,-2.795 4.73,-2.795c1.935,0 3.44,1.075 4.3,2.795c0.645,1.29 1.075,3.01 1.075,5.375c0,4.085 -1.075,9.89 -3.225,16.555c2.795,7.095 7.095,14.405 12.04,19.78c7.74,-0.645 13.975,-0.43 17.845,0.86c4.3,1.505 5.375,3.87 5.375,5.805c0,1.935 -0.86,6.235 -7.955,6.235c-6.02,0 -11.825,-3.44 -16.77,-8.385c-7.955,0.86 -16.125,2.58 -23.005,4.945c-5.16,8.385 -10.75,14.835 -15.91,14.835zM51.6,124.485c0,0 0.215,0.215 0.645,0.215c2.365,0 5.59,-3.225 9.03,-8.17c-5.805,2.58 -9.675,5.375 -9.675,7.955zM97.18,108.575c3.44,2.795 7.095,4.515 10.965,4.515c3.655,0 3.655,-1.29 3.655,-1.935c0,-0.86 -1.72,-1.505 -2.365,-1.72c-2.15,-0.645 -5.16,-1.075 -9.03,-1.075c-1.075,0.215 -2.15,0.215 -3.225,0.215zM78.905,90.73c-2.15,6.02 -4.73,12.255 -7.74,17.845c5.375,-1.505 11.18,-2.58 16.555,-3.225c-3.44,-4.515 -6.45,-9.675 -8.815,-14.62zM78.475,64.5c-0.43,0 -0.645,0 -1.075,0.645c-0.215,0.43 -0.645,1.505 -0.645,3.44c0,2.58 0.43,5.59 1.505,9.03c0.86,-3.655 1.29,-6.88 1.29,-9.46c0,-1.935 -0.43,-3.01 -0.43,-3.44c-0.215,-0.215 -0.43,-0.215 -0.645,-0.215z"></path>
</g>
</svg><!--
--><span>Télécharger</span>
-->
<span>Télécharger</span>
</a>
</header>
<section id="charte">
<h2>Le manifeste</h2>
<div>
<div>
Bienvenue dans l’aventure du magazine Métamorphose ! Métamorphose est un magazine, un magazine de mode : il présente des vêtements, issus de la seconde main. C’est aussi une aventure, un support de réflexions, d’histoires, de conseils, de poèmes, sur des thèmes inspirants autour du vêtement et de sa réutilisation. Les vêtements de seconde mains y sont mis à l’honneur mais permettent aussi de parler d’écologie, de confiance en soi, de politique. Cet ouvrage emprunte la forme d’un magazine de mode mais parle avant tout d’un sujet de fond : la seconde main dans toutes ses formes, sujet auquel il nous semblait utile de contribuer et de développer. Métamorphose, c’est aussi une équipe d’une dizaine de copains, passionnés mais peu expérimentés, ayant travaillé dur pour lui donner naissance. Une équipe qui tient à son indépendance et à son originalité, et qui souhaite partager une idée,
<div style="max-width: 60%;">
<span>Bienvenue dans l’aventure du magazine Métamorphose !</span>
<br>
<br>
<span>Métamorphose est un magazine, un magazine de mode. Cependant, il présente des vêtements, issus de la seconde main. C’est aussi une aventure, un support de réflexion, d’histoires, de conseils, de poèmes, sur des thèmes inspirants autour du vêtement et de sa réutilisation. Les vêtements de seconde mains y sont mis à l’honneur mais permettent aussi de parler d’écologie, de confiance en soi, de politique. Cet ouvrage emprunte la forme d’un magazine de mode mais parle avant tout d’un sujet de fond : la seconde main sous toutes ses formes, sujet auquel il nous semblait utile de contribuer et de développer.</span>
<br>
<span>Métamorphose, c’est aussi une équipe d’une dizaine de copains, passionnés mais peu expérimentés, ayant travaillé dur pour lui donner naissance. Une équipe qui tient à son indépendance et à son originalité, et qui souhaite partager une idée, une façon d’envisager autrement le quotidien à travers son mode de vie pour consommer moins mais mieux, pour vivre plus simplement, mais vivre vraiment. Ce magazine, comme une petite graine fraîchement semée aidera peut-être à faire germer un nouveau mode de vie où nous serons plus conscients de nos choix, avec éthique et confiance en soi. Le vêtement, parfait étendard de la consommation outrancière, meurtrière et polluante, pourrait devenir autre chose : une transmission, une création ou encore un souvenir.</span>
<br>
<span>Ainsi, Métamorphose, que vous pouvez télécharger gratuitement sur ce site, porte un message d’espoir et d’amitié pour une modification de notre consommation, de notre rapport aux vêtements et peut-être à soi et aux autres. Si l’idée et le magazine vous plaisent, n’hésitez pas à le partager autour de vous !</span>
<br>
<br>
<span>On vous souhaite une bonne lecture !</span>
<br>
<br>
<span class="align-right">Les copains de Métamorphose</span>
</div>
<div>
une façon d’envisager autrement le quotidien à travers son mode de vie pour consommer moins mais mieux, pour vivre plus simplement, mais vivre vraiment.
Ce magazine, comme une petite graine fraîchement semée aidera peut-être à faire germer un nouveau mode de vie où nous serons plus conscients de nos choix, avec éthique et confiance en soi. Le vêtement, parfait étendard de la consommation outrancière, meurtrière et polluante, pourrait devenir autre chose : une transmission, une création ou encore un souvenir. Ainsi, Métamorphose, que vous pouvez télécharger gratuitement sur ce site, porte un message d’espoir et d’amitié pour une modification de notre consommation, de notre rapport avec les vêtements et peut-être avec soi et les autres. Si l’idée et le magazine vous plaisent, n’hésitez pas à le partager autour de vous.
<br>
<br>
On vous souhaite une bonne lecture, les copains de Métamorphose
<img src="img/Page_de_couverture.jpg">
</div>
</div>
</section>
<section id="qui">
@ -46,7 +57,7 @@
<div class="content">
<div class="profil">
<div class="img">
<img src="img/perso_louise.jpg"/>
<img src="img/louise.png"/>
</div>
<div>
<h3>Louise Goutheraud</h3>
@ -61,7 +72,7 @@
</div>
<div class="profil">
<div class="img">
<img src="img/perso_ayoub.jpg"/>
<img src="img/ayoub.png"/>
</div>
<div>
<h3>Ayoub Imam</h3>
@ -104,7 +115,7 @@
</g>
</svg>
</div>
<h4>Ecrivains</h4>
<h4>écrivain(e)s</h4>
<ul>
<li>Marylou Gricourt</li>
<li>Jeanne Gouthéraud</li>
@ -132,6 +143,13 @@
<li>Elisa Blancart</li>
<li>Adrian Amaglio</li>
</ul>
<br>
<h4>Aide et Conseils</h4>
<ul>
<li>Raphaël Parisse</li>
<li>Rémi Rozkwas</li>
<li>Axel Céard</li>
</ul>
</div>
</div>
</section>
@ -166,14 +184,14 @@
<h2>Écoutez nous</h2>
<div class="content">
<div class="audioblock">
<h3>Edito 1</h3>
<h3>édito 1</h3>
<audio controls >
<source src="audio/edito1.mp3" type="audio/mpeg" />
<source src="audio/edito1.ogg" type="audio/ogg" />
</audio>
</div>
<div class="audioblock">
<h3>Edito 2</h3>
<h3>édito 2</h3>
<audio controls >
<source src="audio/edito1.mp3" type="audio/mpeg" />
<source src="audio/edito1.ogg" type="audio/ogg" />
@ -205,7 +223,33 @@
<input type="submit" class="couleur" value="Envoyer" />
</form>
</section>
<footer>
<div class="footer">
<div class="logo">
<div class="h1"><div>Méta</div><div>morph<span class="couleur">o</span>se</div></div>
</div>
<div>
<div class="h4"><span class="couleur">Manifeste de mode de seconde main,</span> Manifeste pour la mode de demain.</div>
<div class="rs">
Vous avez aimez notre idée, vous souhaitez nous suivre de plus près? Rendez vous sur Mét-amorphose
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 226 226">
<g fill="#4c8f29">
<path d="M180.8,30.13333h-135.6c-8.32433,0 -15.06667,6.74233 -15.06667,15.06667v135.6c0,8.32433 6.74233,15.06667 15.06667,15.06667h75.33333v-67.8h-22.6v-22.6h22.6v-12.1362c0,-22.97667 11.19453,-33.0638 30.29153,-33.0638c9.14547,0 13.98187,0.678 16.272,0.98687v21.61313h-13.02513c-8.10587,0 -10.9384,4.27893 -10.9384,12.94227v9.65773h23.76013l-3.22427,22.6h-20.53587v67.8h37.66667c8.32433,0 15.06667,-6.74233 15.06667,-15.06667v-135.6c0,-8.32433 -6.74987,-15.06667 -15.06667,-15.06667z"></path>
</g>
</svg>, Méta-morphose
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 226 226">
<g fill="#4c8f29">
<path d="M75.31862,22.6c-29.07113,0 -52.71862,23.66938 -52.71862,52.74805v75.33333c0,29.07113 23.66938,52.71862 52.74805,52.71862h75.33333c29.07113,0 52.71862,-23.66938 52.71862,-52.74805v-75.33333c0,-29.07113 -23.66938,-52.71862 -52.74805,-52.71862zM165.73333,52.73333c4.1584,0 7.53333,3.37493 7.53333,7.53333c0,4.1584 -3.37493,7.53333 -7.53333,7.53333c-4.1584,0 -7.53333,-3.37493 -7.53333,-7.53333c0,-4.1584 3.37493,-7.53333 7.53333,-7.53333zM113,67.8c24.9278,0 45.2,20.2722 45.2,45.2c0,24.9278 -20.2722,45.2 -45.2,45.2c-24.9278,0 -45.2,-20.2722 -45.2,-45.2c0,-24.9278 20.2722,-45.2 45.2,-45.2zM113,82.86667c-16.64218,0 -30.13333,13.49115 -30.13333,30.13333c0,16.64218 13.49115,30.13333 30.13333,30.13333c16.64218,0 30.13333,-13.49115 30.13333,-30.13333c0,-16.64218 -13.49115,-30.13333 -30.13333,-30.13333z"></path>
</g>
</svg>
</div>
</div>
</div>
<div class="date">· 2020 Métamorphose · Elisa & Adrian ·</div>
</footer>
<!--<div id="bandeau">
</div>-->
<section id="modale">
<button onclick="closeModalView()" title="Revenir au site" class="close">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 172 172">
@ -237,18 +281,5 @@
</div>
</button>
</section>
<footer>
Vous avez aimez notre idée, vous souhaitez nous suivre de plus près? Rendez vous sur Mét-amorphose
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 226 226">
<g fill="#4c8f29">
<path d="M180.8,30.13333h-135.6c-8.32433,0 -15.06667,6.74233 -15.06667,15.06667v135.6c0,8.32433 6.74233,15.06667 15.06667,15.06667h75.33333v-67.8h-22.6v-22.6h22.6v-12.1362c0,-22.97667 11.19453,-33.0638 30.29153,-33.0638c9.14547,0 13.98187,0.678 16.272,0.98687v21.61313h-13.02513c-8.10587,0 -10.9384,4.27893 -10.9384,12.94227v9.65773h23.76013l-3.22427,22.6h-20.53587v67.8h37.66667c8.32433,0 15.06667,-6.74233 15.06667,-15.06667v-135.6c0,-8.32433 -6.74987,-15.06667 -15.06667,-15.06667z"></path>
</g>
</svg>, Méta-morphose
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 226 226">
<g fill="#4c8f29">
<path d="M75.31862,22.6c-29.07113,0 -52.71862,23.66938 -52.71862,52.74805v75.33333c0,29.07113 23.66938,52.71862 52.74805,52.71862h75.33333c29.07113,0 52.71862,-23.66938 52.71862,-52.74805v-75.33333c0,-29.07113 -23.66938,-52.71862 -52.74805,-52.71862zM165.73333,52.73333c4.1584,0 7.53333,3.37493 7.53333,7.53333c0,4.1584 -3.37493,7.53333 -7.53333,7.53333c-4.1584,0 -7.53333,-3.37493 -7.53333,-7.53333c0,-4.1584 3.37493,-7.53333 7.53333,-7.53333zM113,67.8c24.9278,0 45.2,20.2722 45.2,45.2c0,24.9278 -20.2722,45.2 -45.2,45.2c-24.9278,0 -45.2,-20.2722 -45.2,-45.2c0,-24.9278 20.2722,-45.2 45.2,-45.2zM113,82.86667c-16.64218,0 -30.13333,13.49115 -30.13333,30.13333c0,16.64218 13.49115,30.13333 30.13333,30.13333c16.64218,0 30.13333,-13.49115 30.13333,-30.13333c0,-16.64218 -13.49115,-30.13333 -30.13333,-30.13333z"></path>
</g>
</svg>
</footer>
</body>
</html>

101
src/main.css
View File

@ -15,6 +15,12 @@ button, .button {
cursor: pointer;
}
.align-right {
text-align: right;
width: 100%;
display: inline-block;
}
h1 {
font-family: Kiona;
font-size: 121px;
@ -73,7 +79,16 @@ h1,h2 {
color: #222;
}
section:not(#modale){
section:not(#galerie) h2 {
margin-left: -5%;
margin-right: -5%;
}
section:not(#modale) {
margin: 5% 5% 0;
}
section#galerie{
margin: 5em 10px 0;
}
@ -121,11 +136,25 @@ header #download {
width: 49%;
}
#charte > div{
#charte > div {
text-align: justify;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1em;
display: flex;
}
#charte div span {
display: inline-block;
margin: 0.15em 0;
}
#charte div span::first-letter {
font-size: 1.3em;
}
#charte img {
max-height: 100%;
max-width: 80%;
object-fit: contain;
margin-left: 10%;
}
.profil:nth-child(2n) {
@ -147,7 +176,6 @@ header #download {
.profil img {
max-height: 100%;
object-fit: cover;
margin-left: -20%;
}
.img {
@ -352,12 +380,71 @@ ul,ol,li {
footer {
background-color: #c6d9bdc4;
padding: 5px 0;
padding: 10px 0;
width: 100%;
position: absolute;
left: 0;
font-size: 1.1em;
}
footer {
background-color: #111111C5;
color: white;
}
.footer {
display: flex;
align-items: first baseline;
justify-content: center;
}
.rs {
text-align: center;
align-items: center;
display: flex;
justify-content: center;
}
.h1 {
font-family: Kiona;
font-size: 2.35em;
letter-spacing: -0.05em;
line-height: 0.7em;
margin: 10px 15px 5px 0px;
text-align: left;
display: flex;
width: 5.915em;
flex-wrap: wrap;
font-weight: normal;
}
.h1 > div::first-letter {
font-size: 1.7em;
}
.h4 {
font-style: italic;
font-size: 0.75em;
display: block;
margin: 0;
padding-left: 0px;
font-family: "GoldenRatio";
}
.date {
font-size: 0.6em;
text-align: center;
}
#bandeau {
background-color: red;
position: fixed;
top: 0;
left: 0;
width: 100%;
text-align: center;
font-weight: bold;
font-size: 1.2em;
padding: 7px 0;
color: #111;
}