talksik/ucharify_landing
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

changes to entire story flow

Browse Source
This commit is contained in:
Arjun Patel
2019-02-20 17:13:39 -08:00
parent 1ef107ca29
commit 7e30d64ba1
7 changed files with 51 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/images/grant_detail.png
Vendored
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

dist/images/grants_list.png
Vendored
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

dist/images/logo_green.png
Vendored
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

dist/images/logo_white.png
Vendored
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

dist/images/payment_history.png
Vendored
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

index.html
+46 -27
View File
@@ -5,6 +5,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="dist/images/logo_green.png">
<title>Ucharify</title> <title>Ucharify</title>
<link href="https://fonts.googleapis.com/css?family=Heebo:400,700|Playfair+Display:700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Heebo:400,700|Playfair+Display:700" rel="stylesheet">
<link rel="stylesheet" href="dist/css/style.css"> <link rel="stylesheet" href="dist/css/style.css">
@@ -14,6 +15,17 @@
<!-- Chart.js CDN --> <!-- Chart.js CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-133343343-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-133343343-1');
</script>
</head> </head>
<body class="is-boxed has-animations"> <body class="is-boxed has-animations">
@@ -24,7 +36,7 @@
<div class="brand header-brand"> <div class="brand header-brand">
<h1 class="m-0"> <h1 class="m-0">
<a href="#"> <a href="#">
<img class="header-logo-image" src="dist/images/logo.svg" alt="Logo"> <img class="header-logo-image logo" src="dist/images/logo_white.png" alt="Logo">
</a> </a>
</h1> </h1>
</div> </div>
@@ -39,8 +51,9 @@
<div class="hero-copy"> <div class="hero-copy">
<h1 class="hero-title mt-0">Donate where it really matters</h1> <h1 class="hero-title mt-0">Donate where it really matters</h1>
<p class="hero-paragraph">Our platform connects donors with small charities to maximize <p class="hero-paragraph">Our platform connects donors with small charities to maximize
impact over a the impact from every dollar. Reach out to more places and lives, see the impact every
longer period of time. Reach out to more places and lives, see the impact every day.</p> day.
</p>
<div class="hero-cta"> <div class="hero-cta">
<!-- <a class="button button-primary button-wide-mobile" href="#">Early access</a> --> <!-- <a class="button button-primary button-wide-mobile" href="#">Early access</a> -->
</div> </div>
@@ -79,8 +92,8 @@
</div> </div>
<div class="feature-content"> <div class="feature-content">
<h4 class="feature-title mt-0 mb-8">Value Matching</h4> <h4 class="feature-title mt-0 mb-8">Value Matching</h4>
<p class="text-sm mb-0">Focus on making an impact on things that you care about. <p class="text-sm mb-0">Focus on the people you care about most.
Trust only those Give to
organizations that understand you.</p> organizations that understand you.</p>
</div> </div>
</div> </div>
@@ -92,9 +105,9 @@
</div> </div>
<div class="feature-content"> <div class="feature-content">
<h4 class="feature-title mt-0 mb-8">Payments</h4> <h4 class="feature-title mt-0 mb-8">Payments</h4>
<p class="text-sm mb-0">We're ensuring that it gets in the right hands, and <p class="text-sm mb-0">We're ensuring that it safely reaches the right hands,
maximizing your tax and
deductions.</p> is easy to track.</p>
</div> </div>
</div> </div>
</div> </div>
@@ -107,8 +120,8 @@
</div> </div>
<div class="feature-content"> <div class="feature-content">
<h4 class="feature-title mt-0 mb-8">Trust and Engagement</h4> <h4 class="feature-title mt-0 mb-8">Trust and Engagement</h4>
<p class="text-sm mb-0">Track where your money is going and closely engage with <p class="text-sm mb-0">Build a relationship with your charities for long term
those organizations. impact.
</p> </p>
</div> </div>
</div> </div>
@@ -120,7 +133,7 @@
</div> </div>
<div class="feature-content"> <div class="feature-content">
<h4 class="feature-title mt-0 mb-8">Global Impact</h4> <h4 class="feature-title mt-0 mb-8">Global Impact</h4>
<p class="text-sm mb-0">We easily distribute your money so that you can reach <p class="text-sm mb-0">Easily distribute your money so that you can reach
more people.</p> more people.</p>
</div> </div>
</div> </div>
@@ -135,7 +148,8 @@
<div class="features-extended-header how-it-works-container text-center "> <div class="features-extended-header how-it-works-container text-center ">
<div class="container-sm"> <div class="container-sm">
<h2 class="section-title how-it-works-title mt-0">How it Works</h2> <h2 class="section-title how-it-works-title mt-0">How it Works</h2>
<p class="section-paragraph">One place to track and manage all of your grants, and maximize <p class="section-paragraph">Your one place to track and manage all of your grants, and
maximize
your impact globally.</p> your impact globally.</p>
</div> </div>
</div> </div>
@@ -143,7 +157,7 @@
<div class="container"> <div class="container">
<div class="feature-extended"> <div class="feature-extended">
<div class="feature-extended-image is-revealing"> <div class="feature-extended-image is-revealing">
<img src="dist/images/feature-extended-01.svg" alt="Feature extended 01"> <img src="dist/images/grants_list.png" alt="Feature extended 01">
</div> </div>
<div class="feature-extended-body is-revealing"> <div class="feature-extended-body is-revealing">
<h3 class="mt-0">Create a Grant.</h3> <h3 class="mt-0">Create a Grant.</h3>
@@ -157,10 +171,10 @@
</div> </div>
<div class="feature-extended"> <div class="feature-extended">
<div class="feature-extended-image is-revealing"> <div class="feature-extended-image is-revealing">
<img src="dist/images/feature-extended-02.svg" alt="Feature extended 02"> <img src="dist/images/grant_detail.png" alt="Feature extended 02">
</div> </div>
<div class="feature-extended-body is-revealing"> <div class="feature-extended-body is-revealing">
<h3 class="mt-0">Stay Engaged with Your Money.</h3> <h3 class="mt-0">Stay engaged with your orgs.</h3>
<p class="mb-0">Easily keep track of what your charities are doing with your money. <p class="mb-0">Easily keep track of what your charities are doing with your money.
Check out <b>live media updates</b> along with other <b>transparent metrics.</b> Check out <b>live media updates</b> along with other <b>transparent metrics.</b>
</p> </p>
@@ -168,7 +182,7 @@
</div> </div>
<div class="feature-extended"> <div class="feature-extended">
<div class="feature-extended-image is-revealing"> <div class="feature-extended-image is-revealing">
<img src="dist/images/feature-extended-03.svg" alt="Feature extended 03"> <img src="dist/images/payment_history.png" alt="Feature extended 03">
</div> </div>
<div class="feature-extended-body is-revealing"> <div class="feature-extended-body is-revealing">
<h3 class="mt-0">We keep payments simple.</h3> <h3 class="mt-0">We keep payments simple.</h3>
@@ -183,7 +197,7 @@
</div> </div>
</section> </section>
<section class="pricing section text-light"> <!-- <section class="pricing section text-light">
<div class="container"> <div class="container">
<div class="pricing-inner section-inner"> <div class="pricing-inner section-inner">
<h2 class="section-title mt-0 text-center">Simple, transarent pricing</h2> <h2 class="section-title mt-0 text-center">Simple, transarent pricing</h2>
@@ -281,7 +295,9 @@
</div> </div>
</div> </div>
</div> </div>
</section> </section> -->
<hr>
<section class="testimonials section"> <section class="testimonials section">
<div class="container"> <div class="container">
@@ -319,12 +335,14 @@
<img src="dist/images/5-stars.svg" alt="Rating"> <img src="dist/images/5-stars.svg" alt="Rating">
</div> </div>
<div class="testimonial-body"> <div class="testimonial-body">
<p class="text-sm m-0">I want everyone to feel the way I do when I give to <p class="text-sm m-0">The feeling from giving on a consistent basis is
someone, on a consistent basis. My family runs an animal shelter in something I want everyone to experience. My family runs a small animal
North India out shelter in
of our own pockets. I know that the millions of people giving to North India; I know that people will be more satisfied supporting
Redcross would be more satisfied supporting meaningful missions around hidden, but purposeful,
the world. missions around
the world. I'm merely a visionary bringing that awareness into the
world.
</p> </p>
</div> </div>
</div> </div>
@@ -370,7 +388,8 @@
<section class="cta section text-light"> <section class="cta section text-light">
<div class="container"> <div class="container">
<div class="cta-inner section-inner is-revealing"> <div class="cta-inner section-inner is-revealing">
<h3 class="section-title mt-0">Contact us with any inquiries.</h3> <h2 class="section-title mt-0">Contact us with any
inquiries.</h2>
<div class="cta-cta"> <div class="cta-cta">
<a class="button button-wide-mobile" href="#">[email protected]</a> <a class="button button-wide-mobile" href="#">[email protected]</a>
</div> </div>
@@ -379,7 +398,7 @@
</section> </section>
</main> </main>
<footer class="site-footer"> <!-- <footer class="site-footer">
<div class="container"> <div class="container">
<div class="site-footer-inner"> <div class="site-footer-inner">
<div class="site-footer-top"> <div class="site-footer-top">
@@ -504,7 +523,7 @@
</div> </div>
</div> </div>
</div> </div>
</footer> </footer> -->
</div> </div>
<script src="dist/js/main.min.js"></script> <script src="dist/js/main.min.js"></script>
src/scss/added.css
+5
View File
@@ -1,3 +1,8 @@
.logo {
height: 60px;
width: 60px
}
.chartsContainer { .chartsContainer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;