A Pen by Reinier Kaper

Developer
Reinier Kaper
Size
19,080 Kb
Views
8,096
  1. A Pen by Reinier Kaper Previews
  2. A Pen by Reinier Kaper HTML Codes
  3. A Pen by Reinier Kaper CSS Codes
  4. A Pen by Reinier Kaper JS Codes

How do I make an a pen by reinier kaper?

What is a a pen by reinier kaper? How do you make a a pen by reinier kaper? This script and codes were developed by Reinier Kaper on 21 January 2023, Saturday.

A Pen by Reinier Kaper Previews
IQ Test

A Pen by Reinier Kaper - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Reinier Kaper</title> <link href="https://fonts.googleapis.com/css?family=Muli:400,700,800,900" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.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! */ * { box-sizing: border-box; font-family: 'Muli' !important;
}
body { background: linear-gradient(90deg, #fff, #fff 60%, #f7f7f7 61%, #f7f7f7);
}
p { margin: 0 0 16px;
}
h2 { margin: 0;
}
.paths { position: absolute; top: 68px; left: 40px;
}
.checkout { display: flex; min-height: 100vh; max-width: 1440px; margin: auto; color: #405461; font-family: 'Muli';
}
.checkout__form { position: relative; padding: 160px 40px; width: 60%;
}
.checkout__summary { position: relative; padding: 160px 40px; width: 40%; background: #f7f7f7; border-left: 1px solid #ddd;
}
.btn { position: relative; border: 0; padding: 20px 24px; display: flex; justify-content: center; align-items: center; border-radius: 3px; color: rgba(255, 255, 255, 0.85); font-family: 'Muli'; font-size: 16px; line-height: 16px; background-color: #404b61; cursor: pointer; transition: all .15s;
}
.btn:hover { background-color: #535e65;
}
.btn:focus { outline: none; box-shadow: 0 0 0 2px #404b61, inset 0 0 0 2px #ffffff;
}
.btn:active { transform: scale(0.95);
}
.btn.is-loading .btn__loader { opacity: 1; visibility: visible; transform: scale(1) translate(-50%, -50%);
}
.btn.is-loading .btn__label { opacity: 0; transform: scale(0.75);
}
.btn.is-loading .btn__icon { opacity: 0; transform: scale(0.75);
}
.btn--primary { color: #fff; background-color: #e2007a;
}
.btn--primary:hover { background-color: #c9006c;
}
.btn--primary:focus { box-shadow: 0 0 0 2px #e2007a, inset 0 0 0 2px #ffffff;
}
.btn--primary .btn__icon { fill: #fff;
}
.btn--transparent { padding: 0; color: #404b61; background-color: transparent;
}
.btn--transparent:hover { background-color: transparent;
}
.btn--transparent:focus { box-shadow: none; text-decoration: underline;
}
.btn--transparent .btn__loader .path { stroke: #404b61;
}
.btn--full { width: 100%;
}
.btn__icon { width: 24px; height: 24px; margin-right: 8px; fill: #404b61; transition: all .5s;
}
.btn__label { display: block; opacity: 1; visibility: visible; transition: all .5s;
}
.btn__label + .btn__icon { margin-left: 8px; margin-right: 0;
}
.btn__loader { position: absolute; top: 50%; left: 50%; z-index: 10; opacity: 0; visibility: hidden; transition: all .5s; width: 24px; height: 24px; transform: scale(1.25) translate(-50%, -50%); animation: loader 2s linear infinite;
}
.btn__loader .path { stroke: #fff; stroke-width: 4px; stroke-dasharray: 90,150; stroke-dashoffset: 0; stroke-linecap: round; animation: stroke 1.5s ease-in-out infinite;
}
@keyframes loader { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes stroke { 0% { stroke-dasharray: 1,200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90,150; stroke-dashoffset: -40px; } 100% { stroke-dasharray: 90,150; stroke-dashoffset: -120px; }
}
#billing { display: none;
}
#billing.is-open { display: block;
}
.modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50; font-family: 'Muli'; display: flex; justify-content: center; align-items: center; transition: all .45s; visibility: hidden;
}
.modal.is-open { visibility: visible;
}
.modal.is-open .modal__background { opacity: 1;
}
.modal.is-open .modal__content { transform: scale(1); opacity: 1;
}
.modal__background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; background-color: rgba(94, 107, 115, 0.51); transition: all .45s;
}
.modal__content { position: relative; background-color: #fff; min-width: 400px; max-width: 600px; border-radius: 3px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.2); transition: all .45s; transform: translate(0, 20px); opacity: 0;
}
.modal__header { flex: 0 0 auto; padding: 30px; border-bottom: 1px solid #d7dbde;
}
.modal__heading { color: #405461; font-size: 24px; font-weight: 600;
}
.modal__body { flex: 1 1 auto; padding: 30px;
}
.modal__footer { flex: 0 0 auto; padding: 30px; border-top: 1px solid #eceff1; text-align: right; background-color: #f3f5f7; display: flex; justify-content: flex-end;
}
.dropdown { position: relative; cursor: pointer;
}
.dropdown.is-open .dropdown__label { border-radius: 3px 3px 0 0;
}
.dropdown.is-open .dropdown__label::after { transform: rotate(180deg) translate(0, 50%);
}
.dropdown.is-open .dropdown__options { opacity: 1; visibility: visible; border-radius: 0 0 3px 3px; transform: scaleY(1);
}
.dropdown__label { position: relative; padding: 14px 24px; border: 1px solid #d7dbde; border-radius: 3px; transition: all .1s ease;
}
.dropdown__label:hover { color: #e2007a;
}
.dropdown__label::after { content: ''; position: absolute; top: 50%; right: 14px; margin-top: -3px; width: 0; height: 0; border: 6px solid transparent; border-top-color: grey; transition: all .1s ease;
}
.dropdown__options { position: absolute; top: 100%; left: 0; right: 0; border: 1px solid #d7dbde; border-top-width: 0; transform: scaleY(0); transform-origin: 50% 0; transition: all .2s ease;
}
.dropdown__option { padding: 14px 24px; border-top: 1px solid #d7dbde; background-color: #fff; transition: all .1s ease;
}
.dropdown__option:first-child { border-top-width: 0;
}
.dropdown__option:hover { color: #e2007a; background-color: #f6f6f9;
}
.radio { display: flex; align-items: center; cursor: pointer;
}
.radio.is-selected .radio__box { border-color: #e2007a; box-shadow: inset 0 0 0 5px #fff;
}
.radio__box { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 40px; border: 1px solid #d7dbde; background-color: #e2007a; box-shadow: inset 0 0 0 10px #fff; transition: all .1s ease;
}
.radio__label { flex: 1 1 auto; padding: 10px; transition: all .1s ease;
}
.radio__label:hover { color: #e2007a;
}
.grid { display: flex; margin: 20px 0; justify-content: space-around;
}
.site-header { position: fixed; top: 0; right: 0; left: 0; z-index: 10; height: 80px; background-color: #fff; border-bottom: 1px solid #eceff1;
}
.is-pressable { transition: transform .1s, box-shadow .1s;
}
.is-pressable:focus, .is-pressable:active { transform: translateY(1px);
}
.input { position: relative; background-color: #fff; transition: all .2s;
}
.input.is-active .input__label, .input.has-value .input__label, .input--select .input__label { font-size: .8em; transform: translate(0, -140%);
}
.input.is-active .input__input { outline: none; box-shadow: 0 0 0 2px #404b61;
}
.input.has-errors { margin-bottom: 30px;
}
.input.has-errors .input__input { box-shadow: 0 0 0 2px #e2007a;
}
.input.has-errors .input__error { opacity: 1; visibility: visible;
}
.input--select::after { content: ''; position: absolute; top: 50%; right: 16px; border: 6px solid transparent; border-top-color: #666; margin-top: 4px; transform: translate(0, -50%); pointer-events: none;
}
.input__icon { position: absolute; top: 50%; right: 16px; width: 20px; height: 20px; fill: #9da3af; transform: translate(0, -50%);
}
.input__label { position: absolute; top: 50%; left: 12px; right: 12px; z-index: 10; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #aaa; transform: translate(0, -50%); transition: all .2s;
}
.input__input { position: relative; padding: 30px 12px 8px; border: 0; border-radius: 3px; box-shadow: 0 0 0 1px #ccc; color: #404b61; background-color: transparent; width: 100%; transition: all .2s; -webkit-appearance: none;
}
.input__input:focus { outline: none;
}
.input__error { position: absolute; top: 100%; padding: 8px 12px; color: #e2007a; font-size: 14px; line-height: 14px; opacity: 0; visibility: hidden; transition: opacity .2s;
}
.required { color: #e2007a; font-size: .8em;
}
.optional { color: #404b61; font-size: .8em;
}
.f { display: flex; flex-wrap: wrap; justify-content: space-between;
}
.f > * { width: 100%; margin-top: 8px; margin-bottom: 8px;
}
.f--no-margin > *:first-child { margin-bottom: 0;
}
.f--no-margin > *:not(:first-child) { margin-top: 0; margin-bottom: 0;
}
.f90 { width: calc(90% - 8px);
}
.f80 { width: calc(80% - 8px);
}
.f70 { width: calc(70% - 8px);
}
.f60 { width: calc(60% - 8px);
}
.f50 { width: calc(50% - 8px);
}
.f40 { width: calc(40% - 8px);
}
.f35 { width: calc(35% - 8px);
}
.f30 { width: calc(30% - 8px);
}
.f20 { width: calc(20% - 8px);
}
.f10 { width: calc(10% - 8px);
}
.fauto { width: auto;
}
.form { position: relative;
}
.form__footer { display: flex; flex-direction: row-reverse; justify-content: space-between; margin-top: 24px;
}
.microcopy { display: block; color: #9da3af; font-size: 14px; margin-top: 4px;
}
a { color: #e2007a;
}
.checkbox,
.radio { position: relative;
}
.checkbox__input,
.radio__input { position: relative; -webkit-appearance: none; width: 16px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1px #ccc; transition: all .2s;
}
.checkbox__input::after,
.radio__input::after { content: ''; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; background: #fff; opacity: 0; transform: translate(-50%, -50%) scale(1); transition: all .2s; transition-delay: .1s;
}
.checkbox__input:focus,
.radio__input:focus { outline: none; box-shadow: 0 0 0 2px #404b61;
}
.checkbox__input:checked,
.radio__input:checked { box-shadow: 0 0 0 1px #e2007a, inset 0 0 0 8px #e2007a;
}
.checkbox__input:checked::after,
.radio__input:checked::after { opacity: 1; transform: translate(-50%, -50%) scale(1);
}
label { cursor: pointer;
}
.pricing td { padding: 8px 0;
}
.pricing tbody tr:first-child td { padding-top: 24px;
}
.pricing tbody tr:last-child td { padding-bottom: 24px;
}
.pricing__price { text-align: right;
}
.pricing__label { color: #9da3af;
}
.pricing__total { font-size: 18px;
}
.pricing__total td { color: #404b61; padding-top: 24px; border-top: 1px solid #ccc;
}
.pricing__total .pricing__price { font-size: 24px;
}
.pricing__total-localized { color: #9da3af;
}
.pricing__total-localized .pricing__price { color: #404b61;
}
.currency { display: inline-block; vertical-align: middle; font-size: 12px; color: #aaa;
}
.control__input { position: relative; -webkit-appearance: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 3px; box-shadow: 0 0 0 1px #ccc; transition: all .2s;
}
.control__input[type=radio] { border-radius: 16px;
}
.control__input[type=radio]::after { border-radius: 50px;
}
.control__input::after { content: ''; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; background: #fff; opacity: 0; transform: translate(-50%, -50%) scale(1); transition: all .2s; transition-delay: .1s;
}
.control__input:focus { outline: none; box-shadow: 0 0 0 2px #404b61;
}
.control__input:checked { box-shadow: 0 0 0 1px #e2007a, inset 0 0 0 8px #e2007a;
}
.control__input:checked:focus { box-shadow: 0 0 0 2px #404b61, inset 0 0 0 8px #404b61;
}
.control__input:checked::after { opacity: 1;
}
.bar { padding: 20px;
}
.control { display: flex;
}
.control__input { flex: 0 0 auto; margin-right: 8px;
}
.control__label { flex: 1 1 auto;
}
.control__extra { align-self: center; flex: 0 0 auto; font-weight: bold;
}
.control__icon { width: 32px; height: 32px; fill: #404b61;
}
.block { padding: 20px; border: 1px solid #ccc;
}
.block + .block--collapse { display: none;
}
.block.is-selected { background-color: #f7f7f7;
}
.block.is-selected + .block--collapse { display: block;
}
.block:not(:first-child) { border-top-width: 0;
}
.block:first-child { border-radius: 3px 3px 0 0;
}
.block:last-child { border-radius: 0 0 3px 3px;
}
.block--collapse { display: none;
}
.colors { display: flex;
}
.color { flex: 1 1 auto; height: 48px; margin: 4px; background-color: red;
}
.color.primary { background-color: #e2007a;
}
.color.secondary { background-color: #404b61;
}
.color.error { background-color: #e2007a;
}
.color.valid { background-color: #41d894;
}
.color.warning { background-color: #f7cc7e;
}
.color.tip { background-color: #9bdaed;
}
.primary { color: #e2007a;
}
.secondary { color: #404b61;
}
.pages { display: flex; width: 100%;
}
.page { position: relative; flex: 0 0 auto; width: 100%; opacity: 0; visibility: hidden; z-index: 1; padding: 0 2px;
}
.page.is-active { opacity: 1; visibility: visible; z-index: 2;
}
.page--2 { transform: translate(-100%, 0);
}
.page--3 { transform: translate(-200%, 0);
}
.page--4 { transform: translate(-300%, 0);
}
.summary { display: flex; border: 1px solid #ccc; border-radius: 3px; background-color: #f7f7f7;
}
.summary__title { flex: 0 0 auto; padding-right: 20px; font-weight: bold;
}
.summary__content { flex: 1 1 auto; padding: 0 20px; color: #aaa;
}
.summary__extra { flex: 0 0 auto; padding-left: 20px;
}
.logo { position: absolute; top: 50px; left: 40px; width: 200px; height: 60px; border: 1px solid #eee;
}
.logo::after { content: 'logo'; position: absolute; top: 50%; left: 50%; color: #ddd; transform: translate(-50%, -50%);
}
.collapser.is-open .collapser__label { display: none;
}
.collapser.is-open .collapser__content { display: block;
}
.collapser__content { display: none;
}
.collapser__label { position: relative;
}
.steps { position: relative; display: flex; justify-content: space-between; margin-bottom: 80px;
}
.step { width: 60px; height: 60px; border-radius: 200px; background-color: #f7f7f7; border: 1px solid #ccc;
}
.step.is-complete { background-color: #e2007a; border-color: transparent;
}
.step__label { position: relative; text-align: center; width: 24px; height: 24px; font-size: 12px; border-radius: 80px; border: 1px solid #ccc; background-color: #f7f7f7;
}
.step__label::after { content: ''; position: absolute; top: 50%; left: 50%; border-radius: 20px; color: #fff; width: 12px; height: 12px; background: #fff; transform: translate(-50%, -50%);
}
.header { display: flex; justify-content: space-between; align-items: center; margin: 48px 0 8px;
}
.message { margin: 24px 0; padding: 20px; border: 1px solid #ccc; border-radius: 3px; text-align: center; font-size: 14px; background-color: #f7f7f7;
}
.message.is-hidden { display: none;
}
.message.is-visible { display: block;
}
.message--info { border-color: #95b4d0; color: #4688c5; background-color: #eff5fb;
}
.tooltip { position: absolute; top: 0; left: 0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-help" viewBox="0 0 24 24">
<title>help</title>
<path d="M15.047 11.25c0.563-0.563 0.938-1.359 0.938-2.25 0-2.203-1.781-3.984-3.984-3.984s-3.984 1.781-3.984 3.984h1.969c0-1.078 0.938-2.016 2.016-2.016s2.016 0.938 2.016 2.016c0 0.563-0.234 1.031-0.609 1.406l-1.219 1.266c-0.703 0.75-1.172 1.734-1.172 2.813v0.516h1.969c0-1.5 0.469-2.063 1.172-2.813zM12.984 18.984v-1.969h-1.969v1.969h1.969zM12 2.016c5.531 0 9.984 4.453 9.984 9.984s-4.453 9.984-9.984 9.984-9.984-4.453-9.984-9.984 4.453-9.984 9.984-9.984z"></path>
</symbol>
<symbol id="icon-face" viewBox="0 0 24 24">
<title>face</title>
<path d="M12 20.016c4.406 0 8.016-3.609 8.016-8.016 0-0.797-0.141-1.547-0.328-2.25-0.703 0.188-1.453 0.234-2.25 0.234-3.375 0-6.328-1.641-8.156-4.219-0.984 2.391-2.906 4.359-5.25 5.391-0.047 0.281-0.047 0.563-0.047 0.844 0 4.406 3.609 8.016 8.016 8.016zM12 2.016c5.531 0 9.984 4.453 9.984 9.984s-4.453 9.984-9.984 9.984-9.984-4.453-9.984-9.984 4.453-9.984 9.984-9.984zM15 11.766c0.703 0 1.266 0.516 1.266 1.219s-0.563 1.266-1.266 1.266-1.266-0.563-1.266-1.266 0.563-1.219 1.266-1.219zM9 11.766c0.703 0 1.266 0.516 1.266 1.219s-0.563 1.266-1.266 1.266-1.266-0.563-1.266-1.266 0.563-1.219 1.266-1.219z"></path>
</symbol>
<symbol id="icon-navigate_before" viewBox="0 0 24 24">
<title>navigate_before</title>
<path d="M15.422 7.406l-4.594 4.594 4.594 4.594-1.406 1.406-6-6 6-6z"></path>
</symbol>
<symbol id="icon-check" viewBox="0 0 24 24">
<title>check</title>
<path d="M9 16.172l10.594-10.594 1.406 1.406-12 12-5.578-5.578 1.406-1.406z"></path>
</symbol>
<symbol id="icon-close" viewBox="0 0 24 24">
<title>close</title>
<path d="M18.984 6.422l-5.578 5.578 5.578 5.578-1.406 1.406-5.578-5.578-5.578 5.578-1.406-1.406 5.578-5.578-5.578-5.578 1.406-1.406 5.578 5.578 5.578-5.578z"></path>
</symbol>
<symbol id="icon-credit-card" viewBox="0 0 32 32">
<title>credit-card</title>
<path d="M4 22h4v-2h-4v2zM10 22h4v-2h-4v2zM12 16h-8v2h8v-2zM8 14h2l4-4h-2l-4 4zM14 18h6v-2h-6v2zM30 6c-1 0-27 0-28 0s-2 1-2 2 0 15 0 16 1 2 2 2 27 0 28 0 2-1 2-2 0-15 0-16-1-2-2-2zM30 14v9s0 1-1 1h-26c-1 0-1-1-1-1v-9h2l4-4h-6v-1s0-1 1-1h26c1 0 1 1 1 1v1h-12l-4 4h16z"></path>
</symbol>
<symbol id="icon-lock" viewBox="0 0 24 24">
<title>lock</title>
<path d="M15.094 8.016v-2.016c0-1.688-1.406-3.094-3.094-3.094s-3.094 1.406-3.094 3.094v2.016h6.188zM12 17.016c1.078 0 2.016-0.938 2.016-2.016s-0.938-2.016-2.016-2.016-2.016 0.938-2.016 2.016 0.938 2.016 2.016 2.016zM18 8.016c1.078 0 2.016 0.891 2.016 1.969v10.031c0 1.078-0.938 1.969-2.016 1.969h-12c-1.078 0-2.016-0.891-2.016-1.969v-10.031c0-1.078 0.938-1.969 2.016-1.969h0.984v-2.016c0-2.766 2.25-5.016 5.016-5.016s5.016 2.25 5.016 5.016v2.016h0.984z"></path>
</symbol>
<symbol id="icon-info" viewBox="0 0 24 24">
<title>info</title>
<path d="M12.984 9v-2.016h-1.969v2.016h1.969zM12.984 17.016v-6h-1.969v6h1.969zM12 2.016c5.531 0 9.984 4.453 9.984 9.984s-4.453 9.984-9.984 9.984-9.984-4.453-9.984-9.984 4.453-9.984 9.984-9.984z"></path>
</symbol>
<symbol id="icon-settings" viewBox="0 0 24 24">
<title>settings</title>
<path d="M12 15.516c1.922 0 3.516-1.594 3.516-3.516s-1.594-3.516-3.516-3.516-3.516 1.594-3.516 3.516 1.594 3.516 3.516 3.516zM19.453 12.984l2.109 1.641c0.188 0.141 0.234 0.422 0.094 0.656l-2.016 3.469c-0.141 0.234-0.375 0.281-0.609 0.188l-2.484-0.984c-0.516 0.375-1.078 0.75-1.688 0.984l-0.375 2.625c-0.047 0.234-0.234 0.422-0.469 0.422h-4.031c-0.234 0-0.422-0.188-0.469-0.422l-0.375-2.625c-0.609-0.234-1.172-0.563-1.688-0.984l-2.484 0.984c-0.234 0.094-0.469 0.047-0.609-0.188l-2.016-3.469c-0.141-0.234-0.094-0.516 0.094-0.656l2.109-1.641c-0.047-0.328-0.047-0.656-0.047-0.984s0-0.656 0.047-0.984l-2.109-1.641c-0.188-0.141-0.234-0.422-0.094-0.656l2.016-3.469c0.141-0.234 0.375-0.281 0.609-0.188l2.484 0.984c0.516-0.375 1.078-0.75 1.688-0.984l0.375-2.625c0.047-0.234 0.234-0.422 0.469-0.422h4.031c0.234 0 0.422 0.188 0.469 0.422l0.375 2.625c0.609 0.234 1.172 0.563 1.688 0.984l2.484-0.984c0.234-0.094 0.469-0.047 0.609 0.188l2.016 3.469c0.141 0.234 0.094 0.516-0.094 0.656l-2.109 1.641c0.047 0.328 0.047 0.656 0.047 0.984s0 0.656-0.047 0.984z"></path>
</symbol>
<symbol id="icon-wallpaper" viewBox="0 0 24 24">
<title>wallpaper</title>
<path d="M3.984 12.984v7.031h7.031v1.969h-7.031c-1.078 0-1.969-0.891-1.969-1.969v-7.031h1.969zM20.016 20.016v-7.031h1.969v7.031c0 1.078-0.891 1.969-1.969 1.969h-7.031v-1.969h7.031zM20.016 2.016c1.078 0 1.969 0.891 1.969 1.969v7.031h-1.969v-7.031h-7.031v-1.969h7.031zM17.016 8.484c0 0.844-0.656 1.5-1.5 1.5s-1.5-0.656-1.5-1.5 0.656-1.5 1.5-1.5 1.5 0.656 1.5 1.5zM9.984 12.984l3 3.703 2.016-2.672 3 3.984h-12zM3.984 3.984v7.031h-1.969v-7.031c0-1.078 0.891-1.969 1.969-1.969h7.031v1.969h-7.031z"></path>
</symbol>
</defs>
</svg>
<div class="checkout"> <div class="checkout__form"> <p class="paths"> Customer information > Shipping method > <span class="primary">Payment method</span> > Order Review </p>
<!-- <div class="path"> <a href="#" class="path__item is-active">1. Customer information</a> <a href="#" class="path__item">2. Shipping information</a> <a href="#" class="path__item">3. Billing information</a> <a href="#" class="path__item">4. Shipping method</a> <a href="#" class="path__item">5. Payment method</a> </div> -->
<!-- <h1>Checkout</h1> -->
<!-- <p class="microcopy">We need some information to complete your order. You can also make adjustments to your order at any time.</p> --> <!-- <div class="site-header"></div> -->
<!-- <form action="" class="form"> --> <div class="pages"> <div class="page page--1">
<!-- <p class="path"><span class="primary">Customer information</span> > Shipping method > Payment method</p> --> <header class="header"> <h2>Customer information</h2> <span class="extra">Already have an account? <a href="#">Login</a></span> </header> <p class="microcopy">Please tell us to which email address we can send the order confirmation.</p> <div class="f"> <div class="input"> <label for="email" class="input__label">Email <span class="required">(required)</span></label> <input id="email" type="email" class="input__input" data-mask=".+@\w+\.+\w+(\.+\w+)?" /> <div class="input__error">Please enter a valid email address.</div> </div> <label for="newsletter" class="control"> <input type="checkbox" id="newsletter" class="control__input" /> <div class="control__label">Please keep me informed about <b>offers</b> and <b>discounts</b>.</div> </label> </div> <header class="header"> <h2>Shipping address</h2> </header> <p class="microcopy">Please tell us where to ship your order.</p> <div class="f"> <div class="input"> <label for="name" class="input__label">Your full name <span class="required">(required)</span></label> <input id="name" type="text" class="input__input" /> </div> <div class="f60"> <div class="input"> <label for="address" class="input__label">Address <span class="required">(required)</span></label> <input id="address" type="text" class="input__input" /> <div class="input__error">Please enter a valid address.</div> </div> </div> <div class="f40"> <div class="input"> <label for="appartment" class="input__label">Apt., suite, etc. <span class="optional">(optional)</span></label> <input id="appartment" type="email" class="input__input" /> </div> </div> <div class="collapser"> <div class="collapser__label"><a href="#">Add another address line</a></div> <div class="collapser__content"> <div class="input"> <label for="address2" class="input__label">Address <span class="optional">(optional)</span></label> <input id="address2" type="text" class="input__input" /> <div class="input__error">Please enter a valid address.</div> </div> </div> </div>
<!-- <div class="f40"> --> <div class="input"> <label for="city" class="input__label">City <span class="required">(required)</span></label> <input id="city" type="text" class="input__input" /> </div>
<!-- </div> --> <div class="f35"> <div class="input input--select"> <label for="country" class="input__label">Country <span class="required">(required)</span></label> <select name="country" id="country" class="input__input"> <option disabled>Country</option> <option value="US">United States</option> <option value="CA" selected>Canada</option> </select> </div> </div> <div class="f35"> <div class="input input--select"> <label for="province" class="input__label">Province <span class="required">(required)</span></label> <select name="province" id="province" class="input__input"> <option disabled>Province</option> <option value="AB">Alberta</option> <option value="ON" selected>Ontario</option> </select> </div> </div> <div class="f30"> <div class="input"> <label for="postalcode" class="input__label">Postal code <span class="required">(required)</span></label> <input id="postalcode" type="text" class="input__input" data-mask="^\w{1}\d{1}\w{1}\s*\d{1}\w{1}\d{1}$" /> <div class="input__error">Please enter a valid postal code.</div> </div> </div> </div> <div class="f"> <label for="billing-same" class="control"> <input type="checkbox" id="billing-same" class="control__input" checked /> <div class="control__label">My <b>billing information</b> is the same as my <b>shipping information</b>.</div> </label> </div> <div id="billing"> <header class="header"> <h2>Billing address</h2> </header> <p class="microcopy">The person that will be billed for this order, if different from the shipping receiver.</p> <div class="f"> <div class="input"> <label for="billing-name" class="input__label">Full name <span class="required">(required)</span></label> <input id="billing-name" type="text" class="input__input" /> </div> <div class="f60"> <div class="input"> <label for="billing-address" class="input__label">Address <span class="required">(required)</span></label> <input id="billing-address" type="text" class="input__input" /> <div class="input__error">Please enter a valid address.</div> </div> </div> <div class="f40"> <div class="input"> <label for="billing-appartment" class="input__label">Apt., suite, etc. <span class="optional">(optional)</span></label> <input id="billing-appartment" type="email" class="input__input" /> </div> </div> <div class="input"> <label for="billing-city" class="input__label">City <span class="required">(required)</span></label> <input id="billing-city" type="text" class="input__input" /> </div> <div class="f35"> <div class="input input--select"> <label for="billing-country" class="input__label">Country <span class="required">(required)</span></label> <select name="billing-country" id="billing-country" class="input__input"> <option disabled>Country</option> <option value="US">United States</option> <option value="CA" selected>Canada</option> </select> </div> </div> <div class="f35"> <div class="input input--select"> <label for="billing-province" class="input__label">Province <span class="required">(required)</span></label> <select name="billing-province" id="billing-province" class="input__input"> <option disabled>Province</option> <option value="AB">Alberta</option> <option value="ON" selected>Ontario</option> </select> </div> </div> <div class="f30"> <div class="input"> <label for="billing-postalcode" class="input__label">Postal code <span class="required">(required)</span></label> <input id="billing-postalcode" type="text" class="input__input" data-mask="^\w{1}\d{1}\w{1}\s*\d{1}\w{1}\d{1}$" /> <div class="input__error">Please enter a valid postal code.</div> </div> </div> </div> </div> <div class="form__footer"> <button class="btn btn--primary js-goto" data-page="2"> <span class="btn__label">Continue to Shipping Method</span> <svg class="btn__loader" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg> </button> <button class="btn btn--transparent secondary"> <svg class="btn__icon"><use xlink:href="#icon-navigate_before"></use></svg> <span class="btn__label">Return to Cart</span> <svg class="btn__loader" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg> </button> </div> </div> <div class="page page--2"> <header class="header"> <h2>Shipping Method</h2> </header> <p class="microcopy">Select the shipping method you would like to use.</p> <div class="f f--no-margin"> <label for="shipping-free" class="control block is-selected"> <input type="radio" name="shipping" id="shipping-free" class="control__input" checked /> <div class="control__label"> Free shipping <div class="microcopy">Get my order delivered by <span class="secondary">September 21st</span>.</div> </div> <span class="control__extra primary">FREE</span> </label> <label for="shipping-standard" class="control block"> <input type="radio" name="shipping" id="shipping-standard" class="control__input" /> <div class="control__label"> Standard shipping <div class="microcopy">Get my order delivered by <span class="secondary">September 14th</span>.</div> </div> <span class="control__extra">$14.00</span> </label> <label for="shipping-rush" class="control block"> <input type="radio" name="shipping" id="shipping-rush" class="control__input" /> <div class="control__label"> Rush shipping <div class="microcopy">Get my order delivered by <span class="secondary">September 7th</span>.</div> </div> <span class="control__extra">$39.00</span> </label> </div> <div class="form__footer"> <button class="btn btn--primary js-goto" data-page="3"> <span class="btn__label">Continue to Payment Method</span> <svg class="btn__loader" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg> </button> <button class="btn btn--transparent secondary js-goto" data-page="1"> <svg class="btn__icon"><use xlink:href="#icon-navigate_before"></use></svg> <span class="btn__label">Return to Customer information</span> <svg class="btn__loader" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg> </button> </div> </div> <div class="page page--3 is-active"> <header class="header"> <h2>Payment Method</h2> </header> <p class="microcopy">Select the payment method you would like to use.</p> <div class="f f--no-margin"> <label for="payment-cc" class="control block is-selected"> <input type="radio" name="payment" id="payment-cc" class="control__input" checked /> <div class="control__label"> Credit card <div class="microcopy">Pay safely and securely with your credit card.</div> </div> <span class="control__extra"> <svg class="control__icon"><use xlink:href="#icon-credit-card"></use></svg> <svg class="control__icon"><use xlink:href="#icon-credit-card"></use></svg> <svg class="control__icon"><use xlink:href="#icon-credit-card"></use></svg> </span> </label> <div class="block block--collapse"> <div class="f"> <div class="input is-selected"> <svg class="input__icon"><use xlink:href="#icon-lock"></use></svg> <label for="ccnumber" class="input__label">Credit card number <span class="required">(required)</span></label> <input id="ccnumber" type="text" class="input__input" data-mask="^\d{4}[\-\s]?\d{4}[\-\s]?\d{4}[\-\s]?\d{4}$" data-luhn /> <div class="input__error">Please enter a valid credit card number.</div> </div> <div class="f30"> <div class="input input--select"> <label for="ccmonth" class="input__label">Expiry month <span class="required">(required)</span></label> <select name="ccmonth" id="ccmonth" class="input__input"> <option disabled selected>MM</option> <option value="1">01 - January</option> <option value="2">02 - February</option> <option value="3">03 - March</option> <option value="4">04 - April</option> <option value="5">05 - May</option> <option value="6">06 - June</option> <option value="7">07 - July</option> <option value="8">08 - August</option> <option value="9">09 - September</option> <option value="10">10 - October</option> <option value="11">11 - November</option> <option value="12">12 - December</option> </select> </div> </div> <div class="f30"> <div class="input input--select"> <label for="ccyear" class="input__label">Expiry year <span class="required">(required)</span></label> <select name="ccyear" id="ccyear" class="input__input"> <option disabled selected>YY</option> <option value="2017">17</option> <option value="2018">18</option> <option value="2019">19</option> <option value="2020">20</option> <option value="2021">21</option> <option value="2022">22</option> <option value="2023">23</option> </select> </div> </div> <div class="f40"> <div class="input"> <svg class="input__icon"><use xlink:href="#icon-help"></use></svg> <label for="ccsecurity" class="input__label">Security code <span class="required">(required)</span></label> <input id="ccsecurity" type="text" class="input__input" data-mask="^\d{3,4}$" /> <div class="input__error">Please enter a security code.</div> </div> </div> </div> </div> <label for="payment-paypal" class="control block"> <input type="radio" name="payment" id="payment-paypal" class="control__input" /> <div class="control__label"> PayPal <div class="microcopy">Pay without sharing your payment information.</div> </div> <span class="control__extra"> <svg class="control__icon"><use xlink:href="#icon-credit-card"></use></svg> <svg class="control__icon"><use xlink:href="#icon-credit-card"></use></svg> <svg class="control__icon"><use xlink:href="#icon-credit-card"></use></svg> <svg class="control__icon"><use xlink:href="#icon-credit-card"></use></svg> </span> </label> </div> <div class="message message--info is-visible">Your <b>credit card</b> will be charged as soon as you finish the current step.</div> <div class="message message--info is-hidden">You will be redirected to <b>PayPal</b> as soon as you finish the current step.</div> <div class="collapser"> <a href="#" class="collapser__label">Redeem a gift card</a> <div class="collapser__content"> <header class="header"> <h2>Gift cards</h2> </header> <p class="microcopy">Add gifts cards you would like to redeem.</p> <div class="f"> <div class="f70"> <div class="input"> <svg class="input__icon"><use xlink:href="#icon-info"></use></svg> <label for="giftcard" class="input__label">Gift card number <span class="optional">(optional)</span></label> <input id="giftcard" type="text" class="input__input" /> <div class="input__error">Please enter a valid gift card number.</div> </div> </div> <div class="f30"> <button class="btn btn--secondary btn--full js-add-giftcard">Redeem</button> </div> <div class="cards"></div> </div> </div> </div> <div class="form__footer"> <button class="btn btn--primary js-goto" data-page="4"> <span class="btn__label">Review my order</span> <svg class="btn__loader" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg> </button> <button class="btn btn--transparent secondary js-goto" data-page="2"> <svg class="btn__icon"><use xlink:href="#icon-navigate_before"></use></svg> <span class="btn__label">Return to Shipping method</span> <svg class="btn__loader" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg> </button> </div> </div> <div class="page page--4"> <header class="header"> <h2>Order review</h2> </header> <p class="microcopy">Please review and make sure your order is correct.</p> <div class="form__footer"> <button class="btn btn--primary js-goto" data-page="4"> <span class="btn__label">Place my order</span> <svg class="btn__loader" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg> </button> <button class="btn btn--transparent secondary js-goto" data-page="3"> <svg class="btn__icon"><use xlink:href="#icon-navigate_before"></use></svg> <span class="btn__label">Return to Payment method</span> <svg class="btn__loader" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg> </button> </div> </div> </div>
<!-- </form> --> <!-- <h1>Heading level 1</h1> <p>Should be used for:</p> <ul> <li><b>Exlusively</b> as main heading on pages</li> </ul> <h2>Heading level 2</h2> <p>Should be used for:</p> <ul> <li>Secondary headings on pages (for structure)</li> <li>Component main headings (e.g. modals)</li> </ul> <h3>Heading level 3</h3> <p>Should be used for:</p> <ul> <li>Tertirary headings on pages (for structure)</li> <li>Product names</li> <li>Services names</li> </ul> <h4>Heading level 4</h4> <p>Should be used for:</p> <ul> <li><b>Exlusively</b> for additional structure</li> </ul> <h5>Heading level 5</h5> <p>Should be used for:</p> <ul> <li><b>Exlusively</b> for additional structure</li> <li><b>Try to avoid using h5</b></li> </ul> <h6>Heading level 6</h6> <p>Should be used for:</p> <ul> <li><b>Exlusively</b> for additional structure</li> <li><b>Try to avoid using h6</b></li> </ul> <p>Body copy looks like this. Rounded, yet easy to read. Not too small either.</p> <button class="btn">Change language</button> <h1>All our products</h1> <p>We offer a wide selection of products that you can personalize in 3 easy steps</p> <ol> <li>Upload your image, or select one from your social media</li> <li>Customize your settings to your liking</li> <li>Order and get an unforgettable experience delivered to your door</li> </ol> <h2>Throw Pillows</h2> <div class="grid"> <div class="product"> <div class="product__body"> <div class="product__image"> <img src="http://via.placeholder.com/200x200" alt=""> </div> <h3 class="product__name">Custom Throw Pillow</h3> <div class="product__price"><sup>$</sup>30.00</div> </div> <footer class="product__footer"> <button class="btn btn--primary">Customize</button> </footer> </div> <div class="product"> <div class="product__body"> <div class="product__image"> <img src="http://via.placeholder.com/200x200" alt=""> </div> <h3 class="product__name">Some Other Product With a Long Name</h3> <div class="product__price"><sup>$</sup>30.00</div> </div> <footer class="product__footer"> <button class="btn btn--primary">Customize</button> </footer> </div> <div class="product"> <div class="product__body"> <div class="product__image"> <img src="http://via.placeholder.com/200x200" alt=""> </div> <h3 class="product__name">Custom Throw Pillow</h3> <div class="product__price"><sup>$</sup>30.00</div> </div> <footer class="product__footer"> <button class="btn btn--primary">Customize</button> </footer> </div> </div> <p>Choose an option:</p> <div class="radio"> <div class="radio__box"></div> <div class="radio__label">Option 1</div> </div> <div class="radio"> <div class="radio__box"></div> <div class="radio__label">Option 2</div> </div> <p>Sign up:</p> <div class="checkbox"> <div class="checkbox__box"></div> <div class="checkbox__label">Option 2</div> </div> <div class="modal is-open2"> <div class="modal__background"></div> <div class="modal__content"> <header class="modal__header"> <div class="modal__heading">Change your language</div> </header> <div class="modal__body"> <p>Select the language you would like to use:</p> <div class="dropdown is-pressable"> <div class="dropdown__label">Select a language...</div> <div class="dropdown__options"> <div class="dropdown__option">Option 1</div> <div class="dropdown__option">Option 2</div> </div> </div> </div> <footer class="modal__footer"> <button class="btn">Cancel</button> <button class="btn btn--primary">Confirm</button> </footer> </div> </div> --> </div> <div class="checkout__summary">
<!-- <div class="logo"></div> --> <header class="header"> <h2>Order summary</h2> </header> <p class="microcopy">A summary of your total order.</p> <div class="collapser"> <a href="#" class="collapser__label">Add a coupon code</a> <div class="collapser__content"> <div class="f"> <div class="f70"> <div class="input"> <svg class="input__icon"><use xlink:href="#icon-info"></use></svg> <label for="couponcode" class="input__label">Coupon code <span class="optional">(optional)</span></label> <input id="couponcode" type="text" class="input__input" data-mask=".{5,}" /> <div class="input__error">Please enter a valid coupon code.</div> </div> </div> <div class="f30"> <button class="btn btn--secondary btn--full js-add-gift-card">Add</button> </div> </div> </div> </div> <div class="f">
<!-- <div class="input f70"> <label for="discount" class="input__label">Discount code</label> <input id="discount" type="text" class="input__input" /> </div> <button class="btn f30">Apply</button> --> <table class="pricing"> <tbody> <tr> <td>image</td> <td class="pricing__label">Custom Throw Pillow (18" x 18")</td> <td class="pricing__price">$30.00</td> </tr> <tr> <td>image</td> <td class="pricing__label">Triptych Canvas Print (36" x 24")</td> <td class="pricing__price">$276.66</td> </tr> </tbody> </table> <table class="pricing"> <tbody> <tr> <td class="pricing__label">Subtotal</td> <td class="pricing__price">$306.66</td> </tr> <tr> <td class="pricing__label">Gift cards</td> <td class="pricing__price">-$50.00</td> </tr> <tr> <td class="pricing__label">Discount <small>(-30%)</small></td> <td class="pricing__price">-$91.99</td> </tr> <tr> <td class="pricing__label">Shipping</td> <td class="pricing__price">$8.00</td> </tr> <tr> <td class="pricing__label">Tax <small>(13%)</small></td> <td class="pricing__price">$28.95</td> </tr> </tbody> <tfoot> <tr class="pricing__total"> <td class="pricing__label">Total</td> <td class="pricing__price"><span class="currency">US</span> <b>$251.62</b></td> </tr> <tr class="pricing__total-localized"> <td class="pricing__label">Total in EUR</td> <td class="pricing__price"><span class="currency">EUR</span> <b>€ 211.36</b></td> </tr> </tfoot> </table> </div> <header class="header"> <h2>Shipping summary</h2> </header> <p class="microcopy">A summary of your shipping and payment selections.</p> <table> <tbody> <tr> <td class="pricing__label">Shipping address</td> <td class="pricing__price">John Appleseed, 123 Main Street, Ottawa, Ontario, K1K 1K1, Canada</td> <td>Edit</td> </tr> <tr> <td class="pricing__label">Shipping method</td> <td class="pricing__price">Free shipping</td> <td>Edit</td> </tr> </tbody> </table>
<!-- <div class="summaries"> <div class="summary block"> <div class="summary__title">Shipping address</div> <div class="summary__content">John Appleseed, 123 Main Street, Ottawa, Ontario, K1K 1K1, Canada</div> <div class="summary__extra primary js-goto" data-page="1">Edit</div> </div> <div class="summary block"> <div class="summary__title">Shipping method</div> <div class="summary__content">Free shipping</div> <div class="summary__extra primary js-goto" data-page="2">Edit</div> </div> </div> --> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Reinier Kaper - Script Codes CSS Codes

* { box-sizing: border-box; font-family: 'Muli' !important;
}
body { background: linear-gradient(90deg, #fff, #fff 60%, #f7f7f7 61%, #f7f7f7);
}
p { margin: 0 0 16px;
}
h2 { margin: 0;
}
.paths { position: absolute; top: 68px; left: 40px;
}
.checkout { display: flex; min-height: 100vh; max-width: 1440px; margin: auto; color: #405461; font-family: 'Muli';
}
.checkout__form { position: relative; padding: 160px 40px; width: 60%;
}
.checkout__summary { position: relative; padding: 160px 40px; width: 40%; background: #f7f7f7; border-left: 1px solid #ddd;
}
.btn { position: relative; border: 0; padding: 20px 24px; display: flex; justify-content: center; align-items: center; border-radius: 3px; color: rgba(255, 255, 255, 0.85); font-family: 'Muli'; font-size: 16px; line-height: 16px; background-color: #404b61; cursor: pointer; transition: all .15s;
}
.btn:hover { background-color: #535e65;
}
.btn:focus { outline: none; box-shadow: 0 0 0 2px #404b61, inset 0 0 0 2px #ffffff;
}
.btn:active { transform: scale(0.95);
}
.btn.is-loading .btn__loader { opacity: 1; visibility: visible; transform: scale(1) translate(-50%, -50%);
}
.btn.is-loading .btn__label { opacity: 0; transform: scale(0.75);
}
.btn.is-loading .btn__icon { opacity: 0; transform: scale(0.75);
}
.btn--primary { color: #fff; background-color: #e2007a;
}
.btn--primary:hover { background-color: #c9006c;
}
.btn--primary:focus { box-shadow: 0 0 0 2px #e2007a, inset 0 0 0 2px #ffffff;
}
.btn--primary .btn__icon { fill: #fff;
}
.btn--transparent { padding: 0; color: #404b61; background-color: transparent;
}
.btn--transparent:hover { background-color: transparent;
}
.btn--transparent:focus { box-shadow: none; text-decoration: underline;
}
.btn--transparent .btn__loader .path { stroke: #404b61;
}
.btn--full { width: 100%;
}
.btn__icon { width: 24px; height: 24px; margin-right: 8px; fill: #404b61; transition: all .5s;
}
.btn__label { display: block; opacity: 1; visibility: visible; transition: all .5s;
}
.btn__label + .btn__icon { margin-left: 8px; margin-right: 0;
}
.btn__loader { position: absolute; top: 50%; left: 50%; z-index: 10; opacity: 0; visibility: hidden; transition: all .5s; width: 24px; height: 24px; transform: scale(1.25) translate(-50%, -50%); animation: loader 2s linear infinite;
}
.btn__loader .path { stroke: #fff; stroke-width: 4px; stroke-dasharray: 90,150; stroke-dashoffset: 0; stroke-linecap: round; animation: stroke 1.5s ease-in-out infinite;
}
@keyframes loader { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes stroke { 0% { stroke-dasharray: 1,200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90,150; stroke-dashoffset: -40px; } 100% { stroke-dasharray: 90,150; stroke-dashoffset: -120px; }
}
#billing { display: none;
}
#billing.is-open { display: block;
}
.modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50; font-family: 'Muli'; display: flex; justify-content: center; align-items: center; transition: all .45s; visibility: hidden;
}
.modal.is-open { visibility: visible;
}
.modal.is-open .modal__background { opacity: 1;
}
.modal.is-open .modal__content { transform: scale(1); opacity: 1;
}
.modal__background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; background-color: rgba(94, 107, 115, 0.51); transition: all .45s;
}
.modal__content { position: relative; background-color: #fff; min-width: 400px; max-width: 600px; border-radius: 3px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.2); transition: all .45s; transform: translate(0, 20px); opacity: 0;
}
.modal__header { flex: 0 0 auto; padding: 30px; border-bottom: 1px solid #d7dbde;
}
.modal__heading { color: #405461; font-size: 24px; font-weight: 600;
}
.modal__body { flex: 1 1 auto; padding: 30px;
}
.modal__footer { flex: 0 0 auto; padding: 30px; border-top: 1px solid #eceff1; text-align: right; background-color: #f3f5f7; display: flex; justify-content: flex-end;
}
.dropdown { position: relative; cursor: pointer;
}
.dropdown.is-open .dropdown__label { border-radius: 3px 3px 0 0;
}
.dropdown.is-open .dropdown__label::after { transform: rotate(180deg) translate(0, 50%);
}
.dropdown.is-open .dropdown__options { opacity: 1; visibility: visible; border-radius: 0 0 3px 3px; transform: scaleY(1);
}
.dropdown__label { position: relative; padding: 14px 24px; border: 1px solid #d7dbde; border-radius: 3px; transition: all .1s ease;
}
.dropdown__label:hover { color: #e2007a;
}
.dropdown__label::after { content: ''; position: absolute; top: 50%; right: 14px; margin-top: -3px; width: 0; height: 0; border: 6px solid transparent; border-top-color: grey; transition: all .1s ease;
}
.dropdown__options { position: absolute; top: 100%; left: 0; right: 0; border: 1px solid #d7dbde; border-top-width: 0; transform: scaleY(0); transform-origin: 50% 0; transition: all .2s ease;
}
.dropdown__option { padding: 14px 24px; border-top: 1px solid #d7dbde; background-color: #fff; transition: all .1s ease;
}
.dropdown__option:first-child { border-top-width: 0;
}
.dropdown__option:hover { color: #e2007a; background-color: #f6f6f9;
}
.radio { display: flex; align-items: center; cursor: pointer;
}
.radio.is-selected .radio__box { border-color: #e2007a; box-shadow: inset 0 0 0 5px #fff;
}
.radio__box { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 40px; border: 1px solid #d7dbde; background-color: #e2007a; box-shadow: inset 0 0 0 10px #fff; transition: all .1s ease;
}
.radio__label { flex: 1 1 auto; padding: 10px; transition: all .1s ease;
}
.radio__label:hover { color: #e2007a;
}
.grid { display: flex; margin: 20px 0; justify-content: space-around;
}
.site-header { position: fixed; top: 0; right: 0; left: 0; z-index: 10; height: 80px; background-color: #fff; border-bottom: 1px solid #eceff1;
}
.is-pressable { transition: transform .1s, box-shadow .1s;
}
.is-pressable:focus, .is-pressable:active { transform: translateY(1px);
}
.input { position: relative; background-color: #fff; transition: all .2s;
}
.input.is-active .input__label, .input.has-value .input__label, .input--select .input__label { font-size: .8em; transform: translate(0, -140%);
}
.input.is-active .input__input { outline: none; box-shadow: 0 0 0 2px #404b61;
}
.input.has-errors { margin-bottom: 30px;
}
.input.has-errors .input__input { box-shadow: 0 0 0 2px #e2007a;
}
.input.has-errors .input__error { opacity: 1; visibility: visible;
}
.input--select::after { content: ''; position: absolute; top: 50%; right: 16px; border: 6px solid transparent; border-top-color: #666; margin-top: 4px; transform: translate(0, -50%); pointer-events: none;
}
.input__icon { position: absolute; top: 50%; right: 16px; width: 20px; height: 20px; fill: #9da3af; transform: translate(0, -50%);
}
.input__label { position: absolute; top: 50%; left: 12px; right: 12px; z-index: 10; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #aaa; transform: translate(0, -50%); transition: all .2s;
}
.input__input { position: relative; padding: 30px 12px 8px; border: 0; border-radius: 3px; box-shadow: 0 0 0 1px #ccc; color: #404b61; background-color: transparent; width: 100%; transition: all .2s; -webkit-appearance: none;
}
.input__input:focus { outline: none;
}
.input__error { position: absolute; top: 100%; padding: 8px 12px; color: #e2007a; font-size: 14px; line-height: 14px; opacity: 0; visibility: hidden; transition: opacity .2s;
}
.required { color: #e2007a; font-size: .8em;
}
.optional { color: #404b61; font-size: .8em;
}
.f { display: flex; flex-wrap: wrap; justify-content: space-between;
}
.f > * { width: 100%; margin-top: 8px; margin-bottom: 8px;
}
.f--no-margin > *:first-child { margin-bottom: 0;
}
.f--no-margin > *:not(:first-child) { margin-top: 0; margin-bottom: 0;
}
.f90 { width: calc(90% - 8px);
}
.f80 { width: calc(80% - 8px);
}
.f70 { width: calc(70% - 8px);
}
.f60 { width: calc(60% - 8px);
}
.f50 { width: calc(50% - 8px);
}
.f40 { width: calc(40% - 8px);
}
.f35 { width: calc(35% - 8px);
}
.f30 { width: calc(30% - 8px);
}
.f20 { width: calc(20% - 8px);
}
.f10 { width: calc(10% - 8px);
}
.fauto { width: auto;
}
.form { position: relative;
}
.form__footer { display: flex; flex-direction: row-reverse; justify-content: space-between; margin-top: 24px;
}
.microcopy { display: block; color: #9da3af; font-size: 14px; margin-top: 4px;
}
a { color: #e2007a;
}
.checkbox,
.radio { position: relative;
}
.checkbox__input,
.radio__input { position: relative; -webkit-appearance: none; width: 16px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1px #ccc; transition: all .2s;
}
.checkbox__input::after,
.radio__input::after { content: ''; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; background: #fff; opacity: 0; transform: translate(-50%, -50%) scale(1); transition: all .2s; transition-delay: .1s;
}
.checkbox__input:focus,
.radio__input:focus { outline: none; box-shadow: 0 0 0 2px #404b61;
}
.checkbox__input:checked,
.radio__input:checked { box-shadow: 0 0 0 1px #e2007a, inset 0 0 0 8px #e2007a;
}
.checkbox__input:checked::after,
.radio__input:checked::after { opacity: 1; transform: translate(-50%, -50%) scale(1);
}
label { cursor: pointer;
}
.pricing td { padding: 8px 0;
}
.pricing tbody tr:first-child td { padding-top: 24px;
}
.pricing tbody tr:last-child td { padding-bottom: 24px;
}
.pricing__price { text-align: right;
}
.pricing__label { color: #9da3af;
}
.pricing__total { font-size: 18px;
}
.pricing__total td { color: #404b61; padding-top: 24px; border-top: 1px solid #ccc;
}
.pricing__total .pricing__price { font-size: 24px;
}
.pricing__total-localized { color: #9da3af;
}
.pricing__total-localized .pricing__price { color: #404b61;
}
.currency { display: inline-block; vertical-align: middle; font-size: 12px; color: #aaa;
}
.control__input { position: relative; -webkit-appearance: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 3px; box-shadow: 0 0 0 1px #ccc; transition: all .2s;
}
.control__input[type=radio] { border-radius: 16px;
}
.control__input[type=radio]::after { border-radius: 50px;
}
.control__input::after { content: ''; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; background: #fff; opacity: 0; transform: translate(-50%, -50%) scale(1); transition: all .2s; transition-delay: .1s;
}
.control__input:focus { outline: none; box-shadow: 0 0 0 2px #404b61;
}
.control__input:checked { box-shadow: 0 0 0 1px #e2007a, inset 0 0 0 8px #e2007a;
}
.control__input:checked:focus { box-shadow: 0 0 0 2px #404b61, inset 0 0 0 8px #404b61;
}
.control__input:checked::after { opacity: 1;
}
.bar { padding: 20px;
}
.control { display: flex;
}
.control__input { flex: 0 0 auto; margin-right: 8px;
}
.control__label { flex: 1 1 auto;
}
.control__extra { align-self: center; flex: 0 0 auto; font-weight: bold;
}
.control__icon { width: 32px; height: 32px; fill: #404b61;
}
.block { padding: 20px; border: 1px solid #ccc;
}
.block + .block--collapse { display: none;
}
.block.is-selected { background-color: #f7f7f7;
}
.block.is-selected + .block--collapse { display: block;
}
.block:not(:first-child) { border-top-width: 0;
}
.block:first-child { border-radius: 3px 3px 0 0;
}
.block:last-child { border-radius: 0 0 3px 3px;
}
.block--collapse { display: none;
}
.colors { display: flex;
}
.color { flex: 1 1 auto; height: 48px; margin: 4px; background-color: red;
}
.color.primary { background-color: #e2007a;
}
.color.secondary { background-color: #404b61;
}
.color.error { background-color: #e2007a;
}
.color.valid { background-color: #41d894;
}
.color.warning { background-color: #f7cc7e;
}
.color.tip { background-color: #9bdaed;
}
.primary { color: #e2007a;
}
.secondary { color: #404b61;
}
.pages { display: flex; width: 100%;
}
.page { position: relative; flex: 0 0 auto; width: 100%; opacity: 0; visibility: hidden; z-index: 1; padding: 0 2px;
}
.page.is-active { opacity: 1; visibility: visible; z-index: 2;
}
.page--2 { transform: translate(-100%, 0);
}
.page--3 { transform: translate(-200%, 0);
}
.page--4 { transform: translate(-300%, 0);
}
.summary { display: flex; border: 1px solid #ccc; border-radius: 3px; background-color: #f7f7f7;
}
.summary__title { flex: 0 0 auto; padding-right: 20px; font-weight: bold;
}
.summary__content { flex: 1 1 auto; padding: 0 20px; color: #aaa;
}
.summary__extra { flex: 0 0 auto; padding-left: 20px;
}
.logo { position: absolute; top: 50px; left: 40px; width: 200px; height: 60px; border: 1px solid #eee;
}
.logo::after { content: 'logo'; position: absolute; top: 50%; left: 50%; color: #ddd; transform: translate(-50%, -50%);
}
.collapser.is-open .collapser__label { display: none;
}
.collapser.is-open .collapser__content { display: block;
}
.collapser__content { display: none;
}
.collapser__label { position: relative;
}
.steps { position: relative; display: flex; justify-content: space-between; margin-bottom: 80px;
}
.step { width: 60px; height: 60px; border-radius: 200px; background-color: #f7f7f7; border: 1px solid #ccc;
}
.step.is-complete { background-color: #e2007a; border-color: transparent;
}
.step__label { position: relative; text-align: center; width: 24px; height: 24px; font-size: 12px; border-radius: 80px; border: 1px solid #ccc; background-color: #f7f7f7;
}
.step__label::after { content: ''; position: absolute; top: 50%; left: 50%; border-radius: 20px; color: #fff; width: 12px; height: 12px; background: #fff; transform: translate(-50%, -50%);
}
.header { display: flex; justify-content: space-between; align-items: center; margin: 48px 0 8px;
}
.message { margin: 24px 0; padding: 20px; border: 1px solid #ccc; border-radius: 3px; text-align: center; font-size: 14px; background-color: #f7f7f7;
}
.message.is-hidden { display: none;
}
.message.is-visible { display: block;
}
.message--info { border-color: #95b4d0; color: #4688c5; background-color: #eff5fb;
}
.tooltip { position: absolute; top: 0; left: 0;
}

A Pen by Reinier Kaper - Script Codes JS Codes

$('.btn').on('click', function() { $('.modal').toggleClass('is-open');
});
$('.dropdown').on('click', function() { $(this).toggleClass('is-open');
});
$('.radio, .checkbox').on('click', function() { $(this).toggleClass('is-selected');
});
$('input, select').on('focus', function() { $(this).parent('.input').addClass('is-active');
});
$('input, select').on('blur', function() { var hasVal = !!$(this).val() $(this).parent('.input').removeClass('is-active'); $(this).parent('.input').toggleClass('has-value', hasVal); var reg = new RegExp($(this).data('mask')); var val = $(this).val(); var test = reg.test(val); var luhn = null; var hasLuhn = $(this)[0].hasAttribute('data-luhn'); if (hasLuhn) { luhn = luhnChk(val.replace(/\-/gmi, '')); console.log(luhn); } if (hasLuhn && !luhn) { $(this).parent('.input').addClass('has-errors'); } else if (val && !test) { $(this).parent('.input').addClass('has-errors'); } else { $(this).parent('.input').removeClass('has-errors'); }
});
$('input').on('input', function() { var reg = new RegExp($(this).data('mask')); var test = reg.test($(this).val()); if (test) { $(this).parent('.input').addClass('is-valid'); } else { $(this).parent('.input').removeClass('is-valid'); } $(this).parent('.input').removeClass('has-errors');
});
$('#ccnumber').on('input', function() { var val = $(this).val() val = val.replace(/\D/gmi, ''); str = val.match(/.{1,4}/g); $(this).val(str ? str.join(' ') : '');
});
$('.control__input').on('change', function() { var $this = $(this); $(this).parent('.control').toggleClass('is-selected', this.checked); $('.control__input').each(function(index) { if ($(this).attr('id') !== $this.attr('id') && $(this).attr('name') === $this.attr('name')) { $(this).parent('.control').removeClass('is-selected'); } });
});
$('#to-shipping-method').on('click', function(e) { e.preventDefault(); goTo(2);
});
$('#to-payment-method').on('click', function(e) { e.preventDefault(); goTo(3);
});
$('.js-goto').on('click', function(e) { e.preventDefault(); var $this = $(this); $this.addClass('is-loading'); // setTimeout(function() { $this.removeClass('is-loading'); // setTimeout(function() { goTo($this.data('page')); // }, 250); // }, 1500);
});
function goTo(page) { $('.page').removeClass('is-active') $('.page--' + page).addClass('is-active')
}
$('.js-add-giftcard').on('click', function(e) { e.preventDefault(); var val = $('#giftcard').val(); if (val) { addGiftcard(val); $('#giftcard').val(''); $('#giftcard').blur(); }
});
function addGiftcard(code) { $('.cards').after('<div class="giftcard"><div class="f"><div class="f70"><b>' + code + '</b><div class="microcopy">Balance left: $0.00</div></div><div class="f30">$50.00</div></div></div>'); $('.giftcard').first().hide().fadeIn();
}
$('.collapser__label').on('click', function(e) { e.preventDefault(); $(this).parent('.collapser').toggleClass('is-open'); var isopen = $('.collapser').hasClass('is-open'); if ($(this).parent('.collapser').find('.collapser__content input')) { $(this).parent('.collapser').find('.collapser__content input').first().focus(); }
});
function luhnChk(luhn) { var len = luhn.length, mul = 0, prodArr = [[0, 1, 2, 3, 4, 5, 6, 7, 8, 9], [0, 2, 4, 6, 8, 1, 3, 5, 7, 9]], sum = 0; while (len--) { sum += prodArr[mul][parseInt(luhn.charAt(len), 10)]; mul ^= 1; } return sum % 10 === 0 && sum > 0;
};
$('#billing-same').on('change', function() { if (!$(this)[0].checked) { $('#billing').show(); } else { $('#billing').hide(); }
});
$('#payment-cc, #payment-paypal').on('change', function () { if ($(this)[0].id === 'payment-cc') { $('.message').eq(0).addClass('is-visible').removeClass('is-hidden'); $('.message').eq(1).addClass('is-hidden').removeClass('is-visible'); } else { $('.message').eq(1).addClass('is-visible').removeClass('is-hidden'); $('.message').eq(0).addClass('is-hidden').removeClass('is-visible'); }
});
A Pen by Reinier Kaper - Script Codes
A Pen by Reinier Kaper - Script Codes
Home Page Home
Developer Reinier Kaper
Username TheDutchCoder
Uploaded January 21, 2023
Rating 3
Size 19,080 Kb
Views 8,096
Do you need developer help for A Pen by Reinier Kaper?

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!

Reinier Kaper (TheDutchCoder) Script Codes
Name
Simple async video embed
CSS dynamic slider
Create amazing art & images 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!