Carte Produit auto

Ouvrir dans l'éditeur Publiez votre code

Recommandé

14 June 2023

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

Carte Produit auto

Recommandé

Carte membres de l'équipe CSS

informations sur la carte

Carte de paiement

HTML

CSS

JS

Recommandé

Carte membres de l'équipe CSS

informations sur la carte

Carte de paiement

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS