Tarjeta Producto auto

2,401 ping5

Abrir en el editor Publica tu código

Recomendado

16 January 2026

Reproductor de juegos Flash con emulador Ruffle

31 March 2024

Carrusel de tarjetas JavaScript

16 September 2025

Carrusel de tarjetas 3D HTML CSS JavaScript

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