diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/ starter-kit/index-FINISHED.html similarity index 77% rename from 01 - JavaScript Drum Kit/index-FINISHED.html rename to 01 - JavaScript Drum Kit/ starter-kit/index-FINISHED.html index 1a16d0997c..25a906e841 100644 --- a/01 - JavaScript Drum Kit/index-FINISHED.html +++ b/01 - JavaScript Drum Kit/ starter-kit/index-FINISHED.html @@ -47,15 +47,15 @@ - - - - - - - - - + + + + + + + + + + + + + + +
Use the corresponding Keyboard Keys to play. You can't use the mouse yet.
+
+ +
+

A
Clap

+
+
+

S
Hihat

+
+
+

D
Kick

+
+
+

F
Openhat

+
+
+

G
Boom

+
+
+

H
Ride

+
+
+

J
Snare

+
+
+

K
Tom

+
+
+

L
Kink

+
+ +
+ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/01 - JavaScript Drum Kit/scripts.js b/01 - JavaScript Drum Kit/scripts.js new file mode 100644 index 0000000000..2e92966cbe --- /dev/null +++ b/01 - JavaScript Drum Kit/scripts.js @@ -0,0 +1,39 @@ +function playSound(e) { + // selects element based on keys pressed and their values + const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); + const key = document.querySelector(`.keys[data-key="${e.keyCode}"]`); + + // prevents keys with no audio associated with it from doing anything + if(!audio) return; + // rewinds audio so that it goes back to the beginning everytime you hit a key + audio.currentTime = 0; + // play audio on key press + audio.play(); + + // highlight and animate key + key.classList.add("pressed"); +} + +// funtion to remove the css that highlights and animates a key/ +function removeTransition(e) { + if(e.propertyName !== 'transform') return; + this.classList.remove("pressed"); +} + +const keys = document.querySelectorAll('.keys'); +// listen to each key on the keyboard that is matched that has a transitionend +keys.forEach(function(key) { + key.addEventListener('transitionend', removeTransition); +}); + +// listens for keys pressed +window.addEventListener('keydown', playSound); + + +$(document).ready(function() { + $('button').on('click', function() { + var message = $('Call 1-555-jquery-air to book this tour'); + $('.usa').append(message); + $(this).remove(); + }); +}); \ No newline at end of file diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css index 075578c930..a4d9639475 100644 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum Kit/style.css @@ -1,50 +1,87 @@ +@import url('https://fonts.googleapis.com/css?family=Black+Ops+One'); + html { - font-size: 10px; - background: url(http://i.imgur.com/b9r5sEL.jpg) bottom center; - background-size: cover; + height: 100%; + font-family: helvetica, arial; + font-size: 12px; + font-weight: 800; + color: #e1b12c; + margin: 0; + padding: 0; +} + +body { + background: url("drum-dark.jpg"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} +/*Instructions*/ +.instuctions { + padding: 20px; + text-align: center; + font-size: 1.3rem; } -body,html { - margin: 0; - padding: 0; - font-family: sans-serif; + +/*Keyboard*/ +.container { + position: absolute; + top: 43%; + left:10%; + right: 10%; + width: 80%; + margin: 0 auto; + align-items: center; + text-align: center; + justify-content: center; } .keys { - display: flex; - flex: 1; - min-height: 100vh; - align-items: center; - justify-content: center; -} - -.key { - border: .4rem solid black; - border-radius: .5rem; - margin: 1rem; - font-size: 1.5rem; - padding: 1rem .5rem; - transition: all .07s ease; - width: 10rem; - text-align: center; - color: white; - background: rgba(0,0,0,0.4); - text-shadow: 0 0 .5rem black; -} - -.playing { - transform: scale(1.1); - border-color: #ffc600; - box-shadow: 0 0 1rem #ffc600; -} - -kbd { - display: block; - font-size: 4rem; -} - -.sound { - font-size: 1.2rem; - text-transform: uppercase; - letter-spacing: .1rem; - color: #ffc600; + padding: 10px; + margin: 10px; + width: 75px; + height: 75px; + border: .4rem #dcdde1 solid; + border-radius: 50%; + display: inline-block; + background: #192a56; + opacity: .85; + line-height: 180%; + text-transform: uppercase; + transition: all .07s ease; + text-shadow: 0 0 .5rem #353b48; +} + +.keys p { + margin-top: 25%; +} + + +.letter { + font-family: 'Black Ops One', cursive, arial; + font-size: 40px; + color: #f5f6fa; +} + +/*Keyboard Keys Pressed*/ +.pressed, .keys:hover { + transform: scale(.95); + border: .4rem #e1b12c solid; + box-shadow: 0 0 1rem #e1b12c; +} + +/*Media Queries*/ +@media (max-width: 450px) { + .container { + top: 0%; + left:0%; + right: 0%; + transform: scale(.75); + } +} + +@media (min-width: 451px) and (max-width: 850px) { + .container { + top: 40%; + } } diff --git a/02 - JS and CSS Clock/index-FINISHED.html b/02 - JS and CSS Clock/ starter-kit/index-FINISHED.html similarity index 100% rename from 02 - JS and CSS Clock/index-FINISHED.html rename to 02 - JS and CSS Clock/ starter-kit/index-FINISHED.html diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/ starter-kit/index-START.html similarity index 80% rename from 02 - JS and CSS Clock/index-START.html rename to 02 - JS and CSS Clock/ starter-kit/index-START.html index ee7eaefb1f..f5192d0148 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/ starter-kit/index-START.html @@ -67,7 +67,19 @@ diff --git a/02 - JS and CSS Clock/clock-face.gif b/02 - JS and CSS Clock/clock-face.gif new file mode 100644 index 0000000000..b0b69b87e4 Binary files /dev/null and b/02 - JS and CSS Clock/clock-face.gif differ diff --git a/02 - JS and CSS Clock/index.html b/02 - JS and CSS Clock/index.html new file mode 100644 index 0000000000..35d6117f9a --- /dev/null +++ b/02 - JS and CSS Clock/index.html @@ -0,0 +1,32 @@ + + + + + + > J | JS30 - JS+CSS Clock + + + + + + + +
+ +
+
+
S
+
M
+
H
+
+ +
+ + + + \ No newline at end of file diff --git a/02 - JS and CSS Clock/scripts.js b/02 - JS and CSS Clock/scripts.js new file mode 100644 index 0000000000..f6036e339a --- /dev/null +++ b/02 - JS and CSS Clock/scripts.js @@ -0,0 +1,30 @@ +// Store Selector elements in variables +const secondsSelector = document.querySelector('.seconds'); +const minutesSelector = document.querySelector('.minutes'); +const hoursSelector = document.querySelector('.hours'); + +// Declare function to grab the time +function setDate() { + // Create and Initialize Date and Time variables + const currentDate = new Date; + + const seconds = currentDate.getSeconds(); + const minutes = currentDate.getMinutes(); + const hours = currentDate.getHours(); + + // Convert Time to Degrees. 90 at the End is to Offset the initial value of degrees in CSS + const secondsInDegrees = ((seconds / 60) * 360) + 90; + const minutesInDegrees = ((minutes / 60) * 360) + 90; + const hoursInDegrees = ((hours / 12) * 360) + 90; + + // Change transform rotate values based on the degrees/time + secondsSelector.style.transform = `rotate(${secondsInDegrees}deg)`; + minutesSelector.style.transform = `rotate(${minutesInDegrees}deg)`; + hoursSelector.style.transform = `rotate(${hoursInDegrees}deg)`; +} + +// Calls the function setDate every 1000 milliseconds +setInterval(setDate, 1000); + +// Call function +setDate(); \ No newline at end of file diff --git a/02 - JS and CSS Clock/space.jpeg b/02 - JS and CSS Clock/space.jpeg new file mode 100644 index 0000000000..5ae96368db Binary files /dev/null and b/02 - JS and CSS Clock/space.jpeg differ diff --git a/02 - JS and CSS Clock/style.css b/02 - JS and CSS Clock/style.css new file mode 100644 index 0000000000..cc3e439a27 --- /dev/null +++ b/02 - JS and CSS Clock/style.css @@ -0,0 +1,122 @@ +html { + margin: 0; + padding: 0; + height: 100%; + text-align: center; +} + +body { + background: #ADA996; /* fallback for old browsers */ + background: -webkit-linear-gradient(to top, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996); /* Chrome 10-25, Safari 5.1-6 */ + background: linear-gradient(to top, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ + /*background:#018DED url(space.jpeg);*/ + background-size:cover; + background-position: center; +} +.clock { + position: relative; + + margin: 0 auto; + margin-top: 250px; + padding: 10px; + padding-right: 12px; + + border-radius: 50%; + border: 20px #192a56 solid; + width: 430px; + height: 430px; + background: #74ebd5; /* fallback for old browsers */ + background: -webkit-linear-gradient(to right, #74ebd5, #acb6e5); /* Chrome 10-25, Safari 5.1-6 */ + background: linear-gradient(to right, #74ebd5, #acb6e5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ + box-shadow: + 0 0 0 3px rgba(0,0,0,0.1), + inset 0 0 0 2px #EFEFEF, + inset 0 0 1px black, + 0 0 3px rgba(0,0,0,0.2); + background: url(clock-face.gif); + background-size:cover; + background-position: center; +} + +.circle { + position: absolute; + top: 48%; + left: 47%; + z-index: 1; + width: 30px; + height: 30px; + background-color: #2f3640; + border-radius: 50%; + box-shadow: + 0 0 0 2px rgba(0,0,0,0.1), + inset 0 0 0 1px #EFEFEF, + inset 0 0 1px black, + 0 0 3px rgba(0,0,0,0.2); +} + +.hand { + position: absolute; + top:50%; + + width:48%; + height:15px; + + border-radius: 10px; + background-color: #273c75; + box-shadow: + 0 0 0 2px rgba(0,0,0,0.1), + inset 0 0 0 1px #EFEFEF, + inset 0 0 1px black, + 0 0 3px rgba(0,0,0,0.2); + + + transform: rotate(90deg); + transform-origin: 100%; + transition: all 0.05s; + transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); +} + +.text { + transform: rotate(270deg); + font-family: arial; + font-weight: 100; + font-size: 10px; + text-align: center; + margin-top: 2px; + margin-right: 180px; + + color: #f5f6fa; +} + +.hours .text { + margin-right: 150px; +} + +.seconds { + background-color: #c23616; +} + +.hours { + background-color: #192a56; + width:40%; + margin-left: 8% +} + + +@media (max-width: 600px) { + .clock { + margin: 30px auto; + width: 330px; + height: 330px; + transform: scale(.75); + } + + .text { + margin-right: 140px; + } + + .hours .text { + margin-right: 110px; + } +} + diff --git a/03 - CSS Variables/index-FINISHED.html b/03 - CSS Variables/ starter-kit/index-FINISHED.html similarity index 100% rename from 03 - CSS Variables/index-FINISHED.html rename to 03 - CSS Variables/ starter-kit/index-FINISHED.html diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/ starter-kit/index-START.html similarity index 100% rename from 03 - CSS Variables/index-START.html rename to 03 - CSS Variables/ starter-kit/index-START.html diff --git a/03 - CSS Variables/guitars.jpeg b/03 - CSS Variables/guitars.jpeg new file mode 100644 index 0000000000..ac49c4fead Binary files /dev/null and b/03 - CSS Variables/guitars.jpeg differ diff --git a/03 - CSS Variables/index.html b/03 - CSS Variables/index.html new file mode 100644 index 0000000000..aeea95299e --- /dev/null +++ b/03 - CSS Variables/index.html @@ -0,0 +1,38 @@ + + + + + + > J | CSS Variables with JS + + + + + +  + +
+

This Page Updates Properties Using CSS Variables with JS

+ +
+ + + + + + +
+ +
+ +
+
+ + + + \ No newline at end of file diff --git a/03 - CSS Variables/scripts.js b/03 - CSS Variables/scripts.js new file mode 100644 index 0000000000..be4a6438a7 --- /dev/null +++ b/03 - CSS Variables/scripts.js @@ -0,0 +1,20 @@ +// Grabs all the input elements under the div named control +const inputs = document.querySelectorAll('.controls input'); + +// This function changes the property value of the CSS variables +// for the selected input +function changeProperty() { + // if the element is not colot, this is set to "px" + const unitOfMeasure = this.dataset.unit || ""; + + document.documentElement.style.setProperty(`--${this.name}`, this.value + unitOfMeasure); + console.log(unitOfMeasure); +} + +// Listens to any changes in the input value +inputs.forEach(function(input) { + input.addEventListener('change', changeProperty) +}); +inputs.forEach(function(input) { + input.addEventListener('mousemove', changeProperty) +}); \ No newline at end of file diff --git a/03 - CSS Variables/style.css b/03 - CSS Variables/style.css new file mode 100644 index 0000000000..07cb325a03 --- /dev/null +++ b/03 - CSS Variables/style.css @@ -0,0 +1,76 @@ +@import url('https://fonts.googleapis.com/css?family=Rammetto+One'); + +html { + height: 100%; + margin: 0; + padding: 0; +} + +body { + text-align: center; + background: #11998e; /* fallback for old browsers */ + background: -webkit-linear-gradient(to right, #38ef7d, #11998e); /* Chrome 10-25, Safari 5.1-6 */ + background: linear-gradient(to right, #38ef7d, #11998e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ + font-size: 12px; + font-family: 'Rammetto One', cursive; +} + +/*CSS Variables that store base values*/ +:root { + --border: 25px; + --blur: 10px; + --color: #f5f6fa; +} + +h1 { + padding: 0 20%; + font-size: 2.3rem; + font-weight: 300; + color: var(--color); + text-shadow: 1px 1px 2px #f5f6fa, + 0 0 1em #7f8fa6, + 0 0 0.2em #2f3640; +} + +.controls { + margin-top: 50px; + margin-bottom: 50px; + font-size: 1.5rem; + color: #f5f6fa; + text-shadow: 0px 1px 1px #2f3640, + 0 0 1em #7f8fa6, + 0 0 0.2em #f5f6fa; + +} + +input { + border: 0; +} + +.frame { + width: 70%; + margin: 0 auto; + padding: var(--border); + background: var(--color); + box-sizing: border-box; + border-radius: 10px; + box-shadow: 7px 7px 8px 4px rgba(113, 128, 147,.4); +} + +img { + width: 100%; + border-radius: 10px; + filter: blur(var(--blur)); + box-shadow: -1px -1px 3px 1px rgba(113, 128, 147,.8); +} + +/*Responsive code*/ +@media (max-width: 800px) { + h1 { + font-size: 1.5rem; + } + + .controls { + font-size: 1rem; + } +} \ No newline at end of file diff --git a/04 - Array Cardio Day 1/index.html b/04 - Array Cardio Day 1/index.html new file mode 100644 index 0000000000..0a7764eb1f --- /dev/null +++ b/04 - Array Cardio Day 1/index.html @@ -0,0 +1,14 @@ + + + + + + > J | Array Cardio + + +  + +

Psst: have a look at the JavaScript Console 💁

+ + + \ No newline at end of file diff --git a/04 - Array Cardio Day 1/scripts.js b/04 - Array Cardio Day 1/scripts.js new file mode 100644 index 0000000000..21b45e0d0e --- /dev/null +++ b/04 - Array Cardio Day 1/scripts.js @@ -0,0 +1,102 @@ +const inventors = [ + { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }, + { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 }, + { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 }, + { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 }, + { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 }, + { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }, + { first: 'Max', last: 'Planck', year: 1858, passed: 1947 }, + { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 }, + { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 }, + { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 }, + { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 }, + { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 } +]; + +const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William']; + +// Array.prototype.filter() +// 1. Filter the list of inventors for those who were born in the 1500's +let myInventors1500 = inventors.filter(function(inventor) { + if (inventor.year >= 1500 && inventor.year < 1600) { + return true; + } +}); + +console.log(myInventors1500); +console.log('--------'); + +// Array.prototype.map() +// 2. Give us an array of the inventors' first and last names +let myInventorsNames = inventors.map(function(inventor) { + return `${inventor.first} ${inventor.last}`; +}); + +console.log(myInventorsNames); +console.log('--------'); + +// Array.prototype.sort() +// 3. Sort the inventors by birthdate, oldest to youngest +let sortedInventors = inventors.sort(function(inventorOne, inventorTwo) { + return inventorOne.year > inventorTwo.year ? 1 : -1; +}); + +console.log(sortedInventors); +console.log('--------'); + +// Array.prototype.reduce() +// 4. How many years did all the inventors live? +let totalYears = inventors.reduce(function(total, inventor) { + return total + (inventor.passed - inventor.year); +}, 0); + +console.log(totalYears); +console.log('--------'); + +// 5. Sort the inventors by years lived +let sortedInventorsOldest = inventors.sort(function(inventorOne, inventorTwo) { + return inventorOne.passed - inventorOne.year > inventorTwo.passed - inventorTwo.year ? -1 : 1; +}); + +console.log(sortedInventorsOldest); +console.log('--------'); + +// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name +// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris +// const category = document.querySelector('.mw-category'); +// const links = Array.from(category.querySelectorAll('a')); +// const de = links +// .map(link => link.textContent) +// .filter(streetName => streetName.includes('de')); + + +// 7. sort Exercise +// Sort the people alphabetically by last name +let sortedByLastName = people.sort(function(personOne, personTwo) { + let [lastNameOne, firstNameOne] = personOne.split(', '); + let [lastNameTwo, firstNameTwo] = personTwo.split(','); + + + return lastNameOne > lastNameTwo? 1 : -1; +}); + +console.log(sortedByLastName); +console.log('--------'); + +// 8. Reduce Exercise +// Sum up the instances of each of these +let data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ]; +let totalPerVehicle = data.reduce(function(obj, vehicle) { + if (!obj[vehicle]) { + obj[vehicle] = 0; + } + + obj[vehicle]++ + + return obj; + +}, {}); + +console.log(totalPerVehicle); + + diff --git a/04 - Array Cardio Day 1/index-FINISHED.html b/04 - Array Cardio Day 1/starter-kit/index-FINISHED.html similarity index 100% rename from 04 - Array Cardio Day 1/index-FINISHED.html rename to 04 - Array Cardio Day 1/starter-kit/index-FINISHED.html diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/starter-kit/index-START.html similarity index 100% rename from 04 - Array Cardio Day 1/index-START.html rename to 04 - Array Cardio Day 1/starter-kit/index-START.html diff --git a/05 - Flex Panel Gallery/img/panel1.jpeg b/05 - Flex Panel Gallery/img/panel1.jpeg new file mode 100644 index 0000000000..4c97e47f13 Binary files /dev/null and b/05 - Flex Panel Gallery/img/panel1.jpeg differ diff --git a/05 - Flex Panel Gallery/img/panel2.jpeg b/05 - Flex Panel Gallery/img/panel2.jpeg new file mode 100644 index 0000000000..a436b279c3 Binary files /dev/null and b/05 - Flex Panel Gallery/img/panel2.jpeg differ diff --git a/05 - Flex Panel Gallery/img/panel3.jpeg b/05 - Flex Panel Gallery/img/panel3.jpeg new file mode 100644 index 0000000000..3c1e5ce46b Binary files /dev/null and b/05 - Flex Panel Gallery/img/panel3.jpeg differ diff --git a/05 - Flex Panel Gallery/img/panel4.jpeg b/05 - Flex Panel Gallery/img/panel4.jpeg new file mode 100644 index 0000000000..e47299cf0e Binary files /dev/null and b/05 - Flex Panel Gallery/img/panel4.jpeg differ diff --git a/05 - Flex Panel Gallery/img/panel5.jpeg b/05 - Flex Panel Gallery/img/panel5.jpeg new file mode 100644 index 0000000000..19b7267de0 Binary files /dev/null and b/05 - Flex Panel Gallery/img/panel5.jpeg differ diff --git a/05 - Flex Panel Gallery/index.html b/05 - Flex Panel Gallery/index.html new file mode 100644 index 0000000000..5c99fe20d4 --- /dev/null +++ b/05 - Flex Panel Gallery/index.html @@ -0,0 +1,57 @@ + + + + + + > J | Flex Panels + + + + + + + + + + + + + +
+ +
+

Hey

+

Let's

+

Dance

+
+
+

Give

+

Take

+

Receive

+
+
+

Experience

+

It

+

Today

+
+
+

Give

+

All

+

You can

+
+
+

Life

+

In

+

Motion

+
+ +
+ + + + \ No newline at end of file diff --git a/05 - Flex Panel Gallery/scripts.js b/05 - Flex Panel Gallery/scripts.js new file mode 100644 index 0000000000..c3e398de9b --- /dev/null +++ b/05 - Flex Panel Gallery/scripts.js @@ -0,0 +1,23 @@ +// Grab all the elements with class panel +const panels = document.querySelectorAll('.panel'); + +// Toggle the open class to make panel wider with animation +function toggleOpenClass() { + this.classList.toggle('open'); +}; + +// Toggle open-active class to bring text back to view +function toggleActiveClass(event) { + if (event.propertyName.includes('flex')) { + this.classList.toggle('open-active'); + } +}; + +// Listens for click and transition end events to call appropriate classes +panels.forEach(function(panel) { + panel.addEventListener('click', toggleOpenClass); +}); +panels.forEach(function(panel) { + panel.addEventListener('transitionend', toggleActiveClass); +}); + diff --git a/05 - Flex Panel Gallery/index-FINISHED.html b/05 - Flex Panel Gallery/starter-kit/index-FINISHED.html similarity index 99% rename from 05 - Flex Panel Gallery/index-FINISHED.html rename to 05 - Flex Panel Gallery/starter-kit/index-FINISHED.html index f703fed6ae..4dbb95a84f 100644 --- a/05 - Flex Panel Gallery/index-FINISHED.html +++ b/05 - Flex Panel Gallery/starter-kit/index-FINISHED.html @@ -15,6 +15,7 @@ font-weight: 200; } body { + padding: 0; margin: 0; } *, *:before, *:after { diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/starter-kit/index-START.html similarity index 100% rename from 05 - Flex Panel Gallery/index-START.html rename to 05 - Flex Panel Gallery/starter-kit/index-START.html diff --git a/05 - Flex Panel Gallery/starter-kit/style-backup.css b/05 - Flex Panel Gallery/starter-kit/style-backup.css new file mode 100644 index 0000000000..9cfbb0d99b --- /dev/null +++ b/05 - Flex Panel Gallery/starter-kit/style-backup.css @@ -0,0 +1,78 @@ +html { + box-sizing: border-box; + background:#ffc600; + font-family:'helvetica neue'; + font-size: 20px; + font-weight: 200; +} +body { + padding:0; + margin: 0; +} +*, *:before, *:after { + box-sizing: inherit; +} + +.panels { + min-height:100vh; + overflow: hidden; + display: flex; +} + +.panel { + /*background:#6B0F9C; + box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1); + background-size:cover; + background-position:center; + color: #f5f6fa; + text-align: center; + align-items:center; + flex: 1; + justify-content: center; + display: flex; + flex-direction: column;*/ + + background:#6B0F9C; + box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1); + color:white; + text-align: center; + align-items:center; + /* Safari transitionend event.propertyName === flex */ + /* Chrome + FF transitionend event.propertyName === flex-grow */ + transition: + font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), + flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), + background 0.2s; + font-size: 20px; + background-size:cover; + background-position:center; + flex: 1; +} + +.panel1 { background-image: url(img/panel1.jpeg); } +.panel2 { background-image: url(img/panel2.jpeg); } +.panel3 { background-image: url(img/panel3.jpeg); } +.panel4 { background-image: url(img/panel4.jpeg); } +.panel5 { background-image: url(img/panel5.jpeg); } + + + +.panel > * { + margin:0; + width: 100%; + transition:transform 0.5s; +} + +.panel p { + text-transform: uppercase; + font-family: 'Amatic SC', cursive; + text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45); + font-size: 2em; +} +.panel p:nth-child(2) { + font-size: 4em; +} + +.panel.open { + font-size:40px; +} \ No newline at end of file diff --git a/05 - Flex Panel Gallery/style.css b/05 - Flex Panel Gallery/style.css new file mode 100644 index 0000000000..8cc97d1eaa --- /dev/null +++ b/05 - Flex Panel Gallery/style.css @@ -0,0 +1,87 @@ +html { + box-sizing: border-box; + background:#ffc600; + font-family:'helvetica neue'; + font-size: 20px; + font-weight: 200; +} +body { + padding:0; + margin: 0; +} +*, *:before, *:after { + box-sizing: inherit; +} + +.panels { + min-height:100vh; + overflow: hidden; + display: flex; +} + +.panel { + background:#6B0F9C; + + box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1); + /* Safari transitionend event.propertyName === flex */ + /* Chrome + FF transitionend event.propertyName === flex-grow */ + transition: + font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), + flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), + background 0.2s; + color:white; + font-size: 20px; + text-align: center; + + background-size:cover; + background-position:center; + /*Flex*/ + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + + +/*Background Images for each panel*/ +.panel1 { background-image: url(img/panel1.jpeg); } +.panel2 { background-image: url(img/panel2.jpeg); } +.panel3 { background-image: url(img/panel3.jpeg); } +.panel4 { background-image: url(img/panel4.jpeg); } +.panel5 { background-image: url(img/panel5.jpeg); } + + +/* Flex Items */ +.panel > * { + margin:0; + width: 100%; + transition:transform 0.5s; + flex: 1 0 auto; + display:flex; + justify-content: center; + align-items: center; +} + + +.panel p { + text-transform: uppercase; + font-family: 'Amatic SC', cursive; + text-shadow:0 0 4px rgba(0, 0, 0, 0.72), + 0 0 14px rgba(0, 0, 0, 0.45); + font-size: 2em; +} + +.panel p:nth-child(2) { + font-size: 4em; +} + +.panel.open { + flex: 5; + font-size:40px; +} + +.panel > *:first-child { transform: translateY(-100%); } +.panel.open-active > *:first-child { transform: translateY(0); } +.panel > *:last-child { transform: translateY(100%); } +.panel.open-active > *:last-child { transform: translateY(0); } \ No newline at end of file