-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
137 lines (136 loc) · 8.2 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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html>
<head>
<title>Recreate Surf and Paddle</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Stylesheets go here. -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/global.css" />
</head>
<body>
<header class="logo">
<div class="container">
<div class="row">
<div class="col-sm-6 top-left">
<img class="logo-left" src="img/logo-surf-and-paddle.svg" alt="surf and paddle logo"/>
SURF & PADDLE CO.BLOG
</div>
<div class="col-sm-6 text-right logo_right">
<a href="#">ABOUT</a>
<a href="#">SEARCH</a>
<i class="fa fa-search" aria-hidden="true"></i>
</div>
</div>
<div class="row logo_center">
<div class="col-sm-12 text-center">
<br /><br /><br />
<h1>SURF & PADDLE CO.</h1>
<p>An Ironyard Academy Project Est. Fall 2013
</div>
</div>
</div>
</header>
<br />
<div class="container middle-container">
<div class="row">
<div class="col-sm-8 left-section">
<div class="middle_left_1">
<h2>A FANTASTIC ENGAGING<br />HEADLINE GOES HERE</h2>
<p><img class="img-circle" src="http://unsplash.it/600?image=40" alt=""><span class="blue"> Anne Marie</span> <span>on <u>Monday Oct. 7th 9:22pm</u></span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="middle_left_2">
<h3>WOAH, THAT'S RADICAL!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="buttons">
<div><i class="fa fa-comment-o" aria-hidden="true"></i></div>
<div>Read Comments</div>
</div>
<div class="buttons">
<div><i class="fa fa-cloud-upload btn1" aria-hidden="true"></i></div>
<div>Read Later</div>
</div>
<div class="buttons btn-third">
<div><i class="fa fa-share-square" aria-hidden="true"></i></div>
<div>Share This Post</div>
</div>
</div>
</div>
<br />
<div class="col-sm-4 right-section text-center">
<div class="middle_right_1">
<div>
<img class="img-circle" src="http://unsplash.it/80/80?image=40" alt="middle right pic1" />
</div>
<h6>ANNE MARIE</h6>
<p>
<a href="http://twitter.com">Twitter </a>
<a href="http://facebook.com">Facebook</a>
<a href="http://instagram.com">Instagram</a>
</p>
</div>
<br />
<div class="middle_right_2 text-right img-responsive">
<img src="https://unsplash.it/768/?image=44" alt="middle right pic2">
<p>
<u>About This Ad</u>
</p>
</div>
<br />
<div class="middle_right_3 text-left">
<h6>SIDEBAR HEADING SECTION</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
<hr />
<div class="container-fluid bottom-container">
<div class="row">
<div class="col-sm-12 text-center">
<h1>MOST POPULAR POSTS</h1>
</div>
</div>
<div class="row">
<div class="pics-section img-responsive">
<div class="pics pic1">
<h1>ANOTHER COOL POST</h1>
</div>
<div class="pics pic2">
<h1>POST TITLE</h1>
</div>
<div class="pics pic3">
<h1>HERE'S ANOTHER<br /> LONGER POST TITLE</h1>
</div>
<div class="pics pic4">
<h1>OH COOL A POST!</h1>
</div>
</div>
</div>
<div class="row text-center bottom-section">
<div class="col-sm-6">
<img class="iron-yard" src="/img/iron-yard-logo.svg" alt="">
The Ironyard Copyright 2013, All rights reserved
</div>
<div class="col-sm-6 footer-right">
<ul>
<li class="border"><a href="#">Nav Item 1</a></li>
<li class="border"><a href="#">Nav Item 2</a></li>
<li class="border"><a href="#">Nav Item 3</a></li>
<li><a href="#">Nav Item 5</a></li>
</ul>
</div>
</div>
</div>
<!-- Scripts go here. -->
<script src="https://use.fontawesome.com/622f283375.js"></script>
<script type="text/javascript" src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch"></script>
<script type="text/javascript" src="global.js"></script>
</body>
</html>