KramericaGives Flexbox Example

index.html

<section class="pillars">
  <div class="holder leadership">
    <div class="content radius-full shadow">
      <div class="information">
        <h2 class="headline text-center"><i class="fas fa-users"></i>Leadership</h2>
        <div class="content">
          <p>Through a variety of hands-on and engaging experiences, including team building exercises, hosting guest speakers, public speaking, leading activities, and engaging in discussion and social action, students are encouraged to break<br> out of
            their comfort zones. Leadership programming fosters self-confidence and a positive view of the future.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="holder mentors">
    <div class="content radius-full shadow">
      <div class="information">
        <h2 class="headline text-center"><i class="fas fa-user-friends"></i>Mentors</h2>
        <div class="content">
          <p>Each Kramerica Gives student is assigned an adult mentor throughout the program. Mentors provide feedback and support through conversations about college and other post-high school options, careers, cultural issues, and personal<br> life.
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="holder community">
    <div class="content radius-full shadow">
      <div class="information">
        <h2 class="headline text-center"><i class="fas fa-people-carry"></i>Community Involvement</h2>
        <div class="content">
          <p>Student leaders have the opportunity to volunteer with a variety of organizations in the Denver area. They are also encouraged to support fundraisers, practice speaking in front of large groups, shadow a volunteer for career exploration, and
            serve as ambassadors for Kramerica Gives in their communities.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="holder scholarships">
    <div class="content radius-full shadow">
      <div class="information">
        <h2 class="headline text-center"><i class="fas fa-user-graduate"></i>Scholarships</h2>
        <div class="content">
          <p>Students who meet all program requirements will be awarded a scholarship, which can be used for college or another post-secondary goal.</p>
        </div>
      </div>
    </div>
  </div>
</section>

kramericagives-flexbox-example.markdown

KramericaGives Flexbox Example

A Pen by Dano Manion on CodePen.

License.

style.scss

.holder {
  padding-bottom: 12px;
}

.information .headline {
    color: hsla(0,0%,100%,0.95);
}

.leadership .information .headline {
    background-color: rgba(27,52,107,0.97);
    border-radius: 25px 25px 0 0;
}

.mentors .information .headline {
    background-color: rgba(214,49,74,0.97);
    border-radius: 25px 25px 0 0;
}

.community .information .headline {
    background-color: rgba(252,128,45,0.97);
    border-radius: 25px 25px 0 0;
}

.scholarships .information .headline {
    background-color: rgba(120,63,122,0.97);
    border-radius: 25px 25px 0 0;
    line-height: 2.2em;
}

.radius-full {
    border-radius: 25px;
    border: solid #ccc 1px;
}

.leadership .radius-full {
    border-radius: 32px;
    border: solid 4px rgba(27,52,107,0.97);
}

.mentors .radius-full {
    border-radius: 32px;
    border: solid 4px rgba(214,49,74,0.97);
}

.community .radius-full {
    border-radius: 32px;
    border: solid 4px rgba(252,128,45,0.97);
}

.scholarships .radius-full {
    border-radius: 32px;
    border: solid 4px rgba(120,63,122,0.97);
}

.pillars .holder {
    display: flex;
    width: 50%;
}

.holder .information .content {
    border-radius: 32px;
    padding-top: 12px;
    width: 100%;
    margin: 0;
}

.holder {
    margin: 0 12px;
}

.information {
    text-align: center;
    overflow: hidden;
}

.information .headline {
    padding: 24px;
}

.information .headline i {
    display: block;
    padding: 0 0 6px 0;
}

.information .content p {
    padding: 0 24px 12px 24px;
}

.information .content {
    padding-bottom: 24px;
}

.information .content p {
    font-size: 0.95em;
}

.pillars {
  border: solid red 1px;
  width: 100%;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css" rel="stylesheet" />