-
Notifications
You must be signed in to change notification settings - Fork 0
/
article.html
103 lines (100 loc) · 5.58 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
<!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">
<link href="https://fonts.googleapis.com/css2?family=Lato&family=Staatliches&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato&family=Staatliches&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../../Font awesome/fontawesome-free-5.15.4-web/css/all.css">
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" media="screen and (max-width:768px)" href="CSS/mobile.css">
<!-- Must add below link specially for favicon, clear the cache if favicon is not displaying- for windows its shift + f5 -->
<link rel="shortcut icon" type="image/x-icon" href="./Images/favicon.ico">
<title>News Grid | Latest News</title>
</head>
<body>
<nav id="main-nav">
<div class="container">
<img src="./Images/image_resources/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="./Images/image_resources/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 18, 2014
</small>
<div class="category category-ent">Entertainment</div>
</div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste quam nobis nostrum, officia maiores amet recusandae animi excepturi, porro eos quas at doloremque a hic reiciendis enim rem consequatur? Quod sed vero cumque? Molestias magni numquam, amet dolore accusantium similique nobis, cumque, perferendis impedit iste soluta possimus aliquid veniam quibusdam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis esse sed quasi eius! Officiis reprehenderit impedit eligendi quisquam sequi suscipit iusto dicta et culpa, tempore beatae non accusamus pariatur dolor delectus excepturi blanditiis a perspiciatis cum similique. Corporis aliquam odit ullam sequi molestias tenetur porro sunt magni nulla, ex deleniti earum veniam. Numquam reiciendis itaque iure autem consequatur fuga dolores, porro vitae nemo quisquam delectus quos, eligendi nulla, maxime atque. Quisquam placeat veritatis, labore perferendis vitae quas porro dolor mollitia iusto vel id doloremque sint aut iure quia distinctio cum libero itaque autem. Deserunt sit tempore velit maiores? Commodi sint doloremque ad nemo voluptate quia maxime id soluta pariatur. Dicta, ipsa ad. Culpa molestiae ut corporis numquam, totam quo voluptas. Praesentium perspiciatis delectus, fugiat voluptate numquam error illum iusto cupiditate impedit temporibus, exercitationem sint repellendus eum distinctio? Magnam reprehenderit, odio, perspiciatis hic distinctio eius, ipsam quidem incidunt dolore et tempore?
</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. Quae, quisquam.</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="./Images/image_resources/logo_light.png" alt="NewsGrid">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae dolor, aut neque cumque repudiandae nihil dicta sapiente perspiciatis id sequi.</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. Pariatur, ipsum?</p>
<a href="#" class="btn btn-secondary">Join Now</a>
</div>
<div>
<p>Copyright © All Rights Reserved</p>
</div>
</div>
</footer>
</body>
</html>