-
Notifications
You must be signed in to change notification settings - Fork 0
/
article.html
130 lines (108 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
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/mobile.css"
media="screen and (max-width: 768px)">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<script src="https://kit.fontawesome.com/512982cd9c.js" crossorigin="anonymous"></script>
<title>Article</title>
</head>
<body>
<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" class="current">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,
2019
</small>
<div class="category category-ent">Entertainment</div>
</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Laudantium tempora temporibus, ipsum reiciendis expedita
iste cum sequi dolorem hic illo animi aperiam, nesciunt
repellat minus neque veniam. Consequuntur cum corrupti
quae iure illo fuga ipsa. Alias ratione delectus tempora
asperiores hic placeat
saepe maxime quas fuga fugit. Porro, incidunt in.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex, quidem debitis dolores a similique totam odit omnis reiciendis velit aspernatur rerum commodi eum laboriosam, reprehenderit laudantium quisquam illo deleniti quaerat fugiat. Accusantium vero, reiciendis unde consectetur ad maxime temporibus nam qui aliquid doloribus eaque repellat reprehenderit voluptatum. Fugit officiis porro esse repudiandae consequuntur at qui provident, cum sunt, laudantium quos facere explicabo amet fugiat? Nihil quasi accusantium illo quia. Explicabo ad obcaecati repellendus, autem accusantium temporibus repellat quibusdam voluptates tempore, modi molestias quod, dolor dolore voluptatibus? Aspernatur, suscipit quaerat. Voluptates sequi voluptate dicta perferendis odit nam dolorem aspernatur quibusdam quam id illo error vero veniam in nostrum aliquam, rem laboriosam doloremque asperiores expedita inventore? Saepe, sunt distinctio, laboriosam hic natus unde a commodi cumque, nihil assumenda inventore minima voluptas! Laudantium temporibus ipsam cum similique quis provident, delectus enim sint a ipsum vitae hic accusamus vel ullam, cupiditate, nisi corporis necessitatibus?
</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. Saepe, neque.
</p>
<a href="#" class="btn btn-dark btn-block">Join Now</a>
</aside>
</div>
</div>
</section>
<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. Velit deserunt assumenda enim non? Ratione ipsum voluptates fuga eos earum vitae.</p>
</div>
<div>
<h3>Email Newsletter</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<form>
<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. Modi, nesciunt!</p>
<a href="#" class="btn btn-secondary">Join Now</a>
</div>
<div>
<p>
Copyright © 2019, All Rights Reserved
</p>
</div>
</div>
</footer>
</body>
</html>