-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
121 lines (118 loc) · 5.95 KB
/
index.html
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
117
118
119
120
121
<!DOCTYPE html>
<html>
<head>
<title>Surf & Paddle Co.</title>
<link rel="stylesheet" href="styles/main_styles.css">
<link rel="stylesheet" href="styles/middle_styles.css">
<link rel="stylesheet" href="styles/footer_styles.css">
</head>
<body>
<header>
<div class="header_top">
<div class="header_top_left">
<img class="icon" src="mimic_images/wave.jpg" alt="">
<a href="">SURF & PADDLE CO. BLOG</a>
</div>
<div class="header_top_right">
<span class="about_search">ABOUT</span>
<span class="about_search">SEARCH</span>
<span><img class="icon2" src="mimic_images/glass.gif" alt=""></span>
</div>
</div>
<div class="page_headers">
<h1 class="page_header">SURF & PADDLE CO.</h1>
<h4 class="page_subheader">An Ironyard Academy Project Est. Fall 2013</h4>
</div>
</header>
<div class="middle">
<nav class="column_left">
<h2>A FANTASTIC ENGAGING HEADLINE GOES HERE</h2>
<div class="signature">
<img class="small_headshot" src="mimic_images/group_kayak.jpg" alt="">
<div class="sig_name">
<a href="" class="sig_sig">Brendan Quinn</a> on <a href="" class="sig_date">Thur. July 24 1:53pm</a>
</div>
</div>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur voluptatem culpa praesentium atque, veritatis corrupti assumenda voluptate voluptates. Dolorum itaque possimus perferendis, consequuntur aut ipsa quisquam vel accusamus hic quia.
</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur voluptatem culpa praesentium atque, veritatis corrupti assumenda voluptate voluptates.
</p>
<p class="quote">
WOAH, THAT'S RADICAL!
</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius nobis voluptatum, magni ad tempore ipsam sunt velit corporis corrupti consectetur, explicabo eos <span><a href="">omnis (beatae)</a></span> atque, modi quaerat rem assumenda ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic dolores, error quia fugiat et possimus, ea, sapiente nobis accusamus voluptatem assumenda! Illum ex similique, magnam ipsa, iusto ratione sunt maxime?
</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius nobis voluptatum, magni ad tempore ipsam sunt velit corporis corrupti consectetur, explicabo eos omnis beatae atque, modi quaerat rem assumenda ab.
</p>
<div class="share_bar">
<div class="share_item">
<span class="share_image"><img class="share_image1" src="mimic_images/bubble.png" alt=""></span>
<span class="share_text">Read Comments</span>
</div>
<div class="share_item">
<span class="share_image"><img class="share_image1" src="mimic_images/cloud.png" alt=""></span>
<span class="share_text">Read Later</span>
</div>
<div class="share_item">
<span class="share_image"><img class="share_image1" src="mimic_images/exo.png" alt=""></span>
<span class="share_text3">Share This Post</span>
</div>
</div>
</nav>
<nav class="column_right">
<div class="author">
<img class="headshot blueface" src="mimic_images/group_kayak.jpg" alt="">
<nav class="author_name">Brendan Quinn</nav>
<nav class="author_contact">
<span><a href="">Twitter</a></span>
<span><a class="borderman" href="">Facebook</a></span>
<span><a href="">Instagram</a></span>
</nav>
</div>
<div class="ad">
<nav class="add_pic">
<img class="add_pic_pelican blueface" src="mimic_images/pelican.jpg" alt="pelican">
</nav>
<nav class="add_link">
<a href="">About This Add</a>
</nav>
</div>
<div class="side_section">
<h4>SIDEBAR SECTION HEADING</h4>
<nav class="side_text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio consequatur repudiandae mollitia. Dolor, cum, in. Enim ipsa tempore pariatur veritatis id obcaecati error vel asperiores voluptate, perferendis praesentium vero molestias. Brendan Quinn
</nav>
</div>
</nav>
</div>
<footer>
<div class="footer_top">
<h3>MOST POPULAR POSTS</h3>
</div>
<div class="footer_middle">
<p class="footer_adds">
<a class="footer_images" href=""><img class="footer_images" src="mimic_images/otter.jpg" alt=""><span class="post_text">ANOTHER COOL POST</span></a>
<a class="footer_images" href=""><img class="footer_images" src="mimic_images/shem_creek_kayak.jpg" alt=""><span class="post_text">ANOTHER COOL POST</span></a>
<a class="footer_images" href=""><img class="footer_images" src="mimic_images/alligator.jpg" alt=""><span class="post_text">ANOTHER COOL POST</span></a>
<a class="footer_images" href=""><img class="footer_images" src="mimic_images/niagara_falls.jpg" alt=""><span class="post_text">ANOTHER COOL POST</span></a>
</p>
</div>
<div class="footer_butt">
<div class="butt_left">
<nav class="butt_left_1"><img class="butt_left_1" src="mimic_images/tiy_logo.png" alt="The Iron Yard Image"></nav>
<nav class="butt_left_2">The Iron Yard, Copyright 2013, All Rights reserved</nav>
</div>
<div class="butt_right">
<a href="" class="navlink1">Nav Item 1</a>
<a href="" class="navlink">Nav Item 2</a>
<a href="" class="navlink">Nav Item 3</a>
<a href="" class="navlink">Nav Item 5</a>
</div>
</div>
</footer>
</body>
</html>