-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblog.html
163 lines (162 loc) · 6.46 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
<!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" />
<link rel="stylesheet" href="./styles/styles.css" />
<script
src="https://kit.fontawesome.com/b5c85453fa.js"
crossorigin="anonymous"
></script>
<title>Mind n' Soul | Blog</title>
</head>
<body id="blog" class="outerWrapper">
<header>
<div class="headerContent">
<nav class="wrapper">
<div class="logo">Mindn'Soul</div>
<div class="hamburger">
<i class="fas fa-bars"></i>
</div>
<ul id="navLinks">
<li><a href="./index.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a class="selected" href="./blog.html">Blog</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
</nav>
<div class="headings wrapper">
<h1>Blog</h1>
</div>
</div>
</header>
<main>
<div class="blogContainer">
<section class="blogPost">
<div class="image">
<img src="./images/post-image.jpg" alt="A gong" />
</div>
<article>
<h2>Come and discover our space</h2>
<p>Monday May 5th, 2019 by <em>Saron</em></p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque
aliquam, facere possimus officiis recusandae iusto at sunt error
esse commodi ullam eligendi a labore amet nemo dicta. Ipsam,
rerum! Unde autem voluptate eos dicta. Neque nihil quisquam
reiciendis exercitationem porro autem maiores. Cupiditate atque
ipsum tempora rem quibusdam delectus debitis.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum
quam dignissimos soluta distinctio esse sequi beatae. Dignissimos
blanditiis iure ipsum maiores optio sequi similique atque
provident asperiores, commodi fugiat, totam doloribus minima,
alias magni et deserunt consequatur repudiandae molestias non
voluptas suscipit harum. Vel tempore laudantium in pariatur
placeat quidem!
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde
amet suscipit, maiores nesciunt cupiditate nihil provident culpa
magni labore soluta tempore quasi. Exercitationem ab, aliquam
numquam laboriosam beatae magnam nam sed mollitia quam sunt optio
tempore dolorem cumque provident obcaecati ullam inventore
accusantium aperiam dicta, nostrum ipsum labore adipisci minima.
Cupiditate corporis magnam explicabo, quibusdam inventore maiores
totam repudiandae aspernatur quo sit itaque unde dolores ipsum?
Ipsam cumque, eos aliquid vero nam dolores autem accusantium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi
libero excepturi ex illum nam commodi nobis eos? Voluptate nobis,
exercitationem cumque quisquam corporis modi saepe!
</p>
</article>
</section>
<section class="comments">
<h2>Comments:</h2>
<article class="comment">
<div class="image">
<img
src="./images/comment-image.jpg"
alt="image of commenter, Davin"
/>
</div>
<div class="text">
<h3>Tuesday October 9th, 2019 by Davin</h3>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos,
cupiditate provident, nesciunt, hic asperiores quam maiores
ullam a repellat dolorem facere unde laborum tempora ex nulla?
Asperiores sed nisi quas.
</p>
</div>
</article>
<article class="comment">
<div class="image">
<img
src="./images/comment-image2.jpg"
alt="image of commenter, Lisa"
/>
</div>
<div class="text">
<h3>Wednesday October 10th, 2019 by Lisa</h3>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos,
cupiditate provident, nesciunt, hic asperiores quam maiores
ullam a repellat dolorem facere unde laborum tempora ex nulla?
Asperiores sed nisi quas.
</p>
</div>
</article>
<form action="#">
<fieldset>
<legend class="sr-only">Write a Comment</legend>
<div class="container">
<div class="nameEmail">
<label for="name" class="sr-only">Name</label>
<input id="name" type="text" placeholder="Name" />
<label for="email" class="sr-only">Email address</label>
<input id="email" type="email" placeholder="Email address" />
</div>
<label for="comment" class="sr-only">Comment</label>
<textarea
name="comment"
id="comment"
placeholder="Comment"
></textarea>
<button class="styledLink" type="submit">Submit</button>
</div>
</fieldset>
</form>
</section>
</div>
<aside>
<div class="image">
<img src="./images/sidebar-image.jpg" alt="pile of rocks" />
</div>
<div class="text">
<h3>Our mission</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
ea, maiores quas facere porro asperiores maxime, repellendus
delectus beatae natus earum at doloremque nesciunt et.
</p>
<h3>Recent Posts</h3>
<ul>
<li><a href="#">Donec focilisis 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>
</aside>
</main>
<footer>
<p>Copyright © 2019 HackerYou</p>
</footer>
<script src="./main.js"></script>
</body>
</html>