covermn
covermn
Covermn Codes and inspiration
1 post
Don't wanna be here? Send us removal request.
covermn · 4 years ago
Text
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300&display=swap" rel="stylesheet"> <style> * {   box-sizing: border-box; } body {   background-color: #f1f1f1;   padding: 20px;   font-family: 'Chakra Petch', sans-serif; } /* Center website */ .main {   max-width: 1000px;   margin: auto; } h1 {   font-size: 50px;   word-break: break-all; } .row {   margin: 10px -16px; } /* Add padding BETWEEN each column */ .row, .row > .column {   padding: 8px; } /* Create three equal columns that floats next to each other */ .column { float: left;   width: 33.33%;   display: none; /* Hide all elements by default */ } /* Clear floats after rows */ .row:after {   content: "";   display: table;   clear: both; } /* Content */ .content {   background-color: white;   padding: 10px; } /* The "show" class is added to the filtered elements */ .show {   display: block; } .MoM{     color:#00864b; } .HM{     color:#1c81d2; } .HoH{     color:#ba131a; } .management{     color:#b5a900; } .CEs{     color:#00888a; } .professors{     color:#6caf37; } /* Style the buttons */ .btn {   border: none;   outline: none;   padding: 12px 16px;   background-color: white;   cursor: pointer; } .btn:hover {   background-color: #ddd; } .btn.active {   background-color: #666;   color: white; } /* width */ ::-webkit-scrollbar {   width: 20px; } /* Track */ ::-webkit-scrollbar-track {   box-shadow: inset 0 0 5px grey;   border-radius: 10px; } /* Handle */ ::-webkit-scrollbar-thumb {   background-image: linear-gradient(#00864b 16.7%, #1c81d2 33.4%, #ba131a 50.1%, #b5a900 66.8%, #6caf37 83.5%, #00888a);   border-radius: 10px; } </style> </head> <body> <!-- MAIN (Center website) --> <div class="main"> <h1>World of XXXXX</h1> <hr> <h2>Grad Staff</h2> <div id="myBtnContainer"> <button class="btn active" onclick="filterSelection('all')"> Show all</button> <button class="btn" onclick="filterSelection('MoM')"> MoM</button> <button class="btn" onclick="filterSelection('HM')"> HM</button> <button class="btn" onclick="filterSelection('HoH')"> HoH</button> <button class="btn" onclick="filterSelection('management')"> Management</button> <button class="btn" onclick="filterSelection('CEs')"> CEs</button> <button class="btn" onclick="filterSelection('professors')"> Professors</button> </div> <!-- Portfolio Gallery Grid, note that if you use the buttons to put the site-correct job, you can use Site Title to say what house/team they are, which "<span style="color:#XXX;"> Team </span>" can do! --> <div class="row"> <div class="column MoM"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="MoM" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column HM"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="HM" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column HoH"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="HoH" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column HoH"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="HoH" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column HoH"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="HoH" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column HoH"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture"
alt="HoH" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column management"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="Prefect Lead" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column management"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="SoMe Lead" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column management"> <div class="content"> <h4 style="color:;">Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="Backstory Lead" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column management"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="Library Lead" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column management"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="Artist Lead" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column management"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="Plot Lead" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column CEs"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="Paper 1" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column CEs"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="Paper 2" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <!-- When I say Subject 1, I mean the first subject to appear on the tab with lessons, from left to right, however you can of course change them to be site-specific--> <div class="column professors"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="Subject 1" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column professors"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="Subject 2" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column professors"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="Subject 3" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column professors"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="Subject 4" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column professors"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="Subject 5" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div
class="column professors"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="Subject 6" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column professors"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="Subject 7" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column professors"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="Subject 8" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column professors"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="Subject 9" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column professors"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="Subject 10" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column professors"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="Subject 11" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column professors"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="Subject 12" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column professors"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="Subject 13" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column professors"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="Subject 14" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column professors"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="Subject 15" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column professors"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="Subject 16" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column professors"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="Subject 17" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column professors"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="Subject 18" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column professors"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="Subject 19" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <div class="column
professors"> <div class="content"> <h4>Site Title</h4> <img src="https://worldofsite.com/user/profile/name-name/profile-picture" alt="Subject 20" style="width:100%"> <h4>Current Name</h4> <h4>XX/XX/XX-XX/XX/XX</h4> <p>Old Name</p> <p>Old Dates</p> </div> </div> <!-- END GRID --> </div> <!-- END MAIN --> </div> <script> filterSelection("all") function filterSelection(c) { var x, i;   x = document.getElementsByClassName("column"); if (c == "all") c = ""; for (i = 0; i < x.length; i++) {     w3RemoveClass(x[i], "show"); if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show"); } } function w3AddClass(element, name) { var i, arr1, arr2;   arr1 = element.className.split(" ");   arr2 = name.split(" "); for (i = 0; i < arr2.length; i++) { if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];} } } function w3RemoveClass(element, name) { var i, arr1, arr2;   arr1 = element.className.split(" ");   arr2 = name.split(" "); for (i = 0; i < arr2.length; i++) { while (arr1.indexOf(arr2[i]) > -1) {       arr1.splice(arr1.indexOf(arr2[i]), 1); } }   element.className = arr1.join(" "); } // Add active class to the current button (highlight it) var btnContainer = document.getElementById("myBtnContainer"); var btns = btnContainer.getElementsByClassName("btn"); for (var i = 0; i < btns.length; i++) {   btns[i].addEventListener("click", function(){ var current = document.getElementsByClassName("active");     current[0].className = current[0].className.replace(" active", ""); this.className += " active"; }); } </script> </body> </html>
1 note · View note