Free Code Camp Zipline: Build a Personal Portfolio Webpage
A Pen by Jeannie Stevenson on CodePen.
Jeannie Stevenson thatjeannie
thatjeannie
/ colors.scss
Last active
March 16, 2018 16:38
social media colors: google, youtube, facebook, twitter, instagram (including gradient)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // vendor color defs | |
| $google: #db4437; | |
| $youtube: #f00; | |
| $facebook: #3b5998; | |
| $twitter: #1da1f2; | |
| $instagram: #231f20; | |
| $instagramGrad: linear-gradient(45deg, #ffd521 24%, #f50000 50%, #b900b4 76%); | |
| // vendor link classes |
Free Code Camp Zipline: Build a Random Quote Machine
A Pen by Jeannie Stevenson on CodePen.
thatjeannie
/ show-hide-by-checkbox.js
Created
December 2, 2015 22:41
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // set .form to display: none in css | |
| function showForm() { | |
| $('.form-switch').click(function() { | |
| if ($(this).is(':checked')) { | |
| $('.form').slideDown('slow'); | |
| } else { | |
| $('.form').slideUp('slow'); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @-webkit-keyframes pop-in { | |
| 0% { opacity: 0; } | |
| 1% { opacity: 0; -webkit-transform: scale(0.98) translateY(-30px); } | |
| 80% { -webkit-transform: scale(1); } | |
| 100% { -webkit-transform: translateY(0); } | |
| } | |
| @-moz-keyframes pop-in { | |
| 0% { opacity: 0; } | |
| 1% { opacity: 0; -moz-transform: scale(0.98) translateY(-30px); } | |
| 80% { -moz-transform: scale(1); } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function() { | |
| // THIS IS SO CONFUSING! | |
| if ($(window).width() >= 380) { | |
| // NEST! | |
| if ($(window).width() >= 680) { | |
| // NEST AGAIN! |
thatjeannie
/ fix-element.js
Created
April 3, 2015 18:23
Fix element while scrolling JQUERY HTML CSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function() { | |
| $(window).scroll(function(){ | |
| var eOT = $('#sH').offset().top; //distance sidebar is from the top of the page | |
| if($(window).width() >= 992){ | |
| var yPT = $(window).scrollTop(); //distance the page has scrolled | |
| //if the distance the page has scrolled is larger than the distance the sidebar is from the top, run | |
| if(yPT > eOT){ | |
| var yPosW = $(window).scrollTop(); //distance the page has scrolled |
thatjeannie
/ slide-in.js
Last active
August 29, 2015 14:18
Slide in and/or fade in content on scroll JQUERY HTML CSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function() { | |
| $(window).scroll( function(){ | |
| // slide in from left to right | |
| $('.slide-right').each(function() { | |
| var objBot = $(this).offset().top + $(this).outerHeight(); | |
| var winBot = $(window).scrollTop() + $(window).height(); | |
| if( winBot > objBot ){ |
thatjeannie
/ image-resize.js
Last active
August 29, 2015 14:17
Iterate through images for dynamic sizing/positioning JQUERY HTML CSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function() { | |
| // math | |
| // NEW height = VARIABLE width * original height / original width | |
| // NEW width = VARIABLE height * original width / original height | |
| // known knowns | |
| // images must not be set to any max-width | |
| // if image aspect ratio is less than one, it's a vertical image | |
| // if image aspect ratio is greater than one, it's a horizontal image | |
| // if image aspect ratio is less than box aspect ratio, it is more taller than wider than the box |