test/index.html at master · chris0stein/test · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" >
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Basic Responsive Page</title>
  <link rel="stylesheet" href="css/style.css">


  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="js/selectivizr-min.js"></script>
  <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->
<script src="js/respond.min.js"></script>

</head>
<body>
  <div class="container">
    <header>
    <img src="http://placehold.it/1200x200" alt="header image" />
  </header>

  <div class="features">
  <div class="feature">
    <p><img src="http://placehold.it/480x100" alt="featured image" /></p>
    <p>This page was created to show a relatively basic but still full featured responsive page. It is intended more for educational purposes than as a full production-ready page. But feel free to use it how you like as a base for your own designs. If you do, drop me a note and let me know.</p>
  </div>

  <div class="feature two">
    <p><img src="http://placehold.it/480x100" alt="featured image" /></p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  </div> <!-- end feature -->

  <div class="feature">
    <p><img src="http://placehold.it/480x100" alt="featured image" /></p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  </div>
 </div>  <!-- end .features -->


    <div class="boxes">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
    </div>


    <footer>
    <p>&copy; Chris Stein 2013</p>
  </footer>
  </div> <!-- end container -->


</body>
</html>