ajout de la grid mémoire, avec side bar et hover
This commit is contained in:
Pontoporeia
11
apropos.html
11
apropos.html
@@ -14,17 +14,16 @@
|
||||
</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="boutton boutton1"></input>
|
||||
<a href="formulaire.html" button class="boutton boutton1">Partager un mémoire</a>
|
||||
<a href="apropos.html" button class="boutton boutton1">À propos</a>
|
||||
<a href="contact.html" button class="boutton boutton1">Contact</a>
|
||||
<a href="licences.html" button class="boutton boutton1">Licences</a>
|
||||
<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>
|
||||
|
||||
11
contact.html
11
contact.html
@@ -15,17 +15,16 @@
|
||||
|
||||
|
||||
<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="boutton boutton1"></input>
|
||||
<a href="formulaire.html" button class="boutton boutton1">Partager un mémoire</a>
|
||||
<a href="apropos.html" button class="boutton boutton1">À propos</a>
|
||||
<a href="contact.html" button class="boutton boutton1">Contact</a>
|
||||
<a href="licences.html" button class="boutton boutton1">Licences</a>
|
||||
<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>
|
||||
|
||||
34
index.html
34
index.html
@@ -21,26 +21,34 @@
|
||||
<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="boutton boutton1"></input>
|
||||
<a href="formulaire.html" button class="boutton boutton1">Partager un mémoire</a>
|
||||
<a href="apropos.html" button class="boutton boutton1">À propos</a>
|
||||
<a href="contact.html" button class="boutton boutton1">Contact</a>
|
||||
<a href="licences.html" button class="boutton boutton1">Licences</a>
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
|
||||
</body>
|
||||
|
||||
46
item.html
Normal file
46
item.html
Normal 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>
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
<head>
|
||||
|
||||
<link href="reset.css" >
|
||||
<link href="reset.css">
|
||||
<link href="style.css" rel="stylesheet">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="author" content="">
|
||||
@@ -13,35 +13,36 @@
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<!-- 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="boutton boutton1"></input>
|
||||
<a href="formulaire.html" button class="boutton boutton1">Partager un mémoire</a>
|
||||
<a href="apropos.html" button class="boutton boutton1">À propos</a>
|
||||
<a href="contact.html" button class="boutton boutton1">Contact</a>
|
||||
<a href="licences.html" button class="boutton boutton1">Licences</a>
|
||||
<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>
|
||||
</header>
|
||||
|
||||
<!-- CONTENU PAGE -->
|
||||
<div id="page_content">
|
||||
<!-- CONTENU PAGE -->
|
||||
<div id="page_content">
|
||||
|
||||
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>
|
||||
|
||||
<!-- 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>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
36
memoires/m1.html
Normal file
36
memoires/m1.html
Normal 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
BIN
memoires/memoire_1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
BIN
memoires/memoire_2.pdf
Normal file
BIN
memoires/memoire_2.pdf
Normal file
Binary file not shown.
BIN
memoires/memoire_2.png
Normal file
BIN
memoires/memoire_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 524 KiB |
BIN
memoires/memoire_3.pdf
Normal file
BIN
memoires/memoire_3.pdf
Normal file
Binary file not shown.
BIN
memoires/memoire_3.png
Normal file
BIN
memoires/memoire_3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
119
style.css
119
style.css
@@ -1,6 +1,6 @@
|
||||
@font-face {
|
||||
font-family: police1;
|
||||
src: url("fonts/Combinedd.otf");
|
||||
src: url("./fonts/Combinedd.otf");
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -89,7 +89,8 @@
|
||||
font-family: police1;
|
||||
font-size: 1rem;
|
||||
}
|
||||
form input{
|
||||
|
||||
form input {
|
||||
position: relative;
|
||||
border-color: #c104fc;
|
||||
border-radius: 5px;
|
||||
@@ -97,10 +98,10 @@
|
||||
margin: 1rem;
|
||||
padding: 0.5rem;
|
||||
width: auto;
|
||||
overflow:visible;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
form select{
|
||||
form select {
|
||||
position: relative;
|
||||
border-color: #c104fc;
|
||||
border-radius: 5px;
|
||||
@@ -110,7 +111,11 @@
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#enter input{
|
||||
select {
|
||||
background: orange;
|
||||
}
|
||||
|
||||
#enter input {
|
||||
font-family: police1;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
@@ -118,26 +123,31 @@
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
form .boutton {
|
||||
position: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* CONTENUS DE LA PAGE */
|
||||
#page_content {
|
||||
position: relative;
|
||||
top: 15vh;
|
||||
max-width: 80ch;
|
||||
max-width: 100ch;
|
||||
padding: 3em 1em;
|
||||
margin: auto;
|
||||
line-height: 1.75;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
input:active {
|
||||
border-color: rgba(77, 168, 112, 1);
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* GRILLE */
|
||||
.grid-section {
|
||||
position: relative;
|
||||
/* display: block; */
|
||||
/* position: fixed; */
|
||||
/* margin: 30%; */
|
||||
}
|
||||
|
||||
.grid-main {
|
||||
display: grid;
|
||||
/* margin-top:20vh; */
|
||||
margin-right: 1vw;
|
||||
@@ -146,19 +156,96 @@
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
}
|
||||
|
||||
.grid-section {
|
||||
top: 15vh;
|
||||
padding: 1rem;
|
||||
/* display: block; */
|
||||
}
|
||||
|
||||
.grid1 {
|
||||
grid-column: 1 / 5;
|
||||
grid-row: 1 / 12;
|
||||
background-color: #c104fc;
|
||||
}
|
||||
|
||||
.grid2 {
|
||||
grid-column: 5 / 5;
|
||||
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;
|
||||
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);
|
||||
}
|
||||
Reference in New Issue
Block a user