Newer
Older
CamaraComercioWeb / src / app / modules / public / discover / components / modal-site / modal-site.component.html
Fabian VC on 23 Oct 2021 4 KB [fix] styles modal
<div
  class="modal fade"
  id="staticBackdrop"
  data-bs-backdrop="static"
  data-bs-keyboard="false"
  tabindex="-1"
  aria-labelledby="staticBackdropLabel"
  aria-hidden="true"
  role="dialog"
>
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div
        class="modal-header align-items-start d-flex flex-column has-bg-dark"
      >
        <h2 class="modal-title" id="staticBackdropLabel">{{ ally!.name }}</h2>
        <div class="d-flex modal-header__content align-items-center flex-row justify-content-between">
          <div class="d-flex">
            <div class="d-flex modal__gap mr-4 flex-row align-items-center">
              <i
              ><img src="../../../../../../assets/images/svg/star.svg" alt=""
              /></i>
            <p>3,7</p>
            </div>
            <div class="d-flex modal__gap ml-4 flex-row align-items-center">
              <ion-icon class="user-icon" name="people-outline"></ion-icon>
              <p>1345</p>
            </div>
          </div>
          <div class="d-flex flex-row modal-content__schedule-header align-items-center">
            <p>Horario</p>
            <div class="modal-content__schedule flex-row d-flex">
              <span class="modal-content__schedule-day">L</span>
              <span class="modal-content__schedule-day">M</span>
              <span class="modal-content__schedule-day">M</span>
              <span class="modal-content__schedule-day">J</span>
              <span class="modal-content__schedule-day">V</span>
              <span class="modal-content__schedule-day">S</span>
              <span class="modal-content__schedule-day">D</span>
            </div>
          </div>
        </div>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <div class="d-flex modal__content">
          <div>
            <h5 class="modal-title" id="staticBackdropLabel">DescripciĆ³n</h5>
            <p>
              El restaurante gouls ofrece platos tradicionales con toques de
              modernidad, aprovechando los productos de la zona (excelentes
              carnes, salazones). combinandolos con nuevos sabores y texturas.
              El restaurante gouls ofrece platos tradicionales con toques de
              modernidad, aprovechando los productos de la zona (excelentes
              carnes, salazones). combinandolos con nuevos sabores y texturas.
            </p>
          </div>
          <div>
            <h5 class="modal-title" id="staticBackdropLabel">UbicaciĆ³n</h5>
            <iframe
              class="iframe modal__location"
              src="https://maps.google.com/?ll=23.135249,-82.359685&z=14&t=m&output=embed"
              height="600"
              frameborder="0"
              style="border: 0"
              allowfullscreen
            ></iframe>
          </div>
        </div>
        <div>
          <h1>Galeria restaurante gouls</h1>
          <div class="modal__galery">
            <div class="modal__featured">
              <img
                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVXDY5jHL8crqfa6z5Q9S_GIfiYqOM5bnYUg&usqp=CAU"
                alt="Image galery"
              />
            </div>
            <div class="modal__featured">
              <img
                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVXDY5jHL8crqfa6z5Q9S_GIfiYqOM5bnYUg&usqp=CAU"
                alt="Image galery"
              />
            </div>
            <div class="modal__featured">
              <img
                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVXDY5jHL8crqfa6z5Q9S_GIfiYqOM5bnYUg&usqp=CAU"
                alt="Image galery"
              />
            </div>
            <div class="modal__featured">
              <img
                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVXDY5jHL8crqfa6z5Q9S_GIfiYqOM5bnYUg&usqp=CAU"
                alt="Image galery"
              />
            </div>
            <div class="modal__featured">
              <img
                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVXDY5jHL8crqfa6z5Q9S_GIfiYqOM5bnYUg&usqp=CAU"
                alt="Image galery"
              />
            </div>
            <div class="modal__featured">
              <img
                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVXDY5jHL8crqfa6z5Q9S_GIfiYqOM5bnYUg&usqp=CAU"
                alt="Image galery"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>