BMW portal dashboard popup

by Vishnuprasad ps

HTML

<div class="ad-popup">
<div class="ad-dialog">
  <div class="title">
    <h5>Help make this site better!</h5>
  </div>
  <div class="body">
    <p class="bold">We're conducting a quick survey to make the BMW Aftersales tools work better for you. We'd love to hear your feedback!</p>
    <p class="note">Estimated time to complete is about 5 min.</p>
  </div>
  <div class="footer btn-footer">
    <a href="#" class="btn-dark">Skip for now</a>
    <a href="#" class="btn-blue">Take the Survey</a>
  </div>
</div>
</div>

CSS

.ad-popup {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 150;
}

.ad-popup .ad-dialog {
  background: #fff;
  width: 90%;
  max-width: 615px;
  margin: 0 auto;
  margin-top: 12%;
  z-index: 200;
}

.ad-popup .ad-dialog .title {
  display: flex;
  align-items: center;
  padding: 48px 32px 16px;
}

.ad-popup .ad-dialog .title h5 {
  font-size: 30px;
  margin: 0;
}

.ad-popup .ad-dialog .title button {
  width: 50px;
  height: 50px;
  background: #fff;
  border: 0;
  font-size: 1.125rem;
  padding: 1rem 1rem;
  margin: -1rem -1rem -1rem auto;
  line-height: 0;
  cursor: pointer;
  outline: 0;
  -webkit-appearance: none;
}

.ad-popup .ad-dialog .body {
  padding: 0 32px 32px;
}

.ad-popup .ad-dialog .body p {
  margin: 0 0 10px;
  font-size: 16px;
  color: #221F1F;
}

.ad-popup .ad-dialog .body p.bold {
  font-weight: bold;
  font-size: 18px;
}

.ad-popup .ad-dialog .body p.note {
  margin: 32px 0 0;
  font-size: 14px;
  color: #4D4D4D;
}

.ad-popup .ad-dialog .body a {
  color: #000;
}

.ad-popup .ad-dialog .footer {
  padding: 0 32px 48px;
  text-align: right;
}

/* added */
.btn-footer {
  display: flex;
  justify-content: space-between;
}

.btn-footer .btn-dark {
  width: 37%;
}
.btn-footer .btn-blue {
  width: 63%;
  margin-left: 16px;
}

.btn-blue {
  height: 50px;
  color: #FFF;
  font-size: 1rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: #1C69D4;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  appearance: none;
  outline: 0;
  cursor: pointer;
}

.btn-blue:hover {
  background-image: linear-gradient(to bottom, #1c69d3, #2b87ff);
  color: #FFF;
}

.btn-dark {
  height: 50px;
  color: #FFF;
  font-size: 1rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: #000;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  appearance: none;
  outline: 0;
  cursor:...