Rustcode

Explore articles on web development for professional growth. Gain insights, tips, tricks, and resources for web tools and more.

Joined on Nov 28, 2019 https://www.rustcodeweb.com

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

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