Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Color Scheme #4

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Color Scheme #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
229 changes: 43 additions & 186 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,216 +1,73 @@
<!DOCTYPE HTML>
<html>
<!DOCTYPE html>
<html lang="en-us" class="theme-light">


<!-- ====================================================
Name: Building Blocks - v1.3
Name: Color Scheme Change
Author: Troy Sidle

This version includes a navigation menu. It also has an image in "Publications" that changes from black and white to color when the user hovers over it.

In the footer, there is a color scheme change under construction.
======================================================== -->

The user can choose amongst three color schemes.
======================================================== -->

<title>Color Scheme Change</title>

<head>
<meta charset="UTF-8">
<title>Honeydew Limeade</title>
<link href="Stylesheet.css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css" type="text/css"/>
</head>


<body id="content">



<script>
function alertFunction() {
alert("This feature is under construction.");
}
</script>



<!-- The navigation bar -->
<div class="sideNavigation">

<a class="active" href="#home">Home</a>
<a class="active" href="#education">Education</a>
<a class="active" href="#workExperience">Work Experience</a>
<a class="active" href="#publications">Publications</a>
<!--<a class="active" href="#portfolio">Portfolio</a>-->

</div>

<div class="main">



<script>
// Selecting element
var elem = document.getElementById("content");

// Initial variable values
//var start = 'none'
var current;
var selected;


// Get the values to display.
//document.getElementById("oldStyleClass").innerHTML = current;
//document.getElementById("newStyleClass").innerHTML = start;

// Remove old color display and replace with new.
function changeScheme(p1, p2) {
//document.getElementById("oldStyleClass").innerHTML = p1;
//document.getElementById("newStyleClass").innerHTML = p2;

// Remove old color scheme and replace with new.
elem.classList.remove(p1);
elem.classList.add(p2);

// Reset the current scheme.
current = p2;
}
</script>

<body>


<!-- The sections are the main content of the website. -->
<h1>Color Scheme Change</h1>

<section id="home">
<section class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">Troy Sidle</h1>
<h2>Designer</h2>
</div>
</section>
<section class="mainCategory">
<h1>Main Section A</h1>
<p>This is a paragraph.</p>
</section>

<br>

<section id="education">
<h3>Education
</h3>
<p>
Bachelor of Arts, Computer Science
Harding University, Searcy, AR
</p>
<p>
December 2000
</p>
</section>

<section id="workExperience">
<h3>Work Experience
</h3>
<h4>
The Dinex Group, New York, NY
</h4>
<p>2/2022 – 5/2022
</p>
<p>Director of Cocktails
</p>
<p>
Developing new bar programs with an emphasis on cocktail experiences
</p>
<p>
Creating systems and standards for existing bar and cocktail programs
</p>
<section class="mainCategory">
<h1>Main Section B</h1>
<p>This is a paragraph.</p>
</section>

<section id="publications">
<h3>Publications
</h3>
<p>
The recipe for Honeydew Limeade is in the book Batch Cocktails by Maggie Hoffman.
</p>

<!--Insert an image-->

<div class="imageContainer">
<img src="Batch%20Cocktails%20BW.jpeg" alt="Temp Portfolio Photo" width="200" height="auto">
<div class="overlay"><img src=Batch%20Cocktails.jpeg width="200" height="auto"></div>
</div>
<!--
<img src="LimePastel2.png" alt="Temp Portfolio Photo" width="500" height="auto">
</div>
-->
</section>




</div>
</body>
<footer class="main" style="background-color: var(--nearBlackTone);">

<br>
<p style="color: var(--nearwhite);">Change Color Scheme (under construction)</p>

<section class="distinctCategory">
<h1>Unique Section</h1>
<p>This is a paragraph.</p>
</section>



<br>

<!--This table holds three color schemes.-->
<table style="width: 600px; background-color: var(--nearBlackTone); border: 10px solid var(--nearBlackTone);">
<tr class="colorSchemeContainer">
<td class="colorSchemeContainer">

<!--This table holds five colors of type A-->

<table style="width: 200px; height: 10px;" onclick="alertFunction()">
<tr>
<td style="background-color: var(--mediumMonochromeGreen)"></td>
<td style="background-color: var(--lightMonochromeGreen)"></td>
<td style="background-color: var(--baseColorMonochromeGreen)"></td>
<td style="background-color: var(--darkMonochromeGreen)"></td>
<td style="background-color: var(--contrastMonochromeGreen)"></td>
</tr>
</table>
</td>
<td class="colorSchemeContainer">

<!--This table holds five colors of type B-->

<table style="width: 200px; height: 10px;">
<tr>
<td style="background-color: var(--mediumComplementaryProduce)"></td>
<td style="background-color: var(--lightComplementaryProduce)"></td>
<td style="background-color: var(--baseColorComplementaryProduce)"></td>
<td style="background-color: var(--darkComplementaryProduce)"></td>
<td style="background-color: var(--contrastComplementaryProduce)"></td>
</tr>
</table>
</td>
<td class="colorSchemeContainer">

<!--This table holds five colors of type C-->

<table style="width: 200px; height: 10px;">
<tr>
<td style="background-color: var(--mediumComplementaryVista)"></td>
<td style="background-color: var(--lightComplementaryVista)"></td>
<td style="background-color: var(--baseColorComplementaryVista)"></td>
<td style="background-color: var(--darkComplementaryVista)"></td>
<td style="background-color: var(--contrastComplementaryVista)"></td>
</tr>
</table>
</td>
</tr>
</table>

<br>
<button id="switch" onclick="setTheme('monochromeGreen')">Greens</button>

<!--Provide Buttons to use the changeScheme to alter the apearance of "content"-->
<button id="switch" onclick="setTheme('complementaryProduceColors')">Produce</button>

<p>
<button type="button" onclick="changeScheme(current, 'monochromeGreen')">Monochrome Green</button>
<button type="button" onclick="changeScheme(current, 'complementaryProduce')">Complementary Produce</button>
<button type="button" onclick="changeScheme(current, 'complementaryVista')">Complementary Vista</button>
</p>

<br>
<button id="switch" onclick="setTheme('complementaryVistaColors')">Vista</button>

<script>
// function to set a given theme/color-scheme
function setTheme(themeName) {
localStorage.setItem('theme', themeName);
document.documentElement.className = themeName;
}

</footer>
// Immediately invoked function to set the theme on initial load
(function ()
{
setTheme('monochromeGreen');
}
)();
</script>
</body>

</html>
113 changes: 113 additions & 0 deletions main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: white;
}


h1 {
margin-left: 25px;
color: var(--darkColor)
}

p {
margin-left: 25px;
}


/*----- Color Scheme -----*/

/* Monochrome Green
These colors are monochrome in a green hue.
*/

.monochromeGreen {

--baseColor: #C1F5C6;

--lightColor: #ADDBB1;

--mediumColor: #93BA96;

--darkColor: #283329;

--contrastColor: #4F6350;
}

/*Complementary Produce
These colors are complementary to green and resemble produce colors like blackberries and mango.
*/

.complementaryProduceColors {
--baseColor: #C1F5C6;

--lightColor: #C5B8CF;

--mediumColor: #786056;

--darkColor: #33104A;

--contrastColor: #CC511D;
}

/*Complementary Vista
These colors are complementary to green and resemble a vista of wheat fields and blue sky.
*/

.complementaryVistaColors {
--baseColor: #C1F5C6;

--lightColor: #F2EDB8;

--mediumColor: #9FE1F5;

--darkColor: #241066;

--contrastColor: #FF8F1F;
}


.mainCategory {
display: flex;
width: 100%;
height: 20%;
background: var(--lightColor);
flex-direction: column;
justify-content: center;
align-items: center;
color: var(--darkColor);
}
.mainCategory h1 {
color: var(--contrastColor);
}
.mainCategory button {
color: var(--contrastColor);
background: var(--darkColor);
padding: 10px 20px;
border: 0;
border-radius: 5px;
}


.distinctCategory {
display: flex;
width: 100%;
height: 20%;
background: var(--baseColor);
flex-direction: column;
justify-content: center;
align-items: center;
color: var(--contrastColor);

}

.distinctCategory h1 {
color: var(--contrastColor);
}