-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
156 lines (142 loc) · 7.79 KB
/
index.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
<!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</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>
<header class="home-header"> <!-- header STARTS -->
<nav class="nav-bar"> <!-- .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" class="current-page">Home</a></li>
<li><a href="./about.html">About</a></li>
<li><a href="./blog.html">Blog</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
</div> <!-- .nav-bar .wrapper ENDS -->
</nav> <!-- .nav-bar ENDS -->
<div class="header-img">
<img src="./assets/header-box.jpg" alt="a top down photo of a broad leafed plant">
</div>
<div class="header-text">
<h1>Planted <span class="header-invitation">invitation</span></h1>
</div>
</header> <!-- header ENDS -->
<main> <!-- main STARTS -->
<section class="about" id="about"> <!-- .about section STARTS -->
<div class="wrapper">
<h2>What is Planted?</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores, recusandae ducimus itaque labore laborum enim. Est rem quisquam ea incidunt quidem minima aliquam? A incidunt deserunt mollitia expedita, quae ducimus modi repudiandae dignissimos magni sit quas facere quam, neque facilis maiores rerum dolorem eos vero veritatis voluptatem minima. Commodi, quae quia.</p>
<a href="./about.html" class="button-link">Find Out More</a>
</div> <!-- .about .wrapper ends -->
</section> <!-- .about section ENDS -->
<section class="workshops"> <!-- .workshops section STARTS -->
<div class="wrapper"> <!-- flex .workshops .wrapper STARTS -->
<div class="img-container-top">
<img src="./assets/left-flowers.jpg" alt="a bouquet of assorted flowers">
</div>
<div class="workshops-info-box">
<h3>Upcoming workshops</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam at fuga fugiat fugit sit magni dicta eveniet labore harum adipisci corporis, earum dolore sapiente, aut alias! Autem, veniam enim. Quia illum a ea sequi.</p>
<a href="#" class="button-link">Read More</a>
</div>
<div class="plants-info-box">
<h3>Unique plants to discover</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam at fuga fugiat fugit sit magni dicta eveniet labore harum adipisci corporis, earum dolore sapiente, aut alias! Autem, veniam enim. Quia illum a ea sequi.</p>
<a href="#" class="button-link">Read More</a>
</div>
<div class="img-container-bottom">
<img src="./assets/right-flowers.jpg" alt="a vibrant green bush with small flat petals">
</div>
</div> <!-- flex .workshops .wrapper ENDS -->
</section> <!-- .workshops section ENDS -->
<section class="middle-links"> <!-- .middle-links section STARTS -->
<div class="wrapper"> <!-- .middle-links .wrapper STARTS -->
<div class="middle-links-flex">
<div class="green-houses">
<div class="icon-leaf">
<i class="fa-solid fa-leaf"></i>
</div>
<div class="icon-leaf-right">
<h3>Green houses</h3>
<p>Ut felis eros, vehicula eu magna nec, laoreet blandit nisi. Fusce auctor erat ac sagittis mattis. Mauris tempus velit sem, sit amet imperdiet dolor placerat et.</p>
</div>
</div>
<div class="community">
<div class="icon-ppl">
<i class="fa-solid fa-users"></i>
</div>
<div class="community-right">
<h3>Community</h3>
<p>Ut felis eros, vehicula eu magna nec, laoreet blandit nisi. Fusce auctor erat ac sagittis mattis. Mauris tempus velit sem, sit amet imperdiet dolor placerat et.</p>
</div>
</div>
<div class="blog">
<div class="icon-file">
<i class="fa-solid fa-file"></i>
</div>
<div class="blog-right">
<h3>Blog</h3>
<p>Ut felis eros, vehicula eu magna nec, laoreet blandit nisi. Fusce auctor erat ac sagittis mattis. Mauris tempus velit sem, sit amet imperdiet dolor placerat et.</p>
</div>
</div>
<div class="contact">
<div class="icon-phone">
<i class="fa-solid fa-phone-flip"></i>
</div>
<div class="contact-right">
<h3>Get in Touch</h3>
<p>Ut felis eros, vehicula eu magna nec, laoreet blandit nisi. Fusce auctor erat ac sagittis mattis. Mauris tempus velit sem, sit amet imperdiet dolor placerat et.</p>
</div>
</div>
</div>
</div> <!-- .middle-links .wrapper ENDS -->
</section> <!-- .middle-links section ENDS -->
<div class="middle-bg-img">
<!-- NOTE TO DESIGNER: BANNER-IMAGE.JPG HAS A 20PX WIDE COLUMN OF DEAD PIXELS NOT CROPPED OUT ON THE LEFT SIDE. THIS IS PRESENT IN THE PDF AS WELL. can fix if need be. -->
<img src="./assets/banner-image.jpg" alt="A decorative tea kettle flanked by two matching potted plants resting upon a sunny window sill">
</div> <!-- middle-bg-image FULL BLEED IMG -->
<section class="founder"> <!-- .founder section STARTS -->
<div class="wrapper"> <!-- .founder .wrapper STARTS -->
<div class="founder-flex">
<div class="founder-img-container">
<img src="./assets/founder.jpg" alt="the founder of planted in a garden framed on either side by tall bushes with red flowers blooming">
</div>
<div class="founder-info">
<h4>Planted's founder</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas maiores ullam tempora corrupti, earum saepe nostrum neque assumenda id similique distinctio error laborum sunt molestiae, iste et, nisi atque exercitationem aliquam in! Numquam commodi doloribus harum! Alias in, soluta ex doloribus quis officia totam laudantium aliquam deleniti hic sapiente earum molestias iste repudiandae voluptas.</p>
<a href="#" class="button-link">Find Out More</a>
</div>
</div>
</div> <!-- .founder .wrapper ENDS -->
</section> <!-- .founder section ENDS -->
<section class="photo-gallery"> <!-- .photo-gallery section STARTS -->
<div class="wrapper"> <!-- .photo-gallery .wrapper STARTS -->
<ul class="photo-gallery-flex"> <!-- .photo-gallery-flex <ul> STARTS -->
<li>
<img src="./assets/gallery-image-1.jpg" alt="a greenhouse filled with a variety of large plants">
</li>
<li>
<img src="./assets/gallery-image-2.jpg" alt="top down view of succulents and cacti">
</li>
<li>
<img src="./assets/gallery-image-3.jpg" alt="many small and medium sized cacti">
</li>
</ul> <!-- .photo-gallery-flex <ul> ENDS -->
</div> <!-- .photo-gallery .wrapper ENDS -->
</section> <!-- .photo-gallery section ENDS -->
</main> <!-- main ENDS -->
<footer> <!-- footer STARTS -->
<p>Copyright © 2022 Juno College</p>
</footer> <!-- footer ENDS -->
</body>
</html>