API tools faq
paste
Advertisement
vladimirpinarum

F2U Cottage

vladimirpinarum
Apr 28th, 2021
1,187
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.84 KB | None | 0 0
raw download clone embed print report
  1. <!----------------------------------------------------------------
  2. COTTAGE PROFILE
  3. Profile by HTMLobster (noll)
  4.  
  5. Colors:
  6. Image border: #fff
  7. Header + footer text: #fff
  8. Main bg: #8aae9a
  9. Relations bg: #8aae9a
  10. Relations border: #8aae9a
  11. Relations text: #fff
  12. Heading text: #4E5C3D
  13. Content text: #333
  14. Content bg: #fff
  15.  
  16. TOS:
  17. Do not remove my credit. You may edit it, however.
  18. You may edit code/frankenstein with others as long as their TOS allows!
  19. Turn off WYSIWYG and turn on Code Editor.
  20. Ask me if you want to redistribute edits. Must be F2U.
  21. ------------------------------------------------------------------>
  22. <div class="container" style="max-width:800px;">
  23. <!--- Main background --->
  24. <div class="p-2" style="background:#8aae9a;">
  25. <!--- Header background --->
  26. <div class="p-3 mb-2" style="background:url(https://i.imgur.com/M2qUXp5.png); background-position:-120px -290px; background-size:1000px;">
  27. <!--- Header text + border --->
  28. <h1 class="text-center font-weight-lighter p-2 mb-0" style="font-size:3em; border:1px solid #fff; color:#fff;">Character Name</h1>
  29. </div>
  30. <!--- Content background --->
  31. <div class="p-2 h-100 text-justify" style="background:#fff; color:#333; line-height:20px;">
  32. <div class="row no-gutters">
  33. <!--- Side image --->
  34. <div class="col-sm-auto col-12 order-sm-2 justify-content-center">
  35. <div class="ml-sm-2 mb-2 mb-sm-0">
  36. <!--- Background image --->
  37. <div class="p-2" style="width:250px; height:320px; background:url(https://i.imgur.com/M2qUXp5.png);">
  38. <!--- Border --->
  39. <div class="h-100 p-2" style="border:1px solid #fff;">
  40. <!--- Character image --->
  41. <div class="h-100" style="background:url(https://file.toyhou.se/images/14215622_Eu431PizKxeSsck.png) center; background-size:cover;"></div>
  42. </div>
  43. </div>
  44. <!--- Color palette (feel free to add more colors) --->
  45. <div class="row no-gutters" style="width:250px;">
  46. <div class="col p-3" style="background:#d0c4bb;"></div>
  47. <div class="col p-3" style="background:#BDAB98;"></div>
  48. <div class="col p-3" style="background:#83a18b;"></div>
  49. <div class="col p-3" style="background:#4D6B53;"></div>
  50. <div class="col p-3" style="background:#283C26;"></div>
  51. </div>
  52. </div>
  53. </div>
  54.  
  55. <!--- Info content - can add as many paragraphs or sections as you want --->
  56. <div class="col-sm" style="height:352px; overflow-y:auto;">
  57. <!--- Heading 1 --->
  58. <h1 class="font-weight-light" style="color:#4E5C3D; font-size:2em;"><i class="font-weight-light far fa-book mr-2"></i>Story</h1>
  59. <!--- Description --->
  60. <p>Any Section can be as long as you want.</p>
  61. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean orci orci, consectetur et libero eget, feugiat venenatis sem. Proin ultricies ut felis ut venenatis. Nulla sapien purus, porta ut rhoncus in, ornare quis lectus. Praesent ut lectus hendrerit, volutpat neque et, laoreet ante. Sed id ullamcorper leo. Praesent ullamcorper quis dui vel luctus. Aliquam erat volutpat. Sed sagittis augue nec fermentum pellentesque. Aenean eget mattis nibh. Nulla facilisi.</p>
  62. <!--- Heading 2 --->
  63. <h1 class="font-weight-light" style="color:#4E5C3D; font-size:2em;"><i class="font-weight-light far fa-user mr-2"></i>Personality</h1>
  64. <!--- Description --->
  65. <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer magna diam, faucibus ac ex et, venenatis bibendum purus. Aliquam est libero, laoreet id nisi nec, lobortis interdum sem. Duis a posuere dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
  66. <!--- Heading 3 --->
  67. <h1 class="font-weight-light" style="color:#4E5C3D; font-size:2em;"><i class="font-weight-light far fa-palette mr-2"></i>Appearance</h1>
  68. <!--- Description --->
  69. <p>Ut vitae feugiat nisl. Quisque lacinia felis a aliquam semper. Fusce et ligula non nisi sollicitudin pellentesque non vel justo. Nullam id scelerisque ex. Morbi ultrices sodales sem et pretium. Maecenas condimentum sollicitudin mauris, fringilla bibendum elit pulvinar eget. In pharetra sem sed lorem pretium, ut accumsan dolor vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor tristique porttitor. Cras ultricies eu eros eu pellentesque. Suspendisse dapibus varius ante, vitae consequat erat. Curabitur ac semper tortor. Phasellus scelerisque felis rutrum nisl ullamcorper venenatis.</p>
  70. <!--- Subheading 1 --->
  71. <h3 class="font-weight-light mt-3" style="color:#4E5C3D;">Design Notes</h3>
  72. <!--- Notes --->
  73. <ul class="fa-ul">
  74. <li><i class="fa-li far fa-pen"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  75. <li><i class="fa-li far fa-pen"></i>Nulla sapien purus, porta ut rhoncus in, ornare quis lectus. Praesent ut lectus hendrerit, volutpat neque et.</li>
  76. <li><i class="fa-li far fa-pen"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  77. </ul>
  78. <!--- Heading 4 --->
  79. <h1 class="font-weight-light" style="color:#4E5C3D; font-size:2em;"><i class="font-weight-light far fa-comments mr-2"></i>Relationships</h1>
  80. <!--- Relations row 1 --->
  81. <div class="row no-gutters">
  82. <!--- Relation 1 --->
  83. <div class="col-sm-6 pr-sm-2 mb-2">
  84. <!--- Character image --->
  85. <div class="p-2" style="height:200px; background:url(https://i.imgur.com/M2qUXp5.png) center; background-size:cover;">
  86. <!--- Border --->
  87. <div class="h-100" style="border:1px solid #fff;"></div>
  88. </div>
  89. <!--- Name --->
  90. <a class="btn rounded-0 p-2 w-100" style="background:#8aae9a; color:#fff;" href="CHAR_URL">Character Name</a>
  91. <!--- Description --->
  92. <div class="p-2" style="border:1px solid #8aae9a;">
  93. <p class="m-0 text-center">Relationship</p>
  94. <p class="text-justify">Lorem ipsum dolor sit amet, adipiscing elit. Aenean orci orci, et libero eget</p>
  95. </div>
  96. </div>
  97. <!--- Relation 2 --->
  98. <div class="col-sm-6 mb-2">
  99. <!--- Character image --->
  100. <div class="p-2" style="height:200px; background:url(https://i.imgur.com/M2qUXp5.png) center; background-size:cover;">
  101. <!--- Border --->
  102. <div class="h-100" style="border:1px solid #fff;"></div>
  103. </div>
  104. <!--- Name --->
  105. <a class="btn rounded-0 p-2 w-100" style="background:#8aae9a; color:#fff;" href="CHAR_URL">Character Name</a>
  106. <!--- Description --->
  107. <div class="p-2" style="border:1px solid #8aae9a;">
  108. <p class="m-0 text-center">Relationship</p>
  109. <p class="text-justify">Lorem ipsum dolor sit amet, adipiscing elit. Aenean orci orci, et libero eget</p>
  110. </div>
  111. </div>
  112. <!--- Relation 3 --->
  113. <div class="col-sm-6 pr-sm-2 mb-2">
  114. <!--- Character image --->
  115. <div class="p-2" style="height:200px; background:url(https://i.imgur.com/M2qUXp5.png) center; background-size:cover;">
  116. <!--- Border --->
  117. <div class="h-100" style="border:1px solid #fff;"></div>
  118. </div>
  119. <!--- Name --->
  120. <a class="btn rounded-0 p-2 w-100" style="background:#8aae9a; color:#fff;" href="CHAR_URL">Character Name</a>
  121. <!--- Description --->
  122. <div class="p-2" style="border:1px solid #8aae9a;">
  123. <p class="m-0 text-center">Relationship</p>
  124. <p class="text-justify">Lorem ipsum dolor sit amet, adipiscing elit. Aenean orci orci, et libero eget</p>
  125. </div>
  126. </div>
  127. <!--- Relation 4 --->
  128. <div class="col-sm-6 mb-2">
  129. <!--- Character image --->
  130. <div class="p-2" style="height:200px; background:url(https://i.imgur.com/M2qUXp5.png) center; background-size:cover;">
  131. <!--- Border --->
  132. <div class="h-100" style="border:1px solid #fff;"></div>
  133. </div>
  134. <!--- Name --->
  135. <a class="btn rounded-0 p-2 w-100" style="background:#8aae9a; color:#fff;" href="CHAR_URL">Character Name</a>
  136. <!--- Description --->
  137. <div class="p-2" style="border:1px solid #8aae9a;">
  138. <p class="m-0 text-center">Relationship</p>
  139. <p class="text-justify">Lorem ipsum dolor sit amet, adipiscing elit. Aenean orci orci, et libero eget</p>
  140. </div>
  141. </div>
  142. </div>
  143. <!--- Relations end - copy from start to end to add more characters. --->
  144. <!--- Heading 5 --->
  145. <h1 class="font-weight-light mt-3" style="color:#4E5C3D; font-size:2em;"><i class="font-weight-light far fa-lightbulb mr-2"></i>Trivia</h1>
  146. <!--- Description --->
  147. <div class="row no-gutters">
  148. <!--- Likes --->
  149. <div class="col-md mb-md-0 mb-2 mr-md-2">
  150. <h3 class="font-weight-light" style="color:#4E5C3D;">Likes</h3>
  151. <ul class="fa-ul">
  152. <li><i class="fa-li far fa-heart"></i>Like</li>
  153. <li><i class="fa-li far fa-heart"></i>Like</li>
  154. <li><i class="fa-li far fa-heart"></i>Like</li>
  155. </ul>
  156. </div>
  157. <!--- Dislikes --->
  158. <div class="col-md mb-md-0 mb-2">
  159. <h3 class="font-weight-light" style="color:#4E5C3D;">Dislikes</h3>
  160. <ul class="fa-ul">
  161. <li><i class="fa-li far fa-times"></i>Dislike</li>
  162. <li><i class="fa-li far fa-times"></i>Dislike</li>
  163. <li><i class="fa-li far fa-times"></i>Dislike</li>
  164. </ul>
  165. </div>
  166. </div>
  167. <!--- Trivia --->
  168. <h3 class="font-weight-light" style="color:#4E5C3D;">Fun Facts</h3>
  169. <ul class="fa-ul mb-0">
  170. <li><i class="fa-li far fa-lightbulb"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  171. <li><i class="fa-li far fa-lightbulb"></i>Nulla sapien purus, porta ut rhoncus in, ornare quis lectus. Praesent ut lectus hendrerit, volutpat neque et.</li>
  172. <li><i class="fa-li far fa-lightbulb"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  173. </ul>
  174. </div>
  175. </div>
  176. </div>
  177. <!--- Footer background --->
  178. <div class="p-3 mt-2" style="background:url(https://i.imgur.com/M2qUXp5.png); background-position:-420px -700px; background-size:1500px;">
  179. <!--- Footer border --->
  180. <div class="p-2 justify-content-around" style="border:1px solid #fff;">
  181. <!--- Footer text --->
  182. <i class="far fa-quote-left font-weight-lighter mr-2" style="color:#fff; font-size:1.8em;"></i><h1 class="text-white text-center font-weight-lighter mb-0" style="font-size:2.5em;">Quotation goes here. One line is best.</h1><i class="far fa-quote-right font-weight-lighter ml-2" style="color:#fff; font-size:1.8em;"></i>
  183. </div>
  184. </div>
  185. </div>
  186. <div class="text-right">
  187. <a data-toggle="tooltip" title="theme by noll" href="https://toyhou.se/HTMLobster" style="color:#8aae9a;"><i class="far fa-code"></i></a> <a data-toggle="tooltip" title="bg from unsplash" href="https://unsplash.com/photos/OWq8w3BYMFY" style="color:#8aae9a;"><i class="far fa-camera"></i></a>
  188. </div>
  189. </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!