-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblog.html
126 lines (112 loc) · 6.77 KB
/
blog.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Restaurant Mall Blog</title>
<link href="https://fonts.googleapis.com/css2?family=Barlow&family=Josefin+Sans:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles/style.css">
<script src="https://kit.fontawesome.com/34b6f92998.js" crossorigin="anonymous"></script>
</head>
<body>
<header class="blog" id="blog">
<div class="wrapper">
<!-- navigation -->
<nav class="desktop-only">
<ul class="navigation blog-nav">
<li><a href="./index.html">Home</a></li>
<li><a href="./index.html#about">About</a></li>
<li><a href="./blog.html">Blog</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
</nav>
<!-- mobile top navigation -->
<nav class="mobile-only">
<label class="sr-only">Menu</label>
<label for="toggle"><i class="fa fa-bars"></i></label>
<input type="checkbox" id="toggle" name="toggle" />
<ul class="mobile-nav">
<li><a href="./index.html">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="./blog.html">Blog</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
</nav>
<h1>Blog</h1>
</div>
</header>
<main>
<div class="pine-background blog-container">
<!-- ASIDE SECTION -->
<aside>
<div class="aside-box">
<figure>
<img src="./the-restaurant-mall-assets/blog-side-image.jpg" alt="salmon with toppings on a dinner plate">
</figure>
<div>
<h3 class="h-fifth">Featured Restaurants</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, non!</p>
<h3 class="h-fifth">Recent Posts</h3>
<ul>
<li>Lorem ipsum dolor sit</li>
<li>Amet consectetur adipisicing elit</li>
<li>Provident ratione asperiores nisi</li>
<li>Nemo enim commodi quibusdam</li>
</ul>
</div>
</div> <!-- aside-box div -->
</aside>
<!-- EMPLOYMENT SECTION -->
<div>
<section class="employment-container">
<figure>
<img src="./the-restaurant-mall-assets/blog-post-image.jpg" alt="person setting table inside restaurant">
</figure>
<div>
<h2 class="h-third">Employment Opportunities</h2>
<p class="byline">Monday October 20, 2019 by Sulaire</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi nobis ex totam similique? Possimus voluptatem iusto perspiciatis veniam nulla beatae animi, consectetur iure distinctio dignissimos pariatur nostrum quos cum facere quo vel adipisci veritatis esse eos quisquam ullam sint labore.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque placeat dolor illum qui necessitatibus soluta sed nam! Perferendis, eos esse cum rerum quibusdam necessitatibus repudiandae obcaecati recusandae, doloribus sunt distinctio nisi eius! Eveniet reiciendis asperiores quasi dignissimos fugit odit enim, adipisci optio perferendis eius rerum exercitationem iusto, vel libero recusandae!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium ipsam illo, officia cupiditate animi eos ducimus dolor unde repellat expedita qui libero mollitia quibusdam quam quia sed sint est illum excepturi omnis voluptates consequatur accusantium eius? Vel recusandae expedita odio dicta magni nam earum ipsum quibusdam est. Quae excepturi qui sint iure, non dicta labore quis, veniam tempora in eligendi.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea repellendus quisquam, facilis aliquid consequuntur cupiditate odit autem delectus pariatur, cumque velit numquam dicta! Voluptates praesentium debitis laborum exercitationem, maiores aliquam!</p>
</div>
</section>
<!-- COMMENTS SECTION -->
<section class="comment-wrapper">
<h4 class="h-fourth">Comments:</h4>
<div class="comment-container">
<figure>
<img src="./the-restaurant-mall-assets/comment-1.jpg" alt="Woman's face">
</figure>
<div>
<p class="byline">Tuesday October 9th, 2019 by Ali</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi ad similique culpa fugit dolore consectetur ea ipsam commodi fuga repellendus, placeat, hic voluptatem aut debitis earum cum ullam deserunt expedita itaque ab sapiente? Alias, quis?</p>
</div>
<figure>
<img src="./the-restaurant-mall-assets/comment-2.jpg" alt="Woman's face">
</figure>
<div>
<p class="byline">Tuesday October 10th, 2019 by Lisa</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro autem aperiam iste voluptas aspernatur optio molestiae vitae repellat eligendi soluta impedit voluptatem quod, explicabo distinctio?</p>
</div>
</div> <!-- comment div -->
</section>
<!-- FORM SECTION -->
<form action="comment">
<label for="name" class="sr-only">Enter name</label>
<input type="name" placeholder="Name">
<label for="email address" class="sr-only">Enter email address</label>
<input type="email" placeholder="Email address">
<label for="comment" class="sr-only">Enter comment</label>
<input type="text" placeholder="Comment">
<button type="submit" class="button">post comment</button>
</form>
</div>
</div> <!-- blog-container div -->
</main>
<!-- FOOTER -->
<footer>
<p>Created at <a href="https://junocollege.com/">Juno College</a></p>
</footer>
</body>
</html>