This repository has been archived by the owner on Jul 10, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
172 lines (159 loc) · 7.13 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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="referrer" content="origin">
<title>BasilLabs</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300|Roboto:300,400|Lato:100,300,400" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta property="og:title" content="Basil Labs">
<meta property="og:description" content="Empowering non-profits through technology to address the world's most important problems.">
<meta property="og:image" content="http://basiltech.org/assets/intro-image.png">
<meta property="og:url" content="http://basiltech.org">
<meta name="twitter:card" content="summary_large_image">
</head>
<body>
<div class="navbar">
<div class="navbar-content column">
<a href="#" class="logo-nav"><img src="assets/basil-logo.svg" class="logo" alt="Basil Labs"></a>
<div class="nav-menu desktop-nav">
<a href="#about" class="nav-item">About</a>
<a href="#team" class="nav-item">Team</a>
<a href="#our-work" class="nav-item">Our Work</a>
<a href="#contact" class="nav-item">Contact</a>
<a href="https://crazyloveministries.cloverdonations.com/go4/" class="button">Donate</a>
</div>
</div>
</div>
<div class="main">
<!-- hero -->
<div class="hero row">
<div class="hero-floating-box">
<div class="floating-box-content">
<h1 class="hero-title">Basil Technologies</h1>
<p class="hero-copy">Welcome to Basil Technologies – empowering nonprofits to shape a sustainable future.</p>
<button class="btn-dark">View our work</button>
</div>
</div>
</div>
<!-- introduction -->
<div class="intro row" id="about">
<div class="column intro-content">
<div class="intro-image"></div>
<div class="intro-text">
<h1>Meet Basil</h1>
<p>We are a 501(c)3 nonprofit organization that provides pro-bono consulting to influential organizations pioneering a healthier and more environmentally sustainable California. Our consultants are high achieving outliers from a broad range of industries and academic disciplines with an insatiable desire to serve.</p>
</div>
</div>
</div>
<!-- team -->
<div class="team row" id="team">
<div class="column team-content">
<div class="team-text">
<h1>Our Team</h1>
<p>The Basil team is comprised of developers, designers, and product managers from the world's leading technology companies.</p>
</div>
<div class="team-companies">
<div class="team-companies-row">
<img class="team-company-img" src="assets/company-logos/facebook.png"/>
<img class="team-company-img" src="assets/company-logos/google.png"/>
<img class="team-company-img" src="assets/company-logos/Airbnb.png"/>
<img class="team-company-img" src="assets/company-logos/dropbox.png"/>
</div>
<div class="team-companies-row">
<img class="team-company-img" src="assets/company-logos/Adobe.png"/>
<img class="team-company-img" src="assets/company-logos/Apple.png"/>
<img class="team-company-img" src="assets/company-logos/Salesforce.png"/>
</div>
</div>
</div>
</div>
<!-- highlights (what we do) -->
<div class="highlights row" id="our-work">
<div class="column highlights-content">
<h1>What We Do</h1>
<div class="highlights-all">
<div class="highlights-block">
<img src="assets/highlights-svgs/icon-mobile.svg"></img>
<h3>Mobile Apps</h3>
<p>We leverage the best in mobile technology, including React Native and more to deliver impactful apps to those on the ground.</p>
</div>
<div class="highlights-block">
<img src="assets/highlights-svgs/icon-websites.svg"></img>
<h3>Websites</h3>
<p>We help non-profits with branding, web development and marketing so that they can tell their message in the most impactful way.</p>
</div>
<div class="highlights-block">
<img src="assets/highlights-svgs/icon-consulting.svg"></img>
<h3>Consulting</h3>
<p>Many people are doing impactful and meaningful work accross the globe but have no idea what role technology can play, we can help with that.</p>
</div>
<div class="highlights-block">
<img src="assets/highlights-svgs/icon-hackathons.svg"></img>
<h3>Hackathons</h3>
<p>Have a huge problem you’re trying to solve? We can organize hackathons in your area of work to mobilize the industry's brightest to deliver prototypes in under a week.</p>
</div>
</div>
</div>
</div>
<!-- case studies -->
<div class="case-studies row">
<div class="column case-studies-content">
<div class="case-studies-content-area">
<div class="case-studies-text">
<h1>StoryShare</h1>
<p>Joshua Campaign approached us with a vision to help Christian churches to share Bible stories across language barriers. We created a tool that facilitates a shared reading experience in two languages with a single phone.</p>
<button class="btn-dark">View</button>
</div>
<div></div>
</div>
<div class="case-studies-image">
<img src="assets/case-study-1.png"></img>
</div>
</div>
</div>
<!-- contact -->
<div class="contact row" id="contact">
<div class="column contact-content">
<h1>Let's do something awesome together</h1>
<div class="contact-form">
<form action="https://formspree.io/hibasillabs@gmail.com" method="POST">
<div class="contact-info-row">
<input type="text" id="name" name="name" placeholder="Name">
<input type="email" id="email" name="email" placeholder="Email">
</div>
<textarea type="message" id="message" name="message" placeholder="Message"></textarea>
<input type="submit" value="Send">
</form>
</div>
<p>Or email us at</p>
<a href="mailto:hibasillabs@gmail.com">hibasillabs@gmail.com</a>
</div>
</div>
<!-- footer -->
<div class="footer row">
<div class="column footer-content">
<div class="footer-contact">
<div id="contact-us">Contact us</div>
<div>107 Sagamore St.</div>
<div>San Francisco, CA 94112</div>
<div class="social">
<a href="https://www.facebook.com/basiltech/"><img class="social-icon" src="assets/social-svgs/Facebook.svg"></img></a>
<a href="https://twitter.com/BasilLabs"><img class="social-icon" src="assets/social-svgs/Twitter.svg"></img></a>
<a href="https://www.instagram.com/basiltech"><img class="social-icon" src="assets/social-svgs/Instagram.svg"></img></a>
</div>
</div>
<div class="footer-buttons">
<a href="https://crazyloveministries.cloverdonations.com/go4/" class="button btn-primary">Donate</a>
<a href="mailto:hibasillabs@gmail.com" class="button btn-secondary">Join Us</a>
</div>
</div>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>