-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
115 lines (94 loc) · 3.53 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
<!DOCTYPE html>
<html lang="en"></html>
<head>
<meta charset="utf-8">
<title>Homegrown - webshop</title>
<link rel="stylesheet" href="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=Mali&family=Open+Sans:ital,wght@0,300;1,300&family=Passions+Conflict&family=Permanent+Marker&family=Roboto:ital,wght@0,400;0,500;1,400&family=Rubik+Dirt&display=swap" rel="stylesheet">
</head>
<body>
<div class="menu">
<img class="logo" src="img/logo_small.png"></a>
<ul>
<li><a href="#" class="hover-menu">about</a></li>
<li><a href="#" class="hover-menu">shop</a></li>
<li><a href="#" class="hover-menu">farm box</a></li>
</ul>
</div>
<!--This is the blue banner-->
<div class="banner">
<div class="banner-left"><h1>Say yes to fresh!</h1>
<div class="fresh">We deliver seasonal fruit & veggies directly from our homestead to your doorstep. There are different types of boxes to choose from. Some fresh eggs or homemade jam in your box? No problem! Customize your farm box however you want. </div>
<button class="button">Get started</button>
</div>
<div class="container">
<img src="img/subscribe_stretch.jpg" alt="Box with fresh veggies" class="box">
<div class="overlay">
<div class="text">Yes to fresh!</div>
</div>
</div>
</div>
<!--This is the white body-->
<h2>Our seasonal produce</h1>
<div class="content">
<div class="seasonal">
<img src="img/carrots.jpg" alt="Carrots" class="tiles" style="width:100%">
<div class="middle">
<div class="text">Carrots</div>
</div>
</div>
<div class="seasonal">
<img src="img/garlic.jpg" alt="Garlic" class="tiles" style="width:100%">
<div class="middle">
<div class="text">Garlic</div>
</div>
</div>
<div class="seasonal">
<img src="img/onions.jpg" alt="Onions" class="tiles" style="width:100%">
<div class="middle">
<div class="text">Onions</div>
</div>
</div>
<div class="seasonal">
<img src="img/pumpkins.jpg" alt="Pumpkins" class="tiles" style="width:100%">
<div class="middle">
<div class="text">Pumpkins</div>
</div>
</div>
<div class="seasonal">
<img src="img/tomatos.jpg" alt="Tomatoes" class="tiles" style="width:100%">
<div class="middle">
<div class="text">Tomatoes</div>
</div>
</div>
<div class="seasonal">
<img src="img/pepper.jpg" alt="Peppers" class="tiles" style="width:100%">
<div class="middle">
<div class="text">Peppers</div>
</div>
</div>
</div>
</div>
<div class="testimonial">
<div class="quote"><em>"Food may not be the answer to world peace, but it's a start."</div>
<div class="author"><p><strong>- Anthony Bourdain -</strong></p></div>
</div>
<div class="modal-container">
<div class="modal">
<div class="calltext">
<div class="call">Support your local!</div>
<div class="call-explainer">The support your local fund is a global initiative from the Farmers are Fabulous Foundation. By donating to the fund you support the local artisans in your region.</div>
</div>
<button class="button2"><a href="#">Donate</a></button>
</div>
</div>
<div class="footer">
<div class="copyright">Copyright © The Odin Project 2021</div>
</div>
</div>
</body>
</html>
</body>
</html>