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

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.