PostERG/posterg-front-end
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

finition de la homepage

Browse Source
This commit is contained in:
Pontoporeia
2022-12-21 19:09:02 +01:00
parent c700b06d9c
commit 22d67c0821
2 changed files with 41 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@@ -35,9 +35,9 @@
<div class=" grid-section"> <div class=" grid-section">
<section class="grid1"> <section class="grid1">
<ul id="mosaic"> <ul id="mosaic">
<li class="item"><a href="memoires/m1.html"><img src="memoires/memoire_1.jpg" alt="">Yeah I'm still searchin'<span></span></a></li> <li class="item"><a href="memoires/m1.html"><img src="memoires/memoire_1.jpg" alt=""><span><strong>Yeah I'm still searchin'</strong><br>Meryll Hardt</span></a></li>
<li class="item"><a href=""><img src="memoires/memoire_2.png" alt=""><span>Froncer les sourcils</span></a></li> <li class="item"><a href=""><img src="memoires/memoire_2.png" alt=""><span><strong>Froncer les sourcils</strong><br>Olivier Bertrand</span></a></li>
<li class="item"><a href=""><img src="memoires/memoire_3.png" alt=""><span>Design Spéculatif: La guerre des imaginaires</span></a></li> <li class="item"><a href=""><img src="memoires/memoire_3.png" alt=""><span><strong>Design Spéculatif: La guerre des imaginaires</strong><br>ANTOINE PUEL</span></a></li>
</ul> </ul>
</section> </section>
<section class="grid2"> <section class="grid2">

60
style.css
View File

@@ -7,6 +7,15 @@
background-color: white; background-color: white;
} }
/* audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
} */
/* PARAMÈTRE DE BASE DE BOUTTON */ /* PARAMÈTRE DE BASE DE BOUTTON */
.button { .button {
margin: 0; margin: 0;
@@ -25,7 +34,7 @@
top: 0; top: 0;
left: 0; left: 0;
margin: 0; margin: 0;
padding: 1.2rem; padding: 1rem;
height: auto; height: auto;
width: 100%; width: 100%;
text-decoration: none; text-decoration: none;
@@ -50,8 +59,8 @@
position: inherit; position: inherit;
width: 100vw; width: 100vw;
left: 0; left: 0;
background-color: white; /* background-color: rgb(255, 255, 255, 0.75%); */
background: linear-gradient(0deg, rgba(2, 0, 36, 0) 0%, rgba(255, 255, 255, 1) 40%); background: linear-gradient(0deg, rgba(2, 0, 36, 0) 0%, rgba(255, 255, 255, 1) 25%);
} }
.menu-content { .menu-content {
@@ -68,7 +77,7 @@
border: 1px solid rgb(193, 4, 252); border: 1px solid rgb(193, 4, 252);
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
font-size: 0.8rem; font-size: 1rem;
transition-duration: 0.4s; transition-duration: 0.4s;
cursor: pointer; cursor: pointer;
border-radius: 16px; border-radius: 16px;
@@ -145,7 +154,7 @@
} }
/* GRILLE */ /* GRILLE HOMEPAGE */
.grid-section { .grid-section {
position: relative; position: relative;
display: grid; display: grid;
@@ -162,21 +171,6 @@
/* display: block; */ /* display: block; */
} }
.grid1 {
grid-column: 1 / 5;
grid-row: 1 / 12;
}
.grid2 {
grid-column: 5 / 5;
grid-row: 1 / 12;
position: fixed;
right: 0;
margin: 1rem;
}
ul, ul,
li { li {
list-style-type: none; list-style-type: none;
@@ -184,9 +178,17 @@
padding: 0; padding: 0;
} }
/* MOSAIC MEMOIRE */
.grid1 {
grid-column: 1 / 5;
grid-row: 1 / 12;
}
#mosaic ul { #mosaic ul {
-webkit-flex-direction: row; -webkit-flex-direction: row;
flex-direction: row; flex-direction: row;
align-items: flex-start;
} }
#mosaic li { #mosaic li {
@@ -205,8 +207,7 @@
max-width: 100%; max-width: 100%;
} }
#mosaic span, #mosaic a {
a {
text-decoration: none; text-decoration: none;
outline: none; outline: none;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
@@ -214,6 +215,11 @@
width: auto; width: auto;
} }
#mosaic span {
display: block;
margin: 1rem;
}
#mosaic li:hover { #mosaic li:hover {
color: #c104fc; color: #c104fc;
border-color: #c104fc; border-color: #c104fc;
@@ -221,6 +227,16 @@
border-radius: 16px; border-radius: 16px;
} }
/* LISTE ANNÉE */
.grid2 {
grid-column: 5 / 5;
grid-row: 1 / 12;
position: fixed;
right: 0;
margin: 1rem;
}
#list ul { #list ul {
flex-direction: column; flex-direction: column;
padding: 0 5rem 0 5rem; padding: 0 5rem 0 5rem;