-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
143 lines (135 loc) · 4.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Freecycling!</title>
<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=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- navbar -->
<nav>
<img src="logo.svg" width="150" alt="website logo" />
<ul id="navlinks">
<li><a href="#" id="home">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contacts</a></li>
</ul>
<!-- search bar -->
<form action="post" id="searchbar">
<img src="magnifying-glass-solid.svg" width="20" alt="search icon" />
<input type="text" placeholder="Search..." />
</form>
<!-- register button -->
<div id="trigger-modal">
<div class="register-button" onclick="toggleModal()">Register</div>
</div>
</nav>
<main>
<!-- Hero section -->
<section id="hero">
<h1>Your Trash Is Our Treasure</h1>
<div class="button-container">
<div id="explore-now" class="hero-button">
<div class="main-button">Explore Now</div>
<div class="cornered"></div>
</div>
<div id="about-us" class="hero-button">
<div class="main-button">About Us</div>
<div class="cornered"></div>
</div>
</div>
</section>
<section id="content">
<div>
<h2>Environmental Expression Focus</h2>
<p>We are a leading global expert</p>
</div>
<ul id="svg">
<li class="svg-item">
<img src="gift-solid.svg" width=70" alt="gift" />
<p>Unwanted item</p>
</li>
<li class="svg-item">
<img src="searchengin.svg" width="70" alt="searching icon" />
<p>Search on our site</p>
</li>
<li class="svg-item">
<img src="bag-shopping-solid.svg" width="70" alt="shopping bag" />
<p>Get directed to website</p>
</li>
<li class="svg-item">
<img src="recycle-solid.svg" width="70" alt="recycling" />
<p>Keep the cycle going</p>
</li>
</ul>
</section>
</main>
<!-- registration form -->
<article id="modal">
<div class="screen-overlay"></div>
<div id="form-ct">
<button id="close" onclick="toggleModal()">✖</button>
<form action="#" id="form-sections">
<div id="user-details">
<!-- Given Name -->
<div class="form-group">
<label for="given-name">Given Name</label>
<input type="text" name="given-name" id="given-name" placeholder="name" />
</div>
<!-- Surname -->
<div class="form-group">
<label for="surname">Surname</label>
<input type="text" name="surname" id="surname" placeholder="surname" />
</div>
<!-- Username -->
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" id="username" placeholder="username" />
</div>
<!-- password -->
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password" placeholder="password" />
</div>
</div>
<div id="address-details">
<!-- home address -->
<div class="form-group">
<label for="home-address">Home Address</label>
<input type="text" name="home-address" id="home-address" placeholder="address1" />
</div>
<!-- work address -->
<div class="form-group">
<label for="work-address">Work Address</label>
<input type="email" name="work-address" id="work-address" placeholder="address2" />
</div>
</div>
<div id="contact-details">
<!-- phone number -->
<div class="form-group">
<label for="mobile-num">Mobile Number</label>
<input type="number" name="mobile-num" id="mobile-num" placeholder="e.g. 02041462964" />
</div>
<!-- email -->
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="e.g. lho445@aucklanduni.ac.nz" />
</div>
</div>
<input type="submit" value="Submit" id="submit" />
</form>
</div>
</article>
<script src="script.js"></script>
</body>
</html>