Codevember:

Spring

Beach

Palette 

01

November, 2019

Reading time: 47 secs

Design

Challenges

Codevember

Codevember, a 30-day coding challenge, has started! Ben C. from the Data Visualization Society – New England Chanel shared he was participated and invited those who were interested in joining him for the month-long challenge. I joined in with the Contrast Challenge for day one, today. Using Codier.io Color Palette Collection Challenge as inspiration, Spring Beach Color Palette was born. Future projects for #Codevember will use this color palette.

Codier.io allows you to work with HTML, CSS, and Javascript to create front end projects. To get you started, the site has many coding challenges to inspire you and get your creative juices going.

“Cookbooks help get projects finished since they give your project a jumpstart.”

My personal goal with Codevember is to create several coding/data visualizations cookbooks. These cookbooks will serve as templates and jumping-off points for future projects. Some days I will go in a different direction that day’s challenge, but I will try to keep the spirit of the day. I find cookbooks help get projects started, but I have always put off formally creating them. I am taking Codevember as an opportunity to design them.

The palette is made up of three colors. Hex info Gray: #333F48 | Green: #A7E163 | Blue: #012169. I really enjoyed doing this project.

Are you doing Covevember challenges? I would love to see your Codevember challenges, tag and follow me on Twitter: @YvonFitz.

Spring Beach Palette

Spring Beach Palette : Gray: #333F48 | Green: #A7E163 | Blue: #012169

Coded by Yvonne Beirne FitzGerald via Coder.io 

HTML

<div class="color color--1"></div>
<div class="color color--2"></div>
<div class="color color--3"></div>

CSS

 
.color--1 {background: #333F48;}
.color--2 {background: #A7E163;}
.color--3 {background: #012169;}
 
 
/* CREATION STYLES */

body {
 display: flex;
 margin: 0;
}
 
.color {
 flex: 1;
 height: 100vh;
}