From deb0e2084d3509f358a7e379989f688bb2605691 Mon Sep 17 00:00:00 2001
From: GeoffreyPorayko <you@example.com>
Date: Wed, 3 Nov 2021 20:28:27 +0100
Subject: [PATCH] liste
---
css/style.css | 52 +++++++++++++++++++++++++++++++++-
listePage.html | 77 ++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 128 insertions(+), 1 deletion(-)
create mode 100644 listePage.html
diff --git a/css/style.css b/css/style.css
index aca9295..1a5194a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -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 {
diff --git a/listePage.html b/listePage.html
new file mode 100644
index 0000000..65c50cd
--- /dev/null
+++ b/listePage.html
@@ -0,0 +1,77 @@
+<!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>
--
GitLab