Advertisement
Crowzii

Species ref (with carousel)

Aug 22nd, 2022 (edited)
79
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.97 KB | Source Code | 0 0
  1.  <!--- This is one of my first codes, so it's not exactly amazing or perfect but it works and that's all I care about.
  2.  
  3.  
  4.  
  5.  If you'd like to frankenstein this in anyway go right ahead! All I ask is that my credit isn't deleted!--->
  6.  
  7.  
  8.  
  9.   <div class="mx-auto" style="max-width: 900px; height:940px">
  10.  
  11. <!-- ittle photo start -->
  12. <img src="URL HERE" class="btn btn-outline-transparent p-0  tooltipster"
  13. style="height:200px;width:200px;position:absolute; top:2.5%;left:1%;z-index:3;>
  14. <!-- ittle photo end -->
  15.  
  16. <div class="mx-auto" style="max-width: 900px; height:445px">
  17.  
  18.     <div class="container" style="background-image: url(URL HERE);background-size: contain;
  19. background-repeat: no-repeat;background-position:center;background-attachment: ;width:900px;height:442px;padding:10px;">
  20.  
  21.  
  22.  
  23.    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  24.  
  25.   <div class="card p-2 mb-2 col-12" style="
  26. border-top-right-radius:15px;
  27. border-top-left-radius:15px;
  28. border-bottom-right-radius:0px;
  29. border-bottom-left-radius:0px;">
  30.  
  31.   <div class="col">
  32.  
  33.   <p class="font-italic" style="font-size: 18px; letter-spacing: 2px;"><i class="fas fa-sun fa-spin" style="animation-duration:10s"></i>Header name</p></div><div class="pr-2" style="height: 150px; overflow-y: auto; overflow-x: hidden;">
  34.  
  35.   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla aliquet porttitor lacus luctus accumsan tortor posuere. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Maecenas sed enim ut sem viverra aliquet eget sit. Vitae justo eget magna fermentum iaculis eu. Risus sed vulputate odio ut enim. Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Auctor neque vitae tempus quam. Amet aliquam id diam maecenas ultricies mi eget. Duis at tellus at urna condimentum mattis pellentesque id nibh. Pretium nibh ipsum consequat nisl.
  36.  
  37.     </p><p>
  38.  
  39.   Est lorem ipsum dolor sit amet. Metus dictum at tempor commodo ullamcorper a lacus. Eleifend quam adipiscing vitae proin. Ultrices in iaculis nunc sed. Bibendum enim facilisis gravida neque convallis a cras semper. Ullamcorper morbi tincidunt ornare massa eget egestas. Sollicitudin tempor id eu nisl. Amet facilisis magna etiam tempor orci eu lobortis elementum nibh. Cursus mattis molestie a iaculis at. Neque convallis a cras semper auctor neque vitae tempus. Maecenas accumsan lacus vel facilisis volutpat est.</div></div>
  40.  
  41.  
  42.  
  43.   <div class="card p-2 mb-3" style="
  44. border-top-right-radius:0px;
  45. border-top-left-radius:0px;
  46. border-bottom-right-radius:15px;
  47. border-bottom-left-radius:15px;">
  48.  
  49.   <div class="col">
  50.  
  51.   <p class="font-italic" style="font-size: 18px; letter-spacing: 2px;"><i class="fas fa-moon fa-spin" style="animation-duration:10s"></i>Header name</p></div>
  52.  
  53.   <div class="pr-2" style="height: 250px; overflow-y: auto; overflow-x: hidden;">
  54.  
  55.   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla aliquet porttitor lacus luctus accumsan tortor posuere. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Maecenas sed enim ut sem viverra aliquet eget sit. Vitae justo eget magna fermentum iaculis eu. Risus sed vulputate odio ut enim. Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Auctor neque vitae tempus quam. Amet aliquam id diam maecenas ultricies mi eget. Duis at tellus at urna condimentum mattis pellentesque id nibh. Pretium nibh ipsum consequat nisl.
  56.  
  57.     </p><p>
  58.  
  59.   Est lorem ipsum dolor sit amet. Metus dictum at tempor commodo ullamcorper a lacus. Eleifend quam adipiscing vitae proin. Ultrices in iaculis nunc sed. Bibendum enim facilisis gravida neque convallis a cras semper. Ullamcorper morbi tincidunt ornare massa eget egestas. Sollicitudin tempor id eu nisl. Amet facilisis magna etiam tempor orci eu lobortis elementum nibh. Cursus mattis molestie a iaculis at. Neque convallis a cras semper auctor neque vitae tempus. Maecenas accumsan lacus vel facilisis volutpat est.
  60.  
  61.    </p><p>
  62.  
  63.   Eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque. Est lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque. Enim neque volutpat ac tincidunt vitae semper. Volutpat lacus laoreet non curabitur gravida arcu ac. Consectetur lorem donec massa sapien faucibus et. Iaculis eu non diam phasellus vestibulum lorem sed risus. Consectetur lorem donec massa sapien faucibus et molestie ac. Pharetra diam sit amet nisl suscipit adipiscing bibendum est ultricies. In eu mi bibendum neque egestas congue quisque egestas. Placerat duis ultricies lacus sed turpis tincidunt id aliquet. Massa enim nec dui nunc mattis enim ut tellus.</div></div></div></div>
  64.  
  65.   <!--- credit, please don't delete, feel free to move if you'd like--->
  66.  
  67.     <a class="tooltipster pull-right mr-2" href="https://toyhou.se/Crowzii"><i class="fas fa-lemon fa-fw text-center my-auto"></i></a>  
Tags: html
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement