Interactive Card Design with Hover Effect (HTML & CSS)

Interactive Card Design with Hover Effect (HTML & CSS) Project by SudhuCodes Made with HTML & CSS Language

@SudhuCodes

Category - HTML & CSS

Uploaded At - 6/4/2025

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <!-- Coding By SudhuCodes - www.sudhucodes.com -->
6    <meta charset="UTF-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>Responsive Card Design HTML and CSS | SudhuCodes</title>
9    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
10    <link rel="stylesheet" href="style.css">
11</head>
12
13<body>
14    <div class="card-list">
15        <a href="#" class="card-item">
16            <img src="images/developer.jpg" alt="Card Image">
17            <span class="developer">Developer</span>
18            <h3>A "developer" codes software and websites.</h3>
19            <div class="arrow">
20                <i class="fas fa-arrow-right card-icon"></i>
21            </div>
22        </a>
23        <a href="#" class="card-item">
24            <img src="images/designer.jpg" alt="Card Image">
25            <span class="designer">Designer</span>
26            <h3>A "designer" is a design expert.</h3>
27            <div class="arrow">
28                <i class="fas fa-arrow-right card-icon"></i>
29            </div>
30        </a>
31        <a href="#" class="card-item">
32            <img src="images/editor.jpg" alt="Card Image">
33            <span class="editor">Editor</span>
34            <h3>An "editor" ensures content quality and accuracy.</h3>
35            <div class="arrow">
36                <i class="fas fa-arrow-right card-icon"></i>
37            </div>
38        </a>
39    </div>
40</body>
41
42</html>