API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Sep 25th, 2017
56
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.68 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="js/jquery-3.2.1.js"></script>
  6. <script src="js/bootstrap.js"></script>
  7. <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
  8. <title>Rock Nation</title>
  9. </head>
  10. <style>
  11. .ttl {
  12. border-bottom-style: solid;
  13. border-color: #ff0000;
  14. border-width: 5px;
  15. color: #000000;
  16. }
  17. #opc {
  18. background-color: rgba(55, 55, 55, 0.5);
  19. }
  20. h3 {
  21. color: #000000;
  22. background-color: rgba(65, 65, 65, 0.5);
  23. }
  24. #imgbk {
  25. margin: 30px;
  26. }
  27. #cr {
  28. color: #000000;
  29. background-color: rgba(65, 65, 65, 0.5);
  30. }
  31. .mra {
  32. background-color: #222222;
  33. border-style: solid;
  34. border-color: #111111;
  35. border-radius: 5px;
  36. }
  37. #demo {
  38. background-color: #000000;
  39. }
  40. .msc {
  41. color: #ffffff;
  42. font-size: 20px;
  43. }
  44. #marg {
  45. margin-right: 30px;
  46. margin-bottom: 5px;
  47. margin-top: 5px;
  48. }
  49. .row {
  50. border-bottom-style: solid;
  51. border-color: #555555
  52. }
  53. </style>
  54. <body style="background: url(background.jpg) no-repeat; width: 100%; height: 100%; background-size: 200%;">
  55. <div align="center">
  56. <h1 class="ttl" align="center" id="opc"><b>Rock Nation</b></h1>
  57. </div>
  58. <div align="center">
  59. <img src="guitarra.png" height="30">
  60. </div>
  61. <br>
  62. <nav class="navbar navbar-inverse">
  63. <div class="container-fluid">
  64. <div class="navbar-header">
  65. <a class="navbar-brand" href="#">RockNation</a>
  66. </div>
  67. <ul class="nav navbar-nav">
  68. <li class="active"><a href="#">Home</a></li>
  69. <li class="dropdown">
  70. <a class="dropdown-toggle" data-toggle="dropdown" href="#">Músicas<span class="caret"></span></a>
  71. <ul class="dropdown-menu">
  72. <li><a href="#">Classic Rock</a></li>
  73. <li><a href="#">Acid Rock</a></li>
  74. <li><a href="#">Experimental Rock</a></li>
  75. <li><a href="#">Progressive Rock</a></li>
  76. <li><a href="#">Hard Rock</a></li>
  77. <li><a href="#">Punk Rock</a></li>
  78. <li><a href="#">Heavy Metal</a></li>
  79. <li><a href="#">Trash Metal</a></li>
  80. <li><a href="#">Black Metal</a></li>
  81. <li><a href="#">Gothic Rock</a></li>
  82. <li><a href="#">Hardcore Rock</a></li>
  83. </ul>
  84. </li>
  85. <li class="dropdown">
  86. <a class="dropdown-toggle" data-toggle="dropdown" href="#">Bandas<span class="caret"></span></a>
  87. <ul class="dropdown-menu">
  88. <li><a href="#">Classic Rock</a></li>
  89. <li><a href="#">Acid Rock</a></li>
  90. <li><a href="#">Experimental Rock</a></li>
  91. <li><a href="#">Progressive Rock</a></li>
  92. <li><a href="#">Hard Rock</a></li>
  93. <li><a href="#">Punk Rock</a></li>
  94. <li><a href="#">Heavy Metal</a></li>
  95. <li><a href="#">Trash Metal</a></li>
  96. <li><a href="#">Black Metal</a></li>
  97. <li><a href="#">Gothic Rock</a></li>
  98. <li><a href="#">Hardcore Rock</a></li>
  99. </ul>
  100. </li>
  101. <li class="dropdown">
  102. <a class="dropdown-toggle" data-toggle="dropdown" href="#">Discografias<span class="caret"></span></a>
  103. <ul class="dropdown-menu">
  104. <li><a href="#">Classic Rock</a></li>
  105. <li><a href="#">Acid Rock</a></li>
  106. <li><a href="#">Experimental Rock</a></li>
  107. <li><a href="#">Progressive Rock</a></li>
  108. <li><a href="#">Hard Rock</a></li>
  109. <li><a href="#">Punk Rock</a></li>
  110. <li><a href="#">Heavy Metal</a></li>
  111. <li><a href="#">Trash Metal</a></li>
  112. <li><a href="#">Black Metal</a></li>
  113. <li><a href="#">Gothic Rock</a></li>
  114. <li><a href="#">Hardcore Rock</a></li>
  115. </ul>
  116. </li>
  117. <li class="dropdown">
  118. <a class="dropdown-toggle" data-toggle="dropdown" href="#">Informe-se<span class="caret"></span></a>
  119. <ul class="dropdown-menu">
  120. <li><a href="#">Classic Rock</a></li>
  121. <li><a href="#">Acid Rock</a></li>
  122. <li><a href="#">Experimental Rock</a></li>
  123. <li><a href="#">Progressive Rock</a></li>
  124. <li><a href="#">Hard Rock</a></li>
  125. <li><a href="#">Punk Rock</a></li>
  126. <li><a href="#">Heavy Metal</a></li>
  127. <li><a href="#">Trash Metal</a></li>
  128. <li><a href="#">Black Metal</a></li>
  129. <li><a href="#">Gothic Rock</a></li>
  130. <li><a href="#">Hardcore Rock</a></li>
  131. <li><a href="#">Instrumentos</a></li>
  132. </ul>
  133. </li>
  134. <form class="navbar-form navbar-left">
  135. <div class="form-group">
  136. <input type="text" class="form-control" placeholder="Search">
  137. </div>
  138. <button type="submit" class="btn btn-default">Pesquisar</button>
  139. </form>
  140. </ul>
  141. </div>
  142. </nav>
  143. <h1 align="center" id="cr">Classic Rock</h1>
  144. <div class="mra">
  145. <button data-toggle="collapse" data-target="#demo" class="btn btn-default">Elvis Presley</button>
  146. <div id="demo" class="collapse">
  147. <div id="demo">
  148. <ul>
  149. <div class="row">
  150. <li><div class="col-md-6"><p class="msc" id="marg">Always On My Mind</p></div><div class="col-md-6"><div align="right" id="marg"><div class="btn-group"><button type="button" class="btn btn-danger">Ouvir</button><button type="button" class="btn btn-danger">Letra</button><button type="button" class="btn btn-danger">Baixar</button></div></div></div></li>
  151. </div>
  152. <div class="row">
  153. <li><div class="col-md-6"><p class="msc" id="marg">Can't help falling in love</p></div><div class="col-md-6"><div align="right" id="marg"><div class="btn-group"><button type="button" class="btn btn-danger">Ouvir</button><button type="button" class="btn btn-danger">Letra</button><button type="button" class="btn btn-danger">Baixar</button></div></div></div></li>
  154. </div>
  155. <div class="row">
  156. <li><div class="col-md-6"><p class="msc" id="marg">Suspicious Mind</p></div><div class="col-md-6"><div align="right" id="marg"><div class="btn-group"><button type="button" class="btn btn-danger">Ouvir</button><button type="button" class="btn btn-danger">Letra</button><button type="button" class="btn btn-danger">Baixar</button></div></div></div></li>
  157. </div>
  158. <div class="row">
  159. <li><div class="col-md-6"><p class="msc" id="marg">It's now or never</p></div><div class="col-md-6"><div align="right" id="marg"><div class="btn-group"><button type="button" class="btn btn-danger">Ouvir</button><button type="button" class="btn btn-danger">Letra</button><button type="button" class="btn btn-danger">Baixar</button></div></div></div></li>
  160. </div>
  161. <div class="row">
  162. <li><div class="col-md-6"><p class="msc" id="marg">Love me tender</p></div><div class="col-md-6"><div align="right" id="marg"><div class="btn-group"><button type="button" class="btn btn-danger">Ouvir</button><button type="button" class="btn btn-danger">Letra</button><button type="button" class="btn btn-danger">Baixar</button></div></div></div></li>
  163. </div>
  164. <div class="row">
  165. <li><div class="col-md-6"><p class="msc" id="marg">My way</p></div><div class="col-md-6"><div align="right" id="marg"><div class="btn-group"><button type="button" class="btn btn-danger">Ouvir</button><button type="button" class="btn btn-danger">Letra</button><button type="button" class="btn btn-danger">Baixar</button></div></div></div></li>
  166. </div>
  167. <div class="row">
  168. <li><div class="col-md-6"><p class="msc" id="marg">Kiss me quick</p></div><div class="col-md-6"><div align="right" id="marg"><div class="btn-group"><button type="button" class="btn btn-danger">Ouvir</button><button type="button" class="btn btn-danger">Letra</button><button type="button" class="btn btn-danger">Baixar</button></div></div></div></li>
  169. </div>
  170. <div class="row">
  171. <li><div class="col-md-6"><p class="msc" id="marg">Bridge over troubled water</p></div><div class="col-md-6"><div align="right" id="marg"><div class="btn-group"><button type="button" class="btn btn-danger">Ouvir</button><button type="button" class="btn btn-danger">Letra</button><button type="button" class="btn btn-danger">Baixar</button></div></div></div></li>
  172. </div>
  173. </ul>
  174. </div>
  175. </div>
  176. </div>
  177. </body>
  178. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!