A Pen by Keith Pickering
How do I make an a pen by keith pickering?
What is a a pen by keith pickering? How do you make a a pen by keith pickering? This script and codes were developed by Keith Pickering on 10 August 2022, Wednesday.
A Pen by Keith Pickering Previews
A Pen by Keith Pickering - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Keith Pickering</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/ngvzh.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ $max-width: 1366px;
html { min-width: 320px;
}
.container { width: 100%; margin: 0 auto; @include bp(m) { width: 75%; }
}
@mixin hide { position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0;
}
@media (max-width: 479px) { .hide--until-s { @include hide; }
}
@media (max-width: 767px) { .hide--until-m { @include hide; }
}
@media (max-width: 1023px) { .hide--until-l { @include hide; }
}
@media (min-width: 480px) { .hide--at-s { @include hide; }
}
@media (min-width: 768px) { .hide--at-m { @include hide; }
}
@media (min-width: 1024px) { .hide--at-l { @include hide; }
}
.page-head { text-align: center; background-color: $dark-gray; @include bp(m) { text-align: left; }
}
.page-head__mast { position: relative; max-width: $max-width; margin-left: auto; margin-right: auto;
}
.logo { display: inline-block; vertical-align: middle; margin: $spacing;
}
.menu-button { position: absolute; top: 50%; right: $spacing; margin-top: -18px; cursor: pointer; width: 36px; height: 36px; text-align: left; > span { top: 15px; &, &:before, &:after { position: absolute; height: 6px; width: 100%; border-radius: 2px; background-color: white; transition: all .25s; } &:before, &:after { content: ''; } &:before { top: 12px; } &:after { top: -12px; } } &.open { > span { background-color: transparent; &:before { transform: translate(0, -12px) rotate(45deg); } &:after { transform: translate(0, 12px) rotate(-45deg); } } } @include bp(m) { display: none; }
}
.nav-wrap { background-color: $clouds;
}
.main-nav { position: relative; /*display: none; .no-js & { display: block; }*/ &:after { content: ''; position: absolute; right: $spacing; top: 0; width: 0; height: 0; margin-right: $spacing / 6; border-style: solid; border-width: 0 15px 20px 15px; border-color: transparent transparent $clouds transparent; transition: all 0.25s; @include bp(m) { display: none; } } &.open:after { top: -20px; } > ul { width: 100%; text-align: left; @include bp(m) { display: table; text-align: center; } > li { display: block; border-bottom: 1px solid #e7e7e7; background-color: $clouds; @include bp(m) { display: table-cell; border-bottom: 0; border-right: 1px solid #e7e7e7; } &:last-child { border-right: 0; } } a { font-weight: 400; position: relative; display: block; padding: $spacing; color: $concrete; background-color: transparent; box-shadow: none; &:hover { color: white; background-color: $main-color; } } } @include bp(m) { display: block !important; max-width: $max-width; margin-left: auto; margin-right: auto; }
}
/**
* Expanding Search Bar
* Modified from http://tympanus.net/codrops/2013/06/26/expanding-search-bar-deconstructed/
*/
.search-wrap { width: 100%; padding: $spacing; background-color: $clouds; @include bp(m) { position: absolute; width: 33%; min-width: 400px; right: 0; bottom: 100%; background-color: transparent; }
}
.search { position: relative; width: 100%; min-width: 48px; height: 48px; overflow: hidden; -webkit-backface-visibility: hidden; @include bp(m) { float: right; }
}
.search__input { position: absolute; top: 0; left: 0; height: 48px; width: 100%; margin: 0; padding: 0 48px 0 $spacing; border: none; outline: none; background-color: white; transition: all .35s; z-index: 10; @include bp(m) { left: 100%; opacity: 0; }
}
.search__submit,
.search__icon { position: absolute; right: 0; top: 0; margin: 0; padding: 0; line-height: 48px; width: 48px; height: 48px; cursor: pointer;
}
.search__submit { opacity: 0.7; border: none; outline: none; color: transparent; background: white; z-index: -1;
}
.search__icon { line-height: 48px; width: 48px; height: 48px; font-size: 24px; text-align: center; color: white; background-color: $main-color; transition: all .25s; z-index: 90; &:hover, .search__submit:hover ~ & { background-color: lighten($main-color, 10%); }
}
.search--open .search__input,
.no-js .search__input { left: 0; opacity: 1;
}
.search--open .search__icon,
.no-js .search .search__icon { z-index: 11;
}
.search--open .search__submit,
.no-js .search .search__submit { z-index: 90;
}
/**
* Buttons
*/
@mixin button($color) { background-color: $color; box-shadow: 0 2px 0 shade($color, 15%); &:hover, &:focus { background-color: lighten($color, 10%); } &:active { background-color: $color; }
}
.button,
[class*='button--'] { position: relative; display: block; vertical-align: middle; margin: 0 0 ($spacing + 2px) 0; /* Account for extra height from box shadow */ padding: $spacing ($spacing * 2); font-weight: 200; text-align: center; text-decoration: none; color: white; transition: all .25s; transform: translate(0, -2px); &:hover, &:focus { color: white; outline: none; box-shadow: none; transform: translate(0, 0); } @include button($main-color); @include bp(s) { display: inline-block; text-align: left; margin-right: $spacing; padding: ($spacing / 1.5) $spacing; }
}
.button--secondary { @include button($secondary-color); }
.button--red { @include button($alizarin); }
.button--orange { @include button($orange); }
.button--yellow { @include button($sunflower); }
.button--green { @include button($emerald); }
.button--turquoise { @include button($turquoise); }
.button--blue { @include button($peter-river); }
.button--purple { @include button($wisteria); }
.button--black { @include button($wet-asphalt); }
.button--white { @include button($clouds); }
.button--accept { @include button($nephritis); }
.button--decline { @include button($alizarin); }
.button--facebook { @include button($facebook); }
.button--twitter { @include button($twitter); }
.button--tumblr { @include button($tumblr); }
.button--linkedin { @include button($linkedin); }
.button--google-plus { @include button($googleplus); }
.button--pinterest { @include button($pinterest); }
.button--youtube { @include button($youtube); }
.button--skype { @include button($skype); }
/* Make text dark on buttons that have light background-colors */
.button--white { color: rgba(black, 0.5); &:hover { color: rgba(black, 0.5); }
}
/* Sizes */
.button--large { font-size: 32px; font-size: 2rem; padding-top: .5em; padding-bottom: .5em;
}
.button--small { font-size: 13px; font-size: .8rem; padding: .5em 1.5em;
}
/* Alignment */
.button--align-top { vertical-align: top; }
.button--align-bottom { vertical-align: bottom; }
/* Icons */
.button--icon { padding-left: 4em; padding-right: 1em; > i { position: absolute; top: 50%; left: 1em; width: 1em; text-align: center; margin-top: -.5em; } &:before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3em; box-shadow: 0 2px 0 rgba(black, .15); background-color: rgba(black, .215); transition: all .25s; } &:hover:before { box-shadow: none; }
}
.button--block { display: block;
}
/**
* Notification Styles
*/
.note { position: relative; overflow: hidden; color: white; background-color: $main-color;
}
.note--secondary { background-color: $secondary-color; }
.note--success { background-color: $nephritis; }
.note--warning { background-color: $orange; }
.note--error { background-color: $alizarin; }
.note--info { background-color: $peter-river; } .note__icon, .note__text { padding: $spacing; } .note__icon { min-width: ($spacing * 2) + 32px; text-align: center; font-size: 32px; font-size: 2rem; background-color: rgba(black, 0.25); } .note__text { padding-right: $spacing * 2; } .note__close { position: absolute; top: $spacing / 2; right: $spacing / 2; width: 29px; line-height: 30px; font-size: 24px; text-align: center; color: white; background-color: rgba(black, 0.15); transition: all 0.25s; @include bp(mouse) { opacity: 0; } .note:hover & { opacity: 1; color: white; } } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<header class="page-head"> <div class="page-head__mast"> <a href="#"><img class="logo" src="http://placehold.it/200x75/414952&text=Site+Logo" alt="Logo"></a> <div id="menu-button" class="menu-button"><span></span></div> </div> <div class="nav-wrap"> <nav id="main-nav" class="main-nav"> <div class="search-wrap"> <div class="search"> <form> <input class="search__input" placeholder="Enter your search terms here" type="search" name="search" value=""> <!--<input class="search__submit" type="submit" value="">--> <i class="fa fa-search search__icon"></i> </form> </div> </div> <ul class="nav"> <li><a href="#">Nav Item</a></li> <li><a href="#">Nav Item</a></li> <li><a href="#">Nav Item</a></li> <li><a href="#">Nav Item</a></li> </ul> </nav> </div>
</header>
<div class="grid">
<div class="grid__item one-whole container module"> <h1>Shortcodes</h1> <h2>Buttons</h2> <div class="grid__item one-half palm-one-whole"> <h3>Normal</h3> <a href="#" class="button">Primary</a> <a href="#" class="button--secondary">Secondary</a> <h3>Colors</h3> <a href="#" class="button--red">Red</a> <a href="#" class="button--orange">Orange</a> <a href="#" class="button--yellow">Yellow</a> <a href="#" class="button--green">Green</a> <a href="#" class="button--turquoise">Turquoise</a> <a href="#" class="button--blue">Blue</a> <a href="#" class="button--purple">Purple</a> <a href="#" class="button--black">Black</a> <a href="#" class="button--white">White</a> </div> <div class="grid__item one-half palm-one-whole"> <h3>Social</h3>
<a href="#" class="button--icon button--facebook"> <i class="fa fa-facebook"></i>Facebook
</a>
<a href="#" class="button--icon button--twitter"> <i class="fa fa-twitter"></i>Twitter
</a>
<a href="#" class="button--icon button--google-plus"> <i class="fa fa-google-plus"></i>Google+
</a>
<a href="#" class="button--icon button--tumblr"> <i class="fa fa-tumblr"></i>Tumblr
</a>
<a href="#" class="button--icon button--pinterest"> <i class="fa fa-pinterest"></i>Pinterest
</a>
<a href="#" class="button--icon button--linkedin"> <i class="fa fa-linkedin"></i>LinkedIn
</a>
<a href="#" class="button--icon button--youtube"> <i class="fa fa-youtube"></i>YouTube
</a>
<a href="#" class="button--icon button--skype"> <i class="fa fa-skype"></i>Skype
</a> </div>
<div class="flag note"> <div class="flag__image note__icon"> <i class="fa fa-heart"></i> </div> <div class="flag__body note__text"> Default color </div> <a href="#" class="note__close"> <i class="fa fa-times"></i> </a>
</div> <h2>Notifications</h2>
<div class="flag note note--secondary"> <div class="flag__image note__icon"> <i class="fa fa-comment"></i> </div> <div class="flag__body note__text"> Secondary color </div> <a href="#" class="note__close"> <i class="fa fa-times"></i> </a>
</div>
<div class="flag note note--success"> <div class="flag__image note__icon"> <i class="fa fa-check"></i> </div> <div class="flag__body note__text"> Your thing was successful! </div> <a href="#" class="note__close"> <i class="fa fa-times"></i> </a>
</div>
<div class="flag note note--warning"> <div class="flag__image note__icon"> <i class="fa fa-exclamation"></i> </div> <div class="flag__body note__text"> Your thing was not so successful! </div> <a href="#" class="note__close"> <i class="fa fa-times"></i> </a>
</div>
<div class="flag note note--error"> <div class="flag__image note__icon"> <i class="fa fa-times"></i> </div> <div class="flag__body note__text"> Your thing failed completely! </div> <a href="#" class="note__close"> <i class="fa fa-times"></i> </a>
</div>
<div class="flag note note--info"> <div class="flag__image note__icon"> <i class="fa fa-info"></i> </div> <div class="flag__body note__text"> <p>I barely knew Philip, but as a clergyman I have no problem telling his most intimate friends all about him. Calculon is gonna kill us and it's all everybody else's fault! Is that a cooking show? When will that be? Shut up and get to the point! Bender, being God isn't easy. If you do too much, people get dependent on you, and if you do nothing, they lose hope. You have to use a light touch. Like a safecracker, or a pickpocket.</p> </div> <a href="#" class="note__close"> <i class="fa fa-times"></i> </a>
</div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
A Pen by Keith Pickering - Script Codes CSS Codes
$max-width: 1366px;
html { min-width: 320px;
}
.container { width: 100%; margin: 0 auto; @include bp(m) { width: 75%; }
}
@mixin hide { position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0;
}
@media (max-width: 479px) { .hide--until-s { @include hide; }
}
@media (max-width: 767px) { .hide--until-m { @include hide; }
}
@media (max-width: 1023px) { .hide--until-l { @include hide; }
}
@media (min-width: 480px) { .hide--at-s { @include hide; }
}
@media (min-width: 768px) { .hide--at-m { @include hide; }
}
@media (min-width: 1024px) { .hide--at-l { @include hide; }
}
.page-head { text-align: center; background-color: $dark-gray; @include bp(m) { text-align: left; }
}
.page-head__mast { position: relative; max-width: $max-width; margin-left: auto; margin-right: auto;
}
.logo { display: inline-block; vertical-align: middle; margin: $spacing;
}
.menu-button { position: absolute; top: 50%; right: $spacing; margin-top: -18px; cursor: pointer; width: 36px; height: 36px; text-align: left; > span { top: 15px; &, &:before, &:after { position: absolute; height: 6px; width: 100%; border-radius: 2px; background-color: white; transition: all .25s; } &:before, &:after { content: ''; } &:before { top: 12px; } &:after { top: -12px; } } &.open { > span { background-color: transparent; &:before { transform: translate(0, -12px) rotate(45deg); } &:after { transform: translate(0, 12px) rotate(-45deg); } } } @include bp(m) { display: none; }
}
.nav-wrap { background-color: $clouds;
}
.main-nav { position: relative; /*display: none; .no-js & { display: block; }*/ &:after { content: ''; position: absolute; right: $spacing; top: 0; width: 0; height: 0; margin-right: $spacing / 6; border-style: solid; border-width: 0 15px 20px 15px; border-color: transparent transparent $clouds transparent; transition: all 0.25s; @include bp(m) { display: none; } } &.open:after { top: -20px; } > ul { width: 100%; text-align: left; @include bp(m) { display: table; text-align: center; } > li { display: block; border-bottom: 1px solid #e7e7e7; background-color: $clouds; @include bp(m) { display: table-cell; border-bottom: 0; border-right: 1px solid #e7e7e7; } &:last-child { border-right: 0; } } a { font-weight: 400; position: relative; display: block; padding: $spacing; color: $concrete; background-color: transparent; box-shadow: none; &:hover { color: white; background-color: $main-color; } } } @include bp(m) { display: block !important; max-width: $max-width; margin-left: auto; margin-right: auto; }
}
/**
* Expanding Search Bar
* Modified from http://tympanus.net/codrops/2013/06/26/expanding-search-bar-deconstructed/
*/
.search-wrap { width: 100%; padding: $spacing; background-color: $clouds; @include bp(m) { position: absolute; width: 33%; min-width: 400px; right: 0; bottom: 100%; background-color: transparent; }
}
.search { position: relative; width: 100%; min-width: 48px; height: 48px; overflow: hidden; -webkit-backface-visibility: hidden; @include bp(m) { float: right; }
}
.search__input { position: absolute; top: 0; left: 0; height: 48px; width: 100%; margin: 0; padding: 0 48px 0 $spacing; border: none; outline: none; background-color: white; transition: all .35s; z-index: 10; @include bp(m) { left: 100%; opacity: 0; }
}
.search__submit,
.search__icon { position: absolute; right: 0; top: 0; margin: 0; padding: 0; line-height: 48px; width: 48px; height: 48px; cursor: pointer;
}
.search__submit { opacity: 0.7; border: none; outline: none; color: transparent; background: white; z-index: -1;
}
.search__icon { line-height: 48px; width: 48px; height: 48px; font-size: 24px; text-align: center; color: white; background-color: $main-color; transition: all .25s; z-index: 90; &:hover, .search__submit:hover ~ & { background-color: lighten($main-color, 10%); }
}
.search--open .search__input,
.no-js .search__input { left: 0; opacity: 1;
}
.search--open .search__icon,
.no-js .search .search__icon { z-index: 11;
}
.search--open .search__submit,
.no-js .search .search__submit { z-index: 90;
}
/**
* Buttons
*/
@mixin button($color) { background-color: $color; box-shadow: 0 2px 0 shade($color, 15%); &:hover, &:focus { background-color: lighten($color, 10%); } &:active { background-color: $color; }
}
.button,
[class*='button--'] { position: relative; display: block; vertical-align: middle; margin: 0 0 ($spacing + 2px) 0; /* Account for extra height from box shadow */ padding: $spacing ($spacing * 2); font-weight: 200; text-align: center; text-decoration: none; color: white; transition: all .25s; transform: translate(0, -2px); &:hover, &:focus { color: white; outline: none; box-shadow: none; transform: translate(0, 0); } @include button($main-color); @include bp(s) { display: inline-block; text-align: left; margin-right: $spacing; padding: ($spacing / 1.5) $spacing; }
}
.button--secondary { @include button($secondary-color); }
.button--red { @include button($alizarin); }
.button--orange { @include button($orange); }
.button--yellow { @include button($sunflower); }
.button--green { @include button($emerald); }
.button--turquoise { @include button($turquoise); }
.button--blue { @include button($peter-river); }
.button--purple { @include button($wisteria); }
.button--black { @include button($wet-asphalt); }
.button--white { @include button($clouds); }
.button--accept { @include button($nephritis); }
.button--decline { @include button($alizarin); }
.button--facebook { @include button($facebook); }
.button--twitter { @include button($twitter); }
.button--tumblr { @include button($tumblr); }
.button--linkedin { @include button($linkedin); }
.button--google-plus { @include button($googleplus); }
.button--pinterest { @include button($pinterest); }
.button--youtube { @include button($youtube); }
.button--skype { @include button($skype); }
/* Make text dark on buttons that have light background-colors */
.button--white { color: rgba(black, 0.5); &:hover { color: rgba(black, 0.5); }
}
/* Sizes */
.button--large { font-size: 32px; font-size: 2rem; padding-top: .5em; padding-bottom: .5em;
}
.button--small { font-size: 13px; font-size: .8rem; padding: .5em 1.5em;
}
/* Alignment */
.button--align-top { vertical-align: top; }
.button--align-bottom { vertical-align: bottom; }
/* Icons */
.button--icon { padding-left: 4em; padding-right: 1em; > i { position: absolute; top: 50%; left: 1em; width: 1em; text-align: center; margin-top: -.5em; } &:before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3em; box-shadow: 0 2px 0 rgba(black, .15); background-color: rgba(black, .215); transition: all .25s; } &:hover:before { box-shadow: none; }
}
.button--block { display: block;
}
/**
* Notification Styles
*/
.note { position: relative; overflow: hidden; color: white; background-color: $main-color;
}
.note--secondary { background-color: $secondary-color; }
.note--success { background-color: $nephritis; }
.note--warning { background-color: $orange; }
.note--error { background-color: $alizarin; }
.note--info { background-color: $peter-river; } .note__icon, .note__text { padding: $spacing; } .note__icon { min-width: ($spacing * 2) + 32px; text-align: center; font-size: 32px; font-size: 2rem; background-color: rgba(black, 0.25); } .note__text { padding-right: $spacing * 2; } .note__close { position: absolute; top: $spacing / 2; right: $spacing / 2; width: 29px; line-height: 30px; font-size: 24px; text-align: center; color: white; background-color: rgba(black, 0.15); transition: all 0.25s; @include bp(mouse) { opacity: 0; } .note:hover & { opacity: 1; color: white; } }
A Pen by Keith Pickering - Script Codes JS Codes
$(function() { var $mainNav = $("#main-nav"), $menuButton = $("#menu-button"), hideBp = "hide--until-m"; $mainNav.addClass(hideBp); $menuButton.click(function() { if ($mainNav.is(".open")) { $menuButton.removeClass("open"); $mainNav.removeClass("open"); setTimeout(function() { $mainNav.slideUp(500, function() { $mainNav.addClass(hideBp) .slideDown(0); }); }, 250); } else { $menuButton.addClass("open"); $mainNav.slideUp(0, function() { $mainNav.removeClass(hideBp) .slideDown(500, function() { $mainNav.addClass("open"); }); }); } });
});
$(".search__icon").click(function() { $(this) .closest(".search") .toggleClass("search--open");
});
$(".note__close").click(function(e) { e.preventDefault(); $(this).parent() .animate({ opacity: 0 }, 250, function() { $(this) .animate({ marginBottom: 0 }, 250) .children() .animate({ padding: 0 }, 250) .wrapInner("<div />") .children() .slideUp(250, function() { $(this).closest(".note").remove(); }); });
});
| Developer | Keith Pickering |
| Username | keithpickering |
| Uploaded | August 10, 2022 |
| Rating | 3.5 |
| Size | 12,023 Kb |
| Views | 32,384 |
Do you need developer help for A Pen by Keith Pickering?
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!
Keith Pickering (keithpickering) Script Codes
| Name | Size |
| Notifications | 5,681 Kb |
| CSS Business Card | 185,152 Kb |
| Lovely Transforming Menu Button | 11,445 Kb |
| Windows 10 Concept | 16,180 Kb |
| Reusable Styles | 11,486 Kb |
| Easy Container-Breaking Sidebar | 4,673 Kb |
| Single-element Toggle Switch | 3,875 Kb |
| Material Inspired Menu | 4,237 Kb |
| Delicious SASS Buttons | 8,496 Kb |
| Text Inputs with Sliding Labels | 2,892 Kb |
Create amazing video scripts 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!
Similar Scripts & Codes
| Name | Username | Size |
| A Pen by Jim Savage | Madebyjam | 2,418 Kb |
| Css3 slide | Nakome | 3,190 Kb |
| Fullscreen Parallax | Bassta | 3,313 Kb |
| To Do List with Delete | Mattlbrody | 2,068 Kb |
| Basic 3D Fullscreen Transition | Apetrov | 3,270 Kb |
| Elon Musk - Tribute Page - FreeCodeCamp | Yunnimun | 8,615 Kb |
| Subscription Newsletter - Before inlining | Bradstrong | 7,526 Kb |
| Haml Calendar | Katydecorah | 5,643 Kb |
| Simple personal profile | Miroot | 2,856 Kb |
| Arrow Navigation | Hinducows | 1,973 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!