Created
March 28, 2023 17:35
-
-
Save medkhelifi/6ab00864a324bc1446af7c1c0477f707 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <link rel="stylesheet" href="./style.css" /> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;700&display=swap" | |
| rel="stylesheet" | |
| /> | |
| <link | |
| rel="stylesheet" | |
| href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" | |
| integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" | |
| crossorigin="anonymous" | |
| referrerpolicy="no-referrer" | |
| /> | |
| <title>Booki</title> | |
| </head> | |
| <body> | |
| <section class="filter"> | |
| <h3>Filtres</h3> | |
| <div class="filter_icon"> | |
| <button class="money"> | |
| <i class="fa-solid fa-money-bill-wave bill"></i>Économique | |
| </button> | |
| <button class="person"> | |
| <i class="fa-solid fa-person personn"></i>Familial | |
| </button> | |
| <button class="heart"> | |
| <i class="fa-solid fa-heart heartt"></i>Romantique | |
| </button> | |
| <button class="dog"> | |
| <i class="fa-solid fa-dog dogg"></i>Animaux autorisés | |
| </button> | |
| </div> | |
| </section> | |
| </body> | |
| </html> | |
| <style> | |
| /* -----------------------------Réglages généraux----------------------------- */ | |
| * { | |
| box-sizing: border-box; | |
| margin: 0 auto; | |
| scroll-behavior: smooth; | |
| padding: 0; | |
| } | |
| body { | |
| max-width: 1400px; | |
| font-family: Raleway, sans-serif; | |
| background: #ffffff; | |
| margin: 0 auto; | |
| padding-left: 20px; | |
| } | |
| section img { | |
| width: 50px; | |
| height: 50px; | |
| } | |
| main img { | |
| width: 50px; | |
| height: 50px; | |
| } | |
| /* -----------------------------Navbar----------------------------- */ | |
| /* -----------------------------Header----------------------------- */ | |
| /* -----------------------------Filter----------------------------- */ | |
| .filter { | |
| width: 70%; | |
| margin: 0; | |
| display: flex; | |
| justify-content: flex-start; | |
| } | |
| .filter h3 { | |
| margin: 0; | |
| font-weight: 700; | |
| font-size: 18px; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .filter_icon { | |
| display: flex; | |
| margin: 0; | |
| width: 100%; | |
| } | |
| .filter_icon button { | |
| margin: 0; | |
| margin-left: 3%; | |
| background: #ffffff; | |
| border: 2px solid #d9d9d9; | |
| border-radius: 25px; | |
| height: 40px; | |
| align-items: center; | |
| text-align: center; | |
| font-weight: 700; | |
| transition: ease-in-out 0.2s; | |
| } | |
| .filter_icon button:hover { | |
| background-color: #deebff; | |
| cursor: pointer; | |
| } | |
| .filter_icon i { | |
| padding-right: 5px; | |
| color: #0065fc; | |
| font-size: 16px; | |
| padding-right: 10px; | |
| } | |
| .money { | |
| width: 150px; | |
| } | |
| .person { | |
| width: 120px; | |
| } | |
| .heart { | |
| width: 135px; | |
| } | |
| .dog { | |
| width: 180px; | |
| } | |
| /* -----------------------------Infos----------------------------- */ | |
| /* -----------------------------Responsive Tablette----------------------------- */ | |
| @media screen and (max-width: 992px) { | |
| body { | |
| padding-right: 20px; | |
| padding-left: 20px; | |
| } | |
| } | |
| /* -----------------------------Responsive Mobile----------------------------- */ | |
| @media screen and (max-width: 768px) { | |
| body { | |
| max-width: 768px; | |
| min-width: 375px; | |
| display: block; | |
| padding-left: 0; | |
| padding-right: 0; | |
| } | |
| /* -----------------------------Navbar----------------------------- */ | |
| /* -----------------------------Header----------------------------- */ | |
| /* -----------------------------Filtre----------------------------- */ | |
| .filter { | |
| display: block; | |
| width: 100%; | |
| height: 150px; | |
| padding-left: 20px; | |
| padding-right: 20px; | |
| align-content: baseline; | |
| } | |
| .filter h3 { | |
| margin-bottom: 15px; | |
| margin-left: 18px; | |
| } | |
| .filter button { | |
| width: 45%; | |
| height: 50px; | |
| font-size: 11px; | |
| padding-left: 10px; | |
| font-weight: 700; | |
| justify-content: left; | |
| display: flex; | |
| } | |
| .filter_icon { | |
| flex-wrap: wrap; | |
| gap: 11px; | |
| text-align: center; | |
| padding-right: 3px; | |
| } | |
| .filter_icon i { | |
| margin: 0; | |
| text-align: center; | |
| } | |
| .money i { | |
| width: 21px; | |
| height: 14.78px; | |
| font-size: 16px; | |
| } | |
| .person i { | |
| width: 20.44px; | |
| font-size: 20px; | |
| } | |
| .heart i { | |
| font-size: 18px; | |
| padding-right: 5px; | |
| } | |
| .dog i { | |
| font-size: 19px; | |
| padding-right: 5px; | |
| } | |
| /* -----------------------------Info----------------------------- */ | |
| } | |
| </style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment