Test2: Difference between revisions

From Now That's What I Call Music Wiki
No edit summary
Tag: Reverted
(Undo revision 52303 by Admin (talk))
Tag: Undo
Line 1: Line 1:
<html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Unique Page</title>
        <style>
            /* Styles specific to this page */
            body {
                background-color: lightblue;
            }
            h1 {
                color: darkblue;
            }
        </style>
    </head>
    <body>
        <h1>Welcome to the Unique Page</h1>
    </body>
</html>
==Picture one==
<div class="container">
<div class="container">
   <div class="row">
   <div class="row">
Line 35: Line 54:
</div>
</div>


<ul class="nav nav-pills" id="myTab" role="tablist">
==Image Grid==
     <li class="nav-item">
 
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#Side1" role="tab" aria-controls="Side1"
<div class="container">
        aria-selected="true">Side 1</a>
  <div class="row">
     </li>
    <div class="col">
    <li class="nav-item">
[[File:100 Hits from 100 Nows.jpg|200px]]
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#Side2" role="tab" aria-controls="Side2"
    </div>
        aria-selected="false">Side 2</a>
     <div class="col">
     </li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate, lacus at sollicitudin volutpat, lacus mauris ornare purus, sit amet iaculis mi lorem quis lorem. Suspendisse iaculis libero posuere commodo semper. Vivamus tincidunt suscipit orci, ac malesuada arcu efficitur vitae. Mauris molestie massa tortor, ac maximus erat tincidunt feugiat. Mauris nec mauris tortor. Vivamus accumsan pretium quam, ac malesuada arcu feugiat non. Pellentesque ut urna quam. Maecenas quis ipsum ac ex ultrices suscipit sit amet ut leo. In cursus porttitor ullamcorper.
    <li class="nav-item">
 
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#Side3" role="tab" aria-controls="Side3"
Vestibulum et massa commodo, venenatis odio ut, venenatis est. Vivamus congue imperdiet leo, et lacinia magna consectetur eget. Sed et risus neque. Vestibulum scelerisque nisl id placerat congue. Maecenas lobortis dictum mi. Nam varius varius elit, in pellentesque purus finibus ut. Donec ac blandit erat. Donec vitae velit ut tellus ullamcorper tincidunt id vitae turpis. Nullam interdum consequat purus.
        aria-selected="false">Side 3</a>
 
     </li>
In et massa vel leo bibendum pulvinar. Curabitur eget metus placerat, pulvinar mi et, euismod velit. Curabitur orci urna, sodales sed nunc sollicitudin, convallis consectetur nisl. Sed lacinia est sit amet nibh ornare consequat. Curabitur ac quam sit amet nisi euismod ornare. Quisque luctus ac libero eget pretium. Donec facilisis tincidunt aliquet. In congue mi nisl, in dignissim sem euismod et. Mauris arcu ipsum, commodo ut metus eget, hendrerit sagittis urna. Phasellus in tellus dui. Vivamus eget convallis ex. Proin consectetur, enim non facilisis aliquet, nulla quam elementum mi, ultrices faucibus tellus dolor et nisi. Aliquam nec odio eget risus porta egestas.
</ul>
    </div>
<div class="tab-content">
  </div>
  <div id="Side1" class="tab-pane active in"></html>
</div>
{{Album Side Tracks
 
|Track Album=Now That's What I Call Music! 27 (UK 1994 CD)
==Jumbotron==
|Track Side Identifier=1}}<html>
 
<bootstrap_jumbotron style="border:2px solid #999;" class="bootstrap-jumbotron-example"><big>
= Jumbotron title =
Jumbotrons are flexible elements used for calling extra attention to featured content or information.</big>
 
{{#bootstrap_button: Main Page | text=Learn more! | color=info }}
</bootstrap_jumbotron>
 
==Accordion==
 
<bootstrap_accordion>
<bootstrap_card header="Lorem ipsum 1" style="width: 100%;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</bootstrap_card>
<bootstrap_card header="Lorem ipsum 2" style="width: 100%;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</bootstrap_card>
</bootstrap_accordion>
 
==Card Deck==
<div class="card-deck">
  <div class="card bg-warning">
    <div class="card-header">'''<big>Albums</big>'''</div>
    <div class="card-body  bg-white">
      <p class="card-text">{{PAGESINCATEGORY:Album}}</p>
     </div>
  </div>
  <div class="card bg-danger">
    <div class="card-header">'''<big>Songs</big>'''</div>
    <div class="card-body bg-white">
      <p class="card-text">{{PAGESINCATEGORY:Song}}</p>
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-header">'''<big>Artists</big>'''</div>
    <div class="card-body bg-white">
      <p class="card-text">{{PAGESINCATEGORY:Artist}}</p>
     </div>
  </div>
</div>
 
==Button==
 
{{#bootstrap_button: Chameleon | color=primary}}
{{#bootstrap_button: Medik | color=secondary | text=Medik Skin }}
{{#bootstrap_button: Tweeki | color=info | text=Tweeki Skin }}
 
 
<html><a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset"></html>
 
==Card Deck 2==
 
 
<div class="card-deck">
  <div class="card">
     <div class="card-header">
<big>'''Lorem ipsum'''</big>
    </div>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      </p>
      <p class="card-text">
<small class="text-muted">[[Lorem ipsum|Lorem ipsum...]]</small>
      </p>
    </div>
   </div>
   </div>
   <div id="Side2" class="tab-pane fade">
   <div class="card">
</html>
    <div class="card-header">
{{Album Side Tracks
<big>'''Lorem ipsum'''</big>
|Track Album=Now That's What I Call Music! 27 (UK 1994 CD)
    </div>
|Track Side Identifier=2}}<html>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      </p>
      <p class="card-text">
<small class="text-muted">[[Lorem ipsum|Lorem ipsum...]]</small>
      </p>
    </div>
   </div>
   </div>
   <div id="Side3" class="tab-pane fade">
   <div class="card">
</html>
    <div class="card-header">
{{Album Side Tracks
<big>'''Lorem ipsum and a bit more text to see what happens with this'''</big>
|Track Album=Now That's What I Call Music! 27 (UK 1994 CD)
    </div>
|Track Side Identifier=3}}<html>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      </p>
      <p class="card-text">
<small class="text-muted">[[Lorem ipsum|Lorem ipsum...]]</small>
      </p>
    </div>
   </div>
   </div>
</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>

Revision as of 17:09, 4 November 2024

Unique Page

Welcome to the Unique Page

Picture one[edit]

100 Hits from 100 Nows.jpg
Album Format
Release Date
Country
Album Series
Album Parent
Number of tracks
0
Purchase on Amazon

Image Grid[edit]

100 Hits from 100 Nows.jpg

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate, lacus at sollicitudin volutpat, lacus mauris ornare purus, sit amet iaculis mi lorem quis lorem. Suspendisse iaculis libero posuere commodo semper. Vivamus tincidunt suscipit orci, ac malesuada arcu efficitur vitae. Mauris molestie massa tortor, ac maximus erat tincidunt feugiat. Mauris nec mauris tortor. Vivamus accumsan pretium quam, ac malesuada arcu feugiat non. Pellentesque ut urna quam. Maecenas quis ipsum ac ex ultrices suscipit sit amet ut leo. In cursus porttitor ullamcorper.

Vestibulum et massa commodo, venenatis odio ut, venenatis est. Vivamus congue imperdiet leo, et lacinia magna consectetur eget. Sed et risus neque. Vestibulum scelerisque nisl id placerat congue. Maecenas lobortis dictum mi. Nam varius varius elit, in pellentesque purus finibus ut. Donec ac blandit erat. Donec vitae velit ut tellus ullamcorper tincidunt id vitae turpis. Nullam interdum consequat purus.

In et massa vel leo bibendum pulvinar. Curabitur eget metus placerat, pulvinar mi et, euismod velit. Curabitur orci urna, sodales sed nunc sollicitudin, convallis consectetur nisl. Sed lacinia est sit amet nibh ornare consequat. Curabitur ac quam sit amet nisi euismod ornare. Quisque luctus ac libero eget pretium. Donec facilisis tincidunt aliquet. In congue mi nisl, in dignissim sem euismod et. Mauris arcu ipsum, commodo ut metus eget, hendrerit sagittis urna. Phasellus in tellus dui. Vivamus eget convallis ex. Proin consectetur, enim non facilisis aliquet, nulla quam elementum mi, ultrices faucibus tellus dolor et nisi. Aliquam nec odio eget risus porta egestas.

Jumbotron[edit]

Jumbotron title[edit]

Jumbotrons are flexible elements used for calling extra attention to featured content or information.

Learn more!

Accordion[edit]

Lorem ipsum 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum 2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Card Deck[edit]

Albums

462

Songs

10,427

Artists

4,638

Button[edit]

Chameleon Medik Skin Tweeki Skin


Link

Card Deck 2[edit]

Lorem ipsum

Card title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum...

Lorem ipsum

Card title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum...

Lorem ipsum and a bit more text to see what happens with this

Card title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum...