Semantic Remapping Layout Example (LESS)

<nav>
  <a href="#">Your Logo</a>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#">Blag</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<div class="content-wrapper">
  <div class="banner">
    <h1>I can haz website?</h1>
  </div>
  <div class="featured-items">
    <div class="item-wrapper">
      <div class="item">
        <header>
          <img src="https://placekitten.com/g/500/300" alt="In yo little kitten face" />
          <h2>Personal</h2>

<span class="price">
            $5 <span>per month</span>
          </span>
        </header>

<ul class="pricing-table-list">
          <li>Free setup</li>
          <li>Custom sub-domain</li>
          <li>Standard customer support</li>
          <li>1GB file storage</li>
          <li>1 database</li>
          <li>Unlimited bandwidth</li>
        </ul>

<button>Choose</button>
      </div>
    </div>

<div class="item-wrapper">
      <div class="item">
        <header>
          <img src="https://www.placecage.com/g/500/300" />
          <h2>Small Business</h2>

<span class="price">
            $25 <span>per month</span>
          </span>
        </header>

<ul class="pricing-table-list">
          <li>Free setup</li>
          <li>Use your own domain</li>
          <li>Standard customer support</li>
          <li>10GB file storage</li>
          <li>5 databases</li>
          <li>Unlimited bandwidth</li>
        </ul>

<button>Choose</button>
      </div>
    </div>

<div class="item-wrapper">
      <div class="item">
        <header>
          <img src="https://fillmurray.com/g/500/300">
          <h2>Enterprise</h2>

<span class="price">
            $45 <span>per month</span>
          </span>
        </header>

<ul class="pricing-table-list">
          <li>Free setup</li>
          <li>Use your own domain</li>
          <li>Premium customer support</li>
          <li>Unlimited file storage</li>
          <li>25 databases</li>
          <li>Unlimited bandwidth</li>
        </ul>

<button>Choose</button>
      </div>
    </div>
  </div>
  <div class="feature-descriptions">
    <div class="description-wrapper">
      <div class="description">
        <h3>Get started today</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
        </p>
      </div>
    </div>

<div class="description-wrapper">
      <div class="description">
        <h3>Pay monthly or annually</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
        </p>
      </div>
    </div>

<div class="description-wrapper">
      <div class="description">
        <h3>24/7 customer support</h3>
        <p>
          Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
    </div>

<div class="description-wrapper">
      <div class="description">
        <h3>Cancel your plan anytime</h3>
        <p>
          Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>
  </div>
</div>
<footer>
  <p>&copy; 2015 - Your Mama's Pajamas, Inc.</p>
</footer>