.
HRS Web Components
Reference the hrs css file in the <head> section of the HTML file. The file is hosted in Google Drive under "HR Technology" under the subfolder "css". The actual filename is hrsCSS-190216.css, 190216 being the date tag (format: DDMMYY) for version control. http://gdurl.com/OE67 is the permalink for the file. The file referenced below is a development css file. It can be minimized using online compression utilities to create a production css file.

The following are contained in the css file:
  • Headings (H1, H2, H3, H4) - only font-weight needs to be defined by developer. Available font-weight are 700, 500, and 300
  • Paragraph
  • Navigation Bar
  • Jumbotron
  • Regular Button
    <link rel="stylesheet" type="text/css" href="http://gdurl.com/OE67">


Navigation Bar
  • HRS HOME
  • IRRI JOBS
  • WORKING AT IRRI
  • OUR VALUES
  • COMPENSATION
  • NEW EMPLOYEES
  • CONTACT


Code

    <div class="hrsNavBar">
        <ul class="hrsMenuUl">
            <li class="hrsMenuUlLi" onclick="location.href='Target URL';">HRS HOME</li>
            <li class="hrsMenuUlLi" onclick="location.href='Target URL';">IRRI JOBS</li>
            <li class="hrsMenuUlLi" onclick="location.href='Target URL';">WORKING AT IRRI</li>
            <li class="hrsMenuUlLi" onclick="location.href='Target URL';">OUR VALUES</li>
            <li class="hrsMenuUlLi" onclick="location.href='Target URL';">COMPENSATION</li>
            <li class="hrsMenuUlLi" onclick="location.href='Target URL';">NEW EMPLOYEES</li>
            <li class="hrsMenuUlLi" onclick="location.href='Target URL';">CONTACT</li>
        </ul>
    </div>


Jumbotron
Lorem Ipsum
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
HRS Regular Button


Code

<div class="hrsJumbotron">
 <div class="hrsJombotronHeading">Lorem Ipsum</div>
 <div class="hrsJombotronText">
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </div>
 <div class="hrsButtonRegular hrsJumbotronButton" onclick="location.href='targetURL.html';">HRS Regular Button</div>
</div>


Regular Button
HRS Regular Button


Code
    <div class="hrsButtonRegular">HRS Regular Button</div>