Online Tools

Developer
Boaz
Size
7,134 Kb
Views
14,168
  1. Online Tools Previews
  2. Online Tools HTML Codes
  3. Online Tools CSS Codes
  4. Online Tools JS Codes

How do I make an online tools?

A collection of online tools stacked in isotope cards.. What is a online tools? How do you make a online tools? This script and codes were developed by Boaz on 15 December 2022, Thursday.

Online Tools Previews
IQ Test

Online Tools - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Online Tools</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Chonburi'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Shrikhand''> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="" rel="stylesheet">
<div class="header"><button class="button left">	<label for="navigation">
<i class="material-icons">tune</i>	</label>	</button> <h1><span class="material-icons">build</span> Online free tools</h1>curated by <a href="https://www.aiboaz.co.il">Boaz</a></div>
<div class="menudiv"> <menu class="filters"> <span>categories:</span> <div class="button-group" data-filter-group="category"> <button class="button is-checked" data-filter="">any</button> <button class="button" data-filter=".color"> <i class="material-icons">color_lens</i>color</button> <button class="button" data-filter=".typography"><i class="material-icons">text_fields</i>typography</button> <button class="button" data-filter=".icons"> <i class="material-icons">save</i>icons</button> <button class="button" data-filter=".images"> <i class="material-icons image">image</i>Images</button> <button class="button" data-filter=".code"> <i class="material-icons code">code</i>code</button> <button class="button" data-filter=".ux"> <i class="material-icons">format_shapes</i>User experiance</button> <button class="button" data-filter=".inspiration"> <i class="material-icons inspiration">lightbulb_outline</i>inspiration \ productivity</button> </div> <span>Usage:</span> <div class="button-group" data-filter-group="usage"> <button class="button is-checked" data-filter="">any</button> <button class="button" data-filter=".library"><i class="material-icons">book</i>library</button> <button class="button" data-filter=".tool"><i class="material-icons use Tool">build</i>Tool </button> <button class="button" data-filter=".generator"><i class="material-icons use generator">flash_on</i>generator </button> <button class="button" data-filter=".create"> <i class="material-icons use create">create</i>create and edit </button> </menu> </div> <ol id="list"> <li class="card inspiration create"><a href="http://www.zenpen.io/	"><h2>zenpen </h2></a> <div class="gradeH">9.5</div> </li> <li class="card"><a href="https://www.supremo.tv/typeterms/"><h2>typeterms </h2></a><i class="material-icons">text_fields</i> <div class="gradeM">6</div> </li> <li class="card"><a href="http://loremfuckingipsum.com/"><h2>loremfuckingipsum </h2><p>Finally the placeholder text for people who have some fucking passion!</p><i class="material-icons use generator">flash_on</i>
</a> <div class="gradeH">10</div> </li> <li class="card typography tool"><a href="http://chengyinliu.com/whatfont.html"><h2>WhatFont </h2><p>the easiest way to find out the fonts used in a webpage</p></a><div class="gradeH">10</div> </li> <li class="card code create"><a href="https://juntoo.co/"><h2>juntoo </h2> </a> <div class="gradeL">3</div> </li> <li class="card icons images Tool"><a href="http://javier.xyz/visual-center/	"><h2>visual-center </h2><p>This is a tool that will find the visual center of your images.</p> </a> <div class="gradeH">8</div> </li> <li class="card library"><a href="http://cssparadise.com/"><h2>cssparadise </h2><p>offline :(</p></a> <div class="gradeL">0</div> </li> <li class="card image generator"><a href="http://uifaces.com/	"><h2>uifaces </h2></a> <p>avatar images for mockups</p> <i class="material-icons generator">flash_on</i> <div class="gradeH">10</div> </li> <li class="card code generator"><a href="http://uinames.com/	"><h2>uinames </h2></a> <p>avatar names generator</p><i class="material-icons">flash_on</i> <div class="gradeH">10</div> </li> <li class="card images library"><a href="http://makerbook.net/"><h2>makerbook </h2> </a> <div class="gradeM">7</div> </li> <li class="card images library"><a href="http://magdeleine.co/browse/	"><h2>magdeleine </h2></a> <p>HAND-PICKED FREE PHOTOS FOR YOUR INSPIRATION</p> <div class="gradeM">6</div> </li> <li class="card images library"><a href="http://finda.photo/"><h2>finda.photo/ </h2><p>Search through thousands of free (CC0 licensed) stock photos</p> </a> <div class="gradeH">10</div> </li> <li class="card code generator"><a href="http://colinkeany.com/blend/	"><h2>blend </h2><p>Generate simple and beautiful CSS3 gradients</p> </a> <div class="gradeM">7</div> </li> <li class="card tool"><a href="http://thenuschool.com/how-much/?from=boldhome#/start	"><h2>How Much Should I Charge? </h2> <p>Answer 5 questions, and know how much to charge </p> </a> <div class="gradeH">8</div> </li> <li class="card tool"><a href="https://projects.invisionapp.com"><h2>invision </h2><p> </p></a> <div class="gradeH">8</div> </li> <li class="card library"><a href="http://pspanels.com/"><h2>Photoshop Panels </h2> <p>TOOLS , PLUGINS, EXTENSIONS, PANELS AND SCRIPTS for photoshop</p> <i class="material-icons">book</i></a> <div class="gradeM">7</div> </li> <li class="card inspiration library"><a href="http://pttrns.com/	"><h2>pttrns </h2><p> </p></a> <div class="gradeH">9</div> </li> <li class="card inspiration library"><a href="http://uxarchive.com/"><h2>uxarchive </h2><p> </p></a> <div class="gradeM">7</div> </li> <li class="card code generator"><a href="http://enjoycss.com/gallery/gradient_patterns	"><h2>gradient patterns generator </h2><p>css only gradient and patterns generator</p></a> <div class="gradeH">8</div> </li> <li class="card inspiration library"><a href="http://uigarage.net/"><h2>uigarage </h2><p> </p></a> <div class="gradeM">7</div> </li> <li class="card inspiration library"><a href="http://www.brianlovin.com/design-details/"><h2>DESIGN DETAILS </h2><p> </p></a> <p>A VISUAL EXPLORATION of the BEST PRODUCTS</p> <div class="gradeM">6</div> </li> <li class="card typography library"><a href="http://fontcdn.org/	"><h2>fontcdn </h2><p> </p></a> <div class="gradeM">5</div> </li> <li class="card generator"><a href="http://www.fakenamegenerator.com/	"><h2>fakenamegenerator </h2><p> </p></a> <p>Your Randomly Generated Identity</p> <div class="gradeL">3</div> </li> <li class="card code"><a href="https://morgancarter.com.au/design-solutions/placeholder-avatars"><h2>placeholder-avatars </h2><p> </p></a> <div class="gradeM">5</div> </li> <li class="card ux"><a href="https://jdittrich.github.io/quickMockup/	"><h2>quickMockup </h2><p> </p> </a> <div class="gradeL">3</div> </li> <li class="card typography"><a href="http://open-foundry.com/hot30	"><h2>Hot30 </h2><p>A new platform for open-source fonts in a noise-free environment</p> </a> <div class="gradeH">10</div> </li> <li class="card library"><a href="http://instantlogosearch.com/	"><h2>instantlogosearch </h2><p> </p></a> <div class="gradeL">4</div> </li> <li class="card inspiration tool"><a href="http://designersblock.co/	"><h2>designersblock </h2><p> </p></a> <div class="gradeM">5</div> </li> <li class="card tool inspiration"><a href="https://website.grader.com/	"><h2>website.grader </h2><p> </p> </a> <div class="gradeM">7</div> </li> <li class="card code library"><a href="http://tobiasahlin.com/spinkit/	"><h2>spinkit </h2> <p>spinners</p> </a> <div class="gradeM">6</div> </li> <li class="card typography tool"><a href="https://glyphdiff.yuki.rocks/	"><h2>glyphdiff </h2></a> <p>font compare</p> <div class="gradeH">8</div> </li> <li class="card inspiration"><a href="https://muz.li/"><h2>muzli </h2></a> <p>inspiration for designers</p> <div class="gradeH">8</div> </li> <li class="card color library"><a href="http://colorhunt.co/"><h2>colorhunt </h2><p></p></a> <div class="gradeH">8</div> </li> <li class="card color library tool"><a href="http://www.materialui.co/"><h2>material ui kits </h2> <p>materialcolor pallettes, and more rapid development of websites & apps.</p> </a> <div class="gradeH">8</div> </li> <li class="card color library"><a href="http://pltts.me/"><h2>pltts </h2> <p> yet another color library</p> </a> <div class="gradeH">7</div> </li> <li class="card color tool"><a href="http://www.colorfavs.com/"><h2>colorfavs </h2> <p> Create a Palette from an Image</p> </a> <div class="gradeH">8</div> </li> <li class="card color"><a href="http://brand-colors.com/"><h2>brand-colors </h2> <p> </p> </a> <div class="gradeH">8</div> </li> <li class="card icons"><a href="https://nucleoapp.com/"><h2>nucleo icons </h2> <p> </p></a> <div class="gradeH">8</div> </li> <li class="card icons library"><a href="https://design.google.com/icons/"><h2>material-icons </h2> <p> </p> </a> <div class="gradeH">8</div> </li> <li class="card icons"><a href="https://thenounproject.com/"><h2>thenounproject </h2><p></p></a> <div class="gradeH">10</div> </li> <li class="card icons"><a href="http://www.flaticon.com/"><h2>flaticon </h2><p></p></a> <div class="gradeH">8</div> </li> <li class="card icons library"><a href="https://www.iconfinder.com/"><h2>iconfinder </h2><p></p></a> <div class="gradeH">10</div> </li> <li class="card icons"><a href="http://evil-icons.io/"><h2>evil-icons </h2><p></p></a> <div class="gradeH">8</div> </li> <li class="card icons"><a href="http://designation.io/campfires/"><h2>campfires </h2><p></p></a> <div class="gradeM">6</div> </li> <li class="card icons"><a href="https://iconstore.co/"><h2>iconstore </h2><p></p></a> <div class="gradeH">8</div> </li> <li class="card icons"><a href="https://thoughtbot.github.io/foundry/"><h2>foundry icons </h2><p></p></a> <div class="gradeH">8</div> </li> <li class="card icons"><a href="https://vectr.com/"><h2>vectr </h2><p></p></a> <div class="gradeH">8</div> </li> <li class="card icons"><a href="https://www.syncfusion.com/downloads/metrostudio"><h2>metro icons </h2><p></p></a> <div class="gradeH">8</div> </li> <li class="card"><a href="https://codepen.io/"><h2>codepen </h2> <p>CodePen is a playground for the front end side of the web</p> </a> <div class="gradeH">10</div> </li> <li class="card code library"><a href="https://codyhouse.co/"><h2>codyhouse </h2> <p>frontend experiments and snippets</p> </a> <div class="gradeH">10</div> </li> <li class="card code tool"><a href="https://website.grader.com/"><h2>website.grader </h2> <p> </p> </a> <div class="gradeH">8.5</div> </li> <li class="card image tool"><a href="http://www.favicomatic.com/"><h2>favicomatic </h2> <p> </p> </a> <div class="gradeH">10</div> </li> <li class="card code tool"><a href="http://www.feedthebot.com/"><h2>feed the bot </h2> <p>See how well a page follows the Google guidelines.</p></a> <div class="gradeH">9</div> </li> <li class="card code create"><a href="https://www.google.com/webmasters/tools/richsnippets"><h2>Codepen.io </h2> <p> </p></a> <div class="gradeH">10</div> </li> <li class="card code generator"><a href="http://www.cssmatic.com/"><h2>cssmatic </h2> <p>frontend CSS tools for web designers </p></a> <div class="gradeH">7</div> </li> <li class="card color tool library"><a href="http://www.materialpalette.com/"><h2>materialpalette </h2> <p> </p> </a> <div class="gradeH">8</div> </li> <li class="card color library"><a href="http://developer.android.com/design/style/color.html"><h2>material color guide </h2> <p> </p> </a> <div class="gradeM">4</div> </li> <li class="card color library"><a href="http://flatuicolors.com/"><h2>flatuicolors </h2> <p> </p> </a> <div class="gradeH">10</div> </li> <li class="card code create generator"><a href="http://beamusup.com/generate-htaccess/"><h2>htaccess generator </h2> <p>its a .htaccess generator </p></a> <div class="gradeH">10</div> </li> <li class="card code"><a href="http://www.pixiesoft.com/flip/"><h2>היפוך טקסט </h2> <p> </p></a> <div class="gradeH">10</div> </li> <li class="card code create"><a href="http://triangle.designyourcode.io/"><h2>triangle </h2> <p>css triangle</p> </a> <div class="gradeM">8</div> </li> <li class="card code ux tool"><a href="http://ami.responsivedesign.is/"><h2>ami.responsive </h2> <p> </p> </a> <div class="gradeH">9</div> </li> <li class="card color library"><a href="http://findguidelin.es/?utm_source=layervault"><h2>findguidelin </h2> <p> </p> </a> <div class="gradeM">6</div> </li> <li class="card code create"><a href="https://www.gliffy.com/"><h2>codepen </h2> <p> </p> </a> <div class="gradeH">10</div> </li> <li class="card inspiration tool"><a href="https://trello.com/"><h2>trello </h2> <p>project managment. File attachments up to 10MB free</p> </a> <div class="gradeH">10</div> </li> <li class="card code tool"><a href="https://jakearchibald.github.io/svgomg/"><h2>svgomg</h2> <p> </p></a> <div class="gradeH">10</div> </li> <li class="card icons library"><a href="http://www.entypo.com/"><h2>entypo </h2> <p>icons</p></a> <div class="gradeM">4</div> </li> <!--http://html5please.com/ http://hackerthemes.com/bootstrap-cheatsheet/ https://developers.google.com/speed/pagespeed/ http://www.materialup.com/https://resourcecards.com/ http://freebiesbug.com/ http://uidsgn.co/ http://www.psddd.co/ http://dbfreebies.co/ https://www.mockuuups.com/freebies/ http://madefordesigners.com/ http://www.bootstrapzero.com/ http://mutant-library.com/cat/free
--> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://npmcdn.com/[email protected]/dist/isotope.pkgd.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Online Tools - Script Codes CSS Codes

@import 'https://fonts.googleapis.com/css?family=Suez+One';
.card { overflow: hidden; display: inline-block; background-color: ghostwhite; position: relative; padding: 12px 25px; margin: 5px; width: 250px; height: auto; top: 0; left: 0; border-radius: 2px; box-shadow: 0 1px 2px rgba(43, 59, 93, .29); -webkit-transition: -webkit-transform .3s ease-in-out, box-shadow .3s ease-in-out; transition: transform .3s ease-in-out, box-shadow .3s ease-in-out, position .3s cubic-bezier(.4, .2, .5, 1.4); z-index: 1;
}
.card:hover,
button:hover { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.3);
}
div[class^="grade"] { display: block;background: ghostwhite; width: 36px; height: 36px;right:5px; border-radius: 45px; padding: 11px; float: right; line-height: 16px; box-sizing: border-box; font-weight: 600; font-family: 'Coiny','Chonburi', cursive;
}
.gradeH { color: #4bc87f;
}
.gradeM { color: Orange;
}
.gradeL { color: #DA4949;
}
/*demo styles*/
.card a { color: inherit; text-decoration: none;
}
.header h1,
h2 { font-family: 'Suez One','Chonburi', cursive; size: 20px;color:#334854;
}
.header { padding: 15px 20px 20px 10px; display: block; background-color: #f5f5f5; color: ; position: fixed; overflow: hidden; left: 0px; top: 0px; right: 0px; height: 40px; -webkit-box-shadow: rgba(0, 0, 0, .1) 0 1px 0; text-align: center; width: 100%; z-index: 9;
}
.header a { color: orange;
}
.card p { font-family: roboto, sans; font-size: 13px; color: #aab8c2; padding-bottom: 12px; border-bottom: 1px solid #aab8c2;
}
.card .material-icons { color: #aab8c2; font-size: 18px; display: inline-block;
}
body { background: #f2f2f2;
}
#list{top:80px;}
#list,
menu,
h1 { margin: 0 auto; width: 100%; max-width: 1300px; verticle-align: top; padding: 0 3%
}
.menudiv.open { top: 70px; }
.menudiv { transition: top .5s ease-in-out; position: fixed; z-index: 2; top: -120%;left: 0; font-size: 12px; background: #FF9071; width: 100%; padding: 12px; height: auto; box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
}
.button-group { display: inline-block;max-width:480px; width: 0 auto;padding:12px;
}
menu .material-icons { color: #F36B6B; display: inline-block; padding: 6px 8px 0 0; line-height: 0.2
}
.favico { display: inline-block; width: 16px; float: left; padding: 5px 1rem 1rem 0;
}
button { background-color: #fff; border: 0; border-radius: 5px; color: #F36B6B; cursor: pointer; display: inline-block; font: Roboto, sans-serif; height: 36px; margin: 5px; min-width: 36px; outline: 0; overflow: hidden; text-align: center; text-decoration: none; text-transform: uppercase; transition: background-color .2s, box-shadow .2s; vertical-align: middle; white-space: nowrap; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26); padding: 8px 16px;
}
button.is-checked { background-color: #F36B6B; color: white;border: 1px solid white; box-shadow: 0 0 0 0 rgba(0, 0, 0, .26);
}
button.is-checked>* { color: white;
}
.left { float: left;
}
/*category icons*/
.card a:after{ color: #aab8c2; display: inline-block;position:relative;left:0;bottom:0; font-family: 'Material Icons'; font-style: normal; font-weight: 400;}
.images a:after{content:'image';}
.color a:after{content:'color_lens';}
.icons a:after{content:'save';}
.code a:after{content:'code';}
.inspiration a:after{content:'lightbulb_outline';}
.typography a:after{content:'text_fields';}
.ux a:after{content:'format_shapes';}
/*category icons*/
.card div[class^="grade"]:before{ color: #aab8c2; display: inline;right:200px;position:relative;bottom:10px; font-family: 'Material Icons'; font-style: normal; font-weight: 400;}
.library div[class^="grade"]:before{content:'book';}
.generator div[class^="grade"]:before{content:'flash_on';}
.tool div[class^="grade"]:before{content:'build';}
.create div[class^="grade"]:before{content:'create';}
/*more colors*/
ul .card:nth-child(odd) h2{color:#1D2B53;}

Online Tools - Script Codes JS Codes

/***
@title:
Favicons
@version:
2.0
@author:
Andreas Lagerkvist
@date:
2008-09-16
@url:
http://andreaslagerkvist.com/jquery/favicons/
@license:
http://creativecommons.org/licenses/by/3.0/
@copyright:
2008 Andreas Lagerkvist (andreaslagerkvist.com)
@requires:
jquery
***/
jQuery.fn.favicons = function(conf) { var config = jQuery.extend({ insert: 'appendTo', defaultIco: 'favicon.png' }, conf); return this.each(function() { jQuery('a[href^="http://"]', this).each(function() { var link = jQuery(this); var faviconURL = link.attr('href').replace(/^(http:\/\/[^\/]+).*$/, '$1') + '/favicon.ico'; var faviconIMG = jQuery('<img src="' + config.defaultIco + '" class="favico" alt="" />')[config.insert](link); var extImg = new Image(); extImg.src = faviconURL; if (extImg.complete) { faviconIMG.attr('src', faviconURL); } else { extImg.onload = function() { faviconIMG.attr('src', faviconURL); }; } }); });
};
// Or, hide them
$("img").error(function() { $(this).hide();
});
$('.header .button').on('click', function() { $('.header .button').toggleClass('is-checked') $('.menudiv').toggleClass('open') });
// external js: isotope.pkgd.js
$(function() { //.isotope({ { var $container = $('#list'); // Fire Isotope $container.isotope({ itemSelector: '.card', layoutMode: 'masonry', //getSortData: { grade: 'class^="grade"' } }); // store filter for each group var filters = {}; $('.filters').on('click', '.button', function() { var $this = $(this); // get group key var $buttonGroup = $this.parents('.button-group'); var filterGroup = $buttonGroup.attr('data-filter-group'); // set filter for group filters[filterGroup] = $this.attr('data-filter'); // combine filters var filterValue = ''; for (var prop in filters) { filterValue += filters[prop]; } // set filter for Isotope $container.isotope({ filter: filterValue }); }); // change is-checked class on buttons $('.button-group').each(function(i, buttonGroup) { var $buttonGroup = $(buttonGroup); $buttonGroup.on('click', 'button', function() { $buttonGroup.find('.is-checked').removeClass('is-checked'); $(this).addClass('is-checked'); }); });
});
Online Tools - Script Codes
Online Tools - Script Codes
Home Page Home
Developer Boaz
Username Aniboaz
Uploaded December 15, 2022
Rating 3.5
Size 7,134 Kb
Views 14,168
Do you need developer help for Online Tools?

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!

Boaz (Aniboaz) Script Codes
Name
Kanban Board
New navbar
Top nav menu test
SVG animations for portfolio
A Pen by Boaz
Online Tools 3.0
Digital assets
New website header
Online Tools 2.0
Background patterns
Create amazing blog posts 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!