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 http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Ucharify</title>
<title>Charify</title>
<link
href="https://fonts.googleapis.com/css?family=Lato:400,400i|PT+Serif:700"
rel="stylesheet"
/>
<link rel="stylesheet" href="dist/css/style.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 -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
@@ -37,9 +37,9 @@
<header class="site-header">
<div class="container">
<div class="site-header-inner">
<div class="brand header-brand">
<h1 class="m-0">
<a href="#">
<ul class="brand-head header-links list-reset m-0">
<li>
<!-- <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<title>Evelyn</title>
<defs>
@@ -50,23 +50,26 @@
</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"/>
</svg> -->
<img
class="logo"
src="./dist/images/logo_white.png"
/>
</a>
</h1>
</div>
<ul class="header-links list-reset m-0">
<li><a id="login" href="#">Login</a></li>
<img
class="logo"
src="./dist/images/color_logo.png"
/>
</li>
<!-- <li class="brand-text">harify</li> -->
</ul>
<ul class="header-links list-reset m-0">
<li><a id="login" href="thecharify.com/login/">Login</a></li>
<li>
<a
id="signup"
class="button button-sm button-shadow"
href="#"
href="thecharify.com/login/"
>Signup</a
>
</li>
<li><a id="charity-login" class="button button-sm button-shadow" href="http://thecharify.com/org/login">Charity?</a></li>
</ul>
</div>
</div>
@@ -77,17 +80,14 @@
<div class="container-sm">
<div class="hero-inner">
<h1 class="hero-title h2-mobile mt-0 is-revealing">
Give with peace of mind
Personalized impact at your fingertips
</h1>
<p class="hero-paragraph is-revealing">
Ucharify connects donors with small charities,
<b>maximizing the impact</b> of every dollar.
Reach out to more places and lives, see the
impact every day.
Charify lets you make your mark with <b>small, engaging, and trustworthy charities.</b> Maximize impact with charify bundles.
</p>
<p class="join-paragraph hero-cta is-revealing">
Signup below for updates on our progress!
Signup below to follow our mission!
</p>
<form id="email-form" class="hero-cta is-revealing">
<input
@@ -477,7 +477,7 @@
<div class="testimonial-inner">
<div class="testimonial-main mb-32">
<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>
</div>
</div>
@@ -528,7 +528,7 @@
During my time in the US, I created a connection
between my home America by starting my own fundraiser for
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
patrons to make the highest impact with their contributions.
@@ -592,7 +592,7 @@
</svg> -->
<img
class="logo"
src="./dist/images/logo_white.png"
src="./dist/images/color_logo.png"
/>
</a>
</div>
@@ -658,7 +658,7 @@
</li>
</ul>
<div class="footer-copyright small-white-font">
&copy; 2019 Ucharify, all rights reserved
&copy; 2019 Charify, all rights reserved
</div>
</div>
</div>
src/scss/added.css
+14 -1
View File
@@ -6,7 +6,20 @@
.logo {
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 {
src/scss/components/_buttons.scss
+85 -72
View File
@@ -1,103 +1,116 @@
.button {
display: inline-flex;
@include font-size(9, mobile, true, false, true);
@if ( get-font-size(9, desktop) != get-font-size(9, mobile) ) {
@include media( '>medium' ) {
@include font-size(9, desktop, true, false, true);
}
}
@include font-weight(bold);
line-height: 16px;
text-transform: uppercase;
text-decoration: none !important;
background-color: color(bg, 1);
color: color(primary, 1) !important;
border: none;
border-radius: 2px;
cursor: pointer;
justify-content: center;
padding: 16px 32px;
display: inline-flex;
@include font-size(9, mobile, true, false, true);
@if (get-font-size(9, desktop) != get-font-size(9, mobile)) {
@include media('>medium') {
@include font-size(9, desktop, true, false, true);
}
}
@include font-weight(bold);
line-height: 16px;
text-transform: uppercase;
text-decoration: none !important;
background-color: color(bg, 1);
color: color(primary, 1) !important;
border: none;
border-radius: 2px;
cursor: pointer;
justify-content: center;
padding: 16px 32px;
height: 48px;
text-align: center;
white-space: nowrap;
text-align: center;
white-space: nowrap;
&:active {
outline: 0;
}
&:active {
outline: 0;
}
&::before {
border-radius: 2px;
}
&::before {
border-radius: 2px;
}
}
.button-shadow {
position: relative;
position: relative;
&::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: 0 8px 24px rgba(color(typography, 1), .12);
mix-blend-mode: multiply;
transition: box-shadow .15s ease;
}
&::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: 0 8px 24px rgba(color(typography, 1), 0.12);
mix-blend-mode: multiply;
transition: box-shadow 0.15s ease;
}
&:hover {
&::before {
box-shadow: 0 8px 24px rgba(color(typography, 1), .25);
}
}
&:hover {
&::before {
box-shadow: 0 8px 24px rgba(color(typography, 1), 0.25);
}
}
}
.button-sm {
padding: 8px 24px;
padding: 8px 24px;
height: 32px;
&.button-shadow {
&.button-shadow {
&::before {
box-shadow: 0 4px 16px rgba(color(typography, 1), 0.12);
}
&::before {
box-shadow: 0 4px 16px rgba(color(typography, 1), .12);
}
&:hover {
&::before {
box-shadow: 0 4px 16px rgba(color(typography, 1), .25);
}
}
}
&:hover {
&::before {
box-shadow: 0 4px 16px rgba(color(typography, 1), 0.25);
}
}
}
}
.button-primary,
.button-secondary {
color: color(typography, 1i) !important;
transition: background .15s ease;
color: color(typography, 1i) !important;
transition: background 0.15s ease;
}
.button-primary {
background: mix(color(primary, 1), color(primary, 2));
background: linear-gradient(65deg, color(primary, 1) -25%, color(primary, 2) 100%);
background: mix(color(primary, 1), color(primary, 2));
background: linear-gradient(
65deg,
color(primary, 1) -25%,
color(primary, 2) 100%
);
&:hover {
background: lighten(mix(color(primary, 1), color(primary, 2)), .5%);
background: linear-gradient(65deg, lighten(color(primary, 1), .5%) -25%, lighten(color(primary, 2), .5%) 100%);
}
&:hover {
background: lighten(mix(color(primary, 1), color(primary, 2)), 0.5%);
background: linear-gradient(
65deg,
lighten(color(primary, 1), 0.5%) -25%,
lighten(color(primary, 2), 0.5%) 100%
);
}
}
.button-secondary {
background: mix(color(primary, 1), color(secondary, 2));
background: linear-gradient(65deg, color(primary, 1) -25%, color(secondary, 2) 100%);
background: mix(color(primary, 1), color(secondary, 2));
background: linear-gradient(
65deg,
color(primary, 1) -25%,
color(secondary, 2) 100%
);
&:hover {
background: lighten(mix(color(primary, 1), color(secondary, 2)), .5%);
background: linear-gradient(65deg, lighten(color(primary, 1), .5%) -25%, lighten(color(secondary, 2), .5%) 100%);
}
&:hover {
background: lighten(mix(color(primary, 1), color(secondary, 2)), 0.5%);
background: linear-gradient(
65deg,
lighten(color(primary, 1), 0.5%) -25%,
lighten(color(secondary, 2), 0.5%) 100%
);
}
}
.button-block {
display: flex;
display: flex;
}