-
Notifications
You must be signed in to change notification settings - Fork 0
/
blog.html
144 lines (123 loc) · 5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog - Beachstays</title>
<!-- google fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Playfair+Display+SC:ital,wght@1,900&display=swap"
rel="stylesheet">
<!-- font awesome -->
<script src="https://kit.fontawesome.com/51d17a3aa7.js" crossorigin="anonymous"></script>
<!-- stylesheet -->
<link rel="stylesheet" href="./styles/style.css">
</head>
<body class="blog-page">
<!-- skip links -->
<nav class="skip-links">
<a href="./index.html" class="skip-link">Jump to Home Page</a>
</nav>
<!-- header -->
<header>
<div class="wrapper">
<!-- nav -->
<nav class="top-bar">
<!-- logo -->
<a href="#" class="logo">BEACHSTAYS</a>
<input type="checkbox" name="dropdown" id="dropdown">
<label for="dropdown"><i class="fas fa-bars"></i></label>
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
</nav>
<!-- main heading -->
<h1>Blog</h1>
</div>
</header>
<!-- main -->
<main>
<div class="wrapper">
<!-- blog post -->
<article>
<div class="image">
<img src="./images/post-image.jpg" alt="The back of a beachhouse ad dusk with the lights on">
</div>
<div class="text">
<h2>Five days of ocean seas</h2>
<time>Monday January 21st, 2019 by <span>Bora</span></time>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed quisquam quo qui maxime doloribus dolore minus perspiciatis molestias rerum. Beatae, quo deleniti sapiente voluptatum dignissimos vero saepe ad molestias autem!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis culpa itaque hic voluptates nesciunt est nihil quis corporis nostrum recusandae expedita, tempore consequatur saepe. Tempora, tenetur? Iusto quibusdam, consequatur modi quis iure quod. Molestias natus provident porro tenetur! Repellat omnis, beatae adipisci iusto cum eos id porro quidem corrupti molestiae?</p>
<p>Explicabo officia veritatis velit molestias qui illo perspiciatis aperiam, quidem quo et harum error ratione ea, ab at vitae dolores laboriosam minus cupiditate magnam, inventore dignissimos. Architecto voluptatum ducimus alias maiores odit cum quisquam dicta quasi, reiciendis facere vero obcaecati ad dolorum quos incidunt officia dolores ipsa similique magni. Natus!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum consectetur quos necessitatibus eius eligendi architecto quas quod ea culpa eos.</p>
</div>
</article>
<!-- Comments section -->
<section class="comments">
<h3>Comments:</h3>
<div class="comment">
<div class="image">
<img src="./images/comment-image.jpg" alt="Commenter's profile picture">
</div>
<div class="text">
<time>Tuesday October 9th, 2019 by Reyansh</time>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo sunt nisi expedita nostrum adipisci quae soluta ipsa quaerat odit nam!</p>
</div>
</div>
<div class="comment">
<div class="image">
<img src="./images/comment-image2.jpg" alt="Commenter's profile picture">
</div>
<div class="text">
<time>Wednesday October 10th, 2019 by Olivia</time>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo sunt nisi expedita nostrum adipisci quae soluta ipsa quaerat odit nam!</p>
</div>
</div>
<form action="#">
<label for="name" class="sr-only">Name</label>
<input type="text" name="name" id="name" placeholder="Name">
<label for="email" class="sr-only">Email Address</label>
<input type="email" name="email" id="email" placeholder="Email address">
<label for="comment" class="sr-only">Comment</label>
<textarea name="comment" id="comment" cols="30" rows="10" placeholder="Comment"></textarea>
<button type="submit">Post Comment</button>
</form>
</section>
<!-- sidebar -->
<aside class="sidebar">
<div class="image">
<img src="./images/sidebar-image.jpg" alt="Two beach houses at low tide">
</div>
<div class="text">
<h4>Our mission</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, delectus!</p>
<a href="#">Find out more.</a>
<h4>Recent Posts</h4>
<ul>
<li>
<p>Lorem, ipsum dolor</p>
</li>
<li>
<p>Repudiandae, dignissimos</p>
</li>
<li>
<p>Excepturi, quam voluptate</p>
</li>
<li>
<p>Aut, nisi voluptatum</p>
</li>
</ul>
</div>
</aside>
</div>
</main>
<!-- footer -->
<footer>
<p class="copyright">Copyright © 2020 HackerYou</p>
<p class="created">Created at <a href="https://junocollege.com/" rel="noreferrer">Juno College</a></p>
</footer>
</body>
</html>