Skip to content
This repository was archived by the owner on Nov 19, 2024. It is now read-only.

completed functions and scope module #12

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

completed functions and scope module #12

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
241 changes: 241 additions & 0 deletions css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,241 @@
/* HEADER */
.header-nav--nav {border: 0; border-bottom: 1px solid #a0a0a0; margin-bottom: 0;}

.header-nav--nav .header-nav--main ul {margin: 10px 0 10px;}
.header-nav--nav .header-nav--main ul li.nav-item {font-size: 14px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.2px; padding-bottom: 10px;}
.header-nav--nav .header-nav--main ul li.nav-item:after {content: ""; display: inline-block; width: 15px;}
.header-nav--nav .header-nav--main ul li.nav-item:last-child:after {width: 0;}
.header-nav--nav .header-nav--main ul li.nav-item a {padding: 0;}

.header-nav--nav .header-nav--main .form-inline input.form-control {width: 330px; height: 30px; margin: 0; box-shadow: none;}
.header-nav--nav .header-nav--main .form-inline .btn-default {background: #a0a0a0; position: relative; border: 0; border-radius: 0; font-weight: 300; width: 100px; height: 30px; min-width: auto; top: 0; left: -3px;}

.header-nav--nav .navbar-brand {padding: 0; width: 100%;}
.header-nav--nav .navbar-brand a {display: block; width: 170px;}

.header-nav--nav .navbar-collapse {padding-right: 0;}

.header-nav--nav .header-nav--utilities {margin-bottom: 15px;}
.header-nav--nav .header-nav--utilities .account {text-align: left; font-size: 14px;}
.header-nav--nav .header-nav--utilities .account a {font-size: 14px;}
.header-nav--nav .header-nav--utilities .image {width: 60px; height: 60px; margin-right: 15px;}
.header-nav--nav .header-nav--utilities .image img {border-radius: 100px;}

.header-nav--search {background: #a0a0a0; padding: 5px 20px;}
.header-nav--search input.form-control {margin-bottom: 0; width: 100%;}

@media only screen and (min-width: 768px) {
.header-nav--nav .navbar-collapse.collapse {flex: 1; display: flex !important;}
.header-nav--nav .navbar-brand {padding: 0; width: auto; margin-right: 0;}
.header-nav--nav .navbar-brand a {display: block; width: 120px;}
.header-nav--nav .header-nav--main ul {margin-bottom: 0;}
.header-nav--nav .header-nav--main ul li.nav-item {font-size: 13px; padding-bottom: 0;}
.header-nav--nav .header-nav--main ul li.nav-item:after {width: 8px;}
.header-nav--nav .header-nav--utilities {margin-left: auto; margin-bottom: 0;}
.header-nav--nav .header-nav--utilities .account {font-size: 14px; text-align: right;}
.header-nav--nav .header-nav--utilities .image {margin-left: 15px;}
}

@media only screen and (min-width: 992px) {
.header-nav--nav .header-nav--main ul li.nav-item {font-size: 16px;}
.header-nav--nav .navbar-brand {margin-right: 40px;}
.header-nav--nav .navbar-brand a {display: block; width: 170px;}
.header-nav--nav .header-nav--main ul li.nav-item:after {width: 15px;}
.header-nav--nav .header-nav--utilities .account {font-size: 18px;}
}

/* HERO */
.crf-hero {background-image: url('https://www.pluralsight.com/content/dam/pluralsight2/teach/author-tools/carved-rock-fitness/hero_bkgd_v1.jpg'); background-repeat: no-repeat; height: 400px; background-size: cover; background-position: center center; text-align: center;}
.crf-hero h1, .crf-hero h2 {font-size: 63px; font-weight: 700; margin: 0; flex: inherit; line-height: 0.9;}
.crf-hero h1 {left: -30px;}
.crf-hero h2 {color: #faa541;}
.crf-hero p.lead {letter-spacing: 2px; font-weight: 700;}

@media only screen and (min-width: 1200px) {
.crf-hero .container {max-width: 1170px;}
}
@media only screen and (max-width: 768px) {
.crf-hero {margin-bottom: 0; padding-bottom: 0; background-position: 70% 0; background-size: 180%;}
.crf-hero .container {margin-top: auto; background-color: #faa541; padding: 15px;}
.crf-hero h1 {left: 0;}
.crf-hero h2 , .crf-hero p.lead {color: white;}
.crf-hero p.lead {margin-top: 5px; margin-bottom: 0;}
}
@media only screen and (max-width: 480px) {
.crf-hero h1, .crf-hero h2 {font-size: 55px;}
}

/* CIGAR BANNER */
.crf-cigar-banner {margin-top: 55px; margin-bottom: 55px;}
.crf-cigar-banner--container {width: 100%; border-top: 1px solid #a0a0a0; border-bottom: 1px solid #a0a0a0; padding: 25px 0; margin-left: 15px; margin-right: 15px; text-align: center; position: relative; overflow: hidden;}
.crf-cigar-banner--container img {width: 250px;}
.crf-cigar-banner--text > div {font-size: 30px; font-weight: 700; text-transform: uppercase; line-height: 1;}
.crf-cigar-banner--text > div:last-child {font-size: 16px; font-weight: 400; margin-top: 5px;}

@media only screen and (max-width: 1024px) {
.crf-cigar-banner--text > div {font-size: 24px;}
.crf-cigar-banner--container img {width: 220px;}
}
@media only screen and (max-width: 768px) {
.crf-cigar-banner {margin-top: 0;}
.crf-cigar-banner--container {flex-wrap: wrap; margin-left: 0; margin-right: 0; border-bottom-color: transparent;}
.crf-cigar-banner--text > div:last-child {margin-top: 15px;}
.crf-cigar-banner--container img:nth-of-type(1) {left:0; top: 0;}
.crf-cigar-banner--container img:nth-of-type(2) {top: 0; right: 0;}
.crf-cigar-banner--container img {width: 350px; position: absolute; mix-blend-mode: multiply;}
.crf-cigar-banner--text {flex: 0 0 100%; margin-top: 250px;}
}
@media only screen and (max-width: 640px) {
.crf-cigar-banner--container img:nth-of-type(1) {left: -15%;}
.crf-cigar-banner--container img:nth-of-type(2) {right: -15%;}
}
@media only screen and (max-width: 480px) {
.order-sm-0 {order: 0;}
.order-sm-1 {order: 1;}
.order-sm-2 {order: 2;}
.crf-cigar-banner--container img {width: 270px;}
.crf-cigar-banner--text {margin-top: 180px;}
}

/* STORIES */
.crf-story a > div {color: #364147;}
.crf-story .crf-story--text {padding: 30px 0; text-transform: uppercase; text-align: center;}
.crf-story .crf-story--text > div {font-size: 16px; font-weight: 200; color: #faa541;}
.crf-story .crf-story--text h3 {font-size: 30px; font-weight: 700; line-height: 1; margin: 0;}
.crf-story .crf-story--image img {width: 100%;}

@media only screen and (max-width: 991px) {
.crf-story .crf-story--image {height: 180px; overflow: hidden; position: relative;}
.crf-story .crf-story--image img {position: relative; top: 50%; transform: translateY(-50%);}
}

/* FULL BANNER */
.crf-full-banner {margin-top: 50px; margin-bottom: 50px;}
.crf-full-banner .row {position: relative;}
.crf-full-banner .row:before {content: ""; position: absolute; border: 1px solid white; display: block; top: 30px; bottom: 30px; left: 50px; right: 50px; z-index: 1;}
.crf-full-banner .crf-full-banner--image {
flex: 0 0 58.333333%;
background-image: url('https://www.pluralsight.com/content/dam/pluralsight2/teach/author-tools/carved-rock-fitness/img-vistas.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
min-height: 400px;
}
.crf-full-banner .crf-full-banner--text {flex: 0 0 41.666667%; background: #364147; text-transform: uppercase; padding: 30px; position: relative;}
.crf-full-banner .crf-full-banner--text h4 {font-size: 40px; font-weight: 700; color: #637f94; font-style: italic; line-height: 1; margin: 0;}
.crf-full-banner .crf-full-banner--text h4:after {content: ""; width: 100px; height: 1px; background: #faa541; margin: 20px auto; display: block;}
.crf-full-banner .crf-full-banner--text > div {color: white;}
.crf-full-banner .crf-full-banner--text > div:nth-of-type(1) {font-size: 60px; font-weight: 700; line-height: 1;}
.crf-full-banner .crf-full-banner--text > div:nth-of-type(2) {font-size: 25px; font-weight: 200; letter-spacing: 3px;}
.crf-full-banner .crf-full-banner--text .btn.btn-default {text-transform: none; margin-top: 50px; text-transform: uppercase; letter-spacing: 1px; z-index: 1;}

@media only screen and (max-width: 991px) {
.crf-full-banner .col {position: relative; flex-direction: column;}
.crf-full-banner .crf-full-banner--text {padding: 30px 30px 50px;}
.crf-full-banner .crf-full-banner--text h4 {display: none;}
.crf-full-banner .crf-full-banner--text .btn.btn-default {margin-top: 20px;}
.crf-full-banner .crf-full-banner--image {min-height: 300px;}
.crf-full-banner .crf-full-banner--image h4 {font-size: 40px; font-weight: 700; color: #637f94; font-style: italic; line-height: 1; margin: 0; text-align: center; top: 50px; position: relative; text-transform: uppercase;}
}
@media only screen and (max-width: 768px) {
.crf-full-banner .col {padding-left: 0; padding-right: 0;}
.crf-full-banner .row:before {left: 30px; right: 30px;}
}

/* FOOTER */
footer {background: black; position: relative; z-index: 0; min-height: 330px;}
footer:after {content: ""; background: #a0a0a0; width: 75%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1;}

footer .crf-footer--category {flex: 0 0 75%; padding: 40px 15px;}
footer .crf-footer--header {text-transform: uppercase; font-weight: 700; font-size: 16px; margin-bottom: 15px;}

footer .crf-footer--links a {color: white; text-transform: uppercase; font-size: 12px; display: block; padding: 0 0 4px;}
footer .crf-footer--links a:hover {text-decoration: underline;}
footer .crf-footer--links.active .crf-footer--header {margin-bottom: 15px;}
footer .crf-footer--links.active ul {display: block;}

footer .crf-footer--newsletter .crf-footer--header {font-size: 12px; font-weight: 400; margin-bottom: 5px;}
footer .crf-footer--newsletter .crf-footer--subheader {font-style: italic; font-size: 12px; font-weight: 400; margin-bottom: 15px;}
footer .crf-footer--newsletter input {border: 1px solid #364147; width: 200px; margin-bottom: 10px;}
footer .crf-footer--newsletter button {width: 150px; min-width: auto; text-transform: uppercase; letter-spacing: 1px;}

footer .crf-footer-m--social {order: 4; position: relative;}
footer .crf-footer--social ul li, footer .crf-footer-m--social ul li {display: inline-block;}
footer .crf-footer--social ul li a, footer .crf-footer-m--social ul li a {display: block; width: 23px; height: 23px; background-size: 23px 23px; background-position: center;}
footer .crf-footer--social .twitter, footer .crf-footer-m--social .twitter {background-image: url('https://www.pluralsight.com/content/dam/pluralsight2/teach/author-tools/carved-rock-fitness/social_icons/Twitter_Icon.svg');}
footer .crf-footer--social .facebook, footer .crf-footer-m--social .facebook {background-image: url('https://www.pluralsight.com/content/dam/pluralsight2/teach/author-tools/carved-rock-fitness/social_icons/Facebook_Icon.svg');}
footer .crf-footer--social .instagram, footer .crf-footer-m--social .instagram {background-image: url('https://www.pluralsight.com/content/dam/pluralsight2/teach/author-tools/carved-rock-fitness/social_icons/Instagram_Icon.svg');}
footer .crf-footer--social .pinterest, footer .crf-footer-m--social .pinterest {background-image: url('https://www.pluralsight.com/content/dam/pluralsight2/teach/author-tools/carved-rock-fitness/social_icons/Pinterest_Icon.svg');}
footer .crf-footer--social .googleplus, footer .crf-footer-m--social .googleplus {background-image: url('https://www.pluralsight.com/content/dam/pluralsight2/teach/author-tools/carved-rock-fitness/social_icons/GooglePlus_Icon.svg');}

footer .crf-footer--logo {color: #e5e5e5; font-size: 16px; flex: 0 0 25%;}
footer .crf-footer--logo img {max-width: 230px;}
footer .crf-footer--logo .container {padding: 40px 0;}
footer .crf-footer--logo .container > div {padding: 0 30px;}
footer .crf-footer--logo .container > div:before {content: ""; display: block; width: 100%; height: 1px; margin: 30px 0; background: linear-gradient(to right,#f05a28 0,#e80a89 100%);}
footer .crf-footer--copyright {text-align: center; font-size: 12px; flex: 0 0 75%; padding: 10px 0;}

@media only screen and (min-width: 992px) {
footer {flex-wrap: wrap;}
}
@media only screen and (max-width: 991px) and (min-width: 320px) {
footer {flex-direction: column; background: transparent;}
footer:after {width: 100%; background: transparent;}

footer .crf-footer--category {background: #a0a0a0; padding-bottom: 0;}
footer .crf-footer--logo {background: black; margin: 50px 20px;}

footer .crf-footer--links:after {content: ""; display: block; height: 2px; background: white; margin: 10px -15px 10px;}
footer .crf-footer--links:nth-of-type(1) {order: 1;}
footer .crf-footer--links:nth-of-type(2) {order: 2;}
footer .crf-footer--links:nth-of-type(3) {order: 3;}
footer .crf-footer--links ul {display: none;}

footer .crf-footer--header {margin-bottom: 10px; cursor: pointer; position: relative;}
footer .crf-footer--header:after {
content: "+";
display: block;
font-weight: 200;
font-size: 30px;
line-height: 1;
color: white;
width: 30px;
height: 30px;
text-align: center;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
border: 1px solid white;
border-radius: 100px;
}

footer .crf-footer--links.active .crf-footer--header:after {content: "";}
footer .crf-footer--links.active .crf-footer--header:before {content: ""; width: 15px; height: 2px; background: white; transform: translate(-50%); position: absolute; top: 50%; right: 0;}

footer .crf-footer--newsletter .crf-footer--header {cursor: default;}
footer .crf-footer--newsletter .crf-footer--header:before,
footer .crf-footer--newsletter .crf-footer--header:after,
footer .crf-footer-m--social .crf-footer--header:before,
footer .crf-footer-m--social .crf-footer--header:after {display: none;}

footer .crf-footer-m--social .crf-footer--header {cursor: default;}
footer .crf-footer-m--social ul {display: block; position: absolute; top: 0; right: 0;}
footer .crf-footer-m--social:after {display: none;}

footer .crf-footer--social {order: 0; padding-bottom: 10px;}
footer .crf-footer--social:after {content: ""; display: block; height: 15px; background: white; margin: 40px -15px 0;}

footer .crf-footer--logo .container {padding: 40px 10px;}
}
@media only screen and (max-width: 768px) {
footer .crf-footer--category .row {flex-direction: column;}
}

/* MOBILE VIEW ORDER */
@media only screen and (max-width: 768px) {
.crf {display: flex; flex-direction: column;}
.crf-story {order: 6; margin-bottom: 50px;}
.crf-full-banner {order: 5; margin-top: 0;}
footer {order: 7;}
}
93 changes: 93 additions & 0 deletions fundamentals.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@

/* ----------------FUNCTIONS AND SCOPE --------------------*/

// Bock Scope for let keyword

let message = 'Outside the scope block';

if(5 === 5){
let message = 'Inside block scope';
//console.log(message);
}
//console.log(message);

// No scope for Var keyword

var messaging = 'declared outside';
if(5 === 5){
var messaging = 'declared inside';
//console.log(messaging);
}
//console.log(messaging);

// IIFE - invoked immediately invoked upon declaration

(function(){
// console.log('in function');
})();

// Closures with IIFEs
// closures make sure that data is persistent

let app = (function(){
let carId = 123;
let getId = function(){
return carId;
};

return {
getId: getId
};
})();

//console.log(app.getId());

// THIS keyword is the context object for a function
// we can use the CALL fucntion to change the context of an object

let o = {
carId: 123,
getId: function(){
return this.carId;
},
getIdByApply: function(prefix){
return prefix + this.carId;
}
};

let newCar = {carId: 456};

// call accepts the object
//console.log(o.getId.call(newCar)); // 456

// apply allows us to pass parameters
//console.log(o.getIdByApply.apply(newCar, ['ID: ']));

// bind makes a copy of an object and give it a new context
let newFn = o.getId.bind(newCar);
//console.log( newFn() );

// Arrow Functions
// they dont have their own context - menaing no 'this'

let getId = (prefix, suffix) => {

return prefix + 123 + suffix ;
};

//console.log(getId('ID: ', '!'));

// DEfault Parameters -- they must be on the right side of the
// of the function parameters list

let trackCar = function(carId, city = 'New York'){
console.log(`Trackiing ${carId} in ${city}.`);
};

//console.log(trackCar(123));

//console.log(trackCar(123,'Chicago'));


/* ----------------OBJECTS AND ARRAYS --------------------*/

Loading