|
|
(163 intermediate revisions by the same user not shown) |
Line 1: |
Line 1: |
| <html><div class="container px-lg-5"> | | <div class="container"><div class="row row-cols-sm-4"> |
| <div class="row row-cols-md-4 mx-lg-n5">
| | <div class="col-xs-2 mb-4"> |
| <div class="col"><div class="card h-100" style="margin:10px;"></html>[[File:Now 119.jpg]]<html>
| | <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"> | | <div class="card-body d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle;"> |
| <p class="text-dark"></html>'''Now That's What I Call Music! 119'''<html><p> | | [[File:Now-numbered-button.png|link=Main Series]] |
| <p class="text-success"></html>'''Release Date: November 15, 2024'''<html></p> | | </div></div></div> |
| <a href="#" class="btn btn-primary">Go somewhere</a> | | <div class="col-xs-2 mb-4"> |
| </div> | | <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%); "> |
| | <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]] |
| | </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%); "> |
| | <div class="card-body d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle;"> |
| | [[File:Now-yearbooks-button.png|link=Now Yearbooks]] |
| | </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="card-body d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle;"> |
| | [[File:Now-millennium-button.png|link=Now Millennium]] |
| | </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(0,174,255,1) 0%, rgba(0,0,255,1) 100%); "> |
| | <div class="card-body d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle;"> |
| | [[File:Now-presents-button.png|link=Now Presents]] |
| | </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(179,113,227,1) 0%, rgba(75,0,130,1) 100%); "> |
| | <div class="card-body d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle;"> |
| | [[File:Now-12-80s-button.png|link=Now 12" 80s]] |
| | </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,60,219,1) 0%, rgba(130,0,106,1) 100%); "> |
| | <div class="card-body d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle;"> |
| | [[File:Now-100-hits-button.png|link=100 Hits]] |
| | </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(224,192,138,1) 0%, rgba(98,78,47,1) 100%); "> |
| | <div class="card-body d-flex align-items-center" style="margin:10px; padding:5px; text-align: center; valign: middle;"> |
| | [[File:Now-dance-button.png|link=Dance Series]] |
| | </div></div></div> |
| </div></div> | | </div></div> |
| <div class="col"><div class="card h-100" style="margin:10px;"></html>[[File:Now 119.jpg]]<html>
| |
| <div class="card-body">
| |
| <p class="text-dark"></html>'''Now That's What I Call Music! 119'''<html><p>
| |
| <p class="text-success"></html>'''Release Date: November 15, 2024'''
| |
|
| |
| What happens here?
| |
| <html></p>
| |
| <a href="#" class="btn btn-primary">Go somewhere</a>
| |
| </div>
| |
| </div></div>
| |
| <div class="col"><div class="card h-100" style="margin:10px;"></html>[[File:Now 119.jpg]]<html>
| |
| <div class="card-body">
| |
| <p class="text-dark"></html>'''Now That's What I Call Music! 119'''<html><p>
| |
| <p class="text-success"></html>'''Release Date: November 15, 2024'''<html></p>
| |
| <a href="#" class="btn btn-primary">Go somewhere</a>
| |
| </div>
| |
| </div></div>
| |
| <div class="col"><div class="card h-100" style="margin:10px;"></html>[[File:Now 119.jpg]]<html>
| |
| <div class="card-body">
| |
| <p class="text-dark"></html>'''Now That's What I Call Music! 119'''<html><p>
| |
| <p class="text-success"></html>'''Release Date: November 15, 2024'''<html></p>
| |
| <a href="#" class="btn btn-primary">Go somewhere</a>
| |
| </div>
| |
| </div></div>
| |
| <div class="col"><div class="card h-100" style="margin:10px;"></html>[[File:Now 119.jpg]]<html>
| |
| <div class="card-body">
| |
| <p class="text-dark"></html>'''Now That's What I Call Music! 119'''<html><p>
| |
| <p class="text-success"></html>'''Release Date: November 15, 2024'''<html></p>
| |
| <a href="#" class="btn btn-primary">Go somewhere</a>
| |
| </div>
| |
| </div></div>
| |
| <div class="col"><div class="card h-100" style="margin:10px;"></html>[[File:Now 119.jpg]]<html>
| |
| <div class="card-body">
| |
| <p class="text-dark"></html>'''Now That's What I Call Music! 119'''<html><p>
| |
| <p class="text-success"></html>'''Release Date: November 15, 2024'''<html></p>
| |
| <a href="#" class="btn btn-primary">Go somewhere</a>
| |
| </div>
| |
| </div></div>
| |
| <div class="col"><div class="card h-100" style="margin:10px;"></html>[[File:Now 119.jpg]]<html>
| |
| <div class="card-body">
| |
| <p class="text-dark"></html>'''Now That's What I Call Music! 119'''<html><p>
| |
| <p class="text-success"></html>'''Release Date: November 15, 2024'''<html></p>
| |
| <a href="#" class="btn btn-primary">Go somewhere</a>
| |
| </div>
| |
| </div></div>
| |
| </div>
| |
| </div></html>
| |
|
| |
|
| |
| <html><div class="container">
| |
| <div class="row">
| |
| <div class="col-md-3"><div class="card"></html>[[File:Now 119.jpg]]<html>
| |
| <div class="card-body">
| |
| <p class="text-dark"></html>'''Now That's What I Call Music! 119'''<html><p>
| |
| <p class="text-success"></html>'''Release Date: November 15, 2024'''<html></p>
| |
| <a href="#" class="btn btn-primary">Go somewhere</a>
| |
| </div>
| |
| </div></div>
| |
| <div class="col-md-3"><div class="card"></html>[[File:Now 119.jpg]]<html>
| |
| <div class="card-body">
| |
| <p class="text-dark"></html>'''Now That's What I Call Music! 119'''<html><p>
| |
| <p class="text-success"></html>'''Release Date: November 15, 2024'''<html></p>
| |
| <a href="#" class="btn btn-primary">Go somewhere</a>
| |
| </div>
| |
| </div></div>
| |
| <div class="col-md-3">col-8</div>
| |
| <div class="col-md-3">col-8</div>
| |
| </div>
| |
| </div>
| |
| </html>
| |
|
| |
|
| |
|
| |
| <html><div class="card"></html>[[File:Now 119.jpg]]<html>
| |
| <div class="card-body">
| |
| <p class="text-dark"></html>'''Now That's What I Call Music! 119'''<html><p>
| |
| <p class="text-success"></html>'''Release Date: November 15, 2024'''<html></p>
| |
| <a href="#" class="btn btn-primary">Go somewhere</a>
| |
| </div>
| |
| </div>
| |
| </html>
| |
| </br></br>
| |
| <div class="container">
| |
| <div class="row">
| |
| <div class="col-3">[[File:Now 119.jpg]]</div>
| |
| <div class="col-9"><h2>Now That's What I Call Music! 119</h2>
| |
| <p class="text-success">'''Release Date: November 15, 2024'''</p>
| |
|
| |
|
| |
|
| |
| Purchase button
| |
|
| |
| </div>
| |
| </div>
| |
| </div>
| |
|
| |
|
| |
|
| |
| <html>
| |
| <div class="row mb-2">
| |
| <div class="col-md-6">
| |
| <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-md h-md-250 position-relative">
| |
| <div class="col p-4 d-flex flex-column position-static">
| |
| <strong class="d-inline-block mb-2 text-primary">World</strong>
| |
| <h3 class="mb-0">Featured post</h3>
| |
| <div class="mb-1 text-muted">Nov 12</div>
| |
| <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
| |
| <a href="#" class="stretched-link">Continue reading</a>
| |
| </div>
| |
| <div class="col-auto d-none d-lg-block"></html>
| |
| [[File:Now massive 70s party.jpg]]<html>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <div class="col-md-6">
| |
| <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-md h-md-250 position-relative">
| |
| <div class="col p-4 d-flex flex-column position-static">
| |
| <strong class="d-inline-block mb-2 text-success">Design</strong>
| |
| <h3 class="mb-0">Post title</h3>
| |
| <div class="mb-1 text-muted">Nov 11</div>
| |
| <p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
| |
| <a href="#" class="stretched-link">Continue reading</a>
| |
| </div>
| |
| <div class="col-auto d-none d-lg-block">
| |
| <svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </html>
| |