Skip to content

Commit

Permalink
Merge pull request #132 from nicoleiocana/132-update-landing-page-fea…
Browse files Browse the repository at this point in the history
…tures

#60 Update landing page features
  • Loading branch information
CSchmitz81 authored May 21, 2020
2 parents 69511e6 + 1abbea8 commit a50cea5
Show file tree
Hide file tree
Showing 7 changed files with 199 additions and 40 deletions.
Binary file added images/looping-arrows.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/magnifying-glass.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/pencil.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/shared-hands.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
46 changes: 6 additions & 40 deletions src/ctree-app/ctree-landing.html
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@

<link rel="import" href="ctree-app-icon.html">
<link rel="import" href="icons.html">
<link rel="import" href="features-section.html">

<link rel="import" href="../ctree-testimonials/ctree-testimonials.html">

Expand All @@ -79,6 +80,8 @@
display: block;
--app-primary-color: #5F9F00;
--app-secondary-color: black;
--app-header-padding-fix: 65px;
--app-header-margin-fix: -65px;
}
#mainLayout app-toolbar {
padding: 0 8px 0 0;
Expand Down Expand Up @@ -144,10 +147,6 @@
font-size: 4em;
}

#features-horizontal-line {
margin-top: -35px;
}

/* social media icon bar stuff */
#social-media-icon-bar ul {
list-style: none;
Expand Down Expand Up @@ -292,12 +291,8 @@
text-align: center;
}
#features {
font-size: .75em;
text-align: center;
}
#features-horizontal-line {
margin-top: -15px;
}
#ctree {
font-size: .75em;
text-align: center;
Expand Down Expand Up @@ -395,10 +390,6 @@
background-color: #DBE8DE;
color: #63A375;
}
#features.section-styling {
background-color: #FFFFFF;
color: #196848;
}
#ctree.section-styling {
background-color: #196848;
color: #FFFFFF;
Expand Down Expand Up @@ -515,34 +506,9 @@
<div id="feedback" class="section-styling">
<ctree-testimonials></ctree-testimonials>
</div>
<div id="features" class="section-styling">
<div class= "center-div">
<h1 align="center">Features</h1>
<hr id="features-horizontal-line"/>
<!-- grid layout to be added here with icons and descriptions. -->
</div>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
</div>

<features-section id="features"></features-section>

<div id="ctree" class="section-styling">
<p>W</p>
<p>W</p>
Expand Down
154 changes: 154 additions & 0 deletions src/ctree-app/features-section.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
<!--
@license
Copyright (c) 2017 Foundation For an Innovative Future (InnovativeFuture.org)
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or any
later version.
Foundation For an Innovative Future reserves the right to release the
covered work, in part or in whole, under a different open source
license and/or with specific copyleft exclusions. Such a release
would not invalidate the license for this project, although the
project released with a modified license would not be considered
part of this covered work or subject to the copyleft portions of this
license even if the projects are identical.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
Please email contact@innovativeFuture.org for inquiries related to
this license.
-->

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/polymer/lib/dom-repeat.html">
<link rel="import" href="../ctree-icons/ctree-landing-icons.html">

<dom-module id="features-section">
<template>
<style>
:host {
display: block;
background-color: #FFFFFF;
color: #196848;
padding-top: var(--app-header-padding-fix);
margin-top: var(--app-header-margin-fix);
}
iron-icon {
--iron-icon-width: 100px;
--iron-icon-height: 100px;
}
h1 {
color: #62A374;
text-align: center;
font-size: 2.9em;
letter-spacing: .02em;
}
h3 {
font-size: 1.25em;
color: #62A374;
text-transform: capitalize;
margin-top: 0;
}
p {
color: #000000;
font-size: 0.85em;
letter-spacing: .027em;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
padding: 25px 0 75px 0;
}
.item {
display: flex;
width: 400px;
margin-bottom: 75px;
}
.image {
margin-right: 50px;
}
/* Mobile Phones */
@media (max-width: 500px) {
.container {
padding: 0;
}
h3 {
margin-top: 20px;
}
div p {
margin: 0 45px;
}
div .item {
display: block;
width: 90%;
}
div .image {
margin-right: 0;
}
}
</style>

<h1>Features</h1>
<div class="container">
<dom-repeat items="[[sections]]" as="section">
<template>
<div class="item">
<div class="image">
<iron-icon src="../../images/[[section.image_name]].png"></iron-icon>
</div>
<div>
<h3>[[section.name]]</h3>
<p>
[[section.description]]
</p>
</div>
</div>
</template>
</dom-repeat>
</div>
</template>

<script>

class FeaturesSection extends Polymer.Element {

static get is() { return 'features-section'; }

static get properties() {
return {
sections: {
type: Array,
value: () => [
{name: 'collaboration',
description: 'Connect with like-minded passionate individuals to solve problems for a cause.',
image_name: 'pencil'},
{name: 'search',
description: 'Discover non-profits and other causes doing good for the world!',
image_name: 'magnifying-glass'},
{name: 'share',
description: 'Promote other helpful thoughts and discussions to avoid seeing the same answers over and over again',
image_name: 'shared-hands'},
{name: 'review',
description: 'Edit and Vote for the most helpful version of ideas and solutions',
image_name: 'looping-arrows'}
]
}
};
}
}

window.customElements.define(FeaturesSection.is, FeaturesSection);
</script>
</dom-module>
39 changes: 39 additions & 0 deletions src/ctree-icons/ctree-landing-icons.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<!--
@license
Copyright (c) 2017 Foundation For an Innovative Future (InnovativeFuture.org)
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or any
later version.
Foundation For an Innovative Future reserves the right to release the
covered work, in part or in whole, under a different open source
license and/or with specific copyleft exclusions. Such a release
would not invalidate the license for this project, although the
project released with a modified license would not be considered
part of this covered work or subject to the copyleft portions of this
license even if the projects are identical.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
Please email contact@innovativeFuture.org for inquiries related to
this license.
-->

<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../bower_components/iron-iconset-svg/iron-iconset-svg.html">

<iron-iconset-svg name="icons" size="24">
<svg><defs>
<g id="magnifying-glass"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></g>
<g id="pencil"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></g>
<g id="looping-arrows"><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"></path></g>
</defs></svg>
</iron-iconset-svg>

0 comments on commit a50cea5

Please sign in to comment.