HUB styles

Developer
Stuart Allen
Size
13,840 Kb
Views
32,384
  1. HUB styles Previews
  2. HUB styles HTML Codes
  3. HUB styles CSS Codes

How do I make an hub styles?

What is a hub styles? How do you make a hub styles? This script and codes were developed by Stuart Allen on 27 November 2022, Sunday.

HUB styles Previews
IQ Test

HUB styles - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>HUB styles</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="greys"> <h2>Greys</h2>
<div class="swatches"> <div class="swatch grey-50"></div> <div class="swatch grey-100"></div> <div class="swatch grey-200"></div> <div class="swatch grey-300"></div> <div class="swatch grey-400"></div> <div class="swatch grey-500"></div> <div class="swatch grey-600"></div> <div class="swatch grey-700"></div> <div class="swatch grey-800"></div> <div class="swatch grey-900"></div> </div>
</div>
<hr>
<div id="type"> <h2>Type</h2> <h2>&#60;H2&#62; section headings</h2> <h3>&#60;H3&#62; subheadings</h3> <h3 class="article-heading">&#60;H3 class="article-heading"&#62; article heading</h3> <p>&#60;P&#62; Sea Ice: Physics and Remote Sensing addresses experiences acquired mainly in Canada by researchers in the fields of ice physics and growth history in relation to its polycrystalline structure as well as ice parameters retrieval from remote sensing observations. The volume describes processes operating at the macro- and microscale (e.g., brine entrapment in sea ice, crystallographic texture of ice types, brine drainage mechanisms, etc.).</p>
</div>
<hr>
<div id="icons"> <h2>Icons</h2> <svg class="ic-16px ic-btn" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"> <g id="Layer%201"> <rect x="0" y="0" width="8" height="1" /> <rect x="0" y="3" width="8" height="1" /> <rect x="0" y="6" width="8" height="1" /> </g> </svg> <svg class="ic-16px ic-btn" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"> <path d="M3.5 0c-1.93 0-3.5 1.57-3.5 3.5s1.57 3.5 3.5 3.5c.59 0 1.17-.14 1.66-.41a1 1 0 0 0 .13.13l1 1a1.02 1.02 0 1 0 1.44-1.44l-1-1a1 1 0 0 0-.16-.13c.27-.49.44-1.06.44-1.66 0-1.93-1.57-3.5-3.5-3.5zm0 1c1.39 0 2.5 1.11 2.5 2.5 0 .66-.24 1.27-.66 1.72-.01.01-.02.02-.03.03a1 1 0 0 0-.13.13c-.44.4-1.04.63-1.69.63-1.39 0-2.5-1.11-2.5-2.5s1.11-2.5 2.5-2.5z" /> </svg> <svg class="ic-16px ic-btn" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"> <path d="M4 0c-1.1 0-2 .9-2 2 0 1.04-.52 1.98-1.34 2.66-.41.34-.66.82-.66 1.34h8c0-.52-.24-1-.66-1.34-.82-.68-1.34-1.62-1.34-2.66 0-1.1-.89-2-2-2zm-1 7c0 .55.45 1 1 1s1-.45 1-1h-2z" /> </svg> <svg class="ic-16px ic-btn" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"> <path d="M6 0l-1 1 2 2 1-1-2-2zm-2 2l-4 4v2h2l4-4-2-2z" /> </svg> <svg class="ic-16px ic-btn" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"> <path d="M0 0v2h7v-2h-7zm0 3v4.91c0 .05.04.09.09.09h6.81c.05 0 .09-.04.09-.09v-4.91h-7zm1 1h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm-4 2h1v1h-1v-1zm2 0h1v1h-1v-1z" /> </svg> <svg class="ic-16px ic-btn" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"> <path d="M6.41 0l-.69.72-2.78 2.78-.81-.78-.72-.72-1.41 1.41.72.72 1.5 1.5.69.72.72-.72 3.5-3.5.72-.72-1.44-1.41z" transform="translate(0 1)" /> </svg> <svg class="ic-16px ic-btn" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"> <path d="M1.41 0l-1.41 1.41.72.72 1.78 1.81-1.78 1.78-.72.69 1.41 1.44.72-.72 1.81-1.81 1.78 1.81.69.72 1.44-1.44-.72-.69-1.81-1.78 1.81-1.81.72-.72-1.44-1.41-.69.72-1.78 1.78-1.81-1.78-.72-.72z" /> </svg> <svg class="ic-16px ic-btn" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"> <path d="M0 0v1l4 2 4-2v-1h-8zm0 2v4h8v-4l-4 2-4-2z" transform="translate(0 1)" /> </svg> <svg class="ic-16px ic-btn" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"> <path d="M0 0v8h7v-4h-4v-4h-3zm4 0v3h3l-3-3zm-3 2h1v1h-1v-1zm0 2h1v1h-1v-1zm0 2h4v1h-4v-1z" /> </svg> <svg class="ic-16px ic-btn" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"> <path d="M0 0v8h8v-2h-1v1h-6v-6h1v-1h-2zm4 0l1.5 1.5-2.5 2.5 1 1 2.5-2.5 1.5 1.5v-4h-4z" /> </svg> <svg class="ic-16px ic-btn" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"> <path d="M4 0l-1 3h-3l2.5 2-1 3 2.5-2 2.5 2-1-3 2.5-2h-3l-1-3z" /> </svg> <svg class="ic-16px ic-btn" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"> <path d="M0 0v8h8v-8h-8zm1 1h6v3l-1-1-1 1 2 2v1h-1l-4-4-1 1v-3z" /> </svg> <svg class="ic-16px ic-btn" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"> <path d="M4 0l-4 3h1v4h2v-2h2v2h2v-4.03l1 .03-4-3z" /> </svg> <svg class="ic-16px ic-btn" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"> <path d="M3 0v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2z" /> </svg> <svg class="ic-16px ic-btn" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"> <path d="M0 0v2h8v-2h-8z" transform="translate(0 3)" /> </svg> <svg class="ic-16px ic-btn" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"> <path d="M0 0v7h8v-1h-7v-6h-1zm5 0v5h2v-5h-2zm-3 2v3h2v-3h-2z" /> </svg> <svg class="ic-16px ic-btn" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"> <path d="M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z" transform="translate(1)" /> </svg> <svg class="ic-16px ic-btn" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"> <path d="M4 0c-1.1 0-2 1.12-2 2.5s.9 2.5 2 2.5 2-1.12 2-2.5-.9-2.5-2-2.5zm-2.09 5c-1.06.05-1.91.92-1.91 2v1h8v-1c0-1.08-.84-1.95-1.91-2-.54.61-1.28 1-2.09 1-.81 0-1.55-.39-2.09-1z" /> </svg> <svg class="ic-16px ic-btn" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"> <path d="M4 0l-4 4h8l-4-4z" transform="translate(0 2)" /> </svg> <!-- --- stay connected icons --- --> <h2 id="stayconnected">Stay connected</h2> <svg xmlns="http://www.w3.org/2000/svg" class="ic-24px ic-btn twitter" viewBox="0 0 2000 1625.36"> <path d="M2000 192.4c-73.58 32.64-152.67 54.7-235.66 64.6 84.7-50.77 149.77-131.18 180.4-227-79.28 47.03-167.1 81.17-260.56 99.57C1609.34 49.82 1502.7 0 1384.68 0c-226.6 0-410.33 183.7-410.33 410.3 0 32.17 3.63 63.5 10.63 93.52C643.96 486.72 341.6 323.35 139.24 75.1c-35.33 60.6-55.56 131.1-55.56 206.3 0 142.35 72.44 267.94 182.54 341.52-67.26-2.13-130.53-20.6-185.85-51.32-.04 1.7-.04 3.42-.04 5.16 0 198.8 141.44 364.63 329.15 402.34-34.43 9.38-70.68 14.4-108.1 14.4-26.44 0-52.15-2.58-77.2-7.37 52.2 163 203.75 281.65 383.3 284.95-140.43 110.06-317.35 175.66-509.6 175.66-33.12 0-65.78-1.95-97.88-5.74 181.6 116.42 397.27 184.36 629 184.36 754.72 0 1167.45-625.24 1167.45-1167.47 0-17.8-.4-35.5-1.2-53.1C1875.43 346.96 1945 274.7 2000 192.4"/>
</svg> <svg class="ic-24px ic-btn facebook" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 266.893 266.895"> <path id="Blue_1_" fill="#FFFFFF" d="M248.082,262.307c7.854,0,14.223-6.369,14.223-14.225V18.812 c0-7.857-6.368-14.224-14.223-14.224H18.812c-7.857,0-14.224,6.367-14.224,14.224v229.27c0,7.855,6.366,14.225,14.224,14.225 H248.082z" /> <path id="f" fill="#3C5A99" d="M182.409,262.307v-99.803h33.499l5.016-38.895h-38.515V98.777c0-11.261,3.127-18.935,19.275-18.935 l20.596-0.009V45.045c-3.562-0.474-15.788-1.533-30.012-1.533c-29.695,0-50.025,18.126-50.025,51.413v28.684h-33.585v38.895h33.585 v99.803H182.409z" /> </svg> <svg class="ic-24px ic-btn cta" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-1 11 24 24" enable-background="new -1 11 24 24" xml:space="preserve">
<path fill="#ffffff" d="M16,11H6c-1.1,0-2,0.9-2,2v20c0,1.1,0.9,2,2,2h10c1.1,0,2-0.9,2-2V13C18,11.9,17.1,11,16,11z M11,34 c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1s1,0.4,1,1C12,33.6,11.6,34,11,34z M16,31H6V13h10V31z"/> </svg> <svg class="ic-24px ic-btn cta" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-1 11 24 24" enable-background="new -1 11 24 24" xml:space="preserve">
<path fill="#FFFFFF" d="M8,11v9H2l9,9l9-9h-6v-9H8z M-1,32v3h24v-3H-1z"/>
</svg> <h3>Rounded</h3> <h3>Circle</h3>
</div>
<hr>
<div id="ui-elements"> <h2>UI elements <small>AnthrouSource example</small></h2> <!--button--> <a class="btn">Button</a> <div class="clear"></div> <!--wol log in module status:no log in--> <div class="wol-header"> <div class="wol-cont"> <ul> <li class="wol-logo">Wiley Online Library </ul> </div> </div> <div class="clear"></div> <!--wol log in module status:logged out--> <div class="wol-header"> <div class="wol-cont"> <ul> <li class="wol-logo">Wiley Online Library <li class="wol-btn">Log in <li class="wol-btn">Register </ul> </div> </div> <div class="clear"></div> <!--wol log in module status:logged in--> <div class="wol-header"> <div class="header-logo"><img src="" /></div> <div class="wol-cont"> <ul> <li class="wol-logo">Wiley Online Library <li class="wol-btn">Welcome, Christopher <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"> <path d="M4 0l-4 4h8l-4-4z" transform="translate(0 2)" /> </svg> <ul> <li>My profile <li>Log out </ul> </ul> </div> </div> <div class="clear"></div> <h5>Please note:<br>a) the dropdown should appear on toggle, rather than just hover
</div> <!-- feature image --> <div class="feat-cont"> <div class="feat-img"><img src="http://placehold.it/600x400"></div> <div class="text-cont"> <div class="feat-copy"><span class="feat-journal">City and Society</span><span class="feat-name">New treatment options presented at ACR</span></div> <div class="feat-more"> <div class="feat-more-ic"><svg class="ic-16px" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"> <path d="M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z" transform="translate(1)" /> </svg></div> <span class="feat-more-text">Learn More</span> </div> </div> </div>
<hr>
<div id="society"> <h2>Society colours*</h2> <h5>*roll over for hover - hover hex codes in CSS</h5> <div class="well"> <h3>AAA</h3> <div class="swatches"> <div class="swatch aaa-tan"><span class="swatch__name">aaa-tan</span></div> <div class="swatch aaa-red"><span class="swatch__name">aaa-red</span></div> <div class="swatch aaa-blue"><span class="swatch__name">aaa-blue</span></div> </div> </div> <div class="well"> <h3>AASLD</h3> <div class="swatches"> <div class="swatch aasld-green"><span class="swatch__name">aasld-green</span></div> <div class="swatch aasld-orange"><span class="swatch__name">aasld-orange</span></div> </div> </div> <div class="well"> <h3>AGU</h3> <div class="swatches"> <div class="swatch agu-darkblue"><span class="swatch__name">agu-darkblue</span></div> <div class="swatch agu-lightblue"><span class="swatch__name">agu-lightblue</span></div> </div> </div> <div class="well"> <h3>PhySoc</h3> <div class="swatches"> <div class="swatch physoc-blue"><span class="swatch__name">physoc-blue</span></div> <div class="swatch physoc-teal"><span class="swatch__name">physoc-teal</span></div> </div> </div> <div class="well"> <h3>Cochrane</h3> <div class="swatches"> <div class="swatch cochrane-blue"><span class="swatch__name">cochrane-blue</span></div> <div class="swatch cochrane-pink"><span class="swatch__name">cochrane-pink</span></div> </div> </div> <div class="well"> <h3>ASLO</h3> <div class="swatches"> <div class="swatch aslo-blue"><span class="swatch__name">aslo-blue</span></div> <div class="swatch aslo-darkblue"><span class="swatch__name">aslo-darkblue</span></div> </div> </div> <div class="well"> <h3>FEBS</h3> <div class="swatches"> <div class="swatch febs-blue"><span class="swatch__name">febs-blue</span></div> <div class="swatch febs-black"><span class="swatch__name">febs-black</span></div> <div class="swatch febs-red"><span class="swatch__name">febs-red</span></div> </div> </div> <div class="well"> <h3>ESA</h3> <div class="swatches"> <div class="swatch esa-teal"><span class="swatch__name">esa-teal</span></div> <div class="swatch esa-darkteal"><span class="swatch__name">esa-darkteal</span></div> </div> </div> <div class="well"> <h3>OBGYN</h3> <div class="swatches"> <div class="swatch obgyn-darkblue"><span class="swatch__name">obgyn-darkblue</span></div> <div class="swatch obgyn-lightblue"><span class="swatch__name">obgyn-lightblue</span></div> </div> </div> <div class="well"> <h3>IUBMB</h3> <div class="swatches"> <div class="swatch iubmb-green"><span class="swatch__name">iubmb-green</span></div> <div class="swatch iubmb-red"><span class="swatch__name">iubmb-red</span></div> </div> </div> <div class="well"> <h3>ASCPT</h3> <div class="swatches"> <div class="swatch ascpt-dark-blue"><span class="swatch__name">ascpt-dark-blue</span></div> <div class="swatch ascpt-light-blue"><span class="swatch__name">ascpt-light-blue</span></div> </div> </div> <div class="well"> <h3>NPH</h3> <div class="swatches"> <div class="swatch nph-primary"><span class="swatch__name">nph-primary</span></div> <div class="swatch nph-secondary"><span class="swatch__name">nph-secondary</span></div> </div> </div> <div class="well"> <h3>BES</h3> <div class="swatches"> <div class="swatch bes-primary"><span class="swatch__name">bes-primary</span></div> <div class="swatch bes-secondary"><span class="swatch__name">bes-secondary</span></div> </div> </div> <div class="well"> <h3>RMetS</h3> <div class="swatches"> <div class="swatch rmets-primary"><span class="swatch__name">rmets-primary</span></div> <div class="swatch rmets-secondary"><span class="swatch__name">rmets-secondary</span></div> </div> </div> <div class="well"> <h3>RSS</h3> <div class="swatches"> <div class="swatch rss-primary"><span class="swatch__name">rss-primary</span></div> <div class="swatch rss-secondary"><span class="swatch__name">rss-secondary</span></div> <div class="swatch rss-tertiary"><span class="swatch__name">rss-tertiary</span></div> </div> </div> <div class="well"> <h3>ILA</h3> <div class="swatches"> <div class="swatch ila-yellow"><span class="swatch__name">ila-yellow</span></div> <div class="swatch ila-grey"><span class="swatch__name">ila-grey</span></div> <div class="swatch ila-purple"><span class="swatch__name">ila-purple</span></div> <div class="swatch ila-lightgrey"><span class="swatch__name">ila-lightgrey</span></div> </div> <h4>ILA: Journals</h4> <div class="swatches"> <div class="swatch ila-trtr"><span class="swatch__name">ila-trtr</span></div> <div class="swatch ila-jaal"><span class="swatch__name">ila-jaal</span></div> <div class="swatch ila-rrq"><span class="swatch__name">ila-rrq</span></div> </div> </div> <div class="well"> <h3>AAPM <small>American Association of Physicists in Medicine</small></h3> <div class="swatches"> <div class="swatch aapm-primary"><span class="swatch__name">aapm-primary</span></div> <div class="swatch aapm-secondary"><span class="swatch__name">aapm-secondary</span></div> </div> </div> <div class="well"> <h3>AlphaMed <small>StemCells</small></h3> <div class="swatches"> <div class="swatch alphamed-blue"><span class="swatch__name">alphamed-blue</span></div> <div class="swatch alphamed-darkblue"><span class="swatch__name">alphamed-darkblue</span></div> <div class="swatch alphamed-lightgrey"><span class="swatch__name">alphamed-lightgrey</span></div> </div> </div> <div class="well"> <h3>BPS <small>British Pharmacological Society</small></h3> <div class="swatches"> <div class="swatch bps-darkblue"><span class="swatch__name">bps-darkblue</span></div> <div class="swatch bps-lightblue"><span class="swatch__name">bps-lightblue</span></div> </div> </div> <div class="well"> <h3>LMS <small>London Mathematical Society</small></h3> <div class="swatches"> <div class="swatch lms-darkblue"><span class="swatch__name">lms-darkblue</span></div> <div class="swatch lms-lightblue"><span class="swatch__name">lms-lightblue</span></div> </div> <h4>LMS: Journals</h4> <div class="swatches"> <div class="swatch lms-blmsoc"><span class="swatch__name">lms-blmsoc</span></div> <div class="swatch lms-jlms"><span class="swatch__name">lms-jlms</span></div> <div class="swatch lms-jotopo"><span class="swatch__name">lms-jotopo</span></div> <div class="swatch lms-plms"><span class="swatch__name">lms-plms</span></div> <div class="swatch lms-tlms"><span class="swatch__name">lms-tlms</span></div> </div> </div> <div class="well"> <h3>SETAC <small>Society of Environmental Toxicology and Chemistry</small></h3> <div class="swatches"> <div class="swatch setac-blue"><span class="swatch__name">setac-blue</span></div> <div class="swatch setac-teal"><span class="swatch__name">setac-teal</span></div> </div> </div> <div class="well"> <h3>NYAS <small>New York Academy of Sciences</small></h3> <div class="swatches"> <h4>Primary</h4> <div class="swatch nyas-coolgrey"><span class="swatch__name">nyas-coolgrey</span></div> <div class="swatch nyas-warmgrey"><span class="swatch__name">nyas-warmgrey</span></div> <div class="swatch nyas-magenta"><span class="swatch__name">nyas-magenta</span></div> <h4>Secondary</h4> <div class="swatch nyas-yellow"><span class="swatch__name">nyas-yellow</span></div> <div class="swatch nyas-blue"><span class="swatch__name">nyas-blue</span></div> <div class="swatch nyas-teal"><span class="swatch__name">nyas-teal</span></div> <div class="swatch nyas-cream"><span class="swatch__name">nyas-cream</span></div> <div class="swatch nyas-grey"><span class="swatch__name">nyas-grey</span></div> <div class="swatch nyas-black"><span class="swatch__name">nyas-black</span></div> </div> </div> <div class="well"> <h3>ZSL <small>Zoological Society of London</small></h3> <div class="swatches"> <div class="swatch zsl-marineBlue"><span class="swatch__name">zsl-marineBlue</span></div> <div class="swatch zsl-tigerOrange"><span class="swatch__name">zsl-tigerOrange</span></div> </div> </div> <div class="well"> <h3>ACS <small>American Cancer Society</small></h3> <div class="swatches"> <div class="swatch acs-blue"><span class="swatch__name">acs-blue</span></div> <div class="swatch acs-red"><span class="swatch__name">acs-red</span></div> </div> </div> <div class="well"> <h3>SLB <small>Society for Leukocyte Biology</small></h3> <div class="swatches"> <div class="swatch slb-red"><span class="swatch__name">slb-red</span></div> <div class="swatch slb-blue"><span class="swatch__name">slb-blue</span></div> </div> </div> <div class="well"> <h3>ACCP <small>American College of Clinical Pharmacology</small></h3> <div class="swatches"> <div class="swatch accp-grey"><span class="swatch__name">accp-grey</span></div> <div class="swatch accp-blue"><span class="swatch__name">accp-blue</span></div> </div> </div> <div class="well"> <h3>SPSSI <small>Society for Psychological Study of Social Issues</small></h3> <div class="swatches"> <div class="swatch spssi-darkblue"><span class="swatch__name">spssi-darkblue</span></div> <div class="swatch spssi-lightblue"><span class="swatch__name">spssi-lightblue</span></div> </div> </div> <div class="well"> <h3>EFSA <small>European Food Safety Authority</small></h3> <div class="swatches"> <div class="swatch efsa-blue"><span class="swatch__name">efsa-blue</span></div> <div class="swatch efsa-orange"><span class="swatch__name">efsa-orange</span></div> </div> </div> <div class="well"> <h3>RACS <small>Royal Australasian College of Surgeons</small></h3> <div class="swatches"> <div class="swatch racs-grey"><span class="swatch__name">racs-grey</span></div> <div class="swatch racs-red"><span class="swatch__name">racs-red</span></div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

HUB styles - Script Codes CSS Codes

/** Colours **/
/* social media */
/* greys */
/* AAA - anthrosource */
/* AASLD */
/* AGU */
/* physoc */
/* cochrane */
/* aslo */
/* febs */
/* esa */
/* obgyn */
/* ACC */
/* IUBMB */
/* ASCPT */
/* new phytologist - NPH */
/* british ecological society - BES */
/* Royal Meteorological Society - RMetS */
/* Royal Statistical Society - RSS */
/* INTERNATIONAL LITERACY ASSOCIATION - ila */
/* American Association of Physicists in Medicine - aapm */
/* AlphaMed/StemCells */
/* bps */
/* LMS-London Mathematical Society */
/* SETAC - Society of Environmental Toxicology and Chemistry */
/* NYAS - New York Academy of Sciences */
/* ZSL - Zoological Society of London */
/* ACS - American Cancer Society */
/* SLB - Zoological Society of London */
/* accp - American College of Clinical Pharmacology */
/* spssi - Society for Psychological Study of Social Issues */
/* efsa - European Food Safety Authority */
/* racs - Royal Australasian College of Surgeons */
/* general */
body { font-family: 'Open Sans', sans-serif; color: #424242; margin: 16px;
}
hr { display: block; border: none; height: 1px; background-color: #BDBDBD;
}
li { list-style: none;
}
hr { clear: both;
}
.well { border: 1px solid #E0E0E0; clear: both; display: block; float: left; margin-bottom: 10px; padding: 10px;
}
.swatches { margin: 0; margin-bottom: 8px; display: inline-block;
}
.swatch { cursor: pointer; min-width: 32px; min-height: 32px; margin-right: 8px; margin-bottom: 8px; display: inline-block; position: relative; -webkit-transition: 0.1s; transition: 0.1s;
}
.swatch .swatch__name { font-weight: 600; padding: 25px; display: block;
}
.swatch:active { opacity: 1;
}
.clear { display: block; width: 100%; height: 2em;
}
.ic-24px { width: 24px; height: 24px;
}
.ic-16px { width: 16px; height: 16px;
}
.ic-12px { width: 12px; height: 12px;
}
.ic-btn { padding: 8px; background-color: #E0E0E0;
}
.ic-btn.cta { background-color: teal;
}
.twitter { fill: white; background-color: #00aced;
}
.facebook { fill: white; background-color: #3C5A99;
}
/* type */
a { cursor: pointer; font-weight: 600;
}
.article-heading { font-weight: 600;
}
/** buttons and UI elements **/
/* general button */
.btn { display: inline-block; border: none; border-radius: 3px; box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.25); font-size: 0.875em; font-weight: 600; padding: 0.5em 0.75em; background-color: #981e32; color: white; -webkit-transition: 0.1s; transition: 0.1s;
}
.btn:hover { background-color: #ad4b5b; box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
}
.btn:active { background-color: #981e32; box-shadow: 0px 0 1px 0px rgba(0, 0, 0, 0.25);
}
/* WOL log in module */
.wol-header { width: 100%; padding-right: 20px; max-width: 760px; height: 30px; background-color: #e5e2cf;
}
.wol-cont { float: right; font-size: 11px;
}
.wol-cont ul { padding: 0; text-align: left; display: inline; margin: 0; list-style: none;
}
.wol-cont ul li { display: inline-block; position: relative; padding: 2px 8px; background: #fff; cursor: pointer; margin-left: 1px; -webkit-transition: 0.1s; transition: 0.1s;
}
.wol-logo { font-weight: 700; border-bottom: 1px solid #424242;
}
.wol-logo:hover { background: #424242; color: white;
}
.wol-btn { font-weight: 400; border-bottom: 1px solid #981e32;
}
.wol-btn svg { margin-left: 8px; fill: #981e32; -webkit-transition: 0.2s; transition: 0.2s; -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
.wol-btn:hover { background: #981e32; color: white;
}
.wol-btn:hover svg { margin-left: 8px; fill: white; -webkit-transform: rotate(0deg); transform: rotate(0deg);
}
.wol-cont ul li ul { padding: 0; position: absolute; margin-top: 4px; right: 0; border: 1px solid #981e32; background-color: white; display: none; opacity: 0; visibility: hidden;
}
.wol-cont ul li ul li { margin: 0; padding: 6px; display: block; color: #981e32;
}
.wol-cont ul li ul li:hover { background: #981e32; color: white;
}
.wol-cont ul li:hover ul { display: block; opacity: 1; visibility: visible;
}
/* feature image */
.feat-cont { cursor: pointer; position: relative; max-width: 600px; display: block;
}
.feat-cont .feat-img img { width: 100%; display: block; opacity: 1; -webkit-transition: 0.3s; transition: 0.3s;
}
.feat-cont .text-cont { float: left; width: 100%; position: absolute; bottom: 0;
}
.feat-cont .text-cont .feat-copy { box-sizing: border-box; background-color: rgba(0, 0, 0, 0.5); padding: 6px; width: 100%; color: white; float: right;
}
.feat-cont .text-cont .feat-copy .feat-journal { float: right; clear: both; font-size: 0.75em; font-weight: 700;
}
.feat-cont .text-cont .feat-copy .feat-name { text-align: right; float: right; clear: both;
}
.feat-cont .text-cont .feat-more { cursor: pointer; float: right; width: 100%; background-color: #2e4872;
}
.feat-cont .text-cont .feat-more .feat-more-text { float: right; color: white; margin-right: 8px; font-weight: 500; font-size: 0.75em; padding: 3px;
}
.feat-cont .text-cont .feat-more .feat-more-ic { display: block; float: right; background-color: #981e32; padding: 4px; -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
}
.feat-cont .text-cont .feat-more .feat-more-ic svg { margin-right: 8px; fill: white; display: block; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: inherit; transition: inherit;
}
.feat-cont:hover .feat-img img { opacity: 0.8;
}
.feat-cont:hover .text-cont .feat-more-ic { background-color: #ad4b5b;
}
.feat-cont:hover .text-cont .feat-more-ic svg { margin-right: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg);
}
.feat-cont:hover .text-cont .feat-more-ic { background-color: #981e32;
}
/* colours */
.grey-50 { background-color: #FAFAFA;
}
.grey-100 { background-color: #F5F5F5;
}
.grey-200 { background-color: #EEEEEE;
}
.grey-300 { background-color: #E0E0E0;
}
.grey-400 { background-color: #BDBDBD;
}
.grey-500 { background-color: #9E9E9E;
}
.grey-600 { background-color: #757575;
}
.grey-700 { background-color: #616161;
}
.grey-800 { background-color: #424242;
}
.grey-900 { background-color: #212121;
}
.aaa-red { background-color: #981e32; color: white;
}
.aaa-red:hover, .aaa-red:active { background-color: #ad4b5b;
}
.aaa-tan { background-color: #e5e2cf;
}
.aaa-blue { background-color: #2e4872; color: white;
}
.aasld-green { background-color: #006241; color: white;
}
.aasld-green:hover, .aasld-green:active { background-color: #338167;
}
.aasld-orange { background-color: #ff8300; color: white;
}
.aasld-orange:hover, .aasld-orange:active { background-color: #ff9c33;
}
.agu-darkblue { background-color: #004273; color: white;
}
.agu-darkblue:hover, .agu-darkblue:active { background-color: #004273;
}
.agu-lightblue { background-color: #3598DB; color: white;
}
.agu-lightblue:hover, .agu-lightblue:active { background-color: #3598DB;
}
.physoc-blue { background-color: #00274C; color: white;
}
.physoc-blue:hover, .physoc-blue:active { background-color: #3f5c78;
}
.physoc-teal { background-color: #009AA6; color: white;
}
.physoc-teal:hover, .physoc-teal:active { background-color: #3fb2bb;
}
.cochrane-blue { background-color: #002d64; color: white;
}
.cochrane-blue:hover, .cochrane-blue:active { background-color: #002d64;
}
.cochrane-pink { background-color: #962d91; color: white;
}
.cochrane-pink:hover, .cochrane-pink:active { background-color: #962d91;
}
.aslo-blue { background-color: #228fce; color: white;
}
.aslo-blue:hover, .aslo-blue:active { background-color: #43a0d5;
}
.aslo-darkblue { background-color: #0D364E; color: white;
}
.aslo-darkblue:hover, .aslo-darkblue:active { background-color: #315468;
}
.febs-blue { background-color: #0094d2; color: white;
}
.febs-blue:hover, .febs-blue:active { background-color: #26a4d9;
}
.febs-black { background-color: #000000; color: white;
}
.febs-black:hover, .febs-black:active { background-color: #262626;
}
.febs-red { background-color: #C25338; color: white;
}
.febs-red:hover, .febs-red:active { background-color: #cb6d56;
}
.esa-teal { background-color: #268c8d; color: white;
}
.esa-teal:hover, .esa-teal:active { background-color: #469d9e;
}
.esa-darkteal { background-color: #03282c; color: white;
}
.esa-darkteal:hover, .esa-darkteal:active { background-color: #29484b;
}
.obgyn-darkblue { background-color: #032977; color: white;
}
.obgyn-darkblue:hover, .obgyn-darkblue:active { background-color: #355492;
}
.obgyn-lightblue { background-color: #648FD8; color: white;
}
.obgyn-lightblue:hover, .obgyn-lightblue:active { background-color: #83A5E0;
}
.iubmb-green { background-color: #275257; color: white;
}
.iubmb-green:hover, .iubmb-green:active { background-color: #37737a;
}
.iubmb-red { background-color: #de152a; color: white;
}
.iubmb-red:hover, .iubmb-red:active { background-color: #ec3a4c;
}
.ascpt-dark-blue { background-color: #163055; color: white;
}
.ascpt-dark-blue:hover, .ascpt-dark-blue:active { background-color: #20477e;
}
.ascpt-light-blue { background-color: #1678a6; color: white;
}
.ascpt-light-blue:hover, .ascpt-light-blue:active { background-color: #1c99d3;
}
.nph-primary { background-color: #004543; color: white;
}
.nph-primary:hover, .nph-primary:active { background-color: #007875;
}
.nph-secondary { background-color: #008194; color: white;
}
.nph-secondary:hover, .nph-secondary:active { background-color: #00adc7;
}
.bes-primary { background-color: #bec631; color: #4d4d4d;
}
.bes-primary:hover, .bes-primary:active { background-color: #aab22c;
}
.bes-secondary { background-color: #4d4d4d; color: white;
}
.bes-secondary:hover, .bes-secondary:active { background-color: #676767;
}
.rmets-primary { background-color: #304888; color: white;
}
.rmets-primary:hover, .rmets-primary:active { background-color: #3d5cae;
}
.rmets-secondary { background-color: #e57700; color: white;
}
.rmets-secondary:hover, .rmets-secondary:active { background-color: #ff9119;
}
.rss-primary { background-color: #004b6d; color: white;
}
.rss-primary:hover, .rss-primary:active { background-color: #006ea0;
}
.rss-secondary { background-color: #b88f18; color: white;
}
.rss-secondary:hover, .rss-secondary:active { background-color: #e2b121;
}
.rss-tertiary { background-color: #aa4425; color: white;
}
.rss-tertiary:hover, .rss-tertiary:active { background-color: #d25630;
}
.ila-yellow { background-color: #FFCD00; color: #4e4b48;
}
.ila-yellow:hover, .ila-yellow:active { background-color: #f0c100;
}
.ila-grey { background-color: #4e4b48; color: white;
}
.ila-grey:hover, .ila-grey:active { background-color: #696560;
}
.ila-purple { background-color: #500778; color: white;
}
.ila-purple:hover, .ila-purple:active { background-color: #700aa8;
}
.ila-lightgrey { background-color: #c4bfb6; color: #424242;
}
.ila-lightgrey:hover, .ila-lightgrey:active { background-color: #bdb8ae;
}
.ila-trtr { background-color: #500778; color: #009cb6;
}
.ila-jaal { background-color: #ff6900; color: #002b49;
}
.ila-rrq { background-color: #009cb6; color: #002b49;
}
.aapm-primary { background-color: #263C80; color: white;
}
.aapm-primary:hover, .aapm-primary:active { background-color: #324ea7;
}
.aapm-secondary { background-color: #B33D3D; color: white;
}
.aapm-secondary:hover, .aapm-secondary:active { background-color: #c75c5c;
}
.alphamed-blue { background-color: #525d89; color: white;
}
.alphamed-blue:hover, .alphamed-blue:active { background-color: #6975a5;
}
.alphamed-darkblue { background-color: #333366; color: white;
}
.alphamed-darkblue:hover, .alphamed-darkblue:active { background-color: #444488;
}
.alphamed-lightgrey { background-color: #e8e8e8; color: #424242;
}
.bps-darkblue { background-color: #004851; color: white;
}
.bps-darkblue:hover, .bps-darkblue:active { background-color: #007584;
}
.bps-lightblue { background-color: #007fa3; color: white;
}
.bps-lightblue:hover, .bps-lightblue:active { background-color: #00a7d6;
}
.lms-darkblue { background-color: #193450; color: white;
}
.lms-darkblue:hover, .lms-darkblue:active { background-color: #254d77;
}
.lms-lightblue { background-color: #038ABA; color: white;
}
.lms-lightblue:hover, .lms-lightblue:active { background-color: #04afec;
}
.lms-blmsoc { background-color: #FDC500;
}
.lms-jlms { background-color: #DD052A;
}
.lms-jotopo { background-color: #00A9E7;
}
.lms-plms { background-color: #008A53;
}
.lms-tlms { background-color: #A9D9DE;
}
.setac-blue { background-color: #3255A4; color: white;
}
.setac-blue:hover, .setac-blue:active { background-color: #436bc6;
}
.setac-teal { background-color: #4CC1A1; color: #424242;
}
.setac-teal:hover, .setac-teal:active { background-color: #72ceb5;
}
.nyas-coolgrey { background-color: #6d6f71; color: white;
}
.nyas-warmgrey { background-color: #f5eef2; color: black;
}
.nyas-magenta { background-color: #e71355; color: white;
}
.nyas-yellow { background-color: #fff200; color: black;
}
.nyas-blue { background-color: #0000ff; color: white;
}
.nyas-teal { background-color: #70e8cb; color: black;
}
.nyas-cream { background-color: #ffe9c7; color: black;
}
.nyas-grey { background-color: #808284; color: black;
}
.nyas-black { background-color: #000000; color: white;
}
.zsl-marineBlue { background-color: #004f9f; color: white;
}
.zsl-marineBlue:hover, .zsl-marineBlue:active { background-color: #0068d2;
}
.zsl-tigerOrange { background-color: #e97306; color: #212121;
}
.zsl-tigerOrange:hover, .zsl-tigerOrange:active { background-color: #f98d29;
}
.acs-blue { background-color: #0038A8; color: white;
}
.acs-blue:hover, .acs-blue:active { background-color: #094480;
}
.acs-red { background-color: #C41E3A; color: white;
}
.acs-red:hover, .acs-red:active { background-color: #ac0522;
}
.slb-red { background-color: #7b0400; color: white;
}
.slb-red:hover, .slb-red:active { background-color: #ae0600;
}
.slb-blue { background-color: #032c98; color: white;
}
.slb-blue:hover, .slb-blue:active { background-color: #043aca;
}
.accp-grey { background-color: #424242; color: white;
}
.accp-grey:hover, .accp-grey:active { background-color: #5c5c5c;
}
.accp-blue { background-color: #267087; color: white;
}
.accp-blue:hover, .accp-blue:active { background-color: #1b4f5f;
}
.spssi-darkblue { background-color: #06293e; color: white;
}
.spssi-darkblue:hover, .spssi-darkblue:active { background-color: #0b486d;
}
.spssi-lightblue { background-color: #3b7ca5; color: white;
}
.spssi-lightblue:hover, .spssi-lightblue:active { background-color: #2e607f;
}
.efsa-blue { background-color: #002596; color: white;
}
.efsa-blue:hover, .efsa-blue:active { background-color: #0032c9;
}
.efsa-orange { background-color: #de7008; color: #212121;
}
.efsa-orange:hover, .efsa-orange:active { background-color: #f78a22;
}
.racs-grey { background-color: #51626F; color: white;
}
.racs-grey:hover, .racs-grey:active { background-color: #677c8c;
}
.racs-red { background-color: #981E32; color: white;
}
.racs-red:hover, .racs-red:active { background-color: #c32640;
}
HUB styles - Script Codes
HUB styles - Script Codes
Home Page Home
Developer Stuart Allen
Username rarebush
Uploaded November 27, 2022
Rating 3
Size 13,840 Kb
Views 32,384
Do you need developer help for HUB styles?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Stuart Allen (rarebush) Script Codes
Name
Animated leaderboard - WOL home
WileyPLUS serif CSS
WileyPLUS styles
One Wiley Colors
Hub styleguide
Aasld large links
Animated leaderboard
HTML email
Dashboard Builder - piechart
Research ecosystem graphic-chord
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!