Flexbox Feature List

by Ayo Isaiah

HTML

<div class="feature-list">
  <div class="feature">
    <div class="feature-description">
      <h2>Search and Browse</h2>
      <p>Launch applications and find files on your Mac or on the web. Alfred learns how you use your Mac and prioritises results.</p>
      <p>Save countless hours by using hotkeys, keywords and customising how you want to search your Mac and activity history.</p>
      <p>Jump in and browse, preview files and take action on them without lifting your fingers off the keyboard.</p>
    </div>
    <img src="https://freshman.tech/assets/images/feature-list/search.jpg" alt="" class="feature-image">
  </div>
  <div class="feature reverse">
    <div class="feature-description">
      <h2>Type Less, Say More</h2>
      <p>With Alfred's Clipboard History and Snippets features, there's no need to type the same URLs or responses over and over.</p>
      <p>Use the Clipboard History to locate any text, image or file you copied earlier and paste it again.</p>
      <p>Create your own snippets and type a short abbreviation to auto-expand them into a full text snippet, saving yourself hours of typing in the long run!</p>
    </div>
    <img src="https://freshman.tech/assets/images/feature-list/clipboard.jpg" alt="" class="feature-image">
  </div>
  <div class="feature">
    <div class="feature-description">
      <h2>Extend and Automate</h2>
      <p>With Alfred's Powerpack, use immensely powerful workflows to perform tasks more efficiently and cut down on repetitive manual tasks.</p>
      <p>Link hotkeys, keywords and actions together to create your own workflows; There's no need to write a single line of code to create a workflow. Import workflows from the thousands our community of creators have shared.</p>
    </div>
    <img src="https://freshman.tech/assets/images/feature-list/workflows.jpg" alt="" class="feature-image">
  </div>
  <div class="feature reverse">
    <div class="feature-description">
      <h2>Control Your Music</h2>
      <p>You're...

CSS

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

.feature-list {
  width: 100%;
  max-width: 960px;
  margin: 50px auto 0;
  padding: 20px;
}

.feature {
  padding-top: 30px;
  padding-bottom: 30px;
}

.feature:not(:last-of-type) {
  border-bottom: 1px solid #dedede;
}

h2 {
  margin-top: 20px;
  margin-bottom: 20px;
}

p {
  margin-bottom: 20px;
  font-size: 18px;
}

@media screen and (max-width: 750px) {
  h2 {
    text-align: center;
  }
}