-
Notifications
You must be signed in to change notification settings - Fork 0
/
post.html
140 lines (102 loc) · 6.78 KB
/
post.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
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boat Ride Adventures - Next destination</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<script src="https://kit.fontawesome.com/8b8fad69b5.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=IM+Fell+English&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles/styles.css">
</head>
<body class="post">
<a href="#skip-to-content" class="skip-link btn">Skip to content</a>
<header>
<div class="wrapper">
<nav role="navigation">
<ul id="menu" class="flex">
<li><a href="./index.html">Home</a></li>
<li><a href="./index.html#about">About</a></li>
<li><a href="./post.html">Blog</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
<button id="menu-toggle" aria-label="Open the menu" title="Open the menu" aria-expanded="false" aria-controls="mobile-menu"></button>
<ul id="mobile-menu" class="flex">
<li><a href="./index.html">Home</a></li>
<li><a href="./index.html#about">About</a></li>
<li><a href="./post.html">Blog</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
</nav>
<h2 class="header-content">Blog</h2>
</div>
<!-- end of header wrapper -->
</header>
<main class="flex">
<div class="left">
<aside class="flex">
<img src="./assets/blog-side-image.jpg" alt="View from inside of a boat with the sunset in the background.">
<div class="content">
<h3>Our Mission</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis in delectus officiis unde modi odit.</p>
<h3>Recent Posts</h3>
<li><a href="">Lorem ipsum dolor sit</a></li>
<li><a href="">Smet consectetur adipisicing elit</a></li>
<li><a href="">Eligendi omnis tenetur illum</a></li>
<li><a href="">Voluptatibus quia vitae tenetur</a></li>
</div>
<!-- end of content -->
</aside>
</div>
<!-- end of left -->
<div class="right" role="main">
<article id="skip-to-content">
<img src="./assets/blog-post-image.jpg" alt="Part of a boat with an anchor rope in the ocean.">
<div class="content">
<h1>Next destination</h1>
<div class="meta">
Monday October 30, 2019 by Sulaire
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto aliquam sint odit voluptatibus debitis vitae velit saepe provident repudiandae quasi praesentium totam, deleniti et voluptates itaque excepturi perferendis consectetur dicta. Nihil est amet, corporis eligendi adipisci rerum dignissimos consectetur, totam molestias ipsa velit doloribus officiis nobis, aspernatur nisi quibusdam animi quidem dolorem cumque ratione.</p>
<p>Dolore autem reprehenderit assumenda voluptas fuga, non saepe incidunt. Fuga incidunt pariatur eveniet repellat quis! Voluptates, dolores dolore! Similique impedit consectetur, adipisci ullam soluta aspernatur ea, blanditiis ipsam, illum aut architecto rem placeat! Commodi natus nobis ad rem odit excepturi deserunt tenetur consectetur, et dolorum dignissimos non amet maiores quia dolore earum doloremque culpa dolorem provident veritatis cum quasi vero. Beatae, repellat inventore vero eligendi cumque odit similique? Odio nobis quia consequatur doloribus deleniti tenetur ullam voluptates debitis? Laudantium enim, magnam itaque quis hic impedit quo numquam accusantium rerum nihil et. </p>
<p>Ut, fuga. Corrupti maiores voluptates placeat mollitia rerum! Tenetur esse ex maxime ipsam, nobis iure earum veniam inventore animi impedit non! Eaque libero atque aliquid! Sed numquam quae amet! Laborum maiores dignissimos deserunt. Porro illum ipsa qui repudiandae quam enim atque eius esse, ratione commodi incidunt rerum alias beatae optio. Deleniti maxime, officiis cumque laborum rerum sint eveniet expedita. Magni mollitia est rerum perferendis quod eaque quidem in deleniti libero, nobis sint natus consequuntur amet animi, pariatur esse error fugiat maiores perspiciatis fuga vitae tenetur laborum nemo similique! Nam, expedita architecto necessitatibus incidunt quos dicta eveniet voluptatibus omnis. Doloremque rerum praesentium ipsam laudantium! </p>
<p>Error optio facere in quas accusamus! Inventore, nemo esse fuga commodi magnam labore vel suscipit excepturi est, fugit eligendi neque, voluptatem velit tempore minus id delectus nobis error magni repellendus illo? Quo praesentium necessitatibus, nobis ipsam placeat ut aperiam facere, repudiandae blanditiis quam vero non ipsa nemo. Inventore beatae magni tenetur illo.</p>
</div>
<!-- end of content -->
</article>
<div class="comments">
<h2>Comments:</h2>
<div class="comment flex">
<img src="./assets/comment-1.jpg" aria-hidden="true">
<div class="text">
<p>Tuesday Ocotber 9th, 2019 by Ali</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat laudantium, quos, iste quibusdam iure id natus sint, nihil harum assumenda sed excepturi perferendis. Officiis mollitia ratione dolor repellendus voluptates corrupti.</p>
</div>
</div>
<div class="comment flex">
<img src="./assets/comment-2.jpg" aria-hidden="true">
<div class="text">
<p>Tuesday Ocotber 9th, 2019 by Ali</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat laudantium, quos, iste quibusdam iure id natus sint, nihil harum assumenda sed excepturi perferendis. Officiis mollitia ratione dolor repellendus voluptates corrupti.</p>
</div>
</div>
<form class="flex" action="">
<label for="name" class="sr-only">Enter your name</label>
<input type="text" id="name" name="name" placeholder="Name">
<label for="email" class="sr-only">Enter your email address</label>
<input type="email" id="email" name="email" placeholder="Email address">
<label for="comment" class="sr-only">Enter your comment</label>
<textarea placeholder="Comment" name="comment" id="comment"></textarea>
<button class="btn" type="submit">Post Comment</button>
</form>
</div>
<!-- end of comments -->
</div>
<!-- end of right -->
</main>
<footer>
<p>Copyright © 2021 <a href="https://junocollege.com">Juno College</a> | By Bea <i class="fas fa-kiwi-bird"></i> & Fern <i class="fab fa-pagelines"></i></p>
</footer>
<script src="./script.js"></script>
</body>
</html>