-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
142 lines (131 loc) · 4.58 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Use My Tools</title>
<link rel="stylesheet" href="./CSS/index.css">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Permanent+Marker" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="./components/Menu/Menu.js" async></script>
<script src="./js/index.js" async></script>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5d4037">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<!-- Here is the Menu -->
<div class="top-bar">
<div class="heading">USE MY TOOLS</div>
<div class="menu">
<div class="menu-button">MENU</div>
<div class="menu-content menu-hidden slide-out-right">
<img src="./images/close.svg" alt="close" class="close-btn">
<ul>
<li><i class="fas fa-cog"></i><a href="index.html">Home</a></li>
<li><i class="fas fa-cog"></i><a href="https://mytools2019-7fu4k4gtf.now.sh/register">Sign Up</a></li>
<li><i class="fas fa-cog"></i><a href="https://mytools2019-7fu4k4gtf.now.sh/login">Log In</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<!-- Here is the Header -->
<header>
<div>
<h1>Use My Tools</h1>
</div>
<div>
<p>Share your tools without worry. </p>
</div>
<button><a href="https://mytools2019-7fu4k4gtf.now.sh/register">Sign Up</a> </button>
<a href="#features" class="more">Learn More</a>
</header>
<!-- Body Content -->
<div class="features" id="features">
<h2>Features</h2>
<p>Use My Tools allows you to lend your tools and make some cash while doing it. All you need to do is enter the
tools you want to lend out, and fill in a couple of details like the lending fee and the furthest distance you
want your tool to go. We will take care of the rest.</p>
</div>
<div class="how-it-works">
<h2> How it Works</h2>
<div class="how-body">
<div class="how-section">
<img src="./images/how_map.png" alt="map">
<div>
<h3>Find Your Tools</h3>
<p>Find tools close to you, or set a max distance that your tools can go.</p>
</div>
</div>
<div class="how-section">
<img src="./images/how_build.png" alt="">
<div>
<h3>Tools When You need</h3>
<p>In a pinch? Find the tools you need quickly and easily.</p>
</div>
</div>
<div class="how-section">
<img src="./images/how_box.png" alt="box">
<div>
<h3>Wonder No More</h3>
<p>No longer do you have to wonder where your tools are, or to whom you loaned them.</p>
</div>
</div>
<div class="how-section">
<img src="./images/how_house.png" alt="">
<div>
<h3>Meet Neighbors</h3>
<p>Join the tool share community and make friends with neighbors.</p>
</div>
</div>
<div class="how-section">
<img src="./images/how_post.png" alt="">
<div>
<h3>Post Tools Easily</h3>
<p>We make it easy for you to list what tools you want to loan out.</p>
</div>
</div>
<div class="how-section">
<img src="./images/how_locate.png" alt="">
<div>
<h3>Map Tool Locations</h3>
<p>See where your tools are.</p>
</div>
</div>
<div class="how-section">
<img src="./images/how_search.png" alt="">
<div>
<h3>Find Who Has your Tools</h3>
<p>Easily find who has the tools you want, or the tools you loaned.</p>
</div>
</div>
<div class="how-section">
<img src="./images/how_paid.png" alt="">
<div>
<h3>Get Paid</h3>
<p>Loan out your tools and get paid!</p>
</div>
</div>
</div>
</div>
<div class="cta">
<div class="cta-left">
<p>We already have <span id="get-api"></span> tools ready to be borrowed.
<br> Your neighbors are looking forward to working with you.
<br> Come join the tool share revolution!</p>
</div>
<div class="cta-right">
<button><a href="https://mytools2019-7fu4k4gtf.now.sh/register">Sign Up</a></button>
</div>
</div>
</div>
<footer>
Copyright 2019 - Use My Tools
</footer>
</body>
</html>