Compare commits
2 Commits
03807fa917
...
896508dc39
| Author | SHA1 | Date | |
|---|---|---|---|
| 896508dc39 | |||
| ffd3fe5c1e |
@ -6,4 +6,25 @@ une photo d'accueil qui serait du texte
|
||||
https://colorlib.com/preview/#sun
|
||||
Que la page d'accueil
|
||||
|
||||
lE NOM EN GROS EN HAUT
|
||||
lE NOM EN GROS EN HAUT
|
||||
|
||||
|
||||
|
||||
|
||||
Alors alors :
|
||||
Pour la couleur du fond, un truc blanc qui tire vers le gris sur les côté me parrait une bonne idée pour contourner la page blanche, en s'inspirant du gris qu'on retrouve sur les photos. Un truc un peu en dégradé comme pour le site de jean cloud
|
||||
|
||||
Pour le titre, ne pas hésiter à le mettre en plus gros, et la première lettre en plus gros, voir carrément un retour à la ligne après méta (vous pouvez utiliser le titre du magazine lui même)
|
||||
|
||||
|
||||
La typo du sous titre il faut la changer si possible
|
||||
|
||||
|
||||
Pour les logos en applat de couleur derrière c'est tout à fait le principe que je voulais, mais on peut encore les mettre en plus gros, et je crois qu'ils sont plus fins, plus étirés dans le magazine ( et attention j'ai l'impression qu'ils ne sont pas tout à fait symétrique)
|
||||
Pour les titre du style qui sommes nous etc c'est ça que je veux mais ne pas hésiter à mettre plus gros
|
||||
La galerie c'est tout à fait ça, mais si on peut mettre des gouttières plus fines (espace entre les photos) ça serai tparfait
|
||||
Ecoutez nous parfait
|
||||
Et contactez nous si possible une autre typographie pour les mots "nom, adresse mail etc"
|
||||
|
||||
|
||||
pour une stylisation plus global, n'hésite pas à te faire plaisir avec le bouton télécharger ou les cases "mannequins, écrivains, site internet". J'avais bien aimé le style des petits cercles pour jean coud, donc la franchement hésite pas à styliser
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 119 KiB After Width: | Height: | Size: 96 KiB |
@ -10,8 +10,8 @@
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Métamorphose</h1>
|
||||
<p>Manifeste de mode de seconde main, Manifeste pour la mode de demain.</p>
|
||||
<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>
|
||||
</header>
|
||||
|
||||
@ -128,14 +128,14 @@
|
||||
<h2>Écoutez nous</h2>
|
||||
<div class="content">
|
||||
<div class="audioblock">
|
||||
<h3>Édito 1</h3>
|
||||
<h3>Edito 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>Édito 2</h3>
|
||||
<h3>Edito 2</h3>
|
||||
<audio controls >
|
||||
<source src="audio/edito1.mp3" type="audio/mpeg" />
|
||||
<source src="audio/edito1.ogg" type="audio/ogg" />
|
||||
|
||||
56
src/main.css
56
src/main.css
@ -1,27 +1,40 @@
|
||||
html {
|
||||
background-image: url('./background.png');
|
||||
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: -175px;
|
||||
background-position-y: -330px;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 1300px;
|
||||
margin: auto;
|
||||
font-family: "LiberationSerif";
|
||||
font-family: "Liberation sans";
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: Kiona;
|
||||
font-size: 100px;
|
||||
font-size: 118px;
|
||||
letter-spacing: -5px;
|
||||
line-height: 105px;
|
||||
margin-bottom: 5px;
|
||||
margin-top: calc(1em + 5vh);
|
||||
line-height: 0.7em;
|
||||
margin: calc(0.8em + 5vh) auto 20px;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
width: 5.915em;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
h1 > div::first-letter {
|
||||
font-size: 1.7em;
|
||||
}
|
||||
|
||||
header h4 {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: "Ge Body";
|
||||
margin-bottom: 1.5em;
|
||||
font-size: 2.2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h3, h4 {
|
||||
@ -48,9 +61,9 @@ header {
|
||||
header .button {
|
||||
display: inline-block;
|
||||
border-radius: 100%;
|
||||
width: 4.9em;
|
||||
height: 4.9em;
|
||||
line-height: 4.75em;
|
||||
width: 7em;
|
||||
height: 7em;
|
||||
line-height: 6.75em;
|
||||
text-align: center;
|
||||
font-size: 1.25em;
|
||||
padding: 0.5em;
|
||||
@ -60,8 +73,8 @@ header .button {
|
||||
}
|
||||
|
||||
header #download {
|
||||
margin-top: calc(40vh - 189px);
|
||||
margin-bottom: calc(55vh - 189px);
|
||||
margin-top: 12vh;
|
||||
margin-bottom: calc(83vh - 531px);
|
||||
}
|
||||
|
||||
.profil {
|
||||
@ -98,7 +111,7 @@ header #download {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(11, 1fr);
|
||||
grid-template-rows: repeat(9, 9%);
|
||||
grid-gap: 1rem;
|
||||
grid-gap: 0.4rem;
|
||||
width: 1250px;
|
||||
height: 670px;
|
||||
margin: auto;
|
||||
@ -155,10 +168,11 @@ header #download {
|
||||
padding: 0 0 1.1rem;
|
||||
}
|
||||
|
||||
#contact label {
|
||||
#contact label, #contact input[type="submit"]{
|
||||
font-family: "GoldenRatio";
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
line-height: 1.5em;
|
||||
letter-spacing: 0.075em;
|
||||
text-transform: uppercase;
|
||||
margin: 0 0 0.75rem 0;
|
||||
@ -174,6 +188,16 @@ header #download {
|
||||
line-height: 2.8em;
|
||||
}
|
||||
|
||||
#contact input[type="submit"], #contact .button {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
padding: 0.75em 1.5em 0.6em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#contact textarea {
|
||||
padding: 0.75rem 0.55rem;
|
||||
line-height: 1.1em;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user