<body>
<div class="w3-container">
<h1><b>Creative dashboard:</b> free online tools for creative people</h1>
<button onclick="myFunction('D1')" class="w3-btn w3-block w3-blue w3-left-align w3-xxlarge"><i class="fas fa-image"></i> Image & photo editing, effects ...</button>
<div id="D1" class="w3-container w3-hide w3-center">
<br/>
<button class="w3-button w3-xlarge w3-red w3-round"><a href="https://www.pixlr.com/" target="_blank">Pixlr photo editor</a></button>
<button class="w3-button w3-xlarge w3-yellow w3-round"><a href="https://www.photopea.com/" target="_blank">Photopea editor</a></button>
<button class="w3-button w3-xlarge w3-dark-gray w3-round"><a href="https://vectr.com/" target="_blank">Vectr online editor</a></button>
<button class="w3-button w3-xlarge w3-green w3-round"><a href="https://colorpicker.me/#ee279b" target="_blank">ColorPicker.me</a></button>
<br/><br/>
<button class="w3-button w3-xlarge w3-orange w3-round"><a href="https://makeup.pho.to/" target="_blank">Face retouch PHO.to</a></button>
<button class="w3-button w3-xlarge w3-indigo w3-round"><a href="https://editor.pho.to/edit/" target="_blank">Pho.to editor</a></button>
<button class="w3-button w3-xlarge w3-red w3-round"><a href="https://www.google.com/search?q=remove+bg&rlz=1C1GCEA_enMK902MK902&oq=remove+bg&aqs=chrome..69i57j0l5j69i65l2.2055j0j4&sourceid=chrome&ie=UTF-8" target="_blank">Remove image BG</a></button>
<button class="w3-button w3-xlarge w3-blue w3-round"><a href="https://tinypng.com/" target="_blank">TinyPNG optimizer</a></button>
<br/><br/>
<button class="w3-button w3-xlarge w3-green w3-round"><a href="https://3dthis.com/morph.htm" target="_blank">Morph with 3Dthis</a></button>
<button class="w3-button w3-xlarge w3-yellow w3-round"><a href="https://www.qrcode-monkey.com/" target="_blank">QRcode monkey</a></button>
<button class="w3-button w3-xlarge w3-dark-gray w3-round"><a href="https://diybookcovers.com/3Dmockups/" target="_blank">DIY book covers</a></button>
<button class="w3-button w3-xlarge w3-pink w3-round"><a href="https://www.imgonline.com.ua/eng/retouch-photo.php" target="_blank">IMGonline tools</a></button>
<br/><br/>
</div>
<button onclick="myFunction('D2')" class="w3-btn w3-block w3-red w3-left-align w3-xxlarge"><i class="fas fa-film"></i> Create and edit video and animations</button>
<div id="D2" class="w3-container w3-hide w3-center">
<br/>
<button class="w3-button w3-xlarge w3-orange w3-round"><a href="https://www.kapwing.com/tools" target="_blank">Kapwing video tools</a></button>
<button class="w3-button w3-xlarge w3-dark-gray w3-round"><a href="https://moviemakeronline.com/" target="_blank">Movie maker online</a></button>
<button class="w3-button w3-xlarge w3-blue w3-round"><a href="https://www.flexclip.com/editor/app?ratio=landscape" target="_blank">Flex clip editor</a></button>
<button class="w3-button w3-xlarge w3-red w3-round"><a href="https://makeagif.com/" target="_blank">Make a GIF</a></button>
<br/><br/>
</div>
<button onclick="myFunction('D3')" class="w3-btn w3-block w3-indigo w3-left-align w3-xxlarge"><i class="fas fa-code"></i> Coder tools, editors, snippets, reference</button>
<div id="D3" class="w3-container w3-hide w3-center">
<br/>
<button class="w3-button w3-xlarge w3-red w3-round"><a href="https://html-css-js.com/" target="_blank">HTML-CSS-JS.com</a></button>
<button class="w3-button w3-xlarge w3-yellow w3-round"><a href="https://htmeditor.com/author/" target="_blank">HTMLeditor.com</a></button>
<button class="w3-button w3-xlarge w3-green w3-round"><a href="https://www.theappguruz.com/tag-tools/web/CSSAnimations/" target="_blank">Theappguruz CSS</a></button>
<button class="w3-button w3-xlarge w3-indigo w3-round"><a href="https://coveloping.com/tools" target="_blank">Coveloping Tools</a></button>
<br/><br/>
<button class="w3-button w3-xlarge w3-green w3-round"><a href="https://www.w3schools.com/" target="_blank">W3C Schools</a></button>
<button class="w3-button w3-xlarge w3-teal w3-round"><a href="https://codepen.io/your-work" target="_blank">Codepen.io</a></button>
<button class="w3-button w3-xlarge w3-red w3-round"><a href="https://www.codechef.com/ide" target="_blank">CodeChef onlineIDE</a></button>
<button class="w3-button w3-xlarge w3-pink w3-round"><a href="https://codeshare.io/" target="_blank">CodeShare live</a></button>
<br/><br/>
</div>
<button onclick="myFunction('D4')" class="w3-btn w3-block w3-deep-orange w3-left-align w3-xxlarge"><i class="fas fa-pencil-alt"></i> Writing tools and resources</button>
<div id="D4" class="w3-container w3-hide w3-center">
<br/>
<button class="w3-button w3-xlarge w3-red w3-round"><a href="http://wordonline.info/" target="_blank">Wordonline.info</a></button>
<button class="w3-button w3-xlarge w3-pink w3-round"><a href="https://www.google.com/docs/about/" target="_blank">Google docs</a></button>
<button class="w3-button w3-xlarge w3-dark-gray w3-round"><a href="https://document.online-convert.com/" target="_blank">Document convert</a></button>
<button class="w3-button w3-xlarge w3-blue w3-round"><a href="https://www.google.com/search?q=find+font&rlz=1C1GCEA_enMK902MK902&oq=find+font&aqs=chrome..69i57j0l7.2535j0j7&sourceid=chrome&ie=UTF-8" target="_blank">Find fonts</a></button>
<br/><br/>
<button class="w3-button w3-xlarge w3-indigo w3-round"><a href="https://transformer.huggingface.co/" target="_blank">AI writing</a></button>
<button class="w3-button w3-xlarge w3-red w3-round"><a href="https://dictation.io/" target="_blank">Dictation.io</a></button>
<br/><br/>
</div>
<button onclick="myFunction('D5')" class="w3-btn w3-block w3-blue w3-left-align w3-xxlarge"><i class="fas fa-search"></i> Free SEO tools</button>
<div id="D5" class="w3-container w3-hide w3-center">
<br/>
<button class="w3-button w3-xlarge w3-red w3-round"><a href="https://websiteseochecker.com/domain-authority-checker/#arearesult" target="_blank">Website SEO checker</a></button>
<button class="w3-button w3-xlarge w3-dark-gray w3-round"><a href="https://smallseotools.com/" target="_blank">Small SEO tools</a></button>
<button class="w3-button w3-xlarge w3-blue w3-round"><a href="https://moz.com/blog/best-free-seo-tools" target="_blank">60+ free SEO tools</a></button>
<button class="w3-button w3-xlarge w3-red w3-round"><a href="https://bit.ly/3oHWDOX" target="_blank">SEO Hats</a></button>
<br/><br/>
</div>
<button onclick="myFunction('D6')" class="w3-btn w3-block w3-dark-grey w3-left-align w3-xxlarge"><i class="fas fa-toolbox"></i> Even more tools and resources</button>
<div id="D6" class="w3-container w3-hide w3-center">
<br/>
<button class="w3-button w3-xlarge w3-pink w3-round"><a href="https://myresources.valentinsld.fr/" target="_blank">Project: My resources</a></button>
<button class="w3-button w3-xlarge w3-red w3-round"><a href="https://pinetools.com/" target="_blank">Pine tools</a></button>
<button class="w3-button w3-xlarge w3-orange w3-round"><a href="https://www.freecodecamp.org/" target="_blank">Free courses & Certifications</a></button>
<button class="w3-button w3-xlarge w3-grey w3-round"><a href="https://bit.ly/3joWXP1" target="_blank">FRONTO</a></button>
<br/><br/>
</div>
<br/>
<h3 class="w3-text-red">Gathered by creatives for creatives to boost your #creativity</h3>
<h3 class="w3-text-blue">Built with W3.CSS, use FontAwesome and a little JavaScript to work as it does.</h3>
</div>
<script>
function myFunction(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</body>
/*
Used:
- W3CSS - free CSS framework from W3Schools.com
- W3.CSS Accordions
- FontAwesome free icons
- Links to various sites providing online tools for various purposes (for Free)
*/
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.