Card Product auto

1988 ping5

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Classic & Sports Car</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="sidebar">
        <div class="menu">
            <span class="menu-item">HOME</span>
            <span class="menu-item">INVOICE</span>
            <span class="menu-item">NOTIFICATION</span>
            <span class="menu-item">MY PROFILE</span>
        </div>
    </div>
    <div class="main-content">
        <div class="header">
            <div class="logo">CLASSIC & SPORTS CAR</div>
            <div class="tabs">
                <span class="tab active">HOT</span>
                <span class="tab">AMERICAN</span>
                <span class="tab">FRENCH</span>
                <span class="tab">MEXICO</span>
            </div>
        </div>
        <div class="content">
            <div class="car-card">
                <img src="bufori.jpg" alt="Bufori" class="car-image">
                <div class="car-info">
                    <h3>BUFORI</h3>
                    <p>BUFORI is a brand of hand-built automobiles inspired by American 1930s coupes.</p>
                </div>
                <div class="favorite">
                    <img src="heart_icon.png" alt="Favorite">
                </div>
            </div>
            <div class="car-card">
                <img src="1950s_thunderbird.jpg" alt="1950s Thunderbird" class="car-image">
                <div class="car-info">
                    <h3>1950s THUNDERBIRD</h3>
                    <p>The first generation of the Ford Thunderbird is a two-seat convertible.</p>
                </div>
                <div class="favorite">
                    <img src="heart_icon.png" alt="Favorite">
                </div>
            </div>
            <div class="view-all">
                <button>VIEW ALL</button>
            </div>
        </div>
    </div>
</body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
    margin: 0;
    display: flex;
}

.sidebar {
    width: 70px;
    background-color: #F5F5F5;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
}

.menu {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin-top: 50px;
}

.menu-item {
    margin: 20px 0;
    cursor: pointer;
}

.main-content {
    flex: 1;
    background-color: #D1E8E2;
    padding: 20px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 24px;
    font-weight: bold;
}

.tabs {
    display: flex;
}

.tab {
    margin-left: 20px;
    cursor: pointer;
}

.tab.active {
    color: #FFD700;
    font-weight: bold;
}

.content {
    margin-top: 20px;
}

.car-card {
    display: flex;
    align-items: center;
    background-color: #E6E6FA;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 20px;
    position: relative;
}

.car-image {
    width: 100px;
    margin-right: 20px;
}

.car-info {
    flex: 1;
}

.favorite {
    position: absolute;
    right: 20px;
    top: 10px;
}

.view-all {
    text-align: center;
}

.view-all button {
    padding: 10px 20px;
    border: none;
    background-color: #4CAF50;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

Card Product auto

Recommended

Download App HTML Card

3D card

CSS Card Layout with Gradient Background

HTML

CSS

JS

Recommended

Download App HTML Card

3D card

CSS Card Layout with Gradient Background

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS