-
Notifications
You must be signed in to change notification settings - Fork 0
/
blog.html
138 lines (120 loc) · 6.58 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
128
129
130
131
132
133
134
135
136
137
138
<!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="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
<link rel="icon" href="assets/favicon.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=IM+Fell+English:400,400i|Roboto:400,700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="styles/style.css">
<script src="https://kit.fontawesome.com/99ab144771.js"></script>
<title>Boat Ride Adventures Blog</title>
</head>
<body>
<!--Skip Links-->
<a href="#blog-navigation" class="skip-link">Skip to blog navigation.</a>
<a href="#blog-post" class="skip-link">Skip to main content.</a>
<a href="#blog-comment" class="skip-link">Skip to comment section.</a>
<!--Header and Nav-->
<div class="-full-bleed-wrapper">
<header class="secondary-header blog-header">
<nav>
<button class="menu-toggle"><i class="fas fa-bars" aria-hidden="true"></i></button>
<ul class="header-nav">
<li><a href="index.html">Home</a></li>
<li><a href="index.html#about">About</a></li>
<li class="active"><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<h1>Blog</h1>
</header>
</div>
<main>
<!--Blog Post and Aside-->
<div class="full-bleed-wrapper">
<section class="post">
<!--Aside-->
<aside class="blog-navigation" id="blog-navigation">
<img src="assets/blog-side-image.jpg" alt="A view from deck level towards the front of the yacht, with the sun rising in the distance.">
<div class="mission-statement">
<h4>Our Mission</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id, incidunt error qui at minima eaque adjit?</p>
</div>
<div class="recent-posts">
<h4>Recent Posts</h4>
<ul class="recent-blog-posts">
<li><a href="#">Lorem ipsum dolor sit.</a></li>
<li><a href="#">Dolorem nesciunt dolore eius.</a></li>
<li><a href="#">Quo aliquid necessitatibus odio</a></li>
<li><a href="#">Amet consect adipisicing elit.</a></li>
</ul>
</div>
</aside>
<!--Blog Post-->
<article class="blog-post" id="blog-post">
<div class="blog-img-container">
<img src="assets/blog-post-image.jpg" alt="A close up of an anchors rope trailing into the water from the front of the boat.">
</div>
<div class="blog-content">
<h2>Next Destination</h2>
<p>Monday October 30, 2019 by Sulaire</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam doloremque, illum temporibus numquam, aspernatur quaerat sequi in porro facere magni sit, libero voluptas voluptate deleniti ipsum! Earum repudiandae voluptate repellat architecto facilis cupiditate laudantium nesciunt.</p>
<p>Magni et fuga eum repellendus consectetur adipisicing elit. Expedita, accusantium eveniet. Vel quis
voluptatibus tempora debitis molestiae dignissimos maiores ab. Asperiores mollitia tempore, cum sequi ipsa
excepturi officia corporis unde. Officiis harum fugit obcaecati reprehenderit et. Quas eum qui laboriosam
exercitationem id! Blanditiis, autem eveniet.</p>
<p>minus distinctio beatae quaerat fugit elidita lorem. Quos quidem iusto illum voluptas commodi amet in, iste alias, vero ad at non hic, minus repellendus dolorum distinctio quaerat et sit debitis repudiandae. Aspernatur quam, id sunt illo possimus ipsum saepe cupiditate soluta autem distinctio odit consequuntur! Quibusdam impedit unde nesciunt? Vel impedit magnam cupiditate sapiente mollitia praesentium eveniet, dolore ullam consequuntur rem, ducimus fugit provident.</p>
<p>Impedit, facilis amet dolorum labore ad accusamus abba. Aliquam nihil laboriosam alias voluptatem quaerat
nemo quibusdam quisquam? Beatae earum, debitis officiis dicta deserunt facere perferendis.</p>
</div>
<!--Comment Section-->
<div class="comments">
<h3>Comments</h3>
<div class="comment-container">
<div class="display-picture">
<img src="assets/comment-1.jpg" alt="Close up of a man looking into the camera against a patterned background.">
</div>
<div class="comment-content">
<h5>Tuesday October 9, 2019 by Ali</h5>
<p>Fusce vehicula dolor arcu. Cupiditate dolorum quod iste non aliquid officia sed commodi voluptatibus assumenda vitae incidunt perspiciatis, fugiat praesentium modi ullam aut temporibus risus..</p>
</div>
</div>
<div class="comment-container">
<div class="display-picture">
<img src="assets/comment-2.jpg" alt="Close-up of a woman laughing with palm trees in background.">
</div>
<div class="comment-content">
<h5>Wednesday October 10, 2019 by Lisa</h5>
<p>Donec viverra dolor sit amet consectetur, adipisicing elit. Esse, optio illo! Dolore saepe eligendi facilis ligula.</p>
</div>
</div>
</div>
<!--Blog Comment Form-->
<form class="blog-comment" id="blog-comment" action="">
<fieldset>
<label for="name" class="visuallyHidden">Name</label>
<input type="text" name="name" id="name" placeholder="Name" required>
<label for="email" class="visuallyHidden">Email</label>
<input type="email" id="email" placeholder="Email" required>
</fieldset>
<div class="message-box">
<label for="comment" class="visuallyHidden">Comment</label>
<textarea name="comment" rows="10" cols="60" id="comment" placeholder="Comment"></textarea>
</div>
<button type="submit">Post Comment</button>
</form>
</article>
</section>
</div> <!--End of wrapper-->
</main>
<!--Footer-->
<footer>
<div class="footer-wrapper">
<p>Copyright © 2019 HackerYou</p>
</div>
</footer>
</body>
</html>