{% extends "responsive_design_helper/base.html" %}

{% block content %}
  <div id="f1" class="frame">
    <h2>240<span> x 320</span> <span class="small">(small phone)</span> <img src="http://mattkersley.com/wp-content/themes/mattkersley/images/loader_large.gif" /></h2>
    <iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless width="255" height="320"></iframe>
  </div>
  <div id="f2" class="frame">
    <h2>320<span> x 480</span> <span class="small">(iPhone)</span> <img src="http://mattkersley.com/wp-content/themes/mattkersley/images/loader_large.gif" /></h2>
    <iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless width="335" height="480"></iframe>
  </div>
  <div id="f3" class="frame">
    <h2>480<span> x 640</span> <span class="small">(small tablet)</span> <img src="http://mattkersley.com/wp-content/themes/mattkersley/images/loader_large.gif" /></h2>
    <iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless width="495" height="640"></iframe>
  </div>
  <div id="f4" class="frame">
    <h2>768<span> x 1024</span> <span class="small">(iPad - Portrait)</span> <img src="http://mattkersley.com/wp-content/themes/mattkersley/images/loader_large.gif" /></h2>
    <iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless width="783" height="1024"></iframe>
  </div>
  <div id="f5" class="frame">
    <h2>1024<span> x 768</span> <span class="small">(iPad - Landscape)</span> <img src="http://mattkersley.com/wp-content/themes/mattkersley/images/loader_large.gif" /></h2>
    <iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless width="1039" height="768"></iframe>
  </div>
{% endblock %}