-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblog.html
103 lines (99 loc) · 7.64 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sophie's Blog</title>
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/243b648db7.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<header class="blogHeader">
<input type="checkbox">
<div class="toggle"><i class="fas fa-bars"></i></div>
<nav>
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="./index.html#about">About</a></li>
<span class="logo" id="#home">Sophie</span>
<li><a href="./blog.html">Blog</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
</nav>
<div class="bg">
<div class="wrapper">
<h1>blog</h1>
</div>
</div>
</header>
<main>
<section class="blog">
<div class="wrapper flexContainer">
<aside>
<div class="profile">
<img src="./assets/home-image-1.jpg" alt="A person holding 2 orange slices infront of their eyes">
<div>
<h2>About Sophie</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae necessitatibus ipsum quod. <a href="#">Find out more</a></p>
</div>
</div>
<div class="recent">
<h2>recent posts</h2>
<ul class="flexContainer">
<li><p>Lorem ipsum dolor sit.</p></li>
<li><p>Lorem ipsum dolor sit.</p></li>
<li><p>Lorem ipsum dolor sit.</p></li>
<li><p>Lorem ipsum dolor sit.</p></li>
</ul>
</div>
</aside>
<div class="blogger">
<div class="sophiePost">
<h2>why i became a blogger</h2>
<p><time>Monday October 8th, 2018</time> by <span class="user">Sophie Barlow</span></p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Suscipit iure odit sequi facilis nisi? Et iste mollitia tenetur dolores officia voluptatem doloremque a ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quo nostrum laboriosam natus temporibus culpa rerum consectetur? Alias dolorum reiciendis asperiores architecto dolore non necessitatibus aliquid deleniti saepe facere, repellendus vitae ducimus doloribus provident! Adipisci.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi sit commodi nemo quibusdam. Perferendis tempore, eligendi praesentium recusandae, consectetur modi consequatur aliquid voluptates deleniti impedit ipsa, temporibus nobis eaque incidunt maiores eos ducimus porro. Architecto veritatis cupiditate quas repudiandae natus, doloribus modi quod. Placeat soluta, ipsam et possimus architecto nulla! Quia reprehenderit ipsum alias dolorum sint culpa placeat recusandae quis deleniti obcaecati suscipit enim omnis tempora corporis cum, quo velit. Nostrum maxime ipsam iste blanditiis animi odit culpa corporis quia vero architecto sit expedita odio libero assumenda, quam incidunt similique eius quis numquam repellendus quos at ab officia? Odit reiciendis unde modi quidem repellendus assumenda itaque, blanditiis velit tempore praesentium ratione provident alias harum quae officia ab illum labore eveniet.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum temporibus repellendus harum aperiam unde. Numquam placeat aut perspiciatis voluptates saepe quo, natus earum eaque!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum asperiores sint officiis quisquam exercitationem blanditiis quo modi qui minima! Numquam consequuntur tempore totam obcaecati modi deleniti voluptates provident ratione explicabo. Non perferendis id explicabo molestias?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique facilis doloremque nostrum tempora quod sequi debitis laboriosam, quibusdam possimus inventore rem deleniti iure in! Est nesciunt libero animi labore tempore molestiae excepturi omnis fuga, explicabo quae beatae perferendis ullam, necessitatibus id nihil, debitis laborum voluptatibus aliquid. Consequatur non sequi sed ipsa, vitae consequuntur tenetur quo sit odio repellendus. Voluptates corrupti est nulla ad praesentium, nisi sint dolores soluta dolorem, facere reprehenderit quibusdam aut sed harum sit amet necessitatibus perspiciatis pariatur sapiente, nobis at natus temporibus maxime rerum! Perferendis fuga aut in, veritatis voluptas vel, atque exercitationem temporibus quasi ratione repellendus magni inventore dolorem quaerat, accusamus nihil? Repellat, recusandae a numquam rem neque earum omnis sapiente, delectus aspernatur voluptatum dolorum nobis.</p>
</div>
<div class="guestPost">
<div class="flexContainer">
<div class="imageContainer">
<img src="./assets/blog-image-3.jpg" alt="Jeremy's profile picture">
</div>
<div class="textContainer">
<p><span class="user"><time datetime="2018-10-9">Tuesday October 9th, 2018</time> by Jeremy</span></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique reiciendis obcaecati laborum rerum quas dolor tempora sint laboriosam vero quod repellat, nostrum porro dignissimos aliquid!</p>
</div>
</div>
<div class="flexContainer">
<div class="imageContainer">
<img src="./assets/blog-image-4.jpg" alt="Julia's profile picture">
</div>
<div class="textContainer">
<p><span class="user"><time datetime="2018-9-10">Wednesday October 10th, 2018</time> by Julia</span></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet unde repellat sunt dicta laborum facere commodi nobis facilis ullam laboriosam, sit similique iusto asperiores adipisci</p>
</div>
</div>
</div>
<form action="" method="" class="commentForm" name="comment">
<input type="text" name="name" id="name" placeholder="Name">
<label for="name" class="srOnly">Name</label>
<input type="email" name="userEmail" id="userEmail" placeholder="Email address">
<label for="email" class="srOnly">Email Address</label>
<textarea name="comment" id="comment" cols="30" rows="10" placeholder="comment"></textarea>
<label for="comment" class="srOnly">comment</label>
<button class="submitComment">Post Comment</button>
</form>
</div>
</div>
</section>
</main>
<footer>
<p>Copyright ©2020 Juno College, Created by Kyle Wong</p>
</footer>
</body>
</html>