A Pen by Jonathan Garner

Developer
Jonathan Garner
Size
3,813 Kb
Views
24,288
  1. A Pen by Jonathan Garner Previews
  2. A Pen by Jonathan Garner HTML Codes
  3. A Pen by Jonathan Garner CSS Codes
  4. A Pen by Jonathan Garner JS Codes

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
IQ Test

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
Name
Search Form2
JM Nav 2nd Gen prototype x2
After America
JM Top Nav v1
JM Nav 1st draft
Testing flexbox
Search Form
Mr Peanut
Inside the Stalin Archives
JM Nav 2nd Gen prototype x3
Create amazing captions 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!