-
Notifications
You must be signed in to change notification settings - Fork 0
/
article.html
101 lines (97 loc) · 5.2 KB
/
article.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NewsGrid | Latest News</title>
<script src="https://kit.fontawesome.com/2b810431e5.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" media="screen and (max-width: 768px)" href="css/mobile.css">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<!-- Navigation -->
<nav id="main-nav">
<div class="container">
<img src="/img/logo.png" alt="NewsGrid" class="logo">
<div class="social">
<a href="http://facebook.com" target="_blank"><i class="fab fa-facebook fa-2x"></i></a>
<a href="http://twitter.com" target="_blank"><i class="fab fa-twitter fa-2x"></i></a>
<a href="http://instagram.com" target="_blank"><i class="fab fa-instagram fa-2x"></i></a>
<a href="http://youtube.com" target="_blank"><i class="fab fa-youtube fa-2x"></i></a>
</div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</nav>
<section id="article">
<div class="container">
<div class="page-container">
<article class="card">
<img src="/img/articles/ent1.jpg" alt="">
<h1 class="l-heading">Lorem ipsum dolor sit amet.</h1>
<div class="meta">
<small>
<i class="fas fa-user"></i> Written By John Doe January 12, 2021
</small>
<div class="category category-ent">Entertainment</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum praesentium expedita in sit consequuntur asperiores dolores fuga, odio animi aperiam impedit libero doloribus? Labore cupiditate iure fugiat cum nobis repellendus voluptas fuga dolores similique, vitae sint error voluptatibus delectus repellat esse ex, praesentium quae pariatur dolor porro maxime modi maiores?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat omnis quis, fugit in, dolores optio quisquam saepe facilis possimus dolor vel. Eum facere commodi accusantium nisi. Dicta, est omnis quo unde cumque quos corrupti fugit ut eos velit iure repellat ab illo reprehenderit, veniam et ad, odio obcaecati nemo aut eum eligendi rerum! Aliquid nobis cupiditate, doloremque incidunt optio odio, atque dolore rerum minima quod, iste ullam dolores exercitationem iusto assumenda fuga repudiandae minus nisi! Nemo aliquam asperiores fugiat nihil, sed, reprehenderit distinctio dicta consequuntur deleniti delectus corporis iusto incidunt corrupti odio illum cumque cum quos maxime! Quis iusto, modi a ipsa earum laboriosam odit commodi eaque, veritatis est dolor itaque autem maiores aliquam fuga, assumenda eius reiciendis incidunt dolore quaerat. Earum itaque fuga recusandae iste enim ab eaque, ipsam quaerat rerum eligendi possimus, iure quasi quisquam, distinctio sunt? Ducimus tempora cupiditate aut? A itaque non ratione libero quo debitis!</p>
</article>
<aside id="categories" class="card">
<h2>Categories</h2>
<ul class="list">
<li><a href="#"><i class="fas fa-chevron-right"></i> Sports</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> Entertainment/a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> Technology</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> Fashion</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> Shopping</a></li>
</ul>
</aside>
<aside class="card bg-secondary">
<h2>Join Our Club</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vero, laboriosam?</p>
<a href="#" class="btn btn-dark btn-block">Join Now</a>
</aside>
</div>
</div>
</section>
<footer id="main-footer" class="bg-dark py-2">
<div class="container footer-container">
<div>
<img src="/img/logo_light.png" alt="NewsGrid">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem iusto nihil corporis reprehenderit delectus in architecto beatae, ab assumenda vel.</p>
</div>
<div>
<h3>Email Newsletter</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<form name="contact" method="POST" data-netlify="true">
<input type="email" name="email" placeholder="Enter Email...">
<input type="submit" value="Subscribe" class="btn btn-primary">
</form>
</div>
<div>
<h3>Site Links</h3>
<ul class="list">
<li><a href="#">Help & Support</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div>
<h2>Join Our Club</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod, nulla.</p>
<a href="#" class="btn btn-secondary">Join Now</a>
</div>
<div>
<p>Copyright © 2021, All Rights Reserved</p>
</div>
</div>
</footer>
</body>
</html>