modif card resto search bar
This commit is contained in:
Your Name
parent
77131ede13
commit
56d663bb7f
|
|
@ -1,37 +1,58 @@
|
|||
<div class="container position-relative shadow p-0 mb-5 bg-body rounded rounded m-5 rounded-top " style="width: 18rem;" >
|
||||
<div class="container position-relative shadow p-0 mb-5 bg-body rounded rounded m-5 rounded-top " style="width: 19rem;" >
|
||||
<img class="card-img-top " src="assets/ImagesRestos/photo.jpg" alt="Card image cap">
|
||||
<div class="rond position-absolute">
|
||||
<i class="heart far fa-heart"></i>
|
||||
</div>
|
||||
<div class="card-body rounded-bottom">
|
||||
<h3 class="titre-resto d-flex justify-content-center d-flex align-items-center" style="font-size: 24px;">NOM RESTAURANT</h3>
|
||||
|
||||
<div class="accordion" id="accordionExample">
|
||||
|
||||
<h2 class="accordion-header pt-1" id="headingOne">
|
||||
<button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
<button class="btn accordion-button collapsed ps-5 pe-5 " type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
PLUS D'INFOS
|
||||
</button>
|
||||
</h2>
|
||||
|
||||
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
|
||||
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
|
||||
<div class=" body accordion-body">
|
||||
<strong>This is the first item's accordion body.</strong>
|
||||
<div class="star-icon d-flex justify-content-flex-start d-flex align-items-center">
|
||||
<ul class="avis-star d-flex flex-row ps-0 pt-3 pe-0">
|
||||
<div class="star-icon d-flex justify-content-flex-start d-flex align-items-center pt-2 ">
|
||||
<ul class="avis-star d-flex flex-row ps-1 pt-3 pe-0 pb-0 mb-0 ">
|
||||
<li class="star pe-2"><i class="bi bi-star-fill"></i></li>
|
||||
<li class="star pe-2"><i class="bi bi-star-fill"></i></li>
|
||||
<li class="star pe-2"><i class="bi bi-star-fill"></i></li>
|
||||
<li class="star pe-2"><i class="bi bi-star-fill"></i></li>
|
||||
<li class="star"><i class="bi bi-star-fill"></i></li>
|
||||
</ul>
|
||||
<span class="ps-3"style="font-size: 1.2em; color:#545454" >4/5</span>
|
||||
|
||||
<span class="ps-3 mt-3 "style="font-size: 1.1em; color:#545454" >5/5</span>
|
||||
</div>
|
||||
<div class="infos ps-1 pt-2"style="color:#545454">
|
||||
<span class="categorie pe-4"style="font-style: italic;">Kebab</span>
|
||||
<i class="fas fa-walking ps-2 pe-1"style="color:#a8a8a8"></i><span class="categorie pe-4"style="font-weight: bold;">550m</span>
|
||||
<i class="fas fa-euro-sign ps-2 pe-1"style="color:#a8a8a8"></i><span class="prix"style="font-weight: bold;">5-10€</span>
|
||||
</div>
|
||||
<div class="trait-rouge pt-3"></div>
|
||||
<p class="description pt-3 ps-1 pe-1 text-justify d-block" style="font-size:0.9em; color:#545454"><span class="description pe-1"style="font-style: italic;font-weight: bold;">Descriptif :</span> c’est le faux texte standard de l'imprimerie depuis
|
||||
les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour
|
||||
réaliser un livre spécimen de polices de texte.</p>
|
||||
<div class="trait-rouge pt-2 pb-0"></div>
|
||||
<div class="critere ps-1 pt-3">
|
||||
<span class="sur-place pe-1" style="color:#545454">Sur place :</span><i class="fas fa-check-square" style="color:#4ECB71"></i>
|
||||
<span class="a-emporter ps-3 pe-1" style="color:#545454">A emporter :</span><i class="fas fa-check-square" style="color:#4ECB71"></i>
|
||||
</div>
|
||||
<div class="trait-rouge pt-3"></div>
|
||||
<div class="critere d-flex justify-content-center ps-1 pt-3 pb-3">
|
||||
<span class="acces-pmr pe-1" style="color:#545454">Accès PMR :</span><i class="fas fa-times-circle ps-1 pt-1" style="color:#ED2F2F"style="color:#ED2F2F"></i>
|
||||
</div>
|
||||
<div class="reserver pt-2">
|
||||
<button type="button" class="button">Réserver</button>
|
||||
</div>
|
||||
</div>
|
||||
<span class="categorie">Kebab</span>
|
||||
<img src="assets/ImagesRestos/pieton.png"><span class="categorie">550m</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,19 @@
|
|||
.rond{
|
||||
padding: 0.7em;
|
||||
background-color: rgb(255, 255, 255);
|
||||
top: 1em;
|
||||
right: 1em;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.heart{
|
||||
display: flex;
|
||||
font-size: 1.6em;
|
||||
padding: 0;
|
||||
margin:0;
|
||||
color: #FF2048;
|
||||
}
|
||||
|
||||
.titre-resto{
|
||||
margin-bottom: 0.9rem;
|
||||
}
|
||||
|
|
@ -10,8 +26,24 @@
|
|||
border-radius: 0 0 0.25rem 0.25rem;
|
||||
padding: 1.375rem 0.75rem;
|
||||
|
||||
|
||||
}
|
||||
.accordion-button.collapsed {
|
||||
background: #CE0000;
|
||||
}
|
||||
|
||||
.accordion-button.collapsed::after {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
|
||||
.ps-5 {
|
||||
padding-left: 5.4rem !important;
|
||||
}
|
||||
.pe-5 {
|
||||
padding-right: 5rem !important;
|
||||
}
|
||||
|
||||
|
||||
.accordion .btn:focus{
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
@ -22,6 +54,26 @@
|
|||
list-style-type: none;
|
||||
font-size: 1.5em;
|
||||
color:#ffd900;
|
||||
|
||||
}
|
||||
|
||||
.trait-rouge{
|
||||
border-bottom: 1px solid #CE0000;
|
||||
opacity: 50%;
|
||||
|
||||
}
|
||||
|
||||
.button{
|
||||
display: block;
|
||||
padding: 0.5em 2em 0.5em ;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
background-color: #545454;
|
||||
color: #ffffff;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
<nav class="navbar navbar-light">
|
||||
<div class="container-fluid">
|
||||
<img src="assets/images-header/logo.png" alt="logo">
|
||||
<form style="width: 30%;" class="d-flex">
|
||||
<input class="form-control me-5" type="search" placeholder="Trouver votre SIMPL'EAT..." aria-label="Search">
|
||||
<nav class="navbar navbar-light p-0">
|
||||
<div class="container-fluid d-flex align-items-center pt-3">
|
||||
<div class="logo ps-4">
|
||||
<img src="assets/images-header/LOGO2.png" alt="logo">
|
||||
</div>
|
||||
<form style="width: 30%;" class="d-flex align-items-center pe-2 pt-2">
|
||||
<input class="form-control me-5 position-relative" type="search" placeholder="Trouver votre SIMPL'EAT..." aria-label="Search">
|
||||
</form>
|
||||
<div class="trait">
|
||||
<p>LE BON PLAN POUR MANGER</p>
|
||||
|
|
|
|||
|
|
@ -19,22 +19,18 @@
|
|||
|
||||
}
|
||||
|
||||
img{
|
||||
padding-left: 2%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
p{
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 130px;
|
||||
left: 68px;
|
||||
padding : 0 10px 0 10px;
|
||||
font-weight: bolder;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
// .form-control{
|
||||
// }
|
||||
|
||||
|
||||
input[type="search"], textarea{
|
||||
background-color: #edf5f1;
|
||||
}
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
|
|
@ -7,6 +7,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
|
|
|
|||
Loading…
Reference in New Issue