Tarjeta Producto auto

1183 ping5

Abrir en el editor Publica tu código

Recomendado

10 September 2024

Tarjeta de producto de Glassmorphism

17 May 2025

Tarjeta moderna con giro

21 October 2024

Rellenar tarjeta al pasar el mouse

HTML

<!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;
}

Recomendado

Tarjeta de producto de Glassmorphism

Tarjeta moderna con giro

Rellenar tarjeta al pasar el mouse

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS