Marketplace
Marketplace merupakan grup yang memiliki sebanyak sepuluh elemen di dalamnya, yang mana setiap elemennya memiliki kegunaanya masing - masing dalam proses pengembangan sebuah proyek website
1. Card item medium
hijackbag
@dhijackbag
$65.00
Canvas Backpack
Product Description
50 comments
Card item medium digunakan untuk menampilkan item yang dijual dalam website anda, dalam card ini terdapat juga fitur untuk melihat gambar dari item yang dijual tersebut, dengan meng-click thumbnail.
<div class="col-lg-4 col-md-6 col-sm-10 col-12">
<div class="carditemmedium-marketplace shadow">
<div class="carditemmediumhead-marketplace">
<div class="carditemmediumcol2-marketplace">
<img src="assets/images/hijackbagprofile.png" alt="Card image cap" class="carditemmediumprofilepic-marketplace">
</div>
<div class="carditemmediumcol5_1-marketplace">
<div class="dim12">
<p class="carditemmediumtitle-marketplace">hijackbag</p>
</div>
<div class="dim12">
<p class="carditemmediumtitle1-marketplace">@dhijackbag</p>
</div>
</div>
<div class="carditemmediumcol5_2-marketplace">
<div class="dim12">
<p class="carditemmediumtitle-marketplace">$65.00</p>
</div>
<div class="dim12">
<p class="carditemmediumtitle1-marketplace">Canvas Backpack</p>
</div>
</div>
</div>
<div class="carditemmediumbody-marketplace">
<div class="cardmediumimagepreview-marketplace">
<img src="assets/images/hijackbag4.png" alt="Card image cap" class="cardmediumimagepreviewpic-marketplace" id="cardmediumimagepreviewmain-marketplace" alt="IMAGE">
</div>
<div class="cardmediumimagepreviewselect-marketplace">
<div class="cardmediumimagepreviewselectcontainer-marketplace col-3">
<img src="assets/images/hijackbag1.png" alt="Card image cap" class="cardmediumimagepreviewpic-marketplace" onclick="change(this.src)">
</div>
<div class="cardmediumimagepreviewselectcontainer-marketplace col-3">
<img src="assets/images/hijackbag2.png" alt="Card image cap" class="cardmediumimagepreviewpic-marketplace" onclick="change(this.src)">
</div>
<div class="cardmediumimagepreviewselectcontainer-marketplace col-3">
<img src="assets/images/hijackbag3.png" alt="Card image cap" class="cardmediumimagepreviewpic-marketplace" onclick="change(this.src)">
</div>
<div class="cardmediumimagepreviewselectcontainer-marketplace col-3">
<img src="assets/images/hijackbag4.png" alt="Card image cap" class="cardmediumimagepreviewpic-marketplace" onclick="change(this.src)">
</div>
</div>
<div class="carditemmediumbuttoncontainer-marketplace">
<a href="#" class="carditemmediumbutton-marketplace">Add to Cart</a>
</div>
<div class="carditemmediumproductdescription-marketplace">
<div class="carditemmediumcol6-marketplace">
<p class="carditemmediumtitle-marketplace">Product Description</p>
</div>
<div class="carditemmediumcol6_1-marketplace">
<span class="material-icons carditemmediumtitle-marketplace" onclick="myFunction()" style="cursor:pointer;" id="productdescriptionarrow-marketplace">keyboard_arrow_down</span>
</div>
</div>
<div class="carditemmediumproductdescription-marketplace" id="productdescription-marketplace" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Read More…</p>
</div>
<div class="carditemmediumproductdescription-marketplace">
<div class="carditemmediumcol6-marketplace">
<p class="carditemmediumtitle-marketplace">50 comments</p>
</div>
<div class="carditemmediumcol6_1-marketplace">
<span class="material-icons carditemmediumtitle-marketplace" onclick="myFunction1()" style="cursor:pointer;" id="commentarrow-marketplace">keyboard_arrow_down</span>
</div>
</div>
<div class="carditemmediumproductcomment-marketplace" id="productcomment-marketplace" style="display: none;">
<div class="carditemmediumcommentbody-marketplace">
<div class="carditemmediumcommentbodyhead-marketplace">
<div class="carditemmediumcommentcol2-marketplace">
<img src="assets/images/Profile.png" alt="Card image cap" class="carditemmediumcommentprofilepic-marketplace">
</div>
<div class="carditemmediumcommentcol6-marketplace">
<div class="dim12">
<p class="cardreview3title-marketplace">Danny Alves</p>
</div>
</div>
<div class="carditemmediumcommentcol4-marketplace">
<span><i class="material-icons" style="font-size: 14px; vertical-align: -2; color:#FED568">star</i></span>
<span><i class="material-icons" style="font-size: 14px; vertical-align: -2; color:#FED568">star</i></span>
<span><i class="material-icons" style="font-size: 14px; vertical-align: -2; color:#FED568">star</i></span>
<span><i class="material-icons" style="font-size: 14px; vertical-align: -2; color:#FED568">star</i></span>
<span><i class="material-icons" style="font-size: 14px; vertical-align: -2; color:#E9EAEF">star</i></span>
</div>
</div>
<div class="carditemmediumcommentcommenttext-marketplace">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Read More…</p>
</div>
</div>
<div class="carditemmediumcommentbody-marketplace">
<div class="carditemmediumcommentbodyhead-marketplace">
<div class="carditemmediumcommentcol2-marketplace">
<img src="assets/images/Profile.png" alt="Card image cap" class="carditemmediumcommentprofilepic-marketplace">
</div>
<div class="carditemmediumcommentcol6-marketplace">
<div class="dim12">
<p class="cardreview3title-marketplace">Danny Alves</p>
</div>
</div>
<div class="carditemmediumcommentcol4-marketplace">
<span><i class="material-icons" style="font-size: 14px; vertical-align: -2; color:#FED568">star</i></span>
<span><i class="material-icons" style="font-size: 14px; vertical-align: -2; color:#FED568">star</i></span>
<span><i class="material-icons" style="font-size: 14px; vertical-align: -2; color:#FED568">star</i></span>
<span><i class="material-icons" style="font-size: 14px; vertical-align: -2; color:#FED568">star</i></span>
<span><i class="material-icons" style="font-size: 14px; vertical-align: -2; color:#E9EAEF">star</i></span>
</div>
</div>
<div class="carditemmediumcommentcommenttext-marketplace">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Read More…</p>
</div>
</div>
<div class="carditemmediumcommentbody-marketplace">
<div class="carditemmediumcommentbodyhead-marketplace">
<div class="carditemmediumcommentcol2-marketplace">
<img src="assets/images/Profile.png" alt="Card image cap" class="carditemmediumcommentprofilepic-marketplace">
</div>
<div class="carditemmediumcommentcol6-marketplace">
<div class="dim12">
<p class="cardreview3title-marketplace">Danny Alves</p>
</div>
</div>
<div class="carditemmediumcommentcol4-marketplace">
<span><i class="material-icons" style="font-size: 14px; vertical-align: -2; color:#FED568">star</i></span>
<span><i class="material-icons" style="font-size: 14px; vertical-align: -2; color:#FED568">star</i></span>
<span><i class="material-icons" style="font-size: 14px; vertical-align: -2; color:#FED568">star</i></span>
<span><i class="material-icons" style="font-size: 14px; vertical-align: -2; color:#FED568">star</i></span>
<span><i class="material-icons" style="font-size: 14px; vertical-align: -2; color:#E9EAEF">star</i></span>
</div>
</div>
<div class="carditemmediumcommentcommenttext-marketplace">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Read More…</p>
</div>
</div>
</div>
</div>
</div>
</div>
2. Card item small
Oversized T shirt
4.0
star
500 reviews
Start From $50
Select Color
REGULAR FIT. Basic short sleeve T-shirt with a round neckline. Made of 100% cotton.
Card item small digunakan untuk menampilkan item yang dijual dalam website an-da, dalam card ini terdapat juga fitur untuk melihat gambar dari item yang dijual tersebut, ukuran card ini lebih kecil dari card item medium.
<div class="col-lg-4 col-md-6 col-sm-10 col-12">
<div class="carditemsmall-marketplace shadow">
<div class="carditemsmallhead-marketplace">
<div class="carditemsmallcol7-marketplace">
<div class="dim12">
<p class="carditemsmalltitle-marketplace">Oversized T shirt</p>
</div>
<div class="dim12">
<span class="carditemsmalltitle1-marketplace">4.0</span>
<span><i class="material-icons" style="font-size: 14px; vertical-align: -2; color:#FED568">star</i></span>
<span class="carditemsmalltitle1-marketplace">500 reviews</span>
</div>
</div>
<div class="carditemsmallcol5-marketplace">
<div class="dim12">
<p class="carditemsmalltitle1-marketplace">Start From $50</p>
</div>
</div>
</div>
<div class="carditemsmallbody-marketplace">
<div class="cardsmallimagepreview-marketplace">
<img src="assets/images/oversizedtshirt.png" alt="Card image cap" class="cardsmallimagepreviewpic-marketplace" id="cardsmallimagepreviewmain-marketplace" alt="IMAGE">
</div>
<div class="carditemsmallcolorselectcontainer-marketplace">
<p class="carditemsmalltitle-marketplace">Select Color</p>
</div>
<div class="cardsmallimagepreviewselect-marketplace">
<span class="dot purple"></span>
<span class="dot red"></span>
<span class="dot black"></span>
<span class="dot cyan"></span>
<span class="dot orange"></span>
</div>
<div class="carditemsmallproductdescriptioncontainer-marketplace">
<p class="carditemsmallproductdescription-marketplace">REGULAR FIT. Basic short sleeve T-shirt with a round neckline. Made of 100% cotton.</p>
</div>
<div class="carditemsmallfooter-marketplace">
<div class="carditemsmallcol6_1-marketplace">
<p class="carditemsmallfootercompare-marketplace">Add To Comparison</p>
</div>
<div class="carditemsmallcol6_2-marketplace">
<p class="carditemsmallfooterview-marketplace">View Product</p>
</div>
</div>
</div>
</div>
</div>
3. Card display I
Downtown Austin Stay
$154.00/night
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
Card display I digunakan untuk menampilkan product dari website anda, bisa digunakan sebagai website tour dan sebagainya, untuk menggunakan card ini si-lahkan gunakan source code di bawah.
<div class="col-lg-4 col-md-6 col-sm-10 col-12">
<div class="carddisplay1-marketplace shadow">
<div class="carddisplay1body-marketplace">
<div class="carddisplay1imagecontainer-marketplace">
<img src="assets/images/carddisplay1.png" alt="Card image cap" class="carddisplay1image-marketplace" alt="IMAGE">
</div>
<div class="carddisplay1ratingcontainer-marketplace">
<span>4.0</span>
<span><i class="material-icons" style="font-size: 14px; vertical-align: -2; color:#FED568">star</i></span>
<span>Entire apartment in Zilker</span>
</div>
<div class="carddisplay1titlecontainer-marketplace">
<p class="carddisplay1title-marketplace">Downtown Austin Stay</p>
</div>
<div class="carddisplay1pricecontainer-marketplace">
<p class="carddisplay1price-marketplace">$154.00/night</p>
</div>
<div class="carddisplay1desccontainer-marketplace">
<div>
<p class="carddisplay1desc-marketplace">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
</div>
</div>
</div>
4. Card display II
154.00/night
Downtown Austin Stay
wifi
WIFI
kitchen
Kitchen
local_laundry_service
Dryer
local_laundry_service
Washer
tv
TV
pool
Pool
Card display II digunakan untuk menampilkan product dari website anda, dalam card ini memiliki fitur yang dapat menampilkan spesifikasi dari produk tersebut.
<div class="col-lg-4 col-md-6 col-sm-10 col-12">
<div class="carddisplay2-marketplace shadow">
<div class="carddisplay2body-marketplace">
<div class="carddisplay2imagecontainer-marketplace">
<img src="assets/images/carddisplay2.png" alt="Card image cap" class="carddisplay2image-marketplace" alt="IMAGE">
</div>
<div class="carddisplay2pricecontainer-marketplace">
<p class="carddisplay2price-marketplace">154.00/night</p>
</div>
<div>
<p class="carddisplay2title-marketplace">Downtown Austin Stay</p>
</div>
<div class="carddisplay2ratingcontainer-marketplace">
<span><i class="material-icons" style="font-size: 14px; vertical-align: -2; color:#FED568">star</i></span>
<span>4.0</span>
</div>
<div class="carddisplay2desccontainer-marketplace">
<div class="carddisplay2col4-marketplace">
<span><i class="material-icons" style="font-size: 15px; vertical-align: -2; color:#090865">wifi</i></span>
<span class="carddisplay2desc-marketplace">WIFI</span>
</div>
<div class="carddisplay2col4-marketplace">
<span><i class="material-icons" style="font-size: 15px; vertical-align: -2; color:#090865">kitchen</i></span>
<span class="carddisplay2desc-marketplace">Kitchen</span>
</div>
<div class="carddisplay2col4-marketplace">
<span><i class="material-icons" style="font-size: 15px; vertical-align: -2; color:#090865">local_laundry_service</i></span>
<span class="carddisplay2desc-marketplace">Dryer</span>
</div>
<div class="carddisplay2col4-marketplace">
<span><i class="material-icons" style="font-size: 15px; vertical-align: -2; color:#090865">local_laundry_service</i></span>
<span class="carddisplay2desc-marketplace">Washer</span>
</div>
<div class="carddisplay2col4-marketplace">
<span><i class="material-icons" style="font-size: 15px; vertical-align: -2; color:#090865">tv</i></span>
<span class="carddisplay2desc-marketplace">TV</span>
</div>
<div class="carddisplay2col4-marketplace">
<span><i class="material-icons" style="font-size: 15px; vertical-align: -2; color:#090865">pool</i></span>
<span class="carddisplay2desc-marketplace">Pool</span>
</div>
</div>
<div class="carddisplay2footer-marketplace">
<a href="#" class="carddisplay2button-marketplace">Book Now</a>
</div>
</div>
</div>
</div>
5. Card display III
Oversized T Shirt
Start From $50
REGULAR FIT. Basic short sleeve T-shirt with a round neckline. Made of 100% cotton.
Card display III digunakan untuk menampilkan product dari website anda, card dis-play III hampir sama dengan card display I namun card ini akan lebih cocok untuk menampilkan produk berupa pakaian. Untuk menggunakan card ini silahkan gunakan source code di bawah.
<div class="col-lg-4 col-md-6 col-sm-10 col-12">
<div class="carddisplay3-marketplace shadow">
<div class="carddisplay3body-marketplace">
<div class="carddisplay3imagecontainer-marketplace">
<img src="assets/images/carddisplay3.jpg" alt="Card image cap" class="carddisplay3image-marketplace" alt="IMAGE">
</div>
<div style="margin-top: 4;">
<p class="carddisplay3title-marketplace">Oversized T Shirt</p>
</div>
<div class="carddisplay3ratingcontainer-marketplace">
<span>4.0</span>
<span><i class="material-icons" style="font-size: 14px; vertical-align: -2; color:#FED568">star</i></span>
<span>500 Reviews</span>
</div>
<div class="carddisplay3pricecontainer-marketplace">
<p class="carddisplay3price-marketplace">Start From $50</p>
</div>
<div class="carddisplay3desccontainer-marketplace">
<p class="carddisplay3desc-marketplace">REGULAR FIT. Basic short sleeve T-shirt with a round neckline. Made of 100% cotton.</p>
</div>
<div class="carddisplay3footer-marketplace">
<a href="#" class="carddisplay3button-marketplace">Add to Cart</a>
</div>
</div>
</div>
</div>
6. Card promo medium
Pull Over Hoodies
Price $30
Card promo medium digunakan untuk menampilkan promo yang sedang berjalan da-lam website anda, hal ini dapat digunakan untuk produk berupa benda ataupun giveaway.
<div class="col-lg-3 col-md-4 col-sm-6 col-12">
<div class="cardpromomedium-marketplace shadow">
<div class="cardpromomediumbody-marketplace">
<div class="cardpromomediumimagecontainer-marketplace">
<img src="assets/images/cardpromomedium.png" alt="Card image cap" class="cardpromomediumimage-marketplace" alt="IMAGE">
</div>
<div style="margin-top: 4;">
<p class="cardpromomediumtitle-marketplace">Pull Over Hoodies</p>
</div>
<div class="cardpromomediumpricecontainer-marketplace">
<p class="cardpromomediumprice-marketplace">Price $30</p>
</div>
<div class="cardpromomediumimagepreviewselect-marketplace">
<span class="dot1 purple"></span>
<span class="dot1 red"></span>
<span class="dot1 black"></span>
<span class="dot1 cyan"></span>
<span class="dot1 orange"></span>
</div>
<div class="cardpromomediumfooter-marketplace">
<a href="#" class="cardpromomediumbutton-marketplace">Add to Cart</a>
</div>
</div>
</div>
</div>
7. Card promo small
Summer Outfit
star
4.0
Price $30
Card promo small memiliki fitur yang hampir sama dengan card promo medium, namun memiliki ukuran yang lebih kecil dan desain yang berbeda.
<div class="col-lg-3 col-md-4 col-sm-6 col-12">
<div class="cardpromosmall-marketplace shadow">
<div class="cardpromosmallbody-marketplace">
<div class="cardpromosmallimagecontainer-marketplace">
<img src="assets/images/cardpromosmall.png" alt="Card image cap" class="cardpromosmallimage-marketplace" alt="IMAGE">
</div>
<div class="cardpromosmallhead-marketplace">
<div class="cardpromosmallcol8-marketplace">
<p class="cardpromosmalltitle-marketplace">Summer Outfit</p>
</div>
<div class="cardpromosmallcol4-marketplace">
<span><i class="material-icons" style="font-size: 14px; vertical-align: -2; color:#FED568">star</i></span>
<span>4.0</span>
</div>
</div>
<div class="cardpromosmallpricecontainer-marketplace">
<p class="cardpromosmallprice-marketplace">Price $30</p>
</div>
<div class="cardpromosmallfooter-marketplace">
<div class="cardpromosmallcol9-marketplace">
<a href="#" class="cardpromosmallbutton1-marketplace">Details</a>
</div>
<div class="cardpromosmallcol3-marketplace">
<a href="#" class="cardpromosmallbutton2-marketplace">
<i class="material-icons-outlined" style="font-size: 18px; vertical-align: -2; color:white">shopping_cart</i>
</a>
</div>
</div>
</div>
</div>
</div>
8. Card promo large
Modern Wooden Condos
$154.00/night
Chack In Date
Chack Out Date
Guests
Card promo large dapat digunakan untuk membuat sistem booking yang terdapat dalam proyek pengembangan website anda.
<div class="col-lg-4 col-md-6 col-sm-10 col-12">
<div class="cardpromolarge-marketplace shadow">
<div class="cardpromolargebody-marketplace">
<div class="cardpromolargeimagecontainer-marketplace">
<img src="assets/images/cardpromolarge.png" alt="Card image cap" class="cardpromolargeimage-marketplace" alt="IMAGE">
</div>
<div class="cardpromolargetitlecontainer-marketplace">
<p class="cardpromolargetitle-marketplace">Modern Wooden Condos</p>
</div>
<div class="cardpromolargepricecontainer-marketplace">
<p class="cardpromolargeprice-marketplace">$154.00/night</p>
</div>
<div class="cardpromolargeratingcontainer-marketplace">
<span>4.0</span>
<span><i class="material-icons" style="font-size: 14px; vertical-align: -2; color:#FED568">star</i></span>
<span>500 Reviews</span>
</div>
<div class="cardpromolargedesccontainer-marketplace">
<div class="cardpromolargecol6_1-marketplace">
<p class="cardpromolargeinput-marketplace">Chack In Date</p>
<input type="date" id="birthday" name="birthday">
</div>
<div class="cardpromolargecol6_2-marketplace">
<p class="cardpromolargeinput-marketplace">Chack Out Date</p>
<input type="date" id="birthday" name="birthday">
</div>
<div class="cardpromolargecol12-marketplace">
<p class="cardpromolargeinput-marketplace">Guests</p>
<select class="cardpromolargeselect-marketplace">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
</div>
<div class="cardpromolargefooter-marketplace">
<a href="#" class="cardpromolargebutton-marketplace">Book Now</a>
</div>
</div>
</div>
</div>
9. Card item extra large
Due to high volume, delivery times may be a bit longer than normal. Please reference your expected delivery date in checkout.
IPhone 11 Pro
4.7/5Based on 100 ratings
star
star
star
star
star
Carrier
Storage
Color
Pricing Option
Card item extra large digunakan untuk menampilkan item yang dijual dalam website anda, dalam card ini terdapat juga fitur untuk melihat gambar dari item yang dijual tersebut, dengan meng-click thumbnail. Selain itu card ini juga dapat menampilkan opsi dari fitur produk itu sendiri.
<div class="col-lg-7 col-md-9 col-sm-10 col-12">
<div class="carditemextralarge-marketplace shadow">
<div class="carditemextralargebody-marketplace">
<div class="col-lg-6 col-md-12 col-sm-12 col-12">
<div class="carditemextralargeimagepreview-marketplace">
<img src="assets/images/iphone1.png" alt="Card image cap" class="carditemextralargeimagepreviewpic-marketplace" id="carditemextralargeimagepreviewmain-marketplace" alt="IMAGE">
</div>
<div class="carditemextralargeimagepreviewselect-marketplace">
<div class="carditemextralargeimagepreviewselectcontainer-marketplace col-3">
<img src="assets/images/iphone1.png" alt="Card image cap" class="carditemextralargeimagepreviewpic-marketplace" onclick="change(this.src)">
</div>
<div class="carditemextralargeimagepreviewselectcontainer-marketplace col-3">
<img src="assets/images/iphone2.png" alt="Card image cap" class="carditemextralargeimagepreviewpic-marketplace" onclick="change(this.src)">
</div>
<div class="carditemextralargeimagepreviewselectcontainer-marketplace col-3">
<img src="assets/images/iphone3.png" alt="Card image cap" class="carditemextralargeimagepreviewpic-marketplace" onclick="change(this.src)">
</div>
<div class="carditemextralargeimagepreviewselectcontainer-marketplace col-3">
<img src="assets/images/iphone4.png" alt="Card image cap" class="carditemextralargeimagepreviewpic-marketplace" onclick="change(this.src)">
</div>
</div>
<div>
<p class="carditemextralargealert-marketplace">Due to high volume, delivery times may be a bit longer than normal. Please reference your expected delivery date in checkout.</p>
</div>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 col-12">
<div class="dim12">
<p class="carditemextralargetitle-marketplace">IPhone 11 Pro</p>
</div>
<div class="carditemextralargeratevalue-marketplace">
<p class="carditemextralergenumbervalue-marketplace">4.7/5<span class="carditemextralargetextvalue-marketplace">Based on 100 ratings</span></p>
<div>
<span><i class="material-icons" style="font-size: 16px; vertical-align: -2; color:#FED568">star</i></span>
<span><i class="material-icons" style="font-size: 16px; vertical-align: -2; color:#FED568">star</i></span>
<span><i class="material-icons" style="font-size: 16px; vertical-align: -2; color:#FED568">star</i></span>
<span><i class="material-icons" style="font-size: 16px; vertical-align: -2; color:#FED568">star</i></span>
<span><i class="material-icons" style="font-size: 16px; vertical-align: -2; color:#E9EAEF">star</i></span>
</div>
</div>
<div class="carditemextralargecarrieroption-marketplace">
<p class="carditemextralargeoptiontitle-marketplace">Carrier</p>
<form class="carditemextralargecarriercontainer-marketplace">
<div class="carditemextralargecarrier-marketplace col-3">
<input type="radio" id="att" name="skills" value="Android Development">
<label for="att">AT&T</label>
</div>
<div class="carditemextralargecarrier-marketplace col-3">
<input type="radio" id="verizon" name="skills" value="iOS Development">
<label for="verizon">Verizon</label>
</div>
<div class="carditemextralargecarrier-marketplace col-3">
<input type="radio" id="tmobile" name="skills" value="iOS Development">
<label for="tmobile">T-Mobile</label>
</div>
<div class="carditemextralargecarrier-marketplace col-3">
<input type="radio" id="sprint" name="skills" value="iOS Development">
<label for="sprint">Sprint</label>
</div>
</form>
</div>
<div class="carditemextralargestorageoption-marketplace">
<p class="carditemextralargeoptiontitle-marketplace">Storage</p>
<form class="carditemextralargestoragecontainer-marketplace">
<div class="carditemextralargestorage-marketplace col-4">
<input type="radio" id="64GB" name="skills" value="Android Development">
<label for="64GB" class="carditemextralargeoptiontext-marketplace">64 GB</label>
</div>
<div class="carditemextralargestorage-marketplace col-4">
<input type="radio" id="256GB" name="skills" value="iOS Development">
<label for="256GB" class="carditemextralargeoptiontext-marketplace">256 GB</label>
</div>
<div class="carditemextralargestorage-marketplace col-4">
<input type="radio" id="512GB" name="skills" value="iOS Development">
<label for="512GB" class="carditemextralargeoptiontext-marketplace">512 GB</label>
</div>
</form>
</div>
<div class="carditemextralargecoloroption-marketplace">
<p class="carditemextralargeoptiontitle-marketplace">Color</p>
<form class="carditemextralargecolorcontainer-marketplace">
<div class="carditemextralargecolor-marketplace col-4">
<input type="radio" id="black" name="skills" value="Android Development">
<label for="black" class="carditemextralargeoptiontext-marketplace">
<div><img src="assets/images/blackiphone.png"></div>
Black
</label>
</div>
<div class="carditemextralargecolor-marketplace col-4">
<input type="radio" id="white" name="skills" value="iOS Development">
<label for="white" class="carditemextralargeoptiontext-marketplace">
<div><img src="assets/images/blackiphone.png"></div>
White
</label>
</div>
<div class="carditemextralargecolor-marketplace col-4">
<input type="radio" id="red" name="skills" value="iOS Development">
<label for="red" class="carditemextralargeoptiontext-marketplace">
<div><img src="assets/images/blackiphone.png"></div>
Red
</label>
</div>
</form>
</div>
<div class="carditemextralargepriceoption-marketplace">
<p class="carditemextralargeoptiontitle-marketplace">Pricing Option</p>
<form class="carditemextralargepricecontainer-marketplace">
<div class="carditemextralargeprice-marketplace col-12">
<input type="radio" id="40" name="skills" value="Android Development">
<label for="40" class="carditemextralargeoptiontext-marketplace">
<p class="carditemextralargepricevalue-marketplace">$40/mo</p>
<p class="carditemextralargeoptiontext-marketplace">30 months with AT&T Installment Plan</p>
</label>
</div>
<div class="carditemextralargeprice-marketplace col-12">
<input type="radio" id="999" name="skills" value="iOS Development">
<label for="999" class="carditemextralargeoptiontext-marketplace">
<p class="carditemextralargepricevalue-marketplace">$999/mo</p>
<p class="carditemextralargeoptiontext-marketplace">one time payment</p>
</label>
</div>
</form>
</div>
<div class="carditemextralargefooter-marketplace">
<a href="#" class="carditemextralargebutton-marketplace">Add to Cart</a>
</div>
</div>
</div>
</div>
</div>
10. Card item large
Street & Steel Kickstarter Riding Shoes
star
star
star
star
star
500 Reviews
$99.00
REGULAR FIT. Basic short sleeve T-shirt with a round neckline. Made of 100% cotton.
Color
Qty
Size
Due to high volume, delivery times may be a bit longer than normal. Please reference your expected delivery date in checkout.
Card item large memiliki fitur yang hampir sama dengan card item extra large, na-mun memiliki ukuran yang lebih kecil dan desain yang sedikit berbeda.
<div class="col-lg-7 col-md-9 col-sm-10 col-12">
<div class="carditemlarge-marketplace shadow">
<div class="carditemlargebody-marketplace">
<div class="col-lg-6 col-md-12 col-sm-12 col-12">
<div class="carditemlargeimagepreview-marketplace">
<img src="assets/images/shoe1.png" alt="Card image cap" class="carditemlargeimagepreviewpic-marketplace" id="carditemlargeimagepreviewmain-marketplace" alt="IMAGE">
</div>
<div class="carditemlargeimagepreviewselect-marketplace">
<div class="carditemlargeimagepreviewselectcontainer-marketplace col-3">
<img src="assets/images/shoe1.png" alt="Card image cap" class="carditemlargeimagepreviewpic-marketplace" onclick="change(this.src)">
</div>
<div class="carditemlargeimagepreviewselectcontainer-marketplace col-3">
<img src="assets/images/shoe2.png" alt="Card image cap" class="carditemlargeimagepreviewpic-marketplace" onclick="change(this.src)">
</div>
<div class="carditemlargeimagepreviewselectcontainer-marketplace col-3">
<img src="assets/images/shoe3.png" alt="Card image cap" class="carditemlargeimagepreviewpic-marketplace" onclick="change(this.src)">
</div>
<div class="carditemlargeimagepreviewselectcontainer-marketplace col-3">
<img src="assets/images/shoe4.png" alt="Card image cap" class="carditemlargeimagepreviewpic-marketplace" onclick="change(this.src)">
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 col-12">
<div class="carditemlargetitlecontainer-marketplace">
<p class="carditemlargetitle-marketplace">Street & Steel Kickstarter Riding Shoes</p>
</div>
<div class="carditemlargeratevalue-marketplace">
<span><i class="material-icons" style="font-size: 14px; vertical-align: -2; color:#FED568">star</i></span>
<span><i class="material-icons" style="font-size: 14px; vertical-align: -2; color:#FED568">star</i></span>
<span><i class="material-icons" style="font-size: 14px; vertical-align: -2; color:#FED568">star</i></span>
<span><i class="material-icons" style="font-size: 14px; vertical-align: -2; color:#FED568">star</i></span>
<span><i class="material-icons" style="font-size: 14px; vertical-align: -2; color:#FED568">star</i></span>
<span>500 Reviews</span>
</div>
<div class="carditemlargepricecontainer-marketplace">
<p class="carditemlargeprice-marketplace">$99.00</p>
</div>
<div class="carditemlargedesccontainer-marketplace">
<p class="carditemlargedesc-marketplace">REGULAR FIT. Basic short sleeve T-shirt with a round neckline. Made of 100% cotton.</p>
</div>
<div class="carditemlargecoloroption-marketplace col-6">
<p class="carditemlargeoptiontitle-marketplace">Color</p>
<form class="carditemlargecolorcontainer-marketplace">
<div class="carditemlargecolor-marketplace col-6">
<input type="radio" id="black-shoe" name="skills" value="Android Development">
<label for="black-shoe" class="carditemlargeoptiontext-marketplace">Black</label>
</div>
<div class="carditemlargecolor-marketplace col-6">
<input type="radio" id="Grey-shoe" name="skills" value="iOS Development">
<label for="Grey-shoe" class="carditemlargeoptiontext-marketplace">Grey</label>
</div>
</form>
</div>
<div class="carditemlargeqtyoption-marketplace col-6">
<p class="carditemlargeoptiontitle-marketplace">Qty</p>
<div class="carditemlargeqtyselectcontainer-marketplace">
<select class="carditemlargeqtyselect-marketplace">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
</div>
<div class="carditemlargesizeoption-marketplace">
<p class="carditemlargeoptiontitle-marketplace">Size</p>
<form class="carditemlargesizecontainer-marketplace">
<div class="carditemlargesize-marketplace col-3">
<input type="radio" id="8US" name="skills" value="Android Development">
<label for="8US" class="carditemlargeoptiontext-marketplace">8 US</label>
</div>
<div class="carditemlargesize-marketplace col-3">
<input type="radio" id="9US" name="skills" value="iOS Development">
<label for="9US" class="carditemlargeoptiontext-marketplace">9 US</label>
</div>
<div class="carditemlargesize-marketplace col-3">
<input type="radio" id="10US" name="skills" value="iOS Development">
<label for="10US" class="carditemlargeoptiontext-marketplace">10 US</label>
</div>
<div class="carditemlargesize-marketplace col-3">
<input type="radio" id="11US" name="skills" value="iOS Development">
<label for="11US" class="carditemlargeoptiontext-marketplace">11 US</label>
</div>
</form>
</div>
<div class="carditemlargealertcontainer-marketplace">
<p class="carditemlargealert-marketplace">Due to high volume, delivery times may be a bit longer than normal. Please reference your expected delivery date in checkout.</p>
</div>
<div class="carditemlargefooter-marketplace">
<div class="carditemlargebutton1container-marketplace col-7">
<a href="#" class="carditemlargebutton1-marketplace">Add to Compare</a>
</div>
<div class="carditemlargebutton2container-marketplace col-5">
<a href="#" class="carditemlargebutton2-marketplace">Add to Cart</a>
</div>
</div>
</div>
</div>
</div>
</div>
Made On Earth By Human. All rights reserved © 2022.
Danny Alves
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Read More…
Danny Alves
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Read More…
Danny Alves
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Read More…