-
Notifications
You must be signed in to change notification settings - Fork 0
/
blog.html
199 lines (187 loc) · 9.91 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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!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">
<title>🌊 BLOG | Beachstays</title>
<!-- LINK TO STYLESHEET -->
<link rel="stylesheet" href="./styles/styles.css">
<!-- FONTAWESOME ICONS-->
<script src="https://kit.fontawesome.com/542d40d4ae.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- HEADER -->
<header class="blog">
<nav class="navBar">
<div class="wrapper">
<a class="logo" href="index.html">Beachstays</a>
<ul class="headerMenu">
<li><a href="./index.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a class="highlight" href="./blog.html">Blog</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
<div class="hamburgerButton navButton">
<button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-menu">
<line x1="3" y1="12" x2="21" y2="12" id="id_107"></line>
<line x1="3" y1="6" x2="21" y2="6" id="id_108"></line>
<line x1="3" y1="18" x2="21" y2="18" id="id_109"></line>
</svg>
</button>
</div><!-- .hamburger ends -->
</div> <!-- .wrapper ends -->
</nav>
<div class="slideOutNav">
<div class="hamburgerButton xButton">
<button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div><!-- .hamburgerButton ends -->
<nav class="slideOutMenu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="./blog.html">Blog</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
</nav>
</div><!-- .slideOutNav ends -->
</header>
<main class="blogMain">
<div class="heading wrapper">
<h1>Blog</h1>
</div> <!-- .heading .wrapper ends -->
<section class="blogContent">
<article>
<div class="articleImg">
<img src="./assets/post-image.jpg" alt="summer house at dusk with a garden of reed grass">
</div><!-- .articleImg ends -->
<div class="border">
<div class="articleText wrapper">
<h2>Five days of ocean seas</h2>
<h3>Monday January 21st, 2019 by <span>Bora</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga magni ab suscipit, vel cumque
nulla nobis eveniet ducimus maiores. Eius autem cumque quisquam eligendi est exercitationem
sunt
nam perspiciatis pariatur?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur distinctio rem dolores
maiores
sequi mollitia sunt animi corporis quae amet exercitationem, voluptate placeat. Eveniet,
accusamus corporis? Modi ab corrupti, voluptatem natus optio quas nisi perspiciatis ipsam
sequi,
est ipsa id.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit at soluta sed eligendi cumque
explicabo. Reiciendis sunt distinctio quam iure natus fuga ipsum numquam vitae a ratione
blanditiis velit ullam error odit perspiciatis accusamus aliquam, consequatur omnis corrupti
eaque ex. Nemo a repellat ea blanditiis provident! Magni exercitationem accusantium totam!
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit at cumque laboriosam
reiciendis
nemo earum perspiciatis officia eos delectus quam?</p>
</div> <!-- .articleText .wrapper ends -->
</div><!-- .border ends -->
</article>
<aside>
<div class="asideImg">
<img src="./assets/sidebar-image.jpg" alt="view of beach house with a dock on a river">
</div>
<div class="asideTextGroup">
<div class="ourMission">
<h3>Our Mission</h3>
<p>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum. </br>
<a href="#">
Find out more.
</a>
</p>
</div><!-- .ourMission ends -->
<div class="recentPosts">
<h3>Recent Posts</h3>
<ul>
<li>
<a href="#">
Donec facilis tortor ut
</a>
</li>
<li>
<a href="#">
Augue lacinia at viverra
</a>
</li>
<li>
<a href="#">
Semper sed sapien metus
</a>
</li>
<li>
<a href="#">
Scelerisque nec pharetra
</a>
</li>
</ul>
</div><!-- .recentPosts ends -->
</div><!-- .asideTextGroup ends -->
</aside>
</section> <!-- .blogContent ends -->
<section class="comments wrapper">
<div class="commentSection">
<h2>Comments:</h2>
<div class="commentBox firstComment">
<div class="commentImgContainer">
<img src="./assets/comment-image.jpg"
alt="portrait photo of Reyansh, the commenter - man with beard">
</div> <!-- .commentImgContainer ends -->
<div class="commentTextContainer">
<h3>Tuesday October 9th, 2019 by Reyansh</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, iusto excepturi eum nemo iure
provident deleniti eos recusandae modi ut? Et voluptatum corporis sed debitis similique
illum in distinctio rem illum in distinctio rem illum in distinctio rem.</p>
</div><!-- .commentTextContainer ends -->
</div> <!-- .firstComment ends -->
<div class="commentBox secondComment">
<div class="commentImgContainer">
<img src="./assets/comment-image2.jpg"
alt="portrait photo of Olivia, the commenter - woman with orange polarized sunglasses">
</div> <!-- .commentImgContainer ends -->
<div class="commentTextContainer">
<h3>Wednesday October 10th, 2019 by Olivia</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur minus pariatur vel
corrupti a fugit facilis doloribus? Animi neque, deserunt odio vel.</p>
</div><!-- .commentTextContainer ends -->
</div> <!-- .secondComment ends -->
</div><!-- .commentSection ends -->
<div class="fillForm">
<form action="#" method="#" class="myForm" name="myForm">
<div class="nameEmail">
<label for="name" class="visuallyHidden">Name</label>
<input type="text" id="name" name="name" required placeholder="Name">
<label for="email" class="visuallyHidden">Email</label>
<input type="email" id="email" name="email" required placeholder="Email address">
</div> <!-- .nameEmail ends -->
<div class="message">
<label for="message" class="visuallyHidden">Message</label>
<textarea name="message" id="message" cols="55" rows="6" minlength="1" maxlength="500" required
placeholder="Comment"></textarea>
</div><!-- .message ends -->
<div class="submitButton">
<button type="submit" class="buttonContainer">Post Comment</button>
</div><!-- .submitButton ends -->
</form>
</div> <!-- .contactForm ends -->
</section><!-- .comments .wrapper ends -->
</main>
<footer>
<div class="wrapper">
<p>Copyright © 2019 HackerYou</p>
</div><!-- .wrapper ends -->
</footer>
<script src="./scriptBlog.js"></script>
</body>
</html>