Pinned Repositories
3-column-preview-card-component-main
Frontend Mentor is one of the popular platforms for improving your frontend development skills. This website has frontend challenges for a developer who is given JPEG design files for mobile & desktop layouts.
404-Error-Page-Design-In-Tailwind-CSS
404 Error pages are mostly used to show some errors like URL broke or page not found view side. So here we made a 404 error page in Tailwind CSS with the help of the Utility class.
Bootstrap-5-Facebook-Login-Page
Facebook is a popular social media website that is connected with new people and also chats with them. So here we made Facebook Login Page in Bootstrap 5 with the help of CSS and Bootstrap 5.
Bootstrap-5-Neumorphic-Buttons
Bootstrap 5 has the best components to make a website in a short time with fully responsive. But here we made something different with button components. We made Neumorphic Buttons in bootstrap with the help of CSS and utilities classes of bootstrap 5.
Display-Current-Time-Using-HTML-CSS-And-JavaScript
In this Display Current Time, we were Using HTML, CSS And JavaScript. We used the javascript inbuild function for a time, and to display, we used javascript DOM. To show the live time, we used javascript setInterval functions.
Login-Form-In-Pug
Pug is an HTML template engine that is built in Node.js with easy to write code. One of the most popular HTML template engine which directs compile and generates an HTML file. Pug has a top-level of features like loop, conditions, operate, mixins and also different types of written tags. So here we designed a simple login form using Pug with some basic CSS.
Netflix-Home-Page-In-Bootstrap-5
Netflix is a streaming service which is provided online movies, web series, and tv shows platforms. Here we made a clone of the Netflix Home Page In Bootstrap 5 with the help of CSS.
Pug-Responsive-Navbar
Navbar is a powerful part of the website to show features and branding. So here made Navbar in Pug cli with the help of CSS and javascript.
Simple-Login-Form-Using-UI-KIT
A light-weighted fronted CSS framework with have a powerful and attractive elements collection. Also, have a great user-interface UI component with the best utility classes. This similar to bootstrap but UI-kit has solid collections of components.
Tailwind-CSS-Responsive-Pricing-Table
Pricing table is import section if you have any product or you want a give service with given features which you have. So here we design minimal and user-friendly Pricing Table in Tailwind CSS with the help of css and utlites classes.
w3hubs's Repositories
w3hubs/Display-Current-Time-Using-HTML-CSS-And-JavaScript
In this Display Current Time, we were Using HTML, CSS And JavaScript. We used the javascript inbuild function for a time, and to display, we used javascript DOM. To show the live time, we used javascript setInterval functions.
w3hubs/Student-Registration-Form-In-Bootstrap-5
Student Registration Form is for students where they can submit data using form fields. So here we made this responsive Bootstrap5 Student Registration Form with the help of CSS3 and HTML5.
w3hubs/3-column-preview-card-component-main
Frontend Mentor is one of the popular platforms for improving your frontend development skills. This website has frontend challenges for a developer who is given JPEG design files for mobile & desktop layouts.
w3hubs/Blog-Section-In-Bootstrap-5
Previously we made a blog section in bootstrap 4, but here we made a blog section in bootstrap 5. Also, we used the same CSS properties. In this case, we remove font-awesome icons and also modify UI with CSS media queries.
w3hubs/Bootstrap-5-Custom-Alert
In this custom alert, we used unique background colours. Also, we modify the bootstrap class CSS properties in this custom bootstrap 5 alerts.
w3hubs/Bootstrap-5-Gradient-Button-With-Hover-Effect
In this element, we use Gradient background color for buttons. Here we also modify bootstrap classes used in these frameworks.
w3hubs/Bootstrap-5-Neon-Buttons
Neon Buttons are like light animation effects which are made using box-shadow css properties. So here we try to make this neon light animation in bootstrap 5 button components.
w3hubs/Bootstrap-Progress-Bar-Percentage-Using-Jquery
In this bootstrap progress bar, we used jquery with a javascript method. For increment, we used the javascript setTimeout method, and also we used some basic javascript DOM to change value dynamically.
w3hubs/Bootstrap-To-Do-List-Using-Jquery
To-do List is mostly used to add your today’s task or any important work you have to do today. So there are so many ways to make a To-do list but here we made it in jquery with the help of bootstrap.
w3hubs/Bulma-Responsive-Pricing-Table
In this Bulma Responsive Pricing Table, we used grid classes of Bulma. Here we made a pricing table in Bulma with helper class and utilities classes.
w3hubs/Contact-Us-Form-In-Materialize-CSS
Contact us form is mostly used in web pages for users to send messages. So here we made Contact Us Form In Materialize CSS with the help of CSS.
w3hubs/Cookies-Notifications-In-Tailwind-CSS
We used tailwind CSS flex classes and background colour classes in this cookies notification component. Also, we used buttons to allow and refuse cookies buttons.
w3hubs/Copy-Text-From-Input-To-Clipboard-Javascript-With-Bootstrap-5
Click button Copy text from the input is mostly used in websites. So here we made a simple UI for this element using Bootstrap 5 and components.
w3hubs/CSS-Counter
CSS counter is mostly used on website loading as a loader. But here we made a CSS counter for knowledge or fun purpose for you. In this counter increment CSS, we used animations and also used after CSS pseudo-element.
w3hubs/CSS-Text-STROKE-Animation
This is simple and easy animation for text to show loader-side. Here we try to make this animation using CSS properties and HTML.
w3hubs/Custom-Progress-Bar-In-HTML-CSS
The progress bar is mostly used to show in the website to show progress with value. So here we made a custom progress bar in HTML and CSS.
w3hubs/FAQ-In-Tailwind-CSS-and-JavaScript
Previously, we made faq in HTML and CSS with the help of javascript. So here we try to make the same thing in tailwind CSS with a new utilities class and the same javascript we used.
w3hubs/https-w3hubs.com-bootstrap-5-button-loading-example-using-javascript-
Button loading is mainly used in after button click when the user clicks. So that kind of Loading button is used in commerce sites or payment websites. So here we made a button loading example using bootstrap5 and javascript.
w3hubs/JQuery-Slider-Using-HTML-CSS
In this slider, we used HTML and CSS, and jquery. Here we used custom class and id to make a proper slide for every image.
w3hubs/Number-Scrolling-Preloader-In-HTML-CSS
Loader is mostly used in websites to load background content. So here we made a number scrolling loader in HTML and CSS.
w3hubs/On-Hover-Bottom-to-center-Text-Effect-Using-CSS
We made this on Hover Bottom to centre Text Effect Using CSS for fun. In this element, we used css3 properties and HTML.
w3hubs/Pricing-Table-In-Tailwind-CSS
In this pricing table, we used Tailwind CSS components and utility classes. For making responsive we used responsive classes which are already in utility classes.
w3hubs/Responsive-Navbar-Using-HTML-CSS-With-Toggle-JavaScript
Making a responsive navbar using HTML and CSS is easy but if we want clickable on the mobile view side. Then we have to use javascript or jquery. But quite possible to make a responsive navbar only using CSS and HTML.
w3hubs/Simple-Header-Color-line-In-CSS
Header colour is mostly used when you have large data on-page and it will show on the top of the page. So here we made a Simple Header Color line In CSS with HTML.
w3hubs/Simple-Product-Card-In-Tailwind-CSS
Product card is mostly used from a selling point of view. Where you can show your product and set a value with a name. So here we made a simple product card in tailwind CSS.
w3hubs/Skeleton-CSS-Responsive-Navbar-With-Toggle-JavaScript
We made a navbar with toggle icons on the mobile side responsive navbar in pure HTML and CSS and also in frameworks. But here we made it in skeleton CSS with the help of CSS properties and javascript HTML DOM.
w3hubs/Tailwind-CSS-Smooth-Scroll-Bottom-to-top-Using-JavaScript
In this Tailwind CSS Smooth Scroll with a Bottom to top, we used JavaScript and Tailwind CSS helper CSS classes. We have also used font awesome arrow icon with a javascript onClick event to execute or functions.
w3hubs/VIDEO-Inside-Text-In-HTML5-CSS3
Video inside text it’s like a super cool animation type of design/element. But it’s easy to make this kind of unique design.
w3hubs/Vuejs-Login-and-Register-Form
w3hubs/Water-Ripple-Effect-on-Click-Hover-In-Jquery
In this element, we used Jquery water ripple effects plugins. We used CDN for these ripple effects on the click and hover side.