├── ER_Diagram.jpg
├── img
    ├── ad-1.jpg
    ├── ad-2.jpg
    ├── author.png
    ├── avatar.png
    ├── logo.png
    ├── post-1.jpg
    ├── post-2.jpg
    ├── post-3.jpg
    ├── post-4.jpg
    ├── post-5.jpg
    ├── post-6.jpg
    ├── about-1.jpg
    ├── about-2.jpg
    ├── widget-1.jpg
    ├── widget-2.jpg
    ├── widget-3.jpg
    ├── widget-4.jpg
    └── post-page.jpg
├── fonts
    ├── FontAwesome.otf
    ├── fontawesome-webfont.eot
    ├── fontawesome-webfont.ttf
    ├── fontawesome-webfont.woff
    └── fontawesome-webfont.woff2
├── Credits.txt
├── README.md
├── contact.html
├── index.php
├── about.html
├── blank.html
├── category.html
├── blog-post.html
└── css
    ├── style.css
    └── font-awesome.min.css


/ER_Diagram.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bacdong/PHP_Lesson1/HEAD/ER_Diagram.jpg


--------------------------------------------------------------------------------
/img/ad-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bacdong/PHP_Lesson1/HEAD/img/ad-1.jpg


--------------------------------------------------------------------------------
/img/ad-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bacdong/PHP_Lesson1/HEAD/img/ad-2.jpg


--------------------------------------------------------------------------------
/img/author.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bacdong/PHP_Lesson1/HEAD/img/author.png


--------------------------------------------------------------------------------
/img/avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bacdong/PHP_Lesson1/HEAD/img/avatar.png


--------------------------------------------------------------------------------
/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bacdong/PHP_Lesson1/HEAD/img/logo.png


--------------------------------------------------------------------------------
/img/post-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bacdong/PHP_Lesson1/HEAD/img/post-1.jpg


--------------------------------------------------------------------------------
/img/post-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bacdong/PHP_Lesson1/HEAD/img/post-2.jpg


--------------------------------------------------------------------------------
/img/post-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bacdong/PHP_Lesson1/HEAD/img/post-3.jpg


--------------------------------------------------------------------------------
/img/post-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bacdong/PHP_Lesson1/HEAD/img/post-4.jpg


--------------------------------------------------------------------------------
/img/post-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bacdong/PHP_Lesson1/HEAD/img/post-5.jpg


--------------------------------------------------------------------------------
/img/post-6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bacdong/PHP_Lesson1/HEAD/img/post-6.jpg


--------------------------------------------------------------------------------
/img/about-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bacdong/PHP_Lesson1/HEAD/img/about-1.jpg


--------------------------------------------------------------------------------
/img/about-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bacdong/PHP_Lesson1/HEAD/img/about-2.jpg


--------------------------------------------------------------------------------
/img/widget-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bacdong/PHP_Lesson1/HEAD/img/widget-1.jpg


--------------------------------------------------------------------------------
/img/widget-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bacdong/PHP_Lesson1/HEAD/img/widget-2.jpg


--------------------------------------------------------------------------------
/img/widget-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bacdong/PHP_Lesson1/HEAD/img/widget-3.jpg


--------------------------------------------------------------------------------
/img/widget-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bacdong/PHP_Lesson1/HEAD/img/widget-4.jpg


--------------------------------------------------------------------------------
/img/post-page.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bacdong/PHP_Lesson1/HEAD/img/post-page.jpg


--------------------------------------------------------------------------------
/fonts/FontAwesome.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bacdong/PHP_Lesson1/HEAD/fonts/FontAwesome.otf


--------------------------------------------------------------------------------
/fonts/fontawesome-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bacdong/PHP_Lesson1/HEAD/fonts/fontawesome-webfont.eot


--------------------------------------------------------------------------------
/fonts/fontawesome-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bacdong/PHP_Lesson1/HEAD/fonts/fontawesome-webfont.ttf


--------------------------------------------------------------------------------
/fonts/fontawesome-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bacdong/PHP_Lesson1/HEAD/fonts/fontawesome-webfont.woff


--------------------------------------------------------------------------------
/fonts/fontawesome-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bacdong/PHP_Lesson1/HEAD/fonts/fontawesome-webfont.woff2


--------------------------------------------------------------------------------
/Credits.txt:
--------------------------------------------------------------------------------
1 | Credits:
2 | Jquery
3 | Bootstrap
4 | Font-awesome
5 | Images : Unsplash
6 | Goolgle fonts : Nunito & Nunito-Sans


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # PHP_Lesson1
2 | Exercise in PHP & MySQL Basic courses online. This is a first exercise.
3 | 
4 | All PHP repositories are completed with the support of the Zent Education team.
5 | 
6 | Especially mentor Vu Van Thuong (Founder Zent - Education).
7 | 


--------------------------------------------------------------------------------
/contact.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="utf-8">
  5 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 		 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  8 | 
  9 | 		<title>WebMag HTML Template</title>
 10 | 
 11 | 		<!-- Google font -->
 12 | 		<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:700%7CNunito:300,600" rel="stylesheet"> 
 13 | 
 14 | 		<!-- Bootstrap -->
 15 | 		<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"/>
 16 | 
 17 | 		<!-- Font Awesome Icon -->
 18 | 		<link rel="stylesheet" href="css/font-awesome.min.css">
 19 | 
 20 | 		<!-- Custom stlylesheet -->
 21 | 		<link type="text/css" rel="stylesheet" href="css/style.css"/>
 22 | 
 23 | 		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 24 | 		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 25 | 		<!--[if lt IE 9]>
 26 | 		  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
 27 | 		  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 28 | 		<![endif]-->
 29 | 
 30 |     </head>
 31 | 	<body>
 32 | 		
 33 | 		<!-- Header -->
 34 | 		<header id="header">
 35 | 			<!-- Nav -->
 36 | 			<div id="nav">
 37 | 				<!-- Main Nav -->
 38 | 				<div id="nav-fixed">
 39 | 					<div class="container">
 40 | 						<!-- logo -->
 41 | 						<div class="nav-logo">
 42 | 							<a href="index.html" class="logo"><img src="./img/logo.png" alt=""></a>
 43 | 						</div>
 44 | 						<!-- /logo -->
 45 | 
 46 | 						<!-- nav -->
 47 | 						<ul class="nav-menu nav navbar-nav">
 48 | 							<li><a href="category.html">News</a></li>
 49 | 							<li><a href="category.html">Popular</a></li>
 50 | 							<li class="cat-1"><a href="category.html">Web Design</a></li>
 51 | 							<li class="cat-2"><a href="category.html">JavaScript</a></li>
 52 | 							<li class="cat-3"><a href="category.html">Css</a></li>
 53 | 							<li class="cat-4"><a href="category.html">Jquery</a></li>
 54 | 						</ul>
 55 | 						<!-- /nav -->
 56 | 
 57 | 						<!-- search & aside toggle -->
 58 | 						<div class="nav-btns">
 59 | 							<button class="aside-btn"><i class="fa fa-bars"></i></button>
 60 | 							<button class="search-btn"><i class="fa fa-search"></i></button>
 61 | 							<div class="search-form">
 62 | 								<input class="search-input" type="text" name="search" placeholder="Enter Your Search ...">
 63 | 								<button class="search-close"><i class="fa fa-times"></i></button>
 64 | 							</div>
 65 | 						</div>
 66 | 						<!-- /search & aside toggle -->
 67 | 					</div>
 68 | 				</div>
 69 | 				<!-- /Main Nav -->
 70 | 
 71 | 				<!-- Aside Nav -->
 72 | 				<div id="nav-aside">
 73 | 					<!-- nav -->
 74 | 					<div class="section-row">
 75 | 						<ul class="nav-aside-menu">
 76 | 							<li><a href="index.html">Home</a></li>
 77 | 							<li><a href="about.html">About Us</a></li>
 78 | 							<li><a href="#">Join Us</a></li>
 79 | 							<li><a href="#">Advertisement</a></li>
 80 | 							<li><a href="contact.html">Contacts</a></li>
 81 | 						</ul>
 82 | 					</div>
 83 | 					<!-- /nav -->
 84 | 
 85 | 					<!-- widget posts -->
 86 | 					<div class="section-row">
 87 | 						<h3>Recent Posts</h3>
 88 | 						<div class="post post-widget">
 89 | 							<a class="post-img" href="blog-post.html"><img src="./img/widget-2.jpg" alt=""></a>
 90 | 							<div class="post-body">
 91 | 								<h3 class="post-title"><a href="blog-post.html">Pagedraw UI Builder Turns Your Website Design Mockup Into Code Automatically</a></h3>
 92 | 							</div>
 93 | 						</div>
 94 | 
 95 | 						<div class="post post-widget">
 96 | 							<a class="post-img" href="blog-post.html"><img src="./img/widget-3.jpg" alt=""></a>
 97 | 							<div class="post-body">
 98 | 								<h3 class="post-title"><a href="blog-post.html">Why Node.js Is The Coolest Kid On The Backend Development Block!</a></h3>
 99 | 							</div>
100 | 						</div>
101 | 
102 | 						<div class="post post-widget">
103 | 							<a class="post-img" href="blog-post.html"><img src="./img/widget-4.jpg" alt=""></a>
104 | 							<div class="post-body">
105 | 								<h3 class="post-title"><a href="blog-post.html">Tell-A-Tool: Guide To Web Design And Development Tools</a></h3>
106 | 							</div>
107 | 						</div>
108 | 					</div>
109 | 					<!-- /widget posts -->
110 | 
111 | 					<!-- social links -->
112 | 					<div class="section-row">
113 | 						<h3>Follow us</h3>
114 | 						<ul class="nav-aside-social">
115 | 							<li><a href="#"><i class="fa fa-facebook"></i></a></li>
116 | 							<li><a href="#"><i class="fa fa-twitter"></i></a></li>
117 | 							<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
118 | 							<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
119 | 						</ul>
120 | 					</div>
121 | 					<!-- /social links -->
122 | 
123 | 					<!-- aside nav close -->
124 | 					<button class="nav-aside-close"><i class="fa fa-times"></i></button>
125 | 					<!-- /aside nav close -->
126 | 				</div>
127 | 				<!-- Aside Nav -->
128 | 			</div>
129 | 			<!-- /Nav -->
130 | 			
131 | 			<!-- Page Header -->
132 | 			<div class="page-header">
133 | 				<div class="container">
134 | 					<div class="row">
135 | 						<div class="col-md-10">
136 | 							<ul class="page-header-breadcrumb">
137 | 								<li><a href="index.html">Home</a></li>
138 | 								<li>Contact</li>
139 | 							</ul>
140 | 							<h1>Contact</h1>
141 | 						</div>
142 | 					</div>
143 | 				</div>
144 | 			</div>
145 | 			<!-- /Page Header -->
146 | 		</header>
147 | 		<!-- /Header -->
148 | 
149 | 		<!-- section -->
150 | 		<div class="section">
151 | 			<!-- container -->
152 | 			<div class="container">
153 | 				<!-- row -->
154 | 				<div class="row">
155 | 					<div class="col-md-6">
156 | 						<div class="section-row">
157 | 							<h3>Contact Information</h3>
158 | 							<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.</p>
159 | 							<ul class="list-style">
160 | 								<li><p><strong>Email:</strong> <a href="#">Webmag@email.com</a></p></li>
161 | 								<li><p><strong>Phone:</strong> 213-520-7376</p></li>
162 | 								<li><p><strong>Address:</strong> 3770 Oliver Street</p></li>
163 | 							</ul>
164 | 						</div>
165 | 					</div>
166 | 					<div class="col-md-5 col-md-offset-1">
167 | 						<div class="section-row">
168 | 							<h3>Send A Message</h3>
169 | 							<form>
170 | 								<div class="row">
171 | 									<div class="col-md-7">
172 | 										<div class="form-group">
173 | 											<span>Email</span>
174 | 											<input class="input" type="email" name="email">
175 | 										</div>
176 | 									</div>
177 | 									<div class="col-md-7">
178 | 										<div class="form-group">
179 | 											<span>Subject</span>
180 | 											<input class="input" type="text" name="subject">
181 | 										</div>
182 | 									</div>
183 | 									<div class="col-md-12">
184 | 										<div class="form-group">
185 | 											<textarea class="input" name="message" placeholder="Message"></textarea>
186 | 										</div>
187 | 										<button class="primary-button">Submit</button>
188 | 									</div>
189 | 								</div>
190 | 							</form>
191 | 						</div>
192 | 					</div>
193 | 				</div>
194 | 				<!-- /row -->
195 | 			</div>
196 | 			<!-- /container -->
197 | 		</div>
198 | 		<!-- /section -->
199 | 
200 | 		<!-- Footer -->
201 | 		<footer id="footer">
202 | 			<!-- container -->
203 | 			<div class="container">
204 | 				<!-- row -->
205 | 				<div class="row">
206 | 					<div class="col-md-5">
207 | 						<div class="footer-widget">
208 | 							<div class="footer-logo">
209 | 								<a href="index.html" class="logo"><img src="./img/logo.png" alt=""></a>
210 | 							</div>
211 | 							<ul class="footer-nav">
212 | 								<li><a href="#">Privacy Policy</a></li>
213 | 								<li><a href="#">Advertisement</a></li>
214 | 							</ul>
215 | 							<div class="footer-copyright">
216 | 								<span>&copy; <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
217 | Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
218 | <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></span>
219 | 							</div>
220 | 						</div>
221 | 					</div>
222 | 
223 | 					<div class="col-md-4">
224 | 						<div class="row">
225 | 							<div class="col-md-6">
226 | 								<div class="footer-widget">
227 | 									<h3 class="footer-title">About Us</h3>
228 | 									<ul class="footer-links">
229 | 										<li><a href="about.html">About Us</a></li>
230 | 										<li><a href="#">Join Us</a></li>
231 | 										<li><a href="contact.html">Contacts</a></li>
232 | 									</ul>
233 | 								</div>
234 | 							</div>
235 | 							<div class="col-md-6">
236 | 								<div class="footer-widget">
237 | 									<h3 class="footer-title">Catagories</h3>
238 | 									<ul class="footer-links">
239 | 										<li><a href="category.html">Web Design</a></li>
240 | 										<li><a href="category.html">JavaScript</a></li>
241 | 										<li><a href="category.html">Css</a></li>
242 | 										<li><a href="category.html">Jquery</a></li>
243 | 									</ul>
244 | 								</div>
245 | 							</div>
246 | 						</div>
247 | 					</div>
248 | 
249 | 					<div class="col-md-3">
250 | 						<div class="footer-widget">
251 | 							<h3 class="footer-title">Join our Newsletter</h3>
252 | 							<div class="footer-newsletter">
253 | 								<form>
254 | 									<input class="input" type="email" name="newsletter" placeholder="Enter your email">
255 | 									<button class="newsletter-btn"><i class="fa fa-paper-plane"></i></button>
256 | 								</form>
257 | 							</div>
258 | 							<ul class="footer-social">
259 | 								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
260 | 								<li><a href="#"><i class="fa fa-twitter"></i></a></li>
261 | 								<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
262 | 								<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
263 | 							</ul>
264 | 						</div>
265 | 					</div>
266 | 
267 | 				</div>
268 | 				<!-- /row -->
269 | 			</div>
270 | 			<!-- /container -->
271 | 		</footer>
272 | 		<!-- /Footer -->
273 | 
274 | 		<!-- jQuery Plugins -->
275 | 		<script src="js/jquery.min.js"></script>
276 | 		<script src="js/bootstrap.min.js"></script>
277 | 		<script src="js/main.js"></script>
278 | 
279 | 	</body>
280 | </html>
281 | 


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 	$serverName = "localhost";
  3 | 
  4 | 	$username = "root";
  5 | 
  6 | 	$password = "";
  7 | 
  8 | 	$dbName = "myblog";
  9 | 
 10 | 	$connection = new mysqli($serverName, $username, $password, $dbName);
 11 | 
 12 | 	$query = "SELECT * FROM posts ORDER BY created_at desc limit 6;";
 13 | 
 14 | 	$result = $connection->query($query);
 15 | 
 16 | 	$posts = array();
 17 | 
 18 | 	while($row = $result->fetch_assoc()) {
 19 | 		$posts[] = $row;
 20 | 	}
 21 | 
 22 | 	//In ra bài viết lớn 
 23 | 	$query_2 = "SELECT * FROM posts ORDER BY created_at desc limit 6,1;";
 24 | 
 25 | 	$result_2 = $connection->query($query_2);
 26 | 
 27 | 	$posts_2 = array();
 28 | 
 29 | 	while($row = $result_2->fetch_assoc()) {
 30 | 		$posts_2[] = $row;
 31 | 	}
 32 | 
 33 | 	//In ra tiếp tục 6 bài sau bài viết lớn
 34 | 	$query_3 = "SELECT * FROM posts ORDER BY created_at desc limit 7,6;";
 35 | 
 36 | 	$result_3 = $connection->query($query_3);
 37 | 
 38 | 	$posts_3 = array();
 39 | 
 40 | 	while($row = $result_3->fetch_assoc()) {
 41 | 		$posts_3[] = $row;
 42 | 	}
 43 | 
 44 | 	// $query2 = "SELECT * FROM categories ORDER BY created_at desc limit 6;";
 45 | 
 46 | 	// $result2 = $connection->query($query2);
 47 | 
 48 | 	// $categories = array2();
 49 | 
 50 | 	// while($row2 = $result2->fetch_assoc()) {
 51 | 	// 	$categories[] = $row2;
 52 | 	// }
 53 | 
 54 | 	// foreach ($posts as $cate) {
 55 | 	// 	echo "<pre>";
 56 | 	// 	print_r($cate);
 57 | 	// 	echo "<pre>";
 58 | 	// }
 59 | ?>
 60 | 
 61 | <!DOCTYPE html>
 62 | <html lang="en">
 63 | 	<head>
 64 | 		<meta charset="utf-8">
 65 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 66 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 67 | 		 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
 68 | 
 69 | 		<title>My Blogs | Dương Bắc Đông</title>
 70 | 
 71 | 		<!-- Google font -->
 72 | 		<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:700%7CNunito:300,600" rel="stylesheet"> 
 73 | 
 74 | 		<!-- Bootstrap -->
 75 | 		<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"/>
 76 | 
 77 | 		<!-- Font Awesome Icon -->
 78 | 		<link rel="stylesheet" href="css/font-awesome.min.css">
 79 | 
 80 | 		<!-- Custom stlylesheet -->
 81 | 		<link type="text/css" rel="stylesheet" href="css/style.css"/>
 82 | 
 83 | 		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 84 | 		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 85 | 		<!--[if lt IE 9]>
 86 | 		  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
 87 | 		  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 88 | 		<![endif]-->
 89 | 
 90 |     </head>
 91 | 	<body>
 92 | 
 93 | 		<!-- Header -->
 94 | 		<header id="header">
 95 | 			<!-- Nav -->
 96 | 			<div id="nav">
 97 | 				<!-- Main Nav -->
 98 | 				<div id="nav-fixed">
 99 | 					<div class="container">
100 | 						<!-- logo -->
101 | 						<div class="nav-logo">
102 | 							<a href="index.html" class="logo"><img src="./img/logo.png" alt=""></a>
103 | 						</div>
104 | 						<!-- /logo -->
105 | 
106 | 						<!-- nav -->
107 | 						<ul class="nav-menu nav navbar-nav">
108 | 							<li><a href="category.html">News</a></li>
109 | 							<li><a href="category.html">Popular</a></li>
110 | 							<li class="cat-1"><a href="category.html">Web Design</a></li>
111 | 							<li class="cat-2"><a href="category.html">JavaScript</a></li>
112 | 							<li class="cat-3"><a href="category.html">Css</a></li>
113 | 							<li class="cat-4"><a href="category.html">Jquery</a></li>
114 | 						</ul>
115 | 						<!-- /nav -->
116 | 
117 | 						<!-- search & aside toggle -->
118 | 						<div class="nav-btns">
119 | 							<button class="aside-btn"><i class="fa fa-bars"></i></button>
120 | 							<button class="search-btn"><i class="fa fa-search"></i></button>
121 | 							<div class="search-form">
122 | 								<input class="search-input" type="text" name="search" placeholder="Enter Your Search ...">
123 | 								<button class="search-close"><i class="fa fa-times"></i></button>
124 | 							</div>
125 | 						</div>
126 | 						<!-- /search & aside toggle -->
127 | 					</div>
128 | 				</div>
129 | 				<!-- /Main Nav -->
130 | 
131 | 				<!-- Aside Nav -->
132 | 				<div id="nav-aside">
133 | 					<!-- nav -->
134 | 					<div class="section-row">
135 | 						<ul class="nav-aside-menu">
136 | 							<li><a href="index.html">Home</a></li>
137 | 							<li><a href="about.html">About Us</a></li>
138 | 							<li><a href="#">Join Us</a></li>
139 | 							<li><a href="#">Advertisement</a></li>
140 | 							<li><a href="contact.html">Contacts</a></li>
141 | 						</ul>
142 | 					</div>
143 | 					<!-- /nav -->
144 | 
145 | 					<!-- widget posts -->
146 | 					<div class="section-row">
147 | 						<h3>Recent Posts</h3>
148 | 						<div class="post post-widget">
149 | 							<a class="post-img" href="blog-post.html"><img src="./img/widget-2.jpg" alt=""></a>
150 | 							<div class="post-body">
151 | 								<h3 class="post-title"><a href="blog-post.html">Pagedraw UI Builder Turns Your Website Design Mockup Into Code Automatically</a></h3>
152 | 							</div>
153 | 						</div>
154 | 
155 | 						<div class="post post-widget">
156 | 							<a class="post-img" href="blog-post.html"><img src="./img/widget-3.jpg" alt=""></a>
157 | 							<div class="post-body">
158 | 								<h3 class="post-title"><a href="blog-post.html">Why Node.js Is The Coolest Kid On The Backend Development Block!</a></h3>
159 | 							</div>
160 | 						</div>
161 | 
162 | 						<div class="post post-widget">
163 | 							<a class="post-img" href="blog-post.html"><img src="./img/widget-4.jpg" alt=""></a>
164 | 							<div class="post-body">
165 | 								<h3 class="post-title"><a href="blog-post.html">Tell-A-Tool: Guide To Web Design And Development Tools</a></h3>
166 | 							</div>
167 | 						</div>
168 | 					</div>
169 | 					<!-- /widget posts -->
170 | 
171 | 					<!-- social links -->
172 | 					<div class="section-row">
173 | 						<h3>Follow us</h3>
174 | 						<ul class="nav-aside-social">
175 | 							<li><a href="#"><i class="fa fa-facebook"></i></a></li>
176 | 							<li><a href="#"><i class="fa fa-twitter"></i></a></li>
177 | 							<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
178 | 							<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
179 | 						</ul>
180 | 					</div>
181 | 					<!-- /social links -->
182 | 
183 | 					<!-- aside nav close -->
184 | 					<button class="nav-aside-close"><i class="fa fa-times"></i></button>
185 | 					<!-- /aside nav close -->
186 | 				</div>
187 | 				<!-- Aside Nav -->
188 | 			</div>
189 | 			<!-- /Nav -->
190 | 		</header>
191 | 		<!-- /Header -->
192 | 
193 | 		<!-- section -->
194 | 		<div class="section">
195 | 			<!-- container -->
196 | 			<div class="container">
197 | 				<!-- row -->
198 | 				<div class="row">
199 | 					<div class="col-md-12">
200 | 						<div class="section-title">
201 | 							<h2>Recent Posts</h2>
202 | 						</div>
203 | 					</div>
204 | 
205 | 					<?php
206 | 						foreach ($posts as $post) {
207 | 					?>
208 | 					<!-- post -->
209 | 					<div class="col-md-4">
210 | 						<div class="post">
211 | 							<a class="post-img" href="blog-post.html"><img src="<?php echo $post['image']; ?>" alt="" height="150px"></a>
212 | 							<div class="post-body">
213 | 								<div class="post-meta">
214 | 									<a class="post-category cat-1" href="category.html">Web Design</a>
215 | 									<span class="post-date"><?php echo $post['created_at']; ?></span>
216 | 								</div>
217 | 								<h3 class="post-title"><a href="blog-post.html"><?php echo $post['title']; ?></a></h3>
218 | 							</div>
219 | 						</div>
220 | 					</div>
221 | 					<!-- /post -->
222 | 					<?php } ?>
223 | 
224 | 				</div>
225 | 				<!-- /row -->
226 | 
227 | 				<!-- row -->
228 | 				<div class="row">
229 | 					<div class="col-md-8">
230 | 						<div class="row">
231 | 							<!-- post -->
232 | 							<?php 
233 | 								foreach ($posts_2 as $post2) {
234 | 							?>
235 | 							<div class="col-md-12">
236 | 								<div class="post post-thumb">
237 | 									<a class="post-img" href="blog-post.html"><img src="<?php echo $post2['image']; ?>" alt=""></a>
238 | 									<div class="post-body">
239 | 										<div class="post-meta">
240 | 											<a class="post-category cat-3" href="category.html">Jquery</a>
241 | 											<span class="post-date"><?php echo $post2['created_at']; ?></span>
242 | 										</div>
243 | 										<h3 class="post-title"><a href="blog-post.html"><?php echo $post2['title']; ?></a></h3>
244 | 									</div>
245 | 								</div>
246 | 							</div>
247 | 							<?php } ?>
248 | 							<!-- /post -->
249 | 
250 | 							<?php 
251 | 								foreach ($posts_3 as $post3) {
252 | 							?>
253 | 							<!-- post -->
254 | 							<div class="col-md-6">
255 | 								<div class="post">
256 | 									<a class="post-img" href="blog-post.html"><img src="<?php echo $post3['image']; ?>" alt="" height="150px"></a>
257 | 									<div class="post-body">
258 | 										<div class="post-meta">
259 | 											<a class="post-category cat-4" href="category.html">Css</a>
260 | 											<span class="post-date"><?php echo $post3['created_at']; ?></span>
261 | 										</div>
262 | 										<h3 class="post-title"><a href="blog-post.html"><?php echo $post3['title']; ?></a></h3>
263 | 									</div>
264 | 								</div>
265 | 							</div>
266 | 							<?php } ?>
267 | 							<!-- /post -->
268 | 
269 | 							
270 | 						</div>
271 | 					</div>
272 | 
273 | 				</div>
274 | 				<!-- /row -->
275 | 			</div>
276 | 			<!-- /container -->
277 | 		</div>
278 | 		<!-- /section -->
279 | 
280 | 		<!-- Footer -->
281 | 		<footer id="footer">
282 | 			<!-- container -->
283 | 			<div class="container">
284 | 				<!-- row -->
285 | 				<div class="row">
286 | 					<div class="col-md-5">
287 | 						<div class="footer-widget">
288 | 							<div class="footer-logo">
289 | 								<a href="index.html" class="logo"><img src="./img/logo.png" alt=""></a>
290 | 							</div>
291 | 							<ul class="footer-nav">
292 | 								<li><a href="#">Privacy Policy</a></li>
293 | 								<li><a href="#">Advertisement</a></li>
294 | 							</ul>
295 | 							<div class="footer-copyright">
296 | 								<span>&copy; <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
297 | Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
298 | <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></span>
299 | 							</div>
300 | 						</div>
301 | 					</div>
302 | 
303 | 					<div class="col-md-4">
304 | 						<div class="row">
305 | 							<div class="col-md-6">
306 | 								<div class="footer-widget">
307 | 									<h3 class="footer-title">About Us</h3>
308 | 									<ul class="footer-links">
309 | 										<li><a href="about.html">About Us</a></li>
310 | 										<li><a href="#">Join Us</a></li>
311 | 										<li><a href="contact.html">Contacts</a></li>
312 | 									</ul>
313 | 								</div>
314 | 							</div>
315 | 							<div class="col-md-6">
316 | 								<div class="footer-widget">
317 | 									<h3 class="footer-title">Catagories</h3>
318 | 									<ul class="footer-links">
319 | 										<li><a href="category.html">Web Design</a></li>
320 | 										<li><a href="category.html">JavaScript</a></li>
321 | 										<li><a href="category.html">Css</a></li>
322 | 										<li><a href="category.html">Jquery</a></li>
323 | 									</ul>
324 | 								</div>
325 | 							</div>
326 | 						</div>
327 | 					</div>
328 | 
329 | 					<div class="col-md-3">
330 | 						<div class="footer-widget">
331 | 							<h3 class="footer-title">Join our Newsletter</h3>
332 | 							<div class="footer-newsletter">
333 | 								<form>
334 | 									<input class="input" type="email" name="newsletter" placeholder="Enter your email">
335 | 									<button class="newsletter-btn"><i class="fa fa-paper-plane"></i></button>
336 | 								</form>
337 | 							</div>
338 | 							<ul class="footer-social">
339 | 								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
340 | 								<li><a href="#"><i class="fa fa-twitter"></i></a></li>
341 | 								<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
342 | 								<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
343 | 							</ul>
344 | 						</div>
345 | 					</div>
346 | 
347 | 				</div>
348 | 				<!-- /row -->
349 | 			</div>
350 | 			<!-- /container -->
351 | 		</footer>
352 | 		<!-- /Footer -->
353 | 
354 | 		<!-- jQuery Plugins -->
355 | 		<script src="js/jquery.min.js"></script>
356 | 		<script src="js/bootstrap.min.js"></script>
357 | 		<script src="js/main.js"></script>
358 | 
359 | 	</body>
360 | </html>
361 | 


--------------------------------------------------------------------------------
/about.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="utf-8">
  5 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 		 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  8 | 
  9 | 		<title>WebMag HTML Template</title>
 10 | 
 11 | 		<!-- Google font -->
 12 | 		<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:700%7CNunito:300,600" rel="stylesheet"> 
 13 | 
 14 | 		<!-- Bootstrap -->
 15 | 		<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"/>
 16 | 
 17 | 		<!-- Font Awesome Icon -->
 18 | 		<link rel="stylesheet" href="css/font-awesome.min.css">
 19 | 
 20 | 		<!-- Custom stlylesheet -->
 21 | 		<link type="text/css" rel="stylesheet" href="css/style.css"/>
 22 | 
 23 | 		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 24 | 		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 25 | 		<!--[if lt IE 9]>
 26 | 		  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
 27 | 		  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 28 | 		<![endif]-->
 29 | 
 30 |     </head>
 31 | 	<body>
 32 | 		
 33 | 		<!-- Header -->
 34 | 		<header id="header">
 35 | 			<!-- Nav -->
 36 | 			<div id="nav">
 37 | 				<!-- Main Nav -->
 38 | 				<div id="nav-fixed">
 39 | 					<div class="container">
 40 | 						<!-- logo -->
 41 | 						<div class="nav-logo">
 42 | 							<a href="index.html" class="logo"><img src="./img/logo.png" alt=""></a>
 43 | 						</div>
 44 | 						<!-- /logo -->
 45 | 
 46 | 						<!-- nav -->
 47 | 						<ul class="nav-menu nav navbar-nav">
 48 | 							<li><a href="category.html">News</a></li>
 49 | 							<li><a href="category.html">Popular</a></li>
 50 | 							<li class="cat-1"><a href="category.html">Web Design</a></li>
 51 | 							<li class="cat-2"><a href="category.html">JavaScript</a></li>
 52 | 							<li class="cat-3"><a href="category.html">Css</a></li>
 53 | 							<li class="cat-4"><a href="category.html">Jquery</a></li>
 54 | 						</ul>
 55 | 						<!-- /nav -->
 56 | 
 57 | 						<!-- search & aside toggle -->
 58 | 						<div class="nav-btns">
 59 | 							<button class="aside-btn"><i class="fa fa-bars"></i></button>
 60 | 							<button class="search-btn"><i class="fa fa-search"></i></button>
 61 | 							<div class="search-form">
 62 | 								<input class="search-input" type="text" name="search" placeholder="Enter Your Search ...">
 63 | 								<button class="search-close"><i class="fa fa-times"></i></button>
 64 | 							</div>
 65 | 						</div>
 66 | 						<!-- /search & aside toggle -->
 67 | 					</div>
 68 | 				</div>
 69 | 				<!-- /Main Nav -->
 70 | 
 71 | 				<!-- Aside Nav -->
 72 | 				<div id="nav-aside">
 73 | 					<!-- nav -->
 74 | 					<div class="section-row">
 75 | 						<ul class="nav-aside-menu">
 76 | 							<li><a href="index.html">Home</a></li>
 77 | 							<li><a href="about.html">About Us</a></li>
 78 | 							<li><a href="#">Join Us</a></li>
 79 | 							<li><a href="#">Advertisement</a></li>
 80 | 							<li><a href="contact.html">Contacts</a></li>
 81 | 						</ul>
 82 | 					</div>
 83 | 					<!-- /nav -->
 84 | 
 85 | 					<!-- widget posts -->
 86 | 					<div class="section-row">
 87 | 						<h3>Recent Posts</h3>
 88 | 						<div class="post post-widget">
 89 | 							<a class="post-img" href="blog-post.html"><img src="./img/widget-2.jpg" alt=""></a>
 90 | 							<div class="post-body">
 91 | 								<h3 class="post-title"><a href="blog-post.html">Pagedraw UI Builder Turns Your Website Design Mockup Into Code Automatically</a></h3>
 92 | 							</div>
 93 | 						</div>
 94 | 
 95 | 						<div class="post post-widget">
 96 | 							<a class="post-img" href="blog-post.html"><img src="./img/widget-3.jpg" alt=""></a>
 97 | 							<div class="post-body">
 98 | 								<h3 class="post-title"><a href="blog-post.html">Why Node.js Is The Coolest Kid On The Backend Development Block!</a></h3>
 99 | 							</div>
100 | 						</div>
101 | 
102 | 						<div class="post post-widget">
103 | 							<a class="post-img" href="blog-post.html"><img src="./img/widget-4.jpg" alt=""></a>
104 | 							<div class="post-body">
105 | 								<h3 class="post-title"><a href="blog-post.html">Tell-A-Tool: Guide To Web Design And Development Tools</a></h3>
106 | 							</div>
107 | 						</div>
108 | 					</div>
109 | 					<!-- /widget posts -->
110 | 
111 | 					<!-- social links -->
112 | 					<div class="section-row">
113 | 						<h3>Follow us</h3>
114 | 						<ul class="nav-aside-social">
115 | 							<li><a href="#"><i class="fa fa-facebook"></i></a></li>
116 | 							<li><a href="#"><i class="fa fa-twitter"></i></a></li>
117 | 							<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
118 | 							<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
119 | 						</ul>
120 | 					</div>
121 | 					<!-- /social links -->
122 | 
123 | 					<!-- aside nav close -->
124 | 					<button class="nav-aside-close"><i class="fa fa-times"></i></button>
125 | 					<!-- /aside nav close -->
126 | 				</div>
127 | 				<!-- Aside Nav -->
128 | 			</div>
129 | 			<!-- /Nav -->
130 | 			
131 | 			<!-- Page Header -->
132 | 			<div class="page-header">
133 | 				<div class="container">
134 | 					<div class="row">
135 | 						<div class="col-md-10">
136 | 							<ul class="page-header-breadcrumb">
137 | 								<li><a href="index.html">Home</a></li>
138 | 								<li>About Us</li>
139 | 							</ul>
140 | 							<h1>About Us</h1>
141 | 						</div>
142 | 					</div>
143 | 				</div>
144 | 			</div>
145 | 			<!-- /Page Header -->
146 | 		</header>
147 | 		<!-- /Header -->
148 | 		
149 | 		<!-- section -->
150 | 		<div class="section">
151 | 			<!-- container -->
152 | 			<div class="container">
153 | 				<!-- row -->
154 | 				<div class="row">
155 | 					<div class="col-md-8">
156 | 						<div class="section-row">
157 | 							<p>Lorem ipsum dolor sit amet, ea eos tibique expetendis, tollit viderer ne nam. No ponderum accommodare eam, purto nominavi cum ea, sit no dolores tractatos. Scripta principes quaerendum ex has, ea mei omnes eruditi. Nec ex nulla mandamus, quot omnesque mel et. Amet habemus ancillae id eum, justo dignissim mei ea, vix ei tantas aliquid. Cu laudem impetus conclusionemque nec, velit erant persius te mel. Ut eum verterem perpetua scribentur.</p>
158 | 							<figure class="figure-img">
159 | 								<img class="img-responsive" src="./img/about-1.jpg" alt="">
160 | 							</figure>
161 | 							<p>Vix mollis admodum ei, vis legimus voluptatum ut, vis reprimique efficiendi sadipscing ut. Eam ex animal assueverit consectetuer, et nominati maluisset repudiare nec. Rebum aperiam vis ne, ex summo aliquando dissentiunt vim. Quo ut cibo docendi. Suscipit indoctum ne quo, ne solet offendit hendrerit nec. Case malorum evertitur ei vel.</p>
162 | 						</div>
163 | 						<div class="row section-row">
164 | 							<div class="col-md-6">
165 | 								<figure class="figure-img">
166 | 									<img class="img-responsive" src="./img/about-2.jpg" alt="">
167 | 								</figure>
168 | 							</div>
169 | 							<div class="col-md-6">
170 | 								<h3>Our Mission</h3>
171 | 								<p>Id usu mutat debet tempor, fugit omnesque posidonium nec ei. An assum labitur ocurreret qui, eam aliquid ornatus tibique ut.</p>
172 | 								<ul class="list-style">
173 | 									<li><p>Vix mollis admodum ei, vis legimus voluptatum ut.</p></li>
174 | 									<li><p>Cu cum alia vide malis. Vel aliquid facilis adolescens.</p></li>
175 | 									<li><p>Laudem rationibus vim id. Te per illum ornatus.</p></li>
176 | 								</ul>
177 | 							</div>
178 | 						</div>
179 | 					</div>
180 | 					
181 | 					<!-- aside -->
182 | 					<div class="col-md-4">
183 | 						<!-- ad -->
184 | 						<div class="aside-widget text-center">
185 | 							<a href="#" style="display: inline-block;margin: auto;">
186 | 								<img class="img-responsive" src="./img/ad-1.jpg" alt="">
187 | 							</a>
188 | 						</div>
189 | 						<!-- /ad -->
190 | 
191 | 						<!-- post widget -->
192 | 						<div class="aside-widget">
193 | 							<div class="section-title">
194 | 								<h2>Most Read</h2>
195 | 							</div>
196 | 
197 | 							<div class="post post-widget">
198 | 								<a class="post-img" href="blog-post.html"><img src="./img/widget-1.jpg" alt=""></a>
199 | 								<div class="post-body">
200 | 									<h3 class="post-title"><a href="blog-post.html">Tell-A-Tool: Guide To Web Design And Development Tools</a></h3>
201 | 								</div>
202 | 							</div>
203 | 
204 | 							<div class="post post-widget">
205 | 								<a class="post-img" href="blog-post.html"><img src="./img/widget-2.jpg" alt=""></a>
206 | 								<div class="post-body">
207 | 									<h3 class="post-title"><a href="blog-post.html">Pagedraw UI Builder Turns Your Website Design Mockup Into Code Automatically</a></h3>
208 | 								</div>
209 | 							</div>
210 | 
211 | 							<div class="post post-widget">
212 | 								<a class="post-img" href="blog-post.html"><img src="./img/widget-3.jpg" alt=""></a>
213 | 								<div class="post-body">
214 | 									<h3 class="post-title"><a href="blog-post.html">Why Node.js Is The Coolest Kid On The Backend Development Block!</a></h3>
215 | 								</div>
216 | 							</div>
217 | 
218 | 							<div class="post post-widget">
219 | 								<a class="post-img" href="blog-post.html"><img src="./img/widget-4.jpg" alt=""></a>
220 | 								<div class="post-body">
221 | 									<h3 class="post-title"><a href="blog-post.html">Tell-A-Tool: Guide To Web Design And Development Tools</a></h3>
222 | 								</div>
223 | 							</div>
224 | 						</div>
225 | 						<!-- /post widget -->
226 | 					</div>
227 | 					<!-- /aside -->
228 | 				</div>
229 | 				<!-- /row -->
230 | 			</div>
231 | 			<!-- /container -->
232 | 		</div>
233 | 		<!-- /section -->
234 | 
235 | 		<!-- Footer -->
236 | 		<footer id="footer">
237 | 			<!-- container -->
238 | 			<div class="container">
239 | 				<!-- row -->
240 | 				<div class="row">
241 | 					<div class="col-md-5">
242 | 						<div class="footer-widget">
243 | 							<div class="footer-logo">
244 | 								<a href="index.html" class="logo"><img src="./img/logo.png" alt=""></a>
245 | 							</div>
246 | 							<ul class="footer-nav">
247 | 								<li><a href="#">Privacy Policy</a></li>
248 | 								<li><a href="#">Advertisement</a></li>
249 | 							</ul>
250 | 							<div class="footer-copyright">
251 | 								<span>&copy; <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
252 | Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
253 | <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></span>
254 | 							</div>
255 | 						</div>
256 | 					</div>
257 | 
258 | 					<div class="col-md-4">
259 | 						<div class="row">
260 | 							<div class="col-md-6">
261 | 								<div class="footer-widget">
262 | 									<h3 class="footer-title">About Us</h3>
263 | 									<ul class="footer-links">
264 | 										<li><a href="about.html">About Us</a></li>
265 | 										<li><a href="#">Join Us</a></li>
266 | 										<li><a href="contact.html">Contacts</a></li>
267 | 									</ul>
268 | 								</div>
269 | 							</div>
270 | 							<div class="col-md-6">
271 | 								<div class="footer-widget">
272 | 									<h3 class="footer-title">Catagories</h3>
273 | 									<ul class="footer-links">
274 | 										<li><a href="category.html">Web Design</a></li>
275 | 										<li><a href="category.html">JavaScript</a></li>
276 | 										<li><a href="category.html">Css</a></li>
277 | 										<li><a href="category.html">Jquery</a></li>
278 | 									</ul>
279 | 								</div>
280 | 							</div>
281 | 						</div>
282 | 					</div>
283 | 
284 | 					<div class="col-md-3">
285 | 						<div class="footer-widget">
286 | 							<h3 class="footer-title">Join our Newsletter</h3>
287 | 							<div class="footer-newsletter">
288 | 								<form>
289 | 									<input class="input" type="email" name="newsletter" placeholder="Enter your email">
290 | 									<button class="newsletter-btn"><i class="fa fa-paper-plane"></i></button>
291 | 								</form>
292 | 							</div>
293 | 							<ul class="footer-social">
294 | 								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
295 | 								<li><a href="#"><i class="fa fa-twitter"></i></a></li>
296 | 								<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
297 | 								<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
298 | 							</ul>
299 | 						</div>
300 | 					</div>
301 | 
302 | 				</div>
303 | 				<!-- /row -->
304 | 			</div>
305 | 			<!-- /container -->
306 | 		</footer>
307 | 		<!-- /Footer -->
308 | 
309 | 		<!-- jQuery Plugins -->
310 | 		<script src="js/jquery.min.js"></script>
311 | 		<script src="js/bootstrap.min.js"></script>
312 | 		<script src="js/main.js"></script>
313 | 
314 | 	</body>
315 | </html>
316 | 


--------------------------------------------------------------------------------
/blank.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="utf-8">
  5 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 		 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  8 | 
  9 | 		<title>WebMag HTML Template</title>
 10 | 
 11 | 		<!-- Google font -->
 12 | 		<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:700%7CNunito:300,600" rel="stylesheet"> 
 13 | 
 14 | 		<!-- Bootstrap -->
 15 | 		<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"/>
 16 | 
 17 | 		<!-- Font Awesome Icon -->
 18 | 		<link rel="stylesheet" href="css/font-awesome.min.css">
 19 | 
 20 | 		<!-- Custom stlylesheet -->
 21 | 		<link type="text/css" rel="stylesheet" href="css/style.css"/>
 22 | 
 23 | 		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 24 | 		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 25 | 		<!--[if lt IE 9]>
 26 | 		  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
 27 | 		  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 28 | 		<![endif]-->
 29 | 
 30 |     </head>
 31 | 	<body>
 32 | 		
 33 | 		<!-- Header -->
 34 | 		<header id="header">
 35 | 			<!-- Nav -->
 36 | 			<div id="nav">
 37 | 				<!-- Main Nav -->
 38 | 				<div id="nav-fixed">
 39 | 					<div class="container">
 40 | 						<!-- logo -->
 41 | 						<div class="nav-logo">
 42 | 							<a href="index.html" class="logo"><img src="./img/logo.png" alt=""></a>
 43 | 						</div>
 44 | 						<!-- /logo -->
 45 | 
 46 | 						<!-- nav -->
 47 | 						<ul class="nav-menu nav navbar-nav">
 48 | 							<li><a href="category.html">News</a></li>
 49 | 							<li><a href="category.html">Popular</a></li>
 50 | 							<li class="cat-1"><a href="category.html">Web Design</a></li>
 51 | 							<li class="cat-2"><a href="category.html">JavaScript</a></li>
 52 | 							<li class="cat-3"><a href="category.html">Css</a></li>
 53 | 							<li class="cat-4"><a href="category.html">Jquery</a></li>
 54 | 						</ul>
 55 | 						<!-- /nav -->
 56 | 
 57 | 						<!-- search & aside toggle -->
 58 | 						<div class="nav-btns">
 59 | 							<button class="aside-btn"><i class="fa fa-bars"></i></button>
 60 | 							<button class="search-btn"><i class="fa fa-search"></i></button>
 61 | 							<div class="search-form">
 62 | 								<input class="search-input" type="text" name="search" placeholder="Enter Your Search ...">
 63 | 								<button class="search-close"><i class="fa fa-times"></i></button>
 64 | 							</div>
 65 | 						</div>
 66 | 						<!-- /search & aside toggle -->
 67 | 					</div>
 68 | 				</div>
 69 | 				<!-- /Main Nav -->
 70 | 
 71 | 				<!-- Aside Nav -->
 72 | 				<div id="nav-aside">
 73 | 					<!-- nav -->
 74 | 					<div class="section-row">
 75 | 						<ul class="nav-aside-menu">
 76 | 							<li><a href="index.html">Home</a></li>
 77 | 							<li><a href="about.html">About Us</a></li>
 78 | 							<li><a href="#">Join Us</a></li>
 79 | 							<li><a href="#">Advertisement</a></li>
 80 | 							<li><a href="contact.html">Contacts</a></li>
 81 | 						</ul>
 82 | 					</div>
 83 | 					<!-- /nav -->
 84 | 
 85 | 					<!-- widget posts -->
 86 | 					<div class="section-row">
 87 | 						<h3>Recent Posts</h3>
 88 | 						<div class="post post-widget">
 89 | 							<a class="post-img" href="blog-post.html"><img src="./img/widget-2.jpg" alt=""></a>
 90 | 							<div class="post-body">
 91 | 								<h3 class="post-title"><a href="blog-post.html">Pagedraw UI Builder Turns Your Website Design Mockup Into Code Automatically</a></h3>
 92 | 							</div>
 93 | 						</div>
 94 | 
 95 | 						<div class="post post-widget">
 96 | 							<a class="post-img" href="blog-post.html"><img src="./img/widget-3.jpg" alt=""></a>
 97 | 							<div class="post-body">
 98 | 								<h3 class="post-title"><a href="blog-post.html">Why Node.js Is The Coolest Kid On The Backend Development Block!</a></h3>
 99 | 							</div>
100 | 						</div>
101 | 
102 | 						<div class="post post-widget">
103 | 							<a class="post-img" href="blog-post.html"><img src="./img/widget-4.jpg" alt=""></a>
104 | 							<div class="post-body">
105 | 								<h3 class="post-title"><a href="blog-post.html">Tell-A-Tool: Guide To Web Design And Development Tools</a></h3>
106 | 							</div>
107 | 						</div>
108 | 					</div>
109 | 					<!-- /widget posts -->
110 | 
111 | 					<!-- social links -->
112 | 					<div class="section-row">
113 | 						<h3>Follow us</h3>
114 | 						<ul class="nav-aside-social">
115 | 							<li><a href="#"><i class="fa fa-facebook"></i></a></li>
116 | 							<li><a href="#"><i class="fa fa-twitter"></i></a></li>
117 | 							<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
118 | 							<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
119 | 						</ul>
120 | 					</div>
121 | 					<!-- /social links -->
122 | 
123 | 					<!-- aside nav close -->
124 | 					<button class="nav-aside-close"><i class="fa fa-times"></i></button>
125 | 					<!-- /aside nav close -->
126 | 				</div>
127 | 				<!-- Aside Nav -->
128 | 			</div>
129 | 			<!-- /Nav -->
130 | 			
131 | 			<!-- Page Header -->
132 | 			<div class="page-header">
133 | 				<div class="container">
134 | 					<div class="row">
135 | 						<div class="col-md-10">
136 | 							<ul class="page-header-breadcrumb">
137 | 								<li><a href="index.html">Home</a></li>
138 | 								<li>Regular page</li>
139 | 							</ul>
140 | 							<h1>Regular page</h1>
141 | 						</div>
142 | 					</div>
143 | 				</div>
144 | 			</div>
145 | 			<!-- /Page Header -->
146 | 		</header>
147 | 		<!-- /Header -->
148 | 
149 | 		<!-- section -->
150 | 		<div class="section">
151 | 			<!-- container -->
152 | 			<div class="container">
153 | 				<!-- row -->
154 | 				<div class="row">
155 | 					<div class="col-md-8">
156 | 						<h1>H1 Typography heading.</h1>
157 | 						<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.</p>
158 | 					
159 | 						<h2>H2 Typography heading.</h2>
160 | 						<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.</p>
161 | 					
162 | 						<h3>H3 Typography heading.</h3>
163 | 						<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.</p>
164 | 					
165 | 						<h4>H4 Typography heading.</h4>
166 | 						<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.</p>
167 | 
168 | 						<ul class="list-style">
169 | 							<li><p>Vix mollis admodum ei, vis legimus voluptatum ut.</p></li>
170 | 							<li><p>Cu cum alia vide malis. Vel aliquid facilis adolescens.</p></li>
171 | 							<li><p>Laudem rationibus vim id. Te per illum ornatus.</p></li>
172 | 						</ul>
173 | 			
174 | 						<ol class="list-style">
175 | 							<li><p>Vix mollis admodum ei, vis legimus voluptatum ut.</p></li>
176 | 							<li><p>Cu cum alia vide malis. Vel aliquid facilis adolescens.</p></li>
177 | 							<li><p>Laudem rationibus vim id. Te per illum ornatus.</p></li>
178 | 						</ol>
179 | 					</div>
180 | 					<!-- aside -->
181 | 					<div class="col-md-4">
182 | 						<!-- ad -->
183 | 						<div class="aside-widget text-center">
184 | 							<a href="#" style="display: inline-block;margin: auto;">
185 | 								<img class="img-responsive" src="./img/ad-1.jpg" alt="">
186 | 							</a>
187 | 						</div>
188 | 						<!-- /ad -->
189 | 
190 | 						<!-- post widget -->
191 | 						<div class="aside-widget">
192 | 							<div class="section-title">
193 | 								<h2>Most Read</h2>
194 | 							</div>
195 | 
196 | 							<div class="post post-widget">
197 | 								<a class="post-img" href="blog-post.html"><img src="./img/widget-1.jpg" alt=""></a>
198 | 								<div class="post-body">
199 | 									<h3 class="post-title"><a href="blog-post.html">Tell-A-Tool: Guide To Web Design And Development Tools</a></h3>
200 | 								</div>
201 | 							</div>
202 | 
203 | 							<div class="post post-widget">
204 | 								<a class="post-img" href="blog-post.html"><img src="./img/widget-2.jpg" alt=""></a>
205 | 								<div class="post-body">
206 | 									<h3 class="post-title"><a href="blog-post.html">Pagedraw UI Builder Turns Your Website Design Mockup Into Code Automatically</a></h3>
207 | 								</div>
208 | 							</div>
209 | 
210 | 							<div class="post post-widget">
211 | 								<a class="post-img" href="blog-post.html"><img src="./img/widget-3.jpg" alt=""></a>
212 | 								<div class="post-body">
213 | 									<h3 class="post-title"><a href="blog-post.html">Why Node.js Is The Coolest Kid On The Backend Development Block!</a></h3>
214 | 								</div>
215 | 							</div>
216 | 
217 | 							<div class="post post-widget">
218 | 								<a class="post-img" href="blog-post.html"><img src="./img/widget-4.jpg" alt=""></a>
219 | 								<div class="post-body">
220 | 									<h3 class="post-title"><a href="blog-post.html">Tell-A-Tool: Guide To Web Design And Development Tools</a></h3>
221 | 								</div>
222 | 							</div>
223 | 						</div>
224 | 						<!-- /post widget -->
225 | 					</div>
226 | 					<!-- /aside -->
227 | 				</div>
228 | 				<!-- /row -->
229 | 			</div>
230 | 			<!-- /container -->
231 | 		</div>
232 | 		<!-- /section -->
233 | 
234 | 		<!-- Footer -->
235 | 		<footer id="footer">
236 | 			<!-- container -->
237 | 			<div class="container">
238 | 				<!-- row -->
239 | 				<div class="row">
240 | 					<div class="col-md-5">
241 | 						<div class="footer-widget">
242 | 							<div class="footer-logo">
243 | 								<a href="index.html" class="logo"><img src="./img/logo.png" alt=""></a>
244 | 							</div>
245 | 							<ul class="footer-nav">
246 | 								<li><a href="#">Privacy Policy</a></li>
247 | 								<li><a href="#">Advertisement</a></li>
248 | 							</ul>
249 | 							<div class="footer-copyright">
250 | 								<span>&copy; <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
251 | Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
252 | <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></span>
253 | 							</div>
254 | 						</div>
255 | 					</div>
256 | 
257 | 					<div class="col-md-4">
258 | 						<div class="row">
259 | 							<div class="col-md-6">
260 | 								<div class="footer-widget">
261 | 									<h3 class="footer-title">About Us</h3>
262 | 									<ul class="footer-links">
263 | 										<li><a href="about.html">About Us</a></li>
264 | 										<li><a href="#">Join Us</a></li>
265 | 										<li><a href="contact.html">Contacts</a></li>
266 | 									</ul>
267 | 								</div>
268 | 							</div>
269 | 							<div class="col-md-6">
270 | 								<div class="footer-widget">
271 | 									<h3 class="footer-title">Catagories</h3>
272 | 									<ul class="footer-links">
273 | 										<li><a href="category.html">Web Design</a></li>
274 | 										<li><a href="category.html">JavaScript</a></li>
275 | 										<li><a href="category.html">Css</a></li>
276 | 										<li><a href="category.html">Jquery</a></li>
277 | 									</ul>
278 | 								</div>
279 | 							</div>
280 | 						</div>
281 | 					</div>
282 | 
283 | 					<div class="col-md-3">
284 | 						<div class="footer-widget">
285 | 							<h3 class="footer-title">Join our Newsletter</h3>
286 | 							<div class="footer-newsletter">
287 | 								<form>
288 | 									<input class="input" type="email" name="newsletter" placeholder="Enter your email">
289 | 									<button class="newsletter-btn"><i class="fa fa-paper-plane"></i></button>
290 | 								</form>
291 | 							</div>
292 | 							<ul class="footer-social">
293 | 								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
294 | 								<li><a href="#"><i class="fa fa-twitter"></i></a></li>
295 | 								<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
296 | 								<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
297 | 							</ul>
298 | 						</div>
299 | 					</div>
300 | 
301 | 				</div>
302 | 				<!-- /row -->
303 | 			</div>
304 | 			<!-- /container -->
305 | 		</footer>
306 | 		<!-- /Footer -->
307 | 
308 | 		<!-- jQuery Plugins -->
309 | 		<script src="js/jquery.min.js"></script>
310 | 		<script src="js/bootstrap.min.js"></script>
311 | 		<script src="js/main.js"></script>
312 | 
313 | 	</body>
314 | </html>
315 | 


--------------------------------------------------------------------------------
/category.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="utf-8">
  5 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 		 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  8 | 
  9 | 		<title>WebMag HTML Template</title>
 10 | 
 11 | 		<!-- Google font -->
 12 | 		<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:700%7CNunito:300,600" rel="stylesheet"> 
 13 | 
 14 | 		<!-- Bootstrap -->
 15 | 		<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"/>
 16 | 
 17 | 		<!-- Font Awesome Icon -->
 18 | 		<link rel="stylesheet" href="css/font-awesome.min.css">
 19 | 
 20 | 		<!-- Custom stlylesheet -->
 21 | 		<link type="text/css" rel="stylesheet" href="css/style.css"/>
 22 | 
 23 | 		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 24 | 		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 25 | 		<!--[if lt IE 9]>
 26 | 		  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
 27 | 		  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 28 | 		<![endif]-->
 29 | 
 30 |     </head>
 31 | 	<body>
 32 | 		
 33 | 		<!-- Header -->
 34 | 		<header id="header">
 35 | 			<!-- Nav -->
 36 | 			<div id="nav">
 37 | 				<!-- Main Nav -->
 38 | 				<div id="nav-fixed">
 39 | 					<div class="container">
 40 | 						<!-- logo -->
 41 | 						<div class="nav-logo">
 42 | 							<a href="index.html" class="logo"><img src="./img/logo.png" alt=""></a>
 43 | 						</div>
 44 | 						<!-- /logo -->
 45 | 
 46 | 						<!-- nav -->
 47 | 						<ul class="nav-menu nav navbar-nav">
 48 | 							<li><a href="category.html">News</a></li>
 49 | 							<li><a href="category.html">Popular</a></li>
 50 | 							<li class="cat-1"><a href="category.html">Web Design</a></li>
 51 | 							<li class="cat-2"><a href="category.html">JavaScript</a></li>
 52 | 							<li class="cat-3"><a href="category.html">Css</a></li>
 53 | 							<li class="cat-4"><a href="category.html">Jquery</a></li>
 54 | 						</ul>
 55 | 						<!-- /nav -->
 56 | 
 57 | 						<!-- search & aside toggle -->
 58 | 						<div class="nav-btns">
 59 | 							<button class="aside-btn"><i class="fa fa-bars"></i></button>
 60 | 							<button class="search-btn"><i class="fa fa-search"></i></button>
 61 | 							<div class="search-form">
 62 | 								<input class="search-input" type="text" name="search" placeholder="Enter Your Search ...">
 63 | 								<button class="search-close"><i class="fa fa-times"></i></button>
 64 | 							</div>
 65 | 						</div>
 66 | 						<!-- /search & aside toggle -->
 67 | 					</div>
 68 | 				</div>
 69 | 				<!-- /Main Nav -->
 70 | 
 71 | 				<!-- Aside Nav -->
 72 | 				<div id="nav-aside">
 73 | 					<!-- nav -->
 74 | 					<div class="section-row">
 75 | 						<ul class="nav-aside-menu">
 76 | 							<li><a href="index.html">Home</a></li>
 77 | 							<li><a href="about.html">About Us</a></li>
 78 | 							<li><a href="#">Join Us</a></li>
 79 | 							<li><a href="#">Advertisement</a></li>
 80 | 							<li><a href="contact.html">Contacts</a></li>
 81 | 						</ul>
 82 | 					</div>
 83 | 					<!-- /nav -->
 84 | 
 85 | 					<!-- widget posts -->
 86 | 					<div class="section-row">
 87 | 						<h3>Recent Posts</h3>
 88 | 						<div class="post post-widget">
 89 | 							<a class="post-img" href="blog-post.html"><img src="./img/widget-2.jpg" alt=""></a>
 90 | 							<div class="post-body">
 91 | 								<h3 class="post-title"><a href="blog-post.html">Pagedraw UI Builder Turns Your Website Design Mockup Into Code Automatically</a></h3>
 92 | 							</div>
 93 | 						</div>
 94 | 
 95 | 						<div class="post post-widget">
 96 | 							<a class="post-img" href="blog-post.html"><img src="./img/widget-3.jpg" alt=""></a>
 97 | 							<div class="post-body">
 98 | 								<h3 class="post-title"><a href="blog-post.html">Why Node.js Is The Coolest Kid On The Backend Development Block!</a></h3>
 99 | 							</div>
100 | 						</div>
101 | 
102 | 						<div class="post post-widget">
103 | 							<a class="post-img" href="blog-post.html"><img src="./img/widget-4.jpg" alt=""></a>
104 | 							<div class="post-body">
105 | 								<h3 class="post-title"><a href="blog-post.html">Tell-A-Tool: Guide To Web Design And Development Tools</a></h3>
106 | 							</div>
107 | 						</div>
108 | 					</div>
109 | 					<!-- /widget posts -->
110 | 
111 | 					<!-- social links -->
112 | 					<div class="section-row">
113 | 						<h3>Follow us</h3>
114 | 						<ul class="nav-aside-social">
115 | 							<li><a href="#"><i class="fa fa-facebook"></i></a></li>
116 | 							<li><a href="#"><i class="fa fa-twitter"></i></a></li>
117 | 							<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
118 | 							<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
119 | 						</ul>
120 | 					</div>
121 | 					<!-- /social links -->
122 | 
123 | 					<!-- aside nav close -->
124 | 					<button class="nav-aside-close"><i class="fa fa-times"></i></button>
125 | 					<!-- /aside nav close -->
126 | 				</div>
127 | 				<!-- Aside Nav -->
128 | 			</div>
129 | 			<!-- /Nav -->
130 | 			
131 | 			<!-- Page Header -->
132 | 			<div class="page-header">
133 | 				<div class="container">
134 | 					<div class="row">
135 | 						<div class="col-md-10">
136 | 							<ul class="page-header-breadcrumb">
137 | 								<li><a href="index.html">Home</a></li>
138 | 								<li>JavaScript</li>
139 | 							</ul>
140 | 							<h1>JavaScript</h1>
141 | 						</div>
142 | 					</div>
143 | 				</div>
144 | 			</div>
145 | 			<!-- /Page Header -->
146 | 		</header>
147 | 		<!-- /Header -->
148 | 		
149 | 		<!-- section -->
150 | 		<div class="section">
151 | 			<!-- container -->
152 | 			<div class="container">
153 | 				<!-- row -->
154 | 				<div class="row">
155 | 					<div class="col-md-8">
156 | 						<div class="row">
157 | 							<!-- post -->
158 | 							<div class="col-md-12">
159 | 								<div class="post post-thumb">
160 | 									<a class="post-img" href="blog-post.html"><img src="./img/post-1.jpg" alt=""></a>
161 | 									<div class="post-body">
162 | 										<div class="post-meta">
163 | 											<a class="post-category cat-2" href="#">JavaScript</a>
164 | 											<span class="post-date">March 27, 2018</span>
165 | 										</div>
166 | 										<h3 class="post-title"><a href="blog-post.html">Javascript : Prototype vs Class</a></h3>
167 | 									</div>
168 | 								</div>
169 | 							</div>
170 | 							<!-- /post -->
171 | 										
172 | 							<!-- post -->
173 | 							<div class="col-md-6">
174 | 								<div class="post">
175 | 									<a class="post-img" href="blog-post.html"><img src="./img/post-4.jpg" alt=""></a>
176 | 									<div class="post-body">
177 | 										<div class="post-meta">
178 | 											<a class="post-category cat-2" href="#">JavaScript</a>
179 | 											<span class="post-date">March 27, 2018</span>
180 | 										</div>
181 | 										<h3 class="post-title"><a href="blog-post.html">Chrome Extension Protects Against JavaScript-Based CPU Side-Channel Attacks</a></h3>
182 | 									</div>
183 | 								</div>
184 | 							</div>
185 | 							<!-- /post -->
186 | 
187 | 							<!-- post -->
188 | 							<div class="col-md-6">
189 | 								<div class="post">
190 | 									<a class="post-img" href="blog-post.html"><img src="./img/post-6.jpg" alt=""></a>
191 | 									<div class="post-body">
192 | 										<div class="post-meta">
193 | 											<a class="post-category cat-2" href="#">JavaScript</a>
194 | 											<span class="post-date">March 27, 2018</span>
195 | 										</div>
196 | 										<h3 class="post-title"><a href="blog-post.html">Why Node.js Is The Coolest Kid On The Backend Development Block!</a></h3>
197 | 									</div>
198 | 								</div>
199 | 							</div>
200 | 							<!-- /post -->
201 | 							
202 | 							<div class="clearfix visible-md visible-lg"></div>
203 | 							
204 | 							<!-- ad -->
205 | 							<div class="col-md-12">
206 | 								<div class="section-row">
207 | 									<a href="#">
208 | 										<img class="img-responsive center-block" src="./img/ad-2.jpg" alt="">
209 | 									</a>
210 | 								</div>
211 | 							</div>
212 | 							<!-- ad -->
213 | 							
214 | 							<!-- post -->
215 | 							<div class="col-md-12">
216 | 								<div class="post post-row">
217 | 									<a class="post-img" href="blog-post.html"><img src="./img/post-2.jpg" alt=""></a>
218 | 									<div class="post-body">
219 | 										<div class="post-meta">
220 | 											<a class="post-category cat-2" href="#">JavaScript</a>
221 | 											<span class="post-date">March 27, 2018</span>
222 | 										</div>
223 | 										<h3 class="post-title"><a href="blog-post.html">Ask HN: Does Anybody Still Use JQuery?</a></h3>
224 | 										<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...</p>
225 | 									</div>
226 | 								</div>
227 | 							</div>
228 | 							<!-- /post -->
229 | 							
230 | 							<!-- post -->
231 | 							<div class="col-md-12">
232 | 								<div class="post post-row">
233 | 									<a class="post-img" href="blog-post.html"><img src="./img/post-5.jpg" alt=""></a>
234 | 									<div class="post-body">
235 | 										<div class="post-meta">
236 | 											<a class="post-category cat-2" href="#">JavaScript</a>
237 | 											<span class="post-date">March 27, 2018</span>
238 | 										</div>
239 | 										<h3 class="post-title"><a href="blog-post.html">Microsoft’s TypeScript Fills A Long-standing Void In JavaScript</a></h3>
240 | 										<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...</p>
241 | 									</div>
242 | 								</div>
243 | 							</div>
244 | 							<!-- /post -->
245 | 
246 | 							<!-- post -->
247 | 							<div class="col-md-12">
248 | 								<div class="post post-row">
249 | 									<a class="post-img" href="blog-post.html"><img src="./img/post-3.jpg" alt=""></a>
250 | 									<div class="post-body">
251 | 										<div class="post-meta">
252 | 											<a class="post-category cat-2" href="#">JavaScript</a>
253 | 											<span class="post-date">March 27, 2018</span>
254 | 										</div>
255 | 										<h3 class="post-title"><a href="blog-post.html">Javascript : Prototype vs Class</a></h3>
256 | 										<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...</p>
257 | 									</div>
258 | 								</div>
259 | 							</div>
260 | 							<!-- /post -->
261 | 							
262 | 							<!-- post -->
263 | 							<div class="col-md-12">
264 | 								<div class="post post-row">
265 | 									<a class="post-img" href="blog-post.html"><img src="./img/post-1.jpg" alt=""></a>
266 | 									<div class="post-body">
267 | 										<div class="post-meta">
268 | 											<a class="post-category cat-2" href="#">JavaScript</a>
269 | 											<span class="post-date">March 27, 2018</span>
270 | 										</div>
271 | 										<h3 class="post-title"><a href="blog-post.html">Why Node.js Is The Coolest Kid On The Backend Development Block!</a></h3>
272 | 										<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...</p>
273 | 									</div>
274 | 								</div>
275 | 							</div>
276 | 							<!-- /post -->
277 | 							
278 | 							<div class="col-md-12">
279 | 								<div class="section-row">
280 | 									<button class="primary-button center-block">Load More</button>
281 | 								</div>
282 | 							</div>
283 | 						</div>
284 | 					</div>
285 | 					
286 | 					<div class="col-md-4">
287 | 						<!-- ad -->
288 | 						<div class="aside-widget text-center">
289 | 							<a href="#" style="display: inline-block;margin: auto;">
290 | 								<img class="img-responsive" src="./img/ad-1.jpg" alt="">
291 | 							</a>
292 | 						</div>
293 | 						<!-- /ad -->
294 | 						
295 | 						<!-- post widget -->
296 | 						<div class="aside-widget">
297 | 							<div class="section-title">
298 | 								<h2>Most Read</h2>
299 | 							</div>
300 | 
301 | 							<div class="post post-widget">
302 | 								<a class="post-img" href="blog-post.html"><img src="./img/widget-1.jpg" alt=""></a>
303 | 								<div class="post-body">
304 | 									<h3 class="post-title"><a href="blog-post.html">Tell-A-Tool: Guide To Web Design And Development Tools</a></h3>
305 | 								</div>
306 | 							</div>
307 | 
308 | 							<div class="post post-widget">
309 | 								<a class="post-img" href="blog-post.html"><img src="./img/widget-2.jpg" alt=""></a>
310 | 								<div class="post-body">
311 | 									<h3 class="post-title"><a href="blog-post.html">Pagedraw UI Builder Turns Your Website Design Mockup Into Code Automatically</a></h3>
312 | 								</div>
313 | 							</div>
314 | 
315 | 							<div class="post post-widget">
316 | 								<a class="post-img" href="blog-post.html"><img src="./img/widget-3.jpg" alt=""></a>
317 | 								<div class="post-body">
318 | 									<h3 class="post-title"><a href="blog-post.html">Why Node.js Is The Coolest Kid On The Backend Development Block!</a></h3>
319 | 								</div>
320 | 							</div>
321 | 
322 | 							<div class="post post-widget">
323 | 								<a class="post-img" href="blog-post.html"><img src="./img/widget-4.jpg" alt=""></a>
324 | 								<div class="post-body">
325 | 									<h3 class="post-title"><a href="blog-post.html">Tell-A-Tool: Guide To Web Design And Development Tools</a></h3>
326 | 								</div>
327 | 							</div>
328 | 						</div>
329 | 						<!-- /post widget -->
330 | 						
331 | 						<!-- catagories -->
332 | 						<div class="aside-widget">
333 | 							<div class="section-title">
334 | 								<h2>Catagories</h2>
335 | 							</div>
336 | 							<div class="category-widget">
337 | 								<ul>
338 | 									<li><a href="#" class="cat-1">Web Design<span>340</span></a></li>
339 | 									<li><a href="#" class="cat-2">JavaScript<span>74</span></a></li>
340 | 									<li><a href="#" class="cat-4">JQuery<span>41</span></a></li>
341 | 									<li><a href="#" class="cat-3">CSS<span>35</span></a></li>
342 | 								</ul>
343 | 							</div>
344 | 						</div>
345 | 						<!-- /catagories -->
346 | 						
347 | 						<!-- tags -->
348 | 						<div class="aside-widget">
349 | 							<div class="tags-widget">
350 | 								<ul>
351 | 									<li><a href="#">Chrome</a></li>
352 | 									<li><a href="#">CSS</a></li>
353 | 									<li><a href="#">Tutorial</a></li>
354 | 									<li><a href="#">Backend</a></li>
355 | 									<li><a href="#">JQuery</a></li>
356 | 									<li><a href="#">Design</a></li>
357 | 									<li><a href="#">Development</a></li>
358 | 									<li><a href="#">JavaScript</a></li>
359 | 									<li><a href="#">Website</a></li>
360 | 								</ul>
361 | 							</div>
362 | 						</div>
363 | 						<!-- /tags -->
364 | 						
365 | 						<!-- archive -->
366 | 						<div class="aside-widget">
367 | 							<div class="section-title">
368 | 								<h2>Archive</h2>
369 | 							</div>
370 | 							<div class="archive-widget">
371 | 								<ul>
372 | 									<li><a href="#">Jan 2018</a></li>
373 | 									<li><a href="#">Feb 2018</a></li>
374 | 									<li><a href="#">Mar 2018</a></li>
375 | 								</ul>
376 | 							</div>
377 | 						</div>
378 | 						<!-- /archive -->
379 | 					</div>
380 | 				</div>
381 | 				<!-- /row -->
382 | 			</div>
383 | 			<!-- /container -->
384 | 		</div>
385 | 		<!-- /section -->
386 | 
387 | 		<!-- Footer -->
388 | 		<footer id="footer">
389 | 			<!-- container -->
390 | 			<div class="container">
391 | 				<!-- row -->
392 | 				<div class="row">
393 | 					<div class="col-md-5">
394 | 						<div class="footer-widget">
395 | 							<div class="footer-logo">
396 | 								<a href="index.html" class="logo"><img src="./img/logo.png" alt=""></a>
397 | 							</div>
398 | 							<ul class="footer-nav">
399 | 								<li><a href="#">Privacy Policy</a></li>
400 | 								<li><a href="#">Advertisement</a></li>
401 | 							</ul>
402 | 							<div class="footer-copyright">
403 | 								<span>&copy; <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
404 | Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
405 | <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></span>
406 | 							</div>
407 | 						</div>
408 | 					</div>
409 | 
410 | 					<div class="col-md-4">
411 | 						<div class="row">
412 | 							<div class="col-md-6">
413 | 								<div class="footer-widget">
414 | 									<h3 class="footer-title">About Us</h3>
415 | 									<ul class="footer-links">
416 | 										<li><a href="about.html">About Us</a></li>
417 | 										<li><a href="#">Join Us</a></li>
418 | 										<li><a href="contact.html">Contacts</a></li>
419 | 									</ul>
420 | 								</div>
421 | 							</div>
422 | 							<div class="col-md-6">
423 | 								<div class="footer-widget">
424 | 									<h3 class="footer-title">Catagories</h3>
425 | 									<ul class="footer-links">
426 | 										<li><a href="category.html">Web Design</a></li>
427 | 										<li><a href="category.html">JavaScript</a></li>
428 | 										<li><a href="category.html">Css</a></li>
429 | 										<li><a href="category.html">Jquery</a></li>
430 | 									</ul>
431 | 								</div>
432 | 							</div>
433 | 						</div>
434 | 					</div>
435 | 
436 | 					<div class="col-md-3">
437 | 						<div class="footer-widget">
438 | 							<h3 class="footer-title">Join our Newsletter</h3>
439 | 							<div class="footer-newsletter">
440 | 								<form>
441 | 									<input class="input" type="email" name="newsletter" placeholder="Enter your email">
442 | 									<button class="newsletter-btn"><i class="fa fa-paper-plane"></i></button>
443 | 								</form>
444 | 							</div>
445 | 							<ul class="footer-social">
446 | 								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
447 | 								<li><a href="#"><i class="fa fa-twitter"></i></a></li>
448 | 								<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
449 | 								<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
450 | 							</ul>
451 | 						</div>
452 | 					</div>
453 | 
454 | 				</div>
455 | 				<!-- /row -->
456 | 			</div>
457 | 			<!-- /container -->
458 | 		</footer>
459 | 		<!-- /Footer -->
460 | 
461 | 		<!-- jQuery Plugins -->
462 | 		<script src="js/jquery.min.js"></script>
463 | 		<script src="js/bootstrap.min.js"></script>
464 | 		<script src="js/main.js"></script>
465 | 
466 | 	</body>
467 | </html>
468 | 


--------------------------------------------------------------------------------
/blog-post.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="utf-8">
  5 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 		 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  8 | 
  9 | 		<title>WebMag HTML Template</title>
 10 | 
 11 | 		<!-- Google font -->
 12 | 		<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:700%7CNunito:300,600" rel="stylesheet"> 
 13 | 
 14 | 		<!-- Bootstrap -->
 15 | 		<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"/>
 16 | 
 17 | 		<!-- Font Awesome Icon -->
 18 | 		<link rel="stylesheet" href="css/font-awesome.min.css">
 19 | 
 20 | 		<!-- Custom stlylesheet -->
 21 | 		<link type="text/css" rel="stylesheet" href="css/style.css"/>
 22 | 
 23 | 		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 24 | 		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 25 | 		<!--[if lt IE 9]>
 26 | 		  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
 27 | 		  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 28 | 		<![endif]-->
 29 | 
 30 |     </head>
 31 | 	<body>
 32 | 		
 33 | 		<!-- Header -->
 34 | 		<header id="header">
 35 | 			<!-- Nav -->
 36 | 			<div id="nav">
 37 | 				<!-- Main Nav -->
 38 | 				<div id="nav-fixed">
 39 | 					<div class="container">
 40 | 						<!-- logo -->
 41 | 						<div class="nav-logo">
 42 | 							<a href="index.html" class="logo"><img src="./img/logo.png" alt=""></a>
 43 | 						</div>
 44 | 						<!-- /logo -->
 45 | 
 46 | 						<!-- nav -->
 47 | 						<ul class="nav-menu nav navbar-nav">
 48 | 							<li><a href="category.html">News</a></li>
 49 | 							<li><a href="category.html">Popular</a></li>
 50 | 							<li class="cat-1"><a href="category.html">Web Design</a></li>
 51 | 							<li class="cat-2"><a href="category.html">JavaScript</a></li>
 52 | 							<li class="cat-3"><a href="category.html">Css</a></li>
 53 | 							<li class="cat-4"><a href="category.html">Jquery</a></li>
 54 | 						</ul>
 55 | 						<!-- /nav -->
 56 | 
 57 | 						<!-- search & aside toggle -->
 58 | 						<div class="nav-btns">
 59 | 							<button class="aside-btn"><i class="fa fa-bars"></i></button>
 60 | 							<button class="search-btn"><i class="fa fa-search"></i></button>
 61 | 							<div class="search-form">
 62 | 								<input class="search-input" type="text" name="search" placeholder="Enter Your Search ...">
 63 | 								<button class="search-close"><i class="fa fa-times"></i></button>
 64 | 							</div>
 65 | 						</div>
 66 | 						<!-- /search & aside toggle -->
 67 | 					</div>
 68 | 				</div>
 69 | 				<!-- /Main Nav -->
 70 | 
 71 | 				<!-- Aside Nav -->
 72 | 				<div id="nav-aside">
 73 | 					<!-- nav -->
 74 | 					<div class="section-row">
 75 | 						<ul class="nav-aside-menu">
 76 | 							<li><a href="index.html">Home</a></li>
 77 | 							<li><a href="about.html">About Us</a></li>
 78 | 							<li><a href="#">Join Us</a></li>
 79 | 							<li><a href="#">Advertisement</a></li>
 80 | 							<li><a href="contact.html">Contacts</a></li>
 81 | 						</ul>
 82 | 					</div>
 83 | 					<!-- /nav -->
 84 | 
 85 | 					<!-- widget posts -->
 86 | 					<div class="section-row">
 87 | 						<h3>Recent Posts</h3>
 88 | 						<div class="post post-widget">
 89 | 							<a class="post-img" href="blog-post.html"><img src="./img/widget-2.jpg" alt=""></a>
 90 | 							<div class="post-body">
 91 | 								<h3 class="post-title"><a href="blog-post.html">Pagedraw UI Builder Turns Your Website Design Mockup Into Code Automatically</a></h3>
 92 | 							</div>
 93 | 						</div>
 94 | 
 95 | 						<div class="post post-widget">
 96 | 							<a class="post-img" href="blog-post.html"><img src="./img/widget-3.jpg" alt=""></a>
 97 | 							<div class="post-body">
 98 | 								<h3 class="post-title"><a href="blog-post.html">Why Node.js Is The Coolest Kid On The Backend Development Block!</a></h3>
 99 | 							</div>
100 | 						</div>
101 | 
102 | 						<div class="post post-widget">
103 | 							<a class="post-img" href="blog-post.html"><img src="./img/widget-4.jpg" alt=""></a>
104 | 							<div class="post-body">
105 | 								<h3 class="post-title"><a href="blog-post.html">Tell-A-Tool: Guide To Web Design And Development Tools</a></h3>
106 | 							</div>
107 | 						</div>
108 | 					</div>
109 | 					<!-- /widget posts -->
110 | 
111 | 					<!-- social links -->
112 | 					<div class="section-row">
113 | 						<h3>Follow us</h3>
114 | 						<ul class="nav-aside-social">
115 | 							<li><a href="#"><i class="fa fa-facebook"></i></a></li>
116 | 							<li><a href="#"><i class="fa fa-twitter"></i></a></li>
117 | 							<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
118 | 							<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
119 | 						</ul>
120 | 					</div>
121 | 					<!-- /social links -->
122 | 
123 | 					<!-- aside nav close -->
124 | 					<button class="nav-aside-close"><i class="fa fa-times"></i></button>
125 | 					<!-- /aside nav close -->
126 | 				</div>
127 | 				<!-- Aside Nav -->
128 | 			</div>
129 | 			<!-- /Nav -->
130 | 			
131 | 			<!-- Page Header -->
132 | 			<div id="post-header" class="page-header">
133 | 				<div class="background-img" style="background-image: url('./img/post-page.jpg');"></div>
134 | 				<div class="container">
135 | 					<div class="row">
136 | 						<div class="col-md-10">
137 | 							<div class="post-meta">
138 | 								<a class="post-category cat-2" href="category.html">JavaScript</a>
139 | 								<span class="post-date">March 27, 2018</span>
140 | 							</div>
141 | 							<h1>Ask HN: Does Anybody Still Use JQuery?</h1>
142 | 						</div>
143 | 					</div>
144 | 				</div>
145 | 			</div>
146 | 			<!-- /Page Header -->
147 | 		</header>
148 | 		<!-- /Header -->
149 | 
150 | 		<!-- section -->
151 | 		<div class="section">
152 | 			<!-- container -->
153 | 			<div class="container">
154 | 				<!-- row -->
155 | 				<div class="row">
156 | 					<!-- Post content -->
157 | 					<div class="col-md-8">
158 | 						<div class="section-row sticky-container">
159 | 							<div class="main-post">
160 | 								<h3>Lorem Ipsum: when, and when not to use it</h3>
161 | 								<p>Do you like Cheese Whiz? Spray tan? Fake eyelashes? That's what is Lorem Ipsum to many—it rubs them the wrong way, all the way. It's unreal, uncanny, makes you wonder if something is wrong, it seems to seek your attention for all the wrong reasons. Usually, we prefer the real thing, wine without sulfur based preservatives, real butter, not margarine, and so we'd like our layouts and designs to be filled with real words, with thoughts that count, information that has value. </p>
162 | 								<p>The toppings you may chose for that TV dinner pizza slice when you forgot to shop for foods, the paint you may slap on your face to impress the new boss is your business. But what about your daily bread? Design comps, layouts, wireframes—will your clients accept that you go about things the facile way? Authorities in our business will tell in no uncertain terms that Lorem Ipsum is that huge, huge no no to forswear forever. Not so fast, I'd say, there are some redeeming factors in favor of greeking text, as its use is merely the symptom of a worse problem to take into consideration.</p>
163 | 								<figure class="figure-img">
164 | 									<img class="img-responsive" src="./img/post-4.jpg" alt="">
165 | 									<figcaption>So Lorem Ipsum is bad (not necessarily)</figcaption>
166 | 								</figure>
167 | 								<p>You begin with a text, you sculpt information, you chisel away what's not needed, you come to the point, make things clear, add value, you're a content person, you like words. Design is no afterthought, far from it, but it comes in a deserved second. Anyway, you still use Lorem Ipsum and rightly so, as it will always have a place in the web workers toolbox, as things happen, not always the way you like it, not always in the preferred order. Even if your less into design and more into content strategy you may find some redeeming value with, wait for it, dummy copy, no less.</p>
168 | 								<p>There's lot of hate out there for a text that amounts to little more than garbled words in an old language. The villagers are out there with a vengeance to get that Frankenstein, wielding torches and pitchforks, wanting to tar and feather it at the least, running it out of town in shame.</p>
169 | 								<p>One of the villagers, Kristina Halvorson from Adaptive Path, holds steadfastly to the notion that design can’t be tested without real content:</p>
170 | 								<blockquote class="blockquote">
171 | 									I’ve heard the argument that “lorem ipsum” is effective in wireframing or design because it helps people focus on the actual layout, or color scheme, or whatever. What kills me here is that we’re talking about creating a user experience that will (whether we like it or not) be DRIVEN by words. The entire structure of the page or app flow is FOR THE WORDS.
172 | 								</blockquote>
173 | 								<p>If that's what you think how bout the other way around? How can you evaluate content without design? No typography, no colors, no layout, no styles, all those things that convey the important signals that go beyond the mere textual, hierarchies of information, weight, emphasis, oblique stresses, priorities, all those subtle cues that also have visual and emotional appeal to the reader. Rigid proponents of content strategy may shun the use of dummy copy but then designers might want to ask them to provide style sheets with the copy decks they supply that are in tune with the design direction they require.</p>
174 | 								<h3>Summing up, if the copy is diverting attention from the design it’s because it’s not up to task.</h3>
175 | 								<p>Typographers of yore didn't come up with the concept of dummy copy because people thought that content is inconsequential window dressing, only there to be used by designers who can’t be bothered to read. Lorem Ipsum is needed because words matter, a lot. Just fill up a page with draft copy about the client’s business and they will actually read it and comment on it. They will be drawn to it, fiercely. Do it the wrong way and draft copy can derail your design review.</p>
176 | 							</div>
177 | 							<div class="post-shares sticky-shares">
178 | 								<a href="#" class="share-facebook"><i class="fa fa-facebook"></i></a>
179 | 								<a href="#" class="share-twitter"><i class="fa fa-twitter"></i></a>
180 | 								<a href="#" class="share-google-plus"><i class="fa fa-google-plus"></i></a>
181 | 								<a href="#" class="share-pinterest"><i class="fa fa-pinterest"></i></a>
182 | 								<a href="#" class="share-linkedin"><i class="fa fa-linkedin"></i></a>
183 | 								<a href="#"><i class="fa fa-envelope"></i></a>
184 | 							</div>
185 | 						</div>
186 | 
187 | 						<!-- ad -->
188 | 						<div class="section-row text-center">
189 | 							<a href="#" style="display: inline-block;margin: auto;">
190 | 								<img class="img-responsive" src="./img/ad-2.jpg" alt="">
191 | 							</a>
192 | 						</div>
193 | 						<!-- ad -->
194 | 						
195 | 						<!-- author -->
196 | 						<div class="section-row">
197 | 							<div class="post-author">
198 | 								<div class="media">
199 | 									<div class="media-left">
200 | 										<img class="media-object" src="./img/author.png" alt="">
201 | 									</div>
202 | 									<div class="media-body">
203 | 										<div class="media-heading">
204 | 											<h3>John Doe</h3>
205 | 										</div>
206 | 										<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.</p>
207 | 										<ul class="author-social">
208 | 											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
209 | 											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
210 | 											<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
211 | 											<li><a href="#"><i class="fa fa-instagram"></i></a></li>
212 | 										</ul>
213 | 									</div>
214 | 								</div>
215 | 							</div>
216 | 						</div>
217 | 						<!-- /author -->
218 | 
219 | 						<!-- comments -->
220 | 						<div class="section-row">
221 | 							<div class="section-title">
222 | 								<h2>3 Comments</h2>
223 | 							</div>
224 | 
225 | 							<div class="post-comments">
226 | 								<!-- comment -->
227 | 								<div class="media">
228 | 									<div class="media-left">
229 | 										<img class="media-object" src="./img/avatar.png" alt="">
230 | 									</div>
231 | 									<div class="media-body">
232 | 										<div class="media-heading">
233 | 											<h4>John Doe</h4>
234 | 											<span class="time">March 27, 2018 at 8:00 am</span>
235 | 											<a href="#" class="reply">Reply</a>
236 | 										</div>
237 | 										<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.</p>
238 | 
239 | 										<!-- comment -->
240 | 										<div class="media">
241 | 											<div class="media-left">
242 | 												<img class="media-object" src="./img/avatar.png" alt="">
243 | 											</div>
244 | 											<div class="media-body">
245 | 												<div class="media-heading">
246 | 													<h4>John Doe</h4>
247 | 													<span class="time">March 27, 2018 at 8:00 am</span>
248 | 													<a href="#" class="reply">Reply</a>
249 | 												</div>
250 | 												<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.</p>
251 | 											</div>
252 | 										</div>
253 | 										<!-- /comment -->
254 | 									</div>
255 | 								</div>
256 | 								<!-- /comment -->
257 | 
258 | 								<!-- comment -->
259 | 								<div class="media">
260 | 									<div class="media-left">
261 | 										<img class="media-object" src="./img/avatar.png" alt="">
262 | 									</div>
263 | 									<div class="media-body">
264 | 										<div class="media-heading">
265 | 											<h4>John Doe</h4>
266 | 											<span class="time">March 27, 2018 at 8:00 am</span>
267 | 											<a href="#" class="reply">Reply</a>
268 | 										</div>
269 | 										<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.</p>
270 | 									</div>
271 | 								</div>
272 | 								<!-- /comment -->
273 | 							</div>
274 | 						</div>
275 | 						<!-- /comments -->
276 | 
277 | 						<!-- reply -->
278 | 						<div class="section-row">
279 | 							<div class="section-title">
280 | 								<h2>Leave a reply</h2>
281 | 								<p>your email address will not be published. required fields are marked *</p>
282 | 							</div>
283 | 							<form class="post-reply">
284 | 								<div class="row">
285 | 									<div class="col-md-4">
286 | 										<div class="form-group">
287 | 											<span>Name *</span>
288 | 											<input class="input" type="text" name="name">
289 | 										</div>
290 | 									</div>
291 | 									<div class="col-md-4">
292 | 										<div class="form-group">
293 | 											<span>Email *</span>
294 | 											<input class="input" type="email" name="email">
295 | 										</div>
296 | 									</div>
297 | 									<div class="col-md-4">
298 | 										<div class="form-group">
299 | 											<span>Website</span>
300 | 											<input class="input" type="text" name="website">
301 | 										</div>
302 | 									</div>
303 | 									<div class="col-md-12">
304 | 										<div class="form-group">
305 | 											<textarea class="input" name="message" placeholder="Message"></textarea>
306 | 										</div>
307 | 										<button class="primary-button">Submit</button>
308 | 									</div>
309 | 								</div>
310 | 							</form>
311 | 						</div>
312 | 						<!-- /reply -->
313 | 					</div>
314 | 					<!-- /Post content -->
315 | 
316 | 					<!-- aside -->
317 | 					<div class="col-md-4">
318 | 						<!-- ad -->
319 | 						<div class="aside-widget text-center">
320 | 							<a href="#" style="display: inline-block;margin: auto;">
321 | 								<img class="img-responsive" src="./img/ad-1.jpg" alt="">
322 | 							</a>
323 | 						</div>
324 | 						<!-- /ad -->
325 | 
326 | 						<!-- post widget -->
327 | 						<div class="aside-widget">
328 | 							<div class="section-title">
329 | 								<h2>Most Read</h2>
330 | 							</div>
331 | 
332 | 							<div class="post post-widget">
333 | 								<a class="post-img" href="blog-post.html"><img src="./img/widget-1.jpg" alt=""></a>
334 | 								<div class="post-body">
335 | 									<h3 class="post-title"><a href="blog-post.html">Tell-A-Tool: Guide To Web Design And Development Tools</a></h3>
336 | 								</div>
337 | 							</div>
338 | 
339 | 							<div class="post post-widget">
340 | 								<a class="post-img" href="blog-post.html"><img src="./img/widget-2.jpg" alt=""></a>
341 | 								<div class="post-body">
342 | 									<h3 class="post-title"><a href="blog-post.html">Pagedraw UI Builder Turns Your Website Design Mockup Into Code Automatically</a></h3>
343 | 								</div>
344 | 							</div>
345 | 
346 | 							<div class="post post-widget">
347 | 								<a class="post-img" href="blog-post.html"><img src="./img/widget-3.jpg" alt=""></a>
348 | 								<div class="post-body">
349 | 									<h3 class="post-title"><a href="blog-post.html">Why Node.js Is The Coolest Kid On The Backend Development Block!</a></h3>
350 | 								</div>
351 | 							</div>
352 | 
353 | 							<div class="post post-widget">
354 | 								<a class="post-img" href="blog-post.html"><img src="./img/widget-4.jpg" alt=""></a>
355 | 								<div class="post-body">
356 | 									<h3 class="post-title"><a href="blog-post.html">Tell-A-Tool: Guide To Web Design And Development Tools</a></h3>
357 | 								</div>
358 | 							</div>
359 | 						</div>
360 | 						<!-- /post widget -->
361 | 
362 | 						<!-- post widget -->
363 | 						<div class="aside-widget">
364 | 							<div class="section-title">
365 | 								<h2>Featured Posts</h2>
366 | 							</div>
367 | 							<div class="post post-thumb">
368 | 								<a class="post-img" href="blog-post.html"><img src="./img/post-2.jpg" alt=""></a>
369 | 								<div class="post-body">
370 | 									<div class="post-meta">
371 | 										<a class="post-category cat-3" href="#">Jquery</a>
372 | 										<span class="post-date">March 27, 2018</span>
373 | 									</div>
374 | 									<h3 class="post-title"><a href="blog-post.html">Ask HN: Does Anybody Still Use JQuery?</a></h3>
375 | 								</div>
376 | 							</div>
377 | 
378 | 							<div class="post post-thumb">
379 | 								<a class="post-img" href="blog-post.html"><img src="./img/post-1.jpg" alt=""></a>
380 | 								<div class="post-body">
381 | 									<div class="post-meta">
382 | 										<a class="post-category cat-2" href="#">JavaScript</a>
383 | 										<span class="post-date">March 27, 2018</span>
384 | 									</div>
385 | 									<h3 class="post-title"><a href="blog-post.html">Chrome Extension Protects Against JavaScript-Based CPU Side-Channel Attacks</a></h3>
386 | 								</div>
387 | 							</div>
388 | 						</div>
389 | 						<!-- /post widget -->
390 | 						
391 | 						<!-- catagories -->
392 | 						<div class="aside-widget">
393 | 							<div class="section-title">
394 | 								<h2>Catagories</h2>
395 | 							</div>
396 | 							<div class="category-widget">
397 | 								<ul>
398 | 									<li><a href="#" class="cat-1">Web Design<span>340</span></a></li>
399 | 									<li><a href="#" class="cat-2">JavaScript<span>74</span></a></li>
400 | 									<li><a href="#" class="cat-4">JQuery<span>41</span></a></li>
401 | 									<li><a href="#" class="cat-3">CSS<span>35</span></a></li>
402 | 								</ul>
403 | 							</div>
404 | 						</div>
405 | 						<!-- /catagories -->
406 | 						
407 | 						<!-- tags -->
408 | 						<div class="aside-widget">
409 | 							<div class="tags-widget">
410 | 								<ul>
411 | 									<li><a href="#">Chrome</a></li>
412 | 									<li><a href="#">CSS</a></li>
413 | 									<li><a href="#">Tutorial</a></li>
414 | 									<li><a href="#">Backend</a></li>
415 | 									<li><a href="#">JQuery</a></li>
416 | 									<li><a href="#">Design</a></li>
417 | 									<li><a href="#">Development</a></li>
418 | 									<li><a href="#">JavaScript</a></li>
419 | 									<li><a href="#">Website</a></li>
420 | 								</ul>
421 | 							</div>
422 | 						</div>
423 | 						<!-- /tags -->
424 | 						
425 | 						<!-- archive -->
426 | 						<div class="aside-widget">
427 | 							<div class="section-title">
428 | 								<h2>Archive</h2>
429 | 							</div>
430 | 							<div class="archive-widget">
431 | 								<ul>
432 | 									<li><a href="#">January 2018</a></li>
433 | 									<li><a href="#">Febuary 2018</a></li>
434 | 									<li><a href="#">March 2018</a></li>
435 | 								</ul>
436 | 							</div>
437 | 						</div>
438 | 						<!-- /archive -->
439 | 					</div>
440 | 					<!-- /aside -->
441 | 				</div>
442 | 				<!-- /row -->
443 | 			</div>
444 | 			<!-- /container -->
445 | 		</div>
446 | 		<!-- /section -->
447 | 
448 | 		<!-- Footer -->
449 | 		<footer id="footer">
450 | 			<!-- container -->
451 | 			<div class="container">
452 | 				<!-- row -->
453 | 				<div class="row">
454 | 					<div class="col-md-5">
455 | 						<div class="footer-widget">
456 | 							<div class="footer-logo">
457 | 								<a href="index.html" class="logo"><img src="./img/logo.png" alt=""></a>
458 | 							</div>
459 | 							<ul class="footer-nav">
460 | 								<li><a href="#">Privacy Policy</a></li>
461 | 								<li><a href="#">Advertisement</a></li>
462 | 							</ul>
463 | 							<div class="footer-copyright">
464 | 								<span>&copy; <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
465 | Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
466 | <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></span>
467 | 							</div>
468 | 						</div>
469 | 					</div>
470 | 
471 | 					<div class="col-md-4">
472 | 						<div class="row">
473 | 							<div class="col-md-6">
474 | 								<div class="footer-widget">
475 | 									<h3 class="footer-title">About Us</h3>
476 | 									<ul class="footer-links">
477 | 										<li><a href="about.html">About Us</a></li>
478 | 										<li><a href="#">Join Us</a></li>
479 | 										<li><a href="contact.html">Contacts</a></li>
480 | 									</ul>
481 | 								</div>
482 | 							</div>
483 | 							<div class="col-md-6">
484 | 								<div class="footer-widget">
485 | 									<h3 class="footer-title">Catagories</h3>
486 | 									<ul class="footer-links">
487 | 										<li><a href="category.html">Web Design</a></li>
488 | 										<li><a href="category.html">JavaScript</a></li>
489 | 										<li><a href="category.html">Css</a></li>
490 | 										<li><a href="category.html">Jquery</a></li>
491 | 									</ul>
492 | 								</div>
493 | 							</div>
494 | 						</div>
495 | 					</div>
496 | 
497 | 					<div class="col-md-3">
498 | 						<div class="footer-widget">
499 | 							<h3 class="footer-title">Join our Newsletter</h3>
500 | 							<div class="footer-newsletter">
501 | 								<form>
502 | 									<input class="input" type="email" name="newsletter" placeholder="Enter your email">
503 | 									<button class="newsletter-btn"><i class="fa fa-paper-plane"></i></button>
504 | 								</form>
505 | 							</div>
506 | 							<ul class="footer-social">
507 | 								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
508 | 								<li><a href="#"><i class="fa fa-twitter"></i></a></li>
509 | 								<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
510 | 								<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
511 | 							</ul>
512 | 						</div>
513 | 					</div>
514 | 
515 | 				</div>
516 | 				<!-- /row -->
517 | 			</div>
518 | 			<!-- /container -->
519 | 		</footer>
520 | 		<!-- /Footer -->
521 | 
522 | 		<!-- jQuery Plugins -->
523 | 		<script src="js/jquery.min.js"></script>
524 | 		<script src="js/bootstrap.min.js"></script>
525 | 		<script src="js/main.js"></script>
526 | 
527 | 	</body>
528 | </html>
529 | 


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | /* 
  2 | Template Name: WebMag Html Template
  3 | 
  4 | Author: yaminncco
  5 | 
  6 | Colors:
  7 | 	Body : #3d455c
  8 | 	Headers : #212631
  9 | 	Primary : #212631 #4BB92F #ff8700 #0078ff #8d00ff
 10 | 	Dark : #212631
 11 | 	Grey : #eceef2 #a7b3c6 #fbfbfd
 12 | 
 13 | Fonts: Nunito & Nunito-Sans
 14 | 
 15 | Table OF Contents
 16 | ------------------------------------
 17 | GENERAL
 18 | NAVIGATION
 19 | HEADER
 20 | POST
 21 | POST PAGE
 22 | ASIDE
 23 | FOOTER
 24 | RESPONSIVE
 25 | ------------------------------------*/
 26 | /*=========================================================
 27 | 	GENERAL
 28 | ===========================================================*/
 29 | /*----------------------------*\
 30 | 	typography
 31 | \*----------------------------*/
 32 |  body {
 33 |      font-family: 'Nunito', sans-serif;
 34 |      font-size: 16px;
 35 |      font-weight: 300;
 36 |      color: #3d455c;
 37 |      margin: 0;
 38 |      padding: 0;
 39 |      overflow-x: hidden;
 40 | }
 41 |  h1, h2, h3, h4, h5, h6 {
 42 |      font-family: 'Nunito Sans', sans-serif;
 43 |      font-weight: 700;
 44 |      color: #212631;
 45 |      margin: 0px 0px 15px;
 46 | }
 47 |  h1 {
 48 |      font-size: 34px;
 49 | }
 50 |  h2 {
 51 |      font-size: 28px;
 52 | }
 53 |  h3 {
 54 |      font-size: 23px;
 55 | }
 56 |  h4 {
 57 |      font-size: 16px;
 58 | }
 59 |  a {
 60 |      font-weight: 600;
 61 |      color: #212631;
 62 |      text-decoration: none;
 63 | }
 64 |  a:hover, a:focus{
 65 |      color: #212631;
 66 |      text-decoration: underline;
 67 |      outline: none;
 68 | }
 69 |  p {
 70 |      margin: 0px 0px 20px;
 71 | }
 72 |  ul,ol{
 73 |      margin: 0;
 74 |      padding: 0;
 75 |      list-style: none 
 76 | }
 77 |  ul.list-style, ol.list-style {
 78 |      padding-left: 15px;
 79 |      margin-bottom: 10px;
 80 | }
 81 |  ul.list-style {
 82 |      list-style-type: disc;
 83 | }
 84 |  ol.list-style {
 85 |      list-style-type: decimal;
 86 | }
 87 |  blockquote.blockquote {
 88 |      position:relative;
 89 |      border-left:0;
 90 |      font-weight:600;
 91 |      margin-bottom:10px;
 92 | 	 padding: 20px;
 93 | }
 94 |  blockquote.blockquote:before {
 95 |      content: "``";
 96 |      font-family: 'Nunito Sans', sans-serif;
 97 |      display: block;
 98 |      position: absolute;
 99 |      left: -5px;
100 |      top: 5px;
101 |      font-size: 240px;
102 |      line-height: 200px;
103 |      color: #eceef2;
104 |      letter-spacing: -30px;
105 |      z-index: -2;
106 | }
107 |  figure.figure-img {
108 |      margin-bottom:20px;
109 | }
110 |  figure.figure-img figcaption {
111 |      padding-top:5px;
112 |      font-size: 13px;
113 |      font-weight:600;
114 | }
115 |  .input {
116 |      height: 40px;
117 |      border: 2px solid #eceef2;
118 |      width: 100%;
119 |      padding: 0px 15px;
120 |      -webkit-transition: 0.2s border;
121 |      transition: 0.2s border;
122 | }
123 |  .input:focus {
124 |      border-color: #3d455c;
125 | }
126 |  textarea.input {
127 |      height: 90px;
128 |      padding: 15px;
129 | }
130 |  .primary-button {
131 |      padding: 9px 45px;
132 |      border: none;
133 |      background-color: #212631;
134 |      font-weight: 600;
135 |      text-transform: uppercase;
136 |      font-size: 13px;
137 |      color: #fff;
138 |      -webkit-transition: 0.2s opacity;
139 |      transition: 0.2s opacity;
140 | }
141 |  .primary-button:hover,.primary-button:focus {
142 |      color: #fff;
143 |      opacity: 0.9;
144 | }
145 |  .section {
146 |      padding-top: 40px;
147 | }
148 |  .section.section-grey {
149 |      background-color: #fbfbfd;
150 |      border-bottom: 1px solid #eceef2;
151 |      border-top: 1px solid #eceef2;
152 | }
153 |  .section .section-title {
154 |      margin-bottom: 40px;
155 | }
156 |  .section .section-title h2 {
157 |      text-transform: capitalize;
158 |      font-size: 28px;
159 | }
160 |  .section-row {
161 |      margin-bottom:40px;
162 | }
163 | /*=========================================================
164 | 	NAVIGATION
165 | ===========================================================*/
166 |  #nav {
167 |      height: 70px;
168 | }
169 |  #nav:after {
170 |      content: "";
171 |      position: fixed;
172 |      left: 0;
173 |      right: 0;
174 |      bottom: 0;
175 |      top: 0;
176 |      background-color: rgba(33, 38, 49, 0.5);
177 |      z-index: 90;
178 |      opacity: 0;
179 |      visibility: hidden;
180 |      -webkit-transition: 0.2s all;
181 |      transition: 0.2s all;
182 | }
183 |  #nav.shadow-active:after {
184 |      opacity: 1;
185 |      visibility: visible;
186 | }
187 |  #nav-fixed {
188 |      position: fixed;
189 |      left: 0;
190 |      right: 0;
191 |      top: 0;
192 |      z-index: 90;
193 |      background-color: #FFF;
194 |      -webkit-box-shadow: 0px -1px 0px 0px #eceef2 inset;
195 |      box-shadow: 0px -1px 0px 0px #eceef2 inset;
196 | }
197 |  #nav-fixed.slide-down {
198 |      -webkit-animation: slide-down 0.3s;
199 |      animation: slide-down 0.3s;
200 | }
201 |  #nav-fixed.slide-up {
202 |      -webkit-animation: slide-up 0.3s;
203 |      animation: slide-up 0.3s;
204 |      -webkit-animation-fill-mode: forwards;
205 |      animation-fill-mode: forwards;
206 | }
207 |  @-webkit-keyframes slide-down {
208 |      from {
209 |          -webkit-transform:translateY(-100%);
210 |          transform:translateY(-100%);
211 |     }
212 |      to {
213 |          -webkit-transform:translateY(0%);
214 |          transform:translateY(0%);
215 |     }
216 | }
217 |  @keyframes slide-down {
218 |      from {
219 |          -webkit-transform:translateY(-100%);
220 |          transform:translateY(-100%);
221 |     }
222 |      to {
223 |          -webkit-transform:translateY(0%);
224 |          transform:translateY(0%);
225 |     }
226 | }
227 |  @-webkit-keyframes slide-up {
228 |      from {
229 |          -webkit-transform:translateY(0%);
230 |          transform:translateY(0%);
231 |     }
232 |      to {
233 |          -webkit-transform:translateY(-100%);
234 |          transform:translateY(-100%);
235 |     }
236 | }
237 |  @keyframes slide-up {
238 |      from {
239 |          -webkit-transform:translateY(0%);
240 |          transform:translateY(0%);
241 |     }
242 |      to {
243 |          -webkit-transform:translateY(-100%);
244 |          transform:translateY(-100%);
245 |     }
246 | }
247 |  #nav .container {
248 |      position: relative;
249 | }
250 | /*----------------------------*\
251 | 	logo
252 | \*----------------------------*/
253 |  .nav-logo {
254 |      float:left;
255 | }
256 |  .nav-logo .logo {
257 |      line-height: 70px;
258 |      display:inline-block;
259 | }
260 |  .nav-logo .logo > img {
261 |      width: 100%;
262 |      max-height: 70px;
263 | }
264 | /*----------------------------*\
265 | 	menu
266 | \*----------------------------*/
267 |  .nav-menu {
268 |      margin-left: 20px;
269 | }
270 |  .nav-menu li a {
271 |      position: relative;
272 |      padding: 25px 20px;
273 |      text-transform: capitalize;
274 |      -webkit-box-shadow: -1px 0px 0px 0px #eceef2 inset;
275 |      box-shadow: -1px 0px 0px 0px #eceef2 inset;
276 |      -webkit-transition: 0.2s color;
277 |      transition: 0.2s color;
278 | }
279 |  .nav-menu li:first-child a {
280 |      border-left: 1px solid #eceef2;
281 | }
282 |  .nav-menu li a:after {
283 |      content: '';
284 |      position: absolute;
285 |      left: 0;
286 |      right: 0;
287 |      bottom: 0px;
288 |      width: 100%;
289 |      height: 4px;
290 |      -webkit-transition: 0.2s width;
291 |      transition: 0.2s width;
292 | }
293 |  .nav-menu li.cat-1 a:after {
294 |      background-color: #4BB92F;
295 | }
296 |  .nav-menu li.cat-2 a:after {
297 |      background-color: #ff8700;
298 | }
299 |  .nav-menu li.cat-3 a:after {
300 |      background-color: #0078ff;
301 | }
302 |  .nav-menu li.cat-4 a:after {
303 |      background-color: #8d00ff;
304 | }
305 |  .nav-menu li a:hover, .nav-menu li a:focus {
306 |      background-color: transparent;
307 |      text-decoration: none;
308 | }
309 |  .nav-menu li.cat-1 a:hover, .nav-menu li.cat-1 a:focus {
310 |      color: #4BB92F;
311 | }
312 |  .nav-menu li.cat-2 a:hover, .nav-menu li.cat-2 a:focus {
313 |      color: #ff8700;
314 | }
315 |  .nav-menu li.cat-3 a:hover, .nav-menu li.cat-3 a:focus {
316 |      color: #0078ff;
317 | }
318 |  .nav-menu li.cat-4 a:hover, .nav-menu li.cat-4 a:focus {
319 |      color: #8d00ff;
320 | }
321 | /*----------------------------*\
322 | 	search
323 | \*----------------------------*/
324 |  .nav-btns {
325 |      float:right;
326 | }
327 |  .nav-btns > button {
328 |      padding: 25px 25px;
329 |      border: none;
330 |      line-height: 20px;
331 |      background: transparent;
332 | }
333 |  .nav-btns .search-form {
334 |      position: absolute;
335 |      left: 0;
336 |      right: 0;
337 |      top: 0;
338 |      bottom: 0px;
339 |      padding: 0px 15px;
340 |      opacity: 0;
341 |      visibility: hidden;
342 |      -webkit-transition: 0.3s all;
343 |      transition: 0.3s all;
344 | }
345 |  .nav-btns .search-form.active {
346 |      opacity: 1;
347 |      visibility: visible;
348 | }
349 |  .nav-btns .search-form .search-input {
350 |      height: 100%;
351 |      width: 100%;
352 |      border: none;
353 |      background: #FFF;
354 |      padding: 0px;
355 |      font-weight: 600;
356 | }
357 |  .nav-btns .search-form .search-close {
358 |      position: absolute;
359 |      top: 50%;
360 |      right: 15px;
361 |      -webkit-transform: translateY(-50%);
362 |      -ms-transform: translateY(-50%);
363 |      transform: translateY(-50%);
364 |      border: none;
365 |      background: transparent;
366 |      line-height: 20px;
367 |      color: #212631;
368 |      font-size: 22px;
369 |      padding: 0;
370 | }
371 | /*----------------------------*\
372 | 	nav aside
373 | \*----------------------------*/
374 |  #nav-aside {
375 |      position: fixed;
376 |      right: 0;
377 |      top: 0;
378 |      bottom: 0;
379 |      background-color: #fff;
380 |      max-width: 360px;
381 |      width: 100%;
382 |      padding: 80px 20px;
383 |      overflow-y: scroll;
384 |      z-index: 99;
385 |      -webkit-transform: translateX(100%);
386 |      -ms-transform: translateX(100%);
387 |      transform: translateX(100%);
388 |      -webkit-transition: 0.3s all;
389 |      transition: 0.3s all;
390 | }
391 |  #nav-aside.active {
392 |      -webkit-transform: translateX(0%);
393 |      -ms-transform: translateX(0%);
394 |      transform: translateX(0%);
395 | }
396 |  .nav-aside-menu li a {
397 |      font-family: 'Nunito Sans', sans-serif;
398 |      font-weight:700;
399 |      font-size:23px;
400 | }
401 |  .nav-aside-social li {
402 |      display: inline-block;
403 | }
404 |  .nav-aside-social li > a {
405 |      display: block;
406 |      width: 30px;
407 |      height: 30px;
408 |      line-height: 30px;
409 |      text-align: center;
410 |      background-color: #212631;
411 |      color: #FFF;
412 |      border-radius: 2px;
413 |      margin-right: 5px;
414 |      -webkit-transition: 0.2s opacity;
415 |      transition: 0.2s opacity;
416 | }
417 |  .nav-aside-social li > a:hover, .nav-aside-social li > a:focus {
418 |      opacity: 0.9;
419 | }
420 |  .nav-aside-close {
421 |      position: absolute;
422 |      top: 0px;
423 |      right: 0px;
424 |      height: 70px;
425 |      width: 70px;
426 |      line-height: 70px;
427 |      text-align: center;
428 |      background-color: transparent;
429 |      color: #212631;
430 |      border: none;
431 |      font-size: 22px;
432 |      border-radius: 50%;
433 |      padding: 0;
434 | }
435 | /*=========================================================
436 | 	HEADER
437 | ===========================================================*/
438 |  .page-header {
439 |      position: relative;
440 |      margin: 0;
441 | 	 padding-top: 60px;
442 |      padding-bottom: 60px;
443 |      background-color: #fbfbfd;
444 |      border-bottom: 2px solid #F4f4f9;
445 | }
446 |  .page-header .background-img {
447 |      position: absolute;
448 |      top: 0;
449 |      left: 0;
450 |      right: 0;
451 |      bottom: 0;
452 |      background-position: center;
453 |      background-size: cover;
454 | }
455 |  .page-header .background-img:after {
456 |      content: '';
457 |      position: absolute;
458 |      top: 0;
459 |      left: 0;
460 |      right: 0;
461 |      bottom: 0;
462 |      background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(33, 38, 49, 0.3)), to(transparent));
463 |      background-image: linear-gradient(to top, rgba(33, 38, 49, 0.3) 0%, transparent 100%);
464 | }
465 |  #post-header.page-header {
466 |      padding-top: 120px;
467 | }
468 |  .page-header h1 {
469 |      text-transform: capitalize;
470 |      margin-bottom: 0px;
471 | }
472 |  #post-header.page-header h1 {
473 |      color: #FFF;
474 | }
475 |  .page-header .post-meta {
476 |      margin: 15px 0px;
477 | }
478 |  .page-header .post-meta .post-date {
479 |      color: #eceef2;
480 | }
481 |  .page-header .page-header-breadcrumb {
482 |      margin: 15px 0px;
483 | }
484 |  .page-header .page-header-breadcrumb li {
485 |      display: inline-block;
486 | }
487 |  .page-header .page-header-breadcrumb li, .page-header .page-header-breadcrumb li a {
488 |      font-size: 13px;
489 |      text-transform: capitalize;
490 |      color: #a7b3c6;
491 | }
492 |  .page-header .page-header-breadcrumb li a {
493 |      -webkit-transition: 0.2s color;
494 |      transition: 0.2s color;
495 | }
496 |  .page-header .page-header-breadcrumb li a:hover, .page-header .page-header-breadcrumb li a:focus {
497 |      color: #0b0f28;
498 |      text-decoration: none;
499 | }
500 |  .page-header .page-header-breadcrumb li + li:before {
501 |      content: '/';
502 |      display: inline-block;
503 |      margin: 0px 10px;
504 | }
505 | /*=========================================================
506 | 	POST
507 | ===========================================================*/
508 | /*----------------------------*\
509 | 	post
510 | \*----------------------------*/
511 |  .post {
512 |      margin-bottom: 40px;
513 | }
514 |  .post .post-img {
515 |      display: block;
516 |      -webkit-transition: 0.2s opacity;
517 |      transition: 0.2s opacity;
518 | }
519 |  .post .post-img:hover, .post .post-img:focus {
520 |      opacity: 0.9;
521 | }
522 |  .post .post-img > img {
523 |      width: 100%;
524 | }
525 |  .post .post-meta {
526 |      margin-top: 15px;
527 |      margin-bottom: 15px;
528 | }
529 |  .post-meta .post-category {
530 |      font-size: 13px;
531 |      text-transform: uppercase;
532 |      padding: 3px 10px;
533 |      font-weight: 600;
534 |      border-radius: 2px;
535 |      margin-right: 15px;
536 |      color: #FFF;
537 |      background-color: #212631;
538 |      -webkit-transition: 0.2s opacity;
539 |      transition: 0.2s opacity;
540 | }
541 |  .post-meta .post-category:hover, .post-meta .post-category:focus {
542 |      text-decoration: none;
543 |      opacity: 0.9;
544 | }
545 |  .post-meta .post-category.cat-1 {
546 |      background-color: #4BB92F;
547 | }
548 |  .post-meta .post-category.cat-2 {
549 |      background-color: #ff8700;
550 | }
551 |  .post-meta .post-category.cat-3 {
552 |      background-color: #8d00ff;
553 | }
554 |  .post-meta .post-category.cat-4 {
555 |      background-color: #0078ff;
556 | }
557 |  .post-meta .post-date {
558 |      font-size: 13px;
559 |      font-weight: 600;
560 | }
561 |  .post .post-title {
562 |      font-size: 18px;
563 |      margin-bottom: 0px;
564 | }
565 |  .post-tags li {
566 |      display:inline-block;
567 |      margin-right:3px;
568 |      margin-bottom:5px;
569 | }
570 |  .post-tags li a {
571 |      display:block;
572 |      color:#fff;
573 |      background-color: #212631;
574 |      padding:3px 10px;
575 |      font-weight:600;
576 |      border-radius:2px;
577 |      -webkit-transition:0.2s opacity;
578 |      transition:0.2s opacity;
579 | }
580 | /*----------------------------*\
581 | 	post thumb
582 | \*----------------------------*/
583 |  .post.post-thumb {
584 |      position: relative;
585 | }
586 |  .post.post-thumb .post-img:after {
587 |      content: '';
588 |      position: absolute;
589 |      left: 0;
590 |      right: 0;
591 |      bottom: 0;
592 |      top: 0;
593 |      background: -webkit-gradient(linear, left bottom, left top, from(rgba(33, 38, 49, 0.3)), to(transparent));
594 |      background: linear-gradient(to top, rgba(33, 38, 49, 0.3) 0%, transparent 100%);
595 | }
596 |  .post.post-thumb .post-body {
597 |      position: absolute;
598 |      bottom: 0px;
599 |      padding: 20px 15px;
600 | }
601 |  .post.post-thumb .post-meta .post-date {
602 |      color: #eceef2;
603 | }
604 |  .post.post-thumb .post-title {
605 |      font-size: 22px;
606 | }
607 |  .post.post-thumb .post-title > a {
608 |      color: #FFF;
609 | }
610 | /*----------------------------*\
611 | 	post widget
612 | \*----------------------------*/
613 |  .post.post-widget:after {
614 |      content: '';
615 |      display: block;
616 |      clear: both;
617 | }
618 |  .post.post-widget .post-img {
619 |      width: 90px;
620 |      float: left;
621 |      margin-right: 15px;
622 | }
623 |  .post.post-widget .post-img img {
624 |      width: 100%;
625 | }
626 |  .post.post-widget .post-title {
627 |      font-size: 18px;
628 | }
629 | /*----------------------------*\
630 | 	post row
631 | \*----------------------------*/
632 |  .post.post-row:after {
633 |      content: '';
634 |      display: block;
635 |      clear: both;
636 | }
637 |  .post.post-row .post-img {
638 |      width: 40%;
639 |      float: left;
640 | }
641 |  .post.post-row .post-body {
642 |      margin-left: calc(40% + 30px);
643 | }
644 |  .post.post-row .post-meta {
645 |      margin-top: 0px;
646 | }
647 |  .post.post-row .post-title {
648 |      margin-bottom: 15px;
649 | }
650 | /*=========================================================
651 | 	POST PAGE
652 | ===========================================================*/
653 |  .sticky-container {
654 |      position: relative;
655 |      padding-left: 80px;
656 | }
657 |  .sticky-container .sticky-shares {
658 |      position: absolute;
659 |      top: 0;
660 |      left: 0;
661 | }
662 |  .sticky-shares a {
663 |      display: block;
664 |      margin-bottom: 10px;
665 |      width: 40px;
666 |      height: 40px;
667 |      line-height: 40px;
668 |      text-align: center;
669 |      border-radius: 50%;
670 |      background-color: #fbfbfd;
671 |      color: #a7b3c6;
672 |      border: 1px solid #eceef2;
673 |      -webkit-transition: 0.2s all;
674 |      transition: 0.2s all;
675 | }
676 |  .sticky-shares a:hover {
677 |      -webkit-transform: scale(1.3);
678 |      -ms-transform: scale(1.3);
679 |      transform: scale(1.3);
680 | }
681 |  .sticky-shares a.share-facebook:hover {
682 |      color: #3b5998;
683 |      border-color: #3b5998;
684 | }
685 |  .sticky-shares a.share-twitter:hover {
686 |      color: #55acee;
687 |      border-color: #55acee;
688 | }
689 |  .sticky-shares a.share-google-plus:hover {
690 |      color: #dd4b39;
691 |      border-color: #dd4b39;
692 | }
693 |  .sticky-shares a.share-pinterest:hover {
694 |      color: #ff0000;
695 |      border-color: #ff0000;
696 | }
697 |  .sticky-shares a.share-linkedin:hover {
698 |      color: #007bb5;
699 |      border-color: #007bb5;
700 | }
701 | /*----------------------------*\
702 | 	author
703 | \*----------------------------*/
704 |  .post-author .media .media-left {
705 |      padding-right: 40px;
706 | }
707 |  .post-author .media .media-left .media-object {
708 |      width:120px;
709 |      border-radius: 50%;
710 | }
711 |  .post-author .author-social {
712 |      margin-top:15px;
713 | }
714 |  .post-author .author-social li {
715 |      display: inline-block;
716 |      margin-right: 5px;
717 | }
718 |  .post-author .author-social li > a {
719 |      display: block;
720 |      width: 30px;
721 |      height: 30px;
722 |      line-height: 30px;
723 |      text-align: center;
724 |      background-color: #a7b3c6;
725 |      color: #FFF;
726 |      border-radius: 2px;
727 |      -webkit-transition: 0.2s opacity;
728 |      transition: 0.2s opacity;
729 | }
730 |  .post-author .author-social li > a:hover, .post-author .author-social li > a:focus {
731 |      color: #FFF;
732 |      opacity: 0.9;
733 | }
734 | /*----------------------------*\
735 | 	comments
736 | \*----------------------------*/
737 |  .post-comments .media {
738 |      padding-top: 15px;
739 |      border-top: 1px solid #eceef2;
740 | }
741 |  .post-comments .media:nth-child(1) {
742 |      padding-top: 0px;
743 |      border-top: none;
744 | }
745 |  .post-comments .media .media-left {
746 |      padding-right: 15px;
747 | }
748 |  .post-comments .media .media-left .media-object {
749 |      width:70px;
750 |      border-radius: 50%;
751 | }
752 |  .post-comments .media .media-body .media-heading h4 {
753 |      text-transform: capitalize;
754 | }
755 |  .post-comments .media .media-body .media-heading .time {
756 |      font-size: 13px;
757 |      margin-right: 15px;
758 |      color: #a7b3c6;
759 | }
760 |  .post-comments .media .media-body .media-heading .reply {
761 |      font-size: 13px;
762 |      color: #a7b3c6;
763 |      -webkit-transition: 0.2s color;
764 |      transition: 0.2s color;
765 | }
766 |  .post-comments .media .media-body .media-heading .reply:hover, .post-comments .media .media-body .media-heading .reply:focus {
767 |      color: #212631;
768 |      text-decoration: none;
769 | }
770 | /*=========================================================
771 | 	Aside
772 | ===========================================================*/
773 |  .aside-widget {
774 |      margin-bottom: 40px;
775 | }
776 | /*----------------------------*\
777 | 	category
778 | \*----------------------------*/
779 |  .category-widget ul li {
780 |      display:block;
781 |      padding-bottom: 10px;
782 |      border-bottom: 1px solid #eceef2;
783 | }
784 |  .category-widget ul li + li {
785 |      margin-top:10px;
786 | }
787 |  .category-widget ul li > a {
788 |      display:block;
789 |      -webkit-transition:0.2s color;
790 |      transition:0.2s color;
791 | }
792 |  .category-widget ul li > a > span {
793 |      float:right;
794 |      color:#fff;
795 |      background-color: #212631;
796 |      padding:0px 5px;
797 |      font-weight:600;
798 |      border-radius:2px;
799 | }
800 |  .category-widget ul li > a.cat-1 > span {
801 |      background-color: #4BB92F;
802 | }
803 |  .category-widget ul li > a.cat-2 > span {
804 |      background-color: #ff8700;
805 | }
806 |  .category-widget ul li > a.cat-3 > span {
807 |      background-color: #8d00ff;
808 | }
809 |  .category-widget ul li > a.cat-4 > span {
810 |      background-color: #0078ff;
811 | }
812 |  .category-widget ul li > a:hover, .category-widget ul li > a:focus {
813 |      text-decoration:none;
814 | }
815 |  .category-widget ul li > a.cat-1:hover, .category-widget ul li > a.cat-1:focus {
816 |      color: #4BB92F;
817 | }
818 |  .category-widget ul li > a.cat-2:hover, .category-widget ul li > a.cat-2:focus {
819 |      color: #ff8700;
820 | }
821 |  .category-widget ul li > a.cat-3:hover, .category-widget ul li > a.cat-3:focus {
822 |      color: #0078ff;
823 | }
824 |  .category-widget ul li > a.cat-4:hover, .category-widget ul li > a.cat-4:focus {
825 |      color: #8d00ff;
826 | }
827 | /*----------------------------*\
828 | 	tags
829 | \*----------------------------*/
830 |  .tags-widget ul li {
831 |      display:inline-block;
832 |      margin-right:3px;
833 |      margin-bottom:5px;
834 | }
835 |  .tags-widget ul li a {
836 |      display:block;
837 |      color:#fff;
838 |      background-color: #212631;
839 |      padding:3px 10px;
840 |      font-weight:600;
841 |      border-radius:2px;
842 |      -webkit-transition:0.2s opacity;
843 |      transition:0.2s opacity;
844 | }
845 |  .tags-widget ul li a:hover, .tags-widget ul li a:focus {
846 |      opacity:0.9;
847 |      color:#fff;
848 |      text-decoration:none;
849 | }
850 | /*----------------------------*\
851 | 	archive
852 | \*----------------------------*/
853 |  .archive-widget ul li {
854 |      display:block;
855 |      padding-bottom: 10px;
856 |      border-bottom: 1px solid #eceef2;
857 | }
858 |  .archive-widget ul li + li {
859 |      margin-top:10px;
860 | }
861 |  .archive-widget ul li > a {
862 |      display:block;
863 | }
864 | /*=========================================================
865 | 	FOOTER
866 | ===========================================================*/
867 |  #footer {
868 |      padding-bottom: 40px;
869 |      margin-top: 40px;
870 | }
871 |  #footer .container {
872 |      padding-top: 80px;
873 |      border-top: 1px solid #F4f4f9;
874 | }
875 |  .footer-widget {
876 |      margin-bottom: 40px;
877 | }
878 |  .footer-widget .footer-title {
879 |      margin-bottom: 40px;
880 |      text-transform: capitalize;
881 |      font-size: 18px;
882 | }
883 |  .footer-widget a {
884 |      color: #a7b3c6;
885 |      -webkit-transition: 0.2s color;
886 |      transition: 0.2s color;
887 | }
888 |  .footer-widget a:hover, .footer-widget a:focus {
889 |      text-decoration: none;
890 |      color: #212631;
891 | }
892 |  .footer-logo {
893 |      margin-bottom: 40px;
894 | }
895 |  .footer-nav li {
896 |      display: inline-block;
897 |      margin-right: 15px;
898 | }
899 |  .footer-links li + li {
900 |      margin-top: 5px;
901 | }
902 |  .footer-copyright {
903 |      margin-top: 20px;
904 |      color: #a7b3c6;
905 |      font-size: 13px;
906 | }
907 |  .footer-newsletter form {
908 |      position: relative;
909 | }
910 |  .footer-newsletter form > input.input {
911 |      padding-right: 55px;
912 | }
913 |  .footer-newsletter form > .newsletter-btn {
914 |      position: absolute;
915 |      top: 0;
916 |      right: 0;
917 |      height: 40px;
918 |      line-height: 40px;
919 |      width: 40px;
920 |      text-align: center;
921 |      color: #a7b3c6;
922 |      background: transparent;
923 |      border: none;
924 |      border-radius: 0px 2px 2px 0px;
925 |      -webkit-transition: 0.2s opacity;
926 |      transition: 0.2s opacity;
927 | }
928 |  .footer-newsletter form > .newsletter-btn:hover {
929 |      opacity: 0.9;
930 | }
931 |  .footer-social {
932 |      margin-top: 20px;
933 | }
934 |  .footer-social li {
935 |      display: inline-block;
936 |      margin-right: 5px;
937 | }
938 |  .footer-social li > a {
939 |      display: block;
940 |      width: 30px;
941 |      height: 30px;
942 |      line-height: 30px;
943 |      text-align: center;
944 |      background-color: #a7b3c6;
945 |      color: #FFF;
946 |      border-radius: 2px;
947 |      -webkit-transition: 0.2s opacity;
948 |      transition: 0.2s opacity;
949 | }
950 |  .footer-social li > a:hover, .footer-social li > a:focus {
951 |      color: #FFF;
952 |      opacity: 0.9;
953 | }
954 | /*=========================================================
955 | 	RESPONSIVE
956 | ===========================================================*/
957 |  @media only screen and (max-width: 991px) {
958 |      #nav .nav-menu {
959 |          display: none;
960 |     }
961 | }
962 |  @media only screen and (max-width: 767px) {
963 | 	 .page-header h1 {
964 | 		 font-size: 28px;
965 | 	}
966 |      .post.post-row .post-img {
967 |          width: 100%;
968 |          float: none;
969 |     }
970 |      .post.post-row .post-body {
971 |          margin-left: 0px;
972 |     }
973 |      .post.post-row .post-meta {
974 |          margin-top: 15px;
975 |     }
976 |      .post.post-row .post-body p {
977 |          display:none;
978 |     }
979 | }
980 | 


--------------------------------------------------------------------------------
/css/font-awesome.min.css:
--------------------------------------------------------------------------------
1 | /*!
2 |  *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
3 |  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
4 |  */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-resistance:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-y-combinator-square:before,.fa-yc-square:before,.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-intersex:before,.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-genderless:before{content:"\f22d"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-hotel:before,.fa-bed:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"}.fa-yc:before,.fa-y-combinator:before{content:"\f23b"}.fa-optin-monster:before{content:"\f23c"}.fa-opencart:before{content:"\f23d"}.fa-expeditedssl:before{content:"\f23e"}.fa-battery-4:before,.fa-battery:before,.fa-battery-full:before{content:"\f240"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-battery-2:before,.fa-battery-half:before{content:"\f242"}.fa-battery-1:before,.fa-battery-quarter:before{content:"\f243"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-mouse-pointer:before{content:"\f245"}.fa-i-cursor:before{content:"\f246"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-sticky-note:before{content:"\f249"}.fa-sticky-note-o:before{content:"\f24a"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-diners-club:before{content:"\f24c"}.fa-clone:before{content:"\f24d"}.fa-balance-scale:before{content:"\f24e"}.fa-hourglass-o:before{content:"\f250"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-hourglass:before{content:"\f254"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\f255"}.fa-hand-stop-o:before,.fa-hand-paper-o:before{content:"\f256"}.fa-hand-scissors-o:before{content:"\f257"}.fa-hand-lizard-o:before{content:"\f258"}.fa-hand-spock-o:before{content:"\f259"}.fa-hand-pointer-o:before{content:"\f25a"}.fa-hand-peace-o:before{content:"\f25b"}.fa-trademark:before{content:"\f25c"}.fa-registered:before{content:"\f25d"}.fa-creative-commons:before{content:"\f25e"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-tripadvisor:before{content:"\f262"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-get-pocket:before{content:"\f265"}.fa-wikipedia-w:before{content:"\f266"}.fa-safari:before{content:"\f267"}.fa-chrome:before{content:"\f268"}.fa-firefox:before{content:"\f269"}.fa-opera:before{content:"\f26a"}.fa-internet-explorer:before{content:"\f26b"}.fa-tv:before,.fa-television:before{content:"\f26c"}.fa-contao:before{content:"\f26d"}.fa-500px:before{content:"\f26e"}.fa-amazon:before{content:"\f270"}.fa-calendar-plus-o:before{content:"\f271"}.fa-calendar-minus-o:before{content:"\f272"}.fa-calendar-times-o:before{content:"\f273"}.fa-calendar-check-o:before{content:"\f274"}.fa-industry:before{content:"\f275"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-map-o:before{content:"\f278"}.fa-map:before{content:"\f279"}.fa-commenting:before{content:"\f27a"}.fa-commenting-o:before{content:"\f27b"}.fa-houzz:before{content:"\f27c"}.fa-vimeo:before{content:"\f27d"}.fa-black-tie:before{content:"\f27e"}.fa-fonticons:before{content:"\f280"}.fa-reddit-alien:before{content:"\f281"}.fa-edge:before{content:"\f282"}.fa-credit-card-alt:before{content:"\f283"}.fa-codiepie:before{content:"\f284"}.fa-modx:before{content:"\f285"}.fa-fort-awesome:before{content:"\f286"}.fa-usb:before{content:"\f287"}.fa-product-hunt:before{content:"\f288"}.fa-mixcloud:before{content:"\f289"}.fa-scribd:before{content:"\f28a"}.fa-pause-circle:before{content:"\f28b"}.fa-pause-circle-o:before{content:"\f28c"}.fa-stop-circle:before{content:"\f28d"}.fa-stop-circle-o:before{content:"\f28e"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-hashtag:before{content:"\f292"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-percent:before{content:"\f295"}.fa-gitlab:before{content:"\f296"}.fa-wpbeginner:before{content:"\f297"}.fa-wpforms:before{content:"\f298"}.fa-envira:before{content:"\f299"}.fa-universal-access:before{content:"\f29a"}.fa-wheelchair-alt:before{content:"\f29b"}.fa-question-circle-o:before{content:"\f29c"}.fa-blind:before{content:"\f29d"}.fa-audio-description:before{content:"\f29e"}.fa-volume-control-phone:before{content:"\f2a0"}.fa-braille:before{content:"\f2a1"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asl-interpreting:before,.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-deafness:before,.fa-hard-of-hearing:before,.fa-deaf:before{content:"\f2a4"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-signing:before,.fa-sign-language:before{content:"\f2a7"}.fa-low-vision:before{content:"\f2a8"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-pied-piper:before{content:"\f2ae"}.fa-first-order:before{content:"\f2b0"}.fa-yoast:before{content:"\f2b1"}.fa-themeisle:before{content:"\f2b2"}.fa-google-plus-circle:before,.fa-google-plus-official:before{content:"\f2b3"}.fa-fa:before,.fa-font-awesome:before{content:"\f2b4"}.fa-handshake-o:before{content:"\f2b5"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-o:before{content:"\f2b7"}.fa-linode:before{content:"\f2b8"}.fa-address-book:before{content:"\f2b9"}.fa-address-book-o:before{content:"\f2ba"}.fa-vcard:before,.fa-address-card:before{content:"\f2bb"}.fa-vcard-o:before,.fa-address-card-o:before{content:"\f2bc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-circle-o:before{content:"\f2be"}.fa-user-o:before{content:"\f2c0"}.fa-id-badge:before{content:"\f2c1"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-drivers-license-o:before,.fa-id-card-o:before{content:"\f2c3"}.fa-quora:before{content:"\f2c4"}.fa-free-code-camp:before{content:"\f2c5"}.fa-telegram:before{content:"\f2c6"}.fa-thermometer-4:before,.fa-thermometer:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-shower:before{content:"\f2cc"}.fa-bathtub:before,.fa-s15:before,.fa-bath:before{content:"\f2cd"}.fa-podcast:before{content:"\f2ce"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-times-rectangle:before,.fa-window-close:before{content:"\f2d3"}.fa-times-rectangle-o:before,.fa-window-close-o:before{content:"\f2d4"}.fa-bandcamp:before{content:"\f2d5"}.fa-grav:before{content:"\f2d6"}.fa-etsy:before{content:"\f2d7"}.fa-imdb:before{content:"\f2d8"}.fa-ravelry:before{content:"\f2d9"}.fa-eercast:before{content:"\f2da"}.fa-microchip:before{content:"\f2db"}.fa-snowflake-o:before{content:"\f2dc"}.fa-superpowers:before{content:"\f2dd"}.fa-wpexplorer:before{content:"\f2de"}.fa-meetup:before{content:"\f2e0"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}
5 | 


--------------------------------------------------------------------------------