-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
167 lines (158 loc) · 10.1 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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html>
<head>
<title>blog mockup</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="blog-content">
<div class="blog-header">
<header class="blog-title">My Website</header>
</div>
<nav>
<ul class="nav-list">
<li class="nav-list-item"><a class="nav-link link-hover" href="#">Home</a></li><!--
--><li class="nav-list-item"><a class="nav-link link-hover" href="#">All Posts</a></li><!--
--><li class="nav-list-item"><a class="nav-link link-hover" href="#">About Us</a></li>
</ul>
</nav>
<div class="sidebar-container" type="sidebar">
<div class="sidebar-content">
<ul class="sidebar-list">Recent Posts <br><br>
<li class="sidebar-list-item"><a class="text-link link-hover" href="#">Another Post</a></li>
<li class="sidebar-list-item"><a class="text-link link-hover" href="#">A Cool Story</a></li>
<li class="sidebar-list-item"><a class="text-link link-hover" href="#">Useful Tips and Tricks</a></li>
</ul>
<ul class="sidebar-list">Categories <br><br>
<li class="sidebar-list-item"><a class="text-link link-hover" href="#">Web</a></li>
<li class="sidebar-list-item"><a class="text-link link-hover" href="#">Dev</a></li>
<li class="sidebar-list-item"><a class="text-link link-hover" href="#">Css</a></li>
</ul>
</div>
</div>
<div class="blog-body">
<Article>
<h1 class="article-title">Article Title</h1>
<p>Nulla porttitor sagittis sem ac luctus. Morbi ac blandit metus, sed feugiat sapien. Proin nec justo diam. Nullam scelerisque, sapien eu iaculis pellentesque, mi nulla dapibus ex, sit amet porttitor mi ipsum vehicula turpis. Sed ornare neque nec sapien vulputate, et posuere neque finibus. Sed placerat, diam eget laoreet tincidunt, augue nunc tincidunt ligula, nec volutpat massa sem sit amet urna. Duis dignissim tortor ac dapibus finibus. Suspendisse eros sapien, tincidunt non velit faucibus, dignissim consectetur est.</p>
<p>Quisque sollicitudin libero vel lacus pharetra, eu congue justo commodo. Nunc mattis suscipit orci nec cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi metus tellus, sollicitudin eget ligula sit amet, varius convallis nibh. Nulla molestie rhoncus risus eget condimentum.</p>
<section>
<h3 class="section-title">Section Title</h3>
<p>Etiam eu tristique mi. Curabitur malesuada arcu pharetra nisi fermentum, in tincidunt orci interdum. Proin pellentesque urna at massa gravida ultrices. Aliquam facilisis, magna consequat sodales convallis, velit turpis lobortis libero, at vehicula quam quam eu ligula. </p>
<table>
<thead>
<tr>
<th class="table-cell table-head-cell">What</th>
<th class="table-cell table-head-cell">Where</th>
<th class="table-cell table-head-cell">How</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-cell">HTML</td>
<td class="table-cell">Curabitur tristique sapien nulla, vitae aliquet urna aliquam in. Cras varius urna in consectetur commodo. Nam interdum ut nunc ut lobortis. Interdum et malesuada fames ac ante ipsum primis in faucibus. </td>
<td class="table-cell"><button class="table-button" href="#">Go!</button></td>
</tr>
<tr>
<td class="table-cell">CSS</td>
<td class="table-cell">Sed eu condimentum mi. Donec tristique aliquet sem et vestibulum. Donec iaculis laoreet est, a mattis metus tempor nec. Nullam ornare lorem in eros ultricies, ut viverra nunc placerat. Donec congue augue eu tempor pulvinar.</td>
<td class="table-cell"><button class="table-button" href="#">Try!</button></td>
</tr>
<tr>
<td class="table-cell">JS</td>
<td class="table-cell">Phasellus consectetur tortor a tincidunt tristique. Ut a massa ut lorem aliquam elementum. Phasellus ac convallis nibh. Proin quis justo consectetur, pretium tortor id, vestibulum est.</td>
<td class="table-cell"><button class="table-button" href="#">View!</button></td>
</tr>
</tbody>
</table>
<p>Quisque massa diam, egestas eu ornare ut, bibendum non nisi. Nam gravida tempus velit non varius. Vestibulum non dolor mollis nulla mattis consequat eu vel dui. Donec scelerisque mollis rhoncus. Curabitur nec orci in nunc imperdiet commodo accumsan nec mauris. Aliquam quis orci nibh. Etiam sodales maximus ipsum sed ultricies. Morbi placerat enim accumsan nulla scelerisque, ac facilisis turpis condimentum.</p>
</section>
<section>
<h3 class="section-title">Section Title</h3>
<p>Ut ac cursus arcu. Duis et molestie nunc. Mauris venenatis justo massa, vitae ornare ipsum interdum sit amet. Duis sit amet est nec elit vulputate feugiat. Quisque quis aliquet purus. Quisque ut aliquam augue. Donec ultrices egestas tempor. Donec sed eros non metus posuere ultrices. Curabitur convallis nibh vitae erat dignissim, vitae pharetra massa luctus. Duis volutpat dolor vitae nulla aliquet, sed hendrerit sapien condimentum. </p>
<div class="code-example-container">
<p class="code-example">$('#myElement').click(function() {<br +/> console.log('clicked!')<br + />});</p>
</div>
<p>Vivamus sit amet sapien sed neque vulputate molestie vitae eget ante. Donec malesuada sed arcu sit amet vulputate. Integer vitae vulputate nibh. Sed vehicula scelerisque libero, lobortis tincidunt ante iaculis eu. Etiam interdum odio a ante sollicitudin efficitur. Cras sit amet eros ullamcorper, suscipit sapien eget, convallis nisi.</p>
<p>In ligula enim, posuere et ex eu, tristique ornare felis. Donec sed neque purus. Nulla nec nibh efficitur, vehicula purus quis, aliquet diam. Aliquam viverra tortor in nisl auctor egestas. Vivamus bibendum egestas erat in tincidunt. </p>
</section>
<section>
<h3 class="section-title">Section Title</h3>
<p>Aenean ultricies ultrices arcu, ac dapibus tellus condimentum sit amet. Nam molestie metus massa. Nam a tellus ac tortor feugiat porttitor sed vitae enim.</p>
<div class="body-image-container">
<img class="body-image" src="http://placehold.it/800x600">
</div>
<ol>
<li class="body-list-item"><strong>Create HTML:</strong> Integer pretium et nisi a accumsan. Aenean id ex nisi. Maecenas sed velit tellus. Nunc vulputate feugiat sollicitudin. Donec cursus finibus feugiat. Nulla tristique justo quis ante mattis, a mattis justo commodo. </p></li>
<li class="body-list-item"><strong>Make Pretty with CSS:</strong> Integer pulvinar ullamcorper enim, ut euismod lectus scelerisque sit amet. Etiam vitae augue venenatis, consectetur quam a, volutpat lectus. Aliquam iaculis dictum consequat. Donec nec convallis eros, eu auctor ante.</p></li>
<li class="body-list-item"><strong>Profit:</strong> Nam condimentum sit amet nulla at congue. Praesent non placerat erat, et posuere elit. Ut molestie ex vel iaculis pharetra. Vivamus eu iaculis arcu. Vestibulum ut gravida orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
</ol>
</section>
<footer class="article-footer">Posted by <span class="author"><strong>Author</strong></span> under <span class="section-name"><strong>Web>Dev</strong></span> on <span class="date"><strong>September 3rd, 2015</strong></span></footer>
</Article>
<div class="comment-section">
<h1>Comments</h1>
<hr class="line-before"/><h5 class="comment-break">User Info</h5><hr class="line-after"/>
<form>
<div class="form-line">
<label class="form-label">Email</label>
<input class="form-field" type="text" name="email">
</div>
<div class="form-line">
<label class="form-label">Display Name</label>
<input class="form-field" type="text" name="displayName">
</div>
<div class="form-line">
<label class="form-label">Website</label>
<input class="form-field" type="text" name="website">
</div>
<hr class="line-before"/><h5 class="comment-break">Comment</h5><hr class="line-after"/>
<div class="comment-box-container">
<textarea class="comment-box" name="comment" ></textarea>
</div>
<div class="submit-container">
<input class="submit-button" type="submit" value="SUBMIT">
</div>
</form>
<div class="user-comment-container">
<div class="comment-head">
<img class="profile-pic" src="http://placehold.it/50x50">
<p>User 1</p>
<p>January 01 2000</p>
</div>
<div class="comment-body">
<p>Nullam sodales ipsum id tortor porttitor, eget ornare tortor efficitur. Aliquam lacus mauris, aliquam a enim in, gravida scelerisque purus. Sed egestas sapien lacus, sed varius purus egestas ut.</p>
</div>
<div class="sub-comment-container">
<div class="comment-head">
<img class="profile-pic" src="http://placehold.it/50x50">
<p>User 1</p>
<p>January 01 2000</p>
</div>
<div class="comment-body">
<p>Sed fermentum ipsum eu orci rhoncus gravida. Nullam tempus ex a lacus auctor, vitae aliquet eros malesuada. Nulla dapibus sem nec sapien luctus, quis semper ex aliquet.</p>
</div>
<div class="comment-head">
<img class="profile-pic" src="http://placehold.it/50x50">
<p>User 3</p>
<p>January 01 2000</p>
</div>
<div class="comment-body">
<p>Sed fermentum ipsum eu orci rhoncus gravida. Nullam tempus ex a lacus auctor, vitae aliquet eros malesuada. Nulla dapibus sem nec sapien luctus, quis semper ex aliquet.</p>
</div>
</div>
</div>
<div class="comment-head">
<img class="profile-pic" src="http://placehold.it/50x50">
<p>User 2</p>
<p>January 01 2000</p>
</div>
<div class="comment-body">
<p>Nullam sodales ipsum id tortor porttitor, eget ornare tortor efficitur. Aliquam lacus mauris, aliquam a enim in, gravida scelerisque purus. Sed egestas sapien lacus, sed varius purus egestas ut.</p>
</div>
</div>
</div>
</div>
</body>
</html>