DEV Community: Smit Prajapati

Took Part in the "VOICE CONTROL REPLICA" Challenge on UIVERSE.IO

Smit Prajapati — Thu, 24 Oct 2024 12:44:07 +0000

Hey everyone! 👋

⭐ I recently took part in a "VOICE CONTROLL REPLICA" challenge on Uiverse.io, where the goal was to recreate a card using only HTML and CSS, based on a provided photo. I added hover effects and some fun animations to enhance the design.

🟨 The highlight of my card is the mic icon animation. 🖌️ I wanted it to morph into a circle and animate with a random scale-up and scale-down effect, giving it a dynamic feel. This involved diving into CSS SVG animations, which was a new learning experience for me. It took a bit of time and effort, but I’m thrilled with how it turned out! 🎨

🟨 Right now, the voting has started, and I’m currently in third place with 24 votes! 🎉 It's exciting to see the positive response.

🟨 Feel free to check out the challenge on Uiverse.io and let me know your thoughts! 💬

🟡Challenge link

🟡My Profile on UIVERSE.IO

✨Stylish Product Card with Pure CSS ✨

Smit Prajapati — Thu, 07 Sep 2023 10:35:25 +0000

Dive into the world of web design as we explore the creation of a visually stunning product card, built entirely with CSS. This product card boasts a captivating product image, price, a heartwarming favorite button, company and product names, an interactive color selection with tooltips, size options, customer ratings, a "Buy Now" button, and a trusty "Add to Cart" button.

🌌I've achieved a place among the top 50 creators on uiverse.io in just 1.5 months! 🌟

Smit Prajapati — Sun, 03 Sep 2023 02:50:02 +0000

"I'm excited to announce a significant milestone in my creative journey – I've made it to the top 50 creators on Uiverse.io, the platform for open-source UI elements, all in just 1.5 months! 🌟"

🚀My Profile on UIVERSE.IO
🚀UIVERSE.IO
🚀Top Creators

🟡 UIVERSE.IO: Open-Source UI elements for any project is offering hundreds of open-source UI elements that can be seamlessly integrated into your projects. Whether it's Buttons, Inputs, Cards, Forms, Loaders, Checkboxes, Radio buttons or Toggle switches, you'll find a treasure trove of resources to elevate your designs. If you're not already a part of Uiverse.io, I invite you to join this dynamic platform where the Universe of UI reaches new heights.

🟡Buttons

🟡Checkboxes

🟡 Toggle switches

🟡 Cards

🟡 Loaders

🟡 Forms

🟡 Inputs

🟡 Radio Buttons

Introducing My '🌟 10 CSS Card Wonders' Project! 💫

Smit Prajapati — Sun, 27 Aug 2023 09:47:26 +0000

Introducing my "10 CSS Card Wonders" project. These 10 mesmerizing CSS cards redefine user interaction with elegant hover effects and stunning designs.

I've made these CSS cards with pure HTML and CSS. **Feel free to use these cards for your projects, personal or commercial.** **They are completely free to use!** You can find the code for each card on my GitHub repository.

🟡All cards
🟡Source Code

✨Profile Card and Engaging Hover Effects with CSS 🚀

Smit Prajapati — Sun, 27 Aug 2023 03:41:14 +0000

Structure of Card

- div.card
      - button.mail
        - svg (Mail Button with SVG icon)
      - div.profile-pic.profile-pic1
        - img (Profile Picture Image for the First Card)
      - div.bottom
        - div.content
          - span.name (Name)
          - span.about-me (About Me)
        - div.bottom-bottom
          - div.social-links-container
            - svg (Social Link SVG icon)
            - svg (Social Link SVG icon)
            - svg (Social Link SVG icon)
          - button.button (Contact Me Button)

🎉 CodePen picked my Pen 🌟

Smit Prajapati — Thu, 24 Aug 2023 03:52:03 +0000

My latest CodePen project, where I created a SCI FI CARD HOVER EFFECT, got picked by the CodePen team! 🎉🏆

🚀 Futuristic Sci-Fi Card with Mind-Blowing Hover Effects using HTML and SCSS 🌌

Smit Prajapati — Sun, 20 Aug 2023 15:55:39 +0000

I've always been attracted to the futuristic and science-fiction aesthetic. The sleek lines, bold colors and interactive elements in sci-fi movies and games hold an irresistible allure. I wanted to capture that essence in a web component.

Using clip-path for the Futuristic Design
The futuristic design of the card is achieved through the clip-path property. The polygon value of clip-path allows us to create custom shapes. In this case, it's used to give the card its unique, angled appearance.

Feel free to check out the full code and a live demo of the sci-fi card on CodePen.

✨🎨 An Eye-Catching Card with a nice Hover Effect using HTML and SCSS

Smit Prajapati — Mon, 14 Aug 2023 13:29:47 +0000

An Impressive 3D Card with Stunning Hover Effects using HTML and SCSS

Smit Prajapati — Sun, 06 Aug 2023 12:29:27 +0000

Today, I'm excited to share a fantastic 3D card design that I've created with some hover effects using HTML and SCSS. This project was fun.
Feel free to share your creations or any questions you may have in the comments section below.
Happy coding!

Unique Border Radius Card with HTML and CSS

Smit Prajapati — Wed, 02 Aug 2023 11:43:09 +0000

In this project, I have created a card with a unique border radius using HTML and SCSS (Sass). I've used pseudo-elements and the "skew" property to achieve this design.

YouTube homepage - REDESIGN (Responsive)

Smit Prajapati — Tue, 01 Aug 2023 06:53:42 +0000

I'm excited to share an update on my YouTube homepage redesign project. I have implemented some changes to make the new design fully responsive across all devices.

UI design inspired by

Behance

YouTube homepage - REDESIGN

Smit Prajapati — Sun, 30 Jul 2023 13:35:32 +0000

YouTube Homepage redesign with the help of Grid layout. (For desktop & Tablet).

UI design inspired by

Behance