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

adding in new logo and word changing for tagline

Browse Source
This commit is contained in:
talksik
2019-04-16 17:26:37 -07:00
parent 9cf9a3a47c
commit cb0b822e69
7 changed files with 1685 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/css/style.css
Vendored
+1561 -2
View File
File diff suppressed because one or more lines are too long
dist/images/color_logo.png
Vendored
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

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

Before

Width:  |  Height:  |  Size: 6.7 KiB

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

Before

Width:  |  Height:  |  Size: 6.4 KiB

index.html
+25 -25
View File
@@ -4,14 +4,14 @@
<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" />
<title>Ucharify</title> <title>Charify</title>
<link <link
href="https://fonts.googleapis.com/css?family=Lato:400,400i|PT+Serif:700" href="https://fonts.googleapis.com/css?family=Lato:400,400i|PT+Serif:700"
rel="stylesheet" rel="stylesheet"
/> />
<link rel="stylesheet" href="dist/css/style.css" /> <link rel="stylesheet" href="dist/css/style.css" />
<link rel="stylesheet" href="src/scss/added.css" /> <link rel="stylesheet" href="src/scss/added.css" />
<link rel="icon" href="./dist/images/logo_greens.png" /> <link rel="icon" href="./dist/images/color_logo.png" />
<!-- Material icons --> <!-- Material icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"> rel="stylesheet">
@@ -37,9 +37,9 @@
<header class="site-header"> <header class="site-header">
<div class="container"> <div class="container">
<div class="site-header-inner"> <div class="site-header-inner">
<div class="brand header-brand"> <ul class="brand-head header-links list-reset m-0">
<h1 class="m-0"> <li>
<a href="#">
<!-- <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> <!-- <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<title>Evelyn</title> <title>Evelyn</title>
<defs> <defs>
@@ -50,23 +50,26 @@
</defs> </defs>
<path d="M16 32C7.163 32 0 24.837 0 16S7.163 0 16 0s16 7.163 16 16-7.163 16-16 16zm0-10a6 6 0 1 0 0-12 6 6 0 0 0 0 12z" fill="url(#logo-gradient)" fill-rule="evenodd"/> <path d="M16 32C7.163 32 0 24.837 0 16S7.163 0 16 0s16 7.163 16 16-7.163 16-16 16zm0-10a6 6 0 1 0 0-12 6 6 0 0 0 0 12z" fill="url(#logo-gradient)" fill-rule="evenodd"/>
</svg> --> </svg> -->
<img <img
class="logo" class="logo"
src="./dist/images/logo_white.png" src="./dist/images/color_logo.png"
/> />
</a>
</h1> </li>
</div> <!-- <li class="brand-text">harify</li> -->
<ul class="header-links list-reset m-0"> </ul>
<li><a id="login" href="#">Login</a></li>
<ul class="header-links list-reset m-0">
<li><a id="login" href="thecharify.com/login/">Login</a></li>
<li> <li>
<a <a
id="signup" id="signup"
class="button button-sm button-shadow" class="button button-sm button-shadow"
href="#" href="thecharify.com/login/"
>Signup</a >Signup</a
> >
</li> </li>
<li><a id="charity-login" class="button button-sm button-shadow" href="http://thecharify.com/org/login">Charity?</a></li>
</ul> </ul>
</div> </div>
</div> </div>
@@ -77,17 +80,14 @@
<div class="container-sm"> <div class="container-sm">
<div class="hero-inner"> <div class="hero-inner">
<h1 class="hero-title h2-mobile mt-0 is-revealing"> <h1 class="hero-title h2-mobile mt-0 is-revealing">
Give with peace of mind Personalized impact at your fingertips
</h1> </h1>
<p class="hero-paragraph is-revealing"> <p class="hero-paragraph is-revealing">
Ucharify connects donors with small charities, Charify lets you make your mark with <b>small, engaging, and trustworthy charities.</b> Maximize impact with charify bundles.
<b>maximizing the impact</b> of every dollar.
Reach out to more places and lives, see the
impact every day.
</p> </p>
<p class="join-paragraph hero-cta is-revealing"> <p class="join-paragraph hero-cta is-revealing">
Signup below for updates on our progress! Signup below to follow our mission!
</p> </p>
<form id="email-form" class="hero-cta is-revealing"> <form id="email-form" class="hero-cta is-revealing">
<input <input
@@ -477,7 +477,7 @@
<div class="testimonial-inner"> <div class="testimonial-inner">
<div class="testimonial-main mb-32"> <div class="testimonial-main mb-32">
<div class="testimonial-body"> <div class="testimonial-body">
<p class="text-sm m-0">Having started a charity myself, I understand the challenges small organizations face when raising capital. I want ucharify to solve that gap and serve as an opportunity for charities to get a spotlight, scale, and maximize their potential impacts. Social entrepreneurs can change the world, and I hope ucharify can help make that happen. <p class="text-sm m-0">Having started a charity myself, I understand the challenges small organizations face when raising capital. I want charify to solve that gap and serve as an opportunity for charities to get a spotlight, scale, and maximize their potential impacts. Social entrepreneurs can change the world, and I hope charify can help make that happen.
</p> </p>
</div> </div>
</div> </div>
@@ -528,7 +528,7 @@
During my time in the US, I created a connection During my time in the US, I created a connection
between my home America by starting my own fundraiser for between my home America by starting my own fundraiser for
another Brazilian organization, this time dealing with another Brazilian organization, this time dealing with
children's cancer support/research. Ucharify supports the children's cancer support/research. Charify supports the
vision of a global donor network and enables the noblest vision of a global donor network and enables the noblest
patrons to make the highest impact with their contributions. patrons to make the highest impact with their contributions.
@@ -592,7 +592,7 @@
</svg> --> </svg> -->
<img <img
class="logo" class="logo"
src="./dist/images/logo_white.png" src="./dist/images/color_logo.png"
/> />
</a> </a>
</div> </div>
@@ -658,7 +658,7 @@
</li> </li>
</ul> </ul>
<div class="footer-copyright small-white-font"> <div class="footer-copyright small-white-font">
&copy; 2019 Ucharify, all rights reserved &copy; 2019 Charify, all rights reserved
</div> </div>
</div> </div>
</div> </div>
src/scss/added.css
+14 -1
View File
@@ -6,7 +6,20 @@
.logo { .logo {
height: 80px; height: 80px;
width: 80px; width: 90px;
}
.brand-head {
display: flex;
justify-content: center;
align-items: flex-end;
}
.brand-text {
color: gold;
margin-bottom: 5px;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 35px;
/* font-weight: 800; */
} }
#countdown { #countdown {
src/scss/components/_buttons.scss
+85 -72
View File
@@ -1,103 +1,116 @@
.button { .button {
display: inline-flex; display: inline-flex;
@include font-size(9, mobile, true, false, true); @include font-size(9, mobile, true, false, true);
@if ( get-font-size(9, desktop) != get-font-size(9, mobile) ) { @if (get-font-size(9, desktop) != get-font-size(9, mobile)) {
@include media( '>medium' ) { @include media('>medium') {
@include font-size(9, desktop, true, false, true); @include font-size(9, desktop, true, false, true);
} }
} }
@include font-weight(bold); @include font-weight(bold);
line-height: 16px; line-height: 16px;
text-transform: uppercase; text-transform: uppercase;
text-decoration: none !important; text-decoration: none !important;
background-color: color(bg, 1); background-color: color(bg, 1);
color: color(primary, 1) !important; color: color(primary, 1) !important;
border: none; border: none;
border-radius: 2px; border-radius: 2px;
cursor: pointer; cursor: pointer;
justify-content: center; justify-content: center;
padding: 16px 32px; padding: 16px 32px;
height: 48px; height: 48px;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
&:active { &:active {
outline: 0; outline: 0;
} }
&::before { &::before {
border-radius: 2px; border-radius: 2px;
} }
} }
.button-shadow { .button-shadow {
position: relative; position: relative;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
box-shadow: 0 8px 24px rgba(color(typography, 1), .12); box-shadow: 0 8px 24px rgba(color(typography, 1), 0.12);
mix-blend-mode: multiply; mix-blend-mode: multiply;
transition: box-shadow .15s ease; transition: box-shadow 0.15s ease;
} }
&:hover { &:hover {
&::before {
&::before { box-shadow: 0 8px 24px rgba(color(typography, 1), 0.25);
box-shadow: 0 8px 24px rgba(color(typography, 1), .25); }
} }
}
} }
.button-sm { .button-sm {
padding: 8px 24px; padding: 8px 24px;
height: 32px; height: 32px;
&.button-shadow { &.button-shadow {
&::before {
box-shadow: 0 4px 16px rgba(color(typography, 1), 0.12);
}
&::before { &:hover {
box-shadow: 0 4px 16px rgba(color(typography, 1), .12); &::before {
} box-shadow: 0 4px 16px rgba(color(typography, 1), 0.25);
}
&:hover { }
}
&::before {
box-shadow: 0 4px 16px rgba(color(typography, 1), .25);
}
}
}
} }
.button-primary, .button-primary,
.button-secondary { .button-secondary {
color: color(typography, 1i) !important; color: color(typography, 1i) !important;
transition: background .15s ease; transition: background 0.15s ease;
} }
.button-primary { .button-primary {
background: mix(color(primary, 1), color(primary, 2)); background: mix(color(primary, 1), color(primary, 2));
background: linear-gradient(65deg, color(primary, 1) -25%, color(primary, 2) 100%); background: linear-gradient(
65deg,
color(primary, 1) -25%,
color(primary, 2) 100%
);
&:hover { &:hover {
background: lighten(mix(color(primary, 1), color(primary, 2)), .5%); background: lighten(mix(color(primary, 1), color(primary, 2)), 0.5%);
background: linear-gradient(65deg, lighten(color(primary, 1), .5%) -25%, lighten(color(primary, 2), .5%) 100%); background: linear-gradient(
} 65deg,
lighten(color(primary, 1), 0.5%) -25%,
lighten(color(primary, 2), 0.5%) 100%
);
}
} }
.button-secondary { .button-secondary {
background: mix(color(primary, 1), color(secondary, 2)); background: mix(color(primary, 1), color(secondary, 2));
background: linear-gradient(65deg, color(primary, 1) -25%, color(secondary, 2) 100%); background: linear-gradient(
65deg,
color(primary, 1) -25%,
color(secondary, 2) 100%
);
&:hover { &:hover {
background: lighten(mix(color(primary, 1), color(secondary, 2)), .5%); background: lighten(mix(color(primary, 1), color(secondary, 2)), 0.5%);
background: linear-gradient(65deg, lighten(color(primary, 1), .5%) -25%, lighten(color(secondary, 2), .5%) 100%); background: linear-gradient(
} 65deg,
lighten(color(primary, 1), 0.5%) -25%,
lighten(color(secondary, 2), 0.5%) 100%
);
}
} }
.button-block { .button-block {
display: flex; display: flex;
} }