-
Notifications
You must be signed in to change notification settings - Fork 0
/
article.html
97 lines (97 loc) · 5.81 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/16bb7d53d4.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Lato&family=Staatliches&display=swap" rel="stylesheet">
<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 News</title>
</head>
<body>
<!-- Navbar -->
<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 29 June 2020
</small>
<div class="category category-ent">Entertainment</div>
</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, ipsa dolor unde dolorem nisi soluta tempore libero iste facilis reiciendis molestiae optio deserunt, vitae, et eos quos quibusdam quam quas? Dolores minima tempore pariatur deleniti ipsa quasi neque voluptas, nobis debitis cupiditate. Quisquam incidunt error quos iusto, dolorem minima ipsa.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo iusto consequuntur omnis, a, cupiditate incidunt doloribus doloremque, provident totam beatae harum nesciunt! Eius, vitae libero iure possimus tenetur similique aspernatur minus dolor culpa. Amet nemo ex, natus maxime similique a suscipit quae provident aut itaque inventore labore nesciunt. Perferendis ullam accusantium temporibus pariatur iusto officia natus nobis quam culpa quia suscipit, beatae delectus veritatis impedit iure. Eligendi iure illo doloremque unde. Inventore illum amet quos ea numquam repellat praesentium sunt aperiam blanditiis, omnis voluptatibus. Fuga est inventore aut quam quia vel alias, sequi vitae reprehenderit ipsum sed eum atque, neque nulla porro ad distinctio cumque amet voluptatem nostrum sint corporis eos fugit culpa! Fugiat deleniti incidunt dolore rem repellendus quis nesciunt ad, recusandae voluptates eveniet doloribus molestiae placeat eos iure nisi. Itaque dolore illum reiciendis, ab mollitia ullam laudantium corrupti nulla fuga aperiam facilis rerum commodi sit autem, vitae placeat.</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>
</ul>
</aside>
<aside class="card bg-secondary">
<h2>Join Our Club</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui, veritatis</p>
<a href="#" class="btn btn-block">Join Now</a>
</aside>
</div>
</div>
</section>
<!-- Footer -->
<footer id="main-footer" class="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. Earum, quae! Repellendus repudiandae libero eum iste veritatis eaque minus fugit fuga!</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 your 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 Us</a></li>
</ul>
</div>
<div>
<h2>Join Our Club</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur, quidem.</p>
<a href="#" class="btn btn-secondary">Join Now</a>
</div>
<div>
<p>Copyright © 2020, All Rights Reserved</p>
</div>
</div>
</footer>
</body>
</html>