API tools faq
paste
Advertisement
tiffbu

snails profile

tiffbu
Jan 25th, 2022
27
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 54.91 KB | None | 0 0
raw download clone embed print report
  1. <div class="mx-auto" style="max-width:1000px; height:570px; background-color: #F9F3E8; border-radius:15px;">
  2.  
  3. <!-----TABS----->
  4. <div class="card-header" style="background-color: #F0E5D2; border-top-right-radius: 15px; border-top-left-radius:15px;">
  5. <ul class="nav nav-tabs card-header-tabs nav-justified">
  6.  
  7.  
  8. <!-----GOOGLE TAB----->
  9. <li class="nav-item">
  10. <a class="nav-link active" data-toggle="tab" href="#google" style="background-color: #F9F3E8; color: black">
  11. <span class="justify-content-between rounded-0">
  12. <span class="text-truncate"><i class="fab fa-google mr-2"></i>New Tab</span>
  13. <span><i class="fal fa-times"></i></span>
  14. </span>
  15. </a>
  16. </li>
  17.  
  18.  
  19. <!-----INSTAGRAM TAB----->
  20. <li class="nav-item">
  21. <a class="nav-link" data-toggle="tab" href="#insta" style="background-color: #F9F3E8; color: black">
  22. <span class="justify-content-between rounded-0">
  23. <span class="text-truncate"> <img src="https://www.goatlings.com/images/favicon.png" > </i>Goatlings</span>
  24. <span><i class="fal fa-times"></i></span>
  25. </span>
  26. </a>
  27. </li>
  28.  
  29.  
  30. <!-----TWITTER TAB----->
  31. <li class="nav-item">
  32. <a class="nav-link" data-toggle="tab" href="#twitter" style="background-color: #F9F3E8; color: black">
  33. <span class="justify-content-between rounded-0">
  34. <span class="text-truncate"><i class="fab fa-twitter mr-2"></i>Twitter (2)</span>
  35. <span><i class="fal fa-times"></i></span>
  36. </span>
  37. </a>
  38. </li>
  39.  
  40.  
  41. <!-----DISCORD TAB----->
  42. <li class="nav-item">
  43. <a class="nav-link" data-toggle="tab" href="#discord" style="background-color: #F9F3E8; color: black">
  44. <span class="justify-content-between rounded-0">
  45. <span class="text-truncate"><i class="fab fa-discord mr-2"></i>Discord (1)</span>
  46. <span><i class="fal fa-times"></i></span>
  47. </span>
  48. </a>
  49. </li>
  50.  
  51.  
  52. <!-----YOUTUBE TAB----->
  53. <li class="nav-item">
  54. <a class="nav-link" data-toggle="tab" href="#yt" style="background-color: #F9F3E8; color: black">
  55. <span class="justify-content-between rounded-0">
  56. <span class="text-truncate"><i class="fab fa-youtube mr-2"></i>Youtube (19)</span>
  57. <span><i class="fal fa-times"></i></span>
  58. </span>
  59. </a>
  60. </li>
  61.  
  62.  
  63. </ul>
  64. </div>
  65.  
  66. <!-----TABS END----->
  67. <div class="tab-content">
  68.  
  69. <!-----GOOGLE----->
  70. <div class="tab-pane show active" id="google">
  71. <!-----TOP BAR----->
  72. <div class="card-header" style="background-color: #F0E5D2; color: black">
  73. <div class="row no-gutters">
  74. <i class="far fa-arrow-left mt-1" style="cursor:pointer"></i>
  75. <i class="far fa-arrow-right ml-3 mt-1" style="cursor:pointer"></i>
  76. <i class="far fa-redo-alt ml-3 mt-1" style="cursor:pointer"></i>
  77.  
  78. <div class="col-10 ml-3 justify-content-between" style="background-color: #E1D2BA; height:20px; border-radius:25px; color:black">
  79. <span class="ml-2">Search Google or type a URL</span>
  80. <i class="far fa-star mr-2 mt-1" style="cursor:pointer"></i>
  81. </div>
  82.  
  83. <img src="https://cambodiaict.net/wp-content/uploads/2019/12/computer-icons-user-profile-google-account-photos-icon-account.jpg" style="height:20px; width:20px; border-radius:100%; cursor:pointer" class="ml-3">
  84.  
  85. <i class="far fa-ellipsis-v mt-1 ml-4" style="cursor:pointer"></i>
  86. </div>
  87. </div>
  88.  
  89.  
  90. <!-----below top bar??? idk----->
  91. <div class="card-block text-center" style="color: black; max-height:340px; overflow:auto">
  92.  
  93. <div class="row no-gutters justify-content-end mt-1">
  94. <span class="mt-1">Welcome back, Name!</span>
  95. <i class="far fa-th tooltipster mt-2 ml-2" title="Apps" style="cursor:pointer"></i>
  96. <img src="https://cambodiaict.net/wp-content/uploads/2019/12/computer-icons-user-profile-google-account-photos-icon-account.jpg" style="height:30px; width:30px; border-radius:100%; cursor:pointer" class="ml-3 mr-2">
  97. </div>
  98.  
  99. <!-----LOGO----->
  100. <span style="font-size:100px; font-weight:600">
  101.  
  102. <span style="color: blue">G</span>
  103. <span style="color: red; margin-left:-30px">o</span>
  104. <span style="color: yellow; margin-left:-30px">o</span>
  105. <span style="color: blue; margin-left:-30px">g</span>
  106. <span style="color: green; margin-left:-30px">l</span>
  107. <span style="color: red; margin-left:-30px">e</span>
  108.  
  109. </span>
  110.  
  111. <div class="col-8 mx-auto justify-content-between p-1" style="background-color: #E1D2BA; height:30px; border-radius:25px; color:black">
  112. <span class="ml-2"><i class="far fa-search mr-2"></i>Search Google or type a URL</span>
  113. <i class="far fa-microphone mr-2 mt-1" style="cursor:pointer"></i>
  114. </div>
  115.  
  116. <!-----RELATIONSHIPS----->
  117. <div class="row no-gutters justify-content-center mt-3">
  118.  
  119. <a href="URL HERE"><img src="https://cambodiaict.net/wp-content/uploads/2019/12/computer-icons-user-profile-google-account-photos-icon-account.jpg" style="height:70px; width:70px; border-radius:100%;" class="tooltipster" title="name - relationship"></a>
  120.  
  121. <a href="URL HERE"><img src="https://cambodiaict.net/wp-content/uploads/2019/12/computer-icons-user-profile-google-account-photos-icon-account.jpg" style="height:70px; width:70px; border-radius:100%;" class="ml-3 tooltipster" title="name - relationship"></a>
  122.  
  123. <a href="URL HERE"><img src="https://cambodiaict.net/wp-content/uploads/2019/12/computer-icons-user-profile-google-account-photos-icon-account.jpg" style="height:70px; width:70px; border-radius:100%;" class="ml-3 tooltipster" title="name - relationship"></a>
  124.  
  125. <a href="URL HERE"><img src="https://cambodiaict.net/wp-content/uploads/2019/12/computer-icons-user-profile-google-account-photos-icon-account.jpg" style="height:70px; width:70px; border-radius:100%;" class="ml-3 tooltipster" title="name - relationship"></a>
  126.  
  127. </div>
  128. <!-----RELATIONSHIPS END----->
  129. </div>
  130.  
  131.  
  132. </div>
  133. <!-----INSTAGRAM----->
  134. <div class="tab-pane" id="insta">
  135. <!-----TOP BAR----->
  136. <div class="card-header" style="background-color: #F0E5D2; color: black">
  137. <div class="row no-gutters">
  138. <i class="far fa-arrow-left mt-1" style="cursor:pointer"></i>
  139. <i class="far fa-arrow-right ml-3 mt-1" style="cursor:pointer"></i>
  140. <i class="far fa-redo-alt ml-3 mt-1" style="cursor:pointer"></i>
  141.  
  142. <div class="col-10 ml-3 justify-content-between" style="background-color: #E1D2BA; height:20px; border-radius:25px; color:black">
  143. <span class="ml-2">goatlings.com/</span>
  144. <i class="far fa-star mr-2 mt-1" style="cursor:pointer"></i>
  145. </div>
  146.  
  147. <img src="https://i.imgur.com/QUf2tz3.png" style="height:20px; width:20px; border-radius:100%; cursor:pointer" class="ml-3">
  148.  
  149. <i class="far fa-ellipsis-v mt-1 ml-4" style="cursor:pointer"></i>
  150. </div>
  151. </div>
  152.  
  153.  
  154. <!-----BELOW TOP BAR----->
  155.  
  156.  
  157. <!-----BELOW TOP BAR----->
  158.  
  159. <!-----BELOW TOP BAR----->
  160.  
  161. <div class="container h-100 w-100" style="background: url(https://i.imgur.com/s2UrWTl.jpg); position: absolute; z-index: 0; background-repeat: repeat-x;"></div>
  162.  
  163. <center><img src="https://www.goatlings.com/images/layout/GoatlingsHeader.jpg"></center>
  164. <div class="card card-block" style="border:1px ;background-color: #ffffcd; max-width:940px; ms-auto; ">
  165. <div id="user-info" style="float: left; width: 500px;">
  166. <p style="color:#604325"> Welcome <img src="https://www.goatlings.com/images/user_icons/snail.gif"> <a style="color: ;" href="nolink">Snail</a> - Your active Goatling is <a href="https://www.goatlings.com/mypets/">Aecon002</a>
  167. <p style="font-size: x-small; color:#604325; margin: -17px 0px 0px 0px;" > GoatTime 04:01:17 pm </p>
  168.  
  169.  
  170. <div id="user-info-points" style="float: right; margin: -40px -407px 0px 0px;">
  171. <p style="color:#604325"><a href="https://www.goatlings.com/mail/index/" ><img src="https://www.goatlings.com/images/layout/mail3.gif"></a>&nbsp;&nbsp;&nbsp;&nbsp;
  172. <a href="https://www.goatlings.com/cashshop"><img src="https://www.goatlings.com/images/layout/DD2.gif"></a> 0&nbsp;&nbsp;
  173. <a href="https://www.goatlings.com/bank"><img src="https://www.goatlings.com/images/layout/SS2.gif"></a> 206,238 </p>
  174. <div class="reset" style="clear: both;"></div>
  175. </div>
  176.  
  177.  
  178.  
  179.  
  180.  
  181. </div><div id="sidebar" style="position: relative; float: left; margin-right: 30px; padding: 5px;">
  182.  
  183. <img src="https://i.imgur.com/QUf2tz3.png"><br>
  184. <img src="https://www.goatlings.com/images/layout/navihome2.gif" style="margin: 3px 0px 0px 0px;"><br>
  185. <img src="https://www.goatlings.com/images/layout/navitownmap.gif" style="margin: 2px 0px 0px 0px;"><br>
  186. <img src="https://www.goatlings.com/images/layout/navinews.gif" style="margin: 2px 0px 0px 0px;" ><br>
  187. <img src="https://www.goatlings.com/images/layout/navimystuff.gif" style="margin: 2px 0px 0px 0px;" ><br>
  188. <img src="https://www.goatlings.com/images/layout/navicommunitycenter.gif" style="margin: 2px 0px 0px 0px;" ><br>
  189. <img src="https://www.goatlings.com/images/layout/naviadopt.gif" style="margin: 2px 0px 0px 0px;" ><br>
  190. <img src="https://www.goatlings.com/images/layout/naviarcade.gif" style="margin: 2px 0px 0px 0px;" ><br>
  191. <img src="https://www.goatlings.com/images/layout/navishop.gif" style="margin: 2px 0px 0px 0px;" ><br>
  192. <img src="https://www.goatlings.com/images/layout/navibattle.gif" style="margin: 2px 0px 0px 0px;" ><br>
  193. <img src="https://www.goatlings.com/images/layout/naviforum.gif" style="margin: 2px 0px 0px 0px;" ><br>
  194. <img src="https://www.goatlings.com/images/layout/naviexplore.gif" style="margin: 2px 0px 0px 0px;" ><br>
  195. <img src="https://www.goatlings.com/images/layout/navicreativepark.gif" style="margin: 2px 0px 0px 0px;" ><br>
  196.  
  197. <p class="navlink"><a href="https://www.goatlings.com/login/logout/8aa15befca7041383170e55f2df92d96/" onclick="return confirm('Are you sure you want to logout?')"><img src="https://www.goatlings.com/images/layout/navilogout.gif"></a></p>
  198.  
  199.  
  200.  
  201.  
  202.  
  203.  
  204.  
  205.  
  206. <div id="content" style="position: relative; float: left; background: #FFF; width: 760px;
  207. border-radius: 4px 4px 4px 4px;
  208. margin: 5px;
  209. padding: 10px;
  210. min-height: 500px;">
  211. <h2 class="page-title" style="color:#604325; border-bottom: 1px solid #ccc5bd;">Forums</h2>
  212. <center style="color:#604325">Welcome to the forums; the bustling hub of the Goatlings community!
  213. <br>Please remember to be kind, courteous, and respectful to fellow members. <br>
  214. Topics have a maximum post count of 500. If the post count is reached, the Topic will be auto-locked. Thank you!<br><br>
  215. <a href="https://www.goatlings.com/forums/newest_posts/">Newest Posts</a> - <a href="https://www.goatlings.com/forums/newest_topics/">Newest Topics</a> - <a href="https://www.goatlings.com/forums/yourposts/">Your Posts</a> - <a href="https://www.goatlings.com/forums/yourtopics/">Your Topics</a> - <a href="https://www.goatlings.com/forums/favourites/">Favorites</a> - <a href="https://www.goatlings.com/emotes/">Emote List</a> - <a href="https://www.goatlings.com/forumguide/">Forum HTML Guide</a> - <a href="https://www.goatlings.com/Live_Chat">Live Chat</a><br><br>
  216.  
  217.  
  218. <form action="https://www.goatlings.com/forums/search" method="post" accept-charset="utf-8">
  219. <input type="hidden" name="csrf_test_name" value="8aa15befca7041383170e55f2df92d96">
  220. Search Forums: <input type="text" name="search"> <input type="submit" name="s" value="Search">
  221. </form>
  222.  
  223. <!-- BEGIN CBOX - www.cbox.ws - v4.1 -->
  224. <img src="https://i.imgur.com/ORBe5mM.png" title="source: imgur.com" />
  225. <br>
  226. <!-- END CBOX --><a href="https://www.goatlings.com/Live_Chat"><font size="1">Click here to open full Live Chat</font></a><br>
  227.  
  228.  
  229. <table width="700" cellpadding="5" style="color:#604325"><tbody><tr><td width="500">Category</td><td width="50">Topics</td><td width="150">Last Reply</td></tr>
  230.  
  231. <tr bgcolor="#dbe7fd"><td><a href="https://www.goatlings.com/forums/view/16/">News &amp; Announcements</a><br>» News from staff is posted here!</td><td>2955</td><td>22-01-24 06:05:19<br>by <span><img src="https://www.goatlings.com/images/user_icons/cat.gif"> <a style="color: ;" href="https://www.goatlings.com/profile/u/86833">HappyMintKit</a></span></td></tr>
  232.  
  233. <tr bgcolor="#FFFFFF"><td><a href="https://www.goatlings.com/forums/view/16/">Official Contests And Events</a><br>» Special event topics for voting and submitting entries. For official site events only.</td><td>296</td><td>22-01-25 03:16:25<br>by <span><img src="https://www.goatlings.com/images/user_icons/MusicNote.gif"> <a style="color: ;" href="https://www.goatlings.com/profile/u/4696"><font color="#92d4c2"><b>violist</b></font></a></span></td></tr>
  234.  
  235. <tr bgcolor="#dbe7fd"><td><a href="https://www.goatlings.com/forums/view/4/">Introductions</a><br>» Tell us a little about yourself and welcome our other newest members</td><td>3437</td><td>22-01-25 02:17:56<br>by <span><img src="https://www.goatlings.com/images/items/KittyFace.gif"> <a style="color: ;" href="https://www.goatlings.com/profile/u/94004">Catastrophic</a></span></td></tr>
  236.  
  237. <tr bgcolor="#FFFFFF"><td><a href="https://www.goatlings.com/forums/view/1/">General Chat</a><br>» Talk about anything related to Goatlings</td><td>2519</td><td>22-01-25 03:51:38<br>by <span><img src="https://www.goatlings.com/images/user_icons/HotChocolate.gif"> <a style="color: ;" href="https://www.goatlings.com/profile/u/26367"><i><font color="#00cc00">kero</font><font color="#009966">kero</font><font color="#009999">kola</font></i></a></span></td></tr>
  238.  
  239. <tr bgcolor="#dbe7fd"><td><a href="https://www.goatlings.com/forums/view/5/">Help</a><br>» Friendly members and staff will always be here to lend a hand and answer questions. </td><td>3047</td><td>22-01-25 01:29:08<br>by <span><img src="https://www.goatlings.com/images/user_icons/DawnHeartIcon.gif"> <a style="color: ;" href="https://www.goatlings.com/profile/u/45780"><b><font color="#f19aa8">mystical</font><font color="#cccccc">systems</font></b></a></span></td></tr>
  240.  
  241. <tr bgcolor="#FFFFFF"><td><a href="https://www.goatlings.com/forums/view/8/">Ideas and Suggestions</a><br>» Voice your thoughts! Post ideas here and vote for the ones you like to get them implemented</td><td>1986</td><td>22-01-24 08:55:09<br>by <span><a style="color: ;" href="https://www.goatlings.com/profile/u/"></a></span></td></tr>
  242.  
  243. <tr bgcolor="#dbe7fd"><td><a href="https://www.goatlings.com/forums/view/3/">Bugs</a><br>» Report any bugs, glitches and spelling mistakes you may find here.</td><td>892</td><td>22-01-24 09:06:51<br>by <span><img src="https://www.goatlings.com/images/user_icons/frenchtoast.gif"> <a style="color: ;" href="https://www.goatlings.com/profile/u/75578"><i><font color="#FFFFFF">kh</font><font color="#d1925c">y</font><font color="#FFFFFF">kh</font><font color="#009966">u</font></i></a></span></td></tr>
  244.  
  245. <tr bgcolor="#FFFFFF"><td><a href="https://www.goatlings.com/forums/view/6/">Shops, Trades, &amp; Auctions</a><br>» Buy, sell, trade, and advertise.</td><td>9452</td><td>22-01-25 04:34:07<br>by <span><a style="color: ;" href="https://www.goatlings.com/profile/u/"></a></span></td></tr>
  246.  
  247. <tr bgcolor="#dbe7fd"><td><a href="https://www.goatlings.com/forums/view/20/">Battle</a><br>» Battle Center and Explore Area discussion! Chat about Baddies, training, strategies, tips, and all things battle related!</td><td>162</td><td>22-01-24 05:00:16<br>by <span><img src="https://www.goatlings.com/images/user_icons/AngelWingsIcon.gif"> <a style="color: ;" href="https://www.goatlings.com/profile/u/93834">lovecubus</a></span></td></tr>
  248.  
  249. <tr bgcolor="#FFFFFF"><td><a href="https://www.goatlings.com/forums/view/9/">Roleplay Chat</a><br>» Roleplay your Goatlings and other characters here.</td><td>457</td><td>22-01-25 01:48:22<br>by <span><img src="https://www.goatlings.com/images/user_icons/Rainbow.gif"> <a style="color: ;" href="https://www.goatlings.com/profile/u/92023"><b><font color="#ffcc00">Sunny</font><font color="#ff0066">Goat</font></b></a></span></td></tr>
  250.  
  251. <tr bgcolor="#dbe7fd"><td><a href="https://www.goatlings.com/forums/view/15/">Clubhouse Bulletin Board</a><br>» Recruit members or look for a Clubhouse to join here!</td><td>307</td><td>22-01-24 10:36:56<br>by <span><img src="https://www.goatlings.com/images/items/Butterfly.gif"> <a style="color: ;" href="https://www.goatlings.com/profile/u/16894"><b><font color="#ff9900">Sif</font></b></a></span></td></tr>
  252.  
  253. <tr bgcolor="#FFFFFF"><td><a href="https://www.goatlings.com/forums/view/12/">HA Buddy</a><br>» Everything related to HA Buddies can go here. </td><td>630</td><td>22-01-25 01:16:39<br>by <span><img src="https://www.goatlings.com/images/user_icons/frenchtoast.gif"> <a style="color: ;" href="https://www.goatlings.com/profile/u/75578"><i><font color="#FFFFFF">kh</font><font color="#d1925c">y</font><font color="#FFFFFF">kh</font><font color="#009966">u</font></i></a></span></td></tr>
  254.  
  255. <tr bgcolor="#dbe7fd"><td><a href="https://www.goatlings.com/forums/view/17/">Member Contests And Events</a><br>» Hold your own contests, giveaways, and events here!</td><td>1578</td><td>22-01-24 07:36:01<br>by <span><img src="https://www.goatlings.com/images/user_icons/Rainbow.gif"> <a style="color: ;" href="https://www.goatlings.com/profile/u/92023"><b><font color="#ffcc00">Sunny</font><font color="#ff0066">Goat</font></b></a></span></td></tr>
  256.  
  257. <tr bgcolor="#FFFFFF"><td><a href="https://www.goatlings.com/forums/view/7/">Galleries</a><br>» Show off your collection, view other collections, and get inspiration for new Galleries</td><td>220</td><td>22-01-08 06:37:31<br>by <span><img src="https://www.goatlings.com/images/user_icons/Terrarium.gif"> <a style="color: ;" href="https://www.goatlings.com/profile/u/33101"><font color="#ff0066">la</font><font color="#ff66ff">n</font><font color="#006699">d</font><font color="#ffcc00">e</font><font color="#ff66ff">g</font></a></span></td></tr>
  258.  
  259. <tr bgcolor="#dbe7fd"><td><a href="https://www.goatlings.com/forums/view/18/">Creative Writing Nook</a><br>» Share your written works here. Stories, fan lore, poems, and more! </td><td>280</td><td>22-01-25 03:27:53<br>by <span><img src="https://www.goatlings.com/images/user_icons/BabyPhan.gif"> <a style="color: ;" href="https://www.goatlings.com/profile/u/76694"><font color="#9534eb"><u><font color="#00cc00">A</font></u><u>non<font color="#00cc00">S</font>kulli</u></font></a></span></td></tr>
  260.  
  261. <tr bgcolor="#FFFFFF"><td><a href="https://www.goatlings.com/forums/view/14/">Artists Alley</a><br>» Place to share your art and open an Art Shop!</td><td>5584</td><td>22-01-25 04:59:20<br>by <span><img src="https://www.goatlings.com/images/user_icons/Ptarmigan.gif"> <a style="color: ;" href="https://www.goatlings.com/profile/u/4201"><b><i><font color="#CF6614">dr</font><font color="#ff9900">oi</font><font color="#CF6614">d</font></i></b></a></span></td></tr>
  262.  
  263. <tr bgcolor="#dbe7fd"><td><a href="https://www.goatlings.com/forums/view/13/">Member Created Designs</a><br>» Submit your Goatling, Ha Buddy, and other designs here and vote for your favorites to get them added to the site!</td><td>1557</td><td>22-01-25 04:35:07<br>by <span><img src="https://www.goatlings.com/images/user_icons/Daisy.gif"> <a style="color: ;" href="https://www.goatlings.com/profile/u/93305">Jewelkitty</a></span></td></tr>
  264.  
  265. <tr bgcolor="#FFFFFF"><td><a href="https://www.goatlings.com/forums/view/19/">Goatlings Gazette Submissions</a><br>» Submit your fanmade content for the Goatlings Gazzette; collectible mini fanbook made by all of us! Art, writings, screenshots, photos, and more!</td><td>50</td><td>22-01-15 12:06:07<br>by <span><img src="https://www.goatlings.com/images/user_icons/frogface.gif"> <a style="color: ;" href="https://www.goatlings.com/profile/u/93263">Phwog</a></span></td></tr>
  266.  
  267. <tr bgcolor="#dbe7fd"><td><a href="https://www.goatlings.com/forums/view/10/">Off Topic</a><br>» Everything Else! </td><td>3287</td><td>22-01-25 03:39:10<br>by <span><img src="https://www.goatlings.com/images/user_icons/frenchtoast.gif"> <a style="color: ;" href="https://www.goatlings.com/profile/u/75578"><i><font color="#FFFFFF">kh</font><font color="#d1925c">y</font><font color="#FFFFFF">kh</font><font color="#009966">u</font></i></a></span></td></tr></tbody></table> </center></div>
  268. </div>
  269.  
  270. </div>
  271. </div></div></div></div>
  272.  
  273. <!-----BELOW TOP BAR----->
  274.  
  275. </div>
  276. <!-----TWITTER----->
  277. <div class="tab-pane" id="twitter">
  278. <!-----TOP BAR----->
  279. <div class="card-header" style="background-color: #F0E5D2; color: black">
  280. <div class="row no-gutters">
  281. <i class="far fa-arrow-left mt-1" style="cursor:pointer"></i>
  282. <i class="far fa-arrow-right ml-3 mt-1" style="cursor:pointer"></i>
  283. <i class="far fa-redo-alt ml-3 mt-1" style="cursor:pointer"></i>
  284.  
  285. <div class="col-10 ml-3 justify-content-between" style="background-color: #E1D2BA; height:20px; border-radius:25px; color:black">
  286. <span class="ml-2">twitter.com/username</span>
  287. <i class="far fa-star mr-2 mt-1" style="cursor:pointer"></i>
  288. </div>
  289.  
  290. <img src="https://cambodiaict.net/wp-content/uploads/2019/12/computer-icons-user-profile-google-account-photos-icon-account.jpg" style="height:20px; width:20px; border-radius:100%; cursor:pointer" class="ml-3">
  291.  
  292. <i class="far fa-ellipsis-v mt-1 ml-4" style="cursor:pointer"></i>
  293. </div>
  294. </div>
  295.  
  296. <div class="card-block text-center" style="color: black; max-height:340px; overflow:auto; background-color:white">
  297. <div class="row no-gutters ml-5 mr-5">
  298.  
  299. <!-----COLUMN 1 - FAKE NAV BAR----->
  300. <div class="col-lg-3 text-left">
  301.  
  302. <i class="fab fa-twitter" style="font-size:25px; color: #09C9F9; cursor:pointer"></i>
  303.  
  304. <hr class="mt-1 mb-3" style="visibility:hidden">
  305.  
  306. <i class="far fa-home" style="font-size:25px; cursor:pointer"></i>
  307. <span style="font-size:20px">Home</span>
  308.  
  309. <hr class="mt-1 mb-2" style="visibility:hidden">
  310.  
  311. <i class="far fa-hashtag" style="font-size:25px; cursor:pointer"></i>
  312. <span style="font-size:20px">Explore</span>
  313.  
  314. <hr class="mt-1 mb-2" style="visibility:hidden">
  315.  
  316. <i class="far fa-bell" style="font-size:25px; cursor:pointer"></i>
  317. <span style="font-size:20px">Notifications</span>
  318. <span class="badge" style="background-color: #09c9f9; cursor:pointer">2</span>
  319.  
  320. <hr class="mt-1 mb-2" style="visibility:hidden">
  321.  
  322. <i class="far fa-envelope" style="font-size:25px; cursor:pointer"></i>
  323. <span style="font-size:20px">Messages</span>
  324.  
  325. <hr class="mt-1 mb-2" style="visibility:hidden">
  326.  
  327. <i class="far fa-bookmark" style="font-size:25px; cursor:pointer"></i>
  328. <span style="font-size:20px">Bookmarks</span>
  329.  
  330. <hr class="mt-1 mb-2" style="visibility:hidden">
  331.  
  332. <i class="far fa-list-alt" style="font-size:25px; cursor:pointer"></i>
  333. <span style="font-size:20px">Lists</span>
  334.  
  335. <hr class="mt-1 mb-2" style="visibility:hidden">
  336.  
  337. <i class="fas fa-user" style="font-size:25px; cursor:pointer"></i>
  338. <span style="font-size:20px; font-weight:bold">Profile</span>
  339.  
  340. <hr class="mt-1 mb-2" style="visibility:hidden">
  341.  
  342. <i class="far fa-ellipsis-h" style="font-size:25px; cursor:pointer"></i>
  343. <span style="font-size:20px">More</span>
  344.  
  345. <hr class="mt-1 mb-2" style="visibility:hidden">
  346.  
  347. <button type="button" class="btn" style="background-color: #09c9f9; border-radius:25px; width:200px; color: white; font-weight:bold; font-size:17px">Tweet</button>
  348.  
  349.  
  350. </div>
  351.  
  352. <!-----COLUMN 2 - USER----->
  353. <div class="card text-left" style="width:400px; background-color:white">
  354. <div class="card-header" style="background-color: white; font-size:17px">
  355.  
  356. <i class="far fa-arrow-left" style="cursor:pointer"></i>
  357.  
  358. <span class="ml-2" style="font-weight:bold;">display name</span>
  359. <hr class="mt-1 mb-2" style="visibility:hidden">
  360. <span style="margin-left:25px;">3 tweets</span>
  361. </div>
  362. <!-----BANNER----->
  363. <div class="card" style="height:150px; background-image: url(https://i.pinimg.com/originals/d2/72/6c/d2726cb99011817ddafeae35c46e5f28.jpg); background-position: center">
  364.  
  365. </div>
  366. <!-----PFP----->
  367. <div class="card ml-2" style="border-radius: 100%; height:100px; width:100px; margin-top:-80px; background-image: url(https://cambodiaict.net/wp-content/uploads/2019/12/computer-icons-user-profile-google-account-photos-icon-account.jpg); border-width:5px; border-color: white; background-size:cover">
  368.  
  369. </div>
  370. <!-----USERNAME, ABOUT, other stuff----->
  371. <span style="font-weight:bold; font-size:17px" class="mt-2 ml-3">display name</span>
  372. <hr class="mt-1 mb-1" style="visibility:hidden">
  373. <span style="font-weight:normal; font-size:15px" class="mt-2 ml-3">username</span>
  374. <hr class="mt-1 mb-1" style="visibility:hidden">
  375. <div class="col-lg-12" style="max-height: 100px; overflow:auto">
  376. An about section goes here! This box scrolls. 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.
  377. </div>
  378. <div class="row">
  379. <i class="fal fa-map-marker-alt ml-3 mt-4" style="font-size:15px"></i>
  380. <span style="font-size:17px" class="mt-3 ml-2">Location</span>
  381.  
  382. <i class="fal fa-birthday-cake ml-3 mt-4" style="font-size:15px"></i>
  383. <span style="font-size:17px" class="mt-3 ml-2">Bday</span>
  384.  
  385. <i class="fal fa-calendar ml-3 mt-4" style="font-size:15px"></i>
  386. <span style="font-size:17px" class="mt-3 ml-2">Joined [date]</span>
  387. </div>
  388. <!-----useless stuff wooo----->
  389. <div class="card-header text-center" style="background-color: white; font-size:15px">
  390.  
  391. <span style="font-weight:bold">Tweets</span>
  392.  
  393. <span class="ml-4">Tweets & Replies</span>
  394.  
  395. <span class="ml-4">Media</span>
  396.  
  397. <span class="ml-4">Likes</span>
  398. </div>
  399. <!-----TWEETS - there are only three but if you know what you're doing, feel free to add more!----->
  400.  
  401. <!-----TWEET----->
  402. <div class="card" style="background-color: white">
  403. <div class="row no-gutters mt-2">
  404. <img src="https://cambodiaict.net/wp-content/uploads/2019/12/computer-icons-user-profile-google-account-photos-icon-account.jpg" style="height:40px; width:40px; border-radius:100%; cursor:pointer" class="ml-3">
  405. <span class="ml-2" style="font-weight:bold">display name</span>
  406. <span class="ml-2" style="font-weight:normal">username • Date</span>
  407. </div>
  408. <hr class="mt-1 mb-1" style="visibility:hidden">
  409. <span class="mb-2" style="font-weight:normal; margin-left:65px; margin-top:-30px">This is a normal tweet!</span>
  410. <div class="row no-gutters mb-2 justify-content-center">
  411.  
  412. <i class="far fa-comment" style="font-size:17px; cursor:pointer"></i>1
  413.  
  414. <i class="far fa-retweet ml-5" style="font-size:17px; cursor:pointer"></i>1
  415.  
  416. <i class="far fa-heart ml-5" style="font-size:17px; cursor:pointer"></i>2
  417.  
  418. <i class="far fa-share ml-5" style="font-size:17px; cursor:pointer"></i>
  419. </div>
  420. </div>
  421. <!-----TWEET WITH IMAGE----->
  422. <div class="card" style="background-color: white">
  423. <div class="row no-gutters mt-2">
  424. <img src="https://cambodiaict.net/wp-content/uploads/2019/12/computer-icons-user-profile-google-account-photos-icon-account.jpg" style="height:40px; width:40px; border-radius:100%; cursor:pointer" class="ml-3">
  425. <span class="ml-2" style="font-weight:bold">display name</span>
  426. <span class="ml-2" style="font-weight:normal">username • Date</span>
  427. </div>
  428. <hr class="mt-1 mb-1" style="visibility:hidden">
  429. <span class="mb-2" style="font-weight:normal; margin-left:65px; margin-top:-30px">This is a tweet with an image!</span>
  430.  
  431. <div class="card ml-5 mb-2" style="background-image: url(https://i.pinimg.com/originals/d2/72/6c/d2726cb99011817ddafeae35c46e5f28.jpg); width:300px; height:200px; background-position: center"></div>
  432.  
  433. <div class="row no-gutters mb-2 justify-content-center">
  434.  
  435. <i class="far fa-comment" style="font-size:17px; cursor:pointer"></i>3
  436.  
  437. <i class="far fa-retweet ml-5" style="font-size:17px; cursor:pointer"></i>5
  438.  
  439. <i class="far fa-heart ml-5" style="font-size:17px; cursor:pointer"></i>43
  440.  
  441. <i class="far fa-share ml-5" style="font-size:17px; cursor:pointer"></i>
  442. </div>
  443. </div>
  444.  
  445. <!-----TWEET WITH REPLY----->
  446. <div class="card" style="background-color: white">
  447. <div class="row no-gutters mt-2">
  448. <img src="https://cambodiaict.net/wp-content/uploads/2019/12/computer-icons-user-profile-google-account-photos-icon-account.jpg" style="height:40px; width:40px; border-radius:100%; cursor:pointer" class="ml-3">
  449. <span class="ml-2" style="font-weight:bold">display name</span>
  450. <span class="ml-2" style="font-weight:normal">username • Date</span>
  451. </div>
  452. <hr class="mt-1 mb-1" style="visibility:hidden">
  453. <span class="mb-2" style="font-weight:normal; margin-left:65px; margin-top:-30px">This is a tweet with a reply!</span>
  454. <div class="row no-gutters mb-2 justify-content-center">
  455.  
  456. <i class="far fa-comment" style="font-size:17px; cursor:pointer"></i>1
  457.  
  458. <i class="far fa-retweet ml-5" style="font-size:17px; cursor:pointer"></i>1
  459.  
  460. <i class="far fa-heart ml-5" style="font-size:17px; cursor:pointer"></i>2
  461.  
  462. <i class="far fa-share ml-5" style="font-size:17px; cursor:pointer"></i>
  463. </div>
  464. </div>
  465. <div class="card ml-2" style="background-color: white; border-left: 2px solid">
  466. <div class="row no-gutters mt-2">
  467. <img src="https://cambodiaict.net/wp-content/uploads/2019/12/computer-icons-user-profile-google-account-photos-icon-account.jpg" style="height:40px; width:40px; border-radius:100%; cursor:pointer" class="ml-3">
  468. <span class="ml-2" style="font-weight:bold">display name</span>
  469. <span class="ml-2" style="font-weight:normal">username • Date</span>
  470. </div>
  471. <hr class="mt-1 mb-1" style="visibility:hidden">
  472. <span class="mb-2" style="font-weight:normal; margin-left:65px; margin-top:-30px">This is a reply!</span>
  473. <div class="row no-gutters mb-2 justify-content-center">
  474.  
  475. <i class="far fa-comment" style="font-size:17px; cursor:pointer"></i>1
  476.  
  477. <i class="far fa-retweet ml-5" style="font-size:17px; cursor:pointer"></i>
  478.  
  479. <i class="far fa-heart ml-5" style="font-size:17px; cursor:pointer"></i>1
  480.  
  481. <i class="far fa-share ml-5" style="font-size:17px; cursor:pointer"></i>
  482. </div>
  483. </div>
  484.  
  485. </div>
  486.  
  487. <!-----COLUMN 3 - COLOR PALLETTE AND OTHER STUFF----->
  488. <div class="col-lg-3 text-left">
  489.  
  490. <div class="col-lg-12 text-center ml-2" style="border-radius:25px; height:20px; background-color: #dce8eb; color:#80888a">
  491. <i class="far fa-search mr-2"></i>
  492. Search Twitter
  493. </div>
  494.  
  495. <div class="row no-gutters" style="margin-left:40px">
  496.  
  497. <div class="card mt-2 ml-2 tooltipster" style="background-color: black; width:40px; height:40px" title="color hex code"></div>
  498.  
  499. <div class="card mt-2 ml-2 tooltipster" style="background-color: black; width:40px; height:40px" title="color hex code"></div>
  500.  
  501. <div class="card mt-2 ml-2 tooltipster" style="background-color: black; width:40px; height:40px" title="color hex code"></div>
  502.  
  503. </div>
  504.  
  505. <div class="row no-gutters" style="margin-left:40px">
  506.  
  507. <div class="card mt-2 ml-2 tooltipster" style="background-color: black; width:40px; height:40px" title="color hex code"></div>
  508.  
  509. <div class="card mt-2 ml-2 tooltipster" style="background-color: black; width:40px; height:40px" title="color hex code"></div>
  510.  
  511. <div class="card mt-2 ml-2 tooltipster" style="background-color: black; width:40px; height:40px" title="color hex code"></div>
  512.  
  513. </div>
  514.  
  515.  
  516. <div class="col-lg-12 text-left ml-3 mt-2" style="background-color:#dce8eb; border-radius:25px">
  517. <span style="font-weight:bold; font-size:20px">You might like</span>
  518.  
  519. <div class="row no-gutters mt-2">
  520. <img src="https://cambodiaict.net/wp-content/uploads/2019/12/computer-icons-user-profile-google-account-photos-icon-account.jpg" style="height:40px; width:40px; border-radius:100%; cursor:pointer">
  521. <span class="ml-2" style="font-weight:bold">display name</span>
  522. <span class="ml-5" style="font-weight:normal; margin-top:-25px">username</span>
  523. </div>
  524.  
  525. <div class="row no-gutters mt-2">
  526. <img src="https://cambodiaict.net/wp-content/uploads/2019/12/computer-icons-user-profile-google-account-photos-icon-account.jpg" style="height:40px; width:40px; border-radius:100%; cursor:pointer">
  527. <span class="ml-2" style="font-weight:bold">display name</span>
  528. <span class="ml-5" style="font-weight:normal; margin-top:-25px">username</span>
  529. </div>
  530.  
  531. <div class="row no-gutters mt-2">
  532. <img src="https://cambodiaict.net/wp-content/uploads/2019/12/computer-icons-user-profile-google-account-photos-icon-account.jpg" style="height:40px; width:40px; border-radius:100%; cursor:pointer">
  533. <span class="ml-2" style="font-weight:bold">display name</span>
  534. <span class="ml-5" style="font-weight:normal; margin-top:-25px">username</span>
  535. </div>
  536. </div>
  537.  
  538. </div>
  539. </div>
  540. </div>
  541.  
  542. </div>
  543. <!-----DISCORD----->
  544. <div class="tab-pane" id="discord">
  545. <!-----TOP BAR----->
  546. <div class="card-header" style="background-color: #F0E5D2; color: black">
  547. <div class="row no-gutters">
  548. <i class="far fa-arrow-left mt-1" style="cursor:pointer"></i>
  549. <i class="far fa-arrow-right ml-3 mt-1" style="cursor:pointer"></i>
  550. <i class="far fa-redo-alt ml-3 mt-1" style="cursor:pointer"></i>
  551.  
  552. <div class="col-10 ml-3 justify-content-between" style="background-color: #E1D2BA; height:20px; border-radius:25px; color:black">
  553. <span class="ml-2">discord.com/channels/@me</span>
  554. <i class="far fa-star mr-2 mt-1" style="cursor:pointer"></i>
  555. </div>
  556.  
  557. <img src="https://cambodiaict.net/wp-content/uploads/2019/12/computer-icons-user-profile-google-account-photos-icon-account.jpg" style="height:20px; width:20px; border-radius:100%; cursor:pointer" class="ml-3">
  558.  
  559. <i class="far fa-ellipsis-v mt-1 ml-4" style="cursor:pointer"></i>
  560. </div>
  561. </div>
  562.  
  563. <div class="card-block text-center" style="color: black; max-height:340px; overflow:auto; background-color:white">
  564. <div class="row no-gutters">
  565. <!-----COLUMN 1 - Servers----->
  566. <div class="col-lg-1" style="background-color: #DEE1EA; border-top-left-radius:25px; border-bottom-left-radius:25px; height:500px">
  567.  
  568. <img src="https://cdn.icon-icons.com/icons2/2108/PNG/512/discord_icon_130958.png" style="height:40px; width:40px; cursor:pointer" class="mt-2">
  569.  
  570. <img src="https://images.unsplash.com/photo-1620670758435-3f4eb7bb0572?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bmF0dXJlJTIwYWVzdGhldGljfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80" style="height:40px; width:40px; cursor:pointer; border-radius:25px" class="mt-2 tooltipster" title="server name">
  571.  
  572. <img src="https://images.unsplash.com/photo-1620670758435-3f4eb7bb0572?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bmF0dXJlJTIwYWVzdGhldGljfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80" style="height:40px; width:40px; cursor:pointer; border-radius:25px" class="mt-2 tooltipster" title="server name">
  573.  
  574. <img src="https://images.unsplash.com/photo-1620670758435-3f4eb7bb0572?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bmF0dXJlJTIwYWVzdGhldGljfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80" style="height:40px; width:40px; cursor:pointer; border-radius:25px" class="mt-2 tooltipster" title="server name">
  575.  
  576. </div>
  577. <!-----COLUMN 2 - Friends----->
  578. <div class="col-lg-2" style="background-color: #EDF1F7;height:500px">
  579.  
  580. <div class="row no-gutters mt-2 ml-2">
  581. <img src="https://cambodiaict.net/wp-content/uploads/2019/12/computer-icons-user-profile-google-account-photos-icon-account.jpg" style="height:40px; width:40px; border-radius:100%; cursor:pointer">
  582. <span class="ml-2 mt-2" style="font-weight:bold">username</span>
  583. </div>
  584.  
  585. <div class="row no-gutters mt-2 ml-2">
  586. <img src="https://cambodiaict.net/wp-content/uploads/2019/12/computer-icons-user-profile-google-account-photos-icon-account.jpg" style="height:40px; width:40px; border-radius:100%; cursor:pointer">
  587. <span class="ml-2 mt-2" style="font-weight:bold">username</span>
  588. </div>
  589.  
  590. <div class="row no-gutters mt-2 ml-2">
  591. <img src="https://cambodiaict.net/wp-content/uploads/2019/12/computer-icons-user-profile-google-account-photos-icon-account.jpg" style="height:40px; width:40px; border-radius:100%; cursor:pointer">
  592. <span class="ml-2 mt-2" style="font-weight:bold">username</span>
  593. </div>
  594.  
  595. </div>
  596. <!-----COLUMN 3 - Chat - FEEL FREE TO DO WHATEVER U WANT WITH THIS!! u dont have to follow the guidelines just make the messages whatever u want----->
  597. <div class="col-lg-9 text-left" style="border-radius:25px; height:500px">
  598.  
  599. <div class="card" style="background-color: white">
  600. <div class="row no-gutters mt-2">
  601. <img src="https://cambodiaict.net/wp-content/uploads/2019/12/computer-icons-user-profile-google-account-photos-icon-account.jpg" style="height:40px; width:40px; border-radius:100%; cursor:pointer" class="ml-3">
  602. <span class="ml-2" style="font-weight:bold">username</span>
  603. </div>
  604. <hr class="mt-1 mb-1" style="visibility:hidden">
  605. <span class="mb-2" style="font-weight:normal; margin-left:65px; margin-top:-30px">This is a message!</span>
  606.  
  607.  
  608. <div class="row no-gutters mt-2">
  609. <img src="https://cambodiaict.net/wp-content/uploads/2019/12/computer-icons-user-profile-google-account-photos-icon-account.jpg" style="height:40px; width:40px; border-radius:100%; cursor:pointer" class="ml-3">
  610. <span class="ml-2" style="font-weight:bold">username</span>
  611. </div>
  612. <hr class="mt-1 mb-1" style="visibility:hidden">
  613. <span class="mb-2" style="font-weight:normal; margin-left:65px; margin-top:-30px">This is another message!</span>
  614.  
  615.  
  616. <div class="row no-gutters mt-2">
  617. <img src="https://cambodiaict.net/wp-content/uploads/2019/12/computer-icons-user-profile-google-account-photos-icon-account.jpg" style="height:40px; width:40px; border-radius:100%; cursor:pointer" class="ml-3">
  618. <span class="ml-2" style="font-weight:bold">username</span>
  619. </div>
  620. <hr class="mt-1 mb-1" style="visibility:hidden">
  621. <span class="mb-2" style="font-weight:normal; margin-left:65px; margin-top:-30px">This is a message from a different person!</span>
  622.  
  623.  
  624. <div class="row no-gutters mt-2">
  625. <img src="https://cambodiaict.net/wp-content/uploads/2019/12/computer-icons-user-profile-google-account-photos-icon-account.jpg" style="height:40px; width:40px; border-radius:100%; cursor:pointer" class="ml-3">
  626. <span class="ml-2" style="font-weight:bold">username</span>
  627. </div>
  628. <hr class="mt-1 mb-1" style="visibility:hidden">
  629. <span class="mb-2" style="font-weight:normal; margin-left:65px; margin-top:-30px">This is a message!</span>
  630.  
  631.  
  632. <div class="row no-gutters mt-2">
  633. <img src="https://cambodiaict.net/wp-content/uploads/2019/12/computer-icons-user-profile-google-account-photos-icon-account.jpg" style="height:40px; width:40px; border-radius:100%; cursor:pointer" class="ml-3">
  634. <span class="ml-2" style="font-weight:bold">username</span>
  635. </div>
  636. <hr class="mt-1 mb-1" style="visibility:hidden">
  637. <span class="mb-2" style="font-weight:normal; margin-left:65px; margin-top:-30px">This is a message with a picture!</span>
  638.  
  639. <div class="card" style="background-image: url(https://i.pinimg.com/originals/d2/72/6c/d2726cb99011817ddafeae35c46e5f28.jpg); width:300px; height:100px; background-position: center; margin-left:65px"></div>
  640.  
  641. <div class="row no-gutters mt-2">
  642. <img src="https://cambodiaict.net/wp-content/uploads/2019/12/computer-icons-user-profile-google-account-photos-icon-account.jpg" style="height:40px; width:40px; border-radius:100%; cursor:pointer" class="ml-3">
  643. <span class="ml-2" style="font-weight:bold">username</span>
  644. </div>
  645. <hr class="mt-1 mb-1" style="visibility:hidden">
  646. <span class="mb-2" style="font-weight:normal; margin-left:65px; margin-top:-30px">This is a message from another person!</span>
  647.  
  648. <div class="col-lg-12 ml-2 mt-4" style="border-radius:25px; height:20px; background-color: #EDF1F7; color:#80888a">
  649. <i class="far fa-plus mr-2"></i>
  650. Message USERNAME
  651. <div class="justify-content-end mb-1" style="margin-top:-15px">
  652. <i class="far fa-gift mr-2"></i>
  653. <i class="fas fa-square mr-2"></i>
  654. <i class="far fa-file mr-2"></i>
  655. <i class="far fa-grin mr-2"></i>
  656. </div>
  657. </div>
  658. </div>
  659. </div>
  660. </div>
  661. </div>
  662. </div>
  663. <!-----YOUTUBE----->
  664. <div class="tab-pane" id="yt">
  665.  
  666. <!-----TOP BAR----->
  667. <div class="card-header" style="background-color: #F0E5D2; color: black">
  668. <div class="row no-gutters">
  669. <i class="far fa-arrow-left mt-1" style="cursor:pointer"></i>
  670. <i class="far fa-arrow-right ml-3 mt-1" style="cursor:pointer"></i>
  671. <i class="far fa-redo-alt ml-3 mt-1" style="cursor:pointer"></i>
  672.  
  673. <div class="col-10 ml-3 justify-content-between" style="background-color: #E1D2BA; height:20px; border-radius:25px; color:black">
  674. <span class="ml-2">youtube.com/watch</span>
  675. <i class="far fa-star mr-2 mt-1" style="cursor:pointer"></i>
  676. </div>
  677.  
  678. <img src="https://cambodiaict.net/wp-content/uploads/2019/12/computer-icons-user-profile-google-account-photos-icon-account.jpg" style="height:20px; width:20px; border-radius:100%; cursor:pointer" class="ml-3">
  679.  
  680. <i class="far fa-ellipsis-v mt-1 ml-4" style="cursor:pointer"></i>
  681. </div>
  682. </div>
  683.  
  684. <div class="card-block text-center" style="color: black; max-height:340px; overflow:auto; background-color:white">
  685. <div class="row no-gutters">
  686. <!-----HEADER----->
  687. <div class="card-header" style="background-color: white; color: black; width:1000px">
  688. <div class="row no-gutters">
  689. <span style="font-size:30px; cursor:pointer" class="ml-2"><em><strong><i class="far fa-bars"></i>
  690. <i class="fab fa-youtube ml-2" style="cursor:pointer; color:red"></i></strong></em>
  691. <span class="ml-2" style="font-weight:bold">Youtube</span></span>
  692.  
  693. <div class="col-4 text-center mt-2" style="background-color: #DCE8EB; height:30px; color: #80888A; margin-left:100px">
  694. <div class="justify-content-between">
  695. <span class="mt-1 ml-2">Search</span>
  696. <i class="far fa-search mt-2 mr-2"></i>
  697. </div>
  698. </div>
  699.  
  700. <i class="far fa-microphone mt-2 ml-4" style="font-size:30px; cursor:pointer"></i>
  701. <i class="far fa-video mt-2 ml-4" style="font-size:30px; cursor:pointer"></i>
  702. <i class="far fa-th mt-2 ml-4" style="font-size:30px; cursor:pointer"></i>
  703. <i class="far fa-bell mt-2 ml-4" style="font-size:30px; cursor:pointer"></i>
  704. <span class="badge" style="background-color: red; cursor:pointer; height:15px">19</span>
  705.  
  706. <img src="https://cambodiaict.net/wp-content/uploads/2019/12/computer-icons-user-profile-google-account-photos-icon-account.jpg" style="height:40px; width:40px; border-radius:100%; cursor:pointer" class="ml-3 mt-1">
  707.  
  708. </div>
  709. </div>
  710.  
  711. <div class="row no-gutters">
  712. <!-----Video Player----->
  713. <iframe width="950" height="500" src="https://www.youtube.com/embed/9HRZ99B8p54" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" class="mt-2 mb-2"></iframe>
  714.  
  715. <!-----stuff----->
  716. <div class="card-header text-left" style="background-color:white; width:950px">
  717. <span style="font-size:25px; font-weight:bold">Title</span>
  718. <hr class="mt-1 mb-2" style="visibility:hidden">
  719. <span style="font-size:15px; font-weight:normal"># Views • Date</span>
  720. <div class="justify-content-end">
  721.  
  722. <i class="far fa-thumbs-up" style="margin-top:-20px; cursor:pointer; font-size:17px"></i>
  723. <span style="margin-top: -20px">Likes</span>
  724.  
  725. <i class="far fa-thumbs-down ml-4" style="margin-top:-20px; cursor:pointer; font-size:17px"></i>
  726. <span style="margin-top: -20px">Dislikes</span>
  727.  
  728. <i class="far fa-share ml-4" style="margin-top:-20px; cursor:pointer; font-size:17px"></i>
  729. <span style="margin-top: -20px">Share</span>
  730.  
  731. <i class="far fa-folder-plus ml-4" style="margin-top:-20px; cursor:pointer; font-size:17px"></i>
  732. <span style="margin-top: -20px">Save</span>
  733.  
  734. <i class="far fa-info-circle ml-4" style="margin-top:-20px; cursor:pointer; font-size:17px"></i>
  735. <span style="margin-top: -20px">Description</span>
  736.  
  737. <i class="far fa-ellipsis-h ml-4" style="margin-top:-20px; cursor:pointer; font-size:17px"></i>
  738. </div>
  739. </div>
  740. <div class="row no-gutters mt-2">
  741. <img src="https://cambodiaict.net/wp-content/uploads/2019/12/computer-icons-user-profile-google-account-photos-icon-account.jpg" style="height:40px; width:40px; border-radius:100%; cursor:pointer">
  742. <span class="ml-3" style="font-weight:bold;">Username</span>
  743. <span style="font-weight:normal; margin-left:-80px; margin-top:20px">
  744. # Subscribers</span>
  745.  
  746. </div>
  747. </div>
  748. </div>
  749. </div>
  750. </div>
  751.  
  752. </div>
  753. </div>
  754.  
  755. <!-----CREDIT - PLEASE DON'T REMOVE!----->
  756.  
  757. <div class="text-center mt-2 tooltipster" title="HTML by VALENTINE">
  758.  
  759. <a href="https://toyhou.se/VAL3NT1N3" style="color: white; text-shadow: 0 0 5px #ff73b0; font-size: 25px;">
  760.  
  761. <i class="fad fa-heart"></i>
  762.  
  763. </a>
  764.  
  765. </div>
  766. <!--
  767.  
  768. If you want to change the size of the image, change the max-width to whatever percentage you'd like.
  769. If you want to change the position of the image, you can change left to right.
  770. If you want to add more spacing between your image and the edge of the screen, change the "5px" to whatever amount you'd like.
  771.  
  772. If you still want the pagedoll to appear even on mobile, remove "hidden-sm-down"
  773. If you do NOT want text to appear when you hover over the image, remove "tooltipster"
  774. If you do NOT want the image to direct to a link, remove "<a href="#">" and "</a>"
  775. If your image still appears behind content (and do not want that to happen), change "z-index:3;" to a higher value like "999"
  776.  
  777. -->
  778.  
  779. <a href="#"><img class="hidden-sm-down tooltipster" title="Text here" style="max-width:10%; position:fixed; bottom:5px; right:5px; z-index:3;" src="https://i.imgur.com/4vidDHL.gif"></a>
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!