Portfolio Header and Footer

Developer
Zane Riley
Size
11,760 Kb
Views
24,288
  1. Portfolio Header and Footer Previews
  2. Portfolio Header and Footer HTML Codes
  3. Portfolio Header and Footer CSS Codes
  4. Portfolio Header and Footer JS Codes

How do I make an portfolio header and footer?

What is a portfolio header and footer? How do you make a portfolio header and footer? This script and codes were developed by Zane Riley on 11 September 2022, Sunday.

Portfolio Header and Footer Previews
IQ Test

Portfolio Header and Footer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Portfolio Header and Footer</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='css/kdgcf.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> header.navigation h1.navigation-logo a(href='/') Zane Riley nav.navigation-menu ul.navigation-menu-desktop li.navigation-menu-desktop-item a(href='#') About li.navigation-menu-desktop-item a(href='#') Work li.navigation-menu-desktop-item a.btn.btn--primary(href='mailto:[email protected]') Contact .navigation-menu-mobile .navigation-menu-mobile-icon span.menu-mobile-line.menu-mobile-line--top span.menu-mobile-line.menu-mobile-line--middle span.menu-mobile-line.menu-mobile-line--bottom span.menu-mobile-line.menu-mobile-line--x p.navigation-menu-mobile-text MENU .navigation-menu-mobile-bg .navigation-menu-mobile-link-flex-wrapper a.navigation-menu-mobile-link-item About a.navigation-menu-mobile-link-item Work a.navigation-menu-mobile-link-item Contact
section.case-study.days-for-girls
section.case-study.mother-4-game
section.case-study.skip-of-ny
section.other-work footer .contact-information h3.cta.slide | Let's span.cta-phrases-wrapper span.cta-phrase.is-visible grab a beer. span.cta-phrase.is-hidden have tea. span.cta-phrase.is-hidden meet for coffee. span.cta-phrase.is-hidden get lunch. a.btn.btn--primary(href='mailto:[email protected]') [email protected] p.love Made with span.icon-heart.surprise | in 2015. Rural midwest ✈ San Francisco. <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Portfolio Header and Footer - Script Codes CSS Codes

/* * * SETTINGS - Variables and Mixins * */
$base-color:#E6E5E0; // Beige
$primary-color:#F07060; // Red
$accent-color:#4776E6; // Blue
$success-color:#ADCE57; // Green
$alert-color:#FAD455; // Yellow
$note-color:#8E54E9; // Purple
$danger-color:#EC962E; // Orange
$absolute-color:#fff; // White
$main-text:#020736; // Black
$sans-serif-font-family:"futura-pt","HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
// $serif-font-family:"adobe-caslon-pro", "Adobe Garamond Pro", Georgia, Constantia, serif;
/* * * Media Query Mixin * * .foo { * width: 33.33%; * @include mq(medium) { * width: 100%; * } * } * */
@mixin mq($point) { @if $point == small { @media (min-width: 20em) { @content; } //320px } @else if $point == medium { @media (min-width: 48em) { @content; } //768px } @else if $point == large { @media (min-width: 54em) { @content; } //864px }
}
/* * * * Base Elements - Typography, buttons, inputs, etc. * * */
html { box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit; margin:0;
}
html * + * { margin-top:1.3em;
}
body { background:$base-color; font-family: $sans-serif-font-family; color:$main-text; font-weight: 400; line-height: 1.45; margin:0;
}
/* ************ * * TYPOGRAPHY * * ************ */
h1, h2, h3, h4 { font-weight: inherit; line-height: 1.2; font-weight:900;
}
h1 { margin-top: 0; font-size: ms(4);
}
h2 { font-size: ms(3);
}
h3 { font-size: ms(2);
}
h4 { font-size: ms(1);
}
small, .font_small { font-size: ms(-1);
}
p{ font-size:ms(1);
}
a { text-decoration:none; color:$accent-color;
}
a:hover{ background-image: linear-gradient(to bottom, rgba(0,0,0,0) 90%, $primary-color 10%); background-repeat: repeat-x;
}
.btn{ display:inline-block; border: 1px solid $primary-color; border-radius: 0.3em; padding:.5em 1em; font-weight:800; text-transform:uppercase; color:$primary-color; letter-spacing:0.05em;
}
.btn:hover{ background:$primary-color; color:$absolute-color;
}
/* * * * Navigation * * */
.navigation{ height:5em; width:100%; background-color:$absolute-color; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-content: flex-start; align-items: center; margin:0; top:0; position: -webkit-sticky; position: fixed; /* future compatibility */
}
.navigation.sticky{ position:fixed; top:0;
}
// Adding padding around direct descendents
.navigation > *{ margin:0 1rem;
}
.navigation-logo{ display:inline-block; font-weight:900; font-size: 2em; margin-bottom:0; font-style:italic; & a{ color:$main-text; &:hover{ background-image:none; } }
}
.navigation-menu, .navigation-menu-desktop, .navigation-menu-mobile{ display:inline-block;
}
.navigation-menu-desktop{ display:none; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-content: flex-start; align-items: center; @include mq(medium){ display: inline-block; }
}
.navigation-menu-desktop-item{ display:inline-block; font-weight:900; text-transform:uppercase; margin:0 1em;
}
.navigation-menu-desktop-item:last-child{ margin-right:0;
}
// Adding vertical space to the navigation underlines that appear on :hover
.navigation-menu-desktop-item a:not(.btn){ color:$accent-color; padding:0.5em 0;
}
/***** NAVIGATION - MOBILE *****/
.navigation-menu-mobile{ display:inline-block; transition:all .2s ease-in-out; top:0; margin:0; @include mq(medium){ display:none; }
}
// MOBILE MENU ICON ANIMATION
.navigation-menu-mobile-icon{ width: 3.6em; height:3.25em; cursor: pointer; position:relative;
}
.menu-mobile-line{ display: block; position: absolute; border-radius:1em; height: 0.15em; left:0; width: 100%; background: $primary-color; transition: .2s ease-in-out; margin:0;
}
.menu-mobile-line--top{ top:0;
}
.menu-mobile-line--top.opened{ width: 0%; opacity:0; left: 50%; background:$absolute-color;
}
.menu-mobile-line--middle{ top:1em; transform: rotate(0deg);
}
.menu-mobile-line--middle.opened{ transform: rotate(45deg); background:$absolute-color;
}
.menu-mobile-line--bottom{ top:2em;
}
.menu-mobile-line--bottom.opened{ width: 0%; opacity:0; left: 50%; background:$absolute-color;
}
.navigation-menu-mobile-text{ top:2.5em; margin:0;
}
.menu-mobile-line--x{ width:100%; top:1em;
}
.menu-mobile-line--x.opened{ width:100%; transform:rotate(-45deg); background:$absolute-color;
}
.navigation-menu-mobile-text{ color:$primary-color; font-weight:700; letter-spacing:0.2em; margin-bottom:0; position:absolute; font-size:1rem;
}
.navigation-menu-mobile-text.opened{ color:$absolute-color;
}
// MOBILE MENU
// Simply the nav bg color
.navigation-menu-mobile-bg{ background-color:$primary-color; width:.3em; height:0em; margin-top: -1.8em; right: 2.5em; border-radius: 100%; position: fixed; display: block; transform:translate3d(50%,-50%,0); transform-origin: center center; transition:all .4s ease-in-out;
}
.navigation-menu-mobile-bg.opened{ display:block; transform:translate3d(50%,-50%,0); width:350%; height:300%;
}
// Contains the mobile navigation itself
.navigation-menu-mobile-link-flex-wrapper{ display: none; flex-direction: column; flex-wrap: nowrap; justify-content: space-around; align-content: space-around; align-items: center; bottom: 0; left: 0; right:0; position: fixed; margin: 0 auto; height: 88%; width: 100%; visibility:hidden; display:flex;
}
.navigation-menu-mobile-link-flex-wrapper.opened{ visibility:visible;
}
.navigation-menu-mobile-link-item{ color:$absolute-color; display:block; text-align:center; font-size:8vmin; text-transform:uppercase; font-weight:800; letter-spacing:0.1em; transform:translateY(-100%); transition:all 0.4s; margin:0; padding:0.5em 0; opacity:0; &:hover{ background-image: linear-gradient(to bottom, rgba(0,0,0,0) 90%, $accent-color 50%); background-repeat: repeat-x; }
}
.navigation-menu-mobile-link-item.opened{ transform:translateY(0%); opacity:1; &:nth-child(1) { transition-delay:0.0s; } &:nth-child(2) { transition-delay:0.1s; } &:nth-child(3) { transition-delay:0.2s; }
}
/* * * * Footer * * */
footer{ position:absolute; bottom:0; min-height:15em; width:100%; background:$absolute-color; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-around; align-content: space-around; align-items: stretch; & > * { margin-top:0; padding:0em 1em; } & .contact-information{ display: block; text-align:center; width:100%; padding:0 ms(0); & .contact-information > * { margin-top:1.3em; } }
}
/* Footer Call to Action */
.cta.slide span { display: inline-block; transition:all .2s ease-in-out;
}
.cta.slide .cd-phrases-wrapper { overflow: hidden; vertical-align: top; position:relative;
}
.cta-phrase { opacity: 0; margin:0;
}
.cta-phrase { white-space: nowrap; left: 0; top: 0; display:none;
}
.cta-phrase.is-visible { top: 0; opacity: 1; animation: slide-in 0.6s; display:inline-block;
}
.cta-phrase.is-hidden { animation: slide-out 0.6s; position:relative; display:none !important;
}
.love{ text-align:center; font-size:1rem;
}
/* Heart Icon */
.surprise { transform: scale(1); transform-origin: center center; color:$primary-color;
}
.surprise:hover{ animation: heartbeat 1250ms linear infinite both; transform: scale(1); cursor:pointer;
}
.social-links{ position:absolute; top:0; left:0; bottom:0; right:0; padding:0; margin:0; width:100%; height:100%; & a{ display:inline-block; height:100%; width:100%; color:$absolute-color; background-color:$primary-color; margin:0; @include mq(medium){ @include span(1/6) } }
}
/* * * * Animations * * */
/* SLIDE IN */
@keyframes slide-in { 0% { opacity: 0; transform: translateY(-100%); } 60% { opacity: 1; transform: translateY(20%); } 100% { opacity: 1; transform: translateY(0); }
}
/* SLIDE OUT */
@keyframes slide-out { 0% { opacity: 1; transform: translateY(0); } 60% { opacity: 0; transform: translateY(120%); } 100% { opacity: 0; transform: translateY(100%); }
}
/* Heart beat animation in footer */
@keyframes heartbeat { 0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 2.631579% { transform: matrix3d(1.26909, 0, 0, 0, 0, 1.26909, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 5.263158% { transform: matrix3d(1.33015, 0, 0, 0, 0, 1.33015, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 7.894737% { transform: matrix3d(1.28431, 0, 0, 0, 0, 1.28431, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 10.526316% { transform: matrix3d(1.20068, 0, 0, 0, 0, 1.20068, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 13.157895% { transform: matrix3d(1.11863, 0, 0, 0, 0, 1.11863, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 15.789474% { transform: matrix3d(1.0555, 0, 0, 0, 0, 1.0555, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 18.421053% { transform: matrix3d(1.01486, 0, 0, 0, 0, 1.01486, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 21.052632% { transform: matrix3d(1.13261, 0, 0, 0, 0, 1.13261, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 23.684211% { transform: matrix3d(1.29264, 0, 0, 0, 0, 1.29264, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 26.315789% { transform: matrix3d(1.29993, 0, 0, 0, 0, 1.29993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 28.947368% { transform: matrix3d(1.23754, 0, 0, 0, 0, 1.23754, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 31.578947% { transform: matrix3d(1.15707, 0, 0, 0, 0, 1.15707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 34.210526% { transform: matrix3d(1.08598, 0, 0, 0, 0, 1.08598, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 36.842105% { transform: matrix3d(1.03483, 0, 0, 0, 0, 1.03483, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 39.473684% { transform: matrix3d(1.00405, 0, 0, 0, 0, 1.00405, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 42.105263% { transform: matrix3d(0.98931, 0, 0, 0, 0, 0.98931, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 44.736842% { transform: matrix3d(0.98506, 0, 0, 0, 0, 0.98506, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 47.368421% { transform: matrix3d(0.98647, 0, 0, 0, 0, 0.98647, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 50% { transform: matrix3d(0.99011, 0, 0, 0, 0, 0.99011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 52.631579% { transform: matrix3d(0.99393, 0, 0, 0, 0, 0.99393, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 55.263158% { transform: matrix3d(0.99699, 0, 0, 0, 0, 0.99699, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 57.894737% { transform: matrix3d(0.99903, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 60.526316% { transform: matrix3d(1.00016, 0, 0, 0, 0, 1.00016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 63.157895% { transform: matrix3d(1.00063, 0, 0, 0, 0, 1.00063, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 65.789474% { transform: matrix3d(1.00071, 0, 0, 0, 0, 1.00071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 68.421053% { transform: matrix3d(1.00058, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 71.052632% { transform: matrix3d(1.0004, 0, 0, 0, 0, 1.0004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 73.684211% { transform: matrix3d(1.00022, 0, 0, 0, 0, 1.00022, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 76.315789% { transform: matrix3d(1.0001, 0, 0, 0, 0, 1.0001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 78.947368% { transform: matrix3d(1.00002, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 81.578947% { transform: matrix3d(0.99998, 0, 0, 0, 0, 0.99998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 84.210526% { transform: matrix3d(0.99997, 0, 0, 0, 0, 0.99997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 86.842105% { transform: matrix3d(0.99997, 0, 0, 0, 0, 0.99997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 89.473684% { transform: matrix3d(0.99997, 0, 0, 0, 0, 0.99997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 92.105263% { transform: matrix3d(0.99998, 0, 0, 0, 0, 0.99998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 94.736842% { transform: matrix3d(0.99999, 0, 0, 0, 0, 0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 97.368421% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; } 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ; }
}
/* * * * Z-index positioning * * */
.sticky-wrapper{ z-index:2;
}
.navigation{ z-index:2;
}
.navigation-menu-mobile-icon{ z-index:2;
}
.navigation-mobile-menu-flex-wrapper{ z-index:3;
}
.navigation-mobile-menu-bg{ z-index:1;
}
.case-study{ z-index:0; & hgroup{ z-index:1; } & .showcase, .browser-window{ z-index:1; } & .marble{ z-index:0; }
}
.view-more{ z-index:1; & .view-more-description{ z-index:1; } &:after{ z-index:-1; }
}

Portfolio Header and Footer - Script Codes JS Codes

// Mobile Menu Icon Animation
$('.navigation-menu-mobile-icon').on('click', function() { $('.menu-mobile-line--top, .menu-mobile-line--middle, .menu-mobile-line--bottom, .menu-mobile-line--x, .navigation-menu-mobile-text, .navigation-menu-mobile-bg, .navigation-menu-mobile-link-flex-wrapper, .navigation-menu-mobile-link-item').toggleClass('opened');
});
// Footer Call to Action Animation
var animationDelay = 3000;
animateHeadline($('.cta'));
function animateHeadline($headlines) {	$headlines.each(function(){	var headline = $(this);	//trigger animation	setTimeout(function(){ hideWord( headline.find('.is-visible') ) }, animationDelay);	//other checks here ...	});
}
function hideWord($word) {	var nextWord = takeNext($word);	switchWord($word, nextWord);	setTimeout(function(){ hideWord(nextWord) }, animationDelay);
}
function takeNext($word) {	return (!$word.is(':last-child')) ? $word.next() : $word.parent().children().eq(0);
}
function switchWord($oldWord, $newWord) {	$oldWord.removeClass('is-visible').addClass('is-hidden');	$newWord.removeClass('is-hidden').addClass('is-visible');
}
Portfolio Header and Footer - Script Codes
Portfolio Header and Footer - Script Codes
Home Page Home
Developer Zane Riley
Username zaneriley
Uploaded September 11, 2022
Rating 3
Size 11,760 Kb
Views 24,288
Do you need developer help for Portfolio Header and Footer?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Zane Riley (zaneriley) Script Codes
Name
Fluid Type Demo with Grid
Halloween Pen
Masking Gifs
Landing Page Prototype
Typography
3d Shadow Prototype v2
Callout Example
Button Explorations
Landing Page Prototype
Michelle, submit your photography to Unsplash.
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!