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!

Use them for showcasing your work skills, services, or anything else you can think of.

You can change the color and thickness of the line where it's marked in the code, and don't worry about the font, it will adapt to the one you have on your site.

 

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>