API tools faq
paste
shippudens

base oc mainpage, limited css

shippudens
Apr 29th, 2022 (edited)
1,284
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.99 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>ylfva's oc template!</title>
  7.     <!-- this page DOESN'T use the style.css file, all the CSS is located in the <style> tag. i tried to keep everything as organized as i could.
  8.    this is just the basic ver if you want to do most of the CSS yourself. i have other versions of this page with more of a cohesive theme.
  9.    this page works well with my oc info template!-->
  10.     <style>
  11.    
  12.    
  13.      /* under 768px */
  14.    
  15.     @media only screen and (max-width: 768px) {
  16.       body {
  17.   background-color:#ffd1dc;
  18.   color: black;
  19.   font-family: Verdana;
  20. }
  21.  
  22.  
  23. #directory {
  24.   margin:auto;
  25.   width:100%;
  26.   min-height:1100px;
  27.   display:flex;
  28.   justify-content:space-between;
  29.     background-color:white;
  30.   z-index:-1;
  31.  
  32. }
  33. /* full page styling END */
  34.  
  35. /* sidebar styling */
  36.  
  37. #sidebar {
  38.   display:none;
  39.  
  40. }
  41.  
  42. .on, .hideable:hover {
  43.   background-color:grey;
  44. }
  45.  
  46. .hideable {
  47.   border:none;
  48.   outline:none;
  49.    width:100%;
  50.   background-color:grey;
  51.   margin-top:-10px;
  52.   height:60px;
  53.   padding-top:10px;
  54.   padding-bottom:10px;
  55. }
  56.  
  57. .menu {
  58.   width:100%;
  59.   display:none;
  60.   background:grey;
  61.  
  62.  
  63. }
  64.  
  65. #menu2 {
  66.   padding:10px;
  67. }
  68.  
  69. /* sidebar styling END */
  70.  
  71. /* main section styling */
  72.  
  73. #ocs {
  74.   width:80%;
  75.   display:flex;
  76.   flex-direction:column;
  77.   margin-top:20px;
  78.   margin-bottom:30px;
  79.   margin-left:auto;
  80.   margin-right:auto;
  81. }
  82.  
  83.  /* Style the button that is used to open and close the collapsible content */
  84. .collapsible {
  85.   background-color: #eee;
  86.   color: #444;
  87.   cursor: pointer;
  88.   padding: 20px;
  89.   width: 90%;
  90.   border: none;
  91.   text-align: left;
  92.   outline: none;
  93.   font-size: 15px;
  94.   margin-top:30px;
  95. }
  96.  
  97. /* style the button if it is clicked on and when you hover over it */
  98. .active, .collapsible:hover {
  99.   background-color: #ccc;
  100. }
  101.  
  102. /* Style the collapsible content. Note: hidden by default */
  103. .content {
  104.   display: none;
  105.     width:inherit;
  106.   margin-left:40px;
  107.   z-index:2;
  108. }
  109.     }
  110.    
  111.     /* 768px to 1200px */
  112.    
  113.     @media only screen and (min-width: 768px) {
  114.        body {
  115.   background-color:#ffd1dc;
  116.   color: black;
  117.   font-family: Verdana;
  118. }
  119.  
  120. #topbar {
  121.   display:none;
  122. }
  123. #directory {
  124.   margin:auto;
  125.   width:100%;
  126.   min-height:1100px;
  127.   display:flex;
  128.   justify-content:space-between;
  129.     background-color:white;
  130.   margin-top:-10px;
  131.  
  132. }
  133. /* full page styling END */
  134.  
  135. /* sidebar styling */
  136.  
  137. #sidebar {
  138.   width:25%;
  139.   background-color:grey;
  140.  
  141. }
  142.  
  143. #links {
  144.   width:80%;
  145.   text-align:center;
  146.   margin-left:10%;
  147. }
  148.  
  149.  
  150. #links .individual a {
  151.   margin:auto;
  152.   margin-top:10px;
  153.   background-color:white;
  154.   width:70%;
  155.   height:25px;
  156.   display:flex;
  157.   align-items:center;
  158.   flex-direction:column;
  159.   justify-content:center;
  160.   text-decoration:none;
  161. }
  162.  
  163. #sidebar img {
  164.   width:80%;
  165.   margin-left:10%;
  166. }
  167.  
  168. #sidetitle {
  169.   width:80%;
  170.   margin-left:10%;
  171.   margin-top:50px;
  172. }
  173.  
  174. #sidetitle h2 {
  175.   font-size:18px;
  176. }
  177.  
  178. #description {
  179.   width:70%;
  180.   height:300px;
  181.   overflow-y:hidden;
  182.   margin-left:10%;
  183.   margin-top:20px;
  184.   margin-bottom:20px;
  185.   background-color:white;
  186.   padding-left:5%;
  187.   padding-right:5%;
  188.   padding-bottom:5%;
  189. }
  190.  
  191. /* sidebar styling END */
  192.  
  193. /* main section styling */
  194.  
  195. #ocs {
  196.   width:65%;
  197.   display:flex;
  198.   flex-direction:column;
  199.   margin-top:20px;
  200.   margin-bottom:30px;
  201. }
  202.  
  203.  /* Style the button that is used to open and close the collapsible content */
  204. .collapsible {
  205.   background-color: #eee;
  206.   color: #444;
  207.   cursor: pointer;
  208.   padding: 20px;
  209.   width: 75%;
  210.   border: none;
  211.   text-align: left;
  212.   outline: none;
  213.   font-size: 15px;
  214.   margin-top:30px;
  215. }
  216.  
  217. /* style the button if it is clicked on and when you hover over it */
  218. .active, .collapsible:hover {
  219.   background-color: #ccc;
  220. }
  221.  
  222. /* Style the collapsible content. Note: hidden by default */
  223. .content {
  224.   display: none;
  225.     width:inherit;
  226.   margin-left:40px;
  227. }
  228.     }
  229.    
  230.    
  231. /* 1599px to 1200px */
  232.    
  233.    
  234.     @media only screen and (min-width: 1200px) {
  235.       /* full page styling */
  236.  
  237.   body {
  238.   background-color:#ffd1dc;
  239.   color: black;
  240.   font-family: Verdana;
  241. }
  242.  
  243. #directory {
  244.   margin:auto;
  245.   width:80%;
  246.   min-width:1180px;
  247.   min-height:950px;
  248.   display:flex;
  249.   justify-content:space-between;
  250.     background-color:white;
  251.   margin-top:-10px;
  252.  
  253. }
  254. /* full page styling END */
  255.  
  256. /* sidebar styling */
  257.  
  258. #sidebar {
  259.   width:20%;
  260.   background-color:grey;
  261.  
  262. }
  263.  
  264. #links {
  265.   width:80%;
  266.   text-align:center;
  267.   margin-left:10%;
  268. }
  269.  
  270.  
  271. #links .individual a {
  272.   margin:auto;
  273.   margin-top:10px;
  274.   background-color:white;
  275.   width:70%;
  276.   height:25px;
  277.   display:flex;
  278.   align-items:center;
  279.   flex-direction:column;
  280.   justify-content:center;
  281.   text-decoration:none;
  282. }
  283.  
  284. #sidebar img {
  285.   width:80%;
  286.   margin-left:10%;
  287. }
  288.  
  289. #sidetitle {
  290.   width:80%;
  291.   margin-left:10%;
  292.   margin-top:50px;
  293. }
  294.  
  295. #sidetitle h2 {
  296.   font-size:18px;
  297. }
  298.  
  299. #description {
  300.   width:70%;
  301.   height:300px;
  302.   overflow-y:hidden;
  303.   margin-left:10%;
  304.   margin-top:20px;
  305.   margin-bottom:20px;
  306.   background-color:white;
  307.   padding-left:5%;
  308.   padding-right:5%;
  309.   padding-bottom:5%;
  310. }
  311.  
  312. /* sidebar styling END */
  313.  
  314. /* main section styling */
  315.  
  316. #ocs {
  317.   width:75%;
  318.   display:flex;
  319.   flex-direction:column;
  320.   margin-top:20px;
  321.   margin-bottom:30px;
  322. }
  323.  
  324.  /* Style the button that is used to open and close the collapsible content */
  325. .collapsible {
  326.   background-color: #eee;
  327.   color: #444;
  328.   cursor: pointer;
  329.   padding: 20px;
  330.   width: 75%;
  331.   border: none;
  332.   text-align: left;
  333.   outline: none;
  334.   font-size: 15px;
  335.   margin-top:30px;
  336. }
  337.  
  338. /* style the button if it is clicked on and when you hover over it */
  339. .active, .collapsible:hover {
  340.   background-color: #ccc;
  341. }
  342.  
  343. /* Style the collapsible content. Note: hidden by default */
  344. .content {
  345.   display: none;
  346.     width:inherit;
  347.   margin-left:40px;
  348. }
  349.     }
  350.    
  351. /* FULL WIDTH: 1600PX AND UP */
  352.  
  353. @media only screen and (min-width: 1600px) {
  354.  
  355. /* full page styling */
  356.  
  357.   body {
  358.   background-color:#ffd1dc;
  359.   color: black;
  360.   font-family: Verdana;
  361. }
  362.  
  363. #directory {
  364.   margin:auto;
  365.   width:75%;
  366.   max-width:1300px;
  367.   min-width:900px;
  368.   min-height:950px;
  369.   display:flex;
  370.   justify-content:space-between;
  371.     background-color:white;
  372.   margin-top:-10px;
  373.  
  374. }
  375. /* full page styling END */
  376.  
  377. /* sidebar styling */
  378.  
  379. #sidebar {
  380.   width:20%;
  381.   background-color:grey;
  382.  
  383. }
  384.  
  385. #links {
  386.   width:80%;
  387.   text-align:center;
  388.   margin-left:10%;
  389. }
  390.  
  391.  
  392. #links .individual a {
  393.   margin:auto;
  394.   margin-top:10px;
  395.   background-color:white;
  396.   width:50%;
  397.   height:25px;
  398.   display:flex;
  399.   align-items:center;
  400.   flex-direction:column;
  401.   justify-content:center;
  402.   text-decoration:none;
  403. }
  404.  
  405. #sidebar img {
  406.   width:80%;
  407.   margin-left:10%;
  408. }
  409.  
  410. #sidetitle {
  411.   max-width:80%;
  412.   margin-left:10%;
  413.   margin-top:50px;
  414. }
  415.  
  416. #sidetitle h2 {
  417.   font-size:22px;
  418. }
  419.  
  420. #description {
  421.   width:70%;
  422.   height:200px;
  423.   overflow-y:hidden;
  424.   margin-left:10%;
  425.   margin-top:20px;
  426.   margin-bottom:20px;
  427.   background-color:white;
  428.   padding-left:5%;
  429.   padding-right:5%;
  430.   padding-bottom:5%;
  431. }
  432.  
  433. /* sidebar styling END */
  434.  
  435. /* main section styling */
  436.  
  437. #ocs {
  438.   width:75%;
  439.   display:flex;
  440.   flex-direction:column;
  441.   margin-top:20px;
  442.   margin-bottom:30px;
  443. }
  444.  
  445.  /* Style the button that is used to open and close the collapsible content */
  446. .collapsible {
  447.   background-color: #eee;
  448.   color: #444;
  449.   cursor: pointer;
  450.   padding: 20px;
  451.   width: 75%;
  452.   border: none;
  453.   text-align: left;
  454.   outline: none;
  455.   font-size: 15px;
  456.   margin-top:30px;
  457. }
  458.  
  459. /* style the button if it is clicked on and when you hover over it */
  460. .active, .collapsible:hover {
  461.   background-color: #ccc;
  462. }
  463.  
  464. /* Style the collapsible content. Note: hidden by default */
  465. .content {
  466.   display: none;
  467.     width:inherit;
  468.   margin-left:40px;
  469. }
  470.  
  471. /* main section styling END */
  472.  
  473. }
  474.  
  475.     </style>
  476.   </head>
  477.  
  478.  
  479.   <body>
  480.   <div id="topbar">
  481.   <button type="button" class="hideable"><h3>info</h3></button>
  482.   <div class="menu">
  483.     <div id="menu2">
  484.     <div id="sidetitle">
  485.       <h2>This Guy's OCs</h2>
  486.     </div>
  487.     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
  488.     </div>
  489.   </div>
  490. </div>
  491.   <div id="directory"> <!-- this is the full page, everything basically -->
  492.   <div id="sidebar"> <!-- grey sidebar -->
  493.     <div id="sidetitle">
  494.       <h2>This Guy's OCs</h2>
  495.     </div>
  496.     <div id="sideicon">
  497.       <img src="default.jpg">
  498.     </div>
  499.     <div id="description">
  500.      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <!-- try not to make this too long, the desc. has a max height of 200px -->
  501.     </div>
  502.     <div id="links">
  503.       <div class="individual">
  504.         <a href=""><p>link one</p></a>
  505.       </div>
  506.       <div class="individual">
  507.         <a href=""><p>link two</p></a>
  508.       </div>
  509.       <div class="individual">
  510.         <a href=""><p>link three</p></a>
  511.       </div>
  512.       <div class="individual">
  513.         <a href=""><p>link four</p></a>
  514.       </div>
  515.       <div class="individual">
  516.         <a href=""><p>link five</p></a>
  517.       </div>
  518.       <div class="individual">
  519.         <a href=""><p>link six</p></a>
  520.       </div>
  521.     </div>
  522.   </div> <!-- sidebar end -->
  523.  
  524.   <div id="ocs"> <!-- main portion of the page (in white) -->
  525.     <div id="dirtitle">
  526.       <h1>Directory of OCs</h1>
  527.     </div>
  528.    
  529.      <button type="button" class="collapsible">category one</button> <!-- clickable button -->
  530.        <div class="content"> <!-- hidden by default -->
  531.        <div id="category">
  532.       <a href=""><p>Nameguy Jones</p></a>
  533.       <a href=""><p>Nameguy Jones</p></a>
  534.       <a href=""><p>Nameguy Jones</p></a>
  535.       <a href=""><p>Nameguy Jones</p></a>
  536.       <a href=""><p>Nameguy Jones</p></a>
  537.     </div>
  538.       </div> <!-- hidden content end -->
  539.    
  540.    
  541.    <button type="button" class="collapsible">category two</button> <!-- clickable button -->
  542.        <div class="content"> <!-- hidden by default -->
  543.        <div id="category">
  544.       <a href=""><p>Nameguy Jones</p></a>
  545.       <a href=""><p>Nameguy Jones</p></a>
  546.       <a href=""><p>Nameguy Jones</p></a>
  547.       <a href=""><p>Nameguy Jones</p></a>
  548.       <a href=""><p>Nameguy Jones</p></a>
  549.     </div>
  550.       </div> <!-- hidden content end -->
  551.    
  552.     <button type="button" class="collapsible">category three</button> <!-- clickable button -->
  553.        <div class="content"> <!-- hidden by default -->
  554.        <div id="category">
  555.       <a href=""><p>Nameguy Jones</p></a>
  556.       <a href=""><p>Nameguy Jones</p></a>
  557.       <a href=""><p>Nameguy Jones</p></a>
  558.       <a href=""><p>Nameguy Jones</p></a>
  559.       <a href=""><p>Nameguy Jones</p></a>
  560.     </div>
  561.       </div> <!-- hidden content end -->
  562.      
  563.     <button type="button" class="collapsible">category four</button> <!-- clickable button -->
  564.        <div class="content"> <!-- hidden by default -->
  565.        <div id="category">
  566.       <a href=""><p>Nameguy Jones</p></a>
  567.       <a href=""><p>Nameguy Jones</p></a>
  568.       <a href=""><p>Nameguy Jones</p></a>
  569.       <a href=""><p>Nameguy Jones</p></a>
  570.       <a href=""><p>Nameguy Jones</p></a>
  571.     </div>
  572.       </div> <!-- hidden content end -->
  573.      
  574.       <button type="button" class="collapsible">category five</button> <!-- clickable button -->
  575.        <div class="content"> <!-- hidden by default -->
  576.        <div id="category">
  577.       <a href=""><p>Nameguy Jones</p></a>
  578.       <a href=""><p>Nameguy Jones</p></a>
  579.       <a href=""><p>Nameguy Jones</p></a>
  580.       <a href=""><p>Nameguy Jones</p></a>
  581.       <a href=""><p>Nameguy Jones</p></a>
  582.     </div>
  583.       </div> <!-- hidden content end -->
  584.       </div> <!-- main portion end -->
  585.   </div> <!-- full page end -->
  586.  
  587.   <!-- DONT TOUCH THE <script> TAG. DONT DO IT. TRUST ME. -->
  588.   <!-- <script> controls the buttons, unless you wanna mess that up i'd leave this bit alone -->
  589.  
  590.   <script>
  591. var coll = document.getElementsByClassName("collapsible");
  592. var i;
  593.  
  594. for (i = 0; i < coll.length; i++) {
  595.  coll[i].addEventListener("click", function() {
  596.    this.classList.toggle("active");
  597.    var content = this.nextElementSibling;
  598.    if (content.style.display === "block") {
  599.      content.style.display = "none";
  600.    } else {
  601.      content.style.display = "block";
  602.    }
  603.  });
  604. }
  605.  
  606. var coll = document.getElementsByClassName("hideable");
  607. var i;
  608.  
  609. for (i = 0; i < coll.length; i++) {
  610.  coll[i].addEventListener("click", function() {
  611.    this.classList.toggle("on");
  612.    var content = this.nextElementSibling;
  613.    if (content.style.display === "block") {
  614.      content.style.display = "none";
  615.    } else {
  616.      content.style.display = "block";
  617.    }
  618.  });
  619. }
  620. </script>
  621.   </body>
  622. </html>
  623. <!-- that's it! -->
  624.  
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!