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

wireframe tags

Browse Source
This commit is contained in:
Pontoporeia
2022-12-22 10:15:36 +01:00
parent 22d67c0821
commit d6bc3659a5
2 changed files with 127 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
index.html
View File

@@ -35,19 +35,50 @@
<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=""><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>
<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>
<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">
<ul id="list">
<div class="list">
<ul id="memoire">
<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>
<hr>
<ul id="tag">
<li><a href="">edition</a></li>
<li><a href="">web2print</a></li>
<li><a href="">jardin</a></li>
<li><a href="">architecture</a></li>
<li><a href="">lgbtquia+</a></li>
</ul>
<hr>
<ul id="orientation">
<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>
<hr>
<ul id="ap">
<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>
</div>
</section>
</div>

140
style.css
View File

@@ -5,16 +5,25 @@
body {
background-color: white;
margin: 0;
}
/* audio,
/* RESET */
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
} */
}
ul,
li {
list-style-type: none;
margin: 0;
padding: 0;
}
/* PARAMÈTRE DE BASE DE BOUTTON */
.button {
@@ -59,7 +68,6 @@
position: inherit;
width: 100vw;
left: 0;
/* background-color: rgb(255, 255, 255, 0.75%); */
background: linear-gradient(0deg, rgba(2, 0, 36, 0) 0%, rgba(255, 255, 255, 1) 25%);
}
@@ -99,7 +107,8 @@
font-size: 1rem;
}
form input {
form input,
select {
position: relative;
border-color: #c104fc;
border-radius: 5px;
@@ -108,20 +117,13 @@
padding: 0.5rem;
width: auto;
overflow: visible;
}
form select {
position: relative;
border-color: #c104fc;
border-radius: 5px;
border-style: solid;
margin: 1rem;
padding: 0.5rem;
outline: none;
background-color: white;
}
select {
background: orange;
form input:focus,
select:focus {
border: 3px solid rgba(77, 168, 112, 1);
}
#enter input {
@@ -130,6 +132,17 @@
font-weight: bold;
padding: 1.2rem;
border-radius: 16px;
background-color: none;
color: rgb(193, 4, 252);
border: 1px solid rgb(193, 4, 252);
text-align: center;
text-decoration: none;
cursor: pointer;
}
#enter input:hover {
background-color: rgb(193, 4, 252);
color: white;
}
form .boutton {
@@ -155,56 +168,51 @@
/* GRILLE HOMEPAGE */
.grid-section {
position: relative;
display: grid;
/* margin-top:20vh; */
margin-right: 1vw;
grid-template-columns: repeat(5, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.grid-section {
top: 15vh;
padding: 1rem;
/* display: block; */
}
ul,
li {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
display: grid;
/* grid-auto-rows: minmax(100px, auto); */
}
/* MOSAIC MEMOIRE */
.grid1 {
grid-column: 1 / 5;
grid-row: 1 / 12;
position: relative;
grid-column: 1 / 6;
width: 100%;
margin: none;
padding: 1rem;
left: 0;
/* margin-right: 20vw; */
}
#mosaic ul {
-webkit-flex-direction: row;
flex-direction: row;
align-items: flex-start;
flex-wrap: nowrap;
/* default value; can be omitted */
}
#mosaic li {
/* display: flex; */
float: left;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 33.333333333%;
position: relative;
max-width: 23%;
/* position: relative; */
overflow: hidden;
padding: 1rem;
margin: 0.5rem;
}
#mosaic img {
max-width: 100%;
border-radius: 16px;
}
#mosaic a {
@@ -227,31 +235,43 @@
border-radius: 16px;
}
/* LISTE ANNÉE */
/* LISTE ANNÉE, tag, etc */
.grid2 {
grid-column: 5 / 5;
grid-row: 1 / 12;
position: fixed;
position: relative;
display: flex;
grid-column: 6/ 6;
right: 0;
padding: 2rem;
font-size: 0.8rem;
/* overflow: auto; */
justify-items: left;
height: 100vh;
}
.list ul {
margin: 1rem;
height: auto;
width: 100%;
align-items: center;
}
.list li {
/* -webkit-flex-direction: row;
flex-direction: row;
align-self: flex-start;
float: right; */
/* display: block; */
width: fit-content;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 1rem;
}
#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;
.list a {
padding: 0.4rem;
background-color: #c104fc;
color: white;
border-radius: 12px;
@@ -260,8 +280,14 @@
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 {
.list a:hover {
color: rgba(77, 168, 112, 1);
}
.list hr{
color: #c104fc;
width: 50%;
}