-
Notifications
You must be signed in to change notification settings - Fork 0
/
article.html
107 lines (99 loc) · 6.09 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
<!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">
<script src="https://kit.fontawesome.com/90984e1b14.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Lato|Staatliches" 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>
<nav id="main-nav">
<div class="container">
<img src="img/logo.png" alt="NewsGrid" class="logo">
<div class="social">
<a href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook fa-2x"></i></a>
<a href="https://www.twitter.com/" target="_blank"><i class="fab fa-twitter fa-2x"></i></a>
<a href="https://www.instagram.com/" target="_blank"><i class="fab fa-instagram fa-2x"></i></a>
<a href="https://www.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 January 12,2019
</small>
<div class="category category-ent">Entertainment</div>
</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem nemo est recusandae quasi eos molestiae asperiores sunt consequatur quo optio. Distinctio optio pariatur culpa natus necessitatibus, quo provident cumque corporis debitis eveniet iusto quos fuga minus ea exercitationem facere id! Unde reiciendis iste temporibus aperiam assumenda dignissimos rem ipsam laboriosam!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum fuga totam quam ratione quia voluptatibus nam suscipit ipsum vitae eveniet deserunt dolor quis, debitis, deleniti sequi obcaecati alias tempore ducimus. Nesciunt necessitatibus nisi ad. Voluptate perspiciatis ex aliquam eos in, repudiandae maxime tenetur placeat ad cupiditate natus saepe minus deserunt similique optio? Vitae amet, unde esse, quibusdam molestias commodi minus, voluptatibus harum ipsa tenetur velit tempore id nisi laborum nemo iure repudiandae. Labore quibusdam recusandae consequatur inventore nisi quisquam ipsam architecto, ratione exercitationem pariatur quo nostrum aperiam quam aliquid ab praesentium harum tenetur iusto. Aperiam expedita saepe debitis nesciunt aliquid dolores nostrum atque sed dicta illo? Quam, pariatur hic ab nam a amet, iusto, deserunt suscipit eum assumenda accusamus! Corrupti nam, soluta ullam, officiis facilis ex tenetur dolorem consequuntur harum laborum similique voluptates fugit beatae inventore enim? Temporibus maxime enim sequi perferendis, ducimus blanditiis quos unde eos! Dignissimos, dolor quod?</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> Entartainment</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. Illo, tempora!</p>
<a href="#" class="btn btn-dark btn-block">Join Now</a>
</aside>
</div>
</div>
</section>
<!-- Footer -->
<footer id="main-footer" class="py-2">
<!-- ilki contenti ortaya hizalamak için ikinci class ise grid container -->
<div class="container footer-container">
<div>
<img src="img/logo_light.png" alt="NewsGrid">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At voluptas dicta officiis cumque sit eaque nam nisi impedit molestias? Repellendus!</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. Architecto, vitae!</p>
<a href="#" class="btn btn-secondary">Join Now</a>
</div>
<div>
Copyright © 2019, All Rights Reserved
</div>
</div>
</footer>
</body>
</html>