-
Notifications
You must be signed in to change notification settings - Fork 0
/
blog.html
127 lines (116 loc) · 7.11 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
127
<!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/6d2439e6fd.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow&family=Josefin+Sans:wght@400;600&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="./styles/styles.css">
<title>Restaurant Mall Blog</title>
</head>
<body class="blogBody">
<header class="blogHeader">
<div class="wrapper">
<nav>
<label for="hamburgerMenu" class="hamburgerMenu">
<i class="fas fa-bars"></i>
<span class="sr-only">Menu Button</span>
</label>
<input type="checkbox" unchecked id="hamburgerMenu">
<ul>
<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>
<h1>Blog</h1>
</div> <!-- wrapper end -->
</header>
<main class="blogMain">
<!-- ASIDE FEATURE BEGINS -->
<div class="stickyContainer">
<aside class="feature">
<div class="featureImgContainer">
<img src="./assets/blog-side-image.jpg" alt="fish dish atop vegetables in a dark broth">
</div> <!-- featureImgContainer end -->
<div class="featureTextContainer">
<div class="featureReso">
<h4>Featured Restaurants</h4>
<p>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum. Find out more.</p>
</div>
<div class="featurePost">
<h4>Recent Posts</h4>
<ul>
<li>Donec facilisis tortor ut</li>
<li>Augue lacinia at viverra</li>
<li>Semper sed sapien metus</li>
<li>Scelerisque nec phartetra id</li>
</ul>
</div>
</div> <!-- featureTextContainer end -->
</aside>
</div> <!-- stickyContainer end -->
<div class="blogContent">
<!-- EMPLOYMENT SECTION BEGINS -->
<section class="employment" id="employment">
<div class="employmentImgContainer">
<img src="./assets/blog-post-image.jpg" alt="waitress setting table at upscale restaurant">
</div>
<div class="wrapper2">
<div class="employmentTextContainer">
<h2>Employment Opportunities</h2>
<h5>Monday October 30, 2019 by Sulaire</h5>
<p>Curabitur lobortis id lorem id bibendum. Ut id consectetur magna. Quisque volutpat augue enim, pulvinar lobortis nibh lacinia at. Vestibulum nec erat ut mi sollicitudin porttitor id sit amet risus. Name tempus vel odio vitae aliquam.</p>
<p>In imperdiet eros id lacus vestibulum vestibulum. Suspendisse fermentum sem sagittis ante venenatis egestas quis vel justo. Maecenas semper suscipit nunc, sed aliquam sapien convallis eu. Nulla ut turpis in diam dapibus consequat. Fusce vehicula dolor arcu, sit amet blandit dolor mollis nec. Donec viverra eleifend lacu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pretium pretium tempor. Ut egat imperdiet neque. In volutpat ante semper diam molestie, et aliquam erat laoreet. Sed sit amet arcu aliquet, molestie justo at, auctor nunc. Phasellus ligula ipsum, volutpat egat sempar id, viverra eget semper id, viverra eget nibh. Suspendisse luctus mattis cursus. Nam consectetur ante at nisl hendrerit gravida. Donec vehicula rhoncus mattis. Mauris dignissim semper mattis. Fusce porttitor a mi at suscipit.</p>
<p>Praesent facilisis dolor sapien, vel sodales augue mollis ut. Mauris venenatis magna eu tortor posuere luctus. Aenean
tincidunt turpis sed dui aliquam vehicula.</p>
</div> <!-- employmentTextContainer end -->
</div> <!-- wrapper end -->
</section>
<!-- COMMENTS SECTION BEGINS -->
<section class="comments" id="comments">
<div class="wrapper2">
<h3>Comments:</h3>
<div class="commentContainer">
<div class="commentImgContainer">
<img src="./assets/comment-1.jpg" alt="portrait of woman with short brown hair">
</div>
<div class="commentTextContainer">
<h5>Tuesday October 9th, 2019 <span>by Ali</span></h5>
<p>Fusce vehicula dolor arcu, sit amet blandit dolor mollis nec. Donec viverra eleifend lacus, vitae ullamcorper metus. Sed sollicitudin ipsum quis nunc sollicitudin ultrices. Donec euismod scelerisque ligula. Maecenas eu varius risus..</p>
</div>
</div> <!-- commentContainer end -->
<div class="commentContainer">
<div class="commentImgContainer">
<img src="./assets/comment-2.jpg" alt="portrait of woman with dark curly hair">
</div>
<div class="commentTextContainer">
<h5>Wednesday October 10th, 2019 <span>by Lisa</span></h5>
<p>Donec viverra eleifend lacus, vitae ullamcorper metus. Sed sollicitudin ipsum quis nunc sollicitudin ultrices. Donec euismod scelerisque ligula.</p>
</div>
</div><!-- commentContainer end -->
<form action="">
<label for="name" class="sr-only">Name</label>
<input type="text" id="name" placeholder="Name">
<label for="email" class="sr-only">Email Address</label>
<input type="email" id="email" placeholder="Email address">
<label for="comment" class="sr-only">Add Comments Here</label>
<textarea name="comment" id="comment" cols="30" rows="10" placeholder="Comment"></textarea>
<button type="submit">Post Comment</button>
</form>
</div> <!-- wrapper end -->
</section>
</div> <!-- blogContent end -->
</main>
<!-- FOOTER BEGINS -->
<footer>
<p>Copyrigth © 2019 Juno College</p>
</footer>
</body>
</html>