Test3: Difference between revisions

From Now That's What I Call Music Wiki
No edit summary
No edit summary
 
(243 intermediate revisions by the same user not shown)
Line 1: Line 1:
<html>
<div class="container"><div class="row row-cols-sm-4">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="col-xs-2 mb-4">
 
<div class="card h-100 d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle; background: linear-gradient(0deg, rgba(255,0,0,1) 0%, rgba(168,28,28,1) 100%); ">
<style>
<div class="card-body d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle;">
.nav-tabs .nav-link {
[[File:Now-numbered-button.png|link=Main Series]]
    margin-left: 2px;
</div></div></div>
    margin-right: 2px;
<div class="col-xs-2 mb-4">
    background: #54B4D3;
<div class="card h-100 d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle; background: linear-gradient(0deg, rgba(255,165,0,1) 0%, rgba(168,115,16,1) 100%); ">
    color: #ffffff;
<div class="card-body d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle;">
    border: 0;
[[File:Now-80s-dancefloor-button.png|link=Now 80s Dancefloor]]
    border-bottom: 1px solid grey;
</div></div></div>
}
<div class="col-xs-2 mb-4">
 
<div class="card h-100 d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle; background: linear-gradient(0deg, rgba(255,255,0,1) 0%, rgba(151,151,30,1) 100%); ">
.nav-tabs .nav-link:hover {
<div class="card-body d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle;">
    margin-left: 2px;
[[File:Now-yearbooks-button.png|link=Now Yearbooks]]
    margin-right: 2px;
</div></div></div>
    background: #ffffff;
<div class="col-xs-2 mb-4">
    color: #54B4D3;
<div class="card h-100 d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle; background: linear-gradient(0deg, rgba(148,255,0,1) 0%, rgba(2,198,73,1) 100%); ">
    border: 0;
<div class="card-body d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle;">
    border-bottom: 1px solid grey;
[[File:Now-millennium-button.png|link=Now Millennium]]
}
</div></div></div>
 
<div class="col-xs-2 mb-4">
.nav-tabs .nav-link.active {
<div class="card h-100 d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle; background: linear-gradient(0deg, rgba(0,174,255,1) 0%, rgba(0,0,255,1) 100%); ">
    margin-left: 2px;
<div class="card-body d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle;">
    margin-right: 2px;
[[File:Now-presents-button.png|link=Now Presents]]
    color: #ffffff;
</div></div></div>
    background: #DC4C64;
<div class="col-xs-2 mb-4">
    border: 0;
<div class="card h-100 d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle; background: linear-gradient(0deg, rgba(179,113,227,1) 0%, rgba(75,0,130,1) 100%); ">
    border-radius: 0;
<div class="card-body d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle;">
    border-bottom: 2px solid blue;
[[File:Now-12-80s-button.png|link=Now 12" 80s]]
}
</div></div></div>
</style>
<div class="col-xs-2 mb-4">
 
<div class="card h-100 d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle; background: linear-gradient(0deg, rgba(255,60,219,1) 0%, rgba(130,0,106,1) 100%); ">
<ul class="nav nav-pills" id="myTab" role="tablist">
<div class="card-body d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle;">
    <li class="nav-item">
[[File:Now-100-hits-button.png|link=100 Hits]]
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
</div></div></div>
        aria-selected="true">Home</a>
<div class="col-xs-2 mb-4">
    </li>
<div class="card h-100 d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle; background: linear-gradient(0deg, rgba(224,192,138,1) 0%, rgba(98,78,47,1) 100%); ">
    <li class="nav-item">
<div class="card-body d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle;">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#menu2" role="tab" aria-controls="menu2"
[[File:Now-dance-button.png|link=Dance Series]]
        aria-selected="false">Menu 2</a>
</div></div></div>
    </li>
</div></div>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#menu3" role="tab" aria-controls="menu3"
        aria-selected="false">Menu 3</a>
    </li>
</ul>
<div class="tab-content">
  <div id="home" class="tab-pane active in">
</html>
 
 
Some content will go here 1.<html>
  </div>
  <div id="menu2" class="tab-pane fade">
</html>
 
 
Some content will go here 2.<html>
  </div>
  <div id="menu3" class="tab-pane fade">
</html>
 
 
Some content will go here 3.<html>
  </div>
</div>
 
 
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</html>

Latest revision as of 16:19, 14 November 2024

Now-numbered-button.png

Now-80s-dancefloor-button.png

Now-yearbooks-button.png

Now-millennium-button.png

Now-presents-button.png

Now-12-80s-button.png

Now-100-hits-button.png

Now-dance-button.png

Retrieved from ‘https://nowmusicwiki.com/index.php?title=Test3&oldid=53111’