Swipe Code

Copy and paste the code below inside a code block to recreate the boxes you see here, they'll look good on any screen! Experiment by changing their color, size, distribution and anything else you can think of!

 

A Title Goes Here

Praesent vestibulum cursus erat fringilla porttitor. Maecenas cursus feugiat nisl, eget accumsan orci lobortis at. Morbi convallis elit sem, ac ultricies nisl cursus eget. Mauris hendrerit, purus sed vestibulum malesuadal.

Another Title Goes Here

Praesent vestibulum cursus erat fringilla porttitor. Maecenas cursus feugiat nisl, eget accumsan orci lobortis at. Morbi convallis elit sem, ac ultricies nisl cursus eget. Mauris hendrerit, purus sed vestibulum malesuadal.

This is a Third Title

Praesent vestibulum cursus erat fringilla porttitor. Maecenas cursus feugiat nisl, eget accumsan orci lobortis at. Morbi convallis elit sem, ac ultricies nisl cursus eget. Mauris hendrerit, purus sed vestibulum malesuadal.

And Finally a Fourth Title

Praesent vestibulum cursus erat fringilla porttitor. Maecenas cursus feugiat nisl, eget accumsan orci lobortis at. Morbi convallis elit sem, ac ultricies nisl cursus eget. Mauris hendrerit, purus sed vestibulum malesuadal.

<style>
/*Container holding the four boxes*/
.boxrow {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 20px;
    margin-bottom: 30px;
}
/*Individual box container*/
.boxcell {
    display: table-cell;
    width: 50%;
}
/*Box title*/
.boxcell h3{
    display: inline-block;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 2px solid #39ff65; /*you can change the thickness of the line and it's color here*/
}
/*Media queries for responsive layout*/
@media screen and (max-width: 640px){
  .boxrow {
    display: block;
  }
  .boxcell {
    display: block;
    width: 100%;
    margin-bottom: 30px;
  }
}
</style>

<div>
  <div class="boxrow">
    <div class="boxcell">
        <h3>A Title Goes Here</h3>
        <p>
          Praesent vestibulum cursus erat fringilla porttitor.  Maecenas cursus feugiat nisl, eget accumsan orci lobortis at. Morbi convallis elit sem, ac ultricies nisl cursus eget. Mauris hendrerit, purus sed vestibulum malesuadal.
        </p>
    </div>
    <div class=" boxcell">
        <h3>Another Title Goes Here</h3>
        <p>
          Praesent vestibulum cursus erat fringilla porttitor.  Maecenas cursus feugiat nisl, eget accumsan orci lobortis at. Morbi convallis elit sem, ac ultricies nisl cursus eget. Mauris hendrerit, purus sed vestibulum malesuadal.
        </p>
    </div>
  </div>
  <div class="boxrow">
    <div class="boxcell">
        <h3>This is a Third Title</h3>
        <p>
          Praesent vestibulum cursus erat fringilla porttitor.  Maecenas cursus feugiat nisl, eget accumsan orci lobortis at. Morbi convallis elit sem, ac ultricies nisl cursus eget. Mauris hendrerit, purus sed vestibulum malesuadal.
        </p>
    </div>
    <div class="boxcell">
        <h3>And Finally a Fourth Title</h3>
        <p>
          Praesent vestibulum cursus erat fringilla porttitor.  Maecenas cursus feugiat nisl, eget accumsan orci lobortis at. Morbi convallis elit sem, ac ultricies nisl cursus eget. Mauris hendrerit, purus sed vestibulum malesuadal.
        </p>
    </div>
</div>