API tools faq
paste
quinnsea

[HTML][Toyhouse] Cloudbank

quinnsea
Jan 8th, 2018
678
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.33 KB | None | 0 0
raw download clone embed print report
  1. <!--This is where the background box is! If you want to customize it in any way and you have Photoshop or anything like that, the box itself is a 700x400px image. I kept its position by widening the canvas to 900px while maintaining the size of the image, keeping it positioned in the middle. Then you just upload the image to imgur and replace the url! I hope this helps you have a little bit more fun with my template!-->
  2. <div class="container" style="background-image:url('https://i.imgur.com/LUO82sV.png'); background-repeat:no-repeat; margin-left:200px; margin-top:50px;">
  3. <div class="row">
  4. <div class="col">
  5. <div class="card" style="margin-left:200px; width:500px; height:32px; margin-top:-20px; background-color:#414141;">
  6.  
  7. <h1 style="margin-top:3px;"><span style="color: rgb(191, 21, 21);">&nbsp; <span style="background-color: rgb(191, 21, 21);">&nbsp; &nbsp;&nbsp;</span> &nbsp;</span><span style="color: rgb(255, 255, 255);">RED</span></h1>
  8. </div>
  9. </div>
  10. </div>
  11. <div class="row">
  12. <!--400x317 CHARACTER IMAGE-->
  13. <div class="col"><img src="https://i.imgur.com/kzzeAdf.png" width="400" height="317" class="fr-fic fr-dii"></div>
  14. <!--INFO TABLE-->
  15. <div class="col" style="margin-left:-900px; margin-top:50px;">
  16.  
  17. <table style="width: 37%; margin-left: calc(27%); margin-right: calc(36%);">
  18. <tbody>
  19. <tr>
  20. <td style="width: 14.8158%;"><span style="color: #ffffff;"><strong>NAME</strong></span></td>
  21. <td style="width: 35.2008%;"><span style="color: #ffffff;">First Last</span></td>
  22. <td style="width: 21.2759%;"><span style="color: #ffffff;"><strong>PRONOUNS</strong></span></td>
  23. <td style="width: 25.6464%;"><span style="color: #ffffff;">they/them</span></td>
  24. </tr>
  25. <tr>
  26. <td style="width: 14.8158%;"><span style="color: #ffffff;"><strong>AGE</strong></span></td>
  27. <td style="width: 35.2008%;"><span style="color: #ffffff;">99</span></td>
  28. <td style="width: 21.2759%;"><span style="color: #ffffff;"><strong>SPECIES</strong></span></td>
  29. <td style="width: 25.6464%;"><span style="color: #ffffff;">Human</span></td>
  30. </tr>
  31. <tr>
  32. <td style="width: 14.8158%;"><span style="color: #ffffff;"><strong>DOB</strong></span></td>
  33. <td style="width: 35.2008%;"><span style="color: #ffffff;">9/9/9999</span></td>
  34. <td style="width: 21.2759%;"><span style="color: #ffffff;"><strong>MBTI</strong></span></td>
  35. <td style="width: 25.6464%;"><span style="color: #ffffff;">ESTP</span></td>
  36. </tr>
  37. <tr>
  38. <td style="width: 14.8158%;"><span style="color: #ffffff;"><strong>DESIGN</strong></span></td>
  39. <td style="width: 35.2008%;"><span style="color: #ffffff;">@quinnsea</span></td>
  40. <td style="width: 21.2759%;"><span style="color: #ffffff;"><strong>ZODIAC</strong></span></td>
  41. <td style="width: 25.6464%;"><span style="color: #ffffff;">❤</span></td>
  42. </tr>
  43. </tbody>
  44. </table>
  45.  
  46. <h3 style="text-align: center;">
  47. <br>
  48. </h3>
  49. <!--QUOTE, MIGHT HAVE TO PLAY WITH THE MARGIN-LEFT-->
  50.  
  51. <h3 style="text-align: center;"><span style="color: #ffffff; margin-left:-80px;"><em>&quot;I&#39;m going to find the thing that&#39;s doing this</em></span></h3>
  52.  
  53. <h3 style="text-align: center;"><span style="color: #ffffff; margin-left:-80px;"><em>and I&#39;m going to break its heart.&quot;</em></span></h3>
  54. </div>
  55. </div>
  56. </div>
  57. <div class="row" style="margin-left:100px; margin-top:20px;">
  58. <!--ABOUT BOX-->
  59. <div class="col">
  60. <div class="align-middle" id="accordion" style="width:300px;">
  61. <div class="card card-outline-info bg-faded">
  62. <a class="collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapseOne">
  63.  
  64. <h2 class="card-inverse card-info card-header" style="text-align: center; background-color:#000;">About</h2>
  65. </a>
  66. <div class="collapse" id="collapseOne">
  67. <div class="card-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus sodales nisi porttitor sodales. Pellentesque id suscipit neque. Aliquam erat volutpat. Curabitur massa nisl, mollis a porttitor sed, gravida ut justo. Aenean semper ultricies turpis eget tristique. In accumsan pellentesque ipsum, at vehicula felis ultrices eu.</div>
  68. </div>
  69. </div>
  70. </div>
  71. </div>
  72. <!--TRIVIA BOX-->
  73. <div class="col">
  74. <div class="align-middle" id="accordion" style="width:300px;">
  75. <div class="card card-outline-info bg-faded">
  76. <a class="collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapseTwo">
  77.  
  78. <h2 class="card-inverse card-info card-header" style="text-align: center; background-color:#000;">Trivia</h2>
  79. </a>
  80. <div class="collapse" id="collapseTwo">
  81. <div class="card-block"><i class="fa fa-volume-off"></i> Aliquam vehicula massa lacinia pellentesque posuere.
  82. <br><i class="fa fa-volume-off"></i> Vestibulum suscipit purus ac pellentesque aliquet.
  83. <br><i class="fa fa-volume-off"></i> Integer ultrices urna pharetra mauris placerat, eu lacinia elit pretium.</div>
  84. </div>
  85. </div>
  86. </div>
  87. </div>
  88. <!--PLAYLIST BOX-->
  89. <div class="col">
  90. <div class="align-middle" id="accordion" style="width:300px;">
  91. <div class="card card-outline-info bg-faded">
  92. <a class="collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapseThree">
  93.  
  94. <h2 class="card-inverse card-info card-header" style="text-align: center; background-color:#000;">Playlist</h2>
  95. </a>
  96. <div class="collapse" id="collapseThree">
  97. <div class="card-block"><i class="fa fa-headphones"></i>
  98. <a href="https://www.youtube.com/watch?v=cGMWL8cOeAU">In Circles</a>
  99. <br><i class="fa fa-headphones"></i>
  100. <a href="https://www.youtube.com/watch?v=41tIUr_ex3g">The Spine</a>
  101. <br><i class="fa fa-headphones"></i>
  102. <a href="https://www.youtube.com/watch?v=f9O2Rjn1azc">We All Become</a>
  103. <br><i class="fa fa-headphones"></i>
  104. <a href="https://www.youtube.com/watch?v=WROI5WYBU_A">Signals</a>
  105. <br><i class="fa fa-headphones"></i>
  106. <a href="https://www.youtube.com/watch?v=vFrjMq4aL-g">Paper Boats</a>
  107. <br><i class="fa fa-headphones"></i>
  108. <a href="https://www.youtube.com/watch?v=zGTkAVsrfg8">She Shines</a></div>
  109. </div>
  110. </div>
  111. </div>
  112. </div>
  113. </div>
  114. <!---CREDIT, DO NOT REMOVE--->
  115.  
  116. <p style="text-align: right;"><span style="font-size: 10px;">template by @quinnsea</span></p>
Add Comment
Please, Sign In to add comment
Public Pastes
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!