forked from edispoph/edispo-landing-page
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
151 lines (147 loc) · 7.64 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
---
layout: full
title: Home
permalink: /
---
<main class="">
<section class="pointer-events-none" style="background-image: url('{{site.baseurl}}/assets/images/plant-bg.jpeg'); background-size: cover; background-position: center; height: 900px;">
<div class="container h-100">
<div class="row h-100">
<section class="col-lg-7 d-flex flex-column justify-content-center">
<section class="d-flex position-relative d-inline-block">
<img src="assets/images/logo-gradient-banner-reverse.svg" class="img-fluid"/>
</section>
<h2 class="py-3 edispo-color-primary text-sm-center text-md-start">
<b>Innovation. Inclusion. E-Waste Management.</b> <br/>
<span class="edispo-regular-1 h4">We are the Philippine's first online <b>e-waste exchange</b></span>
</h2>
<!-- <button class="btn rounded-pill edispo-border-base-pos-2 edispo-bg-hard-contrast edispo-color-base w-50 py-4">SELL ON EDISPO
<div class="svg-container-icon-1 p-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g fill='var(--edispo-primary-neg)'>
<path d="M12 4c-.8.8-.8 2.1 0 2.8l3.2 3.2H4c-1.1 0-2 .9-2 2s.9 2 2 2h11.2L12 17.2c-.8.8-.8 2.1 0 2.8.8.8 2 .8 2.8 0l6.6-6.6c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4L14.8 4c-.7-.8-2-.8-2.8 0z""></path>
</g>
</svg>
</div>
</button> -->
</section>
<section class="col-lg-5 d-flex align-items-center justify-content-center">
<div class="position-relative" style="height: 370px;width:480px">
<img src="{{site.baseurl}}/assets/images/laptop-graphic-3.png" alt="Demonstration of the UI of eDispo's item listing page." height="auto" width="70%" class="position-absolute" style="transform: translate(-10%, 0%);"/>
<img src="{{site.baseurl}}/assets/images/laptop-graphic-2.png" alt="Demonstration of the UI of eDispo's listings page." height="auto" width="70%" class="position-absolute" style="transform: translate(54%, 42%);"/>
<img src="{{site.baseurl}}/assets/images/laptop-graphic-1.png" alt="Demonstration of the UI of eDispo's user profile page." height="auto" width="70%" class="position-absolute" style="transform: translate(24%, 100%);"/>
</div>
</section>
</div>
</div>
</section>
<!-- Partner logos -->
<!-- <section class="my-5">
<div class="container">
<div class="row mx-5 justify-content-center">
<section class="col-lg-2 col-md-4 py-4 px-5">
<img alt="Logo of the Department of Environment and Natural Resources of the Philippines" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Seal_of_the_Department_of_Environment_and_Natural_Resources.svg/1200px-Seal_of_the_Department_of_Environment_and_Natural_Resources.svg.png" class="img-fluid" />
</section>
</div>
</div>
</section> -->
<!-- What is Edispo -->
<section class="p-3 my-5">
<div class="container h-100 p-5 d-flex justify-content-center text-center flex-column" style="
border-image-slice:34% 33% 34% 33%;
border-image-width:20px 15px 20px 15px;
border-image-outset:0px 0px 0px 0px;
border-image-repeat:stretch stretch;
border-image-source:url('{{site.baseurl}}/assets/images/border-base-arrow-downwards.png');
border-style:solid;
">
<h1 class="edispo-bold-2 edispo-color-primary edispo-font-5">What is Edispo?</h1>
<p class="edispo-regular-2 edispo-color-primary edispo-font-2 py-3 h2">
<b>EDISPO</b> is an <b>online peer-to-peer marketplace</b> focused on <b>addressing</b> the growing amount of <b>e-waste in the Philippines</b>.
</p>
<p class="edispo-regular-2 edispo-color-primary edispo-font-2 py-3 h2">
<b>We enable individuals, businesses, and Micro, Small, and Medium Enterprises (MSMEs)</b> to dispose of, buy, sell, trade, and negotiate all kinds of electronic and electrical goods. Whether that be working, non-working, industrial volume, individual, and all other items that are classified as e-waste.
</p>
</div>
</section>
<!-- Problem Statement -->
<section id="problem-statement-" class="" style="background-image: url('{{site.baseurl}}/assets/images/green-wavy-bg.jpeg'); background-size: cover; background-position: center;">
<div class="container h-100 d-flex flex-column edispo-color-hard-contrast edispo-regular-2 edispo-font-2 py-5">
<section class="text-center my-3">
<span><small>Whether you're a business worth millions of pesos, or an ordinary person living an ordinary life...</small></span>
<h1 class="edispo-bold-1 edispo-font-5 mt-2">E-Waste has become a real problem</h1>
</section>
<p class="line-height-3">
A 2016 study states that <b>on average, one Filipino produces 2-5 kilograms of e-waste per year.</b>
While that may not sound like much, consider that there are approximately <b>67 million adult Filipinos today.</b>
That brings us to <span>335 MILLION KILOGRAMS of e-waste per year</span> thrown out by Filipinos.
</p><br/>
<p class="line-height-3">
Because of the quick pace of technology, most people no longer have their gadgets and appliances fixed, they prefer to <b>throw it away</b> and <b>purchase new items</b> instead.
</p><br/>
<p class="line-height-3">
This is why we're here. To give used gadgets and appliances a new lease on life, or at least find responsible ways of recycling and upcycling these items.
</p>
</div>
</section>
<!-- Our story -->
<section>
<section class="row">
<div class="col-sm-8 py-5">
<hr class="p-1 edispo-bg-base"/>
</div>
</section>
<section id="our-story-content-section" style="background-image: url('{{site.baseurl}}/assets/images/blurred-laptop-bg.jpeg');
background-repeat: no-repeat; background-position: left;">
<div class="container h-100">
<section class="row h-100">
<div class="col-md-6"></div>
<div class="col-md-6 h-100 d-flex align-items-center p-0">
<div class="card p-4 py-5 border-0 rounded-none rounded-md-xxl">
<h1 class="edispo-font-7">
<span class="edispo-color-contrast-neg edispo-regular-2">Our</span>
<span class="edispo-color-base edispo-bold-2">Story.</span>
</h1>
<p class="edispo-regular-1 edispo-font-2 mb-5 mt-2">
Whether it be broken phones, computers gone obsolete, televisions that are still the size of balikbayan boxes, or refrigerators and aircons that no longer keep their cool, E-waste is a growing problem in the Philippines and around the world, and the problem is only getting bigger every year. [...]
</p>
<a href="{{site.baseurl}}/about" class="edispo-color-base edispo-black-1 edispo-font-1">LEARN MORE ABOUT US.</a>
</div>
</div>
</section>
</div>
</section>
<section class="row">
<div class="col-sm-4"></div>
<div class="col-sm-8 py-5">
<hr class="p-1 edispo-bg-base"/>
</div>
</section>
</section>
<style>
#hero-title-text{
font-size: 6rem;
}
@media (min-width: 576px) {
#our-story-content-section {
height: 400px;
background-size: contain;
}
}
@media (min-width: 768px) {
#our-story-content-section {
height: 600px;
}
}
@media (min-width: 992px) {
#our-story-content-section {
background-size: 60%;
}
#hero-title-text{
font-size: 8rem;
}
}
@media (min-width: 1200px) {
}
</style>
</main>