lecture03-css/blog.html at master · info343-au16/lecture03-css · 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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My Blog</title>

  <link rel="stylesheet" href="css/blog.css">
</head>
<body class="content-container">

  <header class="page-header" role="banner">
    <h1>
      My Awesome Blog
    </h1>
    <p>Where I post about stuff</p>
  </header>

  <nav role="navigation">
    <h2>Navigation</h2>
    <ul>
      <li><a href="#post3">Check it out!</a></li>
      <li><a href="#post2">An update</a></li>
      <li><a href="#post1">A blog post!</a></li>
    </ul>
    <p><a href="#comment">Leave a comment</a></p>
  </nav>

  <main role="main">
    <section role="region" id="post3">
      <header class="post-header">
        <h2>Check it out!</h2>
        <p>Posted today</p>
      </header>
      <p>Check out this cute puppy!</p>
      <p><img src="img/gzvWJQMuibX5ISaVpCu17h.jpg" alt="a husky puppy"></p>
      <p>Also, lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam ea amet rem vel ipsa odit esse iste facilis inventore earum.</p>
      <p>Lorem ipsum dolor sit!</p>
    </section>

    <section role="region" id="post2">
      <header class="post-header">
        <h2>An update</h2>
        <p>Posted yesterday</p>
      </header>
      <div class="green-rectangle" aria-label="a giant green rectangle"></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi perferendis magni odio soluta iure, culpa libero reiciendis hic. Possimus quis, fuga, quos aspernatur velit necessitatibus ex blanditiis asperiores magnam molestiae.</p>
      <p>Sit provident cumque, quam architecto voluptatibus ipsam iusto nihil possimus unde assumenda quis sint consectetur quas sapiente, nemo dicta libero reiciendis, cupiditate eaque laudantium, animi fugiat dolorum iure. Nobis, praesentium!</p>
      <p>Voluptate, necessitatibus, rerum voluptas quam veniam suscipit recusandae provident. Sit at vero expedita ipsam veniam, blanditiis reprehenderit est illum doloribus labore dolore? Incidunt placeat vero, numquam quibusdam labore! Ipsum, error.</p>
      <ul>
        <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
        <li>Donec id elit non mi porta gravida at eget metus.</li>
        <li>Nulla vitae elit libero, a pharetra augue.</li>
      </ul>
      <p>Cumque ipsa sapiente error placeat animi quas maiores esse non, culpa neque consequatur quaerat tempore ut iusto laborum modi a dolor aut consequuntur assumenda, cupiditate maxime eos harum blanditiis voluptatem.</p>
    </section>

    <section role="region" id="post1">
      <header class="post-header">
        <h2>A blog post!</h2>
        <p>Posted last week</p>
      </header>
      <p>You're looking at this? Really? Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
      <blockquote>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</blockquote>
      <p>Veniam dolorem cupiditate tenetur placeat nulla repellat dicta maxime architecto blanditiis non facere nesciunt quae animi quam quidem ullam, suscipit nisi ipsam voluptatem accusamus necessitatibus itaque autem in, sunt similique.</p>
      <p>In mollitia cumque sapiente ducimus quo labore magni qui quas aperiam, voluptatibus nesciunt dicta enim dignissimos doloribus tempora iusto commodi alias recusandae tempore beatae atque? Totam cum et, perferendis itaque.</p>
      <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
    </section>

    <section class="comment">
      <h2>Comments</h2>
      <form role="form">
        <label for="commentBox">Leave a short comment on this blog: </label>
        <input type="text" id="commentBox" name="comment">
        <button>Submit</button>
      </form>
    </section>

  </main>

  <footer role="contentinfo">
    <p>This blog was created by me using my own two hands. Some text grabbed from <a href="https://getbootstrap.com/examples/blog/">Bootstrap's blog example</a>.</p>
    <p>&copy; 2016 The Author.</p>
  </footer>
</body>
</html>