A Pen by Jonathan Garner

Size
3,813 Kb
Views
24,288

How do I make an a pen by jonathan garner?

What is a a pen by jonathan garner? How do you make a a pen by jonathan garner? This script and codes were developed by Jonathan Garner on 13 August 2022, Saturday.

A Pen by Jonathan Garner Previews

A Pen by Jonathan Garner - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Jonathan Garner</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="u-wrapper"> <section class="c-category-browser"> <nav class="c-category-nav"> <div class="c-category-nav__header"> <h1>Category 1</h1> <div class="nav-controls"></div> </div> <ul class="c-category-projects__project-list"> <li class="c-category-project current"> <a href=""><img src="http://demo.patternlab.io/images/fpo_square.png" alt="" /> <h2 class="c-category-project__title">Project Title</h2> </a> </li> <li class="c-category-project"> <a href=""><img src="http://demo.patternlab.io/images/fpo_square.png" alt="" /> <h2 class="c-category-project__title">Project Title</h2> </a> </li><li class="c-category-project"> <a href=""><img src="http://demo.patternlab.io/images/fpo_square.png" alt="" /> <h2 class="c-category-project__title">Project Title</h2> </a> </li><li class="c-category-project"> <a href=""><img src="http://demo.patternlab.io/images/fpo_square.png" alt="" /> <h2 class="c-category-project__title">Project Title</h2> </a> </li><li class="c-category-project"> <a href=""><img src="http://demo.patternlab.io/images/fpo_square.png" alt="" /> <h2 class="c-category-project__title">Project Title</h2> </a> </li><li class="c-category-project"> <a href=""><img src="http://demo.patternlab.io/images/fpo_square.png" alt="" /> <h2 class="c-category-project__title">Project Title</h2> </a> </li><li class="c-category-project"> <a href=""><img src="http://demo.patternlab.io/images/fpo_square.png" alt="" /> <h2 class="c-category-project__title">Project Title</h2> </a> </li><li class="c-category-project"> <a href=""><img src="http://demo.patternlab.io/images/fpo_square.png" alt="" /> <h2 class="c-category-project__title">Project Title</h2> </a> </li><li class="c-category-project"> <a href=""><img src="http://demo.patternlab.io/images/fpo_square.png" alt="" /> <h2 class="c-category-project__title">Project Title</h2> </a> </li><li class="c-category-project"> <a href=""><img src="http://demo.patternlab.io/images/fpo_square.png" alt="" /> <h2 class="c-category-project__title">Project Title</h2> </a> </li><li class="c-category-project"> <a href=""><img src="http://demo.patternlab.io/images/fpo_square.png" alt="" /> <h2 class="c-category-project__title">Project Title</h2> </a> </li>
<!-- <li class="c-category-end-message"> <h2 class="c-category-project__title">NO MORE</h2> </li> --> </ul> </nav> </section>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Jonathan Garner - Script Codes CSS Codes

img { width: 100%; height: auto;
}
.u-wrapper { padding: 0 1em; max-width: 70em; margin: 0 auto;
}
body { overflow: hidden; font-family: verdana;
}
.c-category-browser { background: #9d9282; margin: 0 -9999rem; padding: 0 9999rem; width: 100%; height: 100%; overflow: hidden;
}
.c-category-browser h1 { margin: 0; font-size: 1.2em; color: black;
}
.c-category-nav { overflow-x: scroll; padding-bottom: 1em; margin-bottom: -1em;
}
.c-category-nav__header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; position: relative;
}
.c-category-projects__project-list { list-style: none; padding: 0; margin: 0.5em 0 0;
}
.c-category-projects__project-list:before, .c-category-projects__project-list:after { content: " "; /* 1 */ display: table; /* 2 */
}
.c-category-projects__project-list:after { clear: both;
}
.c-category-project { display: block; width: 100px; float: left; margin-right: 1em; counter-increment: step-counter;
}
.c-category-project a { text-decoration: none; color: black;
}
.c-category-project.current { border-bottom: solid 5px white; padding-bottom: 0.5em;
}
.c-category-project.current:hover { border-bottom: solid 5px white; padding-bottom: 0.5em;
}
.c-category-project:hover { border-bottom: solid 5px rgba(255, 255, 255, 0.5); padding-bottom: 0.5em;
}
.c-category-project__title { font-size: 0.5em; margin-bottom: 0;
}
.c-category-project__title::before { content: counter(step-counter); margin-right: 5px;
}
.slick-disabled { opacity: 0.5;
}

A Pen by Jonathan Garner - Script Codes JS Codes

$(document).ready(function(){ $('.c-category-projects__project-list').slick({ mobileFirst: true, infinite: false, slidesToShow: 3, slidesToScroll: 1, appendArrows: '.nav-controls', nextArrow: '<button type="button" class="slick-next">></button>', prevArrow: '<button type="button" class="slick-prev"><</button>', respondTo: 'min', responsive: [ { breakpoint: 1024, settings: { slidesToShow: 8 } }, { breakpoint: 600, settings: { slidesToShow: 6 } }, { breakpoint: 400, settings: { slidesToShow: 4 } } ] });
});
A Pen by Jonathan Garner - Script Codes
A Pen by Jonathan Garner - Script Codes
Home Page Home
Developer Jonathan Garner
Username jonathangarner
Uploaded August 13, 2022
Rating 3
Size 3,813 Kb
Views 24,288
Do you need developer help for A Pen by Jonathan Garner?

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!

Jonathan Garner (jonathangarner) Script Codes
Create amazing marketing copy with AI!

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