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

journée de travail d’Elisa, ça a du caractère maintenant.

Browse Source
This commit is contained in:
Adrian Amaglio 2020-06-07 20:43:21 +02:00
parent 896508dc39
commit cdd47ad36e
3 changed files with 129 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/background.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 96 KiB

After

Width:  |  Height:  |  Size: 214 KiB

83
src/index.html
View File

@ -10,14 +10,24 @@
<body>
<header>
<h1><div>Méta</div><div>morphose</div></h1>
<h4>Manifeste de mode de seconde main, Manifeste pour la mode de demain.</h4>
<a class="button" href="pdf/métamorphose1.pdf" id="download">Télécharger</a>
<h1><div>Méta</div><div>morph<span class="couleur">o</span>se</div></h1>
<h4><span class="couleur">Manifeste de mode de seconde main,</span> Manifeste pour la mode de demain.</h4>
<a class="button" href="pdf/métamorphose1.pdf" id="download">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="5 1 170 170">
<g>
<path d="M102.34,10.75l37.41,37.41v113.09h-116.1v-150.5h78.69M103.2,8.6h-81.7v154.8h120.4v-116.1l-38.7,-38.7z"></path>
<path d="M102.125,48.375v-38.7h0.645l38.055,38.055v0.645z" opacity="0.7"></path>
<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>
</a>
</header>
<section id="charte">
<h2>Le manifeste</h2>
<p>
<div>
<div>
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.
Aut repudiandae molestiae nam ipsum maxime exercitationem. Numquam hic esse nisi. Maiores sit magni alias reiciendis. Maiores tenetur omnis assumenda aut blanditiis autem et et. Voluptatem nulla qui non quas.
@ -27,7 +37,8 @@
Molestiae facere rerum consequatur nisi provident expedita sit neque. Quia aliquam sint unde corrupti sed maiores impedit laboriosam. Quo suscipit perferendis est voluptatem quisquam aut beatae eos. Officiis recusandae harum non nihil.
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.
</div>
<div>
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.
Aut repudiandae molestiae nam ipsum maxime exercitationem. Numquam hic esse nisi. Maiores sit magni alias reiciendis. Maiores tenetur omnis assumenda aut blanditiis autem et et. Voluptatem nulla qui non quas.
@ -37,8 +48,8 @@
Molestiae facere rerum consequatur nisi provident expedita sit neque. Quia aliquam sint unde corrupti sed maiores impedit laboriosam. Quo suscipit perferendis est voluptatem quisquam aut beatae eos. Officiis recusandae harum non nihil.
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>
</div>
</div>
</section>
<section id="qui">
@ -93,33 +104,35 @@
<section id="galerie">
<h2>Galerie</h2>
<div class="content">
<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 class="wrapper">
<div class="content">
<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>
</div>
</section>
@ -164,7 +177,7 @@
<label for="objet">Message&nbsp;:</label>
<textarea name="message" rows="8" required="required"></textarea>
</div>
<input type="submit" />
<input type="submit" class="couleur" value="Envoyer" />
</form>
</section>

104
src/main.css
View File

@ -1,5 +1,4 @@
html {
background-image: url('./background.png'), linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(255,255,255,0) 15%, rgba(255,255,255,0) 85%, rgba(0,0,0,0.2) 100%);
background-image: linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(255,255,255,0) 15%, rgba(255,255,255,0) 85%, rgba(0,0,0,0.2) 100%), url('./background.png');
background-size: contain;
background-position-y: -330px;
@ -9,11 +8,12 @@ body {
max-width: 1300px;
margin: auto;
font-family: "Liberation sans";
color: #444;
}
h1 {
font-family: Kiona;
font-size: 118px;
font-size: 121px;
letter-spacing: -5px;
line-height: 0.7em;
margin: calc(0.8em + 5vh) auto 20px;
@ -21,6 +21,7 @@ h1 {
display: flex;
width: 5.915em;
flex-wrap: wrap;
font-weight: normal;
}
h1 > div::first-letter {
@ -28,13 +29,23 @@ h1 > div::first-letter {
}
header h4 {
font-style: italic;
font-style: italic;
font-size: 1.07em;
display: block;
margin: 0;
padding-left: 0px;
}
h2 {
font-family: "Ge Body";
font-size: 2.2em;
margin-bottom: 1em;
font-weight: normal;
font-size: 2.75em;
margin: 0.8em -8px 1em;
}
h2::first-letter {
font-size: 1.5em;
letter-spacing: 1px;
}
h3, h4 {
@ -50,26 +61,50 @@ h4 {
font-size: 1.1em;
}
h1,h2 {
color: #111;
}
#qui h3, #qui h4, #contact label{
color: #222;
}
section {
margin-top: 5em;
margin: 5em 10px 0;
}
header {
text-align: center;
}
header svg, header .button, .couleur, h2::first-letter{
fill: #4C8F29;
color: #4C8F29;
}
header svg {
width: 50px;
height: 50px;
}
header .button {
display: inline-block;
border-radius: 100%;
width: 7em;
height: 7em;
line-height: 6.75em;
border-radius: 20px;
text-align: center;
font-size: 1.25em;
padding: 0.5em;
background-color: #a7e3f0;
border: 2px solid currentColor;
text-decoration: none;
color: black;
font-family: "Kiona";
font-weight: bold;
}
header .button span {
vertical-align: bottom;
line-height: 50px;
height: 50px;
display: inline-block;
font-size: 1.1em;
}
header #download {
@ -82,6 +117,13 @@ header #download {
width: 49%;
}
#charte > div{
text-align: justify;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1em;
}
.profil:nth-child(2n) {
flex-direction: row-reverse;
text-align: right;
@ -106,18 +148,24 @@ header #download {
text-align: center;
}
#galerie .content{
display: grid;
grid-template-columns: repeat(11, 1fr);
grid-template-rows: repeat(9, 9%);
grid-gap: 0.4rem;
width: 1250px;
height: 670px;
#galerie .wrapper {
width: 100%;
padding-bottom: 54.25%;
position: relative;
max-width: 1250px;
margin: auto;
}
#galerie img{
#galerie .content {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
display: grid;
grid-template-columns: repeat(11, 1fr);
grid-template-rows: repeat(9, 1fr);
grid-gap: 0.4rem;
}
#galerie img {
width: 100%;
height: 100%;
object-fit: cover;
@ -183,14 +231,20 @@ header #download {
outline: 0;
padding: 0 0.55rem;
text-decoration: none;
width: 100%;
width: calc(100% - 1.16rem);
color: inherit;
line-height: 2.8em;
border: 1px solid #DDD;
border-radius: 6px;
}
#contact input[type="text"]:focus, #contact input[type="password"]:focus, #contact input[type="email"]:focus, #contact select:focus, #contact textarea:focus {
box-shadow: 0px 0px 4px 1px #61c030;
border-color: transparent;
}
#contact input[type="submit"], #contact .button {
background-color: transparent;
color: inherit;
border: 2px solid currentColor;
border-radius: 0;
cursor: pointer;
@ -207,4 +261,8 @@ ul,ol,li {
list-style: none;
padding: 0;
margin: 0;
}
.a {
color: #005700;
}