car display 2

In this example below you will see how to do a car display 2 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by azopyros, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright azopyros ©
  • HTML
  • CSS
  • JavaScript
    <button type="button" id="bouton">change</button> 
<p>Ventes en cours / Previsualisation :</p>
<ul class="carlist carlist--sell">
  <li class="carlist__car">
    <div class="car__item car__item--picture size--2">
      <a href="#" class="car__link">
        <img class="car__picture" src="https://res.cloudinary.com/aramisauto/image/fetch/w_500,h_400,c_fill/http%3A%2F%2Fcommondatastorage.googleapis.com%2Faramis_vehicles%2Fproduction%2FtradeIn%2F3292802%2Fimage%2Fnormal%2F1436017872035_535715128.jpg">
      </a>
    </div>
    <div class="car__item car__item--general size--5">
      <a href="#" class="car__link">
        <span class="car__info car__info--model --bold --big">Alfa romeo 156 sportwagon</span>
        <span class="car__info car__info--variant --bold --big">Distinctive</span>
        <div class="separator"></div>
        <span class="car__info car__info--engine">C3 Picasso HDI 90 Airdream</span>
        <span class="car__info car__info--box">Boite semi-automatique</span>
      </a>
    </div>
    <div class="car__item car__item--technic size--3">
      <span class="car__info car__info--mileage"><i class="fa fa-fw fa-road"></i>392,000 KM</span>
      <span class="car__info car__info--registration"><i class="fa fa-fw fa-calendar"></i>10/2009</span>
      <span class="car__info car__info--places"><i class="fa fa-fw fa-users"></i>5 Places</span>
    </div>
    <div class="car__item car__item--pickup size--3">
      <span class="car__info car__info--pickup"><i class="fa fa-fw fa-map-marker"></i>STVA Valenton</span>
      <div class="separator"></div>
      <span class="car__info car__info--pickupe-date">5-10 jours ouvrés</span>
    </div>
    <div class="car__item car__item--sell-type size--2 sell-type--10">
      <span class="car__info car__info--sell-type --bold">Achat immédiat</span>
      <span class="car__info car__info--price">5200 €</span>
    </div>
    <div class="car__item car__item--price size--3">
      <span class="car__info car__info--price --bold --bigger --normal">5200 €</span>
    </div>
    <div class="car__item car__item--end size--2">
      <span class="car__info car__info--end --bold --bad"><i class="fa fa-fw fa-clock-o"></i>2j 20h 22m</span>
    </div>
    <a class="car__item car__item--link" href="#"></a>
  </li>
  <li class="carlist__car">
    <div class="car__item car__item--picture size--2">
      <a href="#" class="car__link">
        <img class="car__picture" src="https://res.cloudinary.com/aramisauto/image/fetch/w_500,h_400,c_fill/http%3A%2F%2Fcommondatastorage.googleapis.com%2Faramis_vehicles%2Fproduction%2FtradeIn%2F3292802%2Fimage%2Fnormal%2F1436017872035_535715128.jpg">
      </a>
    </div>
    <div class="car__item car__item--general size--5">
      <a href="#" class="car__link">
        <span class="car__info car__info--model --bold --big">Alfa romeo 156 sportwagon</span>
        <span class="car__info car__info--variant --bold --big">Distinctive</span>
        <div class="separator"></div>
        <span class="car__info car__info--engine">C3 Picasso HDI 90 Airdream</span>
        <span class="car__info car__info--box">Boite semi-automatique</span>
      </a>
    </div>
    <div class="car__item car__item--technic size--3">
      <span class="car__info car__info--mileage"><i class="fa fa-fw fa-road"></i>392,000 KM</span>
      <span class="car__info car__info--registration"><i class="fa fa-fw fa-calendar"></i>10/2009</span>
      <span class="car__info car__info--places"><i class="fa fa-fw fa-users"></i>5 Places</span>
    </div>
    <div class="car__item car__item--pickup size--3">
      <span class="car__info car__info--pickup"><i class="fa fa-fw fa-map-marker"></i>STVA Valenton</span>
      <div class="separator"></div>
      <span class="car__info car__info--pickupe-date">5-10 jours ouvrés</span>
    </div>
    <div class="car__item car__item--sell-type size--2 sell-type--20">
      <span class="car__info car__info--sell-type --bold">Enchère</span>
      <span class="car__info car__info--price">5200 €</span>
    </div>
    <div class="car__item car__item--price size--3">
      <span class="car__info car__info--price --bold --bigger --normal">5200 €</span>
    </div>
    <div class="car__item car__item--end size--2">
      <span class="car__info car__info--end --bold --bad"><i class="fa fa-fw fa-clock-o"></i>2j 20h 22m</span>
    </div>
    <a class="car__item car__item--link" href="#"></a>
  </li>
  <li class="carlist__car">
    <div class="car__item car__item--picture size--2">
      <a href="#" class="car__link">
        <img class="car__picture" src="https://res.cloudinary.com/aramisauto/image/fetch/w_500,h_400,c_fill/http%3A%2F%2Fcommondatastorage.googleapis.com%2Faramis_vehicles%2Fproduction%2FtradeIn%2F3292802%2Fimage%2Fnormal%2F1436017872035_535715128.jpg">
      </a>
    </div>
    <div class="car__item car__item--general size--5">
      <a href="#" class="car__link">
        <span class="car__info car__info--model --bold --big">Alfa romeo 156 sportwagon</span>
        <span class="car__info car__info--variant --bold --big">Distinctive</span>
        <div class="separator"></div>
        <span class="car__info car__info--engine">C3 Picasso HDI 90 Airdream</span>
        <span class="car__info car__info--box">Boite semi-automatique</span>
      </a>
    </div>
    <div class="car__item car__item--technic size--3">
      <span class="car__info car__info--mileage"><i class="fa fa-fw fa-road"></i>392,000 KM</span>
      <span class="car__info car__info--registration"><i class="fa fa-fw fa-calendar"></i>10/2009</span>
      <span class="car__info car__info--places"><i class="fa fa-fw fa-users"></i>5 Places</span>
    </div>
    <div class="car__item car__item--pickup size--3">
      <span class="car__info car__info--pickup"><i class="fa fa-fw fa-map-marker"></i>STVA Valenton</span>
      <div class="separator"></div>
      <span class="car__info car__info--pickupe-date">5-10 jours ouvrés</span>
    </div>
    <div class="car__item car__item--sell-type size--2 sell-type--30">
      <span class="car__info car__info--sell-type --bold">Couverture</span>
      <span class="car__info car__info--price">5200 €</span>
    </div>
    <div class="car__item car__item--price size--3">
      <span class="car__info car__info--price --bold --bigger --normal">5200 €</span>
    </div>
    <div class="car__item car__item--end size--2">
      <span class="car__info car__info--end --bold --bad"><i class="fa fa-fw fa-clock-o"></i>2j 20h 22m</span>
    </div>
    <a class="car__item car__item--link" href="#"></a>
  </li>
</ul>
<p>Mes offres :</p>
<ul class="carlist carlist--offers" id="carlist">
  <li class="carlist__car">
    <div class="car__item car__item--picture size--2">
      <a href="#" class="car__link">
        <img class="car__picture" src="https://res.cloudinary.com/aramisauto/image/fetch/w_500,h_400,c_fill/http%3A%2F%2Fcommondatastorage.googleapis.com%2Faramis_vehicles%2Fproduction%2FtradeIn%2F3292802%2Fimage%2Fnormal%2F1436017872035_535715128.jpg">
      </a>
    </div>
    <div class="car__item car__item--general size--5">
      <a href="#" class="car__link">
        <span class="car__info car__info--model --bold --big">Alfa romeo 156 sportwagon</span>
        <span class="car__info car__info--variant --bold --big">Distinctive</span>
        <div class="separator"></div>
        <span class="car__info car__info--engine">C3 Picasso HDI 90 Airdream</span>
        <span class="car__info car__info--box">Boite semi-automatique</span>
      </a>
    </div>
    <div class="car__item car__item--technic size--3">
      <span class="car__info car__info--mileage"><i class="fa fa-fw fa-road"></i>392,000 KM</span>
      <span class="car__info car__info--registration"><i class="fa fa-fw fa-calendar"></i>10/2009</span>
      <span class="car__info car__info--places"><i class="fa fa-fw fa-users"></i>5 Places</span>
    </div>
    <div class="car__item car__item--sell-type size--2 sell-type--20">
      <span class="car__info car__info--sell-type --bold">Enchère</span>
      <span class="car__info car__info--price">5200 €</span>
    </div>
    <div class="car__item car__item--price size--3">
      <span class="car__info car__info--price --bold --bigger --normal">5200 €</span>
    </div>
    <div class="car__item car__item--status size--3">
      <span class="car__info car__info--status --bold --good">Vous avez la meilleure offre plafond: 5 400 €</span>
    </div>
    <div class="car__item car__item--end size--2">
      <span class="car__info car__info--end --bold --bad"><i class="fa fa-fw fa-clock-o"></i>2j 20h 22m</span>
    </div>
    <a class="car__item car__item--link" href="#"></a>
  </li>
  <li class="carlist__car">
    <div class="car__item car__item--picture size--2">
      <a href="#" class="car__link">
        <img class="car__picture" src="https://res.cloudinary.com/aramisauto/image/fetch/w_500,h_400,c_fill/http%3A%2F%2Fcommondatastorage.googleapis.com%2Faramis_vehicles%2Fproduction%2FtradeIn%2F3292802%2Fimage%2Fnormal%2F1436017872035_535715128.jpg">
      </a>
    </div>
    <div class="car__item car__item--general size--5">
      <a href="#" class="car__link">
        <span class="car__info car__info--model --bold --big">Alfa romeo 156 sportwagon</span>
        <span class="car__info car__info--variant --bold --big">Distinctive</span>
        <div class="separator"></div>
        <span class="car__info car__info--engine">C3 Picasso HDI 90 Airdream</span>
        <span class="car__info car__info--box">Boite semi-automatique</span>
      </a>
    </div>
    <div class="car__item car__item--technic size--3">
      <span class="car__info car__info--mileage"><i class="fa fa-fw fa-road"></i>392,000 KM</span>
      <span class="car__info car__info--registration"><i class="fa fa-fw fa-calendar"></i>10/2009</span>
      <span class="car__info car__info--places"><i class="fa fa-fw fa-users"></i>5 Places</span>
    </div>
    <div class="car__item car__item--sell-type size--2 sell-type--20">
      <span class="car__info car__info--sell-type --bold">Enchère</span>
      <span class="car__info car__info--price">5200 €</span>
    </div>
    <div class="car__item car__item--price size--3">
      <span class="car__info car__info--price --bold --bigger --normal">5200 €</span>
    </div>
    <div class="car__item car__item--status size--3">
      <span class="car__info car__info--status --bold --bad">Vous n'avez pas la meilleure offre</span>
    </div>
    <div class="car__item car__item--end size--2">
      <span class="car__info car__info--end --bold --bad"><i class="fa fa-fw fa-clock-o"></i>2j 20h 22m</span>
    </div>
    <a class="car__item car__item--link" href="#"></a>
  </li>
  <li class="carlist__car">
    <div class="car__item car__item--picture size--2">
      <a href="#" class="car__link">
        <img class="car__picture" src="https://res.cloudinary.com/aramisauto/image/fetch/w_500,h_400,c_fill/http%3A%2F%2Fcommondatastorage.googleapis.com%2Faramis_vehicles%2Fproduction%2FtradeIn%2F3292802%2Fimage%2Fnormal%2F1436017872035_535715128.jpg">
      </a>
    </div>
    <div class="car__item car__item--general size--5">
      <a href="#" class="car__link">
        <span class="car__info car__info--model --bold --big">Alfa romeo 156 sportwagon</span>
        <span class="car__info car__info--variant --bold --big">Distinctive</span>
        <div class="separator"></div>
        <span class="car__info car__info--engine">C3 Picasso HDI 90 Airdream</span>
        <span class="car__info car__info--box">Boite semi-automatique</span>
      </a>
    </div>
    <div class="car__item car__item--technic size--3">
      <span class="car__info car__info--mileage"><i class="fa fa-fw fa-road"></i>392,000 KM</span>
      <span class="car__info car__info--registration"><i class="fa fa-fw fa-calendar"></i>10/2009</span>
      <span class="car__info car__info--places"><i class="fa fa-fw fa-users"></i>5 Places</span>
    </div>
    <div class="car__item car__item--sell-type size--2 sell-type--30">
      <span class="car__info car__info--sell-type --bold">Couverture</span>
      <span class="car__info car__info--price">5200 €</span>
    </div>
    <div class="car__item car__item--price size--3">
      <span class="car__info car__info--price --bold --bigger --normal">5200 €</span>
    </div>
    <div class="car__item car__item--status size--3">
      <span class="car__info car__info--status --bold --wait">Attente accord client</span>
    </div>
    <div class="car__item car__item--end size--2">
      <span class="car__info car__info--end --bold --bad"><i class="fa fa-fw fa-clock-o"></i>2j 20h 22m</span>
    </div>
    <a class="car__item car__item--link" href="#"></a>
  </li>
</ul>
<p>Mes achats :</p>
<ul class="carlist carlist--purchases-all" id="carlist">
  <li class="carlist__car --purchase">
    <div class="car__item car__item--picture size--2">
      <a href="#" class="car__link">
        <img class="car__picture" src="https://res.cloudinary.com/aramisauto/image/fetch/w_500,h_400,c_fill/http%3A%2F%2Fcommondatastorage.googleapis.com%2Faramis_vehicles%2Fproduction%2FtradeIn%2F3292802%2Fimage%2Fnormal%2F1436017872035_535715128.jpg">
      </a>
    </div>
    <div class="car__item car__item--general size--5">
      <a href="#" class="car__link">
        <span class="car__info car__info--model --bold --big">Alfa romeo 156 sportwagon</span>
        <span class="car__info car__info--variant --bold --big">Distinctive</span>
        <div class="separator"></div>
        <span class="car__info car__info--engine">C3 Picasso HDI 90 Airdream</span>
        <span class="car__info car__info--box">Boite semi-automatique</span>
      </a>
    </div>
    <div class="car__item car__item--immat size--2">
      <span class="car__info car__info--immat">123BV95</span>
    </div>
    <div class="car__item car__item--price size--2">
      <span class="car__info car__info--price --bold --bigger --normal">5200 €</span>
    </div>
    <div class="car__item car__item--t-status size--3">
      <span class="car__info car__info--pickup">STVA Valenton</span>
      <span class="car__info car__info--t-status --bold">En cours de transport</span>
    </div>
    <div class="car__item car__item--s-status size--3">
      <span class="car__info car__info--s-status --wait --bold">A régler <i class="fa fa-clock-o"></i></span>
      <a class="car__info car__info--doc-link --link --smaller" href="#">Bon de commande</a>
    </div>
    <div class="car__item car__item--pickout size--2">
    </div>
    <div class="car__item car__item--paiement size--2">
      <span class="car__info car__info--end --bold --bad"><i class="fa fa-fw fa-clock-o"></i>8j 20h 22m</span>
      <span class="delai-meter" data-percent="20"></span>
    </div>
    <a class="car__item car__item--link" href="#"></a>
  </li>
  <li class="carlist__car --purchase">
    <div class="car__item car__item--picture size--2">
      <a href="#" class="car__link">
        <img class="car__picture" src="https://res.cloudinary.com/aramisauto/image/fetch/w_500,h_400,c_fill/http%3A%2F%2Fcommondatastorage.googleapis.com%2Faramis_vehicles%2Fproduction%2FtradeIn%2F3292802%2Fimage%2Fnormal%2F1436017872035_535715128.jpg">
      </a>
    </div>
    <div class="car__item car__item--general size--5">
      <a href="#" class="car__link">
        <span class="car__info car__info--model --bold --big">Alfa romeo 156 sportwagon</span>
        <span class="car__info car__info--variant --bold --big">Distinctive</span>
        <div class="separator"></div>
        <span class="car__info car__info--engine">C3 Picasso HDI 90 Airdream</span>
        <span class="car__info car__info--box">Boite semi-automatique</span>
      </a>
    </div>
    <div class="car__item car__item--immat size--2">
      <span class="car__info car__info--immat">123BV95</span>
    </div>
    <div class="car__item car__item--price size--2">
      <span class="car__info car__info--price --bold --bigger --normal">5200 €</span>
    </div>
    <div class="car__item car__item--t-status size--3">
      <span class="car__info car__info--pickup">STVA Valenton</span>
      <span class="car__info car__info--t-status --bold">En cours de préparation</span>
    </div>
    <div class="car__item car__item--s-status size--3">
      <span class="car__info car__info--s-status --bad --bold">Annulé <i class="fa fa-hourglass-o"></i></span>
      <a class="car__info car__info--doc-link --link --smaller" href="#">Bon de commande</a>
    </div>
    <div class="car__item car__item--pickout size--2">
    </div>
    <div class="car__item car__item--paiement size--2">
      <span class="car__info car__info--end --bold --bad"><i class="fa fa-fw fa-clock-o"></i>Délai dépassé</span>
    </div>
    <a class="car__item car__item--link" href="#"></a>
  </li>
  <li class="carlist__car --purchase">
    <div class="car__item car__item--picture size--2">
      <a href="#" class="car__link">
        <img class="car__picture" src="https://res.cloudinary.com/aramisauto/image/fetch/w_500,h_400,c_fill/http%3A%2F%2Fcommondatastorage.googleapis.com%2Faramis_vehicles%2Fproduction%2FtradeIn%2F3292802%2Fimage%2Fnormal%2F1436017872035_535715128.jpg">
      </a>
    </div>
    <div class="car__item car__item--general size--5">
      <a href="#" class="car__link">
        <span class="car__info car__info--model --bold --big">Alfa romeo 156 sportwagon</span>
        <span class="car__info car__info--variant --bold --big">Distinctive</span>
        <div class="separator"></div>
        <span class="car__info car__info--engine">C3 Picasso HDI 90 Airdream</span>
        <span class="car__info car__info--box">Boite semi-automatique</span>
      </a>
    </div>
    <div class="car__item car__item--immat size--2">
      <span class="car__info car__info--immat">123BV95</span>
    </div>
    <div class="car__item car__item--price size--2">
      <span class="car__info car__info--price --bold --bigger --normal">5200 €</span>
    </div>
    <div class="car__item car__item--t-status size--3">
      <span class="car__info car__info--pickup">STVA Valenton</span>
      <span class="car__info car__info--t-status --bold">Arrivé</span>
    </div>
    <div class="car__item car__item--s-status size--3">
      <span class="car__info car__info--s-status --good --bold">Paiement reçu <i class="fa fa-check"></i></span>
      <a class="car__info car__info--doc-link --link --smaller" href="#">Bon de commande</a>
      <a class="car__info car__info--doc-link --link --smaller" href="#">Bon d'enlèvement</a>
    </div>
    <div class="car__item car__item--pickout size--2">
      <a class="listing-action --large" href="#">Prendre rendez-vous</a>
    </div>
    <div class="car__item car__item--paiement size--2">
    </div>
    <a class="car__item car__item--link" href="#"></a>
  </li>
  <li class="carlist__car --purchase">
    <div class="car__item car__item--picture size--2">
      <a href="#" class="car__link">
        <img class="car__picture" src="https://res.cloudinary.com/aramisauto/image/fetch/w_500,h_400,c_fill/http%3A%2F%2Fcommondatastorage.googleapis.com%2Faramis_vehicles%2Fproduction%2FtradeIn%2F3292802%2Fimage%2Fnormal%2F1436017872035_535715128.jpg">
      </a>
    </div>
    <div class="car__item car__item--general size--5">
      <a href="#" class="car__link">
        <span class="car__info car__info--model --bold --big">Alfa romeo 156 sportwagon</span>
        <span class="car__info car__info--variant --bold --big">Distinctive</span>
        <div class="separator"></div>
        <span class="car__info car__info--engine">C3 Picasso HDI 90 Airdream</span>
        <span class="car__info car__info--box">Boite semi-automatique</span>
      </a>
    </div>
    <div class="car__item car__item--immat size--2">
      <span class="car__info car__info--immat">123BV95</span>
    </div>
    <div class="car__item car__item--price size--2">
      <span class="car__info car__info--price --bold --bigger --normal">5200 €</span>
    </div>
    <div class="car__item car__item--t-status size--3">
      <span class="car__info car__info--pickup">STVA Valenton</span>
      <span class="car__info car__info--t-status --bold">Arrivé</span>
    </div>
    <div class="car__item car__item--s-status size--3">
      <span class="car__info car__info--s-status --good --bold">Paiement reçu <i class="fa fa-check"></i></span>
      <a class="car__info car__info--doc-link --link --smaller" href="#">Bon de commande</a>
      <a class="car__info car__info--doc-link --link --smaller" href="#">Bon d'enlèvement</a>
    </div>
    <div class="car__item car__item--pickout size--2">
      <span class="car__info car__info--meetup --bold">RDV le 26/03 à 11h</span>
      <a class="listing-action --bad --large" href="#">Annuler le rendez-vous</a>
    </div>
    <div class="car__item car__item--paiement size--2">
    </div>
    <a class="car__item car__item--link" href="#"></a>
  </li>
  <li class="carlist__car --purchase">
    <div class="car__item car__item--picture size--2">
      <a href="#" class="car__link">
        <img class="car__picture" src="https://res.cloudinary.com/aramisauto/image/fetch/w_500,h_400,c_fill/http%3A%2F%2Fcommondatastorage.googleapis.com%2Faramis_vehicles%2Fproduction%2FtradeIn%2F3292802%2Fimage%2Fnormal%2F1436017872035_535715128.jpg">
      </a>
    </div>
    <div class="car__item car__item--general size--5">
      <a href="#" class="car__link">
        <span class="car__info car__info--model --bold --big">Alfa romeo 156 sportwagon</span>
        <span class="car__info car__info--variant --bold --big">Distinctive</span>
        <div class="separator"></div>
        <span class="car__info car__info--engine">C3 Picasso HDI 90 Airdream</span>
        <span class="car__info car__info--box">Boite semi-automatique</span>
      </a>
    </div>
    <div class="car__item car__item--immat size--2">
      <span class="car__info car__info--immat">123BV95</span>
    </div>
    <div class="car__item car__item--price size--2">
      <span class="car__info car__info--price --bold --bigger --normal">5200 €</span>
    </div>
    <div class="car__item car__item--t-status size--3">
      <span class="car__info car__info--pickup">STVA Valenton</span>
      <span class="car__info car__info--t-status --bold">Arrivé</span>
    </div>
    <div class="car__item car__item--s-status size--3">
      <span class="car__info car__info--s-status --normal --bold">Documents en cours d'envoi</span>
      <a class="car__info car__info--doc-link --link --smaller" href="#">Bon de commande</a>
      <a class="car__info car__info--doc-link --link --smaller" href="#">Bon d'enlèvement</a>
    </div>
    <div class="car__item car__item--pickout size--2">
      <span class="car__info car__info--meetup --bold">Enlevé le 27/03</span>
    </div>
    <div class="car__item car__item--paiement size--2">
    </div>
    <a class="car__item car__item--link" href="#"></a>
  </li>
  <li class="carlist__car --purchase">
    <div class="car__item car__item--picture size--2">
      <a href="#" class="car__link">
        <img class="car__picture" src="https://res.cloudinary.com/aramisauto/image/fetch/w_500,h_400,c_fill/http%3A%2F%2Fcommondatastorage.googleapis.com%2Faramis_vehicles%2Fproduction%2FtradeIn%2F3292802%2Fimage%2Fnormal%2F1436017872035_535715128.jpg">
      </a>
    </div>
    <div class="car__item car__item--general size--5">
      <a href="#" class="car__link">
        <span class="car__info car__info--model --bold --big">Alfa romeo 156 sportwagon</span>
        <span class="car__info car__info--variant --bold --big">Distinctive</span>
        <div class="separator"></div>
        <span class="car__info car__info--engine">C3 Picasso HDI 90 Airdream</span>
        <span class="car__info car__info--box">Boite semi-automatique</span>
      </a>
      <a class="listing-action --bad" href="#">
        <i class="fa fa-smile-o"></i>
        <i class="fa fa-frown-o"></i> 
        Notez-nous !
      </a>
    </div>
    <div class="car__item car__item--immat size--2">
      <span class="car__info car__info--immat">123BV95</span>
    </div>
    <div class="car__item car__item--price size--2">
      <span class="car__info car__info--price --bold --bigger --normal">5200 €</span>
    </div>
    <div class="car__item car__item--t-status size--3">
      <span class="car__info car__info--pickup">STVA Valenton</span>
      <span class="car__info car__info--t-status --bold">Arrivé</span>
    </div>
    <div class="car__item car__item--s-status size--3">
      <span class="car__info car__info--s-status --normal --bold">Numéro de suivi</span>
      <span class="car__info car__info--reference --link --bold">SXFHUHR8GTU</span>
      <a class="car__info car__info--doc-link --link --smaller" href="#">Bon de commande</a>
      <a class="car__info car__info--doc-link --link --smaller" href="#">Bon d'enlèvement</a>
      <a class="car__info car__info--doc-link --link --smaller" href="#">Facture</a>
    </div>
    <div class="car__item car__item--pickout size--2">
      <span class="car__info car__info--meetup --bold">Enlevé le 27/03</span>
    </div>
    <div class="car__item car__item--paiement size--2">
    </div>
    <a class="car__item car__item--link" href="#"></a>
  </li>
</ul>

<p>Mon historique :</p>
<ul class="carlist carlist--purchases-all" id="carlist">
  <li class="carlist__car --historic">
    <div class="car__item car__item--picture size--2">
      <a href="#" class="car__link">
        <img class="car__picture" src="https://res.cloudinary.com/aramisauto/image/fetch/w_500,h_400,c_fill/http%3A%2F%2Fcommondatastorage.googleapis.com%2Faramis_vehicles%2Fproduction%2FtradeIn%2F3292802%2Fimage%2Fnormal%2F1436017872035_535715128.jpg">
      </a>
    </div>
    <div class="car__item car__item--general size--5">
      <a href="#" class="car__link">
        <span class="car__info car__info--model --bold --big">Alfa romeo 156 sportwagon</span>
        <span class="car__info car__info--variant --bold --big">Distinctive</span>
        <div class="separator"></div>
        <span class="car__info car__info--engine">C3 Picasso HDI 90 Airdream</span>
        <span class="car__info car__info--box">Boite semi-automatique</span>
      </a>
    </div>
    <div class="car__item car__item--immat size--2">
      <span class="car__info car__info--immat">123BV95</span>
    </div>
    <div class="car__item car__item--price size--2">
      <span class="car__info car__info--price --bold --bigger --normal">5200 €</span>
    </div>
    <div class="car__item car__item--s-status size--4">
      <span class="car__info car__info--s-status --normal --bold">Numéro de suivi</span>
      <span class="car__info car__info--reference --link --bold">SXFHUHR8GTU</span>
      <a class="car__info car__info--doc-link --link --smaller" href="#">Bon de commande</a>
      <a class="car__info car__info--doc-link --link --smaller" href="#">Bon d'enlèvement</a>
      <a class="car__info car__info--doc-link --link --smaller" href="#">Facture</a>
    </div>
    <div class="car__item car__item--expert-note size--3">
      <span class="car__info car__info--note-title">Expertise</span>
      <i class="fa fa-star"></i>
      <i class="fa fa-star"></i>
      <i class="fa fa-star"></i>
      <i class="fa fa-star"></i>
      <i class="fa fa-star-o"></i>
    </div>
    <div class="car__item car__item--service-note size--3">
      <span class="car__info car__info--note-title">Service</span>
      <i class="fa fa-star"></i>
      <i class="fa fa-star-o"></i>
      <i class="fa fa-star-o"></i>
      <i class="fa fa-star-o"></i>
      <i class="fa fa-star-o"></i>
    </div>
    <a class="car__item car__item--link" href="#"></a>
  </li>
</ul>

/*Downloaded from https://www.codeseek.co/azopyros/car-display-2-VjLpwP */
    * {  margin: 0;  padding: 0;  font-family: 'Open Sans', sans-serif;  box-sizing: border-box;}
*:after,*:before {  box-sizing: border-box;}
html {  font-size: 14px;}
ul{list-style-type: none;}
.carlist{margin-bottom: 50px !important;}

// Media query ==> desktop 
@mixin desktop{
  @media screen and (min-width: 1025px){
    @content;
  }
}

// Media query ==> mobile
@mixin mobile{
  @media screen and (max-width: 1024px){
    @content;
  }
}

// un element exemple
.element{
  //style global
  @include desktop{
    //pc
    .carlist:not(.carlist--block){
      //list 
    }
    .carlist:not(.carlist--list){
      //block
    }
  }
  @include mobile{
    //mobile
  }
}

.carlist{
  @include desktop{
    &.carlist--dblock{
      display: flex;
      flex-flow: row wrap;
      width: 340px;
      margin: auto;

      @media screen and (min-width: 680px) { width: 680px; }
      @media screen and (min-width: 1020px){ width: 1020px;}
      @media screen and (min-width: 1360px){ width: 1360px;}
      @media screen and (min-width: 1700px){ width: 1700px;}
      @media screen and (min-width: 2040px){ width: 2040px;} 
    }
  }  
  @include mobile{
    display: flex;
    flex-flow: row wrap;
    width: 340px;
    margin: auto;

    @media screen and (min-width: 680px) { width: 680px; }
    @media screen and (min-width: 1020px){ width: 1020px;}
    @media screen and (min-width: 1360px){ width: 1360px;}
    @media screen and (min-width: 1700px){ width: 1700px;}
    @media screen and (min-width: 2040px){ width: 2040px;}
  }
}

.carlist__car{
  @include desktop{
    .carlist:not(.carlist--dblock) &{
      display: flex;
      align-items: stretch;
      flex-flow: row nowrap;

      padding: 5px;
      border-top: 1px solid #b3b3b3;

      &:last-child{border-bottom: 1px solid #b3b3b3;}
    }    
    .carlist--dblock &{
      flex-basis: 320px;
      max-width: 320px;
      width: 320px; //mobile ready
      position: relative;
      margin: 20px 0 0;

      padding-bottom: 10px;    
      box-shadow: 0 1px 4px rgba(0,0,0,.4);

      transition: box-shadow .25s ease;

      @media screen and (min-width: 340px){margin: 20px 10px 0;}

      &:hover{
        box-shadow: 1px 1px 8px rgba(0,0,0,.4);
        .car__picture{transform: scale(1.05,1.05);}
      }
    }
  }
  @include mobile{
    flex-basis: 320px;
    max-width: 320px;
    width: 320px; //mobile ready
    position: relative;
    margin: 20px 0 0;

    padding-bottom: 10px;

    transition: box-shadow .25s ease;
    @media screen and (min-width: 340px){
      box-shadow: 0 1px 4px rgba(0,0,0,.4);

      &:hover{
        box-shadow: 1px 1px 8px rgba(0,0,0,.4);
      }
    }
    @media screen and (min-width: 680px){        
      margin: 20px 10px 0;
    }
  }
}

.car__item{
  &:empty{display: none;}
  @include desktop{
    .carlist:not(.carlist--dblock) &{
      display: flex;
      align-items: center;
      justify-content: center;    
      flex-flow: column nowrap;

      padding: 0 5px;

      &.size--1{flex-basis: 5%;  max-width: 5%;}
      &.size--2{flex-basis: 10%; max-width: 10%;}
      &.size--3{flex-basis: 15%; max-width: 15%;}
      &.size--4{flex-basis: 20%; max-width: 20%;}
      &.size--5{flex-basis: 25%; max-width: 25%;}
      
      &:not(.car__item--general){.car__info{text-align: center;}}
      
      &.car__item--picture{
        justify-content: flex-start;
      }
      &.car__item--general{
      align-items: flex-start;

      &:hover .car__info--model{
        text-decoration: underline;
      }
      .separator{
        display: none;
      }
    }
      &.car__item--technic{
        align-items: flex-start;
      }
      &.car__item--expert-note,
      &.car__item--service-note{
        flex-flow: row nowrap;
        color: #d2d23a;
      }
      &.car__item--link{
        display: none;
      }
      
    }    
    .carlist--dblock &{
      overflow: hidden;
      :not(.car__item--picture){
        text-overflow: ellipsis;
      }
      &:empty{display: none;}
      &.car__item--general{
        padding: 0 5px;
      }
      &.car__item--technic{
        margin: 10px 0;
        display: flex;
        justify-content: space-between;
        padding: 0 5px;
      }
      &.car__item--pickup{
        float: left;
        text-align: center;
        max-width: 50%;
        padding-left: 5px;
      }
      &.car__item--sell-type{
        position: absolute;
        top: 210px; //calculated
        left: 0px;

        padding: 5px 15px;
        box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.3);

        background-color: #FF9100;

        font-weight: bold;

        .car__info{
          color: #fff;
          font-size: 16px;
        }

        &.sell-type--10{background-color: #11AB56;}
        &.sell-type--20{background-color: #ff9100;}
        &.sell-type--30{background-color: #0091e6;}
      }
      &.car__item--immat{
        position: absolute;
        top: calc(260px - 28px);
        left: 50%;

        padding: 2px 5px;
        box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.3);

        background-color: rgba(0,0,0,0.5);

        font-weight: bold;
        
        z-index: 5;
        transform: translateX(-50%);
      }
      &.car__item--status{
        padding: 0 5px 10px;
        text-align: center;
      }
      &.car__item--price{
        display: none;
      }
      &.car__item--end,
      &.car__item--paiement{
        float: right;
        max-width: 50%;
        padding-right: 5px;
        text-align: center;
      }
      &.car__item--link{
        position: absolute;
        display: block;
        top:0;
        left:0;
        right:0;
        bottom:0;
        z-index: 4;
      }
      &.car__item--t-status{
        display: flex;
        justify-content: space-around;
        padding: 0 5px;
        margin-top: 12px;
        margin-bottom: 5px;
      }
      &.car__item--s-status{
        padding: 0 5px;
        margin-bottom: 5px;
        position: relative;
        z-index: 5;
      }
      &.car__item--pickout{
        text-align: center;
        margin-top: 10px;
      }
      &.car__item--service-note,
      &.car__item--expert-note{
        position: absolute;
        top: calc(260px - 48px);
        color: #eb9c19;
        width: 50%;
        background-color: rgba(255,255,255,0.6);
        padding: 5px 0;
        text-align: center;
        text-shadow: 0px 1px 0px rgba(0,0,0,0.3);
      }
      &.car__item--service-note{left: 0;}
      &.car__item--expert-note{right: 0;}
    }
  }
  @include mobile{
    overflow: hidden;
    :not(.car__item--picture){
      text-overflow: ellipsis;
    }
    &:empty{display: none;}
    &.car__item--general{
      padding: 0 5px;
    }
    &.car__item--technic{
      margin: 10px 0;
      display: flex;
      justify-content: space-between;
      padding: 0 5px;
    }
    &.car__item--pickup,
    &.car__item--expert-note{
      float: left;
      text-align: center;
      max-width: 50%;
      padding-left: 5px;
    }
    &.car__item--sell-type,
    &.car__item--immat{
      position: absolute;
      top: 210px; //calculated
      left: 0px;

      padding: 5px 15px;
      box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.3);

      background-color: #FF9100;

      font-weight: bold;

      .car__info{
        color: #fff;
        font-size: 16px;
      }

      &.sell-type--10{background-color: #11AB56;}
      &.sell-type--20{background-color: #ff9100;}
      &.sell-type--30{background-color: #0091e6;}
    }
    &.car__item--immat{
      padding: 2px 5px;
      background-color: rgba(0,0,0,0.5);
    }
    &.car__item--status{
      padding: 0 5px 10px;
      text-align: center;
    }
    &.car__item--price{
      display: none;
    }
    &.car__item--end,
    &.car__item--paiement,
    &.car__item--service-note{
      float: right;
      max-width: 50%;
      padding-right: 5px;
      text-align: center;
    }
    &.car__item--link{
      position: absolute;
      display: block;
      top:0;
      left:0;
      right:0;
      bottom:0;
      z-index: 4;
    }
    &.car__item--t-status{
      display: flex;
      justify-content: space-around;
      padding: 0 5px;
      margin-top: 12px;
      margin-bottom: 5px;
    }
    &.car__item--s-status{
      padding: 0 5px;
      margin-bottom: 5px;
      position: relative;
      z-index: 5;
    }
    &.car__item--pickout{
      text-align: center;
      margin-top: 10px;
    }
    &.car__item--service-note,
    &.car__item--expert-note{
        color: #eb9c19;
      }
  }
}

.car__info{
  color: #888;
  &.--link  {color: #444444;}
  &.--normal{color: #0060ac;}
  &.--wait  {color: #ff9100;}
  &.--bad   {color: #ff5a5f;}
  &.--good  {color: #11ab56;}
  &.--bold  {font-weight: bold;}
  &.--small {font-size: 14px;}
  &.--big   {font-size: 16px;}
  &.--bigger{font-size: 18px;}
  @include desktop{
    .carlist:not(.carlist--dblock) &{
      &.car__info--engine{
        display: block;
      }
      &.car__info--registration{
        margin: 5px 0;
      }
      &.car__info--doc-link{
        &:first-of-type{
          margin-top: 5px;
        }
      }
      &.car__info--s-status{
        .fa{margin-left: 5px;}
      }
      &.car__info--doc-link{
        &:first-of-type{
          margin-top: 5px;
        }
      }
      &.car__info--model{
        &:after{
          content: " -";
        }
      }
      &.car__info--note-title{
        display: none;
      }
    }
    .carlist--dblock &{
      white-space: nowrap;
      &.car__info--pickup-date{
        display: none;
      }
      &.car__info--status{white-space: normal;}
      &.car__info--s-status{
        margin-top: 10px;
        display: block;
        text-align: center;
      }
      &.car__info--reference{
        display: block;
        text-align: center;
      }
      &.car__info--doc-link{
        display: block;
        margin: 5px auto 0 auto;
        border: 1px solid #0060ac;
        padding: 5px;
        width: 50%;
        text-align: center;
        text-decoration: none;
      }
      &.car__info--note-title{
        display: block;
      }
      &.car__info--immat{
        padding: 0 12px;
        border: 1px solid #aaa;
        position: relative;
        background-color: #fff;
        color: #000 !important;
        &:after, 
        &:before{
          content: "";
          position: absolute;
          top: 0;
          bottom: 0;
          width: 8px;
          background-color: #0251c6;
          display: inline-block;
        }
        &:after{right: 0;}
        &:before{left: 0;}
      }
    }
  }
  @include mobile{
    white-space: nowrap;
    &.car__info--pickup-date{
      display: none;
    }
    &.car__info--status{white-space: normal;}
    &.car__info--s-status{
      margin-top: 10px;
      display: block;
      text-align: center;
    }
    &.car__info--reference{
      display: block;
      text-align: center;
    }
    &.car__info--doc-link{
      display: block;
      margin: 5px auto 0 auto;
      border: 1px solid #0060ac;
      padding: 5px;
      width: 50%;
      text-align: center;
      text-decoration: none; 
    }
    &.car__info--note-title{
      display: block;
    }
    &.car__info--immat{
      padding: 0 12px;
      border: 1px solid #aaa;
      position: relative;
      color: #000 !important;
      background-color: #fff;
      &:after, 
      &:before{
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 8px;
        background-color: #0251c6;
        display: inline-block;
      }
      &:after{right: 0;}
      &:before{left: 0;}
    }
  }
}

.listing-action{  
  padding: 5px;
  display: block;
  background-color: #0060ac;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  &.--bad {background-color: #ff9100;}
  &:not(:first-child){margin-top: 7px;}
  @include desktop{
    .carlist:not(.carlist--dblock) &{
      border-radius: 10px;      
      &.--large {width: 100%;}
    }
    .carlist--dblock &{
      width: 70%;
      margin-left: auto;
      margin-right: auto;
    }
  }
  @include mobile{
    width: 70%;
    margin-left: auto;
    margin-right: auto;
  } 
}

.car__link{
  text-decoration: none;
  @include desktop{
    .carlist:not(.carlist--dblock) &{
      display: block
    }
  }
}

.car__picture{
  width: 100%;
  @include desktop{
    .carlist:not(.carlist--dblock) &{
      max-width: 150px;
    }
    .carlist--dblock &{
      height: 256px;
      transform: scale(1,1);
      transition: transform .25s ease;
    }
  }
  @include mobile{
    height: 256px;
    transform: scale(1,1);
    transition: transform .25s ease;
  }
}

.car__info--immat{
  padding: 0 12px;
  border: 1px solid #aaa;
  position: relative;
  background-color: #fff;
  color: #000 !important;
  &:after, 
  &:before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8px;
    background-color: #0251c6;
    display: inline-block;
  }
  &:after{right: 0;}
  &:before{left: 0;}
}

.carlist:not(.carlist--dblock) {
  @include desktop{
    .sell-type--10 .car__info{color: #11AB56;}
    .sell-type--20 .car__info{color: #ff9100;}
    .sell-type--30 .car__info{color: #0091e6;}
    .car__item--sell-type .car__info--price{
      display: none;
    }
  }
  @include mobile{
    &.--historic .car__item--immat{
      top: calc(260px - 48px - 28px);
    }
  }
}

.carlist{
  &.carlist--dblock{
    .--historic .car__item--immat{
      top: calc(260px - 48px - 28px);
    }
    .--purchase .car__item--price, .--historic .car__item--price{
      display: block;
    }
  }
  @include mobile{
    .--historic .car__item--immat{
      top: calc(260px - 48px - 28px);
    }
    .--purchase .car__item--price, .--historic .car__item--price{
      display: block;
    }
  }
}

.car__link[data-private="true"]{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  &:after{
    position: absolute;
    content: "a";
    width: 10px;
    height: 10px;
    top: 0;
    right: 0;
    background-color: orange;
  }
}


/*Downloaded from https://www.codeseek.co/azopyros/car-display-2-VjLpwP */
    $('#bouton').on('click',function(event){
  $('.carlist').toggleClass('carlist--dblock');
});

Comments