API tools faq
paste
ooter

[F] Something Wicked!

ooter
Dec 2nd, 2017
1,176
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.84 KB | None | 0 0
raw download clone embed print report
  1. <!-------------------------------------------------------
  2.  
  3.  "HARRY DID YOU PUT YOUR NAME IN THE GOBLET OF FIRE!?"
  4.  
  5.  
  6.             12 DAYS OF CHRISTMAS: #2
  7.  
  8.               HARRY POTTER THEME,
  9.          AS YOU ALL REQUESTED SO MUCH!
  10.  
  11.             INSPIRATION / REFERENCE
  12.              https://goo.gl/2YCNzw
  13.              (permission granted)
  14.  
  15.                 GREEN: #1a472a
  16.                  GREY: #f5f5f5
  17.     HOUSE IMAGES FROM THE HARRY POTTER WIKI
  18.  
  19.              
  20.               MERRY CHRISTMAS!
  21.  
  22. --------------------------------------------------------><div class="container" style="max-width: 1300px;color:#ddd;"><div class="row"><div class="col-12"><h2 class="card-inverse card-header rounded-0 display-4" style="border:none; margin-bottom:20px;text-transform:uppercase;background:#1a472a;letter-spacing:3px;">Character</h2></div><!----containers----><div class="container-fluid"><div class="row"><div class="col-md-6"><!----LEFT-----><div class="ui-accordion card card-outline-info rounded-0" style="border:none;"><div class="ui-accordion-content card-block" style="height:500px;background:#f5f5f5;margin-bottom:20px;"><!--------
  23.  
  24. HOUSE IMG
  25.  
  26. ALL CAN BE FOUND HERE: https://imgur.com/a/Ak5N8
  27. SOURCE: HP WIKI
  28.  
  29. --------><img src="IMAGE_HERE" width="404" height="454"></div></div><!------RIGHT-----><div class="ui-accordion card card-outline-info rounded-0" style="border:none;"><div class="ui-accordion-content card-block" style="height:510px;background:#f5f5f5;color:#000;text-align:justify;margin-bottom:20px;"><!--------
  30.  
  31. INTERESTS + AESTHETICS
  32.  
  33. --------><div class="row" style="text-align:center;"><div class="col-md-6"><!--------
  34.  
  35. LIKES
  36.  
  37. --------><div class="btn rounded-0 w-100" style="background:#1a472a;color:#fff;text-transform:uppercase;letter-spacing:2px;">Likes</div>
  38. <table style="width: 100%; border: none; margin-right: calc(0%);"><tbody><tr>
  39.   <td style="width: 100.0000%;">Uno</td></tr>
  40.   <tr><td style="width: 100.0000%;">Due</td></tr>
  41.   <tr><td style="width: 100.0000%;">Tres</td></tr>
  42.   <tr><td style="width: 100.0000%;">Quattro</td></tr>
  43.   </tbody></table></div><div class="col-md-6"><!--------
  44.  
  45. DISLIKES
  46.  
  47. --------><div class="btn rounded-0 w-100" style="background:#5d5d5d;color:#fff;text-transform:uppercase;letter-spacing:2px;">Dislikes</div>
  48. <table style="width: 100%; border: none; margin-right: calc(0%);"><tbody><tr><td style="width: 100.0000%;">Uno</td></tr>
  49. <tr><td style="width: 100.0000%;">Due</td></tr>
  50. <tr><td style="width: 100.0000%;">Tres</td></tr>
  51. <tr><td style="width: 100.0000%;">Quattro</td></tr>
  52. </tbody></table><p><br></p></div></div><!--------
  53.  
  54. SOME NOTES, MAYBE SOME TRIVIA
  55.  
  56. --------><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales orci in augue efficitur vehicula. Maecenas vitae pretium massa. Nullam eros erat, tristique id turpis in, luctus tempus nunc. Praesent volutpat, lectus id volutpat viverra, arcu ex fringilla nisi, vel feugiat nulla orci vel elit. Quisque sit amet scelerisque lorem. Phasellus pulvinar nulla a tellus rutrum viverra.</p><p>Nunc ac accumsan nisi. Vestibulum viverra feugiat diam vel rhoncus. Quisque quam elit, sollicitudin ac turpis et, imperdiet imperdiet sapien. Nulla feugiat dui erat, ac eleifend turpis scelerisque a. Etiam id lacus lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempor massa at mi laoreet condimentum. Cras molestie ipsum a quam pharetra pharetra. Nulla ut sapien porttitor, maximus tortor et, vulputate dui. Suspendisse sodales nisl at vehicula malesuada. Cras vel libero pharetra, volutpat lectus vel, rhoncus enim. Phasellus eget lectus interdum, ornare lorem vitae, commodo libero. Aenean dapibus eros quis lacus hendrerit efficitur. Aenean lobortis scelerisque nisl, in rutrum diam maximus eu. In a placerat turpis, in condimentum odio. Cras id risus nisl.</p><!-----RIGHT END----->
  57. <!----LEFT END-----></div></div></div><div class="col-md-6"><!------RIGHT----->
  58. <!--------
  59.  
  60. CHARACTER IMAGE
  61. 540 X 250
  62.  
  63. --------><div class="ui-accordion card card-outline-info rounded-0 w-100" style="border:none;"><div class="ui-accordion-content card-block" style="height:220px;background-image:url('IMAGE_HERE');border:10px solid #f5f5f5;color:#000;text-align:justify;margin-bottom:20px;"><br></div></div><div class="ui-accordion card card-outline-info rounded-0" style="border:none;"><div class="ui-accordion-content card-block" style="height:260px;background:#f5f5f5;color:#000;text-align:justify;margin-bottom:20px;"><!--------
  64.  
  65. STORY
  66.  
  67. --------><p>I&#39;m a Slytherin. So naturally Slytherin was the example house. Because we&#39;re the best, obviously.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales orci in augue efficitur vehicula. Maecenas vitae pretium massa. Nullam eros erat, tristique id turpis in, luctus tempus nunc. Praesent volutpat, lectus id volutpat viverra, arcu ex fringilla nisi, vel feugiat nulla orci vel elit. Quisque sit amet scelerisque lorem. Phasellus pulvinar nulla a tellus rutrum viverra. Nullam eu sem lobortis, ultricies neque in, scelerisque libero. Vestibulum sit amet lacus metus. Sed dignissim dui sed lorem scelerisque lacinia. Cras vitae velit varius, pellentesque purus in, ultrices purus. Proin nisl augue, auctor id eros eget, rutrum sagittis mauris.</p><p>Nunc ac accumsan nisi. Vestibulum viverra feugiat diam vel rhoncus. Quisque quam elit, sollicitudin ac turpis et, imperdiet imperdiet sapien. Nulla feugiat dui erat, ac eleifend turpis scelerisque a. Etiam id lacus lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempor massa at mi laoreet condimentum. Cras molestie ipsum a quam pharetra pharetra. Nulla ut sapien porttitor, maximus tortor et, vulputate dui. Suspendisse sodales nisl at vehicula malesuada. Cras vel libero pharetra, volutpat lectus vel, rhoncus enim. Phasellus eget lectus interdum, ornare lorem vitae, commodo libero. Aenean dapibus eros quis lacus hendrerit efficitur. Aenean lobortis scelerisque nisl, in rutrum diam maximus eu. In a placerat turpis, in condimentum odio. Cras id risus nisl.</p><p>Phasellus at est eu lorem euismod volutpat nec a mauris. Praesent volutpat auctor laoreet. Sed accumsan consequat tellus id iaculis. Mauris lacinia laoreet porta. Vivamus a massa urna. Sed rutrum justo sit amet arcu malesuada, vitae dapibus neque vestibulum. In massa libero, sagittis id scelerisque at, commodo non nulla. Pellentesque euismod imperdiet pretium. Vivamus convallis orci aliquam risus tincidunt dapibus. Maecenas nec magna id magna bibendum euismod.</p><p>Aliquam ornare, tortor maximus rhoncus lobortis, est magna mollis dolor, et posuere nisi est et risus. Fusce ultrices lacus ante, sit amet elementum nisi egestas et. Vivamus arcu est, interdum accumsan turpis a, lacinia pellentesque metus. Nam sodales dui vitae velit luctus placerat. Phasellus nec facilisis est. Suspendisse ante est, vestibulum et sem eget, vulputate lacinia nisi. Aenean nec fermentum velit.</p><p>Suspendisse ac arcu suscipit, egestas libero ut, tristique sem. Sed a consequat justo, eu porta leo. Nullam facilisis sem in aliquet tempus. Donec vel magna a mi congue aliquam. Phasellus tempus sem sed justo condimentum, et ultricies ligula ultricies. Curabitur auctor urna id purus rutrum, in posuere mauris tincidunt. Phasellus sollicitudin turpis eu tincidunt porttitor.</p></div></div><!------RIGHT----->
  68.  
  69. <div class="ui-accordion card card-outline-info rounded-0" style="border:none;"><div class="ui-accordion-content card-block" style="height:510px;background:#f5f5f5;color:#000;text-align:justify;margin-bottom:20px;"> <!--------
  70.  
  71. AESTHETICS
  72.  
  73. -------->
  74.                             <div class="row">
  75.                                 <div class="col-sm-6 mb-2" style="text-align: center;"><img src="AESTHETIC_1" class="rounded-circle" width="150" height="150"></div>
  76.                                 <div class="col-sm-6 mb-2" style="text-align: center;"><img src="AESTHETIC_2" class="rounded-circle" width="150" height="150"></div>
  77.                                 <div class="col-sm-6 mb-2" style="text-align: center;"><img src="AESTHETIC_3" class="rounded-circle" width="150" height="150"></div>
  78.                                 <div class="col-sm-6 mb-2" style="text-align: center;"><img src="AESTHETIC_4" class="rounded-circle" width="150" height="150"></div>
  79.                                 <div class="col-sm-6 mb-2" style="text-align: center;"><img src="AESTHETIC_5" class="rounded-circle" width="150" height="150"></div>
  80.                                 <div class="col-sm-6 mb-2" style="text-align: center;"><img src="AESTHETIC_6" class="rounded-circle" width="150" height="150"></div>
  81.                             </div>
  82.                         </div>
  83.                     </div><!-----RIGHT END----->
  84.                 </div>
  85.             </div><!--------
  86.  
  87. PALETTE
  88.  
  89. -------->
  90.             <div class="ui-accordion card card-outline-info rounded-0" style="border:none;">
  91.                 <div class="ui-accordion-content card-block" style="height:200px;background:#f5f5f5;color:#000;">
  92.                     <div>
  93.                         <div class="container-fluid mx-auto">
  94.                             <div class="row" style="text-align:center;">
  95.                                 <div class="col-2 mx-auto rounded" style="background-color:#1a472a; height: 160px; text-align: right;">#1a472a</div>
  96.                                 <div class="col-2 mx-auto rounded" style="background-color:#2a623d; height: 160px; text-align: right;">#2a623d</div>
  97.                                 <div class="col-2 mx-auto rounded" style="background-color:#5d5d5d; height: 160px; text-align: right;">#5d5d5d</div>
  98.                                 <div class="col-2 mx-auto rounded" style="background-color:#aaaaaa; height: 160px; text-align: right;">#aaaaaa</div>
  99.                                 <div class="col-2 mx-auto rounded" style="background-color:#000000; height: 160px; text-align: right;">#000000</div>
  100.                             </div>
  101.                         </div>
  102.                     </div>
  103.                 </div>
  104.             </div>
  105. <!-----------------------------------------------------------------------------------------------
  106.  
  107. CREDIT, DO NOT REMOVE  -- DOING SO WILL EARN YOU A BLACKLIST
  108.  
  109. -------------------------------------------------------------------------------------------------------><p style="text-align: right;margin-right:10px;"><span style="font-size: 11px;">HTML by @Jayden</span></p>
  110.         </div>
  111.     </div>
  112. </div>
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!