-
Notifications
You must be signed in to change notification settings - Fork 0
/
blog.html
141 lines (126 loc) · 7.32 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
<!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 href="https://fonts.googleapis.com/css?family=Cabin|Oswald:700" rel="stylesheet">
<link rel="stylesheet" href="styles/blogstyle.css">
<title>Harper's Blog</title>
</head>
<body>
<!-- HEADER SECTION -->
<header>
<div class="wrapper">
<ul class="header">
<li class="header__links">
<a href="index.html">Home</a>
</li>
<li class="header__links">
<a href="#scroll-about">About</a>
</li>
<li class="header__links">
<a class="header__links title" href="index.html">Harper</a>
</li>
<li class="header__links">
<a href="blog.html">Blog</a>
</li>
<li class="header__links">
<a href="contact.html">Contact</a>
</li>
</ul>
</div>
<div class="blog-background">
<img class="blog-background__img" src="assets/blog-image-1.jpg" alt="">
</div>
<h1>Blog</h1>
</header>
<!-- MAIN SECTION -->
<main>
<div class="main wrapper clearfix">
<div class="aside" id="scroll-about">
<div class="aside__section sticky">
<img class="aside__section--img"src="assets/blog-image-2.jpg" alt="">
<h4>About Harper</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae dicta, itaque ea fugiat placeat
repellendus labore laborum magni non sed omnis aliquam. <a href="#">Find out more.</a></p>
</div>
<div class="aside__section sticky">
<h4>Recent Posts</h4>
<ul>
<li>
<p>Lorem ipsum dolor sit.</p>
</li>
<li>
<p>Itaque ea fugiat placeat</p>
</li>
<li>
<p>Deserunt reiciendis iste quasip
</li>
<li>
<p>Amet obcaecati odit omnis.</p>
</li>
</ul>
</div>
</div>
<div class="main-blog">
<div class="main-blog__section blue">
<h4>My favourite travel destinations</h4>
<p>Monday October 8th 2018, by Harper</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto mollitia explicabo ipsam voluptatum doloremque sint tenetur aspernatur, dolor, neque quaerat expedita magni provident autem fuga eveniet odio nihil recusandae voluptas, tempore voluptatem sed ut repudiandae! Neque ex cum, consequuntur sequi nulla inventore quam cupiditate magnam saepe porro, sed accusantium quos? Autem consequatur sapiente maxime obcaecati id! Nam rem atque est incidunt possimus ullam, adipisci consequuntur ex iure tempora praesentium! Sit odio eius deserunt cumque placeat, dolore distinctio adipisci incidunt necessitatibus eligendi similique quia quidem! Dicta, distinctio quod officia maiores voluptatum suscipit eligendi. </p><span id="dots">...</span><span id="more"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis atque quia incidunt dolor qui veniam nemo ipsam ad error itaque tenetur, distinctio quis a maxime quisquam excepturi. Aliquid, recusandae optio! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis iste officia, debitis voluptatem delectus id molestias reprehenderit laudantium minus eius sunt consectetur sequi eligendi corrupti ipsa. Ex distinctio nobis repellat?</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Maiores at illum adipisci recusandae porro vero sit corrupti hic assumenda, ab ex voluptate quod, non omnis mollitia laboriosam numquam soluta iste. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum quia exercitationem omnis dolorum, voluptatem odit voluptatibus atque ea numquam ipsum quo nisi repellendus labore non eligendi veniam molestiae enim harum.</p></span>
<button onclick="myFunction()" id="myBtn">Read more</button>
</div>
<div class="main-blog__section--flex">
<div class="main-blog__section--img">
<img src="assets/blog-image-3.jpg" alt="">
</div>
<div class="main-blog__section--text">
<p>Tuesday October 9th, 2018 by Maggie</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore a nam, recusandae nesciunt aperiam ducimus iure eligendi quod qui et quibusdam sapiente ipsam itaque? Dignissimos pariatur velit voluptatibus fugit sunt.</p>
</div>
</div>
<div class="main-blog__section--flex blue">
<div class="main-blog__section--img">
<img src="assets/blog-image-4.jpg" alt="">
</div>
<div class="main-blog__section--text">
<p>Wednesday October 10th, 2018 by Daisy</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum sapiente, eaque laudantium mollitia dolores qui omnis nesciunt consequatur, harum, soluta libero accusantium consequuntur. Deserunt reiciendis iste quasi officiis minima accusantium!</p>
</div>
</div>
<form action="sendEmail.php" class="main-blog__form" method="POST" name="blogForm">
<input type="text" class="main-blog__name" name="name" required="true" placeholder="Name">
<input type="text" class="main-blog__email" name="email" placeholder="Email Address">
<!-- <input type="text" class="main-blog__comment" name="comment" required="true" placeholder="Comment"> -->
<textarea name="comment" class="main-blog__comment" placeholder="Message"></textarea>
<input type="submit" class="main-blog__button" name="submit" value="Post Comment">
</form>
</div>
</div>
</main>
<!-- FOOTER SECTION -->
<footer>
<div class="footer-section">
<p class="footer-section__text">Copyright 2018 HackerYou</p>
</div>
</footer>
<!-- JQUERY -->
<script>
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
</script>
</body>
</html>