Skip to content

Instantly share code, notes, and snippets.

@danielflippance

danielflippance/marketspace-tabbed-banners.html

Created December 30, 2020 21:03
Show Gist options
  • Save danielflippance/0636a77bc9233063dfa29cf44ee1ca6f to your computer and use it in GitHub Desktop.
Save danielflippance/0636a77bc9233063dfa29cf44ee1ca6f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
marketspace-tabbed-banners.html
<div>
<!-- Tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#pane1" data-toggle="tab">Tab 1</a></li>
<li class=""><a href="#pane2" data-toggle="tab">Tab 2</a></li>
<li class=""><a href="#pane3" data-toggle="tab">Tab 3</a></li>
</ul>
<!-- Tab1 Content -->
<div class="tab-content">
<div id="pane1" class="tab-pane active">
<div class="row custom-tiles">
<div class="col-xs-12 col-sm-4">
<div class="custom-tile height-7x6"
style="background-image: url('https://s3.amazonaws.com/marketspace/uploaded/shop-backgrounds/58_1200x1200.jpg?1600453716280');">
<div class="tile-name">Tile Name</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="custom-tile height-7x6"
style="background-image: url('https://s3.amazonaws.com/marketspace/uploaded/shop-backgrounds/58_1200x1200.jpg?1600453716280');">
<div class="tile-name">Tile Name</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="custom-tile height-7x6"
style="background-image: url('https://s3.amazonaws.com/marketspace/uploaded/shop-backgrounds/58_1200x1200.jpg?1600453716280');">
<div class="tile-name">Tile Name</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="custom-tile height-7x6"
style="background-image: url('https://s3.amazonaws.com/marketspace/uploaded/shop-backgrounds/58_1200x1200.jpg?1600453716280');">
<div class="tile-name">Tile Name</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="custom-tile height-7x6"
style="background-image: url('https://s3.amazonaws.com/marketspace/uploaded/shop-backgrounds/58_1200x1200.jpg?1600453716280');">
<div class="tile-name">Tile Name</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="custom-tile height-7x6"
style="background-image: url('https://s3.amazonaws.com/marketspace/uploaded/shop-backgrounds/58_1200x1200.jpg?1600453716280');">
<div class="tile-name">Tile Name</div>
</div>
</div>
</div>
</div>
<!-- Tab2 Content -->
<div id="pane2" class="tab-pane">
<div class="row custom-tiles">
<div class="col-xs-12 col-sm-4">
<div class="custom-tile height-7x6"
style="background-image: url('https://s3.amazonaws.com/marketspace/uploaded/products/243-1551142869065_220x220.jpg?1600453716372');">
<div class="tile-name">Tile Name</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="custom-tile height-7x6"
style="background-image: url('https://s3.amazonaws.com/marketspace/uploaded/products/243-1551142869065_220x220.jpg?1600453716372');">
<div class="tile-name">Tile Name</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="custom-tile height-7x6"
style="background-image: url('https://s3.amazonaws.com/marketspace/uploaded/products/243-1551142869065_220x220.jpg?1600453716372');">
<div class="tile-name">Tile Name</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="custom-tile height-7x6"
style="background-image: url('https://s3.amazonaws.com/marketspace/uploaded/products/243-1551142869065_220x220.jpg?1600453716372');">
<div class="tile-name">Tile Name</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="custom-tile height-7x6"
style="background-image: url('https://s3.amazonaws.com/marketspace/uploaded/products/243-1551142869065_220x220.jpg?1600453716372');">
<div class="tile-name">Tile Name</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="custom-tile height-7x6"
style="background-image: url('https://s3.amazonaws.com/marketspace/uploaded/products/243-1551142869065_220x220.jpg?1600453716372');">
<div class="tile-name">Tile Name</div>
</div>
</div>
</div>
</div>
<!-- Tab3 Content -->
<div id="pane3" class="tab-pane">
<div class="row custom-tiles">
<div class="col-xs-12 col-sm-4">
<div class="custom-tile height-7x6"
style="background-image: url('https://s3.amazonaws.com/marketspace/uploaded/products/4792-1600683781610_220x220.jpg?1600684638542');">
<div class="tile-name">Tile Name</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="custom-tile height-7x6"
style="background-image: url('https://s3.amazonaws.com/marketspace/uploaded/products/4792-1600683781610_220x220.jpg?1600684638542');">
<div class="tile-name">Tile Name</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="custom-tile height-7x6"
style="background-image: url('https://s3.amazonaws.com/marketspace/uploaded/products/4792-1600683781610_220x220.jpg?1600684638542');">
<div class="tile-name">Tile Name</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="custom-tile height-7x6"
style="background-image: url('https://s3.amazonaws.com/marketspace/uploaded/products/4792-1600683781610_220x220.jpg?1600684638542');">
<div class="tile-name">Tile Name</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="custom-tile height-7x6"
style="background-image: url('https://s3.amazonaws.com/marketspace/uploaded/products/4792-1600683781610_220x220.jpg?1600684638542');">
<div class="tile-name">Tile Name</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="custom-tile height-7x6"
style="background-image: url('https://s3.amazonaws.com/marketspace/uploaded/products/4792-1600683781610_220x220.jpg?1600684638542');">
<div class="tile-name">Tile Name</div>
</div>
</div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment