-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblog.html
126 lines (109 loc) · 7.03 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
<!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>Planted | Blog</title>
<link rel="stylesheet" href="./styles/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;700&family=Roboto:ital@0;1&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/b1b1a9bb2c.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="nav-bar blog-nav"> <!-- .nav-bar STARTS -->
<div class="wrapper"> <!-- .nav-bar .wrapper STARTS -->
<ul class="flex-nav-container">
<li class="logo-li"><p class="logo">Planted</p></li>
<li><a href="./index.html">Home</a></li>
<li><a href="./about.html">About</a></li>
<li><a href="./blog.html" class="current-page">Blog</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
</div> <!-- .nav-bar .wrapper STARTS -->
</nav> <!-- .nav-bar ENDS -->
<header class="blog-header"> <!-- header STARTS -->
<div class="wrapper blog">
<!-- header just includes h2 "blog" and background image (full bleed) -->
<h2 class="blog-h2">Blog</h2>
</div> <!-- header .wrapper ENDS -->
</header> <!-- header ENDS -->
<main class="blog-main-section" <!-- main STARTS -->
<div class="wrapper"> <!-- main .wrapper STARTS -->
<section class="blog-main-flex"> <!-- .blog-main-flex section STARTS -->
<div class="blog-left-flex"> <!-- blog left side bar START -->
<div class="blog-left-img">
<img src="./assets/side-bar-image.jpg" alt="solid wood window frame with dark varnish on the side of an aged rustic building">
</div>
<div class="blog-about-box">
<h5>About Planted</h5>
<p>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum. <a href="./about.html" class="inline-link">Find out more.</a></p>
<h5>Recent Posts</h5>
<ul>
<li><p>Donec facilisi tortor ut</p></li>
<li><p>Augue lacinia at viverra</p></li>
<li><p>Semper sed sapien metus</p></li>
<li><p>Scelerisque nec pharatra id</p></li>
</ul>
</div>
</div> <!-- blog-left side bar ENDS -->
<div class="blog-right-flex"> <!-- blog-right side bar STARTS -->
<div class="blog-right-img">
<img src="./assets/post-image.jpg" alt="close-up shot of a broad leafed Rubber Tree plant">
</div>
<div class="blog-post">
<h3>Our mission at Planted</h3>
<h6 class="blog-date">Monday January 21st, 2019 by <span class="blog-author">Yousra</span></h6>
<p>Curabitur lobortis id lorem id bibendum. Ut id consectetur magna. Quisque volutpat augue enim, pulvinar lobortis nibh lacinia at. Vestibulum nec erat ut mi sollicitudin porttitor id sit amet risus. Nam tempus vel odio vitae aliquam.</p>
<p>In imperdiet eros id lacus vestibulum vestibulum. Suspendisse fermentum sem sagittis ante venenatis egestas quis vel justo. Maecenas semper suscipit nunc, sed aliquam sapien convallis eu. Nulla ut turpis in diam dapibus consequat. Fusce vehicula dolor arcu, sit amet blandit dolor mollis nec. Donec viverra eleifend lacu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pretium pretium tempor. Ut eget imperdiet neque. In volutpat ante semper diam molestie, et aliquam erat laoreet. Sed sit amet arcu aliquet, molestie justo at, auctor nunc. Phasellus ligula ipsum, volutpat eget semper id, viverra eget nibh. Suspendisse luctus mattis cursus. Nam consectetur ante at nisl hendrerit gravida. Donec vehicula rhoncus mattis. Mauris dignissim semper mattis. Fusce porttitor a mi at suscipit. Praesent facilisis dolor sapien, vel sodales augue mollis ut. Mauris venenatis magna eu tortor posuere luctus. Aenean tincidunt turpis sed dui aliquam vehicula. Praesent nec elit non dolor consectetur tincidunt sed in felis. Donec elementum, lacus at mattis tincidunt, eros magna faucibus sem, in condimentum est augue tristique risus.</p>
<p>Ut id consectetur magna. Quisque volutpat augue enim, pulvinar lobortis nibh lacinia at. Vestibulum nec erat ut mi sollicitudin porttitor id sit amet risus. Nam tempus vel odio vitae aliquam.</p>
</div>
<div class="comment-section-flex"> <!-- comment section BEGINS -->
<h4>Comments:</h4>
<div class="comment-box">
<div class="comment-img">
<img src="./assets/profile-image.jpg" alt="photo of blog commenter named Jeremy">
</div>
<div class="comment-content">
<h6 class="blog-post-date">Tuesday October 9th, 2018 by Jeremy</h6>
<p>Fusce vehicula dolor arcu, sit amet blandit dolor mollis nec. Donec viverra eleifend lacus, vitae ullamcorper metus. Sed sollicitudin ipsum quis nunc sollicitudin ultrices. Donec euismod scelerisque ligula. Maecenas eu varius risus, eu aliquet arcu.</p>
</div>
</div>
<div class="comment-box">
<div class="comment-img">
<img src="./assets/profile-image-2.jpg" alt="photo of blog commenter named Julia">
</div>
<div class="comment-content">
<h6 class="blog-post-date">Wednesday October 10th, 2018 by Julia</h6>
<p>Donec viverra eleifend lacus, vitae ullamcorper metus. Sed sollicitudin ipsum quis nunc sollicitudin ultrices. Donec euismod scelerisque ligula. Maecenas eu varius risus, eu aliquet arcu.</p>
</div>
</div>
</div> <!-- comment section ENDS -->
<div class="comment-container"> <!-- comment container BEGINS -->
<form action="#" method="post" class="comment-form">
<div class="form-input">
<label for="name" class="sr-only"></label>
<input type="text" id="name" placeholder="Name">
</div>
<div class="form-input">
<label for="email" class="sr-only"></label>
<input type="text" id="email" placeholder="Email address">
</div>
<div class="textarea">
<label for="message" class="sr-only">Message for me</label>
<textarea name="message" id="message" cols="30" rows="6" placeholder="Comment"></textarea>
<button>Post Comment</button>
</div>
</form>
</div> <!-- comment container ENDS -->
</div> <!-- blog-right side bar ENDS -->
</section> <!-- .blog-main-flex section ENDS -->
</div> <!-- main .wrapper ENDS -->
</main> <!-- main ENDS -->
<footer class="footer-blog"> <!-- footer STARTS -->
<p>Copyright © 2022 Juno College</p>
</footer> <!-- footer ENDS -->
</body>
</html>