API tools faq
paste
Kawaii-Lau

Blue Roses [Staff Book]

Kawaii-Lau
Jul 26th, 2020 (edited)
922
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 25.99 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.   ╔═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╗
  4.    Thank you for using my code!
  5.   ╚═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╝
  6. Rules to Follow:
  7.  
  8. ✶ Do not EVER delete or remove the credits of the coder or claim this code as your own.
  9. ✶ Do not redistribute this code, no matter how much you edited it as a base or otherwise!
  10. ✶ If you need any help in fixing codes, contact me on Discord (Kawaii-lau#6316).
  11. ✶ If you like to share this code, send to your friends the link of my blog, kawaii-lau.tumblr.com , and support me!
  12.  
  13. If you like a custom code, check out my blog to see if requests are open!
  14.  
  15. NOTE: If you like to add more pages than the 6 pages, please DM me on Discord so I can help you ^^
  16.  
  17. XOXO, Lauren.
  18.  
  19.     ╔═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╗
  20.       2020 © Coding by Kawaii-Lau
  21.     ╚═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╝
  22.  
  23. -->
  24.  
  25.  
  26. <!-- CUSTOM FONTS -->
  27. <link href="https://fonts.googleapis.com/css2?family=Jacques+Francois&display=swap" rel="stylesheet">
  28. <style>
  29. :root {
  30.   /* COLORS */
  31.   --main-background:#eee;
  32.   --header-background:#fff;
  33.  
  34.   /* GRADIENT BOX COLORS */
  35.   --box-background1:#9BD8F2 ;
  36.   --box-background2:#FFF9FC;
  37.   --box-background3:#BAF0E1;
  38.   --accent:#5460B7AA;
  39.  
  40.   --footer-bg:#fff;
  41.  
  42. /*  FONT FAMILY */
  43.   --header-font-family:'Jacques Francois', serif;
  44.   --main-font-family:'Jacques Francois', serif;
  45. }
  46.  
  47. /*  SCROLLBAR */
  48. ::-webkit-scrollbar {
  49.   width:6px;
  50.   background:transparent;
  51. }
  52. ::-webkit-scrollbar-thumb {
  53.   background:var(--accent);
  54. }
  55. /*  SELECTION */
  56. ::selection {
  57.   background-color:#DCECF1;
  58.   color:white;
  59. }
  60.  
  61. body {
  62.     cursor:url(https://i.imgur.com/aotRL2E.png), auto;
  63. }
  64.  
  65. /*  GENERAL CSS */
  66. h1, h2, h3 {
  67.   margin:0px 0px 10px;
  68.   font-family: var(--header-font-family);
  69. }
  70. p {
  71.   margin:0px;
  72.   font-family: var(--main-font-family);
  73. }
  74.  
  75. /*  HEADER */
  76. header {
  77.   background:var(--header-background) padding-box;
  78.   box-sizing:border-box;
  79.   padding:20px;
  80.   position:relative;
  81.   z-index:6
  82. }
  83.  
  84. /*  MAIN BOX */
  85. .main-box {
  86.   width:700px;
  87.   margin:10px auto;
  88.   padding-bottom:10px;
  89.   overflow:hidden;
  90. }
  91.  
  92. /*  ALL OF THE PAGES TOGETHER */
  93. .content {
  94.   width:600%;
  95.   justify-content:flex-start;
  96.   position:relative;
  97.   transition:1.3s ease;
  98. }
  99.  
  100. /*  INDIVIDUAL PAGES */
  101. .page {
  102.   height:550px;width:700px;
  103.   overflow:auto;
  104.   box-sizing:border-box;
  105. }
  106.  
  107. /*  STAFF BOX */
  108. .fam {
  109.   background: url(https://i.pinimg.com/564x/3f/b2/00/3fb2009c64f249346ddcec41bea0017e.jpg) padding-box;
  110.   background-size:100% 100%;
  111.   border:4px solid white;
  112.   box-shadow:3px 3px 10px rgba(100, 100, 100, 0.2);
  113.   width:240px;
  114.   margin:20px 10px;
  115. }
  116.  
  117. /*  STAFF PICTURE */
  118. .staff-pic {
  119.   width:130px;height:130px;
  120.   background:white;
  121.   padding:50px;
  122.   -webkit-mask-image:url(https://i.imgur.com/En4D0Xj.png);
  123.   -webkit-mask-size:100% 100%;
  124.   margin:0px auto 20px;
  125. }
  126. .staff-pic img {
  127.   width:100%;
  128.   border-radius:100%;
  129. }
  130.  
  131. /*  STAFF INFORMATION */
  132. .staff-info {
  133.   text-align:center;
  134.   background-color:white;
  135. }
  136.  
  137. /*  BUTTON TAB */
  138. .nav-tabs {
  139.   margin-right: 20px;
  140.   justify-content:flex-start;
  141.   position:relative;
  142.   z-index:4;
  143. }
  144.  
  145. /*  FLEXBOXES */
  146. .row {
  147.   display:flex;
  148.   flex-direction:row;
  149.   justify-content:center;
  150. }
  151.  
  152. /*  CSS BUTTONS (please do not touch or it will be extremely broke ;-; */
  153. input[id="HM"]:checked ~ .content {
  154.   margin-left:-100%;
  155. }
  156. input[id="HOH"]:checked ~ .content {
  157.   margin-left:-200%;
  158. }
  159. input[id="Mgmt"]:checked ~ .content {
  160.   margin-left:-300%;
  161. }
  162. input[id="CE"]:checked ~ .content {
  163.   margin-left:-400%;
  164. }
  165. input[id="Teachers"]:checked ~ .content {
  166.   margin-left:-500%;
  167. }
  168.  
  169. /*  BUTTON STYLING CSS */
  170. label > div {  
  171.   width:30px; height:50px;
  172.   border-radius:0px 0px 5px 5px;
  173.   margin:3px 3px 0px 3px;
  174.   cursor:pointer;
  175.   position:relative;
  176.   transition:0.5s ease;
  177.   top:-20px;
  178. }
  179. label > div:hover  {
  180.     top:-5px;
  181. }
  182. input {
  183.  display:none;
  184. }
  185.  
  186. /*  CREDITS (please do not remove ^^ */
  187. .credits {
  188.   padding:5px 10px;
  189.   text-align:right;
  190.   background:var(--footer-bg);
  191.   font-size:12px;
  192.   position:relative;
  193.   z-index:5;
  194.   margin-bottom:20px;
  195. }
  196. .credits a {
  197.   text-decoration:none;
  198.   color:gray;
  199. }
  200. </style>
  201. <body style="background-color:var(--main-background); background-image:url(LINK);background-size:100% 100%;">
  202.  
  203.   <div class="main-box" style="border-radius:10px;background-image:linear-gradient(to bottom, var(--box-background1), var(--box-background2), var(--box-background3) );box-shadow:2px 2px 10px rgba(100, 100, 100, 0.7);">
  204.    
  205.    
  206.     <header style="border-bottom:6px double #eee;">
  207.       <center>
  208.         <h1 style="color:#5460B7;margin:0px;font-size:56px ">⚜ Blue Roses ⚜</h1>
  209.       </center>
  210.     </header>
  211.  
  212.    
  213.     <div class="nav-tabs row" style="justify-content:flex-start;">
  214.       <!-- MoM BUTTON -->
  215.       <label for="MOM">
  216.         <div style="background-color:#00864b"></div>
  217.       </label>
  218.       <!-- HM BUTTON -->
  219.       <label for="HM">
  220.         <div style="background-color:#1c81d2"></div>
  221.       </label>
  222.  
  223.       <!-- HOH BUTTON -->
  224.       <label for="HOH">
  225.         <div style="background-color:#ba131a"></div>
  226.       </label>
  227.  
  228.       <!-- MANAGEMENT BUTTON -->
  229.       <label for="Mgmt">
  230.         <div style="background-color:#b5a900"></div>
  231.       </label>
  232.  
  233.       <!-- CE BUTTON -->
  234.       <label for="CE">
  235.         <div style="background-color:#00888a"></div>
  236.       </label>
  237.  
  238.       <!-- TEACHERS BUTTON -->
  239.       <label for="Teachers">
  240.         <div style="background-color:#6caf37"></div>
  241.       </label>
  242.     </div>
  243.  
  244.    
  245.     <!-- Don't touch this part please <3-->
  246.     <input type="radio" name="staff" id="MOM" checked>
  247.     <input type="radio" name="staff" id="HM">
  248.     <input type="radio" name="staff" id="HOH">
  249.     <input type="radio" name="staff" id="Mgmt">
  250.     <input type="radio" name="staff" id="CE">
  251.     <input type="radio" name="staff" id="Teachers">
  252.  
  253.    
  254.    
  255.     <!-- START OF CONTENT -->
  256.     <div class="content" style="display:flex;flex-direction:row;">
  257.       <!-- MINISTER OF MAGIC -->
  258.       <div class="page">
  259.         <center>
  260.           <img src="https://64.media.tumblr.com/f614f8b68868b5500d689ae8f8aeeeed/2feb9dc48456c15e-fc/s500x750/30873729b6b5a14a43694bda4b9986dd13ff79c0.png" style="width:100px;" />
  261.           <h1 style="color:#00864b">Minister of Magic</h1>
  262.           <img src="https://64.media.tumblr.com/f614f8b68868b5500d689ae8f8aeeeed/2feb9dc48456c15e-fc/s500x750/30873729b6b5a14a43694bda4b9986dd13ff79c0.png" style="width:100px;transform:rotate(180deg)" />
  263.         </center>
  264.  
  265.         <div class="row">
  266.          
  267.           <!-- STAFF INFO -->
  268.           <div class="fam">
  269.             <div class="staff-pic">
  270.               <img src="https://i.pinimg.com/originals/cf/36/ce/cf36ce48c219b99c7a18fdc855a8e530.gif" />
  271.             </div>
  272.             <div class="staff-info">
  273.               <p><b style="color:#00864b"><span style="font-size:18px;">Hermione Granger</span><br>Minister of Magic</b><br>2019 - Present</p>
  274.             </div>
  275.           </div><!-- END OF STAFF -->
  276.          
  277.          
  278.         </div><!-- END OF ROW (Add more rows by copying <div class="row"> to here -->
  279.  
  280.         <center>
  281.           <h2 style="color:gray"><i>Former</i></h2>
  282.         </center>
  283.  
  284.         <div class="row">
  285.          
  286.           <!-- STAFF INFO -->
  287.           <div class="fam">
  288.             <div class="staff-pic">
  289.               <img src="https://1.bp.blogspot.com/-7AeQQNSw0q4/UGOvuD4ckvI/AAAAAAAAAKA/B8sl8mkSj2Q/s1600/DSCN6833.jpg" />
  290.             </div>
  291.             <div class="staff-info">
  292.               <p><b style="color:#00864b"><span style="font-size:18px;">Kingsley Shacklebolt</span></b><br>2000 - 2019</p>
  293.             </div>
  294.           </div><!-- END OF STAFF INFO -->
  295.          
  296.          
  297.         </div><!-- END OF ROW (Add more rows by copying <div class="row"> to here -->
  298.  
  299.       </div><!-- END OF MINISTER OF MAGIC -->
  300.  
  301.       <!-- HEADMASTER -->
  302.       <div class="page">
  303.         <center>
  304.           <img src="https://64.media.tumblr.com/f614f8b68868b5500d689ae8f8aeeeed/2feb9dc48456c15e-fc/s500x750/30873729b6b5a14a43694bda4b9986dd13ff79c0.png" style="width:100px;" />
  305.           <h1 style="color:#1c81d2">Headmaster</h1>
  306.           <img src="https://64.media.tumblr.com/f614f8b68868b5500d689ae8f8aeeeed/2feb9dc48456c15e-fc/s500x750/30873729b6b5a14a43694bda4b9986dd13ff79c0.png" style="width:100px;transform:rotate(180deg)" />
  307.         </center>
  308.  
  309.         <div class="row">
  310.           <!-- STAFF INFO -->
  311.           <div class="fam">
  312.             <div class="staff-pic">
  313.               <img src="https://33.media.tumblr.com/d7022febd78d484593fc6173d84ac383/tumblr_n7f7f2NL4E1t882v5o9_r1_250.gif" />
  314.             </div>
  315.             <div class="staff-info">
  316.               <p><b style="color:#1c81d2"><span style="font-size:18px;">Minerva McGonagall</span><br>Headmaster</b><br>2019 - Present</p>
  317.             </div>
  318.           </div><!-- END OF STAFF INFO -->
  319.          
  320.         </div><!-- END OF ROW (Add more rows by copying <div class="row"> to here -->
  321.  
  322.       </div><!-- END OF HEAD MASTER -->
  323.  
  324.       <!-- HEAD OF HOUSE -->
  325.       <div class="page">
  326.         <center>
  327.           <img src="https://64.media.tumblr.com/f614f8b68868b5500d689ae8f8aeeeed/2feb9dc48456c15e-fc/s500x750/30873729b6b5a14a43694bda4b9986dd13ff79c0.png" style="width:100px;" />
  328.           <h1 style="color:#ba131a ">Heads of Houses</h1>
  329.           <img src="https://64.media.tumblr.com/f614f8b68868b5500d689ae8f8aeeeed/2feb9dc48456c15e-fc/s500x750/30873729b6b5a14a43694bda4b9986dd13ff79c0.png" style="width:100px;transform:rotate(180deg)" />
  330.         </center>
  331.  
  332.         <div class="row">
  333.           <!-- STAFF INFO -->
  334.           <div class="fam">
  335.             <div class="staff-pic">
  336.               <img src="https://24.media.tumblr.com/tumblr_mdco6cm3hQ1rpm9hyo8_r1_250.gif" />
  337.             </div>
  338.             <div class="staff-info">
  339.               <p><b style="color:#ba131a "><span style="font-size:18px;">Neville Longbottom</span><br>Gryffindor</b><br>2019 - Present</p>
  340.             </div>
  341.           </div><!-- END OF STAFF INFO -->
  342.  
  343.           <!-- STAFF INFO -->
  344.           <div class="fam">
  345.             <div class="staff-pic">
  346.               <img src="https://33.media.tumblr.com/d7022febd78d484593fc6173d84ac383/tumblr_n7f7f2NL4E1t882v5o9_r1_250.gif" />
  347.             </div>
  348.             <div class="staff-info">
  349.               <p><b style="color:#ba131a"><span style="font-size:18px;">Pomona Sprout</span><br>Hufflepuff</b><br>1990's - Present</p>
  350.             </div>
  351.           </div><!-- END OF STAFF INFO -->
  352.          
  353.         </div><!-- END OF ROW (Add more rows by copying <div class="row"> to here -->
  354.  
  355.         <div class="row">
  356.           <!-- STAFF INFO -->
  357.           <div class="fam">
  358.             <div class="staff-pic">
  359.               <img src="https://media1.tenor.com/images/0ca021022304db77b62b68ff4a6f0296/tenor.gif?itemid=15404293" />
  360.             </div>
  361.             <div class="staff-info">
  362.               <p><b style="color:#ba131a"><span style="font-size:18px;">Horace Slughorn</span><br>Slytherin</b><br>1990's - Present</p>
  363.             </div>
  364.           </div><!-- END OF STAFF INFO -->
  365.           <!-- STAFF INFO -->
  366.           <div class="fam">
  367.             <div class="staff-pic">
  368.               <img src="https://pbs.twimg.com/profile_images/378800000749867037/0a0fb17b8e283b46ba687df536971fd4.jpeg" />
  369.             </div>
  370.             <div class="staff-info">
  371.               <p><b style="color:#ba131a"><span style="font-size:18px;">Filius Flitwick</span><br>Ravenclaw</b><br>1990's - Present</p>
  372.             </div>
  373.           </div> <!-- END OF STAFF INFO -->
  374.  
  375.         </div><!-- END OF ROW (Add more rows by copying <div class="row"> to here -->
  376.  
  377.       </div><!-- END OF HEAD OF HOUSE-->
  378.  
  379.       <!-- MANAGEMENT TEAM -->
  380.       <div class="page">
  381.         <center>
  382.           <img src="https://64.media.tumblr.com/f614f8b68868b5500d689ae8f8aeeeed/2feb9dc48456c15e-fc/s500x750/30873729b6b5a14a43694bda4b9986dd13ff79c0.png" style="width:100px;" />
  383.           <h1 style="color:#b5a900">Management Team</h1>
  384.           <img src="https://64.media.tumblr.com/f614f8b68868b5500d689ae8f8aeeeed/2feb9dc48456c15e-fc/s500x750/30873729b6b5a14a43694bda4b9986dd13ff79c0.png" style="width:100px;transform:rotate(180deg)" />
  385.         </center>
  386.  
  387.         <div class="row">
  388.           <!-- STAFF INFO -->
  389.           <div class="fam">
  390.             <div class="staff-pic">
  391.               <img src="https://www.fleursdujour.ph/wp-content/uploads/1-doz-Blue-Roses-Bouquet-5000.jpg" />
  392.             </div>
  393.             <div class="staff-info">
  394.               <p><b style="color:#b5a900"><span style="font-size:18px;"></span><br>Plot Leader</b><br>Circa - Present</p>
  395.             </div>
  396.           </div><!-- END OF STAFF INFO -->
  397.  
  398.           <!-- STAFF INFO -->
  399.           <div class="fam">
  400.             <div class="staff-pic">
  401.               <img src="https://images.saatchiart.com/saatchi/802492/art/6926217/5995563-MPWIAOAJ-7.jpg" />
  402.             </div>
  403.             <div class="staff-info">
  404.               <p><b style="color:#b5a900"><span style="font-size:18px;"></span><br>Prefect Leader</b><br>Circa - Present</p>
  405.             </div>
  406.           </div><!-- END OF STAFF INFO -->
  407.  
  408.         </div> <!-- END OF ROW (Add more rows by copying <div class="row"> to here -->
  409.  
  410.         <div class="row">
  411.           <!-- STAFF INFO -->
  412.           <div class="fam">
  413.             <div class="staff-pic">
  414.               <img src="https://pm1.narvii.com/6505/87d8fd17c06a22085d867914ab9c3b6779dc0836_00.jpg" />
  415.             </div>
  416.             <div class="staff-info">
  417.               <p><b style="color:#b5a900"><span style="font-size:18px;"></span><br>Illustrator Lead</b><br>Circa - Present</p>
  418.             </div>
  419.           </div><!-- END OF STAFF INFO -->
  420.  
  421.           <!-- STAFF INFO -->
  422.           <div class="fam">
  423.             <div class="staff-pic">
  424.               <img src="https://i.pinimg.com/originals/69/81/9c/69819c06b10dbf6146ac70412af544e7.jpg" />
  425.             </div>
  426.             <div class="staff-info">
  427.               <p><b style="color:#b5a900"><span style="font-size:18px;"></span><br>Backstory Lead</b><br>Circa - Present</p>
  428.             </div>
  429.           </div><!-- END OF STAFF INFO -->
  430.  
  431.         </div> <!-- END OF ROW (Add more rows by copying <div class="row"> to here -->
  432.  
  433.         <div class="row">
  434.           <!-- STAFF INFO -->
  435.           <div class="fam">
  436.             <div class="staff-pic">
  437.               <img src="https://i.pinimg.com/originals/a2/01/8b/a2018bb50b79c9a8fcd87790fcda2954.jpg" />
  438.             </div>
  439.             <div class="staff-info">
  440.               <p><b style="color:#b5a900"><span style="font-size:18px;"></span><br>Library Lead</b><br>Circa - Present</p>
  441.             </div>
  442.           </div><!-- END OF STAFF INFO -->
  443.  
  444.           <!-- STAFF INFO -->
  445.           <div class="fam">
  446.             <div class="staff-pic">
  447.               <img src="https://pbs.twimg.com/media/EROvMFMU4AA6AF3.jpg" />
  448.             </div>
  449.             <div class="staff-info">
  450.               <p><b style="color:#b5a900"><span style="font-size:18px;"></span><br>Social-Media<br>Leader</b><br>Circa - Present</p>
  451.             </div>
  452.           </div><!-- END OF STAFF INFO -->
  453.  
  454.         </div> <!-- END OF ROW (Add more rows by copying <div class="row"> to here -->
  455.  
  456.       </div><!-- END OF MANAGEMENT TEAM -->
  457.  
  458.       <!-- CHIEF EDITORS -->
  459.       <div class="page">
  460.         <center>
  461.           <img src="https://64.media.tumblr.com/f614f8b68868b5500d689ae8f8aeeeed/2feb9dc48456c15e-fc/s500x750/30873729b6b5a14a43694bda4b9986dd13ff79c0.png" style="width:100px;" />
  462.           <h1 style="color:#00864b">Chief Editors</h1>
  463.           <img src="https://64.media.tumblr.com/f614f8b68868b5500d689ae8f8aeeeed/2feb9dc48456c15e-fc/s500x750/30873729b6b5a14a43694bda4b9986dd13ff79c0.png" style="width:100px;transform:rotate(180deg)" />
  464.         </center>
  465.  
  466.         <div class="row">
  467.           <!-- STAFF INFO -->
  468.           <div class="fam">
  469.             <div class="staff-pic">
  470.               <img src="https://i.pinimg.com/originals/a2/01/8b/a2018bb50b79c9a8fcd87790fcda2954.jpg" />
  471.             </div>
  472.             <div class="staff-info">
  473.               <p><b style="color:#00864b"><span style="font-size:18px;"></span><br>Daily Prophet</b><br>Circa - Present</p>
  474.             </div>
  475.           </div><!-- END OF STAFF INFO -->
  476.  
  477.           <!-- STAFF INFO -->
  478.           <div class="fam">
  479.             <div class="staff-pic">
  480.               <img src="https://pbs.twimg.com/media/EROvMFMU4AA6AF3.jpg" />
  481.             </div>
  482.             <div class="staff-info">
  483.               <p><b style="color:#00864b"><span style="font-size:18px;"></span><br>Quibbler</b><br>Circa - Present</p>
  484.             </div>
  485.           </div><!-- END OF STAFF INFO -->
  486.  
  487.         </div> <!-- END OF ROW (Add more rows by copying <div class="row"> to here -->
  488.  
  489.       </div><!-- CHIEF EDITOR -->
  490.  
  491.       <!-- TEACHERS -->
  492.       <div class="page">
  493.         <center>
  494.           <img src="https://64.media.tumblr.com/f614f8b68868b5500d689ae8f8aeeeed/2feb9dc48456c15e-fc/s500x750/30873729b6b5a14a43694bda4b9986dd13ff79c0.png" style="width:100px;" />
  495.           <h1 style="color:#00864b">Teachers</h1>
  496.           <img src="https://64.media.tumblr.com/f614f8b68868b5500d689ae8f8aeeeed/2feb9dc48456c15e-fc/s500x750/30873729b6b5a14a43694bda4b9986dd13ff79c0.png" style="width:100px;transform:rotate(180deg)" />
  497.         </center>
  498.  
  499.         <div class="row">
  500.           <!-- STAFF INFO -->
  501.           <div class="fam">
  502.             <div class="staff-pic">
  503.               <img src="https://i.pinimg.com/originals/e4/85/5d/e4855da4793f0ef0ff899d65c3168611.jpg" />
  504.             </div>
  505.             <div class="staff-info">
  506.               <p><b style="color:#6caf37"><span style="font-size:18px;"></span><br>-----</b><br>Circa - Present</p>
  507.             </div>
  508.           </div><!-- END OF STAFF INFO -->
  509.  
  510.           <!-- STAFF INFO -->
  511.           <div class="fam">
  512.             <div class="staff-pic">
  513.               <img src="https://i.imgur.com/LgIWW0Q.jpg" />
  514.             </div>
  515.             <div class="staff-info">
  516.               <p><b style="color:#6caf37"><span style="font-size:18px;"></span><br>------</b><br>Circa - Present</p>
  517.             </div>
  518.           </div><!-- END OF STAFF INFO -->
  519.  
  520.         </div> <!-- END OF ROW (Add more rows by copying <div class="row"> to here -->
  521.  
  522.         <div class="row">
  523.           <!-- STAFF INFO -->
  524.           <div class="fam">
  525.             <div class="staff-pic">
  526.               <img src="https://i.imgur.com/LgIWW0Q.jpg" />
  527.             </div>
  528.             <div class="staff-info">
  529.               <p><b style="color:#6caf37"><span style="font-size:18px;"></span><br>------</b><br>Circa - Present</p>
  530.             </div>
  531.           </div><!-- END OF STAFF INFO -->
  532.  
  533.           <!-- STAFF INFO -->
  534.           <div class="fam">
  535.             <div class="staff-pic">
  536.               <img src="https://i.pinimg.com/originals/e4/85/5d/e4855da4793f0ef0ff899d65c3168611.jpg" />
  537.             </div>
  538.             <div class="staff-info">
  539.               <p><b style="color:#6caf37"><span style="font-size:18px;"></span><br>-----</b><br>Circa - Present</p>
  540.             </div>
  541.           </div><!--END OF STAFF INFO -->
  542.  
  543.         </div> <!-- END OF ROW (Add more rows by copying <div class="row"> to here -->
  544.  
  545.         <div class="row">
  546.           <!-- STAFF INFO -->
  547.           <div class="fam">
  548.             <div class="staff-pic">
  549.               <img src="https://i.pinimg.com/originals/e4/85/5d/e4855da4793f0ef0ff899d65c3168611.jpg" />
  550.             </div>
  551.             <div class="staff-info">
  552.               <p><b style="color:#6caf37"><span style="font-size:18px;"></span><br>-----</b><br>Circa - Present</p>
  553.             </div>
  554.           </div><!-- END OF STAFF INFO -->
  555.  
  556.           <!-- STAFF INFO -->
  557.           <div class="fam">
  558.             <div class="staff-pic">
  559.               <img src="https://i.imgur.com/LgIWW0Q.jpg" />
  560.             </div>
  561.             <div class="staff-info">
  562.               <p><b style="color:#6caf37"><span style="font-size:18px;"></span><br>------</b><br>Circa - Present</p>
  563.             </div>
  564.           </div><!-- END OF STAFF INFO -->
  565.  
  566.         </div> <!-- END OF ROW (Add more rows by copying <div class="row"> to here -->
  567.  
  568.         <div class="row">
  569.           <!-- STAFF INFO -->
  570.           <div class="fam">
  571.             <div class="staff-pic">
  572.               <img src="https://i.imgur.com/LgIWW0Q.jpg" />
  573.             </div>
  574.             <div class="staff-info">
  575.               <p><b style="color:#6caf37"><span style="font-size:18px;"></span><br>------</b><br>Circa - Present</p>
  576.             </div>
  577.           </div><!-- END OF STAFF INFO -->
  578.  
  579.           <!-- STAFF INFO -->
  580.           <div class="fam">
  581.             <div class="staff-pic">
  582.               <img src="https://i.pinimg.com/originals/e4/85/5d/e4855da4793f0ef0ff899d65c3168611.jpg" />
  583.             </div>
  584.             <div class="staff-info">
  585.               <p><b style="color:#6caf37"><span style="font-size:18px;"></span><br>-----</b><br>Circa - Present</p>
  586.             </div>
  587.           </div><!-- END OF STAFF INFO -->
  588.  
  589.         </div> <!-- END OF ROW (Add more rows by copying <div class="row"> to here -->
  590.  
  591.         <div class="row">
  592.           <!-- STAFF INFO -->
  593.           <div class="fam">
  594.             <div class="staff-pic">
  595.               <img src="https://i.pinimg.com/originals/e4/85/5d/e4855da4793f0ef0ff899d65c3168611.jpg" />
  596.             </div>
  597.             <div class="staff-info">
  598.               <p><b style="color:#6caf37"><span style="font-size:18px;"></span><br>-----</b><br>Circa - Present</p>
  599.             </div>
  600.           </div><!-- END OF STAFF INFO -->
  601.  
  602.           <!-- STAFF INFO -->
  603.           <div class="fam">
  604.             <div class="staff-pic">
  605.               <img src="https://i.imgur.com/LgIWW0Q.jpg" />
  606.             </div>
  607.             <div class="staff-info">
  608.               <p><b style="color:#6caf37"><span style="font-size:18px;"></span><br>------</b><br>Circa - Present</p>
  609.             </div>
  610.           </div><!-- END OF STAFF INFO -->
  611.  
  612.         </div> <!-- END OF ROW (Add more rows by copying <div class="row"> to here -->
  613.  
  614.         <div class="row">
  615.           <!-- STAFF INFO -->
  616.           <div class="fam">
  617.             <div class="staff-pic">
  618.               <img src="https://i.imgur.com/LgIWW0Q.jpg" />
  619.             </div>
  620.             <div class="staff-info">
  621.               <p><b style="color:#6caf37"><span style="font-size:18px;"></span><br>------</b><br>Circa - Present</p>
  622.             </div>
  623.           </div><!-- END OF STAFF INFO -->
  624.  
  625.           <!-- STAFF INFO -->
  626.           <div class="fam">
  627.             <div class="staff-pic">
  628.               <img src="https://i.pinimg.com/originals/e4/85/5d/e4855da4793f0ef0ff899d65c3168611.jpg" />
  629.             </div>
  630.             <div class="staff-info">
  631.               <p><b style="color:#6caf37"><span style="font-size:18px;"></span><br>-----</b><br>Circa - Present</p>
  632.             </div>
  633.           </div><!-- END OF STAFF INFO -->
  634.  
  635.         </div> <!-- END OF ROW (Add more rows by copying <div class="row"> to here -->
  636.  
  637.         <div class="row">
  638.           <!-- STAFF INFO -->
  639.           <div class="fam">
  640.             <div class="staff-pic">
  641.               <img src="https://i.pinimg.com/originals/e4/85/5d/e4855da4793f0ef0ff899d65c3168611.jpg" />
  642.             </div>
  643.             <div class="staff-info">
  644.               <p><b style="color:#6caf37"><span style="font-size:18px;"></span><br>-----</b><br>Circa - Present</p>
  645.             </div>
  646.           </div><!-- END OF STAFF INFO -->
  647.  
  648.           <!-- STAFF INFO -->
  649.           <div class="fam">
  650.             <div class="staff-pic">
  651.               <img src="https://i.imgur.com/LgIWW0Q.jpg" />
  652.             </div>
  653.             <div class="staff-info">
  654.               <p><b style="color:#6caf37"><span style="font-size:18px;"></span><br>------</b><br>Circa - Present</p>
  655.             </div>
  656.           </div><!-- END OF STAFF INFO -->
  657.  
  658.         </div> <!-- END OF ROW (Add more rows by copying <div class="row"> to here -->
  659.  
  660.         <div class="row">
  661.           <!-- STAFF INFO -->
  662.           <div class="fam">
  663.             <div class="staff-pic">
  664.               <img src="https://i.imgur.com/LgIWW0Q.jpg" />
  665.             </div>
  666.             <div class="staff-info">
  667.               <p><b style="color:#6caf37"><span style="font-size:18px;"></span><br>------</b><br>Circa - Present</p>
  668.             </div>
  669.           </div><!-- END OF STAFF INFO -->
  670.  
  671.           <!-- STAFF INFO -->
  672.           <div class="fam">
  673.             <div class="staff-pic">
  674.               <img src="https://i.pinimg.com/originals/e4/85/5d/e4855da4793f0ef0ff899d65c3168611.jpg" />
  675.             </div>
  676.             <div class="staff-info">
  677.               <p><b style="color:#6caf37"><span style="font-size:18px;"></span><br>-----</b><br>Circa - Present</p>
  678.             </div>
  679.           </div><!-- END OF STAFF INFO -->
  680.  
  681.         </div> <!-- END OF ROW (Add more rows by copying <div class="row"> to here -->
  682.  
  683.         <div class="row">
  684.           <!-- STAFF INFO -->
  685.           <div class="fam">
  686.             <div class="staff-pic">
  687.               <img src="https://i.pinimg.com/originals/e4/85/5d/e4855da4793f0ef0ff899d65c3168611.jpg" />
  688.             </div>
  689.             <div class="staff-info">
  690.               <p><b style="color:#6caf37"><span style="font-size:18px;"></span><br>-----</b><br>Circa - Present</p>
  691.             </div>
  692.           </div><!-- END OF STAFF INFO -->
  693.  
  694.           <!-- STAFF INFO -->
  695.           <div class="fam">
  696.             <div class="staff-pic">
  697.               <img src="https://i.imgur.com/LgIWW0Q.jpg" />
  698.             </div>
  699.             <div class="staff-info">
  700.               <p><b style="color:#6caf37"><span style="font-size:18px;"></span><br>------</b><br>Circa - Present</p>
  701.             </div>
  702.           </div><!-- END OF STAFF INFO -->
  703.  
  704.         </div> <!-- END OF ROW (Add more rows by copying <div class="row"> to here -->
  705.  
  706.       </div><!-- END OF TEACHERS -->
  707.  
  708.     </div>
  709.  
  710.   <!-- DO NOT REMOVE CREDITS PLEASE <3 -->
  711.     <div class="credits">
  712.       &copy; Coding by <a href="https://kawaii-lau.tumblr.com/" target="_blank">Kawaii-Lau</a>
  713.     </div>
  714.   </div>
  715.  
  716. </body>
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!