Works by Category

Developer
Larry Geams Parangan
Size
2,676 Kb
Views
28,336
  1. Works by Category Previews
  2. Works by Category HTML Codes
  3. Works by Category CSS Codes
  4. Works by Category JS Codes

How do I make an works by category?

Select list of works through different categories. Usually used on portfolio/resume websites. :). What is a works by category? How do you make a works by category? This script and codes were developed by Larry Geams Parangan on 13 September 2022, Tuesday.

Works by Category Previews
IQ Test

Works by Category - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Works by Category</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="wrapper"> <h1>My Works</h1>
<div class="toggles"> <button id="showall">Show All</button> <button id="web">Web Design</button> <button id="ux">UX Design</button> <button id="graphic">Graphic Design</button> <button id="motion">Motion Graphic</button>
</div>
<div class="posts"> <div class="motion post">Motion Design</div> <div class="web post">Web Design</div> <div class="ux post">UX Design</div> <div class="graphic post">Graphic Design</div> <div class="web post">Web Design</div> <div class="ux post">UX Design</div> <div class="web post">Web Design</div> <div class="motion post">Motion Design</div> <div class="graphic post">Graphic Design</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>

Works by Category - Script Codes CSS Codes

h1 { text-align: center; color: #1ECD97; font: bold 50px Arial; padding: 10px; border-bottom: 1px solid; width: 250px; margin: 0 auto 25px;
}
.toggles { width: 800px; margin: auto; display: block; clear: both; overflow: hidden;
}
button { border: 2px solid #1ECD97; border-radius: 40px; color: #1ECD97; display: block; float: left; margin: auto; padding: 10px; width: 150px; cursor: pointer; font-size: 14px; margin: 0 5px;
}
.posts { width: 800px; margin: 2em auto;
}
.posts div { font: 16px/250px Arial; width: 245px; height: 250px; float: left; margin: 10px; display: block; text-align: center; background: #1ECD97; color: #fff;
}

Works by Category - Script Codes JS Codes

$(function() { $('.toggles button').click(function(){ var get_id = this.id; var get_current = $('.posts .' + get_id); $('.post').not( get_current ).hide(500); get_current.show(500); }); $('#showall').click(function() { $('.post').show(500); });
});
Works by Category - Script Codes
Works by Category - Script Codes
Home Page Home
Developer Larry Geams Parangan
Username larrygeams
Uploaded September 13, 2022
Rating 4
Size 2,676 Kb
Views 28,336
Do you need developer help for Works by Category?

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!

Larry Geams Parangan (larrygeams) Script Codes
Name
Button Confirmation
Browser Detection - Google Chrome
Click and Hold Button Animation
Solution for Long Drop Down Items
CSS3 Loading Disk
The Android Story
Window.onload
Just Flat
Slide Toggle Navigation
Image Scale on Hover
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!