Skip to content

Commit

Permalink
first draft
Browse files Browse the repository at this point in the history
  • Loading branch information
@babayomi
babayomi committed Jun 11, 2024
1 parent 3b9755b commit fec86f1
Show file tree
Hide file tree
Showing 58 changed files with 17,652 additions and 0 deletions.
155 changes: 155 additions & 0 deletions announcement.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FutureSTEMgirls Campaign</title>
<style>
/* Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* General styles */
body {
font-family: 'Inter', sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
}

h1 {
font-size: 24px;
font-weight: 700;
margin-bottom: 20px;
}

h2 {
font-size: 20px;
font-weight: 600;
margin-bottom: 16px;
}

a {
color: #de8154;
text-decoration: none;
}

/* Email template styles */
.email-container {
max-width: 600px;
margin: 0 auto;
background-color: #ffffff;
border: 1px solid #e5e5e5;
}

.header {
padding: 20px;
background-color: #f8f9fa;
border-bottom: 1px solid #e5e5e5;
}

.logo {
max-width: 150px;
height: auto;
}

.content {
padding: 20px;
}

.hero-image {
max-width: 100%;
height: auto;
margin-bottom: 20px;
}

.cta-button {
display: inline-block;
padding: 10px 20px;
background-color: #de8154;
color: #ffffff;
font-weight: 600;
text-decoration: none;
border-radius: 4px;
}

.footer {
padding: 20px;
background-color: #f8f9fa;
border-top: 1px solid #e5e5e5;
text-align: center;
}

.footer-address {
margin-bottom: 10px;
}

.social-links a {
display: inline-block;
margin: 0 5px;
color: #333;
}

.unsubscribe {
margin-top: 20px;
font-size: 14px;
color: #de8154;
}
</style>
</head>
<body>
<table class="email-container" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<!-- Header -->
<table class="header" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="https://futurestemgirls.org" target="_blank">
<img class="logo" src="https://festa.design/assets/img/future-stem-girls.png" alt="FutureSTEMgirls Logo">
</a>
</td>
<td align="right">
<a href="https://example.com/email-view" target="_blank">View in Browser</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- Content -->
<table class="content" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<h1 style="color: #de8154;">Help Girls Pursue STEM Education</h1>
<img class="hero-image" src="https://festa.design//assets/img/futurestemgirls.jpg" alt="Girl coding on a laptop">
<p>FutureSTEMgirls is an NGO advocating for girls and women to pursue STEM education and career. We are running a campaign to understand motivations and barriers for girls and women in STEM and ICT domains.</p>
<a class="cta-button" href="#" target="_blank">Join the Campaign</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- Footer -->
<table class="footer" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<p class="footer-address">FutureSTEMgirls<br>123 Main Street<br>Anytown, USA 12345</p>
<p>
<span class="social-links">
<a href="https://www.facebook.com/futurestemgirls" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><title>logo-facebook</title><g fill="#212121"><path d="M32,16A16,16,0,1,0,13.5,31.806V20.625H9.438V16H13.5V12.475c0-4.01,2.389-6.225,6.043-6.225a24.644,24.644,0,0,1,3.582.312V10.5H21.107A2.312,2.312,0,0,0,18.5,13v3h4.438l-.71,4.625H18.5V31.806A16,16,0,0,0,32,16Z" fill="#212121"></path></g></svg></a>
<a href="https://www.twitter.com/futurestemgirls" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><title>x</title><g fill="#212121"><polygon points="14.457 20.202 5.876 30 1.123 30 12.237 17.304 14.457 20.202" fill="#212121"></polygon><polygon points="17.051 10.988 24.908 2 29.658 2 19.251 13.902 17.051 10.988" fill="#212121"></polygon><path d="M31.488,30h-9.559L.512,2H10.313L31.488,30Zm-8.248-2.843h2.632L8.883,4.694h-2.824L23.241,27.157Z" fill="#212121"></path></g></svg></a>
<a href="https://www.instagram.com/futurestemgirls" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><title>logo-instagram</title><g fill="#212121"><path d="M16,3.7c4,0,4.48.015,6.061.087a8.293,8.293,0,0,1,2.786.517,4.644,4.644,0,0,1,1.724,1.122,4.644,4.644,0,0,1,1.122,1.724,8.293,8.293,0,0,1,.517,2.786C28.282,11.52,28.3,12,28.3,16s-.015,4.48-.087,6.061a8.293,8.293,0,0,1-.517,2.786,4.97,4.97,0,0,1-2.846,2.846,8.293,8.293,0,0,1-2.786.517c-1.581.072-2.056.087-6.061.087s-4.48-.015-6.061-.087a8.293,8.293,0,0,1-2.786-.517,4.644,4.644,0,0,1-1.724-1.122,4.644,4.644,0,0,1-1.122-1.724,8.293,8.293,0,0,1-.517-2.786C3.718,20.48,3.7,20.005,3.7,16s.015-4.48.087-6.061a8.293,8.293,0,0,1,.517-2.786A4.644,4.644,0,0,1,5.429,5.429,4.644,4.644,0,0,1,7.153,4.307,8.293,8.293,0,0,1,9.939,3.79C11.52,3.718,12,3.7,16,3.7M16,1c-4.074,0-4.585.017-6.184.09a11.044,11.044,0,0,0-3.642.7A7.364,7.364,0,0,0,3.518,3.518,7.364,7.364,0,0,0,1.787,6.174a11.044,11.044,0,0,0-.7,3.642C1.017,11.415,1,11.926,1,16s.017,4.585.09,6.184a11.044,11.044,0,0,0,.7,3.642,7.364,7.364,0,0,0,1.731,2.656,7.364,7.364,0,0,0,2.656,1.731,11.044,11.044,0,0,0,3.642.7c1.6.073,2.11.09,6.184.09s4.585-.017,6.184-.09a11.044,11.044,0,0,0,3.642-.7,7.683,7.683,0,0,0,4.387-4.387,11.044,11.044,0,0,0,.7-3.642c.073-1.6.09-2.11.09-6.184s-.017-4.585-.09-6.184a11.044,11.044,0,0,0-.7-3.642,7.364,7.364,0,0,0-1.731-2.656,7.364,7.364,0,0,0-2.656-1.731,11.044,11.044,0,0,0-3.642-.7C20.585,1.017,20.074,1,16,1Z" fill="#212121"></path><path d="M16,8.3A7.7,7.7,0,1,0,23.7,16,7.7,7.7,0,0,0,16,8.3ZM16,21a5,5,0,1,1,5-5A5,5,0,0,1,16,21Z" fill="#212121"></path><circle cx="24.007" cy="7.993" r="1.8" fill="#212121"></circle></g></svg></a>
</span>
</p>
<p class="unsubscribe"><a href="https://example.com/unsubscribe" target="_blank">Unsubscribe</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Binary file added assets/.DS_Store
View file
Binary file not shown.
Binary file added assets/css/.DS_Store
View file
Binary file not shown.
1 change: 1 addition & 0 deletions assets/css/_base.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@forward '../../../node_modules/codyhouse-framework/main/assets/css/base';
16 changes: 16 additions & 0 deletions assets/css/_custom-style.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
// --------------------------------

// Custom Style - Your bespoke style

// --------------------------------

@use 'custom-style/colors';
@use 'custom-style/spacing';
@use 'custom-style/shared-styles';
@use 'custom-style/typography';
@use 'custom-style/icons';
@use 'custom-style/buttons';
@use 'custom-style/forms';
@use 'custom-style/util';

/*! purgecss start ignore */
167 changes: 167 additions & 0 deletions assets/css/components/_1_accordion.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
@use '../base' as *;

/* --------------------------------
File#: _1_accordion
Title: Accordion
Descr: Create stacked sections of content and allow the user to expand/collapse them
Usage: codyhouse.co/license
-------------------------------- */

:root {
/* general */
--accordion-border-width: 1px;
/* icon */
--accordion-icon-size: 20px;
--accordion-icon-stroke-width: 2px;
}

.accordion {}

.accordion__item {
border-style: solid;
border-color: var(--color-contrast-lower);
border-bottom-width: var(--accordion-border-width);

&:first-child {
border-top-width: var(--accordion-border-width);
}
}

.accordion__header { /* button */
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
text-align: left;
cursor: pointer;

.icon {
--size: var(--accordion-icon-size);

.icon__group {
stroke-width: var(--accordion-icon-stroke-width);
}
}
}

.accordion__icon-arrow,
.accordion__icon-arrow-v2,
.accordion__icon-plus {
.icon__group {
will-change: transform;
transform-origin: 50% 50%;
}
}

.accordion__icon-arrow {
.icon__group {
> * {
transform-origin: 10px 14px;
}
}
}

.accordion__icon-arrow-v2 {
.icon__group {
> * {
transform-origin: 50% 50%;
stroke-dasharray: 20;
transform: translateY(4px);
}

> *:first-child {
stroke-dashoffset: 10.15;
}

> *:last-child {
stroke-dashoffset: 10.15;
}
}
}

.accordion__icon-plus {
.icon__group {
transform: rotate(-90deg);

> * {
transform-origin: 50% 50%;
}

> *:first-child {
transform: rotate(-90deg);
}
}
}

.accordion__item--is-open > .accordion__header {
> .accordion__icon-arrow .icon__group { /* animated arrow icon */
> *:first-child {
transform: translateY(-8px) rotate(-90deg);
}

> *:last-child {
transform: translateY(-8px) rotate(90deg);
}
}

> .accordion__icon-arrow-v2 .icon__group { /* animated arrow icon v2 */
transform: rotate(-90deg);

> *:first-child, *:last-child {
stroke-dashoffset: 0;
transform: translateY(0px);
}
}

> .accordion__icon-plus .icon__group { /* animated plus icon */
transform: rotate(0);

> *:first-child {
transform: rotate(0);
}
}
}

.accordion__panel {
display: none;
will-change: height;
transform: translateZ(0px);
}

.accordion__item--is-open > .accordion__panel {
display: block;
}

/* animations */
.accordion[data-animation="on"] {
.accordion__item--is-open .accordion__panel > * {
animation: accordion-entry-animation .4s var(--ease-out);
}

.accordion__icon-arrow,
.accordion__icon-arrow-v2,
.accordion__icon-plus {
.icon__group {
transition: transform .3s var(--ease-out);

> * {
transition: transform .3s, stroke-dashoffset .3s;
transition-timing-function: var(--ease-out);
}
}
}
}

@keyframes accordion-entry-animation {
from {
opacity: 0;
transform: translateY(-10px);
}

to {
opacity: 1;
transform: translateY(0px);
}
}
15 changes: 15 additions & 0 deletions assets/css/components/_1_customer-logos.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
@use '../base' as *;

/* --------------------------------
File#: _1_customer-logos
Title: Customer Logos
Descr: A gallery of trusted companies
Usage: codyhouse.co/license
-------------------------------- */

.customer-logo {
display: block;
fill: var(--color-contrast-low); // logo color
}
Loading

0 comments on commit fec86f1

Please sign in to comment.