Template ECommerce Product Detail CSS

Jumpa lagi dengan Lacodeid(WriteCode) ditutorial ini WriteCode Akan membahas cara membuat Template ECommerce Product Detail CSS, untuk membuat template seperti gambar diatas bisa ikuti tutorial ini sampai dengan selesai, cara ini sering saya gunakan untuk membuat detail produk disetiap project website yang berhubungan dengan penjualan, langsung saja tanpa basa basi kita masuk kekodingannya dibawah ini :

Baca Juga : Carousal Product Responsive Ponsel dan Desktop

Step 1

Untuk script CSS bisa Anda copas dibawah ini letakan didalam tag <head> :

<style type="text/css">
        
        /*****************globals*************/
        body {
          font-family: 'open sans';
          overflow-x: hidden; }

        img {
          max-width: 100%; }

        .preview {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -webkit-flex-direction: column;
              -ms-flex-direction: column;
                  flex-direction: column; }
          @media screen and (max-width: 996px) {
            .preview {
              margin-bottom: 20px; } }

        .preview-pic {
          -webkit-box-flex: 1;
          -webkit-flex-grow: 1;
              -ms-flex-positive: 1;
                  flex-grow: 1; }

        .preview-thumbnail.nav-tabs {
          border: none;
          margin-top: 15px; }
          .preview-thumbnail.nav-tabs li {
            width: 18%;
            margin-right: 2.5%; }
            .preview-thumbnail.nav-tabs li img {
              max-width: 100%;
              display: block; }
            .preview-thumbnail.nav-tabs li a {
              padding: 0;
              margin: 0; }
            .preview-thumbnail.nav-tabs li:last-of-type {
              margin-right: 0; }

        .tab-content {
          overflow: hidden; }
          .tab-content img {
            width: 100%;
            -webkit-animation-name: opacity;
                    animation-name: opacity;
            -webkit-animation-duration: .3s;
                    animation-duration: .3s; }

        .card {
          margin-top: 50px;
          background: #eee;
          padding: 3em;
          line-height: 1.5em; }

        @media screen and (min-width: 997px) {
          .wrapper {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex; } }

        .details {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -webkit-flex-direction: column;
              -ms-flex-direction: column;
                  flex-direction: column; }

        .colors {
          -webkit-box-flex: 1;
          -webkit-flex-grow: 1;
              -ms-flex-positive: 1;
                  flex-grow: 1; }

        .product-title, .price, .sizes, .colors {
          text-transform: UPPERCASE;
          font-weight: bold; }

        .checked, .price span {
          color: #ff9f1a; }

        .product-title, .rating, .product-description, .price, .vote, .sizes {
          margin-bottom: 15px; }

        .product-title {
          margin-top: 0; }

        .size {
          margin-right: 10px; }
          .size:first-of-type {
            margin-left: 40px; }

        .color {
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
          height: 2em;
          width: 2em;
          border-radius: 2px; }
          .color:first-of-type {
            margin-left: 20px; }

        .add-to-cart, .like {
          background: #ff9f1a;
          padding: 1.2em 1.5em;
          border: none;
          text-transform: UPPERCASE;
          font-weight: bold;
          color: #fff;
          -webkit-transition: background .3s ease;
                  transition: background .3s ease; }
          .add-to-cart:hover, .like:hover {
            background: #b36800;
            color: #fff; }

        .not-available {
          text-align: center;
          line-height: 2em; }
          .not-available:before {
            font-family: fontawesome;
            content: "\f00d";
            color: #fff; }

        .orange {
          background: #ff9f1a; }

        .green {
          background: #85ad00; }

        .blue {
          background: #0076ad; }

        .tooltip-inner {
          padding: 1.3em; }

        @-webkit-keyframes opacity {
          0% {
            opacity: 0;
            -webkit-transform: scale(3);
                    transform: scale(3); }
          100% {
            opacity: 1;
            -webkit-transform: scale(1);
                    transform: scale(1); } }

        @keyframes opacity {
          0% {
            opacity: 0;
            -webkit-transform: scale(3);
                    transform: scale(3); }
          100% {
            opacity: 1;
            -webkit-transform: scale(1);
                    transform: scale(1); } }

    </style>

Step 2

Untuk Bootstrap bisa anda copas dibawah ini letakan didalam tag <head>

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
 <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

Step 3

Kode HTML bisa anda copas dibawah ini :

Baca Juga : HTML CSS Produk Mobile Responsive

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Template E-Commerce Product Detail CSS</title>

    <!-- letakan bootstrap disini -->


    <!-- letakan style css disini -->

  </head>

  <body>
    
    <div class="container">
        <div class="card">
            <div class="container-fliud">
                <div class="wrapper row">
                    <div class="preview col-md-6">
                        
                        <div class="preview-pic tab-content">
                          <div class="tab-pane active" id="pic-1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggTHY93lAVZt-oGuIp7LaduDESC3KNTR_NPeK8uf4Gg_jEbwdJiFP6kVbzUorv95XfcBHwO1Fw8A3WOXsbdrSMOzFNR9F0BDyN9sIgJSfWwHELU0Z0ARcbYi181HfWDsAE9wqSkdG0LQU/s640/lacodeid.jpg" /></div>
                          <div class="tab-pane" id="pic-2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggTHY93lAVZt-oGuIp7LaduDESC3KNTR_NPeK8uf4Gg_jEbwdJiFP6kVbzUorv95XfcBHwO1Fw8A3WOXsbdrSMOzFNR9F0BDyN9sIgJSfWwHELU0Z0ARcbYi181HfWDsAE9wqSkdG0LQU/s640/lacodeid.jpg" /></div>
                          <div class="tab-pane" id="pic-3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggTHY93lAVZt-oGuIp7LaduDESC3KNTR_NPeK8uf4Gg_jEbwdJiFP6kVbzUorv95XfcBHwO1Fw8A3WOXsbdrSMOzFNR9F0BDyN9sIgJSfWwHELU0Z0ARcbYi181HfWDsAE9wqSkdG0LQU/s640/lacodeid.jpg" /></div>
                          <div class="tab-pane" id="pic-4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggTHY93lAVZt-oGuIp7LaduDESC3KNTR_NPeK8uf4Gg_jEbwdJiFP6kVbzUorv95XfcBHwO1Fw8A3WOXsbdrSMOzFNR9F0BDyN9sIgJSfWwHELU0Z0ARcbYi181HfWDsAE9wqSkdG0LQU/s640/lacodeid.jpg" /></div>
                          <div class="tab-pane" id="pic-5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggTHY93lAVZt-oGuIp7LaduDESC3KNTR_NPeK8uf4Gg_jEbwdJiFP6kVbzUorv95XfcBHwO1Fw8A3WOXsbdrSMOzFNR9F0BDyN9sIgJSfWwHELU0Z0ARcbYi181HfWDsAE9wqSkdG0LQU/s640/lacodeid.jpg" /></div>
                        </div>
                        <ul class="preview-thumbnail nav nav-tabs">
                          <li class="active"><a data-target="#pic-1" data-toggle="tab"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggTHY93lAVZt-oGuIp7LaduDESC3KNTR_NPeK8uf4Gg_jEbwdJiFP6kVbzUorv95XfcBHwO1Fw8A3WOXsbdrSMOzFNR9F0BDyN9sIgJSfWwHELU0Z0ARcbYi181HfWDsAE9wqSkdG0LQU/s640/lacodeid.jpg" /></a></li>
                          <li><a data-target="#pic-2" data-toggle="tab"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggTHY93lAVZt-oGuIp7LaduDESC3KNTR_NPeK8uf4Gg_jEbwdJiFP6kVbzUorv95XfcBHwO1Fw8A3WOXsbdrSMOzFNR9F0BDyN9sIgJSfWwHELU0Z0ARcbYi181HfWDsAE9wqSkdG0LQU/s640/lacodeid.jpg" /></a></li>
                          <li><a data-target="#pic-3" data-toggle="tab"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggTHY93lAVZt-oGuIp7LaduDESC3KNTR_NPeK8uf4Gg_jEbwdJiFP6kVbzUorv95XfcBHwO1Fw8A3WOXsbdrSMOzFNR9F0BDyN9sIgJSfWwHELU0Z0ARcbYi181HfWDsAE9wqSkdG0LQU/s640/lacodeid.jpg" /></a></li>
                          <li><a data-target="#pic-4" data-toggle="tab"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggTHY93lAVZt-oGuIp7LaduDESC3KNTR_NPeK8uf4Gg_jEbwdJiFP6kVbzUorv95XfcBHwO1Fw8A3WOXsbdrSMOzFNR9F0BDyN9sIgJSfWwHELU0Z0ARcbYi181HfWDsAE9wqSkdG0LQU/s640/lacodeid.jpg" /></a></li>
                          <li><a data-target="#pic-5" data-toggle="tab"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggTHY93lAVZt-oGuIp7LaduDESC3KNTR_NPeK8uf4Gg_jEbwdJiFP6kVbzUorv95XfcBHwO1Fw8A3WOXsbdrSMOzFNR9F0BDyN9sIgJSfWwHELU0Z0ARcbYi181HfWDsAE9wqSkdG0LQU/s640/lacodeid.jpg" /></a></li>
                        </ul>
                        
                    </div>
                    <div class="details col-md-6">
                        <h3 class="product-title">men's shoes fashion</h3>
                        <div class="rating">
                            <div class="stars">
                                <span class="fa fa-star checked"></span>
                                <span class="fa fa-star checked"></span>
                                <span class="fa fa-star checked"></span>
                                <span class="fa fa-star"></span>
                                <span class="fa fa-star"></span>
                            </div>
                            <span class="review-no">41 reviews</span>
                        </div>
                        <p class="product-description">Suspendisse quos? Tempus cras iure temporibus? Eu laudantium cubilia sem sem! Repudiandae et! Massa senectus enim minim sociosqu delectus posuere.</p>
                        <h4 class="price">current price: <span>$180</span></h4>
                        <p class="vote"><strong>91%</strong> of buyers enjoyed this product! <strong>(87 votes)</strong></p>
                        <h5 class="sizes">sizes:
                            <span class="size" data-toggle="tooltip" title="small">s</span>
                            <span class="size" data-toggle="tooltip" title="medium">m</span>
                            <span class="size" data-toggle="tooltip" title="large">l</span>
                            <span class="size" data-toggle="tooltip" title="xtra large">xl</span>
                        </h5>
                        <h5 class="colors">colors:
                            <span class="color orange not-available" data-toggle="tooltip" title="Not In store"></span>
                            <span class="color green"></span>
                            <span class="color blue"></span>
                        </h5>
                        <div class="action">
                            <button class="add-to-cart btn btn-default" type="button">add to cart</button>
                            <button class="like btn btn-default" type="button"><span class="fa fa-heart"></span></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </body>
</html>

Untuk Tampilan yang lebih baik silakan anda kembangkan sesuai dengan keinginan agan, diatas cara membuat Template ECommerce Product Detail CSS bila ada pertanyaan silakan komen dibawah

Baca Juga : Ecommerce Popup Produk HTML 5

Bootstrap css HTML

Tutorial Website | Tutorial PHP & MYSQL | Boostsrap | Ajax Javascript

Membuat popup dengan time javascript bootstrap

Related Posts

Posting Komentar

Posting Komentar

Label

Archive

Laporkan Penyalahgunaan

Popular