CTA-BANNER

by Dhanck

HTML

<div class="banner-cta">
  <div class="banner-btn">
    <div class="lhs">
       <img src="https://storetale.test-admin.parla.tech/public/parla-logo.png" class="logo" />
    </div>
    <div class="rhs">
      <div class="title">Book Appointment</div>
      <div class="description">communication / 16 - communication, bubble, chat, comments, conversation, message icon</div>
    </div>
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

.banner-btn {
  display: flex;
  font-family: 'Montserrat', sans-serif;
  height: 200px;
  width: 100%;
  -webkit-box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, 0.26);
  box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, 0.26);
  cursor: pointer;
}

.lhs {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
}

.rhs {
  background: #c1c3fb;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.title {
  font-size: 25px;
  font-weight: 600;
}

.description {
  text-transform: capitalize;
  font-size: 18px;
  padding: 20px 0;
  line-height: 28px;
}

@media screen and (max-width: 700px) {
  .banner-btn {
    display: flex;
    height: auto;
    width: 100%;
    flex-direction: column;
    -webkit-box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, 0.26);
    box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, 0.26);
  }
}