Ui Dynamic

General

General merupakan grup yang memiliki sebanyak delapan elemen di dalamnya, yang mana setiap elemennya memiliki kegunaanya masing - masing dalam proses pengembangan sebuah proyek website

1. Card product preview I

Honda XR 650 Custom

View Product

Card product preview I dapat digunakan secara general untuk berbagai kebutuhan anda mulai dari menampilkan suatu produk,promo, dan lain lain.


    <div class="col-lg-4 col-md-6 col-sm-10 col-12">
      <div class="cardproductpreview1-general shadow">
        <div class="cardproductpreview1body-general">
          <div class="cardproductpreview1imagepreview-general">
            <img  src="assets/images/cardproductpreview1.png" alt="Card image cap" class="cardproductpreview1imagepreviewpic-general" alt="IMAGE">
          </div>
          <div class="cardproductpreview1footer-general">
            <div class="cardproductpreview1col6_1-general">
              <p class="cardproductpreview1footercompare-general">Honda XR 650 Custom</p>
            </div>
            <div class="cardproductpreview1col6_2-general">
              <p class="cardproductpreview1footerview-general">View Product</p>
            </div>
          </div>
        </div>
      </div>
    </div>

2. Card product preview II

Oversized T Shirt

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt

Card product preview II digunakan untuk menampilkan produk beserta dengan judul yang deskripsi yang sesua, untuk menggunakan fitur ini silahkan copy source code di bawah.


    <div class="col-lg-4 col-md-6 col-sm-10 col-12">
      <div class="cardproductpreview2-general shadow">
        <div class="cardproductpreview2body-general">
          <div class="cardproductpreview2imagepreview-general">
            <img  src="assets/images/oversizedtshirt.png" alt="Card image cap" class="cardproductpreview2imagepreviewpic-general" alt="IMAGE">
          </div>
          <div class="cardproductpreview2desccontainer-general">
            <p class="cardproductpreview2title-general">Oversized T Shirt</p>
            <p class="cardproductpreview2desc-general">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
          </div>
        </div>
      </div>
    </div>

3. Card product preview III

Pull Over Hoodies

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt

Card product preview III Memiliki fungsi yang hampir sama dengan card product preview II namun dengan ukuran yang lebih kecil dan ringkas, sehingga dapat me-nyisakan lebih banyak ruang untuk dimanfaatkan.


    <div class="col-lg-3 col-md-6 col-sm-10 col-12">
      <div class="cardproductpreview3-general shadow">
        <div class="cardproductpreview3body-general">
          <div class="cardproductpreview3imagepreview-general">
            <img  src="assets/images/cardproductpreview3.png" alt="Card image cap" class="cardproductpreview3imagepreviewpic-general" alt="IMAGE">
          </div>
          <div class="cardproductpreview3desccontainer-general">
            <p class="cardproductpreview3title-general">Pull Over Hoodies</p>
            <p class="cardproductpreview3desc-general">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
          </div>
        </div>
      </div>
    </div>

4. Card product preview IV

Card product preview IV digunakan untuk menampilkan gambar secara utuh, ini akan sangan cocok jika anda ingin untuk menunjukan sebuah karya melalui website yang anda kembangkan.


    <a href="#">
      <div class="col-lg-4 col-md-6 col-sm-10 col-12">
        <div class="cardproductpreview4-general shadow">
          <div class="cardproductpreview4body-general">
            <div class="cardproductpreview4imagepreview-general">
              <img  src="assets/images/cardproductpreview4.png" alt="Card image cap" class="cardproductpreview4imagepreviewpic-general" alt="IMAGE">
            </div>
          </div>
        </div>
      </div>
    </a>

5. Card product preview IV

City

Aerial

Yellow Box Junction

Card product preview V memiliki fitur yang hampir serupa dengan card product pre-view IV namun dengan tambahan tag di bagian bawah gambar.


    <div class="col-lg-4 col-md-6 col-sm-10 col-12">
      <div class="cardproductpreview5-general shadow">
        <div class="cardproductpreview5body-general">
          <div class="cardproductpreview5imagepreview-general">
            <img  src="assets/images/productpreview5.png" alt="Card image cap" class="cardproductpreview5imagepreviewpic-general" alt="IMAGE">
          </div>
          <div class="cardproductpreview5desccontainer-general">
            <div class="cardproductpreview5tagcontainer-general">
              <a class="cardproductpreview5desc-general" href="" style="margin:0; ">City</a>
            </div>
            <div class="cardproductpreview5tagcontainer-general">
              <a class="cardproductpreview5desc-general" href="" style="margin:0; ">Aerial</a>
            </div>
            <div class="cardproductpreview5tagcontainer-general">
              <a class="cardproductpreview5desc-general" href="" style="margin:0; ">Yellow Box Junction</a>
            </div>
          </div>
        </div>
      </div>
    </div>

6. Card product preview VI

We Are Hiring !

Sushi Chef

Hibachi Chef

+1 087 621 7876

Omaha. NE

Ryoka Japanese House

Looking for Sushi Chef and Hibachi Chef at Omaha. NE As Soon As Possible. They provide living in, Good pay.

Card product preview VI akan lebih sempurna saat digunakan untuk menampilkan ikaln seperti lowongan pekerjaan, karena dalam card ini telah menyiapkan kebu-tuhan untuk itu semua.


    <div class="col-lg-4 col-md-6 col-sm-10 col-12">
      <div class="cardproductpreview6-general shadow">
        <div class="cardproductpreview6body-general">
          <div class="cardproductpreview6jobthumbnail-general">
          <div class="cardproductpreview6jobthumbnailcontainer-general">
            <p class="cardproductpreview6jobtitle-general">We Are Hiring !</p>
            <p class="cardproductpreview6jobtitle1-general">Sushi Chef</p>
            <p class="cardproductpreview6jobtitle1-general">Hibachi Chef</p>
            <p class="cardproductpreview6jobtitle-general">+1 087 621 7876</p>
          </div>
          </div>
          <div class="cardproductpreview6desccontainer-general">
            <p class="cardproductpreview6desctitle1-general">Omaha. NE</p>
            <p class="cardproductpreview6title-general">Ryoka Japanese House</p>
            <p class="cardproductpreview6desc-general">Looking for Sushi Chef and Hibachi Chef at Omaha. NE As Soon As Possible. They provide living in, Good pay. </p>
          </div>
        </div>
      </div>
    </div>

7. Card product preview VII

Motion Perfect

Graphic Designer

San Francisco

Card product preview VII memiliki fungsi yang hampir sama dengan card product preview VI, namun kali ini memiliki ukuran yang lebih ringkas dan desain yang lebih sederhana.


    <div class="col-lg-6 col-md-6 col-sm-10 col-12">
      <div class="cardproductpreview7-general shadow">
        <div class="cardproductpreview7jobdesc-general">
          <p class="cardproductpreview7text1-general">Motion Perfect</p>
          <p class="cardproductpreview7text2-general">Graphic Designer</p>
          <p class="cardproductpreview7text3-general">San Francisco</p>
        </div>
        <div class="cardproductpreview7button-general">        
          <button type="submit" href="#" class="button-button btn-purple btn-text-white">Button label</button>  
        </div>
      </div>
    </div>

8. Card product preview VIII

Motion Perfect

Graphic Designer

San Francisco

Card product preview VIII memiliki fungsi yang hampir sama dengan card product preview VI, namun kali ini memiliki ukuran yang lebih ringkas dan desain yang lebih sederhana.

                      
    <div class="col-lg-6 col-md-6 col-sm-10 col-12">
      <div class="cardproductpreview8-general shadow">
        <div class="cardproductpreview8jobdesc-general">
          <p class="cardproductpreview8text1-general">Motion Perfect</p>
          <p class="cardproductpreview8text2-general">Graphic Designer</p>
          <p class="cardproductpreview8text3-general">San Francisco</p>
        </div>
        <div class="cardproductpreview8button-general">        
          <button type="submit" href="#" class="button-button btn-white btn-text-purple">Button label</button>  
        </div>
      </div>
    </div>