Categories
Coding

Responsive Sidebar Sliding Menu – Free to Use HTML, CSS, JS Template

This is a responsive sidebar menu with a JS toggle button that slides the menu off the page and onto the page. The sidebar content was created with a e-commerce site in mind however it can be modified to be used for any type of website. Color scheme used includes white smoke, dodger blue, dark late gray, and orange which mainly makes up a blue color palette with a contrasting bright orange button. The content placeholder of the design is meant to be dynamic with a welcome message to the user and the number of items in their cart, these can be removed or replaced with your own software variables so they’re no longer static. A 3 line icon can be found at the top with the style appearance that it’s dropping into the canvas. Clicking it will trigger the JS function that’ll slide the on page or off page with a nice smooth transition. Once the page is compressed into mobile/table size it will change its width to 100% to fit small screens and will be toggled off by default, the user click the toggle button to open the side menu on mobile/tablet which is standard UI/UX for mobile side menus.

This project is free to use, enjoy. Grab the CSS, HTML, and JS code below and implement it on your website. I ask that you support my projects by crediting me somewhere on your webpage.

How to attribute:
<a href=”https://bitoony.com” target=”_blank”>Logo Designed by Bitoony.com</a>

See the Pen Sidebar UI Design – Shop Concept – Dark Blue Palette – HTML CSS by Waleed (@Bitoony) on CodePen.

Expand

Categories
Coding

User Profile Card – Modern Design – Free to use HTML/CSS Code

A modern user profile card with static stat counter, avatar profile picture, user information, profile fields & about me, profile posts section. Design uses a violet color palette with frequent uses of opacity, blurs, and drop shadows for stylization.

HTML and CSS code offered in this design are free to use and were designed by Bitoony. I ask that you show support by giving credit either under the profile card or elsewhere on your webpage.

How to credit me:
<a href=”https://bitoony.com” target=”_blank”>User Profile Card Designed by Bitoony.com</a>

CSS and HTML codes can be found below in the CodePen widget along with a demo/preview.

See the Pen Untitled by Waleed (@Bitoony) on CodePen.

Click to Enlarge

Categories
Showcase (No Download)

Sharree.com – My First Business – A Promotion Platform for Small YouTubers

Sharree is a platform I had created in 2015 at the end of my graphic design studies. MyBB (a forum software) has the base you’d need to create a social platform despite being a forum software. Combining MyBB, XThreads plugin, and my own modifications I had created a video sharing platform. The target audience of the site are small YouTubers looking to share their videos and get feedback. The idea of the site is to create a supportive community that would watch each other’s videos and give each other feedback thus helping each other reach the common goal of succeeding on YouTube. When a user registers he’s required to comment on 3 videos before being able to share their own. This results in a loop where you’re giving feedback on other YouTuber’s videos and receiving feedback on your own. For monetization Adsense was implemented as well as premium upgradable options that’ll let user’s further promote their videos to the community. One option is purchasing a Channel Pin, that’ll stick a card at the top of the homepage featuring the user’s avatar, about them, and a link to their channel. The other option is purchasing a Video Pin, that’ll place the user’s video higher on the homepage’s video listings which would result in more impressions and clicks on the user’s video.

I was working at Wal-Mart at the time of launching Sharree and using my paychecks to hire influencers, purchase promotions, and to run ads on Adwords. It would have been bad losing a chunk of money while working a minimum wage job but luckily the site succeeded. After hiring the first influencer Ziovo (video found here) there was a large influx of new visitors and registrations, so much so that the cheap GoDaddy base hosting plan I was on crashed. Several years later, the site is healthy, active, and has over 300,000 registered user’s sharing their videos on the platform.

I’ve pretty much taken a back seat on this project and I do maintenance work whenever issues arise. The site remains live and it mostly runs itself with auto-moderation and payment processing. I am happy with the platform I had created and the coding skills as well as business skills I had picked up along the way. I feel Sharree is a great live preview that showcases what I’m capable of as a developer and designer. I do feel however that my skills as a developer and designer have improved greatly since the launch of Sharree in 2015 and I look forward to showcasing that on my portfolio site (Bitoony.com).

Check out Sharree: https://sharree.com

Categories
Graphic Design

Black Male Gaming Free Channel Art Template – Twitch & YouTube Banner and Avatar

If you want personalized branding/art for your channel, then this banner and avatar template illustrated by me could work for you. This template features a black bearded male avatar with dreadlocks in the foreground. The avatar’s angry mood suggests he’s a competitive gamer. The avatar wears a Mario Odyssey Cappy hat accessory. This can be great for someone who mainly plays Nintendo titles but it is also equally effective in giving the banner a gaming theme.

This template is available for download and can be used for free. In this pack you’ll get 2 PSD files, one for Twitch dimensions and another for YouTube dimensions. The templates are editable, allowing you to change the title and subtext to your own channel name.

Black male gamer avatar for Twitch and YouTube
Black male gamer avatar, free to use with attribute

Attribution is required to use this template!
Make sure to leave the “Banner Designed by Bitoony.com” layer visible in the banner design.
I also ask that you leave an additional attribution in your channel’s about/bio section stating “Banner designed by Bitoony.com”.

Banner Pack Download Link: drive.google.com

Categories
Graphic Design

JustAnotherGamer – Free Twitch & YouTube Banner Template

JustAnotherGamer Banner is a editable Photoshop template for YouTube and Twitch. This is great for starting YouTubers or Twitch streamers seeking custom channel art or branding. JustAnotherGamer is clean, flat, light, minimal, and rounded. The goal of this template is to create the most generic template possible, making it usable for any gaming content creator; however I’d imagine this design would work best for a gamer who streams or uploads games across multiple platforms. A game critic or gaming news channel would be other good uses for this template. The assets used include the “next gen console icon pack” I had released earlier this week. In the background you’ll find 3 game characters/mascots (Kratos from God of War, Samus from Metroid, and Master Chief from Halo) of the big 3 game publishers and console makers (Microsoft’s Xbox, Sony’s Playstation, and Nintendo). Provided in the .zip download is 2 photoshop (PSD) files, one for YouTube banner dimensions and one for Twitch banner dimensions. Both photoshop files are editable and can be modified for your channel by editing the social links textbox and title textbox.

Attribution is required to use this template!
Make sure to leave the “Banner Designed by Bitoony.com” layer visible in the banner design. I also ask that you leave an additional attribution in your channel’s about/bio section stating “Banner designed by Bitoony.com”.

Download: drive.google.com

Categories
Graphic Design

Next Gen Console Icon Pack/Set – Free Flat Gaming Icons PNG – PS5, Xbox Series X, Xbox Series S, Nintendo Switch, Oculus Quest

A free icon pack/set of the latest generation of gaming consoles. Icon vectors are flat minimal silhouettes, each icon is placed in a circle with the products branded colors. If you wish not to use the round shapes or would like to make your own modifications to the icon set, feel free to. I’ve included PSD (Photoshop) and AI (Illustrator) files that you can play with.

The pack includes icons of the following consoles: PS5 (Playstation 5), Nintendo Switch, Xbox Series X, Xbox Series S, Meta (Oculus) Quest.

*Note that attribution is required. Preferably next to the image or in the footer. If not possible then leave an attribution in the img “alt” tag.

How to attribute:
<a href=”https://bitoony.com” target=”_blank”>Icon(s) Designed by Bitoony</a>

Can’t do text attribution? Attribute me in the img alt tag:
<img src=”images/icon.png” alt=”Icon Designed by Bitoony”>

Download Link: https://drive.google.com

Categories
MyBB Themes

Roundo Darko – A Free Dark Modern Theme for MyBB

Roundo Darko is an alternate theme based on the default Roundo Theme. This theme maintains Roundo’s modern forum design but uses a darker color palette. This is great for forum owners or users who prefer darker interfaces as they can be easier on the eyes. Just like the original Roundo theme, Roundo Darko is completely free to use (with attribution).

Download Link: mybb.com/mods.php

Demo Link: bitoony.com/mybb

Categories
MyBB Themes

Roundo – A Free Light Modern Theme for MyBB

Roundo gives a new modern look to MyBB. The default and many extended themes offered by MyBB are not mobile-friendly and have fallen behind when it comes to web design trends as modern web design moves into a more minimal and flat direction. With this project, I look to modify MyBB’s template, bring its design up to date, and make it responsive. I also find many MyBB pages bloated with information and inputs; so my second goal is to declutter/minify information and simplify the UI to give a better forum experience. This design will make consistent use of round shapes as seen in buttons, box containers, text fields, and avatars hence the name Roundo.

Download Link: mybb.com/mods

Demo Link: bitoony.com/mybb