API tools faq
paste
Yuchino

YUCHINO code epic Ruthlessness

Yuchino
Oct 25th, 2024
21
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.43 KB | None | 0 0
raw download clone embed print report
  1. <!--bg snippet-->
  2.  
  3. <div style="background: url("IMGURL"); background-repeat: no-repeat; background-position: center; background-attachment: fixed;background-size: cover; width:100%; height: 100%;position: absolute; top:0; bottom:0; left:0; right:0; z-index: -1;"></div>
  4. <!-- MAIN CONTAINER -->
  5. <div class="container-fluid px-0">
  6. <div class="row no-gutters">
  7.  
  8. <!-- [START] STICKY LEFT COLUMN -->
  9. <div class="col-lg-3"
  10. style="position: sticky; top: 0; height: 100vh;
  11. background-image: url('IMGURL');
  12. background-size: cover;
  13. background-position: center;
  14. background-repeat: no-repeat;">
  15.  
  16. <!-- [START] Character Name & Title -->
  17. <div class="position-absolute top-0 start-0 w-100 p-3 text-center"
  18. style="background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%)">
  19. <h1 class="text-white mb-1" style="font-size: 2.5rem; font-family: 'georgia';">
  20. NAME
  21. </h1>
  22. <div class="text-white-50 text-uppercase" style="letter-spacing: 2px;">
  23. Title
  24. </div>
  25. </div>
  26. <!-- [END] Character Name & Title -->
  27.  
  28. <!-- [START] Decorative Overlay Image -->
  29. <div class="position-absolute top-50 start-50 translate-middle"
  30. style="width: auto; height: 500px;">
  31. <img src="IMGURL"
  32. class="w-100 h-100"
  33. style="object-fit: contain; opacity: 1.0;">
  34. </div>
  35. <!-- [END] Decorative Overlay Image -->
  36.  
  37. <!-- [START] Music Player -->
  38. <div class="position-absolute bottom-0 start-0 w-100 bg-black bg-opacity-75 p-3">
  39. <!-- Song Info -->
  40. <div class="text-white text-center mb-2">
  41. <div class="font-weight-bold">Song</div>
  42. <div class="opacity-75 small">TITLE</div>
  43. </div>
  44.  
  45. <!-- Player Controls -->
  46. <div class="d-flex justify-content-center align-items-center">
  47. <i class="fas fa-backward text-white-50 mx-4" style="cursor: not-allowed;"></i>
  48.  
  49. <!-- Play Button (Functional) -->
  50. <div class="position-relative mx-4" style="cursor: pointer;">
  51. <iframe class="position-absolute" frameborder="0"
  52. style="height:1rem;width:1rem;opacity:0.002"
  53. src="https://www.youtube.com/embed/EMBEDHEREGETFROMYTLINK">
  54. </iframe>
  55. <i class="fas fa-play-circle text-white fa-lg"></i>
  56. </div>
  57.  
  58. <i class="fas fa-forward text-white-50 mx-4" style="cursor: not-allowed;"></i>
  59. </div>
  60. </div>
  61. <!-- [END] Music Player -->
  62. </div>
  63. <!-- [END] STICKY LEFT COLUMN -->
  64.  
  65. <!-- [START] MAIN CONTENT AREA -->
  66. <div class="col-lg-9">
  67. <div class="container-fluid p-0">
  68.  
  69. <!-- [START] Banner Section -->
  70. <div class="position-relative mb-0"> <!-- Change mb-5 to mb-0 -->
  71. <!-- Main Banner Image -->
  72. <div class="w-100" style="
  73. height: 250px;
  74. background-image: url('IMGURL');
  75. background-size: cover;
  76. background-position: center;">
  77.  
  78. <!-- Gradient Overlay -->
  79. <div class="position-absolute w-100 h-100" style="
  80. background: linear-gradient(to bottom,
  81. rgba(177,232,255,0.4) 0%,
  82. rgba(0,0,0,0.2) 50%,
  83. rgba(0,0,0,0.4) 100%);">
  84. </div>
  85.  
  86. <!-- Profile Circle Image -->
  87. <div class="position-absolute w-100 d-flex justify-content-center"
  88. style="top: 50%; transform: translateY(-100%); z-index: 999;">
  89. <div style="
  90. width: 225px;
  91. height: 225px;
  92. border-radius: 50%;
  93. border: 1px solid #32578c;
  94. overflow: hidden;">
  95.  
  96. <div style="
  97. width: 100%;
  98. height: 100%;
  99. background-image: url('IMGURL;">
  100. </div>
  101. </div>
  102. </div>
  103. </div>
  104. </div>
  105. <!-- [END] Banner Section -->
  106.  
  107. <!-- [START] Title Box Section -->
  108. <div style="background-color: #000000; color: #ffffff; padding: 16px; text-align: center; margin-top: 0; margin-bottom: 0; font-family: 'Georgia'; position: relative;">
  109. <h2 style="margin: 0; position: relative; z-index: 1; font-size: 2em; text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);">✧ "quote."</h2>
  110. </div>
  111. <!-- [END] Title Box Section -->
  112.  
  113.  
  114.  
  115.  
  116. <!-- [ADD YOUR MAIN CONTENT SECTIONS HERE] -->
  117. <div class="container py-4">
  118. <!-- [START] Black Box Section -->
  119. <div style="background-color: #000000; color: #FFFFFF; padding: 16px; margin-bottom: 0px; position: relative;">
  120. <i class="fas fa-fish" style="position: absolute; top: 10px; left: 10px; font-size: 1.5rem;"></i>
  121. <p style="margin-left: 40px;">This is a placeholder for some important information or content.</p>
  122. </div>
  123. <!-- [END] Black Box Section -->
  124.  
  125. <!-- [START] Moodboard Section -->
  126. <div class="row no-gutters">
  127. <div class="col-4 p-0">
  128. <img src="IMGURL" style="width: 100%; height: 250px; object-fit: cover;" alt="Moodboard Image 1">
  129. </div>
  130. <div class="col-4 p-0">
  131. <img src="IMGURL" style="width: 100%; height: 250px; object-fit: cover;" alt="Moodboard Image 2">
  132. </div>
  133. <div class="col-4 p-0">
  134. <img src="IMGURL" style="width: 100%; height: 250px; object-fit: cover;" alt="Moodboard Image 3">
  135. </div>
  136. </div>
  137. <!-- [END] Moodboard Section -->
  138.  
  139. <!-- [START] First Description -->
  140. <!-- START OF IMG -->
  141. <div class="row no-gutters mt-4">
  142. <div class="col-4 p-0"
  143. style="background-image: url('IMGURL'); background-size: cover; background-position: center; height: auto;">
  144. <!-- You can add other content here if needed -->
  145. </div>
  146. <!-- END OF IMG -->
  147. <div class="col-8 p-4" style="background-color: #f8f9fa; height: auto;">
  148. <div class="text-center mb-4"> <!-- Increased bottom margin -->
  149. <i class="fas fa-wave fa-lg" style="color: #32578c;"></i>
  150. <h3 style="margin: 0; font-family: 'georgia'; color: black;">Your Title Here</h3>
  151. </div>
  152. <p style="text-align: justify; margin-bottom: 2rem; color: black;"> <!-- Increased bottom margin -->
  153. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  154. </p>
  155.  
  156. <!-- [START] Gender and Pronouns Section -->
  157. <div class="row mb-4">
  158. <div class="col-8" style="padding: 1rem; background-color: black; color: white; border-radius: 0px;">
  159. <h4 style="margin-bottom: 1rem; text-align: center;">"Quote..."</h4>
  160. <div style="margin-bottom: 0.5rem;">
  161. <strong>✧ Name:</strong> text
  162. </div>
  163. <div style="margin-bottom: 0.5rem;">
  164. <strong>✧ Pronouns:</strong> text
  165. </div>
  166. <div style="margin-bottom: 0.5rem;">
  167. <strong>✧ Gender:</strong> text
  168. </div>
  169. <div style="margin-bottom: 0.5rem;">
  170. <strong>✧ Domain:</strong> text
  171. </div>
  172. <div style="margin-bottom: 0.5rem;">
  173. <strong>✧ Rank:</strong> text
  174. </div>
  175. </div>
  176. <div class="col-4 p-0 d-flex align-items-center justify-content-center">
  177. <img src="IMGURL" style="max-width: 100%; height: auto; border-radius: 0px;" alt="Descriptive Image">
  178. </div>
  179. </div>
  180. <!-- [END] Gender and Pronouns Section -->
  181.  
  182. </div>
  183. </div>
  184. <!-- [END] First Description -->
  185.  
  186. <!-- [START] Banner Section -->
  187. <div class="row no-gutters" style="margin-top: 20px;">
  188. <div class="col-12 p-0"
  189. style="background-image: url('IMGURL');
  190. background-size: cover;
  191. background-position: center;
  192. height: 120px;">
  193. <!-- Content can go here if needed -->
  194. </div>
  195. </div>
  196. <!-- [END] Banner Section -->
  197. <!-- [START] New Split Section -->
  198. <div class="row no-gutters mt-4">
  199. <div class="col-8 p-4" style="background-color: #eefbff;">
  200. <div class="text-center mb-4">
  201. <h3 style="margin: 0; font-family: 'georgia'; color: black;">"Quote......"</h3>
  202. </div>
  203.  
  204. <!-- [START] Details Section -->
  205. <div class="mb-4" style="color: black;"> <!-- Added color: black; -->
  206. <div style="margin-bottom: 0.5rem;">
  207. <strong>✧ Symbolic Animal:</strong> Your Animal Here
  208. </div>
  209. <div style="margin-bottom: 0.5rem;">
  210. <strong>✧ Weapon of Choice:</strong> Your Weapon Here
  211. </div>
  212. <div style="margin-bottom: 0.5rem;">
  213. <strong>✧ Patron Cities:</strong> Your Cities Here
  214. </div>
  215. <!-- Add more details as needed -->
  216. </div>
  217. <!-- [END] Details Section -->
  218.  
  219.  
  220. <!-- [START] Stats Section -->
  221. <div style="background-color: black; color: white; padding: 1rem; border-radius: 5px;">
  222. <div class="mb-4">
  223. <div class="d-flex justify-content-between align-items-center mb-1">
  224. <span>Stat 1</span>
  225. <span>80%</span>
  226. </div>
  227. <div style="background-color: #e0e0e0; border-radius: 5px;">
  228. <div style="width: 80%; height: 10px; background-color: #fff; border-radius: 5px;"></div>
  229. </div>
  230.  
  231. <div class="d-flex justify-content-between align-items-center mb-1">
  232. <span>Stat 2</span>
  233. <span>65%</span>
  234. </div>
  235. <div style="background-color: #e0e0e0; border-radius: 5px;">
  236. <div style="width: 65%; height: 10px; background-color: #fff; border-radius: 5px;"></div>
  237. </div>
  238.  
  239. <div class="d-flex justify-content-between align-items-center mb-1">
  240. <span>Stat 3</span>
  241. <span>90%</span>
  242. </div>
  243. <div style="background-color: #e0e0e0; border-radius: 5px;">
  244. <div style="width: 90%; height: 10px; background-color: #fff; border-radius: 5px;"></div>
  245. </div>
  246.  
  247. <div class="d-flex justify-content-between align-items-center mb-1">
  248. <span>Stat 4</span>
  249. <span>75%</span>
  250. </div>
  251. <div style="background-color: #e0e0e0; border-radius: 5px;">
  252. <div style="width: 75%; height: 10px; background-color: #fff; border-radius: 5px;"></div>
  253. </div>
  254.  
  255. <div class="d-flex justify-content-between align-items-center mb-1">
  256. <span>Stat 5</span>
  257. <span>50%</span>
  258. </div>
  259. <div style="background-color: #e0e0e0; border-radius: 5px;">
  260. <div style="width: 50%; height: 10px; background-color: #fff; border-radius: 5px;"></div>
  261. </div>
  262.  
  263. <div class="d-flex justify-content-between align-items-center mb-1">
  264. <span>Stat 6</span>
  265. <span>40%</span>
  266. </div>
  267. <div style="background-color: #e0e0e0; border-radius: 5px;">
  268. <div style="width: 40%; height: 10px; background-color: #fff; border-radius: 5px;"></div>
  269. </div>
  270. </div>
  271. </div>
  272. <!-- [END] Stats Section -->
  273.  
  274. </div>
  275. <div class="col-4 p-0">
  276. <img src="IMGURL"
  277. style="width: 100%; height: 100%; object-fit: cover;"
  278. alt="Descriptive Image">
  279. </div>
  280. </div>
  281. <!-- [END] New Split Section -->
  282.  
  283. <!-- [START] New Three-Column Section -->
  284. <div class="row no-gutters mt-4">
  285. <!-- Left Column -->
  286. <div class="col-4 p-4 d-flex flex-column justify-content-center" style="background-color: #f8f9fa; font-family: 'Georgia';">
  287. <!-- Appearance Section -->
  288. <h4 style="margin-bottom: 0.5rem; color: black;">Appearance</h4>
  289. <p style="margin-bottom: 1rem; color: black;">This is a smaller text description for Appearance.
  290. <i class="fas fa-sparkles" style="color: #32578c;"></i>
  291. </p>
  292.  
  293. <!-- Build Section -->
  294. <h4 style="margin-bottom: 0.5rem; color: black;">Build</h4>
  295. <p style="margin-bottom: 1rem; color: black;">This is a smaller text description for Build.
  296. <i class="fas fa-sparkles" style="color: #32578c;"></i>
  297. </p>
  298.  
  299. <!-- Fashion Section -->
  300. <h4 style="margin-bottom: 0.5rem; color: black;">Fashion</h4>
  301. <p style="margin-bottom: 1rem; color: black;">This is a smaller text description for Fashion.
  302. <i class="fas fa-sparkles" style="color: #32578c;"></i>
  303. </p>
  304.  
  305. <!-- Color Palette -->
  306. <div style="display: flex; justify-content: space-between;">
  307. <div style="width: 18%; height: 30px; background-color: #2E86C1;"></div>
  308. <div style="width: 18%; height: 30px; background-color: #5DADE2;"></div>
  309. <div style="width: 18%; height: 30px; background-color: #85C1AE;"></div>
  310. <div style="width: 18%; height: 30px; background-color: #3498DB;"></div>
  311. <div style="width: 18%; height: 30px; background-color: #1F618D;"></div>
  312. </div>
  313. </div>
  314.  
  315. <!-- Center Column (Image) -->
  316. <div class="col-4 p-0">
  317. <img src="IMGURL"
  318. style="width: 100%; height: 100%; object-fit: cover;"
  319. alt="Descriptive Image">
  320. </div>
  321.  
  322. <!-- Right Column -->
  323. <!-- Right Column -->
  324. <div class="col-4 p-4 d-flex flex-column justify-content-center" style="background-color: #f8f9fa; font-family: 'Georgia';">
  325. <h4 style="margin-bottom: 1rem; color: black;">Your Title Here</h4>
  326. <ul style="list-style-type: disc; padding-left: 1.5rem; color: black;">
  327. <li style="color: black;">Bullet Point 1</li>
  328. <li style="color: black;">Bullet Point 2</li>
  329. <li style="color: black;">Bullet Point 3</li>
  330. <li style="color: black;">Bullet Point 4</li>
  331. <li style="color: black;">Bullet Point 5</li>
  332. </ul>
  333.  
  334. </div>
  335. </div>
  336. <!-- [END] New Three-Column Section -->
  337. <!-- [START] Character Carousel Section -->
  338. <div id="characterCarousel" class="carousel slide" data-ride="carousel" style="max-width: 600px; margin: auto;">
  339. <div class="carousel-inner">
  340. <!-- Slide 1 -->
  341. <div class="carousel-item active">
  342. <div class="row no-gutters">
  343. <!-- Character Image as Background -->
  344. <div class="col-6 p-0"
  345. style="background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/characters/29752395?1729160348');
  346. background-size: cover;
  347. background-position: center;
  348. height: auto;">
  349. </div>
  350. <!-- Character Details -->
  351. <div class="col-6 p-2" style="background-color: black; color: white; border-radius: 5px;">
  352. <h5 style="font-weight: bold; margin: 0;">Character Title 1</h5>
  353. <h6 style="margin: 0; font-size: smaller;">Smaller Title 1</h6>
  354. <div style="margin-bottom: 0.5rem;">
  355. <i class="fas fa-fish" style="color: blue;"></i>
  356. <i class="fas fa-fish" style="color: blue;"></i>
  357. <i class="fas fa-fish" style="color: blue;"></i>
  358. <i class="fas fa-fish" style="color: blue;"></i>
  359. <i class="fas fa-fish" style="color: blue;"></i>
  360. </div>
  361. <p style="font-size: smaller;">This is a brief description of Character 1. It provides insight into their relationship. This does not scroll.</p>
  362. </div>
  363. </div>
  364. </div>
  365.  
  366. <!-- Slide 2 -->
  367. <div class="carousel-item">
  368. <div class="row no-gutters">
  369. <!-- Character Image as Background -->
  370. <div class="col-6 p-0"
  371. style="background-image: url('https://example.com/icon2.png');
  372. background-size: cover;
  373. background-position: center;
  374. height: auto;
  375. ">
  376. </div>
  377. <!-- Character Details -->
  378. <div class="col-6 p-2" style="background-color: black; color: white; border-radius: 5px;">
  379. <h5 style="font-weight: bold; margin: 0;">Character Title 2</h5>
  380. <h6 style="margin: 0; font-size: smaller;">Smaller Title 2</h6>
  381. <div style="margin-bottom: 0.5rem;">
  382. <i class="fas fa-heart" style="color: red;"></i>
  383. <i class="fas fa-heart" style="color: red; opacity: 0.5;"></i>
  384. </div>
  385. <p style="font-size: smaller;">This is a brief description of Character 2. It provides more detail about their traits, skills, and background.</p>
  386. </div>
  387. </div>
  388. </div>
  389.  
  390. <!-- Slide 3 -->
  391. <div class="carousel-item">
  392. <div class="row no-gutters">
  393. <!-- Character Image as Background -->
  394. <div class="col-6 p-0"
  395. style="background-image: url('https://example.com/icon3.png');
  396. background-size: cover;
  397. background-position: center;
  398. height: auto;">
  399. </div>
  400. <!-- Character Details -->
  401. <div class="col-6 p-2" style="background-color: black; color: white; border-radius: 5px;">
  402. <h5 style="font-weight: bold; margin: 0;">Character Title 3</h5>
  403. <h6 style="margin: 0; font-size: smaller;">Smaller Title 3</h6>
  404. <div style="margin-bottom: 0.5rem;">
  405. <i class="fas fa-heart" style="color: red;"></i>
  406. <i class="fas fa-heart" style="color: red; opacity: 0.5;"></i>
  407. </div>
  408. <p style="font-size: smaller;">This is a brief description of Character 3. It provides more detail about their traits, skills, and background.</p>
  409. </div>
  410. </div>
  411. </div>
  412. </div>
  413.  
  414. <div style="position: relative; z-index: 10;">
  415. <a class="carousel-control-prev" href="#characterCarousel" role="button" data-slide="prev">
  416. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  417. <span class="sr-only">Previous</span>
  418. </a>
  419. <a class="carousel-control-next" href="#characterCarousel" role="button" data-slide="next">
  420. <span class="carousel-control-next-icon" aria-hidden="true"></span>
  421. <span class="sr-only">Next</span>
  422. </a>
  423. </div>
  424. </div>
  425. <!-- [END] Character Carousel Section -->
  426. <div style="text-align: center; margin-top: 20px;">
  427. <a href="https://toyhou.se/Yuchino" target="_blank" style="text-decoration: none; color: black;">
  428. <i class="fas fa-heart" style="font-size: 10px;"></i>
  429. <div style="margin-top: 2px;">Code by Yuchino</div>
  430. </a>
  431. </div>
  432.  
  433.  
  434.  
  435.  
  436.  
  437.  
  438.  
  439.  
  440.  
  441.  
  442. </div>
  443. <!-- [END MAIN CONTENT SECTIONS] -->
  444. </div>
  445. </div>
  446. <!-- [END] MAIN CONTENT AREA -->
  447. </div>
  448. </div>
  449. <!-- [END] MAIN CONTAINER -->
  450.  
  451.  
Advertisement
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!