Example of a minimal mobile website

by makzan

HTML

<header>
  <div class="row">
    Website Title here
  </div>
</header>

<nav>
  <div class="row">
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
    </ul>
  </div>
</nav>

<div class="row">
  <article>
    <header>
      <h1>Heading of the content</h1>
    </header>

    <p>An example content here for demonstration. This is some dummy text. Some dummy text inside a dummy paragraph pretending to be a real content.</p>
    <p>Really? Are there real content here? What do you think? Here are just some dummy text.</p>

    <p>An example content here for demonstration. This is some dummy text. Some dummy text inside a dummy paragraph pretending to be a real content.</p>
    <p>Really? Are there real content here? What do you think? Here are just some dummy text.</p>

    <p>An example content here for demonstration. This is some dummy text. Some dummy text inside a dummy paragraph pretending to be a real content.</p>
    <p>Really? Are there real content here? What do you think? Here are just some dummy text.</p>

    <footer>
      Author: Makzan
    </footer>

  </article>
</div>

<footer>
  <div class="row">
    Copyright goes here.
  </div>
</footer>

CSS

/* normalize */
body, nav, ul, li, p, h1, h2, h3 {
    padding: 0;
    margin: 0;
}

/* core styles */
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body > header,
body > footer {
    background: #ffce25;
}

.row {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 10px;
}

/* addition styles */
ul {
    list-style: none;
}

h1, p {
    margin-bottom: .5em;
}