diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html index 1a16d0997c..a6fa921f06 100644 --- a/01 - JavaScript Drum Kit/index-FINISHED.html +++ b/01 - JavaScript Drum Kit/index-FINISHED.html @@ -9,7 +9,7 @@
-
+
A clap
diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..343d1f8007 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -6,44 +6,47 @@ - - -
-
- A - clap -
-
- S - hihat -
-
- D - kick -
-
- F - openhat -
-
- G - boom -
-
- H - ride -
-
- J - snare -
-
- K - tom -
-
- L - tink +
+

#JavaScript30 Drum Example

+
+
+
+
A
+
Clap
+
+
+
S
+
HiHat
+
+
+
D
+
Kick
+
+
+
F
+
OpenHat
+
+
+
G
+
Boom
+
+
+
H
+
Ride
+
+
+
J
+
Snare
+
+
+
K
+
Tom
+
+
+
L
+
Tink
+
+
@@ -59,6 +62,37 @@ diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css index 3e0a320b37..8fb4122518 100644 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum Kit/style.css @@ -1,50 +1,68 @@ -html { - font-size: 10px; - background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center; +html, +body { + height: 100%; +} + +body { + background: url(http://pearldrum.com/common/assets/images/background.jpg); + background-position: center center; background-size: cover; + background-repeat: no-repeat; } -body,html { - margin: 0; - padding: 0; - font-family: sans-serif; +.layer { + background-color: rgba(85, 85, 85, 0.7); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } -.keys { - display:flex; - flex:1; - min-height:100vh; - align-items: center; - justify-content: center; +h1 { + color: white; + text-transform: uppercase; + text-align: center; + text-shadow: 2px 2px 2px black; } -.key { - border:4px solid black; - border-radius:5px; - margin:1rem; - font-size: 1.5rem; - padding:1rem .5rem; - transition:all .07s; - width:100px; +.drums { + margin-top: 50px; + width: 100%; + height: 100px; + margin: 120px auto; +} +.drums .drumkit { text-align: center; - color:white; - background:rgba(0,0,0,0.4); - text-shadow:0 0 5px black; + vertical-align: middle; } - -.playing { - transform:scale(1.1); - border-color:#ffc600; - box-shadow: 0 0 10px #ffc600; +.drum { + border: 4px solid black; + width: 90px; + height: 80px; + display: inline-block; + margin: 10px; + vertical-align: middle; + background-color: rgba(0, 0, 0, 0.5); + border-radius: 5px; + transition: all 0.6s; } - -kbd { +.drum:hover, .drum.playing { + box-shadow: 0 0 10px #fff; + transform: scale(1.05); +} +.drum-note { display: block; - font-size: 40px; + text-transform: uppercase; + margin-top: 10px; + color: white; + font-family: serif; + font-weight: bold; + font-size: 20px; } - -.sound { - font-size: 1.2rem; +.drum-sound { text-transform: uppercase; - letter-spacing: 1px; - color:#ffc600; + margin-top: 10px; + color: #ffc600; + font-size: 12px; } + diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 259280d228..ff218f8712 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -6,6 +6,7 @@ +

JS + CSS CLOCK

@@ -61,12 +62,46 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.05s; + transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); } diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index bf0f33e3ba..0f856b84c0 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -12,10 +12,10 @@

Update CSS Variables with JS

- + - +
@@ -25,6 +25,21 @@

Update CSS Variables with JS

/* misc styles, nothing to do with CSS variables */ + :root { + --base: #61f568; + --spacing: 10px; + --blur: 0px; + } + + img { + padding: var(--spacing); + background: var(--base); + filter: blur(var(--blur)); + } + + .hl { + color: var(--base); + } body { text-align: center; @@ -53,6 +68,16 @@

Update CSS Variables with JS

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 089352c8a6..7846d1c9a7 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -1,7 +1,7 @@ - + Array Cardio πŸ’ͺ @@ -12,44 +12,105 @@ // Some data we can work with 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: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }, // 76 + { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 }, // 84 + { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 }, // 78 + { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 }, // 67 + { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 }, // 59 + { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }, // 70 + { first: 'Max', last: 'Planck', year: 1858, passed: 1947 }, // 89 ]; const flavours = ['Chocolate Chip', 'Kulfi', 'Caramel Praline', 'Chocolate', 'Burnt Caramel', 'Pistachio', 'Rose', 'Sweet Coconut', 'Lemon Cookie', 'Toffeeness', 'Toasted Almond', 'Black Raspberry Crunch', 'Chocolate Brownies', 'Pistachio Almond', 'Strawberry', 'Lavender Honey', 'Lychee', 'Peach', 'Black Walnut', 'Birthday Cake', 'Mexican Chocolate', 'Mocha Almond Fudge', 'Raspberry']; - 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']; + const people = ['Beck, Glenn', 'Blair, Tony', 'Berry, Halle', 'Berne, Eric', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Becker, Carl', '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', 'Belloc, Hilaire', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berger, Ric', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black Elk', 'Blair, Robert', 'Blake, William', 'Beckett, Samuel']; // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + const fifteen = inventors.filter((inventor) => { + if (inventor.year >= 1500 && inventor.year <= 1599) { + return true; + } + }); + console.table(fifteen); + // Array.prototype.map() // 2. Give us an array of the inventory first and last names + const fullNames = inventors.map((inventor) => `${inventor.first} ${inventor.last}`); + console.log(fullNames); + // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const sortedInvetors = inventors.sort((firstPerson, lastPerson) => { + const birthAge = firstPerson.passed - firstPerson.year; + const secondAge = lastPerson.passed - lastPerson.year; + + return secondAge > birthAge ? 1 : -1; + + }); + console.table(sortedInvetors); + // Array.prototype.reduce() // 4. How many years did all the inventors live? + const lifeSpan = inventors.reduce((total, inventor) => { + return total + (inventor.passed - inventor.year) + }, 0); + + console.log(lifeSpan); + // 5. Sort the inventors by years lived + const yearsLived = inventors.sort((first, second) => { + const lastGuy = first.passed - first.year; + const nextGuy = second.passed - second.year; + + return lastGuy > nextGuy ? -1 : 1; + }); + + console.table(yearsLived); + // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris + // gets class + //const boulevards = document.querySelector('.mw-category'); + // uses spread operator, spreads all links into an array + //const links = Array.from(boulevards.querySelectorAll('a')); + + //const de = links.map((link) => link.textContent); + + // const streetFilter = de.filter((streetName) => { + // return streetName.includes('de'); + // }); // 7. sort Exercise // Sort the people alphabetically by last name + const alphaBetical = people.sort((last, first) => { + const [aLast, aFirst] = last.split(', '); + const [bLast, bFirst] = first.split(', '); + + return aLast > bLast ? 1 : -1; + }); + + console.log(alphaBetical); // 8. Reduce Exercise // Sum up the instances of each of these - const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ]; + const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck', 'cooper' ]; + + const numVehichles = data.reduce((obj, val) => { + if (!obj[val]) { + obj[val] = 0; + } + obj[val]++; + return obj; + }, {}); + console.log(numVehichles); diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..db3f216373 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -3,7 +3,7 @@ Flex Panels πŸ’ͺ - + +
+

What is the secret code?

+ + +
diff --git a/14 - JavaScript References VS Copying/index-START.html b/14 - JavaScript References VS Copying/index-START.html index 4da1bac2ea..f8ae9760da 100644 --- a/14 - JavaScript References VS Copying/index-START.html +++ b/14 - JavaScript References VS Copying/index-START.html @@ -8,14 +8,34 @@ diff --git a/Carousel/img/card-svg.1.svg b/Carousel/img/card-svg.1.svg new file mode 100644 index 0000000000..7b9cc9c327 --- /dev/null +++ b/Carousel/img/card-svg.1.svg @@ -0,0 +1,31 @@ + + + + + + + + + + Blast HardCheese + 1234 5678 9012 3456 + THe BANK + + + + + + + + diff --git a/Carousel/img/card-svg.2.svg b/Carousel/img/card-svg.2.svg new file mode 100644 index 0000000000..02f14852ca --- /dev/null +++ b/Carousel/img/card-svg.2.svg @@ -0,0 +1,31 @@ + + + + + + + + + + Blast HardCheese + 1234 5678 9012 3456 + THe BANK + + + + + + + + diff --git a/Carousel/img/card-svg.3.svg b/Carousel/img/card-svg.3.svg new file mode 100644 index 0000000000..c6b4a3c167 --- /dev/null +++ b/Carousel/img/card-svg.3.svg @@ -0,0 +1,31 @@ + + + + + + + + + + Blast HardCheese + 1234 5678 9012 3456 + THe BANK + + + + + + + + diff --git a/Carousel/img/card-svg.svg b/Carousel/img/card-svg.svg new file mode 100644 index 0000000000..8ecc50304c --- /dev/null +++ b/Carousel/img/card-svg.svg @@ -0,0 +1,31 @@ + + + + + + + + + + Blast HardCheese + 1234 5678 9012 3456 + THe BANK + + + + + + + + diff --git a/Carousel/index.html b/Carousel/index.html new file mode 100644 index 0000000000..b098778d21 --- /dev/null +++ b/Carousel/index.html @@ -0,0 +1,34 @@ + + + + + + + + Carousel + + + + +
+

Card Carousel

+
+
+ + + + +
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/Carousel/index.js b/Carousel/index.js new file mode 100644 index 0000000000..37cdbfa0d0 --- /dev/null +++ b/Carousel/index.js @@ -0,0 +1,81 @@ +const cardCarousel = document.querySelector('.card_container'); +const buttons = [].slice.call(document.querySelectorAll('.page')); +const cards = [].slice.call(document.querySelectorAll('.card')); + +let count = 0; +let previous; +let paused = false; +let carouselInterval; + +const onLoad = () => { + buttons[0].classList.add('active'); + cards[0].classList.add('active'); + setTimeout(() => { + console.log('πŸ‘€ πŸ‘€ πŸ‘€ πŸ‘€ πŸ‘€'); + playAnimation(); + }, 100); +} + +function stopAnimation(cardCarousel) { + console.log('⏱⏱⏱⏱⏱⏱⏱⏱'); + cardCarousel.classList.add('paused'); + return clearInterval(carouselInterval); +} + +function playAnimation() { + console.log('πŸƒπŸƒπŸƒπŸƒπŸƒπŸƒπŸƒπŸƒπŸƒ'); + clearInterval(carouselInterval); + carouselInterval = setInterval(() => { + autoLoop(); + }, 2500); +} + +const activeCards = (event) => { + cards.forEach((card) => { + if (card.getAttribute('data-id') === event.getAttribute('data-id')) { + card.classList.add('active'); + } else { + card.classList.remove('active'); + } + }); +}; + +const activeButtons = (event) => { + paused = true; + event.preventDefault(); + + if (paused) { + stopAnimation(cardCarousel); + } + + buttons.forEach((button) => { + button.classList.remove('active'); + button.setAttribute('aria-selected', 'false'); + }); + + const activeButton = event.target; + activeCards(activeButton); + activeButton.classList.add('active'); + activeButton.setAttribute('aria-selected', 'true'); +}; + +function autoLoop() { + previous = count > 0 ? count - 1 : 0; + buttons[previous].classList.toggle('active'); + cards[previous].classList.toggle('active'); + + if (count < buttons.length) { + buttons[count].classList.add('active'); + cards[count].classList.add('active'); + count++; + } else { + count = 0; + autoLoop(); + } +} + +function startListening() { window.addEventListener('load', onLoad); } + +buttons.forEach(button => button.addEventListener('click', activeButtons)); + +startListening(); \ No newline at end of file diff --git a/Carousel/style.css b/Carousel/style.css new file mode 100644 index 0000000000..38fa320b29 --- /dev/null +++ b/Carousel/style.css @@ -0,0 +1,99 @@ +html, body { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +main { + background-color: #eee; + height: 850px; + padding: 40px; +} + +h1 { + margin: 0; + text-align: center; + font-family: arial; + text-shadow: 1px 0px 5px gray; +} + +.card_carousel_container { + position: relative; + height: 450px; + margin: 40px; +} + +.card { + width: 300px; + height: auto; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, 0, 0); + z-index: 0; + transform: scale(1); +} + +.card_pagination { + display: grid; + grid-template-columns: repeat(4, 50px); + grid-auto-rows: auto; + grid-gap: 1em; + padding: 20px; + grid-column: 4; + grid-row: 4; +} + +.card.active { + z-index: 1; + transform: scale(1.25); + transition-duration: 200ms; + transition-timing-function: cubic-bezier(.17, .67, .92, .3); +} + +.card_container { + position: relative; + height: 450px; + margin: 40px; + display: grid; + grid-template-columns: repeat(8, 80px) 20%; + grid-template-rows: 20% auto 200px; +} + +.card.one { + grid-column: 3; + grid-row: 2; + transform: rotate(-12deg); +} + +.card.two { + grid-column: 3; + grid-row: 2; + transform: rotate(12deg); +} + +.card.three { + grid-column: 4; + grid-row: 2; + transform: rotate(-3deg); +} + +.card.four { + grid-column: 2; + grid-row: 2; + transform: rotate(3deg); +} + +.page { + width: 10px; + height: 10px; + border-radius: 50%; + background-color: black; +} + +.page:hover { + cursor: pointer; +} + +.page.active { + background-color: red; + transition: 300ms ease; +} diff --git a/Fetch/index.html b/Fetch/index.html new file mode 100644 index 0000000000..43960e026b --- /dev/null +++ b/Fetch/index.html @@ -0,0 +1,24 @@ + + + + + + + + MLB POSTSEASON SCHEDULE + + + + + +
+

Using Fetch

+
+

Post Season Scoreboard

+
    +
    +
    + + + + \ No newline at end of file diff --git a/Fetch/index.js b/Fetch/index.js new file mode 100644 index 0000000000..c588b54c67 --- /dev/null +++ b/Fetch/index.js @@ -0,0 +1,80 @@ +const games = document.querySelector('.games'); +const url = "http://gd2.mlb.com/components/game/mlb/year_2017/postseason_scoreboard.json" + +function createNode(element) { + return document.createElement(element); +} + +function append(parent, child) { + return parent.appendChild(child); +} + +fetch(url) + .then((resp) => resp.json()) + .then((data) => { + const game_data = data.games; + return game_data.map((game) => { + + console.log(game); + let game_container = createNode('div') + let home_team = createNode('div') + let home_score = createNode('p') + let away_team = createNode('div') + let away_score = createNode('p') + + + game_container.classList.add('game'); + home_team.classList.add('team'); + away_team.classList.add('team'); + + home_team.innerHTML = `${game.home_team_city} ${game.home_team_name}` + home_score.innerHTML = `${game.linescore.r.home}` + console.log(game.linescore.r.home); + away_score.innerHTML = `${game.linescore.r.away}` + away_team.innerHTML = `${game.away_team_city} ${game.away_team_name}` + + append(game_container, home_team); + append(home_team, home_score); + append(game_container, away_team); + append(away_team, away_score); + append(games, game_container); + }) + }) + .catch((err) => { + console.log(err) + }); + + console.log("LOADED"); + +// //const url = 'https://randomuser.me/api'; +// // The data we are going to send in our request +// let data = { +// name: 'Sara' +// } +// // The parameters we are gonna pass to the fetch function +// let fetchData = { +// method: 'POST', +// body: data, +// headers: new Headers() +// } +// fetch(url, fetchData) +// .then(function() { +// // Handle response you get from the server +// }); + +// const url = 'https://randomuser.me/api'; +// // The data we are going to send in our request +// let data = { +// name: 'Sara' +// } +// // Create our request constructor with all the parameters we need +// var request = new Request(url, { +// method: 'POST', +// body: data, +// headers: new Headers() +// }); + +// fetch(request) +// .then(function() { +// // Handle response we get from the API +// }) \ No newline at end of file diff --git a/Fetch/styles.css b/Fetch/styles.css new file mode 100644 index 0000000000..0e0af6d412 --- /dev/null +++ b/Fetch/styles.css @@ -0,0 +1,25 @@ +body { + padding: 0; + margin: 0; +} + +.container { + margin: 0 auto; + text-align: center; + padding: 40px; + background-color: gray; +} + +.game { + display: flex; +} + +.team { + flex: 1; + padding: 10px; +} + +ul { + padding-left: 0; + text-align: center; +} \ No newline at end of file diff --git a/Parallax/Parallax-2/img/phone.png b/Parallax/Parallax-2/img/phone.png new file mode 100644 index 0000000000..563fa2da1c Binary files /dev/null and b/Parallax/Parallax-2/img/phone.png differ diff --git a/Parallax/Parallax-2/img/phone_shadow.png b/Parallax/Parallax-2/img/phone_shadow.png new file mode 100644 index 0000000000..671906931b Binary files /dev/null and b/Parallax/Parallax-2/img/phone_shadow.png differ diff --git a/Parallax/Parallax-2/img/shape_1.svg b/Parallax/Parallax-2/img/shape_1.svg new file mode 100644 index 0000000000..071f013cd9 --- /dev/null +++ b/Parallax/Parallax-2/img/shape_1.svg @@ -0,0 +1,3 @@ + + + diff --git a/Parallax/Parallax-2/img/shape_2.svg b/Parallax/Parallax-2/img/shape_2.svg new file mode 100644 index 0000000000..7d4e66de61 --- /dev/null +++ b/Parallax/Parallax-2/img/shape_2.svg @@ -0,0 +1,3 @@ + + + diff --git a/Parallax/Parallax-2/img/shape_3.svg b/Parallax/Parallax-2/img/shape_3.svg new file mode 100644 index 0000000000..c197e691dc --- /dev/null +++ b/Parallax/Parallax-2/img/shape_3.svg @@ -0,0 +1,3 @@ + + + diff --git a/Parallax/Parallax-2/img/shape_4.svg b/Parallax/Parallax-2/img/shape_4.svg new file mode 100644 index 0000000000..ab66448861 --- /dev/null +++ b/Parallax/Parallax-2/img/shape_4.svg @@ -0,0 +1,3 @@ + + + diff --git a/Parallax/Parallax-2/index.html b/Parallax/Parallax-2/index.html new file mode 100644 index 0000000000..f6fd40930a --- /dev/null +++ b/Parallax/Parallax-2/index.html @@ -0,0 +1,149 @@ + + + + + + Parallax for Designers + + + + + + + +
    +
    +
    +
    +

    Picture

    +
    +
    +
    +
    + +
    +
    +
    + +
    +
    + +
    +
    + phone + phone shadow +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    +
    + + + + + \ No newline at end of file diff --git a/Parallax/Parallax-2/style.css b/Parallax/Parallax-2/style.css new file mode 100644 index 0000000000..a6ce7e519e --- /dev/null +++ b/Parallax/Parallax-2/style.css @@ -0,0 +1,110 @@ +body { + padding: 0; + margin: 0; + font-family: sans-serif; + background: #f2f2f2; +} + +#page { + width: 100%; + height: 100%; +} + +.block { + width: 100%; + color: white; + text-transform: uppercase; + font-size: 20px; + height: 800px; + background-attachment: fixed; + background-position: 50% 50%; +} + +.container { + display: flex; + margin: 0 auto; + height: 100%; + align-items: center; +} + +img { + max-width: 100%; +} + +.block .moving { + perspective: 1000px; +} + +.block h2 { + text-align: center; + margin: 0 auto; + text-shadow: 0px 5px 5px black; +} + +.animation-container { + position: relative; + left: 20%; +} +.phone_container { + position: relative; + z-index: 10; +} +.animate { + position: absolute; +} + + +polygon { + mix-blend-mode: screen; +} + +.isolate { + isolation: isolate; +} + +img { + background-blend-mode: multiply; + +} +.up { + top: 30%; + left: -20%; +} + +.left { + left: -10%; + top: -5%; +} + +.down { + bottom: 0; + right: -10%; +} + +.right { + top: 45%; + right: -5%; +} + +.shadow { + position: absolute; + bottom: -135px; + left: 41px; + max-width: 100%; + +} +.phone { + max-width: 100%; + width: 300px; + height: auto; + animation: bounce 1s linear infinite; +} + +@keyframes bounce { + 0% { + transform: translateY(100deg); + } + 100% { + transform: translateY(0deg); + } +} diff --git a/Parallax/img/phone.png b/Parallax/img/phone.png new file mode 100644 index 0000000000..563fa2da1c Binary files /dev/null and b/Parallax/img/phone.png differ diff --git a/Parallax/img/phone_shadow.png b/Parallax/img/phone_shadow.png new file mode 100644 index 0000000000..671906931b Binary files /dev/null and b/Parallax/img/phone_shadow.png differ diff --git a/Parallax/img/shape_1.svg b/Parallax/img/shape_1.svg new file mode 100644 index 0000000000..285b3413d9 --- /dev/null +++ b/Parallax/img/shape_1.svg @@ -0,0 +1,3 @@ + + + diff --git a/Parallax/img/shape_2.svg b/Parallax/img/shape_2.svg new file mode 100644 index 0000000000..e38bbd2f1f --- /dev/null +++ b/Parallax/img/shape_2.svg @@ -0,0 +1,3 @@ + + + diff --git a/Parallax/img/shape_3.svg b/Parallax/img/shape_3.svg new file mode 100644 index 0000000000..f5b09b8717 --- /dev/null +++ b/Parallax/img/shape_3.svg @@ -0,0 +1,3 @@ + + + diff --git a/Parallax/img/shape_4.svg b/Parallax/img/shape_4.svg new file mode 100644 index 0000000000..0ba75f8484 --- /dev/null +++ b/Parallax/img/shape_4.svg @@ -0,0 +1,3 @@ + + + diff --git a/Parallax/index.html b/Parallax/index.html new file mode 100644 index 0000000000..58f0dde40f --- /dev/null +++ b/Parallax/index.html @@ -0,0 +1,157 @@ + + + + + + Parallax for Designers + + + + + + + +
    +
    +
    +
    +

    Picture

    +
    +
    +
    +
    + +
    +
    +
    + +
    +
    + +
    +
    + phone + phone shadow +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    +

    Scrolling

    +
    +
    + +
    +
    +
    +

    Picture

    +
    +
    +
    + +
    +
    +
    +

    Me

    +
    +
    +
    +
    +
    +
    +

    Scrolling

    +
    +
    +
    +
    +
    +
    + + + + + \ No newline at end of file diff --git a/Parallax/style.css b/Parallax/style.css new file mode 100644 index 0000000000..c9855678d7 --- /dev/null +++ b/Parallax/style.css @@ -0,0 +1,105 @@ +body { + padding: 0; + margin: 0; + font-family: sans-serif; +} + +#page { + width: 100%; + height: 100%; +} + +.block { + width: 100%; + color: white; + text-transform: uppercase; + font-size: 20px; + background: #ff7400; + height: 800px; + background-attachment: fixed; + background-position: 50% 50%; +} + +.container { + display: flex; + margin: 0 auto; + height: 100%; + align-items: center; +} + +img { + max-width: 100%; +} + +.block .moving { + perspective: 1000px; +} + +.block h2 { + text-align: center; + margin: 0 auto; + text-shadow: 0px 5px 5px black; +} + +.animation-container { + position: relative; + left: 20%; +} +.phone_container { + position: relative; + z-index: 10; +} +.animate { + position: absolute; +} + +.up { + top: 30%; + left: -20%; +} + +.left { + left: -10%; + top: -5%; +} + +.down { + bottom: 0; + right: -10%; +} + +.right { + top: 45%; + right: -5%; +} +.shadow { + position: absolute; + bottom: -135px; + left: 41px; + max-width: 100%; + +} +.phone { + max-width: 100%; + width: 300px; + height: auto; +} +.block.one { + background-color: purple; + background-attachment: fixed; +} +.block.two { + background-color: white; +} +.block.three { + background-color: #ff7400; +} +.block.four { + background-color: purple; +} +.block.five { + background-color: black; +} +.block.five { + background-color: purple; +}