Test3: Difference between revisions

From Now That's What I Call Music Wiki
No edit summary
No edit summary
 
(64 intermediate revisions by the same user not shown)
Line 1: Line 1:
<html>
<div class="container"><div class="row row-cols-sm-4">
.dropdown-menu li {
<div class="col-xs-2 mb-4">
position: relative;
<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%); ">
}
<div class="card-body d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle;">
.dropdown-menu .dropdown-submenu {
[[File:Now-numbered-button.png|link=Main Series]]
display: none;
</div></div></div>
position: absolute;
<div class="col-xs-2 mb-4">
left: 100%;
<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%); ">
top: -7px;
<div class="card-body d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle;">
}
[[File:Now-80s-dancefloor-button.png|link=Now 80s Dancefloor]]
.dropdown-menu .dropdown-submenu-left {
</div></div></div>
right: 100%;
<div class="col-xs-2 mb-4">
left: auto;
<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%); ">
}
<div class="card-body d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle;">
.dropdown-menu > li:hover > .dropdown-submenu {
[[File:Now-yearbooks-button.png|link=Now Yearbooks]]
display: block;
</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(148,255,0,1) 0%, rgba(2,198,73,1) 100%); ">
<div class="dropdown">
<div class="card-body d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle;">
  <button data-mdb-button-init data-mdb-ripple-init data-mdb-dropdown-init
[[File:Now-millennium-button.png|link=Now Millennium]]
    class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton"
</div></div></div>
    data-mdb-toggle="dropdown" aria-expanded="false">
<div class="col-xs-2 mb-4">
    Dropdown button
<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%); ">
  </button>
<div class="card-body d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle;">
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
[[File:Now-presents-button.png|link=Now Presents]]
    <li><a class="dropdown-item" href="#">Action</a></li>
</div></div></div>
    <li>
<div class="col-xs-2 mb-4">
      <a class="dropdown-item" href="#">Another action</a>
<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%); ">
    </li>
<div class="card-body d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle;">
    <li>
[[File:Now-12-80s-button.png|link=Now 12" 80s]]
      <a class="dropdown-item" href="#">
</div></div></div>
        Submenu &raquo;
<div class="col-xs-2 mb-4">
      </a>
<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="dropdown-menu dropdown-submenu">
<div class="card-body d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle;">
        <li>
[[File:Now-100-hits-button.png|link=100 Hits]]
          <a class="dropdown-item" href="#">Submenu item 1</a>
</div></div></div>
        </li>
<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%); ">
          <a class="dropdown-item" href="#">Submenu item 2</a>
<div class="card-body d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle;">
        </li>
[[File:Now-dance-button.png|link=Dance Series]]
        <li>
</div></div></div>
          <a class="dropdown-item" href="#">Submenu item 3 &raquo; </a>
</div></div>
          <ul class="dropdown-menu dropdown-submenu">
            <li>
              <a class="dropdown-item" href="#">Multi level 1</a>
            </li>
            <li>
              <a class="dropdown-item" href="#">Multi level 2</a>
            </li>
          </ul>
        </li>
        <li>
          <a class="dropdown-item" href="#">Submenu item 4</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">Submenu item 5</a>
        </li>
      </ul>
    </li>
  </ul>
</div></html>
 
 
 
Create a template for the containers!
 
<html>
<div class="container">
<div class="row row-cols-6">
<div class="col mb-4"><btn size="lg">Large Button</btn></div>
</div>
</div>
</html>
 
<btn>
Main Series|Now Main Numbered Series|btn-primary
Now Yearbooks||btn-success .text-white
Now 12" 80s||btn-secondary .text-white
Now Dance||btn-danger
Now 80s Dancefloor||btn-warning
Now Presents||btn-info
Now Anniversary||btn-light
Now Millennium||btn-dark
The Millennium Series (1999)||btn-muted
Christmas||btn-white
</btn>
 
 
 
<html>
<div class="container">
<div class="row row-cols-6">
<div class="col mb-4"><div class="card h-100 bg-primary text-white" style="margin:10px; text-align: center;"></html><big>[[Main Series|<span style="color:#ffffff">Now Main Numbered Series</span>]]</big><html></div></div>
<div class="col mb-4"><div class="card h-100 bg-success text-white" style="margin:10px; text-align: center; valign: middle;"></html><big>[[Now Yearbooks|<span style="color:#ffffff">Now Yearbooks</span>]]</big><html></div></div>
<div class="col mb-4"><div class="card h-100 bg-secondary text-white" style="margin:10px; text-align: center;"></html><big>[[Main Series|<span style="color:#ffffff">Main Numbered Series</span>]]</big><html></div></div>
<div class="col mb-4"><div class="card h-100 bg-danger text-white" style="margin:10px; text-align: center;"></html><big>[[Main Series|<span style="color:#ffffff">Main Numbered Series</span>]]</big><html></div></div>
<div class="col mb-4"><div class="card h-100 bg-warning text-dark" style="margin:10px; text-align: center;"></html><big>[[Main Series|<span style="color:#ffffff">Main Numbered Series</span>]]</big><html></div></div>
<div class="col mb-4"><div class="card h-100 bg-info text-white" style="margin:10px; text-align: center;"></html><big>[[Main Series|<span style="color:#ffffff">Main Numbered Series</span>]]</big><html></div></div>
<div class="col mb-4"><div class="card h-100 bg-light text-dark" style="margin:10px; text-align: center;"></html><big>[[Main Series|<span style="color:#ffffff">Main Numbered Series</span>]]</big><html></div></div>
<div class="col mb-4"><div class="card h-100 bg-dark text-white" style="margin:10px; text-align: center;"></html><big>[[Main Series|<span style="color:#ffffff">Main Numbered Series</span>]]</big><html></div></div>
<div class="col mb-4"><div class="card h-100 bg-white text-dark" style="margin:10px; text-align: center;"></html><big>[[Main Series|<span style="color:#ffffff">Main Numbered Series</span>]]</big><html></div></div>
</div>
</div>
</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’