RMO live StyleGuide

Developer
Lahvjal
Size
13,045 Kb
Views
38,456
  1. RMO live StyleGuide Previews
  2. RMO live StyleGuide HTML Codes
  3. RMO live StyleGuide CSS Codes
  4. RMO live StyleGuide JS Codes

How do I make an rmo live styleguide?

What is a rmo live styleguide? How do you make a rmo live styleguide? This script and codes were developed by Lahvjal on 24 August 2022, Wednesday.

RMO live StyleGuide Previews
IQ Test

RMO live StyleGuide - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>RMO live StyleGuide</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> <nav> <div class="container"> <a href="#rmo" class="logo"> <svg viewBox="0 0 244.8 86.4"> <path class="rmo" d="M140.3,74h-0.6v1.8h-0.5V74h-0.6v-0.4h1.8L140.3,74L140.3,74z"/> <polygon class="rmo" points="140.3,73.6 138.6,73.6 138.6,74 139.2,74 139.2,75.8 139.7,75.8 139.7,74 140.3,74"/> <path class="rmo" d="M143.2,75.8h-0.5v-1.3c0-0.1,0-0.3,0-0.5l0,0c0,0.1,0,0.2-0.1,0.3l-0.5,1.5h-0.4l-0.5-1.5 c0,0,0-0.1-0.1-0.3l0,0c0,0.2,0,0.4,0,0.6v1.2h-0.5v-2.2h0.7l0.5,1.3c0,0.1,0.1,0.2,0.1,0.3l0,0c0-0.1,0.1-0.2,0.1-0.3l0.5-1.3 h0.7V75.8z"/> <path class="rmo" d="M143.2,73.6h-0.7l-0.5,1.3c0,0.1-0.1,0.2-0.1,0.3l0,0c0-0.1,0-0.2-0.1-0.3l-0.5-1.3h-0.7v2.2h0.5v-1.2 c0-0.2,0-0.4,0-0.6l0,0c0,0.2,0.1,0.3,0.1,0.3l0.5,1.5h0.4l0.5-1.5c0-0.1,0-0.2,0.1-0.3l0,0c0,0.2,0,0.3,0,0.5v1.3h0.5V73.6 L143.2,73.6z"/> <path id="XMLID_3567_" class="rmo" d="M40.6,4.9c-0.3-0.3-0.8-0.3-1.1,0c-3.9,3.6-26.9,26-26.9,47.8c0,7.1,2.7,13.6,7.2,18.5 c17.6,11.1,21.5-6.6,21.1-9.7c-3.6-1.8-7.4-5.5-9.2-10.1c-1.8-4.4-0.9-11.8-1.6-17.3c-0.1-0.4,0.3-0.7,0.7-0.5 c9.8,5,15.7,12,13.6,23.2c-0.1,0.4-0.6,0.4-0.7,0c-1.5-5.3-3.8-8.6-6.3-10.5c3.3,4,5.6,11,5.2,15.6c-0.2,1.8-1.1,5.4-1.8,7.2 c-1,2.6-5,9.6-12.6,8.3c3.6,1.7,7.6,2.7,11.9,2.7c15.2,0,27.5-12.3,27.5-27.5C67.5,31,44.5,8.5,40.6,4.9z M53.2,61.3 c-2.6,2-6.4,2.7-9.1,2.5c-0.4,0.3-0.9,1.2-1.4,2.3c0,0.1-0.2,0-0.1-0.1c0.3-0.9,0.4-1.9,0.6-2.8c1.3-2.8,5.4-5.6,8.5-6.7 c-2,0.2-4.3,1.2-6.8,3.5c-0.3,0.3-0.7-0.1-0.6-0.4c2.7-6.6,8.2-8.5,15.1-8.1c0.4,0,0.6,0.5,0.3,0.8C57.5,55.2,55.6,59.5,53.2,61.3z M96.9,20c0-5.3,4.1-9.3,9.4-9.3c5.4,0,9.4,4,9.4,9.3s-4.1,9.3-9.4,9.3S96.9,25.3,96.9,20z M111.8,20c0-3.2-2.3-5.7-5.5-5.7 c-3.1,0-5.5,2.5-5.5,5.7s2.3,5.7,5.5,5.7S111.8,23.2,111.8,20z M132.1,28.1c-1.5,0.8-3.5,1.2-5.3,1.2c-5.8,0-9.8-4-9.8-9.3 c0-5.2,4-9.3,9.8-9.3c1.8,0,3.6,0.4,5,1.1v3.5c0,0.2-0.3,0.4-0.5,0.3c-1.3-0.7-2.9-1.3-4.5-1.3c-3.5,0-5.9,2.5-5.9,5.7 s2.3,5.8,6,5.8c1.7,0,3.3-0.5,4.7-1.4c0.2-0.1,0.5,0,0.5,0.3C132.1,24.7,132.1,28.1,132.1,28.1z M134.5,11h3.7v8l0,0l6.3-8h4.1 c0.3,0,0.4,0.3,0.2,0.5l-6.4,7.9l7,9.2c0.2,0.2,0,0.5-0.2,0.5h-4.3l-6.7-9l0,0v9h-3.7c-0.2,0-0.3-0.1-0.3-0.3V11.3 C134.2,11.1,134.4,11,134.5,11z M156.2,20.9l-6.6-9.4c-0.1-0.2,0-0.5,0.3-0.5h4l2.2,3.3c0.7,1,1.5,2.2,2.2,3.3l0,0 c0.7-1.1,1.4-2.2,2.2-3.3l2.2-3.2h3.9c0.2,0,0.4,0.3,0.3,0.5l-6.6,9.4v7.9c0,0.2-0.1,0.3-0.3,0.3h-0.1c-1.9,0-3.5-1.6-3.5-3.5v-4.8 H156.2z M101.9,44.1c0-5.3,4.1-9.3,9.4-9.3s9.4,4,9.4,9.3s-4.1,9.3-9.4,9.3S101.9,49.3,101.9,44.1z M116.8,44.1 c0-3.2-2.3-5.7-5.5-5.7c-3.1,0-5.5,2.5-5.5,5.7s2.3,5.7,5.5,5.7C114.4,49.8,116.8,47.3,116.8,44.1z M138.3,44.3 c0,2.7-0.4,4.7-1.4,6.1c-1.3,1.8-3.6,2.9-6.5,2.9c-2.9,0-5.2-1.1-6.5-3c-1-1.4-1.3-3.4-1.3-6v-9.1c0-0.2,0.1-0.3,0.3-0.3h3.4 c0.2,0,0.3,0.1,0.3,0.3v9c0,1.9,0.2,3.1,0.7,3.9c0.6,0.9,1.6,1.6,3.3,1.6c1.6,0,2.6-0.6,3.2-1.5c0.6-0.8,0.8-2.1,0.8-4v-9 c0-0.2,0.1-0.3,0.3-0.3h3.2c0.2,0,0.3,0.1,0.3,0.3v9.1H138.3z M148.1,45.8c-1.2-1.6-2.3-3.1-3.4-4.7h-0.1c0,1.7,0.1,3.5,0.1,5.2 v3.2c0,1.9-1.6,3.5-3.5,3.5l0,0c-0.2,0-0.3-0.1-0.3-0.3V35.3c0-0.2,0.1-0.3,0.3-0.3h3.4l5.4,7.3c1.2,1.6,2.3,3.1,3.4,4.7h0.1 c0-1.7-0.1-3.5-0.1-5.2v-6.4c0-0.2,0.1-0.3,0.3-0.3h3.2c0.2,0,0.3,0.1,0.3,0.3v17.5c0,0.2-0.1,0.3-0.3,0.3h-3.4L148.1,45.8z M163.9,38.5h-5.5c-0.2,0-0.3-0.1-0.3-0.3v-2.9c0-0.2,0.1-0.3,0.3-0.3h15c0.2,0,0.3,0.1,0.3,0.3v2.9c0,0.2-0.1,0.3-0.3,0.3h-5.5 v14.3c0,0.2-0.1,0.3-0.3,0.3h-0.1c-1.9,0-3.5-1.6-3.5-3.5L163.9,38.5L163.9,38.5z M179.2,35h3.4c0.1,0,0.2,0.1,0.3,0.2l7.1,17.5 c0.1,0.2-0.1,0.4-0.3,0.4h-3.6c-0.1,0-0.2-0.1-0.3-0.2l-1.4-3.6h-7.3l-1.4,3.6c0,0.1-0.2,0.2-0.3,0.2H172c-0.2,0-0.4-0.2-0.3-0.4 l7.1-17.5C178.9,35.1,179.1,35,179.2,35z M178.4,46.2h4.9l-0.7-2c-0.5-1.4-1.2-3.2-1.6-4.6h-0.2c-0.5,1.4-1.1,3.2-1.7,4.7 L178.4,46.2z M192.1,35h0.1c1.9,0,3.5,1.6,3.5,3.5v14.2c0,0.2-0.1,0.3-0.3,0.3h-0.1c-1.9,0-3.5-1.6-3.5-3.5V35.3 C191.7,35.2,191.9,35,192.1,35z M206.6,45.8c-1.2-1.6-2.3-3.1-3.4-4.7h-0.1c0,1.7,0.1,3.5,0.1,5.2v3.2c0,1.9-1.6,3.5-3.5,3.5l0,0 c-0.2,0-0.3-0.1-0.3-0.3V35.3c0-0.2,0.1-0.3,0.3-0.3h3.4l5.4,7.3c1.2,1.6,2.3,3.1,3.4,4.7h0.1c0-1.7-0.1-3.5-0.1-5.2v-6.4 c0-0.2,0.1-0.3,0.3-0.3h3.2c0.2,0,0.3,0.1,0.3,0.3v17.5c0,0.2-0.1,0.3-0.3,0.3H212L206.6,45.8z M80.2,67c0-5.3,4.1-9.3,9.4-9.3 s9.4,4,9.4,9.3s-4.1,9.3-9.4,9.3S80.2,72.3,80.2,67z M95.1,67c0-3.2-2.3-5.7-5.5-5.7c-3.1,0-5.5,2.5-5.5,5.7c0,3.2,2.3,5.7,5.5,5.7 C92.7,72.8,95.1,70.2,95.1,67z M101.9,58L101.9,58c2,0,3.6,1.6,3.6,3.5v14.2c0,0.2-0.1,0.3-0.3,0.3h-0.1c-1.9,0-3.5-1.6-3.5-3.5 V58.3C101.6,58.1,101.7,58,101.9,58z M109.9,58L109.9,58c2,0,3.6,1.6,3.6,3.5v11.1h7.6c0.2,0,0.3,0.1,0.3,0.3v2.9 c0,0.2-0.1,0.3-0.3,0.3h-11.3c-0.2,0-0.3-0.1-0.3-0.3V58.3C109.6,58.1,109.7,58,109.9,58z M123.5,71.6c0-0.2,0.3-0.4,0.5-0.3 c1.8,1.1,4,1.6,5.3,1.6c1.5,0,2.5-0.6,2.5-1.9c0-1.7-1.7-1.8-4-2.6c-2.5-0.8-4.7-2-4.7-5.2c0-3.4,2.6-5.5,6.3-5.5 c1.7,0,3.8,0.4,5.3,1.2c0.1,0.1,0.2,0.2,0.2,0.3v3.2c0,0.2-0.3,0.4-0.5,0.3c-1.8-1-3.8-1.5-5.1-1.5c-1.3,0-2.3,0.5-2.3,1.7 c0,1.6,1.7,1.7,3.8,2.5c2.7,0.9,4.9,2.2,4.9,5.4c0,3.5-2.7,5.6-6.6,5.6c-1.7,0-3.9-0.4-5.5-1.2c-0.1-0.1-0.2-0.2-0.2-0.3 L123.5,71.6L123.5,71.6z M95,16.5c0-2.1-0.9-3.4-2.2-4.3c-1.5-0.9-3.5-1.2-5.7-1.2h-5.5c-0.1,0-0.2,0.1-0.2,0.2v14.6 c0,1.9,1.5,3.4,3.4,3.4h0.4c0.1,0,0.2-0.1,0.2-0.2v-7c0,0,1.4,0,1.8,0c2.8,0,4.1-0.5,4.1-0.5C93.7,20.7,95,18.8,95,16.5z M89.9,18.6c-0.6,0.3-1.4,0.4-2.5,0.4h-2v-4.5h1.5c1.4,0,2.4,0.2,3,0.5c0.7,0.4,1,0.9,1,1.8C91,17.6,90.6,18.2,89.9,18.6z M95.6,28 l-2.8-4.2c-0.9-1.3-2.5-1.8-3.9-1.3L88,22.8c-0.2,0.1-0.2,0.2-0.1,0.4l2.8,4.2c0.9,1.3,2.6,1.8,4,1.3l0.8-0.3 C95.6,28.3,95.7,28.1,95.6,28z M99.5,35h-1.8c-1.1,0-2.1,0.5-2.7,1.4l-4.4,6.2l-4.4-6.2c-0.6-0.9-1.6-1.4-2.7-1.4h-1.8 c-0.1,0-0.2,0.1-0.2,0.2v14.5c0,1.8,1.5,3.3,3.3,3.3H85c0.1,0,0.2-0.1,0.2-0.2v-7c0-1.5,0-3.2-0.1-4.5h0.1c0.8,1.3,1.7,2.6,2.6,3.9 l2.6,3.7l2.6-3.7c0.9-1.3,1.8-2.6,2.6-3.9l0,0c0,1.3,0,3,0,4.5v3.9c0,1.8,1.5,3.3,3.3,3.3h0.4c0.1,0,0.2-0.1,0.2-0.2V35.3 C99.7,35.1,99.6,35,99.5,35z"/> </svg> </a> <a href="#color">Color</a> <a href="#type">Typography</a> <a href="#element">Form Elements</a> </div>
</nav>
<div class="section" id="color"> <div class="container"> <div class="secT-container"> <div class="secT-area"> <h3 class="secTitle secT-format underline-thick">color</h3><br> <a href="#primary" class="sec-nav">primary & secondary</a> <a href="#basic" class="sec-nav">white, greys & blacks</a> <a href="#collect" class="sec-nav">collections</a> <span class="clear"></span> </div> </div> <h5 class="subSecH underline space-above" id="primary">primary & secondary</h5><br> <div class="content-area"> <div class="color-block purple"><span class="small-meta">#BB85B9</span></div> <div class="color-block orange"><span class="small-meta">#F2BD7A</span></div> <div class="empty"></div> <div class="empty"></div> </div> <h5 class="subSecH underline space-above" id="basic">white, greys & blacks</h5><br> <div class="content-area"> <div class="color-block white"><span class="small-meta">#FFF</span></div> <div class="color-block grey-lighter"><span class="small-meta">#EEE<br>Opacity: 45%</span></div> <div class="color-block grey-light"><span class="small-meta">#EEE</span></div> <div class="color-block grey"><span class="small-meta">#777<br>Opacity: 45%</span></div> <div class="color-block grey-dark"><span class="small-meta">#777</span></div> <div class="color-block grey-darker"><span class="small-meta">#333</span></div> <div class="empty"></div> <div class="empty"></div> </div> <h5 class="subSecH underline space-above" id="collect">collections</h5><br> <div class="content-area"> <div class="color-group"> <div class="color-block energy-light"><span class="small-meta">#F7E695</span></div> <span class="small-meta">energy light</span> <div class="color-block energy-dark"><span class="small-meta">#F7E695</span></div> <span class="small-meta">energy dark</span> </div> <div class="color-group"> <div class="color-block wellness-light"><span class="small-meta">#E6C387</span></div> <span class="small-meta">wellness light</span> <div class="color-block wellness-dark"><span class="small-meta">#B98A44</span></div> <span class="small-meta">wellness dark</span> </div> <div class="color-group"> <div class="color-block mood-light"><span class="small-meta">#C4B1D3</span></div> <span class="small-meta">mood light</span> <div class="color-block mood-dark"><span class="small-meta">#7F5B93</span></div> <span class="small-meta">mood dark</span> </div> <div class="color-group"> <div class="color-block relief-light"><span class="small-meta">#FABEBD</span></div> <span class="small-meta">relief light</span> <div class="color-block relief-dark"><span class="small-meta">#C96565</span></div> <span class="small-meta">relief dark</span> </div> <div class="color-group"> <div class="color-block sleep-light"><span class="small-meta">#BBE3F7</span></div> <span class="small-meta">sleep light</span> <div class="color-block sleep-dark"><span class="small-meta">#60B2CC</span></div> <span class="small-meta">sleep dark</span> </div> <div class="color-group"> <div class="color-block clean-light"><span class="small-meta">#C2E5DE</span></div> <span class="small-meta">clean light</span> <div class="color-block clean-dark"><span class="small-meta">#53AE9D</span></div> <span class="small-meta">clean dark</span> </div> <div class="color-group"> <div class="color-block skin-light"><span class="small-meta">#FDD5BF</span></div> <span class="small-meta">skin light</span> <div class="color-block skin-dark"><span class="small-meta">#EE783B</span></div> <span class="small-meta">skin dark</span> </div> <div class="empty"></div> <div class="empty"></div> </div> </div>
</div>
<div class="section" id="type"> <div class="container" > <div class="secT-container"> <div class="secT-area"> <h3 class="secTitle secT-format underline-thick">typography</h3><br> <a href="#headz" class="sec-nav">Headings</a> <a href="#paragraphz" class="sec-nav">Paragraphs</a> <span class="clear"></span> </div> </div> <h5 class="subSecH underline space-above" id="headz">headings</h5><br> <div class="content-area"> <div class="heading-content underline-dash"> <div class="headingzz"> <h1 class="mainHeading">Main Heading</h1> <h4 class="subHeading">Sub headline</h4> </div> <div class="heading-details"> <span class="itx">65px | .mainHeading<br>23px | .subHeading</span> </div> </div> <div class="heading-content underline-dash"> <div class="headingzz"> <h2 class="subPageH">Subpage heading</h2> </div> <div class="heading-details"> <span class="itx">45px | .subPageH</span> </div> </div> <div class="heading-content underline-dash"> <div class="headingzz"> <h3 class="secTitle">section header</h3> <h5 class="secTCap">Section header caption</h5> </div> <div class="heading-details"> <span class="itx">27px | .secTitle<br>17px | .secTCap</span> </div> </div> <div class="heading-content underline-dash"> <div class="headingzz"> <h5 class="subSecH">sub-section header</h5> </div> <div class="heading-details"> <span class="itx">17px | .subSecH</span> </div> </div> </div> <h5 class="subSecH underline space-above" id="paragraphz">paragraphs</h5><br> <div class="content-area"> <p class="btx">Default paragraph text</p> <p>Paragraph body text Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> <p class="btx">Small meta text</p> <p class="small-meta">Paragraph body text Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> <p class="btx">Small meta text with 50% opacity</p> <p class="small-meta dim-txt">Paragraph body text Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> <div class="empty underline-dash space-below"></div> <div class="code-container"> <div class="code-box"> <p data-height="560" data-theme-id="0" data-slug-hash="zZyeZw" data-default-tab="html" data-user="lahvjal" data-embed-version="2" data-pen-title="Paragraphs - RMO" class="codepen">See the Pen <a href="http://codepen.io/lahvjal/pen/zZyeZw/">Paragraphs - RMO</a> by Lahvjal (<a href="http://codepen.io/lahvjal">@lahvjal</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script> <div class="clear"></div> </div> <div class="content-box"> <p class="btx">Notes</p> <p>The default body text is 16px. For optimum reading length, the paragraph-width is capped at 640px.</p> <p>Helper classes:</p> <p>.small-meta : for 12px text<br> .dim-txt : for light gray (50% opacity)<br> .btx : for bold text (700 weight)<br> .ltx : for light text (300 weight)<br> .itx : for italics text</p> <p>SASS variables:</p> <p>$ff : for default font-family - "Lato", Arial, Helvetica, Verdana, sans-serif; $largeCopy : for 18px text $mediumCopy : for 16px text $smallCopy : for 12px text </p> </div> </div> </div> </div>
</div>
<div class="section" id="element"> <div class="container" > <div class="secT-container"> <div class="secT-area"> <h3 class="secTitle secT-format underline-thick">form elements</h3><br> <a href="#buttonz" class="sec-nav">buttons</a> <a href="#input" class="sec-nav">anchor & input buttons</a> <a href="#toggle" class="sec-nav">toggle</a> <a href="#checkRad" class="sec-nav">checkboxes & radios</a> <a href="#" class="sec-nav">field help</a> <span class="clear"></span> </div> </div> <h5 class="subSecH underline space-above" id="buttonz">buttons</h5><br> <div class="content-area"> <button class="btnn1" href="#guides"> primary action </button> <button class="btnn2" href="#guides"> secondary action </button> <button class="btnn2 b2g" href="#guides"> Submit </button> <button class="btnn2 b2r" href="#guides"> cancel </button> <br> <button class="btnn1-small" href="#guides"> primary action </button> <button class="btnn2-small" href="#guides"> secondary action </button> <button class="btnn2-small b2g" href="#guides"> Submit </button> <button class="btnn2-small b2r" href="#guides"> cancel </button> <div class="empty underline-dash space-below"></div> <div class="code-container"> <div class="code-box"> <p data-height="700" data-theme-id="0" data-slug-hash="vxPKwE" data-default-tab="html" data-user="lahvjal" data-embed-version="2" data-pen-title="Buttons - RMO" class="codepen">See the Pen <a href="http://codepen.io/lahvjal/pen/vxPKwE/">Buttons - RMO</a> by Lahvjal (<a href="http://codepen.io/lahvjal">@lahvjal</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script> <div class="clear"></div> </div> <div class="content-box"> <p class="btx">Notes</p> <p>Buttons are categorized by style and purpose (primary and secondary with respective variants) and size (regular and large). </p> <p>Small buttons are 40px high with a font size of 13px, line-height of 40px and a border-radius of 11px. Large buttons are 60px high with a font size of 15px, line-height of 60px and a border-radius of 15px.</p> <p>You can create buttons using the button HTML tag accompanied by the .btnn1 & .btnn1-small classes for Primary action buttons OR .btnn2 & .btnn2-small classes for Secondary action buttons.</p> <p>By Default, Primary buttons are purple. To change Primary button color, combine .btnn1 class with one of these color classes:<br> - .b1o (orange)<br> - .b1g (green)<br> Primary action buttons are mainly used for more prominent CTA to sell products.</p> <p>By Default, Secondary buttons are purple. To change Secondary action button color, combine .btnn2 class with one of these color classes: <br> - .b2w (white)<br> - .b2o (orange)<br> - .b2r (red)<br> - .b2g (green)<br> Seconday action buttons are used where the action is lead to reading more information, or non-selling content.</p> </div> </div> </div> <h5 class="subSecH underline space-above" id="input">anchor & input buttons</h5><br> <div class="content-area"> <a class="btnn2 b2o" href="#"> anchor button </a> <input class="btnn2 b2g" type="submit" value="Input Button"> <br> <a class="btnn2-small b2o" href="#"> anchor button </a> <input type="submit" class="btnn2-small b2g" value="Input Button"> <div class="empty underline-dash space-below"></div> <div class="code-container"> <div class="code-box code-box-lil"> <p data-height="700" data-theme-id="0" data-slug-hash="LWaRaR" data-default-tab="html" data-user="lahvjal" data-embed-version="2" data-pen-title="Anchor & Input Buttons - RMO" class="codepen">See the Pen <a href="http://codepen.io/lahvjal/pen/LWaRaR/">Anchor & Input Buttons - RMO</a> by Lahvjal (<a href="http://codepen.io/lahvjal">@lahvjal</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script> <div class="clear"></div> </div> <div class="content-box"> <p class="btx">Notes</p> <p>To style an anchor (a) tag as a button use the .btnn2 class.</p> <p>To style an input as a button use the .bttn2 class and define a label by adding a value attribute.</p> </div> </div> </div> <h5 class="subSecH underline space-above" id="toggle">toggle</h5><br> <div class="content-area"> <div class="togglez"> <input class="tgl" id="cb1" type="checkbox"/> <label class="tgl-btn" for="cb1"></label> </div> <div class="togglez"> <input class="tgl" id="cb2" type="checkbox"/> <label class="tgl-btn-small" for="cb2"></label> </div> <div class="empty underline-dash space-below"></div> <div class="code-container"> <div class="code-box code-box-lil"> <p data-height="443" data-theme-id="0" data-slug-hash="LWKyzV" data-default-tab="html" data-user="lahvjal" data-embed-version="2" data-pen-title="Togglez" class="codepen">See the Pen <a href="https://codepen.io/lahvjal/pen/LWKyzV/">Togglez</a> by Lahvjal (<a href="http://codepen.io/lahvjal">@lahvjal</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script> <div class="clear"></div> </div> <div class="content-box"> <p class="btx">Notes</p> <p>...</p> </div> </div> </div> <h5 class="subSecH underline space-above" id="checkRad">checkbox & radio</h5><br> <div class="content-area"> <p class="checkies"> <input class="checko" id="check1" type="checkbox"/> <label class="checko-btn" for="check1"> Yes, send me email updates. </label> </p> <p class="checkies"> <input class="checko" id="check2" type="checkbox" checked="checked" disabled="disabled"/> <label class="checko-btn" for="check2"> Disabled and checked </label> </p> <p class="checkies"> <input class="checko" id="check2" type="checkbox" disabled="disabled"/> <label class="checko-btn" for="check2"> Disabled and un-checked </label> </p> <div class="empty underline-dash space-below"></div> <div class="code-container"> <div class="code-box code-box-lil"> <p data-height="413" data-theme-id="0" data-slug-hash="evaMgZ" data-default-tab="html" data-user="lahvjal" data-embed-version="2" data-pen-title="Toggles - RMO" class="codepen">See the Pen <a href="http://codepen.io/lahvjal/pen/evaMgZ/">Toggles - RMO</a> by Lahvjal (<a href="http://codepen.io/lahvjal">@lahvjal</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script> <div class="clear"></div> </div> <div class="content-box"> <p class="btx">Notes</p> <p>...</p> </div> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

RMO live StyleGuide - Script Codes CSS Codes

@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900");
body { margin: 0; padding: 0; font-family: "Lato", sans-serif; color: #333; box-sizing: border-box;
}
.section { display: flex; justify-content: center;
}
.container { width: 1200px;
}
.clear { clear: both;
}
.space-above { margin-top: 60px;
}
.space-below { margin-bottom: 30px;
}
.empty { height: 50px;
}
.underline { border-bottom: 1px solid rgba(119, 119, 119, 0.45);
}
.underline-thick { border-bottom: 2px solid #333;
}
.underline-dash { border-bottom: 1px dashed rgba(119, 119, 119, 0.45);
}
.logo { width: 200px; height: 100%; display: flex; align-items: center; justify-content: center; float: left;
}
.logo svg { width: 150px; enable-background: new 0 0 244.8 86.4;
}
.logo svg .rmo { fill: white; transition: all ease 300ms;
}
.logo:hover > svg > .rmo { fill: #F2BD7A;
}
nav { z-index: 100; width: 100%; height: 60px; background-color: #BB85B9; position: fixed; display: flex; justify-content: center;
}
nav .container a { line-height: 60px; font-weight: 400; text-align: center; text-decoration: none; color: white; margin: auto 20px; transition: all ease 300ms;
}
nav .container a:hover { color: #F2BD7A;
}
a, span, p { font-size: 16px; line-height: 25px; box-sizing: border-box;
}
a:link, a:visited { text-decoration: none; color: #777;
}
p { max-width: 800px;
}
.btx { font-weight: 900;
}
.small-meta { font-size: 12px;
}
.dim-txt { color: rgba(119, 119, 119, 0.5);
}
.ltx { font-weight: 300;
}
.itx { font-style: italic;
}
h1, h2, h3, h4, h5 { color: #333; margin: 10px 0; box-sizing: border-box;
}
h1 { font-size: 65px;
}
h2 { font-size: 45px;
}
h3 { font-size: 27px;
}
h4 { font-size: 23px;
}
h5 { font-size: 17px; margin: 0;
}
input, textarea, keygen, select, button { font-family: "Lato", sans serif !important;
}
.mainHeading, .subHeading, .subPageH { font-weight: 900;
}
.subHeading { margin: 0;
}
.secTitle { text-transform: uppercase; letter-spacing: 3px; font-weight: 300;
}
.secTCap { color: rgba(119, 119, 119, 0.45);
}
.subSecH { text-transform: uppercase; font-weight: 700; line-height: 50px;
}
.color-block { height: 60px; width: 130px; display: flex; align-items: center; justify-content: center; border-radius: 15px; float: left; margin-right: 20px; margin-bottom: 20px; color: white;
}
.color-block span { text-align: center; line-height: 15px;
}
.color-group { width: 130px; display: flex; flex-direction: column; justify-content: center; float: left; margin-right: 20px;
}
.color-group > span { text-align: center; line-height: 15px; margin-bottom: 20px; text-transform: uppercase;
}
.purple { background-color: #BB85B9;
}
.orange { background-color: #F2BD7A;
}
.white { background-color: white; border: 1px solid #eee; color: #777 !important;
}
.grey-lighter { background-color: rgba(238, 238, 238, 0.45); color: #777 !important;
}
.grey-light { background-color: #eee; color: #777 !important;
}
.grey { background-color: rgba(119, 119, 119, 0.45);
}
.grey-dark { background-color: #777;
}
.grey-darker { background-color: #333;
}
.energy-light { background-color: #F7E695; color: #EABC32;
}
.energy-dark { background-color: #EABC32; color: #F7E695;
}
.wellness-light { background-color: #E6C387; color: #B98A44;
}
.wellness-dark { background-color: #B98A44; color: #E6C387;
}
.mood-light { background-color: #C4B1D3; color: #7F5B93;
}
.mood-dark { background-color: #7F5B93; color: #C4B1D3;
}
.relief-light { background-color: #FABEBD; color: #C96565;
}
.relief-dark { background-color: #C96565; color: #FABEBD;
}
.sleep-light { background-color: #BBE3F7; color: #60B2CC;
}
.sleep-dark { background-color: #60B2CC; color: #BBE3F7;
}
.clean-light { background-color: #C2E5DE; color: #53AE9D;
}
.clean-dark { background-color: #53AE9D; color: #C2E5DE;
}
.skin-light { background-color: #FDD5BF; color: #EE783B;
}
.skin-dark { background-color: #EE783B; color: #FDD5BF;
}
.secT-container { width: 100%;
}
.secT-area { width: auto; display: inline-block;
}
.secT-format { margin-top: 90px; line-height: 80px; display: inline-block; width: 100%;
}
.sec-nav { margin-right: 20px; font-weight: 700; transition: all ease 300ms; text-transform: capitalize;
}
.sec-nav:hover { color: #BB85B9;
}
.content-area { padding-left: 40px;
}
.heading-content { height: 150px; display: flex; flex-direction: row;
}
.headingzz { flex: 1; display: flex; flex-direction: column; justify-content: center;
}
.heading-details { flex: 1; color: #777; display: flex; align-items: center;
}
.code-container { height: auto; display: flex;
}
.code-box { height: auto; overflow: hidden; width: 100%; background-color: rgba(119, 119, 119, 0.45);
}
.code-box-lil { height: 300px !important;
}
.content-box { width: 100%; padding: 0 20px;
}
.content-box .btx { margin-top: 0;
}
.btnn1 { cursor: pointer; margin: 5px; overflow: hidden; position: relative; width: 250px; height: 60px; line-height: 60px; text-align: center; text-transform: uppercase; font-size: 15px; font-weight: 800; font-family: "Lato", sans serif !important; color: white !important; display: inline-block; border-radius: 15px; border-style: none; text-decoration: none; background-color: #BB85B9; box-shadow: 0px 2px 2px 0px transparent; transition: all ease-in-out 300ms; transform: translate3d(0, 0, 0);
}
.btnn1:hover { box-shadow: 0px 15px 19px 0px rgba(0, 0, 0, 0.16);
}
.btnn1-small { cursor: pointer; margin: 5px; overflow: hidden; position: relative; width: 150px; max-width: 200px; height: 40px; line-height: 40px; text-align: center; text-transform: uppercase; font-size: 13px; font-weight: 800; font-family: "Lato", sans serif !important; color: white !important; display: inline-block; border-radius: 11px; border-style: none; text-decoration: none; background-color: #BB85B9; box-shadow: 0px 2px 2px 0px transparent; transition: all ease-in-out 300ms; transform: translate3d(0, 0, 0);
}
.btnn1-small:hover { box-shadow: 0px 15px 19px 0px rgba(0, 0, 0, 0.16);
}
.b1o { background-color: #F2BD7A !important;
}
.b1g { background-color: #358D32 !important;
}
button { border-style: none;
}
input[type=submit] { margin-top: 5px; position: absolute;
}
.btnn2 { margin: 5px; z-index: 0; display: inline-block; position: relative; overflow: hidden; border-radius: 15px; -webkit-transition: all 500ms ease; transition: all 500ms ease; background-color: transparent; border-width: 2px; border-style: solid; width: 250px; height: 60px; line-height: 55px; text-align: center; font-size: 15px; text-decoration: none; text-transform: capitalize; font-weight: 800; cursor: pointer; border-color: #BB85B9; color: #BB85B9 !important;
}
.btnn2:hover { color: white !important; background-color: #BB85B9;
}
.btnn2:after { border: 0 solid rgba(187, 133, 185, 0.1); z-index: -1; content: ""; position: absolute; width: 0; height: 0; top: -999px; left: -999px; right: -999px; bottom: -999px; margin: auto; border-radius: 50%; -webkit-transition: border 100ms ease; transition: border 100ms ease;
}
.btnn2:hover:after { border: 0 solid #bb85b9; border-width: 200px; -webkit-transition: border 380ms ease; transition: border 380ms ease;
}
.btnn2-small { margin: 5px; z-index: 0; display: inline-block; position: relative; overflow: hidden; border-radius: 11px; -webkit-transition: all 700ms ease; transition: all 700ms ease; background-color: transparent; border-width: 2px; border-style: solid; width: 150px; height: 40px; line-height: 36px; text-align: center; font-size: 13px; text-decoration: none; text-transform: capitalize; font-weight: 800; cursor: pointer; border-color: #BB85B9; color: #BB85B9 !important;
}
.btnn2-small:hover { color: white !important; background-color: #BB85B9;
}
.btnn2-small:after { border: 0 solid rgba(187, 133, 185, 0.1); z-index: -1; content: ""; position: absolute; width: 0; height: 0; top: -999px; left: -999px; right: -999px; bottom: -999px; margin: auto; border-radius: 50%; -webkit-transition: border 100ms ease; transition: border 100ms ease;
}
.btnn2-small:hover:after { border: 0 solid #bb85b9; border-width: 200px; -webkit-transition: border 380ms ease; transition: border 380ms ease;
}
.b2w { border-color: white; color: white !important;
}
.b2w:hover { color: #777 !important; background-color: white !important;
}
.b2w:after { border: 0 solid rgba(255, 255, 255, 0.1); z-index: -1; content: ""; -webkit-transition: border 100ms ease; transition: border 100ms ease;
}
.b2w:hover:after { border: 0 solid white; border-width: 200px; -webkit-transition: border 380ms ease; transition: border 380ms ease;
}
.b2o { border-color: #F2BD7A; color: #F2BD7A !important;
}
.b2o:hover { color: white !important; background-color: #F2BD7A !important;
}
.b2o:after { border: 0 solid rgba(242, 189, 122, 0.1); z-index: -1; content: ""; -webkit-transition: border 100ms ease; transition: border 100ms ease;
}
.b2o:hover:after { border: 0 solid #f2bd7a; border-width: 200px; -webkit-transition: border 380ms ease; transition: border 380ms ease;
}
.b2g { border-color: #358D32; color: #358D32 !important;
}
.b2g:hover { color: white !important; background-color: #358D32 !important;
}
.b2g:after { border: 0 solid rgba(53, 141, 50, 0.1); z-index: -1; content: ""; -webkit-transition: border 100ms ease; transition: border 100ms ease;
}
.b2g:hover:after { border: 0 solid #358d32; border-width: 200px; -webkit-transition: border 380ms ease; transition: border 380ms ease;
}
.b2r { border-color: red; color: red !important;
}
.b2r:hover { color: white !important; background-color: red !important;
}
.b2r:after { border: 0 solid rgba(255, 0, 0, 0.1); z-index: -1; content: ""; -webkit-transition: border 100ms ease; transition: border 100ms ease;
}
.b2r:hover:after { border: 0 solid red; border-width: 200px; -webkit-transition: border 380ms ease; transition: border 380ms ease;
}
.togglez { height: 100px; width: 100px; display: flex; align-items: center; justify-content: center;
}
.tgl { display: none;
}
.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn { box-sizing: border-box;
}
.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection { background: none;
}
.tgl + .tgl-btn { width: 65px; height: 35px;
}
.tgl + .tgl-btn { outline: 0; display: block; position: relative; cursor: pointer; user-select: none;
}
.tgl + .tgl-btn:after, .tgl + .tgl-btn:before { position: relative; display: block; content: ""; width: 50%; height: 100%;
}
.tgl + .tgl-btn:after { left: 0;
}
.tgl + .tgl-btn:before { display: none;
}
.tgl:checked + .tgl-btn:after { left: 50%;
}
.tgl + .tgl-btn { background: rgba(119, 119, 119, 0.45); border-radius: 50px; padding: 3px; transition: all 0.4s ease; border: 0px solid rgba(119, 119, 119, 0.45);
}
.tgl + .tgl-btn:after { border-radius: 2em; background: #fbfbfb; transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
}
.tgl + .tgl-btn:hover:after { will-change: padding;
}
.tgl + .tgl-btn:active { box-shadow: inset 0 0 0 2em #e8eae9;
}
.tgl + .tgl-btn:active:after { padding-right: 0.8em;
}
.tgl:checked + .tgl-btn { background: #8BC589; border-color: #8BC589;
}
.tgl:checked + .tgl-btn:active { box-shadow: none;
}
.tgl:checked + .tgl-btn:active:after { margin-left: -0.8em;
}
.tgl + .tgl-btn-small { width: 42px; height: 20px;
}
.tgl + .tgl-btn-small { outline: 0; display: block; position: relative; cursor: pointer; user-select: none;
}
.tgl + .tgl-btn-small:after, .tgl + .tgl-btn-small:before { position: relative; display: block; content: ""; width: 50%; height: 100%;
}
.tgl + .tgl-btn-small:after { left: 0;
}
.tgl + .tgl-btn-small:before { display: none;
}
.tgl:checked + .tgl-btn-small:after { left: 50%;
}
.tgl + .tgl-btn-small { background: rgba(119, 119, 119, 0.45); border-radius: 50px; padding: 3px; transition: all 0.4s ease; border: 0px solid rgba(119, 119, 119, 0.45);
}
.tgl + .tgl-btn-small:after { border-radius: 2em; background: #fbfbfb; transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
}
.tgl + .tgl-btn-small:hover:after { will-change: padding;
}
.tgl + .tgl-btn-small:active { box-shadow: inset 0 0 0 2em #e8eae9;
}
.tgl + .tgl-btn-small:active:after { padding-right: 0.8em;
}
.tgl:checked + .tgl-btn-small { background: #8BC589; border-color: #8BC589;
}
.tgl:checked + .tgl-btn-small:active { box-shadow: none;
}
.tgl:checked + .tgl-btn-small:active:after { margin-left: -0.8em;
}
/* Base for label styling */
.checkies { line-height: 25px; display: flex;
}
.checko:not(:checked), .checko:checked { position: absolute; display: none;
}
.checko:not(:checked) + .checko-btn, .checko:checked + .checko-btn { position: relative; padding-left: 50px; cursor: pointer; max-width: 450px;
}
.checko:not(:checked) + .checko-btn:before, .checko:checked + .checko-btn:before { content: ""; position: absolute; left: 0; top: 0; width: 25px; height: 25px; border: 2px solid #ccc; background: #fff; border-radius: 11px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
.checko:not(:checked) + .checko-btn:after, .checko:checked + .checko-btn:after { content: "✓"; color: white; position: absolute; top: 0; left: 0; height: 29px; width: 29px; display: flex; justify-content: center; align-items: center; font-size: 13px; transition: all 0.2s;
}
.checko:not(:checked) + .checko-btn:after { opacity: 0; transform: scale(0);
}
.checko:checked + .checko-btn:after { opacity: 1; transform: scale(1);
}
.checko:checked + .checko-btn:before { background-color: #8BC589; border-color: #8BC589;
}
.checko:disabled:not(:checked) + .checko-btn:before { box-shadow: none; border-color: #ddd; background-color: #ddd;
}
.checko:disabled:checked + label:before { box-shadow: none; border-color: #ddd; background-color: #ddd;
}
.checko:disabled:checked + label:after { color: white;
}
.checko:disabled + label { color: #aaa;
}
.checko:checked:focus + .checko-btn:before, .checko:not(:checked):focus + .checko-btn:before { border: 2px solid #8BC589;
}
/* checkbox aspect */
/* checked mark aspect */
/* checked mark aspect changes */
/* disabled checkbox */
/* accessibility */
/* hover style just for information */
.checko-btn:hover:before { border: 2px solid #8BC589 !important;
}

RMO live StyleGuide - Script Codes JS Codes

$('a[href*="#"]:not([href="#"])').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { $('html, body').animate({ scrollTop: target.offset().top }, 1000); return false; } }
});
(function (window, $) { $(function() { $('.btnn1,.btnn2,.btnn3,.collection-block').on('click', function (event) { event.preventDefault(); var $div = $('<div/>'), btnOffset = $(this).offset(),	xPos = event.pageX - btnOffset.left,	yPos = event.pageY - btnOffset.top; $div.addClass('ripple-effect'); var $ripple = $(".ripple-effect"); $ripple.css("height", $(this).height()); $ripple.css("width", $(this).height()); $div .css({ top: yPos - ($ripple.height()/2), left: xPos - ($ripple.width()/2), background: $(this).data("ripple-color") }) .appendTo($(this)); window.setTimeout(function(){ $div.remove(); }, 2000); }); });
})(window, jQuery);
RMO live StyleGuide - Script Codes
RMO live StyleGuide - Script Codes
Home Page Home
Developer Lahvjal
Username lahvjal
Uploaded August 24, 2022
Rating 3
Size 13,045 Kb
Views 38,456
Do you need developer help for RMO live StyleGuide?

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!

Lahvjal (lahvjal) Script Codes
Name
RMO-UI
Floating Product image
PNT Page
Paragraphs - RMO
Recycle Search - RMO
Rotate wheel
Product-Carousel items
Club Oilty Lander
RMO Page Style
Heart button
Create amazing love letters 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!