Home
Akram Khan
beautifull project page

beautifull project page

This tailwind example is contributed by Akram Khan, on 07-Jul-2024. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Akram Khan

1.9k

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Super Attractive 3D Project Card with RGB Background</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

body {
            font-family: 'Orbitron', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background: linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff, #00ffff);
            background-size: 400% 400%;
            animation: rgb-background 15s ease infinite;
            overflow: hidden;
        }

@keyframes rgb-background {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

.card {
            width: 300px;
            background: rgba(15, 15, 15, 0.8);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

.card:hover {
            transform: translateY(-10px) rotate3d(1, 1, 0, 15deg);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
        }

.card-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            filter: brightness(0.8) saturate(1.2);
        }

.card-content {
            padding: 20px;
        }

.card-title {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 10px;
            color: #00ffff;
            text-shadow: 0 0 5px #00ffff;
        }

.card-description {
            font-size: 14px;
            color: #ccc;
            margin-bottom: 15px;
        }

.card-languages {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

.language-tag {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 5px 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            font-size: 12px;
            color: #fff;
        }

.language-tag i {
            font-size: 14px;
        }

.html-tag { color: #E44D26; }
        .css-tag { color: #264DE4; }
        .js-tag { color: #F0DB4F; }

.card-link {
            display: inline-block;
            padding: 10px 20px;
            background: rgba(0, 255, 255, 0.2);
            color: #fff;
            text-decoration: none;
            border-radius: 5px;
            transition: all 0.3s ease;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            border: 1px solid #00ffff;
        }

.card-link:hover {
            background: rgba(0, 255, 255, 0.4);
            box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
        }
    </style>
</head>
<body>
    <div class="card animate__animated animate__fadeInUp">
        <img src="https://picsum.photos/300/200" alt="Project Cover" class="card-image">
        <div class="card-content">
            <h2 class="card-title animate__animated animate__fadeInDown">Awesome Project</h2>
            <p class="card-description animate__animated animate__fadeIn">This is a super cool project with amazing features and stunning design. Check it out!</p>
            <div class="card-languages animate__animated animate__fadeIn">
                <span class="language-tag html-tag"><i class="fab fa-html5"></i> HTML</span>
                <span class="language-tag css-tag"><i class="fab fa-css3-alt"></i> CSS</span>
                <span class="language-tag js-tag"><i class="fab fa-js"></i> JavaScript</span>
            </div>
            <a href="https://github.com/your-username/your-repo" class="card-link hvr-grow">
                <i class="fab fa-github"></i> View on GitHub
            </a>
        </div>
    </div>
</body>
</html>

Related Examples

cards order
odering samethng

Author:
Uwase Alliance

3 months ago

218
Food Ordering Dashboard
A responsive user interface for selecting and ordering your favorite meals. The dashboard allows users to browse food categories, view dish details, and place orders with ease.

Author:
Muhammad Umair Arshad

3 months ago

589
Card Component
This component is a simple card (without image) component with hover effect & Dark mode Supported & full responsive

Author:
Shariar Hasan

1 year ago

3.3k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

2 years ago

23.4k
Product card

Author:
Oliver Hansen

2 years ago

13.4k
Hover Card

Author:
Maxim

1 year ago

2.5k
User Profile Card
The card features a user's profile picture, name, location, and options for interactions. It has a clean and modern design with rounded edges and icons for user engagement. It also has support for dark mod:

Author:
Prashant

3 years ago

62.5k
Product Card for eCommerce
Here is a Product Card with discount badge, price with discount and price normally. On other hand, buttons for up or down quantity and add to cart button. This is create for Grid Columns, wich can 4 or 5 depend for desktop

Author:
Andrés Abarzúa

2 months ago

293
beautifull project Item

Author:
Akram Khan

1 year ago

2.5k
Tailwind CSS Blog Card

Author:
Morris Muriuki Muthigani

1 month ago

124
3D product Card
The product card has been fully recoded using a light (black-and-white) color theme. Let me know if you want to add more interactivity, change the layout, or adapt it for mobile or dark mode.

Author:
Nicole Shalom

3 months ago

616
Card Item Financieros
Item Financiero

Author:
Ameth Galarcio

1 year ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components