A Pen by David Klotz

Developer
David Klotz
Size
5,064 Kb
Views
4,048
  1. A Pen by David Klotz Previews
  2. A Pen by David Klotz HTML Codes
  3. A Pen by David Klotz CSS Codes

How do I make an a pen by david klotz?

What is a a pen by david klotz? How do you make a a pen by david klotz? This script and codes were developed by David Klotz on 23 January 2023, Monday.

A Pen by David Klotz Previews
IQ Test

A Pen by David Klotz - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by David Klotz</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>	<div class="nav-dropdown-wrapper">	<a class="js-dropdown-trigger" href="#0">dropdown trigger</a>	<nav class="nav-dropdown">	<a href="#0" class="js-dropdown-close">Close</a> <ul class="main-nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="dropdown"> <a href="#">Dropdown</a> <ul class="drop-nav is-hidden">	<li class="go-back"><a href="#0">Go Back</a></li>	<li class="see-all"><a href="#0">All Dropdown</a></li> <li><a href="#">Dropdown Item</a></li> <li><a href="#">Dropdown Item</a></li> <li class="dropdown"> <a href="#">Dropdown Two</a> <ul class="drop-nav-two is-hidden">	<li class="go-back"><a href="#0">Go Back</a></li>	<li class="see-all"><a href="#0">All Dropdown Two</a></li> <li><a href="#">Dropdown Item</a></li> <li><a href="#">Dropdown Item</a></li> <li><a href="#">Dropdown Item</a></li> </ul> </li> <li><a href="#">Writing</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul>	</nav>	</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
</body>
</html>

A Pen by David Klotz - Script Codes CSS Codes

html { box-sizing: border-box;
}
*, *::after, *::before { box-sizing: inherit;
}
/* Variables
=========================================== */
/* Mixins
=========================================== */
/* Styles
=========================================== */
html { box-sizing: border-box;
}
*,
*::before,
*::after { box-sizing: inherit;
}
html, body { font-size: 100%; font-family: sans-serif; line-height: 1.3;
}
html *, body * { outline: 0;
}
@media screen and (min-width: 1441px) { html, body { line-height: 1.4; }
}
/* Navigation Styles - Desktop
======================================= */
.nav-dropdown { background: #222;
}
.nav-dropdown > ul { list-style: none; padding: 0; margin: 0; text-align: center;
}
.nav-dropdown > ul li { margin: 0 auto;
}
.nav-dropdown > ul.dropdown-is-active { visibility: hidden; transform: translateY(-100%); transition: transform .0s 0s, visibility 0s 0s; display: none;
}
.nav-dropdown .main-nav { background: #222; position: relative;
}
.nav-dropdown .main-nav > li { border-left: 1px solid #444; display: inline-block; text-align: left;
}
@media screen and (min-width: 960px) { .nav-dropdown .main-nav > li.dropdown { position: relative; }
}
.nav-dropdown .main-nav > li.dropdown:first-child { border-left: none;
}
.nav-dropdown .main-nav > li.dropdown:hover > ul { display: block;
}
@media screen and (min-width: 960px) { .nav-dropdown .main-nav > li.dropdown > a:after { content: '\f078'; font-family: "FontAwesome"; font-size: .5em; display: block; color: #fff; position: absolute; top: 38%; right: 15px; }
}
.nav-dropdown .main-nav > li.dropdown > ul { background: #222; position: absolute; display: none; white-space: nowrap;
}
.nav-dropdown .main-nav > li.dropdown > ul li { border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
@media screen and (min-width: 960px) { .nav-dropdown .main-nav > li.dropdown > ul li.dropdown { position: relative; }
}
@media screen and (min-width: 960px) { .nav-dropdown .main-nav > li.dropdown > ul li.dropdown > a:after { content: '\f054'; font-family: "FontAwesome"; font-size: .5em; display: block; color: #fff; position: absolute; top: 38%; right: 15px; }
}
.nav-dropdown .main-nav > li.dropdown > ul li:last-child { border-bottom: 0px;
}
.nav-dropdown .main-nav > li.dropdown > ul li ul { display: none;
}
.nav-dropdown .main-nav > li.dropdown > ul li:hover > ul { display: block; position: absolute; width: auto; white-space: nowrap; background: #222; left: 100%; top: 0;
}
.nav-dropdown .main-nav a { color: #fff; display: block; padding: 10px 30px; text-decoration: none;
}
.nav-dropdown .main-nav .go-back > a:before { content: '\f053'; font-family: "FontAwesome"; font-size: .5em; display: block; color: #fff; position: absolute; left: 15px; padding-top: 4px;
}
@media screen and (min-width: 960px) { .nav-dropdown .main-nav .go-back { display: none; }
}
/* Navigation Styles - Mobile
======================================= */
.nav-dropdown-wrapper .js-dropdown-trigger { width: 100%; background: #000; display: block; text-align: center; padding: 15px; color: #fff;
}
.nav-dropdown-wrapper .js-dropdown-trigger a { color: #fff;
}
@media screen and (min-width: 960px) { .nav-dropdown-wrapper .js-dropdown-trigger { display: none; }
}
.nav-dropdown-wrapper .js-dropdown-close { /* 'X' close icon - mobile version only */ position: absolute; z-index: 1; right: 0; top: 0; height: 50px; width: 50px; /* image replacement */ overflow: hidden; text-indent: 100%; white-space: nowrap; color: transparent;
}
.nav-dropdown-wrapper .js-dropdown-close::after, .nav-dropdown-wrapper .js-dropdown-close::before { /* this is the 'X' icon */ content: ''; position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; transform: translateX(-50%); transform: translateY(-50%); height: 20px; width: 2px; top: 15px; background-color: #fff;
}
.nav-dropdown-wrapper .js-dropdown-close::after { transform: translateX(-50%); transform: translateY(-50%); transform: rotate(45deg);
}
.nav-dropdown-wrapper .js-dropdown-close::before { transform: translateX(-50%); transform: translateY(-50%); transform: rotate(-45deg);
}
@media screen and (min-width: 960px) { .nav-dropdown-wrapper .js-dropdown-close { display: none; }
}
@media (max-width: 60em) { .nav-dropdown { visibility: visible; position: absolute; width: 100%; top: 0; height: 100%; overflow: hidden; transform: translateY(-100%); transition: transform .5s 0s, visibility .3s 0s; } .nav-dropdown.dropdown-is-active { visibility: visible; transform: translateY(0); transition: transform .5s 0s, visibility 0s 0s; -webkit-overflow-scrolling: touch; top: 0; } .nav-dropdown .main-nav { background: transparent; padding-top: 50px; transform: translateX(0); width: 100%; position: absolute; top: 0; left: 0; transition: transform .3s 0s; } .nav-dropdown .main-nav.move-out { opacity: 1; transform: translateX(-100%); transition: transform .3s 0s; position: absolute; } .nav-dropdown .main-nav > li { display: block; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .nav-dropdown .main-nav > li.dropdown > a:after { content: '\f054'; font-family: "FontAwesome"; font-size: .5em; display: block; color: #fff; position: absolute; right: 15px; margin-top: -15px; } .nav-dropdown .main-nav > li.dropdown ul { display: block; width: 100%; height: 100%; left: 0; top: 0; padding-top: 50px; position: absolute; transform: translateX(100%); transition: transform .3s 0s; } .nav-dropdown .main-nav > li.dropdown ul.move-out { opacity: 1; transform: translateX(-100%); transition: transform .3s 0s; } .nav-dropdown .main-nav > li.dropdown ul > li { display: block; width: 100%; } .nav-dropdown .main-nav > li.dropdown ul > li.dropdown > a:after { content: '\f054'; font-family: "FontAwesome"; font-size: .5em; display: block; color: #fff; position: absolute; right: 15px; margin-top: -15px; } .nav-dropdown .main-nav > li.dropdown ul > li.dropdown > ul { display: block; width: 100%; top: 0; right: 0; position: absolute; transform: translateX(100%); transition: transform .3s 0s; } .nav-dropdown .main-nav > li.dropdown ul > li.dropdown > ul.move-out { transform: translateX(0%); transition: transform .5s 0s; } .nav-dropdown .main-nav > li.dropdown ul > li.dropdown > ul.is-hidden { transform: translateX(100%); transition: transform .3s 0s; } .nav-dropdown .main-nav > li.dropdown ul > li > ul { display: block; position: absolute; width: auto; white-space: nowrap; background: transparent; left: 0; top: 0; }
}
A Pen by David Klotz - Script Codes
A Pen by David Klotz - Script Codes
Home Page Home
Developer David Klotz
Username dkdesign
Uploaded January 23, 2023
Rating 3
Size 5,064 Kb
Views 4,048
Do you need developer help for A Pen by David Klotz?

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!

David Klotz (dkdesign) Script Codes
Name
Flexbox Media Object
My Starter Kit For Codepen
CSS Transitions Transforms Reveal v1.0
Tout with hover content
Tout Pattern
Flexbox Layout
Bourbon refill accordion tabs
Responsive Testimonial Slider v1.0
Basic Fullscreen Hero
Tout box hover content overlay
Create amazing sales emails 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!