-
Notifications
You must be signed in to change notification settings - Fork 0
/
article.html
125 lines (117 loc) · 5.64 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
115
116
117
118
119
120
121
122
123
124
125
<!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/7f5dcd9872.js" crossorigin="anonymous"></script>
<link
href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&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">
</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 class="current" 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 1, 2019
</small>
<div class="category category-ent">Entertainment</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga consectetur, error ipsa quos dolorem,
reprehenderit ullam, nam laborum delectus ipsum ad optio architecto enim minus officiis nobis. Nemo itaque
dolorem in consequatur quos, officia nihil voluptate necessitatibus rem architecto iusto numquam ullam,
quidem eaque inventore minus. Rerum numquam excepturi a?</p> <br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum id vitae debitis alias voluptatum nam dolor
aut, explicabo deleniti commodi repellendus aspernatur, eius blanditiis harum veniam porro. Ab aut eaque,
dolores facere quisquam exercitationem est necessitatibus unde amet officia quasi, velit voluptas tenetur!
Soluta odio recusandae nostrum obcaecati dignissimos fugit animi saepe, ullam quibusdam totam quasi porro
pariatur. Eligendi, alias rem itaque fugiat amet rerum assumenda. Ut, harum at. Deserunt quis aspernatur
sequi quod laboriosam totam perferendis voluptatem neque, eius earum porro nesciunt blanditiis omnis.
Voluptate est ex facere, rerum qui quia incidunt voluptatum dolorum assumenda soluta, sit porro natus
quibusdam. Nulla id quasi cum quos, assumenda modi. Dignissimos, corporis. Qui culpa sint alias unde.
Placeat corrupti harum doloribus consequuntur, molestias dolore quaerat reiciendis deleniti aliquid aliquam
soluta accusamus autem nisi repellat, alias eius. Nam quae labore aliquid delectus quis amet laudantium,
nisi quia molestiae soluta dolorem, enim aut. Accusamus.</p>
</article>
<aside id="category" 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. Incidunt, exercitationem.</p>
<a href="#" class="btn btn-dark 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. Nisi consequuntur reprehenderit qui veritatis
perspiciatis fugiat quas autem porro magnam voluptas!</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" 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. Quisquam, cumque?</p>
<a href="#" class="btn btn-secondary">Join Us</a>
</div>
<div>
<p>
Copyrigth ©2019, All Rigths Reserved
</p>
</div>
</div>
</footer>
</body>
</html>