Categories
Coding

Dogbook – Free Social Media Network UI Template – Responsive Desktop & Mobile – HTML, CSS, JS

This is a static fully coded social network interface made using HTML, CSS, JS. All codes are provided below if you wish to utilize this design in full or snippets. The color palette uses blue hued blacks along with a shiny deep sky blue to make the design more vibrant. What’s provided here is a single member’s index page for a fun fictional social network if dogs used the web. The design template is responsive having different views for mobile and desktop. What you’ll find on the web page are static features that typically exist on social networks such as status updating or posting, online friends listing, site notifications, joined groups, stories, feed, reaction and comment counter, and a messenger button with an unread counter.

The template design is completely free to use however I ask to leave an attribute/credit on your webpage “Designed by Bitoony” and linking to my portfolio site https://bitoony.com.

This template design is a great start off point if someone wishes to create a social type site. You can utilize my code and replace it with your own variables to make things functional and dynamic. Another option is if there’s elements of this design that you like, feel free to copy the element(s) and their related styling and apply them to your own site.

HTML, CSS, and JS codes can be found below as well as a demo/preview through CodePen.

See the Pen Social Network UI – Doggy Edition – Work in Progress by Waleed (@Bitoony) on CodePen.

Expand

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