-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
144 lines (142 loc) · 8.29 KB
/
about.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>About</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="container">
<div id="header">
<img src="images/Gridzilla.png">
<input type="text" name="search" placeholder="Enter your search...">
</div>
<ul id="nav">
<li><a href="home.html">HOME<span></span></a></li>
<li><a href="#" class="active">ABOUT<span></span></a></li>
<li><a href="blog.html">BLOG<span></span></a></li>
<li><a href="contact.html">CONTACT<span></span></a></li>
</ul>
<div class="wrapper">
<h1>About Us. Our Mission. Shortcodes. Tons More!</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.
Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Duis sagittis ipsum. Praesent mauris. Maecenas in magna mollis lectus lacinia mollis.
</div>
<div class="wrapper">
<img id="mike" src="images/mike.png">
<p>Maecenas ipsum metus, semper hendrerit varius mattis, hasr congue sit amet tellus.
Aliquam ullamcorper dui sed magna posuere ut elem entum enim rutrum. Nam mi erat, porta idso ultrices nec, pellentesq ue vel nunc.
Cras varius fermentum iaculis. Aenean sodales nibh non lectus tempor a interdumni justo ultricies.
Sed luctus dui nec ni sl tem pus faucibus sit amet et sem. Aenean augue sapien, sodales ac bibendum ut, pellentesque id eros.
Duis tristique porta aliquam. Curabitur sagittis tincidunt erat, quis hendrerit nibh iaculis vitae.
</p><br>
<p>
Pellentesque ultricies nisl quis odio posuere facilisis. In ut felis erat, ac laoreet orci. Sed lectus nulla, bibendum at vulputate
sit amet, tincidunt volutpat lorem. Maecenas in magna mollis lectus lacinia mollis. Donec sit amet volutpat lorem.
Pellentesque ultricies nisl quis odio posuere facilisis. In ut felis erat, ac laoreet orci. Aenean augue sapien, sodales ac bibendum ut,
pellentesque id eros. Maecenas ipsum metus, semper hendrerit varius mattis, congue sit amet tellus. Aliquam ullamcorper dui sed magna
posuere ut elementum enim rutrum. Nam mi erat, porta id ultrices nec, pellentesque vel nunc. Cras varius fermentum iaculis.
Aenean sodales nibh non lectus tempor a interdum.
</p>
</div>
<div class="wrapper">
<p>
Maecenas ipsum metus, semper hendrerit varius mattis, congue sit amet tellus. Aliquam ullamcorper dui sed magna posuere ut elementum
enim rutrum. Nam mi erat, porta id ultrices nec, pellentesque vel nunc. Cras varius fermentum iaculis. Aenean sodales nibh non lectus
tempor a interdum justo ultricies. Sed luctus dui nec nisl tempus faucibus sit amet et sem. Aenean augue sapien, sodales ac bibendum ut,
pellentesque id eros.
</p>
<p>
Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus ante at est.
Sed pretium metus sit amet erat blandit vitae pulvinar lorem egestas. Sed lectus nulla, bibendum at vulputate sit amet,
tincidunt volutpat lorem. Maecenas in magna mollis lectus lacinia mollis. Donec sit amet volutpat lorem. Duis tristique porta aliquam.
Curabitur sagittis tincidunt erat, quis hendrerit nibh iaculis vitae.
</p>
<p>
<span id="firstLetter">D</span>Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus ante at est.
Sed pretium metus sit amet erat blandit vitae pulvinar lorem egestas. Sed lectus nulla, bibendum at vulputate sit amet, tincidunt volutpat lorem.
Maecenas in magna mollis lectus lacinia mollis. Donec sit amet volutpat lorem. Duis tristique porta aliquam.
Curabitur sagittis tincidunt erat, quis hendrerit nibh iaculis vitae. Pellentesque ultricies nisl quis odio posuere facilisis.
In ut felis erat, ac laoreet orci.
</p>
</div>
<blockquote>
Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus ante at est. Sed pretium metus sit amet erat blandit
vitae pulvinar lorem egestas. Sed lectus nulla, bibendum at vulputate sit amet, tincidunt volutpat lorem. Mae trenas in magna mollis lectus
lacinia mollis. Donec sit amet volutpat lorem. Du tristique porta aliquam. Curabitur sagittis tincidunt erat, quis hendrerit nibh iaculis vitae.
Pellentesque ultric nisl quis odio posuere facilisis. In ut felis erat, ac laoreet orci donec sed nulla at sit amet.
</blockquote>
<div class="wrapper two-col">
<p>
Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus ante at est. Sed pretium metus sit amet erat blandit
vitae pulvinar lorem egestas. Sed lectus nulla, bibendum at vulputate sit amet, tincidunt volutpat lorem.
</p>
<p>
Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus ante at est. Sed pretium metus sit amet erat blandit
vitae pulvinar lorem egestas. Sed lectus nulla, bibendum at vulputate sit amet, tincidunt volutpat lorem.
</p>
</div>
<div class="wrapper three-col">
<p>
Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus ante at est. Sed pretium metus sit amet erat blandit
vitae pulvinar lorem egestas.
</p>
<p>
Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus ante at est. Sed pretium metus sit amet erat blandit
vitae pulvinar lorem egestas.
</p>
<p>
Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus ante at est. Sed pretium metus sit amet erat blandit
vitae pulvinar lorem egestas.
</p>
</div>
<div id="buttons">
<button class="button green-button" type="button">Button Text</button>
<button class="button gray-button" type="button">Button Text</button>
<button class="button blue-button" type="button">Button Text</button>
<button class="button orange-button" type="button">Button Text</button>
<button class="button purple-button" type="button">Button Text</button>
<button class="button red-button" type="button">Button Text</button>
<button class="button lightblue-button" type="button">Button Text</button>
</div>
<div class="alerts">
<div class="alert green-alert">
<p>Alert Text</p>
</div>
<div class="alert red-alert">
<p>Alert Text</p>
</div>
<div class="alert orange-alert">
<p>Alert Text</p>
</div>
<div class="alert blue-alert">
<p>Alert Text</p>
</div>
</div>
<footer>
<div id="social-media">
<a href="http://twitter.com" class="social-icon">
<img src="images/Twitter%20Icon.png">
</a>
<a href="http://rss.com" class="social-icon">
<img src="images/RSS%20Icon.png">
</a>
<a href="http://facebook.com" class="social-icon">
<img src="images/Facebook%20Icon.png">
</a>
<a href="http://pinterest.com" class="social-icon">
<img src="images/Pinterest.png">
</a>
</div>
<div id="contacts">
<h4>Best PSD Freebies | [email protected]</h4>
<p>
Copyright 2012 Gridzilla Theme
<a href="http://bestpsdfreebies.com">www.bestpsdfreebies.com</a>
</p>
</div>
</footer>
</div>
</body>
</html>