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">
<section class="grid1">
<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=""><img src="memoires/memoire_2.png" alt=""><span>Froncer les sourcils</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="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><strong>Froncer les sourcils</strong><br>Olivier Bertrand</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>
</section>
<section class="grid2">

60
style.css
View File

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