API tools faq
paste
calliearambulo

Community Page - Code Drive

calliearambulo
Jun 15th, 2021
142
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.85 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!---
  4. ___ ___ _ _ _____ __ _____ _ _ ___ __ __ ___ ___
  5. | _ \_ _| | | | / _ \ \ / / |_ _| || | __| \/ | __/ __|
  6. | _/| || |__| |_| (_) \ \/\/ / | | | __ | _|| |\/| | _|\__ \
  7. |_| |___|____|____\___/ \_/\_/ |_| |_||_|___|_| |_|___|___/
  8.  
  9. BY CARA
  10.  
  11. Rules:
  12. 1. Do not steal snippets or all of my codes.
  13. 2. Do not claim theme as yours.
  14. 3. Do not remove the credit.
  15. -->
  16.  
  17. <head>
  18. <title>{Title}</title>
  19.  
  20. <link rel="shortcut icon" href="{FavIcon}" />
  21. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  22. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  23. <link href="https://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css"/>
  24. <link rel="stylesheet" href="https://static.tumblr.com/vowb075/m9vpc1yxe/animate.min.css">
  25.  
  26. <link rel="preconnect" href="https://fonts.gstatic.com">
  27. <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Roboto&family=Roboto+Mono&display=swap" rel="stylesheet">
  28.  
  29. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  30.  
  31. <link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet">
  32.  
  33. <!--- START META TAGS --->
  34. <meta name="color:Background" content="#ffffff"/>
  35. <meta name="color:Text" content="#000000"/>
  36. <meta name="color:Accent" content="#5ea6a5"/>
  37. <meta name="color:sub color 1" content="#f2a8a2"/>
  38. <meta name="color:sub color 2" content="#f9b132"/>
  39. <meta name="color:Border" content="#eeeeee"/>
  40.  
  41. <meta name="if:infinite scroll" content="1"/>
  42.  
  43. <meta name="image:logo" content=""/>
  44. <meta name="image:purpose icon 1" content=""/>
  45. <meta name="image:purpose icon 2" content=""/>
  46. <meta name="image:purpose icon 3" content=""/>
  47. <!-- END OF META TAGS -->
  48.  
  49. </head>
  50. <style type="text/css">
  51.  
  52. /* SCROLLBAR */
  53. ::-webkit-scrollbar {
  54. width:15px;
  55. }
  56.  
  57. ::-webkit-scrollbar-track {
  58. background-color:#5EA6A5;
  59. border-top:6px solid #fff;
  60. border-left:6px solid #fff;
  61. border-right:6px solid #fff;
  62. border-bottom:6px solid #fff;
  63. }
  64.  
  65. ::-webkit-scrollbar-thumb {
  66. background-color:#F9B132;
  67. border-top:4px solid #fff;
  68. border-left:4px solid #fff;
  69. border-right:4px solid #fff;
  70. border-bottom:4px solid #fff;
  71. border-radius:30px;
  72. }
  73.  
  74. body {
  75. color:#000;
  76. background-color:#fbfbfb;
  77. font-size:14pt;
  78. font-family: 'Roboto', sans-serif;
  79. line-height:1.5;
  80. overflow-x:hidden;
  81. }
  82.  
  83. a {
  84. text-decoration:none;
  85. color:#000;
  86. }
  87.  
  88. iframe, img, embed, object, video {
  89. max-width: 100%;
  90. }
  91.  
  92. blockquote {
  93. border-left:1.5px solid #5ea6a5;
  94. color:#000;
  95. margin-left:20px;
  96. padding-left:20px;
  97. }
  98.  
  99. #links {
  100. top:0;
  101. width:100%;
  102. height:auto;
  103. background-color:#fff;
  104. padding:20px;
  105. text-align:center;
  106. }
  107.  
  108. #links a {
  109. margin-right:60px;
  110. }
  111.  
  112. #links a:last-child {margin-right:0px;}
  113.  
  114. #links a:hover {
  115. text-decoration-line: underline;
  116. text-decoration-style:wavy;
  117. text-decoration-color:#f2a8a2;
  118. }
  119.  
  120. #header {
  121. width:100%;
  122. height:30vh;
  123. background-image:url('https://64.media.tumblr.com/1526d0b18af017a1662d1748c9615e5a/219f3e053dbe4cb5-3e/s500x750/213f05afbe4913df1cb4d13db14134e2374b6c3e.gifv');*/
  124. background-color:#5ea6a5;
  125. /*1. https://thumbs.gfycat.com/CompletePreciousAmericancicada-size_restricted.gif
  126. 2. https://i.pinimg.com/originals/b1/aa/2c/b1aa2c6322c087183a432a7ede2695ae.gif*/
  127. background-blend-mode:screen;
  128. background-color:#5ea6a5;
  129. background-size:cover;
  130. display:flex;
  131. align-items:center;
  132. justify-content:space-around;
  133. }
  134.  
  135. #cont {
  136. width:550px;
  137. height:auto;
  138. }
  139.  
  140. #blog-title {
  141. width:250px;
  142. height:120px;
  143. margin:0 auto;
  144. }
  145.  
  146. #blog-title img {
  147. width:250px;
  148. height:auto;
  149. margin:0 auto;
  150. }
  151.  
  152. #comm-page {
  153. width:100%;
  154. height:auto;
  155. display:flex;
  156. align-items:center;
  157. justify-content:space-around;
  158. margin-top:50px;
  159. margin-bottom:50px;
  160. }
  161.  
  162. #comm-page-con {width:950px;}
  163.  
  164. #comm-title {
  165. font-family: 'Archivo Black', sans-serif;
  166. font-size:20pt;
  167. color:#5ea6a5;
  168. text-transform:uppercase;
  169. text-align:center;
  170. }
  171.  
  172. #comm-caption {text-align:center;margin-bottom:40px;}
  173.  
  174. #opportunity {
  175. width:950px;
  176. display:flex;
  177. justify-content:space-around;
  178. }
  179.  
  180. #opp-names {
  181. background-color:#fff;
  182. width:300px;
  183. height:auto;
  184. }
  185.  
  186. #opp-descs {
  187. background-color:red;
  188. width:600px;
  189. height:auto;
  190. }
  191.  
  192. #footer {
  193. width:100%;
  194. height:30vh;
  195. background-color:#000;
  196. display:flex;
  197. align-items:center;
  198. justify-content:space-around;
  199. color:#fff;
  200. text-align:center;
  201. }
  202.  
  203. #footer-con {width:950px;}
  204.  
  205. #icons {
  206. display:inline-block;
  207. margin-bottom:40px;
  208. }
  209.  
  210. #icons a {color:#fff;margin-right:40px;}
  211. #icons a:last-child {margin-right:0px;}
  212.  
  213. .lnr-chevron-down-circle {
  214. margin-right:10px;
  215. font-weight:600;
  216. }
  217.  
  218. .tmblr-iframe {
  219. position:fixed!important;
  220. top:0;
  221. margin-top:7px;
  222. right:0;
  223. margin-right:20px;
  224. z-index:999999!important;
  225. -webkit-transform:scale(0.8,0.8);
  226. -webkit-transform-origin: 100% 0%;
  227. -ms-transform-origin:100% 0%;
  228. -ms-transform:scale(0.8,0.8);
  229. transform:scale(0.8,0.8);
  230. transform-origin:100% 0%;
  231. }
  232.  
  233. </style>
  234. <body>
  235.  
  236. <div id="links">
  237. <a href="/">Index</a>
  238. <a href="/about">About</a>
  239. <a href="community">Community</a>
  240. <a href="/contact">Contact</a>
  241. <a href="/blog">Explore</a>
  242. </div>
  243.  
  244. <div id="header">
  245. <div id="cont">
  246. <div id="blog-title"><img src="https://64.media.tumblr.com/792ff4808f3b619eda2c3e414e495540/9ab14fa733b69c5e-cd/s2048x3072/95d57d87c869cac4ed64273a9c7e227fdcc48cb0.png"></div>
  247. </div>
  248. </div>
  249.  
  250. <div id="comm-page">
  251. <div id="comm-page-con">
  252. <div id="comm-title">Join the Community</div>
  253. <div id="comm-caption">Hey there! You can apply for a position to help build our recently created community. This is open to all nationalities, races, genders, cultures, and the like. As the saying goes, there is unity in diversity!</div>
  254. <div id="opportunity">
  255. <div id="opp-names">hello</div>
  256. <div id="opp-descs">
  257. <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSexDOcp_XcfET7KV7Ib-548OMZL2qd8Ss64Z-T9_8UkZj5pOw/viewform?embedded=true" width="640" height="414" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis eleifend placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse dignissim mattis augue scelerisque sodales. Curabitur at diam nec lectus efficitur finibus a quis ligula. Nam non lectus orci. Vestibulum ac vulputate dui. Donec tincidunt lorem ut leo semper interdum. Suspendisse lobortis ante non quam finibus, sollicitudin dignissim ex condimentum. Donec eget pellentesque arcu, quis convallis felis. Donec porttitor lacinia cursus. Duis fringilla fermentum vehicula. Suspendisse potenti.
  258.  
  259. Sed sit amet velit nisl. Phasellus dapibus blandit justo, vel fermentum lorem rhoncus eu. Nullam id nibh ac felis lobortis iaculis. Donec leo eros, dapibus in lorem eget, porta lobortis nisl. Aliquam volutpat ullamcorper auctor. Nulla purus lacus, dictum nec nisi eu, molestie luctus augue. Nam varius aliquet leo eu ultricies. In malesuada leo enim, at porttitor leo ullamcorper eu. Donec vehicula consequat tellus pretium auctor. Duis laoreet arcu ligula. Curabitur tincidunt urna ut faucibus fermentum. Quisque pellentesque at purus ut laoreet.
  260.  
  261. Mauris viverra, magna non sollicitudin vehicula, dui orci facilisis odio, vestibulum pretium lacus metus sit amet magna. Curabitur auctor risus et magna semper sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque elementum consectetur eros quis vestibulum. Fusce iaculis elementum lectus at vehicula. Phasellus consequat neque quis magna porttitor, quis consectetur ligula consequat. Nunc non lorem condimentum, molestie erat imperdiet, pharetra dui. Etiam arcu diam, sodales quis nunc in, scelerisque euismod tortor. Nullam id nisl finibus, commodo justo id, tincidunt ligula. Integer laoreet arcu sit amet vulputate rutrum. Nunc elementum quam ultrices orci dictum facilisis.</div>
  262. </div>
  263. </div>
  264. </div>
  265.  
  266. <div id="footer">
  267. <div id="footer-con">
  268. <div id="icons">
  269. <a href="/"><i class="lni lni-facebook-oval"></i></a>
  270. <a href="/"><i class="lni lni-instagram-filled"></i></a>
  271. <a href="/"><i class="lni lni-discord"></i></a>
  272. <a href="/"><i class="lni lni-google"></i></a>
  273. <a href="/"><i class="lni lni-twitter-original"></i></a>
  274. <a href="/"><i class="lni lni-linkedin-original"></i></a>
  275. </div>
  276. <br>© Code Drive 2021
  277. <br>Powered by Tumblr
  278. </div>
  279. </div>
  280.  
  281. <!--- DO NOT TOUCH THIS PART --->
  282. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  283. <script src="https://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  284.  
  285. <script>
  286. (function() {
  287. var $tumblelog = $('#content');
  288. {block:IfInfiniteScroll}
  289. $tumblelog.infinitescroll({
  290. navSelector : ".pagination",
  291. nextSelector : ".pagination a:first",
  292. itemSelector : "article",
  293. bufferPx : 50,
  294. done : "",
  295. loading: {
  296. img : "",
  297. msgText: ""
  298. },
  299. },
  300. function( newElements ) {
  301. var $newElems = $( newElements ).css({ opacity: 0 });
  302. $newElems.imagesLoaded(function(){
  303. $newElems.animate({ opacity: 1 });
  304. $tumblelog.masonry( 'appended', $newElems);
  305. });
  306. }
  307. );
  308. {/block:IfInfiniteScroll}
  309. $tumblelog.imagesLoaded( function(){
  310. $tumblelog.masonry({
  311. columnWidth: function( containerWidth ) {
  312. return containerWidth / 100;
  313. }
  314. });
  315. });
  316. })();
  317. </script>
  318. <!--- DO NOT TOUCH THIS PART --->
  319.  
  320. </body>
  321. </html>
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!