Rustcode
Explore articles on web development for professional growth. Gain insights, tips, tricks, and resources for web tools and more.
Six Year Club
This badge celebrates the longevity of those who have been a registered member of the DEV Community for at least six years.
Five Year Club
This badge celebrates the longevity of those who have been a registered member of the DEV Community for at least five years.
Writing Debut
Awarded for writing and sharing your first DEV post! Continue sharing your work to earn the 4 Week Writing Streak Badge.
Four Year Club
This badge celebrates the longevity of those who have been a registered member of the DEV Community for at least four years.
Three Year Club
This badge celebrates the longevity of those who have been a registered member of the DEV Community for at least three years.
Two Year Club
This badge celebrates the longevity of those who have been a registered member of the DEV Community for at least two years.
One Year Club
This badge celebrates the longevity of those who have been a registered member of the DEV Community for at least one year.
GitHub Repositories
Simple-Button-Group-Deisgn
CSS • 1 star
Notification-Button-Design
CSS
Transparent-Navigation-Bar
CSS
Show-And-Hide-Password-Animation
CSS
Image-Transition-Effect-On-Hover
CSS • 1 star
Alert-Strips
HTML
page-scrolling-indicator
HTML
OTP-Verification-Card-Design
HTML • 1 star
Simple-Login-Form-Design
CSS
Fixed-Responsive-Dropdown-Navigation-Bar-With-Logo
CSS
Code-Snippets-Syntax-Highlighting
HTML
Rotating-Boxes-Website-Loader
CSS
Modern-Website-Landing-Page
HTML • 4 stars
Back-To-Top-Button
CSS
Follow-Us-On-Social-Media
CSS
Pure-Css-Dot-Loader-Animation
CSS
Pure-Css-To-Do-List-With-Checkbox
CSS
Simple-Blogging-Template-Design
HTML
Gsap-Text-Reveal-Animation
CSS
User-Profile-Card-Design
CSS
Contact-Us-Page-Design
CSS
Next-Page-Link-Animation-On-Hover
CSS
Responsive-Profile-Card-Ui-Using-Html-Css
CSS
pure-css-side-navigation-bar-design
CSS
Blurred-Image-Background
CSS
Page-Loading-With-Intro-Using-GSAP
CSS
Automatic-And-ManualResponsive-Image-Slider
CSS • 1 star
Liquid-Distortion-Effect-On-Text
JavaScript
How-to-convert-text-or-link-into-QR-code
CSS • 1 star
Progress-Percentage-Circle-Design
CSS
Animated-Side-Navigation
HTML
Button-Border-Animation-On-Hover
CSS
Social-Media-Buttons-with-Hover-Effect-in-Html-Css-
CSS
Course-Card-Design
CSS
sort-alphabetically-html-unordered-elements-using-javascript
CSS
Image-Vertical-Splitting-On-Hover
CSS
Digital-Clock-With-JavaScript
CSS
Cookies-Card-Design
CSS
Adding-Input-Dynamically-To-Form
CSS
Cursor-Animation-With-Hover-Effect-Using-GSAP
CSS • 2 stars
Copy-To-Clipboard-Animation
CSS
Full-Screen-Overlay-Responsive-Navigation-Bar-Using-gsap
CSS
Glowing-Neon-Light-Button-Animation
CSS
Attractive-Profile-Card-Design
CSS
Button-With-Fill-Animation
CSS
Profile-Card-Design
When we design any websites, we need to design a profile page, which is contained the profile card. Apart from this, we design a profile card of our clients, users, employees to show the profile of them. For an attractive website ui design, we need to design an attractive profile card with various animation effects. Here I am going to design a profile card. This profile card is very simple and attractive, does not contain too many effects.
CSS • 8 stars
Navigation-Bar-With-Hover-Effect
CSS
404-Error-Page-Design
The page with "Error 404 Page Not Found" must have been seen on some website. This page contains three buttons and have one simple image.
HTML
Captain-America-Shield-Design
CSS
Gaming-CPU-Landing-Page-Design-Using-GSAP
CSS • 1 star
Swap-Image-On-hover
CSS
Snackbar-Animation-Design
CSS
Login-Page-Design
CSS
Simple-Login-System-Design-Using-PHP-And-MySql-Database
HTML
Cutout-Text-Effect
CSS
3D-Flip-Image-Effect-On-Hover
CSS
Minimalist-Navigation-With-Flash-Effect
CSS
Particle-Background-Animation
HTML • 1 star
Glitch-Effect-On-Image-mgGlitchJS
HTML
Social-Media-Buttons-Animation-With-Rotation-Hover-Effect
CSS
Pure-Css-Typewriter-Effect
CSS • 1 star
Image-Drag-And-Drop-Animation
CSS
Pure-Css-Facebook-Logo-Design
CSS
Happy-Diwali-Card-Design-Using-Html-Css-And-Gsap
JavaScript
Link-Hover-Effect-With-Svg-Using-Html-And-Css-Only
CSS • 2 stars
Bookmark-Interaction-Animation-Using-Html-And-Css-And-Gsap
HTML
Full-Screen-Overlay-Responsive-Navigation-Bar
CSS
Simple-Preloder
CSS
Responsive-Price-Table
HTML
Responsive-Skill-Bar-Design
CSS
Pill-Styled-Radio-Button
CSS
Image-Zoom-On-Hover
CSS
shining-effect-on-text
CSS
Smooth-Parallax-Scrolling-Effects
HTML
Responsive-Column-With-Equal-Height
HTML
Page-Transition-Animation-Using-GSAP
HTML
Responsive-Automatic-Image-Slider
HTML
Custom-Cursor-Design
CSS
Website-Loader-Animation-Using-GSAP
CSS
Floating-Social-Media-Icons
HTML
FAQ-Accordion-Design
HTML
Navigation-Bar-With-Hover-Line-Effect
HTML • 1 star
Single-Page-Website-Design
CSS
Weather-Report-Card-Design
HTML
Notification-Card-Design
CSS
Laptop-Ecommerce-Card-Design
HTML
Profile-Card-Skeleton-Screen
"Profile Card Skeleton Screen" is a general animation that is usually used by a lot of websites like news, social media websites. In this effect, a loading bar appears instead of the website content and a skeleton screen appears until the entire website content is loaded.
HTML • 1 star
3D-Layer-Hover-Effect-On-Image
CSS
Modal-Box-Animation
CSS
Scroll-Progress-Bar-JsPlugin
JavaScript
Blog-Card-Design
CSS
Coming-Soon-Website-Template
CSS • 1 star
Announcement-Popup-Box-Design
HTML
Simple-Star-Rating-Icons
star rating very important component of the website. Because star rating helps to improve better service and product.
HTML
Two-Element-Slider
HTML
Next-Button-Design
CSS
Animated-Button-With-Pressed-Effect
HTML
Photographer-Studio-Website-Landing-Page
CSS
Modern-Salon-Website-Landing-Page
we will design a landing page, for its structure we used the "flex-box" concept. Apart from this, we also put some animations on this landing page. To add animations, we used JavaScript libraries like gsap, lettering.js, jquery, textillate.js, and animation.css. This video will give you enough information about how to design a landing page with the proper structuring of each element.
JavaScript • 1 star
pure-css-progress-bar-animation-html-and-css
CSS
Animated-Search-Box
CSS • 1 star
Center-Alignment-Of-Elements
CSS
Neumorphism-Effect
CSS
Tooltip-Text
HTML
Glitch-Effect-On-Text
CSS
Preloader-Loading-Animation-Using-Html-Css-And-Gsap
Preloader Loading Animation Using Html, Css And Gsap. A preloader is a web user interface that displays while a web page, content is loading.
CSS
Responsive-Image-Slider
CSS
Html-Elements-Smooth-Drag-And-Drop-Animation-Using-Html-Css-And-Sortable
HTML
Custom-Srollbar-design
CSS
Skewed-Background
HTML
Weather-Report-Card
HTML
Image-Overlay-Effect-On-Hover
CSS
Pure-Css-Sticky-Navigation-Bar
HTML • 1 star
credit-card-design
CSS • 1 star
Multiple-Overlay-Animation-On-Image
CSS • 1 star
Simple-Search-box
HTML • 1 star
Notification-Bell-Icon-Ripple-Animation
CSS
Mobile-App-Download-Link-Design
CSS
Responsive-Portfolio-Landing-Page-Design-With-Animation
CSS
Comment-Card-Design-Html-Css-And-Bootstrap
HTML • 1 star
Hamburger-Menu-Icon-Animation
CSS
Grid-Layout-Responsive-Website-Design
CSS • 1 star
Responsive-Newsletter-Subscription-Form-Design
CSS
Split-Image-On-Hover
CSS
Round-Switch-Button-Design
CSS
Want to connect with Rustcode?
Create an account to connect with Rustcode. You can also sign in below to proceed if you already have an account.