start process of updating youtube videos on live-pair-programming
This commit is contained in:
Michael Q Larson
@ -2,6 +2,7 @@ var User = require('../models/User'),
|
|||||||
resources = require('./resources.json'),
|
resources = require('./resources.json'),
|
||||||
questions = resources.questions,
|
questions = resources.questions,
|
||||||
steps = resources.steps,
|
steps = resources.steps,
|
||||||
|
youtubes = resources.youtubes,
|
||||||
secrets = require('./../config/secrets'),
|
secrets = require('./../config/secrets'),
|
||||||
Challenge = require('./../models/Challenge'),
|
Challenge = require('./../models/Challenge'),
|
||||||
bonfires = require('../seed_data/bonfires.json');
|
bonfires = require('../seed_data/bonfires.json');
|
||||||
@ -86,7 +87,8 @@ module.exports = {
|
|||||||
|
|
||||||
livePairProgramming: function(req, res) {
|
livePairProgramming: function(req, res) {
|
||||||
res.render('resources/live-pair-programming', {
|
res.render('resources/live-pair-programming', {
|
||||||
title: 'Live Pair Programming'
|
title: 'Live Pair Programming',
|
||||||
|
youtubes: youtubes
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@ -1,122 +1,162 @@
|
|||||||
{
|
{
|
||||||
"questions": [{
|
"questions": [
|
||||||
"question": "Time Complexity of Accessing Array Index (int a = ARR[5];)",
|
{
|
||||||
"answer": "O(1)"
|
"question": "Time Complexity of Accessing Array Index (int a = ARR[5];)",
|
||||||
}, {
|
"answer": "O(1)"
|
||||||
"question": "Time Complexity of Inserting a node in Linked List",
|
},
|
||||||
"answer": "O(1)"
|
{
|
||||||
}, {
|
"question": "Time Complexity of Inserting a node in Linked List",
|
||||||
"question": "Time Complexity of Pushing and Popping on Stack",
|
"answer": "O(1)"
|
||||||
"answer": "O(1)"
|
},
|
||||||
}, {
|
{
|
||||||
"question": "Time Complexity of Insertion and Removal from Queue",
|
"question": "Time Complexity of Pushing and Popping on Stack",
|
||||||
"answer": "O(1)"
|
"answer": "O(1)"
|
||||||
}, {
|
},
|
||||||
"question": "Time Complexity of Finding out the parent or left/right child of a node in a tree stored in Array",
|
{
|
||||||
"answer": "O(1)"
|
"question": "Time Complexity of Insertion and Removal from Queue",
|
||||||
}, {
|
"answer": "O(1)"
|
||||||
"question": "Time Complexity of Jumping to Next/Previous element in Doubly Linked List",
|
},
|
||||||
"answer": "O(1)"
|
{
|
||||||
}, {
|
"question": "Time Complexity of Finding out the parent or left/right child of a node in a tree stored in Array",
|
||||||
"question": "Time Complexity of Traversing an array",
|
"answer": "O(1)"
|
||||||
"answer": "O(n)"
|
},
|
||||||
}, {
|
{
|
||||||
"question": "Time Complexity of Traversing a linked list",
|
"question": "Time Complexity of Jumping to Next/Previous element in Doubly Linked List",
|
||||||
"answer": "O(n)"
|
"answer": "O(1)"
|
||||||
}, {
|
},
|
||||||
"question": "Time Complexity of Linear Search",
|
{
|
||||||
"answer": "O(n)"
|
"question": "Time Complexity of Traversing an array",
|
||||||
}, {
|
"answer": "O(n)"
|
||||||
"question": "Time Complexity of Deletion of a specific element in a Linked List (Not sorted)",
|
},
|
||||||
"answer": "O(n)"
|
{
|
||||||
}, {
|
"question": "Time Complexity of Traversing a linked list",
|
||||||
"question": "Time Complexity of Comparing two strings",
|
"answer": "O(n)"
|
||||||
"answer": "O(n)"
|
},
|
||||||
}, {
|
{
|
||||||
"question": "Time Complexity of Checking for Palindrome",
|
"question": "Time Complexity of Linear Search",
|
||||||
"answer": "O(n)"
|
"answer": "O(n)"
|
||||||
}, {
|
},
|
||||||
"question": "Time Complexity of Counting/Bucket Sort",
|
{
|
||||||
"answer": "O(n)"
|
"question": "Time Complexity of Deletion of a specific element in a Linked List (Not sorted)",
|
||||||
}, {
|
"answer": "O(n)"
|
||||||
"question": "Time Complexity of Binary Search",
|
},
|
||||||
"answer": "O(log n)"
|
{
|
||||||
}, {
|
"question": "Time Complexity of Comparing two strings",
|
||||||
"question": "Time Complexity of Finding largest/smallest number in a binary search tree",
|
"answer": "O(n)"
|
||||||
"answer": "O(log n)"
|
},
|
||||||
}, {
|
{
|
||||||
"question": "Time Complexity of Certain Divide and Conquer Algorithms based on Linear functionality",
|
"question": "Time Complexity of Checking for Palindrome",
|
||||||
"answer": "O(log n)"
|
"answer": "O(n)"
|
||||||
}, {
|
},
|
||||||
"question": "Time Complexity of Calculating Fibonacci Numbers - Best Method",
|
{
|
||||||
"answer": "O(log n)"
|
"question": "Time Complexity of Counting/Bucket Sort",
|
||||||
}, {
|
"answer": "O(n)"
|
||||||
"question": "Time Complexity of Merge Sort",
|
},
|
||||||
"answer": "O(nlogn)"
|
{
|
||||||
}, {
|
"question": "Time Complexity of Binary Search",
|
||||||
"question": "Time Complexity of Heap Sort",
|
"answer": "O(log n)"
|
||||||
"answer": "O(nlogn)"
|
},
|
||||||
}, {
|
{
|
||||||
"question": "Time Complexity of Quick Sort",
|
"question": "Time Complexity of Finding largest/smallest number in a binary search tree",
|
||||||
"answer": "O(nlogn)"
|
"answer": "O(log n)"
|
||||||
}, {
|
},
|
||||||
"question": "Time Complexity of Certain Divide and Conquer Algorithms based on optimizing O(n^2) algorithms",
|
{
|
||||||
"answer": "O(nlogn)"
|
"question": "Time Complexity of Certain Divide and Conquer Algorithms based on Linear functionality",
|
||||||
}, {
|
"answer": "O(log n)"
|
||||||
"question": "Time Complexity of Bubble Sort",
|
},
|
||||||
"answer": "O(n^2)"
|
{
|
||||||
}, {
|
"question": "Time Complexity of Calculating Fibonacci Numbers - Best Method",
|
||||||
"question": "Time Complexity of Insertion Sort",
|
"answer": "O(log n)"
|
||||||
"answer": "O(n^2)"
|
},
|
||||||
}, {
|
{
|
||||||
"question": "Time Complexity of Selection Sort",
|
"question": "Time Complexity of Merge Sort",
|
||||||
"answer": "O(n^2)"
|
"answer": "O(nlogn)"
|
||||||
}, {
|
},
|
||||||
"question": "Time Complexity of Traversing a simple 2D array",
|
{
|
||||||
"answer": "O(n^2)"
|
"question": "Time Complexity of Heap Sort",
|
||||||
}, {
|
"answer": "O(nlogn)"
|
||||||
"question": "Latency of L1 cache reference",
|
},
|
||||||
"answer": "0.5 nanoseconds"
|
{
|
||||||
}, {
|
"question": "Time Complexity of Quick Sort",
|
||||||
"question": "Latency of Branch mispredict",
|
"answer": "O(nlogn)"
|
||||||
"answer": "5 nanoseconds"
|
},
|
||||||
}, {
|
{
|
||||||
"question": "Latency of L2 cache reference",
|
"question": "Time Complexity of Certain Divide and Conquer Algorithms based on optimizing O(n^2) algorithms",
|
||||||
"answer": "7 nanoseconds"
|
"answer": "O(nlogn)"
|
||||||
}, {
|
},
|
||||||
"question": "Latency of Mutex lock/unlock",
|
{
|
||||||
"answer": "25 nanoseconds"
|
"question": "Time Complexity of Bubble Sort",
|
||||||
}, {
|
"answer": "O(n^2)"
|
||||||
"question": "Latency of Main memory reference",
|
},
|
||||||
"answer": "100 nanoseconds"
|
{
|
||||||
}, {
|
"question": "Time Complexity of Insertion Sort",
|
||||||
"question": "Latency of Compressing 1K bytes with Zippy",
|
"answer": "O(n^2)"
|
||||||
"answer": "3,000 nanoseconds"
|
},
|
||||||
}, {
|
{
|
||||||
"question": "Latency of Sending 1K bytes over a 1 Gbps network",
|
"question": "Time Complexity of Selection Sort",
|
||||||
"answer": "10,000 nanoseconds"
|
"answer": "O(n^2)"
|
||||||
}, {
|
},
|
||||||
"question": "Latency of Reading 4K randomly from SSD",
|
{
|
||||||
"answer": "150,000 nanoseconds"
|
"question": "Time Complexity of Traversing a simple 2D array",
|
||||||
}, {
|
"answer": "O(n^2)"
|
||||||
"question": "Latency of Reading 1 MB sequentially from memory",
|
},
|
||||||
"answer": "250,000 nanoseconds"
|
{
|
||||||
}, {
|
"question": "Latency of L1 cache reference",
|
||||||
"question": "Latency of a Round trip within the same datacenter",
|
"answer": "0.5 nanoseconds"
|
||||||
"answer": "500,000 nanoseconds"
|
},
|
||||||
}, {
|
{
|
||||||
"question": "Latency of Reading 1 MB sequentially from SSD",
|
"question": "Latency of Branch mispredict",
|
||||||
"answer": "1,000,000 nanoseconds"
|
"answer": "5 nanoseconds"
|
||||||
}, {
|
},
|
||||||
"question": "Latency of Disk seek",
|
{
|
||||||
"answer": "10,000,000 nanoseconds"
|
"question": "Latency of L2 cache reference",
|
||||||
}, {
|
"answer": "7 nanoseconds"
|
||||||
"question": "Latency of Reading 1 MB sequentially from disk",
|
},
|
||||||
"answer": "20,000,000 nanoseconds"
|
{
|
||||||
}, {
|
"question": "Latency of Mutex lock/unlock",
|
||||||
"question": "Latency of Sending a packet from California to the Netherlands and back",
|
"answer": "25 nanoseconds"
|
||||||
"answer": "150,000,000 nanoseconds"
|
},
|
||||||
}],
|
{
|
||||||
|
"question": "Latency of Main memory reference",
|
||||||
|
"answer": "100 nanoseconds"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"question": "Latency of Compressing 1K bytes with Zippy",
|
||||||
|
"answer": "3,000 nanoseconds"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"question": "Latency of Sending 1K bytes over a 1 Gbps network",
|
||||||
|
"answer": "10,000 nanoseconds"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"question": "Latency of Reading 4K randomly from SSD",
|
||||||
|
"answer": "150,000 nanoseconds"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"question": "Latency of Reading 1 MB sequentially from memory",
|
||||||
|
"answer": "250,000 nanoseconds"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"question": "Latency of a Round trip within the same datacenter",
|
||||||
|
"answer": "500,000 nanoseconds"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"question": "Latency of Reading 1 MB sequentially from SSD",
|
||||||
|
"answer": "1,000,000 nanoseconds"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"question": "Latency of Disk seek",
|
||||||
|
"answer": "10,000,000 nanoseconds"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"question": "Latency of Reading 1 MB sequentially from disk",
|
||||||
|
"answer": "20,000,000 nanoseconds"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"question": "Latency of Sending a packet from California to the Netherlands and back",
|
||||||
|
"answer": "150,000,000 nanoseconds"
|
||||||
|
}
|
||||||
|
],
|
||||||
"steps": [
|
"steps": [
|
||||||
"In the spirit of keeping Free Code Camp 100% free, we've created directions for using a totally free pair programming tool called Team Viewer. It's not as user-friendly as Screen Hero, but it gets the job done (and works on Linux!).",
|
"In the spirit of keeping Free Code Camp 100% free, we've created directions for using a totally free pair programming tool called Team Viewer. It's not as user-friendly as Screen Hero, but it gets the job done (and works on Linux!).",
|
||||||
"Go to <a href='http://www.teamviewer.com/en/index.aspx' target='_blank'>http://www.teamviewer.com/en/index.aspx</a> and download Team Viewer. Be sure not to download the beta version, which isn't compatible with the current stable version everyone else will be using.",
|
"Go to <a href='http://www.teamviewer.com/en/index.aspx' target='_blank'>http://www.teamviewer.com/en/index.aspx</a> and download Team Viewer. Be sure not to download the beta version, which isn't compatible with the current stable version everyone else will be using.",
|
||||||
@ -220,7 +260,8 @@
|
|||||||
"Most triumphant!",
|
"Most triumphant!",
|
||||||
"One loop to rule them all!",
|
"One loop to rule them all!",
|
||||||
"Ain't got time to bleed!",
|
"Ain't got time to bleed!",
|
||||||
"By the power of Grayskull!"
|
"By the power of Grayskull!",
|
||||||
|
"Cowabunga!"
|
||||||
],
|
],
|
||||||
"phrases": [
|
"phrases": [
|
||||||
"Shout it from on top of a mountain",
|
"Shout it from on top of a mountain",
|
||||||
@ -234,5 +275,37 @@
|
|||||||
"Prove to mom that computers aren't just for games",
|
"Prove to mom that computers aren't just for games",
|
||||||
"With coding power comes sharing responsibility",
|
"With coding power comes sharing responsibility",
|
||||||
"Have you told your friends of your coding powers?"
|
"Have you told your friends of your coding powers?"
|
||||||
|
],
|
||||||
|
"youtubes": [
|
||||||
|
[
|
||||||
|
"CoderByte: Simple Mode",
|
||||||
|
"Live Pair Programming session with @terakilobyte and @Rybar from 01/16/2015.",
|
||||||
|
"_BErpDdmBOw"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"CoderByte: Letter Count",
|
||||||
|
"Live Pair Programming session with @terakilobyte and @Rybar from 01/16/2015.",
|
||||||
|
"Fn9HMn79KH0"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"CoderByte: Caesar Cipher",
|
||||||
|
"Live Pair Programming session with @terakilobyte and @Rybar from 01/16/2015.",
|
||||||
|
"S7iRBZJwOAs"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"CoderByte: Arith Geo II",
|
||||||
|
"Live Pair Programming session with @terakilobyte and @Rybar from 01/16/2015.",
|
||||||
|
"BHNRg39ZblE"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"CoderByte: First Reverse",
|
||||||
|
"Live Pair Programming session with @terakilobyte and @Rybar from 01/16/2015.",
|
||||||
|
"YDfkHlDmehA"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"CoderByte: Array Addition",
|
||||||
|
"Live Pair Programming session with @terakilobyte and @Rybar from 01/16/2015.",
|
||||||
|
"EK3r9CTkUTo"
|
||||||
|
]
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@ -10,32 +10,249 @@ block content
|
|||||||
.col-md-8.col-xs-12
|
.col-md-8.col-xs-12
|
||||||
.embed-responsive.embed-responsive-16by9
|
.embed-responsive.embed-responsive-16by9
|
||||||
iframe(src='http://www.twitch.tv/freecodecamp/embed', frameborder='0', scrolling='no')
|
iframe(src='http://www.twitch.tv/freecodecamp/embed', frameborder='0', scrolling='no')
|
||||||
|
br
|
||||||
h1 Previous Live Pair Programming Sessions
|
h1 Previous Live Pair Programming Sessions
|
||||||
.col-xs-12
|
link(href='http://fonts.googleapis.com/css?family=Raleway:400,800,500,600', rel='stylesheet', type='text/css')
|
||||||
.embed-responsive.embed-responsive-16by9.big-break
|
style.
|
||||||
iframe.embed-responsive-item(src='//www.youtube.com/embed/_BErpDdmBOw')
|
@font-face {
|
||||||
h3.wrappable link:
|
font-weight: normal;
|
||||||
a(href="http://www.youtube.com/watch/_BErpDdmBOw") http://www.youtube.com/watch/_BErpDdmBOw
|
font-style: normal;
|
||||||
.embed-responsive.embed-responsive-16by9.big-break
|
font-family: 'codropsicons';
|
||||||
iframe.embed-responsive-item(src='//www.youtube.com/embed/Fn9HMn79KH0')
|
src: url('../fonts/codropsicons/codropsicons.eot');
|
||||||
h3.wrappable link:
|
src: url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
|
||||||
a(href="http://www.youtube.com/watch/Fn9HMn79KH0") http://www.youtube.com/watch/Fn9HMn79KH0
|
url('../fonts/codropsicons/codropsicons.woff') format('woff'),
|
||||||
.embed-responsive.embed-responsive-16by9.big-break
|
url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
|
||||||
iframe.embed-responsive-item(src='//www.youtube.com/embed/S7iRBZJwOAs')
|
url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
|
||||||
h3.wrappable link:
|
}
|
||||||
a(href="http://www.youtube.com/watch/S7iRBZJwOAs") http://www.youtube.com/watch/S7iRBZJwOAs
|
|
||||||
.embed-responsive.embed-responsive-16by9.big-break
|
*, *:after, *:before {
|
||||||
iframe.embed-responsive-item(src='//www.youtube.com/embed/BHNRg39ZblE')
|
-webkit-box-sizing: border-box;
|
||||||
h3.wrappable link:
|
box-sizing: border-box;
|
||||||
a(href="http://www.youtube.com/watch/BHNRg39ZblE") http://www.youtube.com/watch/BHNRg39ZblE
|
}
|
||||||
.embed-responsive.embed-responsive-16by9.big-break
|
|
||||||
iframe.embed-responsive-item(src='//www.youtube.com/embed/YDfkHlDmehA')
|
.clearfix:before, .clearfix:after {
|
||||||
h3.wrappable link:
|
display: table;
|
||||||
a(href="http://www.youtube.com/watch/YDfkHlDmehA") http://www.youtube.com/watch/YDfkHlDmehA
|
content: '';
|
||||||
h3 Got 3 minutes? Learn to code with us!
|
}
|
||||||
a.btn.btn-cta.signup-btn.btn-primary(href="/login") Start learning to code (it's free)
|
|
||||||
br
|
.clearfix:after {
|
||||||
br
|
clear: both;
|
||||||
br
|
}
|
||||||
br
|
|
||||||
br
|
a {
|
||||||
|
outline: none;
|
||||||
|
color: #3498db;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover, a:focus {
|
||||||
|
color: #528cb3;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
padding: 1em;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin: 0 auto;
|
||||||
|
/*max-width: 1000px;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.content > h2 {
|
||||||
|
text-align: center;
|
||||||
|
clear: both;
|
||||||
|
margin: 0;
|
||||||
|
padding: 4em 1% 0;
|
||||||
|
color: #eee;
|
||||||
|
background-color: #215f1e;
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content > h2:first-child {
|
||||||
|
padding-top: 0em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 25em) {
|
||||||
|
.codrops-header {
|
||||||
|
font-size: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.codrops-icon span {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
position: relative;
|
||||||
|
clear: both;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1em 0 4em;
|
||||||
|
/*max-width: 1000px;*/
|
||||||
|
list-style: none;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Common style */
|
||||||
|
.grid figure {
|
||||||
|
position: relative;
|
||||||
|
float: left;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 10px 1%;
|
||||||
|
/*min-width: 320px;*/
|
||||||
|
/*max-width: 480px;*/
|
||||||
|
max-height: 360px;
|
||||||
|
/*width: 48%;*/
|
||||||
|
height: auto;
|
||||||
|
background: #3085a3;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid figure img {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
min-height: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid figure figcaption {
|
||||||
|
padding: 2em;
|
||||||
|
color: #fff;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 1.25em;
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid figure figcaption::before,
|
||||||
|
.grid figure figcaption::after {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid figure figcaption,
|
||||||
|
.grid figure figcaption > a {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Anchor will cover the whole item by default */
|
||||||
|
/* For some effects it will show as a button */
|
||||||
|
.grid figure figcaption > a {
|
||||||
|
z-index: 1000;
|
||||||
|
text-indent: 200%;
|
||||||
|
white-space: nowrap;
|
||||||
|
font-size: 0;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid figure h2 {
|
||||||
|
/*word-spacing: -0.15em;*/
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid figure h2 span {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid figure h2,
|
||||||
|
.grid figure p {
|
||||||
|
margin: -13px 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid figure p {
|
||||||
|
/*letter-spacing: 1px;*/
|
||||||
|
font-size: 68.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Individual effects */
|
||||||
|
/*---------------*/
|
||||||
|
/***** magnify *****/
|
||||||
|
/*---------------*/
|
||||||
|
figure.effect-magnify {
|
||||||
|
background: -webkit-linear-gradient(-45deg, #34495e 0%, #cc6055 100%);
|
||||||
|
background: linear-gradient(-45deg, #34495e 0%, #cc6055 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
figure.effect-magnify img,
|
||||||
|
figure.effect-magnify p {
|
||||||
|
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
||||||
|
transition: opacity 0.35s, transform 0.35s;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure.effect-magnify:hover img {
|
||||||
|
opacity: 0.1;
|
||||||
|
-webkit-transform: scale3d(2, 2, 1);
|
||||||
|
transform: scale3d(2, 2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
figure.effect-magnify h2 {
|
||||||
|
-webkit-transition: -webkit-transform 0.35s;
|
||||||
|
transition: transform 0.35s;
|
||||||
|
-webkit-transform: scale3d(0.8, 0.8, 1);
|
||||||
|
transform: scale3d(0.8, 0.8, 1);
|
||||||
|
-webkit-transform-origin: 50% 100%;
|
||||||
|
transform-origin: 50% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure.effect-magnify p {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
margin: 20px;
|
||||||
|
padding: 30px;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
text-transform: none;
|
||||||
|
font-size: 90%;
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: scale3d(0.8, 0.8, 1);
|
||||||
|
transform: scale3d(0.8, 0.8, 1);
|
||||||
|
-webkit-transform-origin: 50% -100%;
|
||||||
|
transform-origin: 50% -100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure.effect-magnify:hover h2,
|
||||||
|
figure.effect-magnify:hover p {
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transform: scale3d(1, 1, 1);
|
||||||
|
transform: scale3d(1, 1, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Media queries */
|
||||||
|
@media screen and (max-width: 50em) {
|
||||||
|
.content {
|
||||||
|
padding: 0 10px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid figure {
|
||||||
|
display: inline-block;
|
||||||
|
float: none;
|
||||||
|
margin: 10px auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container
|
||||||
|
.content
|
||||||
|
.grid
|
||||||
|
for youtube in youtubes
|
||||||
|
figure.effect-magnify
|
||||||
|
img(src='https://s3.amazonaws.com/freecodecamp/logo-animation-youtube.jpg', alt='fcc-logo')
|
||||||
|
figcaption
|
||||||
|
h2= youtube[0]
|
||||||
|
p= youtube[1]
|
||||||
|
.modal(tabindex='-1')
|
||||||
|
.modal-dialog.animated.zoomIn.fast-animation
|
||||||
|
.modal-content
|
||||||
|
.modal-header.challenge-list-header= youtube[0]
|
||||||
|
a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') ×
|
||||||
|
.modal-body
|
||||||
|
iframe.embed-responsive-item(src="//www.youtube.com/embed/#{youtube[2]")
|
||||||
|
br
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user