Skip to content
Snippets Groups Projects
Commit deb0e208 authored by GeoffreyPorayko's avatar GeoffreyPorayko
Browse files

liste

parent e441e970
Branches
No related tags found
No related merge requests found
......@@ -40,7 +40,8 @@
body {
font-family: Montserrat, sans-serif;
overflow-x: hidden;
background: radial-gradient(white, rgb(184 184 184 / 70%));
background: linear-gradient(white, rgb(184 184 184 / 70%));
height: 100vh;
}
/* Chrome, Safari, Edge, Opera */
......@@ -433,6 +434,55 @@ html body .content #list-toggle:checked + label::after {
border: 1.5px solid var(--first-color);
}
/* table list */
.list{
display: grid;
justify-content: center;
}
.titreListe{
text-align: center;
display:table-cell;
vertical-align: middle;
margin: 0 0 0 0;
background-color: white;
height: 10vh;
width: 100vw;
box-shadow: 3px 2px 3px 1px rgb(0 0 0 / 20%);
}
.page{
display: inline-flex;
justify-content:flex-end;
}
.page i{
color: black;
}
.page i:hover{
color: grey;
}
table{
width: 80vw;
margin-top: 6%;
border-collapse: collapse;
}
table tr:nth-child(2n){
background: lightgrey;
}
td img{
height: 50px;
}
td{
border: none;
}
/* ~~~~~~~~~~~~~~~~~~~~ Media Query starts ~~~~~~~~~~~~~~~~~~~~~ */
@media (max-width: 634px) {
a:hover {
......
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<script src="./js/main.js" defer></script>
<title></title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Produits</a></li>
<li><a href="#">Producteurs</a></li>
<li><a href="#">Panier</a></li>
</ul>
<label class="logo">LeHangar</label>
</nav>
</header>
<h1 class="titreListe">Liste des producteurs</h1>
<div class="list">
<table class="border">
<tr>
<td><img src="https://www.villa-thermae.fr/wp-content/uploads/2017/04/profile-icon-9.png" alt=""></td>
<td>Jean-luc Dupont</td>
<td>description</td>
<td><a href="#">mail</a></td>
<td><a href="#">à propos</a></td>
</tr>
<tr>
<td><img src="https://www.villa-thermae.fr/wp-content/uploads/2017/04/profile-icon-9.png" alt=""></td>
<td>Jean-luc Dupont</td>
<td>description</td>
<td><a href="#">mail</a></td>
<td><a href="#">à propos</a></td>
</tr><tr>
<td><img src="https://www.villa-thermae.fr/wp-content/uploads/2017/04/profile-icon-9.png" alt=""></td>
<td>Jean-luc Dupont</td>
<td>description</td>
<td><a href="#">mail</a></td>
<td><a href="#">à propos</a></td>
</tr><tr>
<td><img src="https://www.villa-thermae.fr/wp-content/uploads/2017/04/profile-icon-9.png" alt=""></td>
<td>Jean-luc Dupont</td>
<td>description</td>
<td><a href="#">mail</a></td>
<td><a href="#">à propos</a></td>
</tr><tr>
<td><img src="https://www.villa-thermae.fr/wp-content/uploads/2017/04/profile-icon-9.png" alt=""></td>
<td>Jean-luc Dupont</td>
<td>description</td>
<td><a href="#">mail</a></td>
<td><a href="#">à propos</a></td>
</tr>
<tr>
<td><img src="https://www.villa-thermae.fr/wp-content/uploads/2017/04/profile-icon-9.png" alt=""></td>
<td>Jean-luc Dupont</td>
<td>description</td>
<td><a href="#">mail</a></td>
<td><a href="#">à propos</a></td>
</tr>
<tr>
<td><img src="https://www.villa-thermae.fr/wp-content/uploads/2017/04/profile-icon-9.png" alt=""></td>
<td>Jean-luc Dupont</td>
<td>description</td>
<td><a href="#">mail</a></td>
<td><a href="#">à propos</a></td>
</tr>
</table>
<div class="page mt-2 mr-2">
<a href="#"><i class="fas fa-arrow-left mr-2"></i></a><p>page 1</p><a href="#"><i class="fas fa-arrow-right ml-2"></i></a>
</div>
</div>
</body>
</html>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment