-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patharticle.html
114 lines (101 loc) · 6.11 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
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.css" integrity="sha512-Cb0WDP6lVyVaQJulFMEOBGpkgqU6UAOEBpthbb9BfdhmUXnmYQwobuCm6Xp2YYL6Pd/l0ZA5Up/ijp0fu+nFpQ==" crossorigin="anonymous" />
<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">
<title>NewsGrid | Latest Articles </title>
</head>
<body>
<!-- Navbar -->
<nav id="main-nav">
<div class="container">
<img class="logo" src="img/logo.png" alt="NewsGrid">
<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><!-- END OF => Navbar -->
<!-- SECTION: Article -->
<section id="article">
<div class="container">
<div class="page-container"><!-- grid -->
<article class="card"><!-- grid item -->
<img src="img/articles/ent1.jpg" alt="Entertainment">
<h1 class="large-heading">Lorem ipsum dolor sit amet.</h1>
<div class="meta">
<small>
<i class="fas user"></i> Written By John Doe March 22, 2020
</small>
<div class="div category category-ent">Entertainment</div>
</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio esse voluptatum temporibus aperiam nobis aspernatur mollitia dicta in? Vitae sapiente ex porro, similique autem enim laudantium architecto quibusdam culpa nisi illo sequi eos eveniet iste placeat accusantium nulla dolorem velit laboriosam! Magnam modi sapiente molestiae quam dolores repudiandae quo corporis?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora eius facilis incidunt soluta maiores expedita voluptate, nobis esse cumque ducimus ipsam necessitatibus minima impedit repellat suscipit unde blanditiis id rerum reprehenderit veniam modi quis illum, maxime quam? Omnis alias laudantium odit enim optio cupiditate itaque! Dolore, pariatur ratione? Iste reiciendis exercitationem nemo possimus dolorum, culpa labore dolore placeat nisi laudantium deserunt voluptates non asperiores vel sunt ratione ad voluptatum velit repellendus sequi! Voluptatem enim et consequuntur recusandae beatae, eaque facilis vitae blanditiis. Quidem, rem fugiat. Deserunt fugit quis voluptates? Ipsa ut placeat fuga quas dicta? Ipsum nemo in voluptatibus voluptatum possimus ipsam rem incidunt iste. Culpa cumque quisquam consequatur? Non, vel? Deserunt explicabo praesentium vitae provident consequatur eius, optio eos harum, accusamus facilis, perferendis cum rem. At atque quod quaerat sint quisquam voluptatem modi repellat fugit, odit corporis nulla tempore! Voluptates saepe ullam perferendis beatae maiores eos iure iusto. Dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In consequatur ratione placeat minima ipsum quis exercitationem facilis blanditiis quam rem officia excepturi, nemo temporibus! Magni enim quam accusamus consequuntur ex?</p>
</article><!-- /grid item -->
<aside id="categories" class="card"><!-- grid item -->
<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><!-- /grid item -->
<aside class="card bg-secondary"><!-- grid item -->
<h2>Join Our Club</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, quis!</p>
<a href="#" class="btn btn-dark btn-block">Join Now</a>
</aside><!-- /grid item -->
</div><!-- /grid -->
</div>
</section>
<!-- END OF => SECTION: Article -->
<!-- Footer -->
<footer id="main-footer" class="py-2">
<div class="container footer-container"><!-- grid -->
<div><!-- grid item -->
<img src="/img/logo_light.png" alt="NewsGrid">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil natus fugiat est error! Nostrum blanditiis totam ratione beatae repudiandae cupiditate!</p>
</div><!-- /grid item -->
<div><!-- grid item -->
<h3>Emial 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><!-- /grid item -->
<div><!-- grid item -->
<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><!-- /grid item -->
<div><!-- grid item -->
<h2>Join Our Club</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugiat, neque.</p>
<a href="#" class="btn btn-secondary">Join Now</a>
</div><!-- /grid item -->
<div><!-- grid item -->
<p>Copyright © 2020, All Rights Reseved</p>
</div><!-- /grid item -->
</div><!-- /grid -->
</footer>
<!-- END OF => Footer -->
</body>
</html>