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

ajout de la grid mémoire, avec side bar et hover

Browse Source
This commit is contained in:
Pontoporeia
2022-12-21 18:23:26 +01:00
parent 94630ebef4
commit c700b06d9c
12 changed files with 258 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apropos.html
View File

@@ -14,17 +14,16 @@
</head> </head>
<body> <body>
<!-- ENTÊTE --> <!-- ENTÊTE -->
<header> <header>
<a href="index.html">Mémoire post-ERG / A life after ERG</a> <a href="index.html">Mémoire post-ERG / A life after ERG</a>
<div class="menu"> <div class="menu">
<div class="menu-content"> <div class="menu-content">
<input type="search" name="search" placeholder="Recherche..." button class="boutton boutton1"></input> <input type="search" name="search" placeholder="Recherche..." button class="button"></input>
<a href="formulaire.html" button class="boutton boutton1">Partager un mémoire</a> <a href="formulaire.html" button class="button">Partager un mémoire</a>
<a href="apropos.html" button class="boutton boutton1">À propos</a> <a href="apropos.html" button class="button">À propos</a>
<a href="contact.html" button class="boutton boutton1">Contact</a> <a href="contact.html" button class="button">Contact</a>
<a href="licences.html" button class="boutton boutton1">Licences</a> <a href="licences.html" button class="button">Licences</a>
</div> </div>
</div> </div>
</header> </header>

11
contact.html
View File

@@ -15,17 +15,16 @@
<body> <body>
<!-- ENTÊTE --> <!-- ENTÊTE -->
<header> <header>
<a href="index.html">Mémoire post-ERG / A life after ERG</a> <a href="index.html">Mémoire post-ERG / A life after ERG</a>
<div class="menu"> <div class="menu">
<div class="menu-content"> <div class="menu-content">
<input type="search" name="search" placeholder="Recherche..." button class="boutton boutton1"></input> <input type="search" name="search" placeholder="Recherche..." button class="button"></input>
<a href="formulaire.html" button class="boutton boutton1">Partager un mémoire</a> <a href="formulaire.html" button class="button">Partager un mémoire</a>
<a href="apropos.html" button class="boutton boutton1">À propos</a> <a href="apropos.html" button class="button">À propos</a>
<a href="contact.html" button class="boutton boutton1">Contact</a> <a href="contact.html" button class="button">Contact</a>
<a href="licences.html" button class="boutton boutton1">Licences</a> <a href="licences.html" button class="button">Licences</a>
</div> </div>
</div> </div>
</header> </header>

34
index.html
View File

@@ -21,26 +21,34 @@
<a href="index.html">Mémoire post-ERG / A life after ERG</a> <a href="index.html">Mémoire post-ERG / A life after ERG</a>
<div class="menu"> <div class="menu">
<div class="menu-content"> <div class="menu-content">
<input type="search" name="search" placeholder="Recherche..." button class="boutton boutton1"></input> <input type="search" name="search" placeholder="Recherche..." button class="button"></input>
<a href="formulaire.html" button class="boutton boutton1">Partager un mémoire</a> <a href="formulaire.html" button class="button">Partager un mémoire</a>
<a href="apropos.html" button class="boutton boutton1">À propos</a> <a href="apropos.html" button class="button">À propos</a>
<a href="contact.html" button class="boutton boutton1">Contact</a> <a href="contact.html" button class="button">Contact</a>
<a href="licences.html" button class="boutton boutton1">Licences</a> <a href="licences.html" button class="button">Licences</a>
</div> </div>
</div> </div>
</header> </header>
<!-- CONTENU PAGE -->
<div id="page_content">
<!-- GRILLE --> <!-- GRILLE -->
<div class=" grid-section"> <div class=" grid-section">
<div class="grid-main"> <section class="grid1">
<div class="grid1">Colonne 1</div> <ul id="mosaic">
<div class="grid2">Colonne 2</div> <li class="item"><a href="memoires/m1.html"><img src="memoires/memoire_1.jpg" alt="">Yeah I'm still searchin'<span></span></a></li>
</div> <li class="item"><a href=""><img src="memoires/memoire_2.png" alt=""><span>Froncer les sourcils</span></a></li>
</div> <li class="item"><a href=""><img src="memoires/memoire_3.png" alt=""><span>Design Spéculatif: La guerre des imaginaires</span></a></li>
</ul>
</section>
<section class="grid2">
<ul id="list">
<li><a href="">2021</a></li>
<li><a href="">2020</a></li>
<li><a href="">2019</a></li>
<li><a href="">2018</a></li>
<li><a href="">2017</a></li>
</ul>
</section>
</div> </div>
</body> </body>

46
item.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Post-ERG</title>
</head>
<body>
<!-- ENTÊTE -->
<header>
<a href="index.html">Mémoire post-ERG / A life after ERG</a>
<div class="menu">
<div class="menu-content">
<input type="search" name="search" placeholder="Recherche..." button class="button"></input>
<a href="formulaire.html" button class="button">Partager un mémoire</a>
<a href="apropos.html" button class="button">À propos</a>
<a href="contact.html" button class="button">Contact</a>
<a href="licences.html" button class="button">Licences</a>
</div>
</div>
</header>
<!-- CONTENU PAGE -->
<div id="page_content">
<!-- GRILLE -->
<div class=" grid-section">
<div class="grid-main">
<div class="grid1">Colonne 1</div>
<div class="grid2">Colonne 2</div>
</div>
</div>
</div>
</body>
</html>

27
licences.html
View File

@@ -13,18 +13,18 @@
</head> </head>
<body>
<header>
<!-- ENTÊTE --> <!-- ENTÊTE -->
<header> <header>
<a href="index.html">Mémoire post-ERG / A life after ERG</a> <a href="index.html">Mémoire post-ERG / A life after ERG</a>
<div class="menu"> <div class="menu">
<div class="menu-content"> <div class="menu-content">
<input type="search" name="search" placeholder="Recherche..." button class="boutton boutton1"></input> <input type="search" name="search" placeholder="Recherche..." button class="button"></input>
<a href="formulaire.html" button class="boutton boutton1">Partager un mémoire</a> <a href="formulaire.html" button class="button">Partager un mémoire</a>
<a href="apropos.html" button class="boutton boutton1">À propos</a> <a href="apropos.html" button class="button">À propos</a>
<a href="contact.html" button class="boutton boutton1">Contact</a> <a href="contact.html" button class="button">Contact</a>
<a href="licences.html" button class="boutton boutton1">Licences</a> <a href="licences.html" button class="button">Licences</a>
</div> </div>
</div> </div>
</header> </header>
@@ -32,14 +32,15 @@
<!-- CONTENU PAGE --> <!-- CONTENU PAGE -->
<div id="page_content"> <div id="page_content">
<!-- GRILLE --> Ce travail éditorial, concernant les licences de 2021-2022 est né d'une recherche menée par : <br> <br>
Defez Aurélie <br>
Gervreau-Mercier Théophile <br>
Debaene Justine <br>
Troadec Marie <br>
Marly Olivia <br>
Goldberg Jacquemain Elodie <br>
<div class="grid-section">
<div class="grid-main">
<div class="grid1">Colonne 1</div>
<div class="grid2">Colonne 2</div>
</div>
</div>
</div> </div>
</body> </body>

36
memoires/m1.html Normal file
View File

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<link href="reset.css">
<link href="../style.css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Post-ERG</title>
</head>
<body>
<!-- ENTÊTE -->
<header>
<a href="../index.html">Mémoire post-ERG / A life after ERG</a>
<div class="menu">
<div class="menu-content">
<input type="search" name="search" placeholder="Recherche..." button class="button"></input>
<a href="formulaire.html" button class="button">Partager un mémoire</a>
<a href="apropos.html" button class="button">À propos</a>
<a href="contact.html" button class="button">Contact</a>
<a href="licences.html" button class="button">Licences</a>
</div>
</div>
</header>
</body>
</html>

BIN
memoires/memoire_1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

BIN
memoires/memoire_2.pdf Normal file
View File

Binary file not shown.

BIN
memoires/memoire_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 524 KiB

BIN
memoires/memoire_3.pdf Normal file
View File

Binary file not shown.

BIN
memoires/memoire_3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

111
style.css
View File

@@ -1,6 +1,6 @@
@font-face { @font-face {
font-family: police1; font-family: police1;
src: url("fonts/Combinedd.otf"); src: url("./fonts/Combinedd.otf");
} }
body { body {
@@ -89,6 +89,7 @@
font-family: police1; font-family: police1;
font-size: 1rem; font-size: 1rem;
} }
form input { form input {
position: relative; position: relative;
border-color: #c104fc; border-color: #c104fc;
@@ -110,6 +111,10 @@
background-color: white; background-color: white;
} }
select {
background: orange;
}
#enter input { #enter input {
font-family: police1; font-family: police1;
font-size: 1rem; font-size: 1rem;
@@ -118,26 +123,31 @@
border-radius: 16px; border-radius: 16px;
} }
form .boutton {
position: inherit;
margin: 0;
}
/* CONTENUS DE LA PAGE */ /* CONTENUS DE LA PAGE */
#page_content { #page_content {
position: relative; position: relative;
top: 15vh; top: 15vh;
max-width: 80ch; max-width: 100ch;
padding: 3em 1em; padding: 3em 1em;
margin: auto; margin: auto;
line-height: 1.75; line-height: 1.75;
font-size: 1.25em; font-size: 1.25em;
} }
input:active {
border-color: rgba(77, 168, 112, 1);
}
/* GRILLE */ /* GRILLE */
.grid-section { .grid-section {
position: relative; position: relative;
/* display: block; */
/* position: fixed; */
/* margin: 30%; */
}
.grid-main {
display: grid; display: grid;
/* margin-top:20vh; */ /* margin-top:20vh; */
margin-right: 1vw; margin-right: 1vw;
@@ -146,19 +156,96 @@
grid-auto-rows: minmax(100px, auto); grid-auto-rows: minmax(100px, auto);
} }
.grid-section {
top: 15vh;
padding: 1rem;
/* display: block; */
}
.grid1 { .grid1 {
grid-column: 1 / 5; grid-column: 1 / 5;
grid-row: 1 / 12; grid-row: 1 / 12;
background-color: #c104fc;
} }
.grid2 { .grid2 {
grid-column: 5 / 5; grid-column: 5 / 5;
grid-row: 1 / 12; grid-row: 1 / 12;
background-color: #4da870; position: fixed;
right: 0;
margin: 1rem;
} }
form .boutton {
position: inherit;
ul,
li {
list-style-type: none;
margin: 0; margin: 0;
padding: 0;
}
#mosaic ul {
-webkit-flex-direction: row;
flex-direction: row;
}
#mosaic li {
float: left;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 33.333333333%;
position: relative;
overflow: hidden;
padding: 1rem;
}
#mosaic img {
max-width: 100%;
}
#mosaic span,
a {
text-decoration: none;
outline: none;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: inherit;
width: auto;
}
#mosaic li:hover {
color: #c104fc;
border-color: #c104fc;
border-style: solid;
border-radius: 16px;
}
#list ul {
flex-direction: column;
padding: 0 5rem 0 5rem;
width: 10vw;
}
#list a {
/* -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; */
/* float: left; */
display: block;
width: fit-content;
padding: 0.3rem;
background-color: #c104fc;
color: white;
border-radius: 12px;
margin: 1rem;
outline: none;
text-decoration: none;
font-weight: bold;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
#list a:hover {
color: rgba(77, 168, 112, 1);
} }