-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
206 lines (191 loc) · 14 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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="referrer" content="origin">
<title>BasilTech</title>
<meta name="description" content="Empowering nonprofits to shape a sustainable future.">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<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">
<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">
<meta name="google-site-verification" content="LE1tnFy1b-XJdZGbAl8ju8b_QSJB9EgKncHREeUCscc" />
</head>
<body>
<div class="loader">
<svg class="basil-logo-white" width="85px" height="31px" viewBox="0 0 85 31">
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="navbar" transform="translate(-60.000000, -21.000000)" fill="#ffffff">
<g id="basil-logo" transform="translate(60.000000, 21.000000)">
<g id="Group-3" transform="translate(0.000000, 0.066667)">
<path d="M21.5755926,10.0664074 C19.3426296,8.67418519 17.0078148,7.6627037 14.6254074,7.05362963 C14.698,5.86788889 14.8911481,4.86196296 15.0872593,4.10196296 C15.1637407,3.80474074 15.4520741,3.61362963 15.7557778,3.65825926 C16.5467037,3.77511111 17.570963,3.99325926 18.7155926,4.4002963 C22.2396667,5.65325926 25.1654074,8.00437037 27.4117037,11.3882593 C29.1741111,14.044 30.188,16.8382593 30.4398519,19.7225185 C28.9011481,16.5093704 26.2239259,12.9638148 21.5755926,10.0664074 Z M23.8755926,27.5191852 C20.7544815,27.626037 16.870963,26.9443704 12.6824444,24.3332593 C5.7467037,20.0097407 3.99133333,14.0777037 3.55040741,11.2032593 C3.50522222,10.9091852 3.68225926,10.6275185 3.96633333,10.5388148 C5.50485185,10.0571481 8.07688889,9.52251852 11.2587407,9.88881481 C11.5783704,13.3127037 12.7837407,16.6197407 14.8472593,19.7280741 C17.610037,23.8901111 20.9217037,26.2199259 23.8755926,27.5191852 Z M28.7991111,25.4838148 C28.1102222,25.3558519 27.2828148,25.1534444 26.3804074,24.8325185 C22.8563333,23.5797407 19.9305926,21.2284444 17.6842963,17.8447407 C16.1592963,15.5467778 15.1911481,13.1306667 14.7983704,10.6464074 C16.4968889,11.1797407 18.1657778,11.9541852 19.7739259,12.9565926 C26.2618889,17.0006667 28.2135556,22.4786296 28.7991111,25.4838148 Z M32.0713333,28.6543704 C32.4467037,28.2693704 32.7318889,27.8080741 32.910963,27.3008519 C33.7665185,24.8799259 35.5972593,17.5623333 30.2489259,9.50492593 C23.8076296,-0.199333333 14.380037,0.103444444 13.9881852,0.12362963 C13.3537407,0.149 12.7863333,0.525481481 12.5161481,1.09992593 L12.5157778,1.10066667 C12.4037407,1.33955556 11.4917037,3.36159259 11.2381852,6.46159259 C5.43188889,5.90659259 1.39614815,7.8377037 0.934666667,8.07085185 L0.933925926,8.07122222 C0.367814815,8.35751852 0.008,8.93511111 0.000222222222,9.56937037 L0.000222222222,9.57011111 C-0.00496296296,10.0106667 -0.00403703704,20.4382593 10.8807778,27.2232593 C14.8220741,29.6802963 18.9928148,30.926037 23.2770741,30.926037 C26.8324444,30.926037 29.5076296,30.059 30.7626296,29.5547407 C31.2348519,29.3651111 31.6604074,29.076037 32.0155926,28.7115926 L32.0713333,28.6543704 Z" id="Fill-1"></path>
</g>
<path d="M44.2952222,20.5018148 L46.2105926,20.5018148 C47.8568889,20.5018148 48.5591111,21.0560741 48.5591111,22.3551481 L48.5591111,22.4379259 C48.5591111,23.7164444 47.8654074,24.312 46.3757778,24.312 L44.2952222,24.312 L44.2952222,20.5018148 Z M48.1265185,16.2510741 C48.1265185,17.4666296 47.5548519,17.939963 46.0874444,17.939963 L44.2952222,17.939963 L44.2952222,14.5829259 L46.0661481,14.5829259 C47.5102222,14.5829259 48.1265185,15.0571852 48.1265185,16.1688519 L48.1265185,16.2510741 Z M49.8126296,19.1260741 C51.0635556,18.5536667 51.7194815,17.4862593 51.7194815,16.0038519 L51.7194815,15.9212593 C51.7194815,14.0762593 50.8354074,11.877 46.6235556,11.877 L40.620037,11.877 L40.620037,27.0388519 L46.8917037,27.0388519 C50.4139259,27.0388519 52.275963,25.5405185 52.275963,22.7058889 L52.275963,22.6231111 C52.275963,20.834963 51.4481852,19.6614444 49.8126296,19.1260741 Z" id="Fill-4"></path>
<polygon id="Fill-6" points="76.1942593 27.0388889 79.5809259 27.0388889 79.5809259 15.8364815 76.1942593 15.8364815"></polygon>
<polygon id="Fill-8" points="81.572037 27.0388889 84.9587037 27.0388889 84.9587037 11.46 81.572037 11.46"></polygon>
<path d="M70.2645556,19.9216667 C68.6458519,19.6874074 68.361037,19.4224074 68.361037,18.9527778 C68.361037,18.3946296 68.8656667,18.047963 69.6784444,18.047963 C70.5414074,18.047963 70.9697407,18.3496296 71.1382593,19.0698148 L74.3123333,19.0698148 C74.0430741,16.7611111 72.4784444,15.5890741 69.6580741,15.5890741 C67.4293704,15.5890741 65.1804815,16.692963 65.1804815,19.1592593 C65.1804815,21.3290741 66.2686296,22.2627778 69.3386296,22.7266667 C71.0262222,22.9738889 71.346037,23.2944444 71.346037,23.7988889 C71.346037,24.037963 71.346037,24.7657407 69.8641852,24.7657407 C68.6564074,24.7657407 68.3084444,24.2696296 68.1906667,23.5192593 L64.9802963,23.5192593 C65.1145556,25.9003704 66.8971481,27.2657407 69.8845556,27.2657407 C72.9004815,27.2657407 74.6301111,25.8966667 74.6301111,23.51 C74.6301111,21.0385185 73.0297407,20.322963 70.2645556,19.9216667" id="Fill-9"></path>
<path d="M60.2508148,23.0566111 C60.2508148,24.0790185 59.398037,24.7656852 58.1285926,24.7656852 C57.2274815,24.7656852 56.7704444,24.3988333 56.7704444,23.6749444 C56.7704444,23.0236481 57.0715556,22.3577222 59.3041481,22.3577222 L60.2508148,22.3577222 L60.2508148,23.0566111 Z M58.8919259,15.5892037 C55.8656296,15.5892037 54.0258148,16.9992037 53.8391481,19.4579074 L57.0897037,19.4579074 C57.226,18.5943889 57.7537778,18.1712407 58.7061852,18.1712407 C59.8321111,18.1712407 60.2508148,18.6512407 60.2508148,19.942537 L60.2508148,20.1669815 L59.2422963,20.1669815 C54.433963,20.1669815 53.4247037,22.1642037 53.4247037,23.8397593 C53.4247037,25.9849444 54.8519259,27.2656852 57.2422963,27.2656852 C58.5404444,27.2656852 59.5437778,26.8866111 60.2915556,26.1095741 L60.2915556,27.0388333 L63.6163704,27.0388333 L63.6163704,19.7982778 C63.6163704,17.0445741 61.9824815,15.5892037 58.8919259,15.5892037 Z" id="Fill-10"></path>
<polygon id="Fill-11" points="76.1942593 14.412037 79.5809259 14.412037 79.5809259 11.46 76.1942593 11.46"></polygon>
</g>
</g>
</g>
</svg>
<div class="loadbar">
</div>
<div class="loadbar-bg"></div>
</div>
<a href="#maincontent" class="skipnav">Skip to main content</a>
<main itemscope itemtype="http://schema.org/LocalBusiness" role="main" class="main" id="maincontent">
<!-- navbar -->
<nav class="navbar" role="navigation">
<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 active">About</a>
<a href="#team" class="nav-item">Team</a>
<a href="#our-work" class="nav-item">Our Work</a>
<a href="#contact-us" class="nav-item">Contact</a>
<a href="https://crazyloveministries.cloverdonations.com/go4/" class="button">Donate</a>
</div>
</div>
</nav>
<!-- hero -->
<div class="hero row">
<div class="hero-floating-box">
<div class="floating-box-content">
<h1 itemprop="name" class="hero-title">Basil Technologies</h1>
<p class="hero-copy">Welcome to Basil Technologies – empowering nonprofits to shape a sustainable future.</p>
<a href="#our-work" class="nav-item"><button class="btn-dark">View our work</button></a>
</div>
</div>
</div>
<!-- fixed svg background -->
<svg class="morphblob" width="100vw" height="100vh" viewBox="0 0 832 448">
<g id="blob" stroke="none" stroke-width="1" fill="#F2F2F7" fill-rule="evenodd">
<path d="M82.3125163,136.904969 C-84.4024933,338.95148 25.7539357,438.00277 202.749483,447.640024 C379.74503,457.277278 492.268482,270.209901 646.499982,270.209901 C800.731482,270.209901 865.875405,133.406193 814.941434,65.5627367 C764.007464,-2.28071919 249.027526,-65.141543 82.3125163,136.904969 Z" id="blob-path" fill="#F2F2F7"></path>
</g>
</svg>
<!-- 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" alt="Facebook" />
<img class="team-company-img" src="assets/company-logos/google.png" alt="Google" />
<img class="team-company-img" src="assets/company-logos/Airbnb.png" alt="Airbnb" />
<img class="team-company-img" src="assets/company-logos/dropbox.png" alt="Dropbox" />
</div>
<div class="team-companies-row">
<img class="team-company-img" src="assets/company-logos/Adobe.png" alt="Adobe" />
<img class="team-company-img" src="assets/company-logos/Apple.png" alt="Apple" />
<img class="team-company-img" src="assets/company-logos/Salesforce.png" alt="Salesforce" />
</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" alt="" />
<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" alt="" />
<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" alt="" />
<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" alt="" />
<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-2.png" alt="" />
</div>
</div>
</div>
<!-- contact -->
<div class="contact row" id="contact-us">
<div class="column contact-content">
<h1>Let's do something awesome together</h1>
<div class="contact-form">
<form action="https://formspree.io/[email protected]" 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:[email protected]"><span itemprop="email">[email protected]</span></a>
</div>
</div>
</main>
<!-- footer -->
<footer class="footer row">
<div class="column footer-content">
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress" class="footer-contact">
<div id="contact-us">Contact us</div>
<div itemprop="streetAddress">107 Sagamore St.</div>
<div><span itemprop="addressLocality">San Francisco</span>, <span itemprop="addressRegion">CA</span> <span itemprop="postalCode">94112</span></div>
<div class="social">
<a href="https://www.facebook.com/basiltech/"><img class="social-icon" src="assets/social-svgs/Facebook.svg" alt="Facebook" /></a>
<a href="https://twitter.com/BasilLabs"><img class="social-icon" src="assets/social-svgs/Twitter.svg" alt=Twitter" /></a>
<a href="https://www.instagram.com/basillabs"><img class="social-icon" src="assets/social-svgs/Instagram.svg" /></a>
</div>
</div>
<div class="footer-buttons">
<a href="https://crazyloveministries.cloverdonations.com/go4/" class="button btn-primary">Donate</a>
<a href="mailto:[email protected]" class="button btn-secondary">Join Us</a>
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="anime.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>