API tools faq
paste
Advertisement
onethird

HULA HOOP html

onethird
Oct 21st, 2021
326
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.46 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!--- HULA HOOP by onethird
  3. thank you for using! rules are here: https://toyhou.se/~forums/16.htmlcss-graphics/241166.-onethird-s-f2u-codes-
  4.  
  5. accents:
  6. border, hoop 1, age gender orient, relationship img border 1, credit: #E0282E
  7. main img border, likes dislikes bullet points: #40D038
  8. titles, hoop 3, relationship img border 3: #6AA4E3
  9. quote, hoop 2, relationship status, relationship img border 2, "O": #EDC04B
  10. text: #000000
  11. background: #ECEFF3
  12. --->
  13.  
  14. <div class="container py-4 bg-faded" style="max-width:300px; background:#ECEFF3; border: 4px solid #E0282E; border-radius:2em; font-size:13px;">
  15.  
  16. <!--- main image --->
  17. <div class="row">
  18. <div class="col-12">
  19. <div class="card mx-auto rounded-circle" style="width:250px; height:250px; background:url(IMGLINK); background-size:cover; background-position:center; border: 4px solid #40D038;"></div>
  20. </div>
  21. </div>
  22.  
  23. <!--- name & quote --->
  24. <div class="row">
  25. <div class="col-12 pt-1">
  26. <h2 class="text-center" style="color:#6AA4E3; margin:0;">NAME</h2>
  27. <p class="text-center" style="color:#EDC04B;"><em>"i can make you dance around me like a hula hoop!!"</em></p>
  28. </div>
  29. </div>
  30.  
  31. <!--- hoop border --->
  32. <h3 class="text-center pt-2"><i class="far fa-circle" style="color:#E0282E;"></i><i class="far fa-circle" style="color:#EDC04B;"></i><i class="far fa-circle" style="color:#6AA4E3;"></i><i class="far fa-circle" style="color:#E0282E;"></i><i class="far fa-circle" style="color:#EDC04B;"></i><i class="far fa-circle" style="color:#6AA4E3;"></i><i class="far fa-circle" style="color:#E0282E;"></i><i class="far fa-circle" style="color:#EDC04B;"></i><i class="far fa-circle" style="color:#6AA4E3;"></i><i class="far fa-circle" style="color:#E0282E;"></i><i class="far fa-circle" style="color:#EDC04B;"></i><i class="far fa-circle" style="color:#6AA4E3;"></i></h3>
  33.  
  34. <!--- age gender orient --->
  35. <div class="row pb-3">
  36. <div class="col-12">
  37. <div class="justify-content-between">
  38. <p class="font-weight-bold" style="color:#E0282E; margin:0;">AGE</p>
  39. <p style="color:#E0282E;">content</p>
  40. </div>
  41. <div class="justify-content-between">
  42. <p class="font-weight-bold" style="color:#E0282E; margin:0;">GENDER</p>
  43. <p style="color:#E0282E;">content</p>
  44. </div>
  45. <div class="justify-content-between">
  46. <p class="font-weight-bold" style="color:#E0282E; margin:0;">ORIENTATION</p>
  47. <p style="color:#E0282E;">content</p>
  48. </div>
  49. </div>
  50. </div>
  51.  
  52. <!--- likes dislikes --->
  53. <a href="#ld" data-toggle="collapse" class="text-reset">
  54. <h3 class="text-center" style="color:#6AA4E3;">LIKES & DISLIKES</h3>
  55. </a>
  56. <div id="ld" class="collapse">
  57. <div class="row pt-2">
  58. <div class="col-6">
  59. <h3 class="text-center" style="color:#6AA4E3;">LIKES</h3>
  60. <ul class="list-unstyled">
  61. <li style="color:#000000"><i class="fas fa-chevron-right pr-1" style="color:#40D038;"></i>content</li>
  62. <li style="color:#000000"><i class="fas fa-chevron-right pr-1" style="color:#40D038;"></i>content</li>
  63. <li style="color:#000000"><i class="fas fa-chevron-right pr-1" style="color:#40D038;"></i>content</li>
  64. <li style="color:#000000"><i class="fas fa-chevron-right pr-1" style="color:#40D038;"></i>content</li>
  65. </ul>
  66. </div>
  67. <div class="col-6">
  68. <h3 class="text-center" style="color:#6AA4E3;">DISLIKES</h3>
  69. <ul class="list-unstyled">
  70. <li style="color:#000000"><i class="fas fa-chevron-right pr-1" style="color:#40D038;"></i>content</li>
  71. <li style="color:#000000"><i class="fas fa-chevron-right pr-1" style="color:#40D038;"></i>content</li>
  72. <li style="color:#000000"><i class="fas fa-chevron-right pr-1" style="color:#40D038;"></i>content</li>
  73. <li style="color:#000000"><i class="fas fa-chevron-right pr-1" style="color:#40D038;"></i>content</li>
  74. </ul>
  75. </div>
  76. </div>
  77. </div>
  78.  
  79. <!--- personality --->
  80. <a href="#per" data-toggle="collapse" class="text-reset">
  81. <h3 class="text-center" style="color:#6AA4E3;">PERS<span style="color:#EDC04B;">O</span>NALITY</h3>
  82. </a>
  83. <div id="per" class="collapse">
  84. <div class="row pt-2">
  85. <div class="col-12">
  86. <p style="color:#000000">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
  87. <p style="color:#000000">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
  88. </div>
  89. </div>
  90. </div>
  91.  
  92. <!--- history --->
  93. <a href="#history" data-toggle="collapse" class="text-reset">
  94. <h3 class="text-center" style="color:#6AA4E3;">HIST<span style="color:#EDC04B;">O</span>RY</h3>
  95. </a>
  96. <div id="history" class="collapse">
  97. <div class="row py-2">
  98. <div class="col-12">
  99. <p style="color:#000000">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  100. <p style="color:#000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  101. </div>
  102. </div>
  103. </div>
  104.  
  105. <!--- relationships --->
  106. <a href="#rel" data-toggle="collapse" class="text-reset">
  107. <h3 class="text-center" style="color:#6AA4E3; margin:0;">RELATI<span style="color:#EDC04B;">O</span>NSHIPS</h3>
  108. </a>
  109. <div id="rel" class="collapse">
  110.  
  111. <!--- relationship 1 --->
  112. <div class="row pt-3">
  113. <div class="col-12">
  114. <div class="card mx-auto rounded-circle" style="width:200px; height:200px; background:url(IMGLINK); background-size:cover; background-position:center; border: 4px solid #E0282E;"></div>
  115. <a href="URLLINK"><h3 class="text-center pt-2" style="color:#6AA4E3;">NAME</h3></a>
  116. <p class="text-center" style="color:#EDC04B; margin-bottom:0"><em>relationship</em></p>
  117. <p class="text-center" style="color:#000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  118. </div>
  119.  
  120. <!--- relationship 2 --->
  121. <div class="col-12 pt-3">
  122. <div class="card mx-auto rounded-circle" style="width:200px; height:200px; background:url(IMGLINK); background-size:cover; background-position:center; border: 4px solid #EDC04B;"></div>
  123. <a href="URLLINK"><h3 class="text-center pt-2" style="color:#6AA4E3;">NAME</h3></a>
  124. <p class="text-center" style="color:#EDC04B; margin-bottom:0"><em>relationship</em></p>
  125. <p class="text-center" style="color:#000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  126. </div>
  127.  
  128. <!--- relationship 3 --->
  129. <div class="col-12 pt-3">
  130. <div class="card mx-auto rounded-circle" style="width:200px; height:200px; background:url(IMGLINK); background-size:cover; background-position:center; border: 4px solid #6AA4E3;"></div>
  131. <a href="URLLINK"><h3 class="text-center pt-2" style="color:#6AA4E3;">NAME</h3></a>
  132. <p class="text-center" style="color:#EDC04B; margin-bottom:0"><em>relationship</em></p>
  133. <p class="text-center" style="color:#000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  134. </div>
  135. </div>
  136. </div>
  137.  
  138. <!--- credit, do not remove --->
  139. <div class="row">
  140. <div class="col-12 text-right">
  141. <a href="https://toyhou.se/onethird" data-toggle="tooltip" title="code by onethird"><i class="fas fa-code" style="color:#E0282E;"></i></a>
  142. </div>
  143. </div>
  144. </div>
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!