From f802e279f3f1d302d4e597080e35b68731f95023 Mon Sep 17 00:00:00 2001 From: Ryan Scherf Date: Fri, 3 Mar 2017 11:14:30 -0600 Subject: [PATCH 1/3] Newer How it Works section. --- css/global.css | 46 ++++++++++++++++++++++++++ img/icon-analysis.svg | 18 +++++++++++ img/icon-buildings.svg | 37 +++++++++++++++++++++ img/icon-engineering.svg | 15 +++++++++ img/icon-finance.svg | 15 +++++++++ img/icon-hardhat.svg | 17 ++++++++++ img/icon-repay.svg | 16 +++++++++ img/icon-solar.svg | 15 +++++++++ index.html | 70 ++++++++++++++++++++++++++++++++++++++++ scss/_typography.scss | 3 +- scss/global.scss | 58 +++++++++++++++++++++++++++++++++ 11 files changed, 309 insertions(+), 1 deletion(-) create mode 100644 img/icon-analysis.svg create mode 100644 img/icon-buildings.svg create mode 100644 img/icon-engineering.svg create mode 100644 img/icon-finance.svg create mode 100644 img/icon-hardhat.svg create mode 100644 img/icon-repay.svg create mode 100644 img/icon-solar.svg diff --git a/css/global.css b/css/global.css index d819cec..cb846f3 100644 --- a/css/global.css +++ b/css/global.css @@ -518,6 +518,10 @@ h2 { h3 { font-weight: 700; } +h5 { + font-weight: 500; + font-size: 1.125; } + h6 { text-transform: uppercase; letter-spacing: 0.5em; @@ -845,6 +849,48 @@ section.press { -o-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); } +section.how { + position: relative; + margin-top: 50px; + margin-bottom: 50px; } + section.how h6 { + text-align: center; + margin-bottom: 40px; } + section.how .step { + margin: 10px; + padding: 10px; + text-align: center; + position: relative; } + section.how .step:before { + content: ""; + width: 100%; + border-top: 2px solid #D8D8D8; + position: absolute; + top: 60px; + left: 0; + opacity: 0.5; } + section.how .step span.icon { + display: block; + margin: 0 auto; + border: 20px solid white; + position: relative; + background: white; + width: 60px; + height: 60px; } + section.how .step h5 { + padding-bottom: 10px; } + section.how .step h5 span { + background: #F1F1F1; + display: inline-block; + padding: 3.33333px 10px; + border-radius: 5px; + font-weight: 800; + color: #3F3F3F; + text-transform: uppercase; + font-size: 0.8em; + margin-bottom: 10px; } + section.how .step p { + opacity: 0.7; } section.answers { padding: 60px 0; } section.answers h6 { diff --git a/img/icon-analysis.svg b/img/icon-analysis.svg new file mode 100644 index 0000000..82a1d41 --- /dev/null +++ b/img/icon-analysis.svg @@ -0,0 +1,18 @@ + + + + icon-analysis + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/icon-buildings.svg b/img/icon-buildings.svg new file mode 100644 index 0000000..7763a00 --- /dev/null +++ b/img/icon-buildings.svg @@ -0,0 +1,37 @@ + + + + icon-buildings + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/icon-engineering.svg b/img/icon-engineering.svg new file mode 100644 index 0000000..ef2f919 --- /dev/null +++ b/img/icon-engineering.svg @@ -0,0 +1,15 @@ + + + + icon-engineering + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/img/icon-finance.svg b/img/icon-finance.svg new file mode 100644 index 0000000..0eeee89 --- /dev/null +++ b/img/icon-finance.svg @@ -0,0 +1,15 @@ + + + + icon-finance + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/img/icon-hardhat.svg b/img/icon-hardhat.svg new file mode 100644 index 0000000..a63ae67 --- /dev/null +++ b/img/icon-hardhat.svg @@ -0,0 +1,17 @@ + + + + icon-hardhat + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/img/icon-repay.svg b/img/icon-repay.svg new file mode 100644 index 0000000..43fae2a --- /dev/null +++ b/img/icon-repay.svg @@ -0,0 +1,16 @@ + + + + icon-repay + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/img/icon-solar.svg b/img/icon-solar.svg new file mode 100644 index 0000000..84e0336 --- /dev/null +++ b/img/icon-solar.svg @@ -0,0 +1,15 @@ + + + + icon-solar + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 122a0e8..b27a72d 100644 --- a/index.html +++ b/index.html @@ -156,6 +156,76 @@ +
+
How It Works
+
+ +
+
+ +
Step 1
Aggregate Buildings
+

We work with community leaders and institutions to assemble 4 or more non-profits, houses of worship, schools, small businesses or multi-family residences in financially underserved communities into a “Bloc” of potential retrofits. +

+
+
+ +
+
+ +
Step 2
Financial Analysis
+

We perform a rigorous analysis of the financial strength of each customer, to establish the likelihood that customers will pay their energy bill over time. +

+
+
+ +
+
+ +
Step 3
Engineering Analysis
+

Our experienced engineers perform a comprehensive energy audit of each property to determine the correct mix of high efficiency technology that will reduce each customer's energy consumption. +

+
+
+ +
+
+ +
Step 4
Solar and Energy Efficiency Projects
+

Each "Bloc" spreads out the risk of default, creates pricing discounts, and increases transactional size--improving the economic feasibility of all projects. +

+
+
+ +
+
+ +
Step 5
Financing
+

Investors concerned about climate change and job creation can invest in clean energy projects on our online platform. +

+
+
+ +
+
+ +
Step 6
Repayment
+

Investors who provide upfront project financing will be repaid out of the energy savings generated by each solar and energy efficiency project. +

+
+
+ +
+
+ +
Step 7
Job Creation
+

We create jobs for local underemployed workers from vulnerable populations. However, each worker must graduate from a rigorous, third party certified green jobs training program at the top of their class. +

+
+
+ +
+
+
How it Works
diff --git a/scss/_typography.scss b/scss/_typography.scss index 4564af1..41e634a 100644 --- a/scss/_typography.scss +++ b/scss/_typography.scss @@ -38,7 +38,8 @@ h4 { } h5 { - + font-weight: 500; + font-size: 1.125; } h6 { diff --git a/scss/global.scss b/scss/global.scss index e5291dd..6319cda 100644 --- a/scss/global.scss +++ b/scss/global.scss @@ -390,6 +390,64 @@ section { } + &.how { + position: relative; + margin-top: $padding*5; + margin-bottom: $padding*5; + + h6 { + text-align: center; + margin-bottom: $padding*4; + } + + .step { + margin: $padding; + padding: $padding; + text-align: center; + position: relative; + + &:before { + content: ""; + width: 100%; + border-top: 2px solid $separator; + position: absolute; + top: $padding*6; + left: 0; + opacity: 0.5; + } + + span.icon { + display: block; + margin: 0 auto; + border: 20px solid white; + position: relative; + background: white; + width: 60px; + height: 60px; + } + + h5 { + padding-bottom: $padding; + + span { + background: $light-gray; + display: inline-block; + padding: $padding/3 $padding; + border-radius: $radius; + font-weight: 800; + color: $gray; + text-transform: uppercase; + font-size: 0.8em; + margin-bottom: $padding; + } + } + + p { + opacity: 0.7; + } + } + } + &.answers { padding: $padding*6 0; -- GitLab From 0d044371074485f2b88c5038a67d9cb185d3a1c3 Mon Sep 17 00:00:00 2001 From: Ryan Scherf Date: Fri, 3 Mar 2017 11:14:49 -0600 Subject: [PATCH 2/3] Hide old HIW. --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index b27a72d..d7ae4e6 100644 --- a/index.html +++ b/index.html @@ -226,7 +226,7 @@
-
+ -
+
How It Works
diff --git a/jobs.html b/jobs.html index 160828f..ea5bfdd 100644 --- a/jobs.html +++ b/jobs.html @@ -49,7 +49,7 @@
-

BlocPower connects impact investors to energy efficiency projects in churches, synagogues, non-profits, and small businesses in underserved communities. Our business development team uses our BlocPower Analytics mapping application to identify potential green retrofit projects in in a region. Our mechanical engineers then perform an energy audit using a combination of sensors, onsite measurements, and BlocPower's digital Engineering Audit application to recommend an integrated and holistic upgrade to a building's energy systems. BlocPower's finance team then analyzes each building owner's financial data and energy bills to structure a loan that finances the retrofit. Once a retrofit is agreed upon, our operations team manages the engineering of the retrofit. At every point in BlocPower’s value chain, we seek out and hire underemployed workers from vulnerable communities. +

BlocPower connects impact investors to energy efficiency projects in churches, synagogues, non-profits, and small businesses in underserved communities. Our business development team uses our BlocPower Analytics mapping application to identify potential green retrofit projects in a region. Our mechanical engineers then perform an energy audit using a combination of sensors, onsite measurements, and BlocPower's digital Engineering Audit application to recommend an integrated and holistic upgrade to a building's energy systems. BlocPower's finance team then analyzes each building owner's financial data and energy bills to structure a loan that finances the retrofit. Once a retrofit is agreed upon, our operations team manages the engineering of the retrofit. At every point in BlocPower's value chain, we seek out and hire underemployed workers from vulnerable communities.

-- GitLab