surfandpaddle/index.html at master · sallyhall/surfandpaddle · 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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Surf and Paddle</title>
    <link rel="stylesheet" href="CSS/style.css">
    <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <div class="topbar">
      <nav>
        <img src="images/waveicon.png" alt="logo">
        <p>SURF & PADDLE CO. BLOG</p>
        <ul>
          <li><a href="about.html">ABOUT</a></li>
          <li><a href="search.html">SEARCH</a></li>
          <li><a href="search.html"><img src="images/search.gif" alt="search" class="icon"></a></li>
        </ul>
      </nav>
      <header>
        <h1>SURF & PADDLE CO.</h1>
        <p class="subtitle">An Iron Yard Academy Project Est. Fall 2013</p>
      </header>
    </div>
    <div class="container">
      <section>
        <article class="post">
        <h2>A fantastic engaging headline goes here</h2>
        <p class="author">
          <img src="images/sally.png" alt="Author Image">
          Anne Marie
        </p>
        <p>on</p>
        <p class="date">
          Monday, Oct 7th 9:22pm
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique qui asperiores deleniti, numquam magnam velit, itaque vel, sint quasi pariatur quae. Incidunt voluptatibus iure nobis quia quo repellat aperiam. <a href="">Corporis.</a></p>
        <div class="quote">Whoa, that's radical!</div>
        <p>Lorem ipsum dolor sit amet, <a href="">consectetur adipisicing</a> elit. Tempora officia corporis repellat, necessitatibus expedita fugit ad quisquam sit accusamus in repudiandae adipisci dolorum delectus laboriosam labore, ducimus modi nobis ab.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum assumenda dignissimos tempora eligendi quas molestiae nulla distinctio omnis doloremque hic, veniam inventore, eos consequatur doloribus sequi voluptatum ex tempore similique.</p>
        <share>
          <ul>
            <li><a href="">Read Comments</a></li>
            <li><a href="">Read Later</a></li>
            <li><a href="">Share this post</a></li>
          </ul>
        </share>
      </section>
      <aside>
        <div class="box">
          <figure>
            <img src="images/sally.png" alt="authorimage">
            <figurecaption>
              <h3>Anne Marie</h3>
              <ul>
                <li><a href=""></a>Twitter</li>
                <li><a href=""></a>Facebook</li>
                <li><a href=""></a>Instagram</li>
              </ul>
            </figurecaption>
          </figure>
        </div>
        <div class="box">
          <figure>
            <img src="images/womanpaddleboard.jpg" alt="Girl Paddleboarding">
            <figurecaption>About this Ad</figurecaption>
          </figure>
        </div>
        <div class="box">
          <h3>Sidebar Section Heading</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, eum voluptatem tenetur aut, illo beatae, error quos eos inventore, corporis explicabo quaerat ad rem voluptates minus qui neque sint praesentium.</p>
        </div>
      </aside>
    </div>
    <footer>
      <h2>Most Popular Posts</h2>
      <a href="">
          <div class="postcontainer">
            <img src="images/guywithboard.jpg" alt="Dude with board">
            <div class="caption">ANOTHER COOL POST</div>
          </div>
        </a>
      <a href="">
          <div class="postcontainer">
            <img src="images/beer-flight.jpg" alt="beer">
            <div class="caption">POST TITLE</div>
          </div>
        </a>
      <a href="">
          <div class="postcontainer">
            <img src="images/zachgalifinakis.jpg" alt="beard">
            <div class="caption">HERE'S ANOTHER LONG POST TITLE</div>
          </div>
        </a>
      <a href="">
          <div class="postcontainer">
            <img src="images/bottles.jpg" alt="drinks">
            <div class="caption">OH COOL A POST!</div>
          </div>
        </a>
      <nav>
        <img src="images/logo.png" alt="TIY Logo">
        <p>The Iron Yard Copyright 2013. All rights Reserved</p>
        <ul>
          <li>Nav Item 1</li>
          <li>|</li>
          <li>Nav Item 2</li>
          <li>|</li>
          <li>Nav Item 3</li>
          <li>|</li>
          <li>Nav Item 4</li>
        </ul>
      </nav>
    </footer>
  </body>
</html>