<main>
  
  <h2>Cards Primary</h2>
  <div class="card-group">
    <div class="card card-primary text-center">
      <img class="card-img-top" src="https://static3.avast.com/10001215/web/i/index2/for-home.jpg" alt="Card image cap">
      <div class="card-body">
        <div class="badge badge-primary badge-sm">FOR HOME</div>
        <div class="card-title">Personal online protection everywhere you go</div>
        <p class="card-text">We protect your privacy and keep you safe online with Premium Security and our Virtual Private Network (VPN) that safeguards your personal data.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-outline-secondary btn-icon-right">
          <span>HOME SECURITY
            <img src="https://static3.avast.com/1/web/i/v2/components/arrow-m-right-orange.png" height="24">
          </span>
        </a>
      </div>
    </div>
    <div class="card card-primary text-center">
      <img class="card-img-top" src="https://static3.avast.com/10001215/web/i/index2/for-partners.jpg" alt="Card image cap">
      <div class="card-body">
        <div class="badge badge-primary badge-sm">FOR BUSINESS</div>
        <div class="card-title">Simple solutions for business’s biggest security problems</div>
        <p class="card-text">We deliver complete endpoint and network security solutions designed for small and midsize businesses & IT service providers.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-outline-secondary btn-icon-right">
          <span>BUSINESS SECURITY
            <img src="https://static3.avast.com/1/web/i/v2/components/arrow-m-right-orange.png" height="24">
          </span>
        </a>
      </div>
    </div>
    <div class="card card-primary text-center">
      <img class="card-img-top" src="https://static3.avast.com/10001215/web/i/index2/for-business.jpg" alt="Card image cap">
      <div class="card-body">
        <div class="badge badge-primary badge-sm">FOR PARTNERS</div>
        <div class="card-title">Protecting the customers of global operators</div>
        <p class="card-text">We partner with the world’s leading mobile and broadband network operators to offer security, privacy, and digital parenting solutions.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-outline-secondary btn-icon-right">
          <span>PARTNER SECURITY
            <img src="https://static3.avast.com/1/web/i/v2/components/arrow-m-right-orange.png" height="24">
          </span>
        </a>
      </div>
    </div>
  </div>
  
  <h2>Cards Secondary</h2>
  <div class="card-deck">
    <div class="card card-secondary">
      <img class="card-img-top" src="https://via.placeholder.com/350x180.png?text=img" alt="Card image cap">
      <div class="card-body">
        <div class="card-title">How to Choose the Best Password Manager</div>
        <p class="card-text">Learn everything you need to know about the security features and usability of password managers…</p>
      </div>
      <div class="card-footer text-right">
        <a href="#" class="btn btn-sm btn-link btn-icon-right">
          <span>LEARN MORE
            <img src="https://web-static.ff.int.avast.com/static3.avast.com/1/web/i/v2/components/arrow-s-right-orange.png" height="16">
          </span></a>
      </div>
    </div>
    <div class="card card-secondary">
      <img class="card-img-top" src="https://via.placeholder.com/350x180.png?text=img" alt="Card image cap">
      <div class="card-body">
        <div class="card-title">How to Choose the Best Password Manager</div>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer text-right">
        <a href="#" class="btn btn-sm btn-link btn-icon-right">
          <span>LEARN MORE
            <img src="https://web-static.ff.int.avast.com/static3.avast.com/1/web/i/v2/components/arrow-s-right-orange.png" height="16">
          </span></a>
      </div>
    </div>
    <div class="card card-secondary">
      <img class="card-img-top" src="https://via.placeholder.com/350x180.png?text=img" alt="Card image cap">
      <div class="card-body">
        <div class="card-title">How to Choose the Best Password Manager</div>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer text-right">
        <a href="#" class="btn btn-sm btn-link btn-icon-right">
          <span>LEARN MORE
            <img src="https://web-static.ff.int.avast.com/static3.avast.com/1/web/i/v2/components/arrow-s-right-orange.png" height="16">
          </span></a>
      </div>
    </div>
    <div class="card card-secondary">
      <img class="card-img-top" src="https://via.placeholder.com/350x180.png?text=img" alt="Card image cap">
      <div class="card-body">
        <div class="card-title">How to Choose the Best Password Manager</div>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer text-right">
        <a href="#" class="btn btn-sm btn-link btn-icon-right">
          <span>LEARN MORE
            <img src="https://web-static.ff.int.avast.com/static3.avast.com/1/web/i/v2/components/arrow-s-right-orange.png" height="16">
          </span></a>
      </div>
    </div>
  </div>
  
  <h2>Cards Secondary without body</h2>
  <div class="card-deck">
    <div class="card card-secondary">
      <img class="card-img-top" src="https://via.placeholder.com/350x180.png?text=img" alt="Card image cap">
      <div class="card-body">
        <div class="card-title">How to Choose the Best Password Manager</div>
      </div>
      <div class="card-footer text-right">
        <a href="#" class="btn btn-sm btn-link btn-icon-right">
          <span>LEARN MORE
            <img src="https://web-static.ff.int.avast.com/static3.avast.com/1/web/i/v2/components/arrow-s-right-orange.png" height="16">
          </span></a>
      </div>
    </div>
    <div class="card card-secondary">
      <img class="card-img-top" src="https://via.placeholder.com/350x180.png?text=img" alt="Card image cap">
      <div class="card-body">
        <div class="card-title">How to Choose the Best Password Manager</div>
      </div>
      <div class="card-footer text-right">
        <a href="#" class="btn btn-sm btn-link btn-icon-right">
          <span>LEARN MORE
            <img src="https://web-static.ff.int.avast.com/static3.avast.com/1/web/i/v2/components/arrow-s-right-orange.png" height="16">
          </span></a>
      </div>
    </div>
    <div class="card card-secondary">
      <img class="card-img-top" src="https://via.placeholder.com/350x180.png?text=img" alt="Card image cap">
      <div class="card-body">
        <div class="card-title">How to Choose the Best Password Manager</div>
      </div>
      <div class="card-footer text-right">
        <a href="#" class="btn btn-sm btn-link btn-icon-right">
          <span>LEARN MORE
            <img src="https://web-static.ff.int.avast.com/static3.avast.com/1/web/i/v2/components/arrow-s-right-orange.png" height="16">
          </span></a>
      </div>
    </div>
    <div class="card card-secondary">
      <img class="card-img-top" src="https://via.placeholder.com/350x180.png?text=img" alt="Card image cap">
      <div class="card-body">
        <div class="card-title">How to Choose the Best Password Manager</div>
      </div>
      <div class="card-footer text-right">
        <a href="#" class="btn btn-sm btn-link btn-icon-right">
          <span>LEARN MORE
            <img src="https://web-static.ff.int.avast.com/static3.avast.com/1/web/i/v2/components/arrow-s-right-orange.png" height="16">
          </span></a>
      </div>
    </div>
  </div>
  
  <div class="awards-container">
    <h2>Cards with Awards</h2>
    <div class="card-deck">
      <div class="card card-awards text-center">
        <div class="card-img-top">
          <img src="https://static3.avast.com/10001215/web/i/awards-v12/white/awards-cnet.png" alt="Card image cap">
        </div>
        <div class="card-body">
          <div class="card-title">The most downloaded software</div>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-sm btn-link-light btn-icon-right">
            <span>LEARN MORE
              <img src="https://web-static.ff.int.avast.com/static3.avast.com/1/web/i/v2/components/arrow-s-right-orange.png" height="16">
            </span></a>
        </div>
      </div>
      <div class="card card-awards text-center">
        <div class="card-img-top">
          <img src="https://static3.avast.com/10001215/web/i/awards-v12/logo-pcmag-2.png" alt="Card image cap">
        </div>
        <div class="card-body">
          <div class="card-title">Best Free Anti-malware</div>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-sm btn-link-light btn-icon-right">
            <span>LEARN MORE
              <img src="https://web-static.ff.int.avast.com/static3.avast.com/1/web/i/v2/components/arrow-s-right-orange.png" height="16">
            </span></a>
        </div>
      </div>
      <div class="card card-awards text-center">
        <div class="card-img-top">
          <img src="https://static3.avast.com/10001215/web/i/awards-v12/white/awards-av-comparatives.png" alt="Card image cap">
        </div>
        <div class="card-body">
          <div class="card-title">Antivirus with the lowest impact on PC performance</div>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-sm btn-link-light btn-icon-right">
            <span>LEARN MORE
              <img src="https://web-static.ff.int.avast.com/static3.avast.com/1/web/i/v2/components/arrow-s-right-orange.png" height="16">
            </span></a>
        </div>
      </div>
      <div class="card card-awards text-center">
        <div class="card-img-top">
          <img src="https://static3.avast.com/10001215/web/i/awards-v12/white/awards-softpedia.png" alt="Card image cap">
        </div>
        <div class="card-body">
          <div class="card-title">Official download partner</div>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-sm btn-link-light btn-icon-right">
            <span>LEARN MORE
              <img src="https://web-static.ff.int.avast.com/static3.avast.com/1/web/i/v2/components/arrow-s-right-orange.png" height="16">
            </span></a>
        </div>
      </div>
    </div>
  </div>
  
  
  <h2>Accordion</h2>
  <div class="accordion-container">
    <div class="accordion">
      <div class="card card-accordion">
        <div class="card-header" id="headingOne">
          <span>What are the system requirements for Avast Premium Security?</span>
          <a href="#collapseOne" class="icon-btn" data-toggle="collapse"></a>
        </div>

        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
          <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
        </div>
      </div>
      <div class="card card-accordion">
        <div class="card-header" id="headingTwo">
          <span>What's the difference between Avast Premium Security (Single-Device) and Avast Premium Security (Multi-Device) subscriptions?</span>
          <a href="#collapseTwo" class="icon-btn" data-toggle="collapse"></a>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
          <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
        </div>
      </div>
      <div class="card card-accordion">
        <div class="card-header" id="headingThree">
          <span>Can I change the 10 devices activated with my Avast Premium Security (Multi-Device) subscription?</span>
          <a href="#collapseThree" class="icon-btn" data-toggle="collapse"></a>
        </div>
        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
          <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
        </div>
      </div>
      <div class="card card-accordion">
        <div class="card-header" id="headingFour">
          <span>Is it necessary to uninstall my previous Avast Antivirus version before upgrading to Avast Premium Security on my PC?</span>
          <a href="#collapseFour" class="icon-btn" data-toggle="collapse"></a>
        </div>
        <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordion">
          <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
        </div>
      </div>
    </div>
  </div>
</main>
/* styles reset */
.card {
  border:0;
}


/* card group aka PRIMARY */
.card-group .card-primary:hover {
  box-shadow: 0 40px 60px -20px rgba(12, 5, 62, 0.15);
  z-index: 100;
}
.card-group .card-primary:hover .card-title{
  color: #4e22d0;
}
.card-group .card-primary .card-img-top{
  width:264px;
  height:264px;
  margin: 80px auto 32px;
}
.card-group .card-primary .card-body > .badge {
  margin-bottom: 24px;
}
.card-group .card-primary .card-body {
  padding: 0 32px;
}
.card-group .card-primary .card-title {
  color: #261c6a;
  font-size: 26px;
  line-height: 1.54;
  font-weight: 900;
  margin-bottom: 24px;
}
.card-group .card-primary .card-text {
  color: #261c6a;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
}
.card-group .card-primary .card-footer {
  padding: 48px 0 56px;
  background: transparent;
  border:0;
}


/* card deck aka SECONDARY */

.card-deck .card-secondary {
  padding: 32px 32px 0;
  margin: 16px;
  border-radius: 0;
}
.card-deck .card-secondary:hover {
  box-shadow: 0 40px 60px -20px rgba(12, 5, 62, 0.15);
}
.card-deck .card-secondary:hover .card-title{
  color: #4e22d0;
}
.card-deck .card-secondary .card-body {
  padding: 0;
}
.card-deck .card-secondary .card-img-top{
  margin-bottom: 24px;
  border-radius: 0px;
}
.card-deck .card-secondary .card-title {
  color: #261c6a;
  font-size: 20px;
  line-height: 1.6;
  font-weight: 700;
  margin-bottom: 16px;
}
.card-deck .card-secondary .card-text {
  color: #261c6a;
  font-size: 14px;
  line-height: 1.71;
  font-weight: 400;
  margin-bottom: 16px;
}
.card-deck .card-secondary .card-footer {
  padding: 9px 0 25px;
  background: transparent;
  border:0;
}
.card-deck .card-secondary .card-footer .btn{
  margin-right: -24px;
}


/* card AWARDS */
.awards-container {
  background-image: linear-gradient(to bottom, #0c053e 2%, #261c6a);
  margin: 0 -30px;
  padding: 30px;
}
.awards-container h2 {
  color: #fff;
}
.card-deck > .card-awards {
  padding: 32px 32px 0;
  margin: 16px;
  border-radius: 0;
  background: transparent;
}
.card-deck .card-awards:hover {
  box-shadow: 0 40px 60px -20px rgba(8, 4, 43, 0.8);
  background-color: #261c6a;
}
.card-deck .card-awards:hover .card-footer .btn{
  visibility: visible;
}

.card-deck > .card-awards .card-body {
  padding: 0;
}
.card-deck > .card-awards .card-img-top{
  margin-bottom: 24px;
  border-radius: 0px;
  height: 80px;
  display: flex; justify-content: center;
}
.card-deck .card-awards .card-img-top img {
  margin: auto;
}
.card-deck .card-awards .card-title {
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  margin-bottom: 3px;
}
.card-deck .card-awards .card-footer {
  padding: 9px 0 13px;
  border:0;
}
.card-deck .card-awards .card-footer .btn{
  color: #fff;
  visibility: hidden;
}

/* cards as ACCORDION */
.accordion-container{
  margin: 50px 0;
}
.accordion {
  margin: 24px 100px;
  box-shadow: 0 40px 60px -20px rgba(12, 5, 62, 0.15);
  border: solid 1px #e9e8f3;
}
.accordion .card {
  border-radius: 0;
  margin:0;
}

.accordion .card:first-child {
  border-bottom: solid 1px #e9e8f3;
}
.accordion .card:not(:first-of-type):not(:last-of-type){
  border-bottom: solid 1px #e9e8f3;
}


.accordion .card-header {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.6;
  background-color: #fff;
  border-radius: 0;
  color: #261c6a;
  padding: 36px 32px;
  border-bottom-width: 0;
}
.accordion .card-header:hover {
  color: #4e22d0;
}
.accordion .card:hover {
  z-index: 99999;
  box-shadow: 0 20px 40px -20px rgba(12, 5, 62, 0.4);
}
.accordion .card-header img {
  padding-right: 16px;
}
.accordion .card-header span {
  display: inline-block;
  width: calc(100% - 60px);
}
.accordion .card-header + .list-group .list-group-item:first-child {
  border-top: 1px;
}
.accordion .icon-btn {
  float: right;
  width: 48px;
  height: 48px;
  padding: 0;
  background: #fff url('https://web-static.ff.int.avast.com/static3.avast.com/1/web/i/v2/components/plus-s-plum.png') no-repeat 50% 50%;
  box-shadow: 0 12px 15px -4px rgba(12, 5, 62, 0.12);
  border: solid 1.2px #d4d2e6;
  border-radius: 24px;
  /* -webkit-transition: background .3s;
  transition: background .3s; */
}
.accordion .icon-btn:hover {
  background: #4e22d0 url('https://web-static.ff.int.avast.com/static3.avast.com/1/web/i/v2/components/plus-s-white.png') no-repeat 50% 50%;
  box-shadow: 0 12px 15px -4px rgba(78, 34, 208, 0.3), 0 12px 15px -4px rgba(12, 5, 62, 0.15);
}
.accordion .icon-btn:active {
  background: #261c6a url('https://web-static.ff.int.avast.com/static3.avast.com/1/web/i/v2/components/plus-s-white.png') no-repeat 50% 50%;
  box-shadow: 0 12px 15px -4px rgba(78, 34, 208, 0.3), 0 12px 15px -4px rgba(12, 5, 62, 0.15);
}
.accordion .card-body {
  padding: 0 32px 40px;
}


/* PAGE LAYOUT */
main{
  padding:0 20px;
  max-width:1361px;
  margin:0 auto;
}
h2 {
  margin-top: 40px;
}
Run Pen

External CSS

  1. https://static3.avast.com/1/web/c/v2/avast.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/popper.min.js
  3. https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js