Highlighted

Need to stop horizontal page scroll. Issue with container size and padding.

Contributor ,
Jul 29, 2019

Copy link to clipboard

Copied

UPDATE: Figured out the buttons . Just need help with the horizontal scroll.

Hello,

I have two questions regarding my buttons and the width of the page. The page loads fine with the horizontal layout is looking as it should but there is left padding behind the side menu which enables the page to scroll left to right. How can I adjust this so this doesn't happen. I like the spacing between the blue menu bar and the page content but can't figure out by just changing the padding.

My second question is how I can have each menu item have that solid yellow block when active. I tried this but it's not working:

a:active {

  background-size: 4px 50px;

  background-color: #ffc627;

  color: #003b49;

}

Thank you for any help with this!!

Here is my code. for some reason when I try to add raw html it's not showing up.

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <meta name="description" content="">

    <meta name="author" content="">

    <title>Premier Inc. - Branding Guidelines</title>

    <!-- Bootstrap core CSS -->

    <link href="https://www.premierinc.com/external-assets/Branding-Guide/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom fonts for this template -->

    <link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:100,200,300,400,500,600,700,800,900" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">

    <link href="https://www.premierinc.com/external-assets/Branding-Guide/css/font-awesome.min.css" rel="stylesheet">

    <link href="https://www.premierinc.com/external-assets/Branding-Guide/css/devicons.min.css" rel="stylesheet">

    <link href="https://www.premierinc.com/external-assets/Branding-Guide/css/simple-line-icons.css" rel="stylesheet">

  <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab:300,400" rel="stylesheet">

    <!-- Custom styles for this template -->

    <link href="https://www.premierinc.com/external-assets/Branding-Guide/css/resume.min.css" rel="stylesheet">

<!-- new css -->

<style>

* {

  box-sizing: border-box;

}

.logocolumn {

  float: left;

  width: 250px;

  padding: 0 60px 0 0;

}

.clearspacecolumn {

  float: left;

  width: 450px;

  padding: 0 60px 0 0;

}

/* Clearfix (clear floats) */

.logorow::after {

  content: "";

  clear: both;

  display: table;

}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */

@media screen and (max-width: 500px) {

  .logocolumn {

    width: 60%;

  }

}

.yellow-line {

border-top: 8px solid #ffb819;

width: 65px;

float: left;

}

.roboto {

font-size:3rem;

text-align: left;

font-family: 'Roboto', sans-serif;

font-weight: 300;

}

.robotoslab {

font-size:3rem;

text-align: left;

font-family: 'Roboto Slab', serif;

font-weight: 300;

}

</style>

  <!-- color css -->

  <style>

  ul {

  padding: 0;

    list-style-type: none;

  }

.colorli {

  position: relative;

  display:inline-block;  

  width:200px;

  height:200px;

  list-style:none;

  margin:15px 15px 0px 0px;

  

}

.p1 {

  line-height:1.25;

  margin: 8px 25px 0px 0px;

text-align:right;

font-family: 'Lato', sans-serif;

font-size:14px;

color: #ffffff;

}

  .copyright {

  line-height:1.25;

text-align:center;

font-family: 'Lato', sans-serif;

font-size:12px;

color: #ffffff;

}

.span1 {

  color: #ffffff;

  font-weight: bold;

}

.color-1 { background-color: #003b49; }

.color-2 { background-color: #7a979f; }

.color-3 { background-color: #cad4d7; }

.color-4 { background-color: #f2f4f4; }

.color-5 { background-color: #0091b3; }

.color-6 { background-color: #8dc7d8; }

.color-7 { background-color: #d3e9ef; }

.color-8 { background-color: #ffc627; }

.color-9 { background-color: #ffe29b; }

.color-10 { background-color: #fff3d7; }

.color-11 { background-color: #000000; }

.color-12 { background-color: #e24301; }

.color-13 { background-color: #fea682; }

.white-line {

border-top: 1px solid #ffffff;

width: 80%;

margin-top: 25px;

}

.white-line2 {

border-top: 1px solid #ffffff;

width: 80%;

}

.white-line3 {

border-top: 1px solid #ffffff;

width: 80%;

margin-top: 20px;

}

  .btn2{

  border:2px solid;

color:#0091b3;

display:inline-block;

font-family: 'Roboto Slab';

font-weight:400;

font-size:16px;

line-height:40px;

text-align:center;

text-decoration:none;

width:220px;

-webkit-text-size-adjust:none;

mso-hide:all;

margin:25px 0px 25px 0px;

  }

  a:hover {

text-decoration: none;

}

</style>

  <!-- circle css -->

  <style>

.box-piesite {

  text-align: left;

  font-size: 22px;

}

.piesite {

  position: relative;

  width: 1em;

  height: 1em;

  font-size: 10em;

  cursor: default;

}

.piesite .percent {

  position: absolute;

  top: 1.1em;

  left: 0.1em;

  width: 100%;

  font-size: 0.3em;

  text-align: center;

  z-index: 2;

line-height: 1.25;

}

.piesite .percent .symbol {

  font-size: 0.5em;

  vertical-align: super;

  opacity: 0.5;

}

.piesite > #slice {

  position: absolute;

  width: 1em;

  height: 1em;

  clip: rect(0px, 1em, 1em, 0.5em);

}

.piesite > #slice.gt50 {

  clip: rect(auto, auto, auto, auto);

}

.piesite > #slice > .pie {

  position: absolute;

  border: 0.1em solid #444;

  width: 1em;

  height: 1em;

  clip: rect(0em, 0.5em, 1em, 0em);

  border-radius: 0.5em;

}

li.design .piesite > #slice > .pie {

  border-color: #0091b3;

}

li.usability .piesite > #slice > .pie {

  border-color: #003b49;

}

li.creativity .piesite > #slice > .pie {

  border-color: #ffc627;

}

.piesite > #slice > .pie.fill {

  -webkit-transform: rotate(180deg) !important;

  transform: rotate(180deg) !important;

}

.piesite.fill > .percent {

  display: none;

}

.piesite:after {

  content: '';

  display: block;

  position: absolute;

  top: 0.1em;

  left: 0.1em;

  width: 0.8em;

  height: 0.8em;

  background: #ffffff;

  border-radius: 100%;

  z-index: 1;

}

.piesite:before {

  content: '';

  display: block;

  position: absolute;

  width: 1em;

  height: 1em;

  border-radius: 0.5em;

  opacity: 0.5;

  z-index: 0;

}

.piesite:before {

  background: #b8b8b8;

}

.box-piesite ul {

  padding: 0;

}

.box-piesite ul li {

  display: inline-block;

  margin: 10px 20px;

}

</style>

  <!-- parallax css -->

  <style>

  .stretch-across {

  height: 19em;

  background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)), url('https://www.premierinc.com/external-assets/Branding-Guide/images/crayons.jpg') center center no-repeat fixed;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  margin-bottom: 2em;

}

  .stretch-across2 {

  height: 19em;

  background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)), url('https://www.premierinc.com/external-assets/Branding-Guide/images/letters.jpg') center center no-repeat fixed;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  margin-bottom: 2em;

}

  .stretch-across3 {

  height: 19em;

  background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)), url('https://www.premierinc.com/external-assets/Branding-Guide/images/voice.png') center center no-repeat fixed;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  margin-bottom: 2em;

}

.text-overlay {

  color: white;

  top: 50%;

  transform: translateY(-50%);

  margin-left: 105px;

  margin-right: auto;

  position: relative;

  text-align: left;

  width: 100%;

}

.parallaxtext {

  margin-top: 0;

  font-weight: bold;

  font-family: 'Roboto Slab', 'Times New Roman', serif;

  font-size: 3.5em;

}

</style>

  <!-- hover css -->

   <style>

:root {

  --mainColor: #ffc627;

}

a {

  background:

     linear-gradient(

       to bottom, var(--mainColor) 0%,

       var(--mainColor) 100%

     );

background-position: 0 100%;

background-repeat: repeat-x;

background-size: 4px 0px;

  color: #000;

  text-decoration: none;

  transition: background-size .2s;

}

a:hover {

  background-size: 4px 50px;

}

  a:active {

  background-size: 4px 50px;

  background-color: #ffc627;

  color: #003b49;

}</style>

  </head>

  <body id="page-top">

    <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">

      <a class="navbar-brand js-scroll-trigger" href="#page-top">

     

        <span class="d-none d-lg-block">

          <img class="img-fluid img-profile mx-auto mb-2" width="50" src="https://www.premierinc.com/external-assets/Branding-Guide/images/mobius.png" alt="">

        </span>

      </a>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

        <span class="navbar-toggler-icon"></span>

      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">

        <ul class="navbar-nav">

      

          <li class="nav-item">

            <a class="nav-link js-scroll-trigger" href="#logo">Logo</a>

          </li>

          <li class="nav-item">

            <a class="nav-link js-scroll-trigger" href="#colors">Color</a>

          </li>

       

          <li class="nav-item">

            <a class="nav-link js-scroll-trigger" href="#typography">Typography</a>

          </li>

<li class="nav-item">

            <a class="nav-link js-scroll-trigger" href="#voice">Voice</a>

          </li>

       

        </ul>

      </div>

<span  style="margin-bottom:40px" class="d-none d-lg-block">

          <img class="img-fluid img-profile mx-auto mb-2" width="150" src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_White_CMYK_Horiz_HiR..." alt=""> <p class="copyright">@ 2019 Premier Inc.</p>

        </span>

    </nav>

    <div class="container-fluid p-0">

      <section style="margin-left:50px;" class="resume-section p-3 p-lg-5 d-flex d-column" id="about">

        <div class="my-auto">

          <h1 style="padding-bottom:2rem;" class="mb-0 responsivetitle">Brand

            <span class="text-primary">Guidelines</span>

          </h1>

       

          <p class="mb-5">Welcome to our hub for partner guidelines and assets. We want to make it easy for you to integrate Premier in your creative assets while respecting our brand and legal/licensing restrictions.</p>

       

        </div>

      </section>

      <section style=" margin-bottom: 90px;margin-left:50px" class="resume-section p-3 p-lg-5 d-flex flex-column" id="logo">

        <div class="my-auto">

<hr class="yellow-line"><br>

          <p><h2 class="mb-5">Logo</h2></p>

          <div class="resume-item d-flex flex-column flex-md-row mb-5">

            <div class="resume-content mr-auto">

              <div class="subheading mb-3">Accepted Versions</div>

            

            </div>

        

          </div>

         <div class="logorow">

  <div class="logocolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_309_RGB_Horiz_HiRes...."  style="width:100%;padding-bottom:10px;">

   <p class="mb-5">PMS 309</p>

  </div>

  <div class="logocolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_Black_RGB_Horiz_HiRe..."  style="width:100%;padding-bottom:10px;">

   <p class="mb-5">Black</p>

  </div>

  <div class="logocolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_Gray_RBG_Horiz_HiRes..."  style="width:100%;padding-bottom:10px;">

   <p class="mb-5">PMS 424</p>

  </div>

<div class="logocolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_White_RGB_Horiz_HiRe..."  style="width:100%;padding-bottom:13px;">

  <p class="mb-5">White</p>

  </div>

</div><div class="subheading mb-3">Clear Space</div>

    <div class="logorow">

  <div class="clearspacecolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/Clear_Space_Print.png"  style="width:400px;padding-bottom:10px;">

   <p style="margin: 0px;"><b>Clear Space - Print</b></p>

  <p class="mb-5">In print materials, the preferred amount of clear

space around the logo is equal to the mobius.</p>

  </div>

  <div class="clearspacecolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/Clear_Space_Digital.png"  style="width:360px;padding-bottom:10px;">

   <p style="margin: 0px;"><b>Clear Space - Digital</b></p>

   <p class="mb-5">Maintaining a 8 pixel clear space is preferable.</p>

  </div>

</div>

  <div class="subheading mb-3">Minimum Logo Size</div>

    <div class="logorow">

  <div class="clearspacecolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/Minimum_Logo_Print.png"  style="width:380px;padding-bottom:10px;">

  <p style="margin: 0px;"><b>Minimum Logo Size - Print</b></p>

   <p class="mb-5">For print use, the logo should never be reduced

below the minimum size of 5.5cm x 1.2cm.</p>

  </div>

  <div class="clearspacecolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/Minimum_Logo_Digital.png"  style="width:340px;padding-bottom:10px;">

  <p style="margin: 0px;"><b>Minimum Logo Size - Digital</b></p>

   <p class="mb-5">The logo should not appear smaller than

107 px wide in digital executions.</p>

  </div>

</div>

  <div><a href="https://www.premierinc.com/external-assets/Branding-Guide/Downloads/PINC_Logos.zip"

class="btn2" id="colors">Download Logo Suite</a></div>

        </div>

      </section>

<div class="stretch-across" style="background-position-y:100%;" id="colors">

  <h1 class="text-overlay parallaxtext">Color</h1>

</div>

      <section style="margin-bottom:90px;margin-left:50px;" class="resume-section p-3 p-lg-5 d-flex flex-column" >

        <div class="my-auto">

<div class="subheading mb-3">Primary</div>

      <ul class="mb-5">

  <li class="color-1 colorli">

    <div style="padding-top: 5px;"><p class="p1"><span>CMYK<br></span>100.64.52.45</p></div>

  <div class="desc"><p class="p1"><span>RGB<br></span>0.59.73</p></div>

  <div class="desc"><p class="p1"><span>HEX<br></span>#003b49</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span>Night Shift | PMS 309 C</span></p></div>

  </li>

  <li class="color-2 colorli">

      <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>#56.31.33.1</p></div>

  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>#122.151.159</p></div>

  <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#7a979f</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span class "span1">Night Shift | 309@50</span></p></div>

  </li>

  <li class="color-3 colorli">

      <div style="padding-top: 5px;"><p class="p1" style="color:#000000"><span style="color:#000000">CMYK<br></span>20.10.12.0</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">RGB<br></span>202.212.215</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">HEX<br></span>#cad4d7</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span class "span1" style="color:#000000">Night Shift | 309@20</span></p></div>

  </li>

<li class="color-4 colorli">

      <div style="padding-top: 5px;"><p class="p1" style="color:#000000"><span style="color:#000000">CMYK<br></span>4.2.2.0</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">RGB<br></span>242.244.244</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">HEX<br></span>#f2f4f4</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">Night Shift | 309@5</span></p></div>

  </li>

  <li class="color-5 colorli">

       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>92.24.23.0</p></div>

  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>0.145.179</p></div>

  <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#0091b3</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span class "span1">Scrubs | PMS 632 C</span></p></div>

  </li>

  <li class="color-6 colorli">

       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>43.7.12.0</p></div>

  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>#141.199.216</p></div>

  <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#8dc7d8</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span class "span1">Scrubs | 632@50</span></p></div>

  </li>

  <li class="color-7 colorli">

       <div style="padding-top: 5px;"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">CMYK<br></span>16.2.4.0</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">RGB<br></span>211.233.239</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">HEX<br></span>#d3e9ef</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">Scrubs | 632@20</span></p></div>

  </ul>

<div class="subheading mb-3">Secondary</div>

  <ul class="mb-5">

  <li class="color-8 colorli">

       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>0.24.91.0</p></div>

  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>255.198.39</p></div>

  <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#ffc627</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span class "span1">Early Shift | PMS 123 C</span></p></div>

  </li>

  <li class="color-9 colorli">

       <div style="padding-top: 5px;"><p class="p1" style="color:#000000"><span style="color:#000000">CMYK<br></span>0.12.44.0</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">RGB<br></span>255.226.155</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">HEX<br></span>#ffe29b</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">Early Shift | 123@50</span></p></div>

  </li>

  <li class="color-10 colorli">

       <div style="padding-top: 5px;"><p class="p1" style="color:#000000"><span style="color:#000000">CMYK<br></span>0.4.15.0</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">RGB<br></span>255.243.215</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">HEX<br></span>#ff3d7</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">Early Shift | 123@20</span></p></div>

  </li>

  </ul>

  <div class="subheading mb-3">Tertiary</div>

  <ul class="mb-5"><li class="color-11 colorli">

       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>0.0.0.100</p></div>

  <hr class="white-line2">

<div class="desc"><p class="p1"><span class "span1">BLACK</span></p></div>

  <div class="desc"><p class="p1"><span class "span1">CMYK<br></span>65.30.35.100</p></div>

  <hr class="white-line3">

  <div class="desc"><p class="p1"><span class "span1">RICH BLACK</span></p></div>

  </li>

  <li class="color-12 colorli">

       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>6.87.100.1</p></div>

  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>226.67.1</p></div>

  <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#e24301</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span class "span1">Code Red | PMS 1665 C</span></p></div>

  </li>

  <li class="color-13 colorli">

       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>0.42.47.0</p></div>

  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>254.166.130</p></div>

  <div class   <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#fea682</p></div>

<hr class="white-line">

  <div class   <div class="desc"><p class="p1"><span class "span1">Code Red | 1665@50</span></p></div>

</li>

</ul>

<div class="subheading mb-3">Color Proportion</div>

<div class="box-piesite">

    <ul style="font-family: 'Roboto', sans-serif;">

        <li class="design">

            <div class="piesite" id="pie_0" data-pie="60"></div>

        </li>

        <li class="usability">

            <div class="piesite" id="pie_2" data-pie="30"></div>

        </li>

        <li class="creativity">

            <div class="piesite" id="pie_1" data-pie="10"></div>

        </li>

    </ul>

</div>

        </div>

      </section>

<div class="stretch-across2" style="background-position-y:100%;" id="typography">

  <h1 class="text-overlay parallaxtext">Typography</h1>

</div>

      <section style="margin-left:50px;" class="resume-section p-3 p-lg-5 d-flex flex-column">

        <div class="my-auto">

          <div class="subheading mb-3">Best Practices</div>

         <p style="margin: 0px;"><b>Font Styles</b></p>

   <p class="mb-5">Regular or Bold for headlines and subheads. Light or

Regular for body copy. Bold or Italic for emphasis.</p>

  <p style="margin: 0px;"><b>Use Cases</b></p>

   <p class="mb-5">Please refer to Premier’s Editorial Style Guide for proper usage of

uppercase, lowercase, sentence case, title case and all caps.</p>

   <p style="margin: 0px;"><b>Roboto</b> Font Family</p>

   <hr>

         <p class="roboto"> A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>

  <p class="roboto"> a b c d e f g h i j k l m n o p q r s t u v w x y z</p>

   <p class="roboto"> 1 2 3 4 5 6 7 8 9 0 . - + / * = ? : ; , < > " ! @ #"</p>

  <div class="mb-5"><a href="https://fonts.google.com/specimen/Roboto"

class="btn2" target="_blank">Download Font Family</a></div>

   <p style="margin: 0px;"><b>Roboto Slab</b> Font Family</p>

 

   <hr>

         <p class="robotoslab"> A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>

  <p class="robotoslab"> a b c d e f g h i j k l m n o p q r s t u v w x y z</p>

   <p class="robotoslab"> 1 2 3 4 5 6 7 8 9 0 . - + / * = ? : ; , < > " ! @ #"</p>

   <div class="mb-5"><a href="https://fonts.google.com/specimen/Roboto+Slab"

class="btn2" target="_blank">Download Font Family</a></div>

        </div>

      </section>

<div class="stretch-across3" style="background-position-y:100%;!important" id="voice">

  <h1 class="text-overlay parallaxtext">Voice</h1>

</div>

<section style="margin-left:50px;min-height:45vh !important" class="resume-section p-3 p-lg-5 d-flex flex-column" id="voice">

        <div class="my-auto">

          <p>Premier is an innovative team of leaders, thinkers and doers destined to change more than your bottom line. They are out to change the world of

healthcare. We are more than a healthcare GPO, we’re the sixth man on your team, a catalytic innovation machine that is transforming healthcare.</p>

          <p class="mb-0">We are smart, but not arrogant. Premier is daring and innovative, achieving results other companies can only dream of. We are constantly

challenging the normal to achieve the exceptional. Premier is not in the technology, pharmacy or GPO industry, we are in the competency

industry. Bringing insight and solutions to problems that seem all but impossible to solve. We have a contagious excitement about the

work we do. Healthcare isn’t frozen yogurt of spandex yoga pants. There is a human-connection to the work we do because people’s lives

are at stake. Our parents, children, neighbors, friends, and people we have yet to meet, depend on a functional healthcare system and we

help make that happen. We are passionate about creating lasting change for our members to help create an unrivaled healthcare system.

Premier isn’t in real estate; we aren’t transactional in nature. Our company is full of gifted team members with a strong helper sense. Problem

solvers. Servant heart. Service-minded. Premier is tenacious, honest, ethical, ambitious, trustworthy, knowledgeable, dedicated, wellrounded,

versatile, curious, imaginative, witty, clever, resilient and compassionate. The stakes are high, and Premier is playing for keeps.</p>

        </div>

      </section>

  

    </div>

    <!-- Bootstrap core JavaScript -->

    <script src="https://www.premierinc.com/external-assets/Branding-Guide/js/jquery.min.js"></script>

    <script src="https://www.premierinc.com/external-assets/Branding-Guide/js/bootstrap.bundle.min.js"></script>

    <!-- Plugin JavaScript -->

    <script src="https://www.premierinc.com/external-assets/Branding-Guide/js/jquery.easing.min.js"></script>

    <!-- Custom scripts for this template -->

    <script src="https://www.premierinc.com/external-assets/Branding-Guide/js/resume.min.js"></script>

<!-- circle js -->

<script>var piesiteFired = 0;

$(document).ready(function() {

    var $win = $(window),

        $win_height = $(window).height(),

        // - A multiple of viewport height - The higher this number the sooner triggered.

        windowPercentage = $(window).height() * 0.9;

    $win.on("scroll", scrollReveal);

    function scrollReveal() {

        var scrolled = $win.scrollTop();

      

        ///////////////////////////////////////

        // Bar Charts scroll activate, looking for .trigger class to fire.

        $(".trigger").each(function() {

            var $this = $(this),

                offsetTop = $this.offset().top;

            if (

                scrolled + windowPercentage > offsetTop ||

                $win_height > offsetTop

            ) {

                $(this).each(function(key, bar) {

                    var percentage = $(this).data("percentage");

                    $(this).css("height", percentage + "%");

                  

                    ///////////////////////////////////////

                    //        Animated numbers

                    $(this).prop("Counter", 0).animate(

                        {

                            Counter: $(this).data("percentage")

                        },

                        {

                            duration: 2000,

                            easing: "swing",

                            step: function(now) {

                                $(this).text(Math.ceil(now));

                            }

                        }

                    );

                    //        Animated numbers

                    ///////////////////////////////////////

                });

            } else {

                ///////////////////////////////////////

                // To keep them triggered, lose this block.

                $(this).each(function(key, bar) {

                    $(this).css("height", 0);

                });

            }  

          

        });

        ///////////////////////////////////////

        // Horizontal Chart

        $(".chartBarsHorizontal .bar").each(function() {

            var $this = $(this),

                offsetTop = $this.offset().top;

            if (

                scrolled + windowPercentage > offsetTop ||

                $win_height > offsetTop

            ) {

                $(this).each(function(key, bar) {

                    var percentage = $(this).data("percentage");

                    $(this).css("width", percentage + "%");

                    ///////////////////////////////////////

                    //        Animated numbers

                    $(this).prop("Counter", 0).animate(

                        {

                            Counter: $(this).data("percentage")

                        },

                        {

                            duration: 2000,

                            easing: "swing",

                            step: function(now) {

                                $(this).text(Math.ceil(now));

                            }

                        }

                    );

                    //        Animated numbers

                    ///////////////////////////////////////

                });

  

            } else {

                ///////////////////////////////////////

                // To keep them triggered, lose this block.

                $(this).each(function(key, bar) {

                    $(this).css("width", 0);

                });

            }  

          

        });

      

        ///////////////////////////////////////

        // Radial Graphs - scroll activate

        $(".piesite").each(function() {

            var $this = $(this),

                offsetTop = $this.offset().top;

            if (

                scrolled + windowPercentage > offsetTop ||

                $win_height > offsetTop

            ) {

                if (piesiteFired == 0) {

                    timerSeconds = 3;

                    timerFinish = new Date().getTime() + timerSeconds * 1000;

                    $(".piesite").each(function(a) {

                        pie = $("#pie_" + a).data("pie");

                        timer = setInterval(

                            "stoppie(" + a + ", " + pie + ")",

                            0

                        );

                    });

                    piesiteFired = 1;

                }

            } else {

                // To keep them triggered, lose this block.

                $(".piesite").each(function() {

                    piesiteFired = 0;

                });

            }

        });

    }

    scrollReveal();

});

///////////////////////////////////////

//        The Radial Graphs

///////////////////////////////////////

// The following code is originally from the excellent pen:

// https://codepen.io/StephenScaff/pen/VYaQGB by Stephen Scaff

var timer;

var timerFinish;

var timerSeconds;

function drawTimer(c, a) {

    $("#pie_" + c).html(

        '<div class="percent"></div><div id="slice"' +

            (a > 50 ? ' class="gt50"' : "") +

            '><div class="pie"></div>' +

            (a > 50 ? '<div class="pie fill"></div>' : "") +

            "</div>"

    );

    var b = 360 / 100 * a;

    $("#pie_" + c + " #slice .pie").css({

        "-moz-transform": "rotate(" + b + "deg)",

        "-webkit-transform": "rotate(" + b + "deg)",

        "-o-transform": "rotate(" + b + "deg)",

        transform: "rotate(" + b + "deg)"

    });

    a = Math.floor(a * 100) / 100;

    arr = a.toString().split(".");

    intPart = arr[0];

    $("#pie_" + c + " .percent").html(

        '<span class="int">' +

            intPart +

            "</span>" +

            '<span class="symbol">%</span>'

    );

}

function stoppie(d, b) {

    var c = (timerFinish - new Date().getTime()) / 1000;

    var a = 100 - c / timerSeconds * 100;

    a = Math.floor(a * 100) / 100;

    if (a <= b) {

        drawTimer(d, a);

    } else {

        b = $("#pie_" + d).data("pie");

        arr = b.toString().split(".");

        $("#pie_" + d + " .percent .int").html(arr[0]);

    }

}</script>

  </body>

</html>

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <meta name="description" content="">

    <meta name="author" content="">

    <title>Premier Inc. - Branding Guidelines</title>

    <!-- Bootstrap core CSS -->

    <link href="https://www.premierinc.com/external-assets/Branding-Guide/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom fonts for this template -->

    <link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:100,200,300,400,500,600,700,800,900" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">

    <link href="https://www.premierinc.com/external-assets/Branding-Guide/css/font-awesome.min.css" rel="stylesheet">

    <link href="https://www.premierinc.com/external-assets/Branding-Guide/css/devicons.min.css" rel="stylesheet">

    <link href="https://www.premierinc.com/external-assets/Branding-Guide/css/simple-line-icons.css" rel="stylesheet">

  <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab:300,400" rel="stylesheet">

    <!-- Custom styles for this template -->

    <link href="https://www.premierinc.com/external-assets/Branding-Guide/css/resume.min.css" rel="stylesheet">

<!-- new css -->

<style>

* {

  box-sizing: border-box;

}

.logocolumn {

  float: left;

  width: 250px;

  padding: 0 60px 0 0;

}

.clearspacecolumn {

  float: left;

  width: 450px;

  padding: 0 60px 0 0;

}

/* Clearfix (clear floats) */

.logorow::after {

  content: "";

  clear: both;

  display: table;

}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */

@media screen and (max-width: 500px) {

  .logocolumn {

    width: 60%;

  }

}

.yellow-line {

border-top: 8px solid #ffb819;

width: 65px;

float: left;

}

.roboto {

font-size:3rem;

text-align: left;

font-family: 'Roboto', sans-serif;

font-weight: 300;

}

.robotoslab {

font-size:3rem;

text-align: left;

font-family: 'Roboto Slab', serif;

font-weight: 300;

}

</style>

  <!-- color css -->

  <style>

  ul {

  padding: 0;

    list-style-type: none;

  }

.colorli {

  position: relative;

  display:inline-block;   

  width:200px;

  height:200px; 

  list-style:none; 

  margin:15px 15px 0px 0px;

 

   

}

.p1 {

  line-height:1.25;

  margin: 8px 25px 0px 0px;

text-align:right;

font-family: 'Lato', sans-serif;

font-size:14px;

color: #ffffff;

}

 

  .copyright {

  line-height:1.25;

text-align:center;

font-family: 'Lato', sans-serif;

font-size:12px;

color: #ffffff;

}

.span1 {

  color: #ffffff;

  font-weight: bold;

 

}

.color-1 { background-color: #003b49; }

.color-2 { background-color: #7a979f; }

.color-3 { background-color: #cad4d7; }

.color-4 { background-color: #f2f4f4; }

.color-5 { background-color: #0091b3; }

.color-6 { background-color: #8dc7d8; }

.color-7 { background-color: #d3e9ef; }

.color-8 { background-color: #ffc627; }

.color-9 { background-color: #ffe29b; }

.color-10 { background-color: #fff3d7; }

.color-11 { background-color: #000000; }

.color-12 { background-color: #e24301; }

.color-13 { background-color: #fea682; }

.white-line {

border-top: 1px solid #ffffff;

width: 80%;

margin-top: 25px;

}

.white-line2 {

border-top: 1px solid #ffffff;

width: 80%;

}

.white-line3 {

border-top: 1px solid #ffffff;

width: 80%;

margin-top: 20px;

}

  .btn2{

  border:2px solid;

color:#0091b3;

display:inline-block;

font-family: 'Roboto Slab';

font-weight:400;

font-size:16px;

line-height:40px;

text-align:center;

text-decoration:none;

width:220px;

-webkit-text-size-adjust:none;

mso-hide:all;

margin:25px 0px 25px 0px;

  }

  a:hover {

text-decoration: none;

}

</style>

  <!-- circle css -->

  <style>

.box-piesite {

  text-align: left;

  font-size: 22px;

}

.piesite {

  position: relative;

  width: 1em;

  height: 1em;

  font-size: 10em;

  cursor: default;

}

.piesite .percent {

  position: absolute;

  top: 1.1em;

  left: 0.1em;

  width: 100%;

  font-size: 0.3em;

  text-align: center;

  z-index: 2;

line-height: 1.25;

}

.piesite .percent .symbol {

  font-size: 0.5em;

  vertical-align: super;

  opacity: 0.5;

}

.piesite > #slice {

  position: absolute;

  width: 1em;

  height: 1em;

  clip: rect(0px, 1em, 1em, 0.5em);

}

.piesite > #slice.gt50 {

  clip: rect(auto, auto, auto, auto);

}

.piesite > #slice > .pie {

  position: absolute;

  border: 0.1em solid #444;

  width: 1em;

  height: 1em;

  clip: rect(0em, 0.5em, 1em, 0em);

  border-radius: 0.5em;

}

li.design .piesite > #slice > .pie {

  border-color: #0091b3;

}

li.usability .piesite > #slice > .pie {

  border-color: #003b49;

}

li.creativity .piesite > #slice > .pie {

  border-color: #ffc627;

}

.piesite > #slice > .pie.fill {

  -webkit-transform: rotate(180deg) !important;

  transform: rotate(180deg) !important;

}

.piesite.fill > .percent {

  display: none;

}

.piesite:after {

  content: '';

  display: block;

  position: absolute;

  top: 0.1em;

  left: 0.1em;

  width: 0.8em;

  height: 0.8em;

  background: #ffffff;

  border-radius: 100%;

  z-index: 1;

}

.piesite:before {

  content: '';

  display: block;

  position: absolute;

  width: 1em;

  height: 1em;

  border-radius: 0.5em;

  opacity: 0.5;

  z-index: 0;

}

.piesite:before {

  background: #b8b8b8;

}

.box-piesite ul {

  padding: 0;

}

.box-piesite ul li {

  display: inline-block;

  margin: 10px 20px;

}

</style>

  <!-- parallax css -->

  <style>

  .stretch-across {

  height: 19em;

  background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)), url('https://www.premierinc.com/external-assets/Branding-Guide/images/crayons.jpg') center center no-repeat fixed;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  margin-bottom: 2em;

}

  .stretch-across2 {

  height: 19em;

  background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)), url('https://www.premierinc.com/external-assets/Branding-Guide/images/letters.jpg') center center no-repeat fixed;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  margin-bottom: 2em;

}

 

  .stretch-across3 {

  height: 19em;

  background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)), url('https://www.premierinc.com/external-assets/Branding-Guide/images/voice.png') center center no-repeat fixed;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  margin-bottom: 2em;

}

.text-overlay {

  color: white;

  top: 50%;

  transform: translateY(-50%);

  margin-left: 105px;

  margin-right: auto;

  position: relative;

  text-align: left;

  width: 100%;

}

.parallaxtext {

  margin-top: 0;

  font-weight: bold;

  font-family: 'Roboto Slab', 'Times New Roman', serif;

  font-size: 3.5em;

}

</style>

  <!-- hover css -->

   <style>

:root {

  --mainColor: #ffc627;

}

a {

  background:

     linear-gradient(

       to bottom, var(--mainColor) 0%,

       var(--mainColor) 100%

     );

background-position: 0 100%;

background-repeat: repeat-x;

background-size: 4px 0px;

  color: #000;

  text-decoration: none;

  transition: background-size .2s;

}

a:hover {

  background-size: 4px 50px;

}

  a:active {

  background-size: 4px 50px;

  background-color: #ffc627;

  color: #003b49;

}</style>

  </head>

  <body id="page-top">

    <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">

      <a class="navbar-brand js-scroll-trigger" href="#page-top">

      

        <span class="d-none d-lg-block">

          <img class="img-fluid img-profile mx-auto mb-2" width="50" src="https://www.premierinc.com/external-assets/Branding-Guide/images/mobius.png" alt="">

        </span>

      </a>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

        <span class="navbar-toggler-icon"></span>

      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">

        <ul class="navbar-nav">

       

          <li class="nav-item">

            <a class="nav-link js-scroll-trigger" href="#logo">Logo</a>

          </li>

          <li class="nav-item">

            <a class="nav-link js-scroll-trigger" href="#colors">Color</a>

          </li>

        

          <li class="nav-item">

            <a class="nav-link js-scroll-trigger" href="#typography">Typography</a>

          </li>

<li class="nav-item">

            <a class="nav-link js-scroll-trigger" href="#voice">Voice</a>

          </li>

        

        </ul>

 

      </div>

<span  style="margin-bottom:40px" class="d-none d-lg-block">

          <img class="img-fluid img-profile mx-auto mb-2" width="150" src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_White_CMYK_Horiz_HiR..." alt=""> <p class="copyright">@ 2019 Premier Inc.</p>

        </span>

    </nav>

    <div class="container-fluid p-0">

      <section style="margin-left:50px;" class="resume-section p-3 p-lg-5 d-flex d-column" id="about">

        <div class="my-auto">

          <h1 style="padding-bottom:2rem;" class="mb-0 responsivetitle">Brand

            <span class="text-primary">Guidelines</span>

          </h1>

        

          <p class="mb-5">Welcome to our hub for partner guidelines and assets. We want to make it easy for you to integrate Premier in your creative assets while respecting our brand and legal/licensing restrictions.</p>

        

        </div>

      </section>

      <section style=" margin-bottom: 90px;margin-left:50px" class="resume-section p-3 p-lg-5 d-flex flex-column" id="logo">

        <div class="my-auto">

<hr class="yellow-line"><br>

          <p><h2 class="mb-5">Logo</h2></p>

          <div class="resume-item d-flex flex-column flex-md-row mb-5">

            <div class="resume-content mr-auto">

              <div class="subheading mb-3">Accepted Versions</div>

             

            </div>

         

          </div>

         <div class="logorow">

  <div class="logocolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_309_RGB_Horiz_HiRes...."  style="width:100%;padding-bottom:10px;">

   <p class="mb-5">PMS 309</p>

  </div>

  <div class="logocolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_Black_RGB_Horiz_HiRe..."  style="width:100%;padding-bottom:10px;">

   <p class="mb-5">Black</p>

  </div>

  <div class="logocolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_Gray_RBG_Horiz_HiRes..."  style="width:100%;padding-bottom:10px;">

   <p class="mb-5">PMS 424</p>

  </div>

<div class="logocolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_White_RGB_Horiz_HiRe..."  style="width:100%;padding-bottom:13px;">

  <p class="mb-5">White</p>

  </div>

</div><div class="subheading mb-3">Clear Space</div>

    <div class="logorow">

  <div class="clearspacecolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/Clear_Space_Print.png"  style="width:400px;padding-bottom:10px;">

   <p style="margin: 0px;"><b>Clear Space - Print</b></p>

  <p class="mb-5">In print materials, the preferred amount of clear

space around the logo is equal to the mobius.</p>

  </div>

  <div class="clearspacecolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/Clear_Space_Digital.png"  style="width:360px;padding-bottom:10px;">

   <p style="margin: 0px;"><b>Clear Space - Digital</b></p>

   <p class="mb-5">Maintaining a 8 pixel clear space is preferable.</p>

  </div>

</div>

  <div class="subheading mb-3">Minimum Logo Size</div>

    <div class="logorow">

  <div class="clearspacecolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/Minimum_Logo_Print.png"  style="width:380px;padding-bottom:10px;">

  <p style="margin: 0px;"><b>Minimum Logo Size - Print</b></p>

   <p class="mb-5">For print use, the logo should never be reduced

below the minimum size of 5.5cm x 1.2cm.</p>

  </div>

  <div class="clearspacecolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/Minimum_Logo_Digital.png"  style="width:340px;padding-bottom:10px;">

  <p style="margin: 0px;"><b>Minimum Logo Size - Digital</b></p>

   <p class="mb-5">The logo should not appear smaller than

107 px wide in digital executions.</p>

  </div>

</div>

  <div><a href="https://www.premierinc.com/external-assets/Branding-Guide/Downloads/PINC_Logos.zip"

class="btn2" id="colors">Download Logo Suite</a></div>

        </div>

      </section>

<div class="stretch-across" style="background-position-y:100%;" id="colors">

  <h1 class="text-overlay parallaxtext">Color</h1>

</div>

      <section style="margin-bottom:90px;margin-left:50px;" class="resume-section p-3 p-lg-5 d-flex flex-column" >

        <div class="my-auto">

<div class="subheading mb-3">Primary</div>

      <ul class="mb-5">

  <li class="color-1 colorli">

    <div style="padding-top: 5px;"><p class="p1"><span>CMYK<br></span>100.64.52.45</p></div>

  <div class="desc"><p class="p1"><span>RGB<br></span>0.59.73</p></div>

  <div class="desc"><p class="p1"><span>HEX<br></span>#003b49</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span>Night Shift | PMS 309 C</span></p></div>

 

  </li>

  <li class="color-2 colorli">

      <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>#56.31.33.1</p></div>

  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>#122.151.159</p></div>

  <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#7a979f</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span class "span1">Night Shift | 309@50</span></p></div>

  </li>

  <li class="color-3 colorli">

      <div style="padding-top: 5px;"><p class="p1" style="color:#000000"><span style="color:#000000">CMYK<br></span>20.10.12.0</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">RGB<br></span>202.212.215</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">HEX<br></span>#cad4d7</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span class "span1" style="color:#000000">Night Shift | 309@20</span></p></div>

  </li>

<li class="color-4 colorli">

      <div style="padding-top: 5px;"><p class="p1" style="color:#000000"><span style="color:#000000">CMYK<br></span>4.2.2.0</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">RGB<br></span>242.244.244</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">HEX<br></span>#f2f4f4</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">Night Shift | 309@5</span></p></div>

  </li>

  <li class="color-5 colorli">

       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>92.24.23.0</p></div>

  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>0.145.179</p></div>

  <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#0091b3</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span class "span1">Scrubs | PMS 632 C</span></p></div>

  </li>

  <li class="color-6 colorli">

       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>43.7.12.0</p></div>

  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>#141.199.216</p></div>

  <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#8dc7d8</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span class "span1">Scrubs | 632@50</span></p></div>

  </li>

  <li class="color-7 colorli">

       <div style="padding-top: 5px;"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">CMYK<br></span>16.2.4.0</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">RGB<br></span>211.233.239</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">HEX<br></span>#d3e9ef</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">Scrubs | 632@20</span></p></div>

  </ul>

 

<div class="subheading mb-3">Secondary</div>

  <ul class="mb-5">

  <li class="color-8 colorli">

       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>0.24.91.0</p></div>

  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>255.198.39</p></div>

  <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#ffc627</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span class "span1">Early Shift | PMS 123 C</span></p></div>

  </li>

  <li class="color-9 colorli">

       <div style="padding-top: 5px;"><p class="p1" style="color:#000000"><span style="color:#000000">CMYK<br></span>0.12.44.0</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">RGB<br></span>255.226.155</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">HEX<br></span>#ffe29b</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">Early Shift | 123@50</span></p></div>

  </li>

  <li class="color-10 colorli">

       <div style="padding-top: 5px;"><p class="p1" style="color:#000000"><span style="color:#000000">CMYK<br></span>0.4.15.0</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">RGB<br></span>255.243.215</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">HEX<br></span>#ff3d7</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">Early Shift | 123@20</span></p></div>

  </li>

  </ul>

  <div class="subheading mb-3">Tertiary</div>

  <ul class="mb-5"><li class="color-11 colorli">

       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>0.0.0.100</p></div>

  <hr class="white-line2">

<div class="desc"><p class="p1"><span class "span1">BLACK</span></p></div>

  <div class="desc"><p class="p1"><span class "span1">CMYK<br></span>65.30.35.100</p></div>

  <hr class="white-line3">

  <div class="desc"><p class="p1"><span class "span1">RICH BLACK</span></p></div>

  </li>

  <li class="color-12 colorli">

       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>6.87.100.1</p></div>

  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>226.67.1</p></div>

  <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#e24301</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span class "span1">Code Red | PMS 1665 C</span></p></div>

  </li>

  <li class="color-13 colorli">

       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>0.42.47.0</p></div>

  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>254.166.130</p></div>

  <div class   <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#fea682</p></div>

<hr class="white-line">

  <div class   <div class="desc"><p class="p1"><span class "span1">Code Red | 1665@50</span></p></div>

</li>

</ul>

<div class="subheading mb-3">Color Proportion</div>

<div class="box-piesite">

    <ul style="font-family: 'Roboto', sans-serif;">

        <li class="design">

            <div class="piesite" id="pie_0" data-pie="60"></div>

        </li>

        <li class="usability">

            <div class="piesite" id="pie_2" data-pie="30"></div>

        </li>

        <li class="creativity">

            <div class="piesite" id="pie_1" data-pie="10"></div>

        </li>

    </ul>

</div>

        </div>

      </section>

<div class="stretch-across2" style="background-position-y:100%;" id="typography">

  <h1 class="text-overlay parallaxtext">Typography</h1>

</div>

      <section style="margin-left:50px;" class="resume-section p-3 p-lg-5 d-flex flex-column">

        <div class="my-auto">

          <div class="subheading mb-3">Best Practices</div>

         <p style="margin: 0px;"><b>Font Styles</b></p>

   <p class="mb-5">Regular or Bold for headlines and subheads. Light or

Regular for body copy. Bold or Italic for emphasis.</p>

  <p style="margin: 0px;"><b>Use Cases</b></p>

   <p class="mb-5">Please refer to Premier’s Editorial Style Guide for proper usage of

uppercase, lowercase, sentence case, title case and all caps.</p>

   <p style="margin: 0px;"><b>Roboto</b> Font Family</p>

   <hr>

         <p class="roboto"> A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>

  <p class="roboto"> a b c d e f g h i j k l m n o p q r s t u v w x y z</p>

   <p class="roboto"> 1 2 3 4 5 6 7 8 9 0 . - + / * = ? : ; , < > " ! @ #"</p>

  <div class="mb-5"><a href="https://fonts.google.com/specimen/Roboto"

class="btn2" target="_blank">Download Font Family</a></div>

   <p style="margin: 0px;"><b>Roboto Slab</b> Font Family</p>

  

   <hr>

         <p class="robotoslab"> A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>

  <p class="robotoslab"> a b c d e f g h i j k l m n o p q r s t u v w x y z</p>

   <p class="robotoslab"> 1 2 3 4 5 6 7 8 9 0 . - + / * = ? : ; , < > " ! @ #"</p>

   <div class="mb-5"><a href="https://fonts.google.com/specimen/Roboto+Slab"

class="btn2" target="_blank">Download Font Family</a></div>

        </div>

      </section>

<div class="stretch-across3" style="background-position-y:100%;!important" id="voice">

  <h1 class="text-overlay parallaxtext">Voice</h1>

</div>

<section style="margin-left:50px;min-height:45vh !important" class="resume-section p-3 p-lg-5 d-flex flex-column" id="voice">

        <div class="my-auto">

          <p>Premier is an innovative team of leaders, thinkers and doers destined to change more than your bottom line. They are out to change the world of

healthcare. We are more than a healthcare GPO, we’re the sixth man on your team, a catalytic innovation machine that is transforming healthcare.</p>

          <p class="mb-0">We are smart, but not arrogant. Premier is daring and innovative, achieving results other companies can only dream of. We are constantly

challenging the normal to achieve the exceptional. Premier is not in the technology, pharmacy or GPO industry, we are in the competency

industry. Bringing insight and solutions to problems that seem all but impossible to solve. We have a contagious excitement about the

work we do. Healthcare isn’t frozen yogurt of spandex yoga pants. There is a human-connection to the work we do because people’s lives

are at stake. Our parents, children, neighbors, friends, and people we have yet to meet, depend on a functional healthcare system and we

help make that happen. We are passionate about creating lasting change for our members to help create an unrivaled healthcare system.

Premier isn’t in real estate; we aren’t transactional in nature. Our company is full of gifted team members with a strong helper sense. Problem

solvers. Servant heart. Service-minded. Premier is tenacious, honest, ethical, ambitious, trustworthy, knowledgeable, dedicated, wellrounded,

versatile, curious, imaginative, witty, clever, resilient and compassionate. The stakes are high, and Premier is playing for keeps.</p>

        </div>

      </section>

   

    </div>

    <!-- Bootstrap core JavaScript -->

    <script src="https://www.premierinc.com/external-assets/Branding-Guide/js/jquery.min.js"></script>

    <script src="https://www.premierinc.com/external-assets/Branding-Guide/js/bootstrap.bundle.min.js"></script>

    <!-- Plugin JavaScript -->

    <script src="https://www.premierinc.com/external-assets/Branding-Guide/js/jquery.easing.min.js"></script>

    <!-- Custom scripts for this template -->

    <script src="https://www.premierinc.com/external-assets/Branding-Guide/js/resume.min.js"></script>

<!-- circle js -->

<script>var piesiteFired = 0;

$(document).ready(function() {

    var $win = $(window),

        $win_height = $(window).height(),

        // - A multiple of viewport height - The higher this number the sooner triggered.

        windowPercentage = $(window).height() * 0.9;

    $win.on("scroll", scrollReveal);

    function scrollReveal() {

        var scrolled = $win.scrollTop();

       

        ///////////////////////////////////////

        // Bar Charts scroll activate, looking for .trigger class to fire.

        $(".trigger").each(function() {

            var $this = $(this),

                offsetTop = $this.offset().top;

            if (

                scrolled + windowPercentage > offsetTop ||

                $win_height > offsetTop

            ) {

                $(this).each(function(key, bar) {

                    var percentage = $(this).data("percentage");

                    $(this).css("height", percentage + "%");

                   

                    ///////////////////////////////////////

                    //        Animated numbers

                    $(this).prop("Counter", 0).animate(

                        {

                            Counter: $(this).data("percentage")

                        },

                        {

                            duration: 2000,

                            easing: "swing",

                            step: function(now) {

                                $(this).text(Math.ceil(now));

                            }

                        }

                    );

                    //        Animated numbers

                    ///////////////////////////////////////

                });

            } else {

                ///////////////////////////////////////

                // To keep them triggered, lose this block.

                $(this).each(function(key, bar) {

                    $(this).css("height", 0);

                });

            }   

           

        });

        ///////////////////////////////////////

        // Horizontal Chart

        $(".chartBarsHorizontal .bar").each(function() {

            var $this = $(this),

                offsetTop = $this.offset().top;

            if (

                scrolled + windowPercentage > offsetTop ||

                $win_height > offsetTop

            ) {

                $(this).each(function(key, bar) {

                    var percentage = $(this).data("percentage");

                    $(this).css("width", percentage + "%");

                    ///////////////////////////////////////

                    //        Animated numbers

                    $(this).prop("Counter", 0).animate(

                        {

                            Counter: $(this).data("percentage")

                        },

                        {

                            duration: 2000,

                            easing: "swing",

                            step: function(now) {

                                $(this).text(Math.ceil(now));

                            }

                        }

                    );

                    //        Animated numbers

                    ///////////////////////////////////////

                });

   

            } else {

                ///////////////////////////////////////

                // To keep them triggered, lose this block.

                $(this).each(function(key, bar) {

                    $(this).css("width", 0);

                });

            }   

           

        });

       

        ///////////////////////////////////////

        // Radial Graphs - scroll activate

        $(".piesite").each(function() {

            var $this = $(this),

                offsetTop = $this.offset().top;

            if (

                scrolled + windowPercentage > offsetTop ||

                $win_height > offsetTop

            ) {

                if (piesiteFired == 0) {

                    timerSeconds = 3;

                    timerFinish = new Date().getTime() + timerSeconds * 1000;

                    $(".piesite").each(function(a) {

                        pie = $("#pie_" + a).data("pie");

                        timer = setInterval(

                            "stoppie(" + a + ", " + pie + ")",

                            0

                        );

                    });

                    piesiteFired = 1;

                }

            } else {

                // To keep them triggered, lose this block.

                $(".piesite").each(function() {

                    piesiteFired = 0;

                });

            }

        });

    }

    scrollReveal();

});

///////////////////////////////////////

//        The Radial Graphs

///////////////////////////////////////

// The following code is originally from the excellent pen:

// https://codepen.io/StephenScaff/pen/VYaQGB by Stephen Scaff

var timer;

var timerFinish;

var timerSeconds;

function drawTimer(c, a) {

    $("#pie_" + c).html(

        '<div class="percent"></div><div id="slice"' +

            (a > 50 ? ' class="gt50"' : "") +

            '><div class="pie"></div>' +

            (a > 50 ? '<div class="pie fill"></div>' : "") +

            "</div>"

    );

    var b = 360 / 100 * a;

    $("#pie_" + c + " #slice .pie").css({

        "-moz-transform": "rotate(" + b + "deg)",

        "-webkit-transform": "rotate(" + b + "deg)",

        "-o-transform": "rotate(" + b + "deg)",

        transform: "rotate(" + b + "deg)"

    });

    a = Math.floor(a * 100) / 100;

    arr = a.toString().split(".");

    intPart = arr[0];

    $("#pie_" + c + " .percent").html(

        '<span class="int">' +

            intPart +

            "</span>" +

            '<span class="symbol">%</span>'

    );

}

function stoppie(d, b) {

    var c = (timerFinish - new Date().getTime()) / 1000;

    var a = 100 - c / timerSeconds * 100;

    a = Math.floor(a * 100) / 100;

    if (a <= b) {

        drawTimer(d, a);

    } else {

        b = $("#pie_" + d).data("pie");

        arr = b.toString().split(".");

        $("#pie_" + d + " .percent .int").html(arr[0]);

    }

}</script>

  </body>

</html>

kineticcreative123  wrote

Hello,

I have two questions regarding my buttons and the width of the page. The page loads fine with the horizontal layout is looking as it should but there is left padding behind the side menu which enables the page to scroll left to right. How can I adjust this so this doesn't happen. I like the spacing between the blue menu bar and the page content but can't figure out by just changing the padding.


I can point you in the right direction.

The horizontal scroll is being caused by these seperator divs in your main content:

<div class="stretch-across2" style="background-position-y:100%;" id="typography">

<h1 class="text-overlay parallaxtext">Typography</h1>

</div>

You need to revise how you are deploying them.

I would give your main-content <div> (the one which wraps all your sections) a class of 'content-wrapper' and a left margin of 270px so it sits flush to the right of the blue sidebar.

<div class="content-wrapper">

<section class="resume-section p-3 p-lg-5 d-flex d-column" id="about">

.content-wrapper {

margin-left: 270px;

}

Then set the margin to zero again at 990px;

@media screen and (max-width: 990px) {

.content-wrapper {

margin-left: 0;

}

}

You just then need to figure out how you want those stretch-across2 <divs> to function without them forcing a horizontal scroll.

Views

526

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Need to stop horizontal page scroll. Issue with container size and padding.

Contributor ,
Jul 29, 2019

Copy link to clipboard

Copied

UPDATE: Figured out the buttons . Just need help with the horizontal scroll.

Hello,

I have two questions regarding my buttons and the width of the page. The page loads fine with the horizontal layout is looking as it should but there is left padding behind the side menu which enables the page to scroll left to right. How can I adjust this so this doesn't happen. I like the spacing between the blue menu bar and the page content but can't figure out by just changing the padding.

My second question is how I can have each menu item have that solid yellow block when active. I tried this but it's not working:

a:active {

  background-size: 4px 50px;

  background-color: #ffc627;

  color: #003b49;

}

Thank you for any help with this!!

Here is my code. for some reason when I try to add raw html it's not showing up.

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <meta name="description" content="">

    <meta name="author" content="">

    <title>Premier Inc. - Branding Guidelines</title>

    <!-- Bootstrap core CSS -->

    <link href="https://www.premierinc.com/external-assets/Branding-Guide/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom fonts for this template -->

    <link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:100,200,300,400,500,600,700,800,900" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">

    <link href="https://www.premierinc.com/external-assets/Branding-Guide/css/font-awesome.min.css" rel="stylesheet">

    <link href="https://www.premierinc.com/external-assets/Branding-Guide/css/devicons.min.css" rel="stylesheet">

    <link href="https://www.premierinc.com/external-assets/Branding-Guide/css/simple-line-icons.css" rel="stylesheet">

  <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab:300,400" rel="stylesheet">

    <!-- Custom styles for this template -->

    <link href="https://www.premierinc.com/external-assets/Branding-Guide/css/resume.min.css" rel="stylesheet">

<!-- new css -->

<style>

* {

  box-sizing: border-box;

}

.logocolumn {

  float: left;

  width: 250px;

  padding: 0 60px 0 0;

}

.clearspacecolumn {

  float: left;

  width: 450px;

  padding: 0 60px 0 0;

}

/* Clearfix (clear floats) */

.logorow::after {

  content: "";

  clear: both;

  display: table;

}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */

@media screen and (max-width: 500px) {

  .logocolumn {

    width: 60%;

  }

}

.yellow-line {

border-top: 8px solid #ffb819;

width: 65px;

float: left;

}

.roboto {

font-size:3rem;

text-align: left;

font-family: 'Roboto', sans-serif;

font-weight: 300;

}

.robotoslab {

font-size:3rem;

text-align: left;

font-family: 'Roboto Slab', serif;

font-weight: 300;

}

</style>

  <!-- color css -->

  <style>

  ul {

  padding: 0;

    list-style-type: none;

  }

.colorli {

  position: relative;

  display:inline-block;  

  width:200px;

  height:200px;

  list-style:none;

  margin:15px 15px 0px 0px;

  

}

.p1 {

  line-height:1.25;

  margin: 8px 25px 0px 0px;

text-align:right;

font-family: 'Lato', sans-serif;

font-size:14px;

color: #ffffff;

}

  .copyright {

  line-height:1.25;

text-align:center;

font-family: 'Lato', sans-serif;

font-size:12px;

color: #ffffff;

}

.span1 {

  color: #ffffff;

  font-weight: bold;

}

.color-1 { background-color: #003b49; }

.color-2 { background-color: #7a979f; }

.color-3 { background-color: #cad4d7; }

.color-4 { background-color: #f2f4f4; }

.color-5 { background-color: #0091b3; }

.color-6 { background-color: #8dc7d8; }

.color-7 { background-color: #d3e9ef; }

.color-8 { background-color: #ffc627; }

.color-9 { background-color: #ffe29b; }

.color-10 { background-color: #fff3d7; }

.color-11 { background-color: #000000; }

.color-12 { background-color: #e24301; }

.color-13 { background-color: #fea682; }

.white-line {

border-top: 1px solid #ffffff;

width: 80%;

margin-top: 25px;

}

.white-line2 {

border-top: 1px solid #ffffff;

width: 80%;

}

.white-line3 {

border-top: 1px solid #ffffff;

width: 80%;

margin-top: 20px;

}

  .btn2{

  border:2px solid;

color:#0091b3;

display:inline-block;

font-family: 'Roboto Slab';

font-weight:400;

font-size:16px;

line-height:40px;

text-align:center;

text-decoration:none;

width:220px;

-webkit-text-size-adjust:none;

mso-hide:all;

margin:25px 0px 25px 0px;

  }

  a:hover {

text-decoration: none;

}

</style>

  <!-- circle css -->

  <style>

.box-piesite {

  text-align: left;

  font-size: 22px;

}

.piesite {

  position: relative;

  width: 1em;

  height: 1em;

  font-size: 10em;

  cursor: default;

}

.piesite .percent {

  position: absolute;

  top: 1.1em;

  left: 0.1em;

  width: 100%;

  font-size: 0.3em;

  text-align: center;

  z-index: 2;

line-height: 1.25;

}

.piesite .percent .symbol {

  font-size: 0.5em;

  vertical-align: super;

  opacity: 0.5;

}

.piesite > #slice {

  position: absolute;

  width: 1em;

  height: 1em;

  clip: rect(0px, 1em, 1em, 0.5em);

}

.piesite > #slice.gt50 {

  clip: rect(auto, auto, auto, auto);

}

.piesite > #slice > .pie {

  position: absolute;

  border: 0.1em solid #444;

  width: 1em;

  height: 1em;

  clip: rect(0em, 0.5em, 1em, 0em);

  border-radius: 0.5em;

}

li.design .piesite > #slice > .pie {

  border-color: #0091b3;

}

li.usability .piesite > #slice > .pie {

  border-color: #003b49;

}

li.creativity .piesite > #slice > .pie {

  border-color: #ffc627;

}

.piesite > #slice > .pie.fill {

  -webkit-transform: rotate(180deg) !important;

  transform: rotate(180deg) !important;

}

.piesite.fill > .percent {

  display: none;

}

.piesite:after {

  content: '';

  display: block;

  position: absolute;

  top: 0.1em;

  left: 0.1em;

  width: 0.8em;

  height: 0.8em;

  background: #ffffff;

  border-radius: 100%;

  z-index: 1;

}

.piesite:before {

  content: '';

  display: block;

  position: absolute;

  width: 1em;

  height: 1em;

  border-radius: 0.5em;

  opacity: 0.5;

  z-index: 0;

}

.piesite:before {

  background: #b8b8b8;

}

.box-piesite ul {

  padding: 0;

}

.box-piesite ul li {

  display: inline-block;

  margin: 10px 20px;

}

</style>

  <!-- parallax css -->

  <style>

  .stretch-across {

  height: 19em;

  background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)), url('https://www.premierinc.com/external-assets/Branding-Guide/images/crayons.jpg') center center no-repeat fixed;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  margin-bottom: 2em;

}

  .stretch-across2 {

  height: 19em;

  background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)), url('https://www.premierinc.com/external-assets/Branding-Guide/images/letters.jpg') center center no-repeat fixed;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  margin-bottom: 2em;

}

  .stretch-across3 {

  height: 19em;

  background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)), url('https://www.premierinc.com/external-assets/Branding-Guide/images/voice.png') center center no-repeat fixed;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  margin-bottom: 2em;

}

.text-overlay {

  color: white;

  top: 50%;

  transform: translateY(-50%);

  margin-left: 105px;

  margin-right: auto;

  position: relative;

  text-align: left;

  width: 100%;

}

.parallaxtext {

  margin-top: 0;

  font-weight: bold;

  font-family: 'Roboto Slab', 'Times New Roman', serif;

  font-size: 3.5em;

}

</style>

  <!-- hover css -->

   <style>

:root {

  --mainColor: #ffc627;

}

a {

  background:

     linear-gradient(

       to bottom, var(--mainColor) 0%,

       var(--mainColor) 100%

     );

background-position: 0 100%;

background-repeat: repeat-x;

background-size: 4px 0px;

  color: #000;

  text-decoration: none;

  transition: background-size .2s;

}

a:hover {

  background-size: 4px 50px;

}

  a:active {

  background-size: 4px 50px;

  background-color: #ffc627;

  color: #003b49;

}</style>

  </head>

  <body id="page-top">

    <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">

      <a class="navbar-brand js-scroll-trigger" href="#page-top">

     

        <span class="d-none d-lg-block">

          <img class="img-fluid img-profile mx-auto mb-2" width="50" src="https://www.premierinc.com/external-assets/Branding-Guide/images/mobius.png" alt="">

        </span>

      </a>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

        <span class="navbar-toggler-icon"></span>

      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">

        <ul class="navbar-nav">

      

          <li class="nav-item">

            <a class="nav-link js-scroll-trigger" href="#logo">Logo</a>

          </li>

          <li class="nav-item">

            <a class="nav-link js-scroll-trigger" href="#colors">Color</a>

          </li>

       

          <li class="nav-item">

            <a class="nav-link js-scroll-trigger" href="#typography">Typography</a>

          </li>

<li class="nav-item">

            <a class="nav-link js-scroll-trigger" href="#voice">Voice</a>

          </li>

       

        </ul>

      </div>

<span  style="margin-bottom:40px" class="d-none d-lg-block">

          <img class="img-fluid img-profile mx-auto mb-2" width="150" src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_White_CMYK_Horiz_HiR..." alt=""> <p class="copyright">@ 2019 Premier Inc.</p>

        </span>

    </nav>

    <div class="container-fluid p-0">

      <section style="margin-left:50px;" class="resume-section p-3 p-lg-5 d-flex d-column" id="about">

        <div class="my-auto">

          <h1 style="padding-bottom:2rem;" class="mb-0 responsivetitle">Brand

            <span class="text-primary">Guidelines</span>

          </h1>

       

          <p class="mb-5">Welcome to our hub for partner guidelines and assets. We want to make it easy for you to integrate Premier in your creative assets while respecting our brand and legal/licensing restrictions.</p>

       

        </div>

      </section>

      <section style=" margin-bottom: 90px;margin-left:50px" class="resume-section p-3 p-lg-5 d-flex flex-column" id="logo">

        <div class="my-auto">

<hr class="yellow-line"><br>

          <p><h2 class="mb-5">Logo</h2></p>

          <div class="resume-item d-flex flex-column flex-md-row mb-5">

            <div class="resume-content mr-auto">

              <div class="subheading mb-3">Accepted Versions</div>

            

            </div>

        

          </div>

         <div class="logorow">

  <div class="logocolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_309_RGB_Horiz_HiRes...."  style="width:100%;padding-bottom:10px;">

   <p class="mb-5">PMS 309</p>

  </div>

  <div class="logocolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_Black_RGB_Horiz_HiRe..."  style="width:100%;padding-bottom:10px;">

   <p class="mb-5">Black</p>

  </div>

  <div class="logocolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_Gray_RBG_Horiz_HiRes..."  style="width:100%;padding-bottom:10px;">

   <p class="mb-5">PMS 424</p>

  </div>

<div class="logocolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_White_RGB_Horiz_HiRe..."  style="width:100%;padding-bottom:13px;">

  <p class="mb-5">White</p>

  </div>

</div><div class="subheading mb-3">Clear Space</div>

    <div class="logorow">

  <div class="clearspacecolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/Clear_Space_Print.png"  style="width:400px;padding-bottom:10px;">

   <p style="margin: 0px;"><b>Clear Space - Print</b></p>

  <p class="mb-5">In print materials, the preferred amount of clear

space around the logo is equal to the mobius.</p>

  </div>

  <div class="clearspacecolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/Clear_Space_Digital.png"  style="width:360px;padding-bottom:10px;">

   <p style="margin: 0px;"><b>Clear Space - Digital</b></p>

   <p class="mb-5">Maintaining a 8 pixel clear space is preferable.</p>

  </div>

</div>

  <div class="subheading mb-3">Minimum Logo Size</div>

    <div class="logorow">

  <div class="clearspacecolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/Minimum_Logo_Print.png"  style="width:380px;padding-bottom:10px;">

  <p style="margin: 0px;"><b>Minimum Logo Size - Print</b></p>

   <p class="mb-5">For print use, the logo should never be reduced

below the minimum size of 5.5cm x 1.2cm.</p>

  </div>

  <div class="clearspacecolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/Minimum_Logo_Digital.png"  style="width:340px;padding-bottom:10px;">

  <p style="margin: 0px;"><b>Minimum Logo Size - Digital</b></p>

   <p class="mb-5">The logo should not appear smaller than

107 px wide in digital executions.</p>

  </div>

</div>

  <div><a href="https://www.premierinc.com/external-assets/Branding-Guide/Downloads/PINC_Logos.zip"

class="btn2" id="colors">Download Logo Suite</a></div>

        </div>

      </section>

<div class="stretch-across" style="background-position-y:100%;" id="colors">

  <h1 class="text-overlay parallaxtext">Color</h1>

</div>

      <section style="margin-bottom:90px;margin-left:50px;" class="resume-section p-3 p-lg-5 d-flex flex-column" >

        <div class="my-auto">

<div class="subheading mb-3">Primary</div>

      <ul class="mb-5">

  <li class="color-1 colorli">

    <div style="padding-top: 5px;"><p class="p1"><span>CMYK<br></span>100.64.52.45</p></div>

  <div class="desc"><p class="p1"><span>RGB<br></span>0.59.73</p></div>

  <div class="desc"><p class="p1"><span>HEX<br></span>#003b49</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span>Night Shift | PMS 309 C</span></p></div>

  </li>

  <li class="color-2 colorli">

      <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>#56.31.33.1</p></div>

  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>#122.151.159</p></div>

  <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#7a979f</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span class "span1">Night Shift | 309@50</span></p></div>

  </li>

  <li class="color-3 colorli">

      <div style="padding-top: 5px;"><p class="p1" style="color:#000000"><span style="color:#000000">CMYK<br></span>20.10.12.0</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">RGB<br></span>202.212.215</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">HEX<br></span>#cad4d7</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span class "span1" style="color:#000000">Night Shift | 309@20</span></p></div>

  </li>

<li class="color-4 colorli">

      <div style="padding-top: 5px;"><p class="p1" style="color:#000000"><span style="color:#000000">CMYK<br></span>4.2.2.0</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">RGB<br></span>242.244.244</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">HEX<br></span>#f2f4f4</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">Night Shift | 309@5</span></p></div>

  </li>

  <li class="color-5 colorli">

       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>92.24.23.0</p></div>

  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>0.145.179</p></div>

  <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#0091b3</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span class "span1">Scrubs | PMS 632 C</span></p></div>

  </li>

  <li class="color-6 colorli">

       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>43.7.12.0</p></div>

  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>#141.199.216</p></div>

  <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#8dc7d8</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span class "span1">Scrubs | 632@50</span></p></div>

  </li>

  <li class="color-7 colorli">

       <div style="padding-top: 5px;"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">CMYK<br></span>16.2.4.0</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">RGB<br></span>211.233.239</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">HEX<br></span>#d3e9ef</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">Scrubs | 632@20</span></p></div>

  </ul>

<div class="subheading mb-3">Secondary</div>

  <ul class="mb-5">

  <li class="color-8 colorli">

       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>0.24.91.0</p></div>

  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>255.198.39</p></div>

  <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#ffc627</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span class "span1">Early Shift | PMS 123 C</span></p></div>

  </li>

  <li class="color-9 colorli">

       <div style="padding-top: 5px;"><p class="p1" style="color:#000000"><span style="color:#000000">CMYK<br></span>0.12.44.0</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">RGB<br></span>255.226.155</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">HEX<br></span>#ffe29b</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">Early Shift | 123@50</span></p></div>

  </li>

  <li class="color-10 colorli">

       <div style="padding-top: 5px;"><p class="p1" style="color:#000000"><span style="color:#000000">CMYK<br></span>0.4.15.0</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">RGB<br></span>255.243.215</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">HEX<br></span>#ff3d7</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">Early Shift | 123@20</span></p></div>

  </li>

  </ul>

  <div class="subheading mb-3">Tertiary</div>

  <ul class="mb-5"><li class="color-11 colorli">

       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>0.0.0.100</p></div>

  <hr class="white-line2">

<div class="desc"><p class="p1"><span class "span1">BLACK</span></p></div>

  <div class="desc"><p class="p1"><span class "span1">CMYK<br></span>65.30.35.100</p></div>

  <hr class="white-line3">

  <div class="desc"><p class="p1"><span class "span1">RICH BLACK</span></p></div>

  </li>

  <li class="color-12 colorli">

       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>6.87.100.1</p></div>

  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>226.67.1</p></div>

  <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#e24301</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span class "span1">Code Red | PMS 1665 C</span></p></div>

  </li>

  <li class="color-13 colorli">

       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>0.42.47.0</p></div>

  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>254.166.130</p></div>

  <div class   <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#fea682</p></div>

<hr class="white-line">

  <div class   <div class="desc"><p class="p1"><span class "span1">Code Red | 1665@50</span></p></div>

</li>

</ul>

<div class="subheading mb-3">Color Proportion</div>

<div class="box-piesite">

    <ul style="font-family: 'Roboto', sans-serif;">

        <li class="design">

            <div class="piesite" id="pie_0" data-pie="60"></div>

        </li>

        <li class="usability">

            <div class="piesite" id="pie_2" data-pie="30"></div>

        </li>

        <li class="creativity">

            <div class="piesite" id="pie_1" data-pie="10"></div>

        </li>

    </ul>

</div>

        </div>

      </section>

<div class="stretch-across2" style="background-position-y:100%;" id="typography">

  <h1 class="text-overlay parallaxtext">Typography</h1>

</div>

      <section style="margin-left:50px;" class="resume-section p-3 p-lg-5 d-flex flex-column">

        <div class="my-auto">

          <div class="subheading mb-3">Best Practices</div>

         <p style="margin: 0px;"><b>Font Styles</b></p>

   <p class="mb-5">Regular or Bold for headlines and subheads. Light or

Regular for body copy. Bold or Italic for emphasis.</p>

  <p style="margin: 0px;"><b>Use Cases</b></p>

   <p class="mb-5">Please refer to Premier’s Editorial Style Guide for proper usage of

uppercase, lowercase, sentence case, title case and all caps.</p>

   <p style="margin: 0px;"><b>Roboto</b> Font Family</p>

   <hr>

         <p class="roboto"> A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>

  <p class="roboto"> a b c d e f g h i j k l m n o p q r s t u v w x y z</p>

   <p class="roboto"> 1 2 3 4 5 6 7 8 9 0 . - + / * = ? : ; , < > " ! @ #"</p>

  <div class="mb-5"><a href="https://fonts.google.com/specimen/Roboto"

class="btn2" target="_blank">Download Font Family</a></div>

   <p style="margin: 0px;"><b>Roboto Slab</b> Font Family</p>

 

   <hr>

         <p class="robotoslab"> A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>

  <p class="robotoslab"> a b c d e f g h i j k l m n o p q r s t u v w x y z</p>

   <p class="robotoslab"> 1 2 3 4 5 6 7 8 9 0 . - + / * = ? : ; , < > " ! @ #"</p>

   <div class="mb-5"><a href="https://fonts.google.com/specimen/Roboto+Slab"

class="btn2" target="_blank">Download Font Family</a></div>

        </div>

      </section>

<div class="stretch-across3" style="background-position-y:100%;!important" id="voice">

  <h1 class="text-overlay parallaxtext">Voice</h1>

</div>

<section style="margin-left:50px;min-height:45vh !important" class="resume-section p-3 p-lg-5 d-flex flex-column" id="voice">

        <div class="my-auto">

          <p>Premier is an innovative team of leaders, thinkers and doers destined to change more than your bottom line. They are out to change the world of

healthcare. We are more than a healthcare GPO, we’re the sixth man on your team, a catalytic innovation machine that is transforming healthcare.</p>

          <p class="mb-0">We are smart, but not arrogant. Premier is daring and innovative, achieving results other companies can only dream of. We are constantly

challenging the normal to achieve the exceptional. Premier is not in the technology, pharmacy or GPO industry, we are in the competency

industry. Bringing insight and solutions to problems that seem all but impossible to solve. We have a contagious excitement about the

work we do. Healthcare isn’t frozen yogurt of spandex yoga pants. There is a human-connection to the work we do because people’s lives

are at stake. Our parents, children, neighbors, friends, and people we have yet to meet, depend on a functional healthcare system and we

help make that happen. We are passionate about creating lasting change for our members to help create an unrivaled healthcare system.

Premier isn’t in real estate; we aren’t transactional in nature. Our company is full of gifted team members with a strong helper sense. Problem

solvers. Servant heart. Service-minded. Premier is tenacious, honest, ethical, ambitious, trustworthy, knowledgeable, dedicated, wellrounded,

versatile, curious, imaginative, witty, clever, resilient and compassionate. The stakes are high, and Premier is playing for keeps.</p>

        </div>

      </section>

  

    </div>

    <!-- Bootstrap core JavaScript -->

    <script src="https://www.premierinc.com/external-assets/Branding-Guide/js/jquery.min.js"></script>

    <script src="https://www.premierinc.com/external-assets/Branding-Guide/js/bootstrap.bundle.min.js"></script>

    <!-- Plugin JavaScript -->

    <script src="https://www.premierinc.com/external-assets/Branding-Guide/js/jquery.easing.min.js"></script>

    <!-- Custom scripts for this template -->

    <script src="https://www.premierinc.com/external-assets/Branding-Guide/js/resume.min.js"></script>

<!-- circle js -->

<script>var piesiteFired = 0;

$(document).ready(function() {

    var $win = $(window),

        $win_height = $(window).height(),

        // - A multiple of viewport height - The higher this number the sooner triggered.

        windowPercentage = $(window).height() * 0.9;

    $win.on("scroll", scrollReveal);

    function scrollReveal() {

        var scrolled = $win.scrollTop();

      

        ///////////////////////////////////////

        // Bar Charts scroll activate, looking for .trigger class to fire.

        $(".trigger").each(function() {

            var $this = $(this),

                offsetTop = $this.offset().top;

            if (

                scrolled + windowPercentage > offsetTop ||

                $win_height > offsetTop

            ) {

                $(this).each(function(key, bar) {

                    var percentage = $(this).data("percentage");

                    $(this).css("height", percentage + "%");

                  

                    ///////////////////////////////////////

                    //        Animated numbers

                    $(this).prop("Counter", 0).animate(

                        {

                            Counter: $(this).data("percentage")

                        },

                        {

                            duration: 2000,

                            easing: "swing",

                            step: function(now) {

                                $(this).text(Math.ceil(now));

                            }

                        }

                    );

                    //        Animated numbers

                    ///////////////////////////////////////

                });

            } else {

                ///////////////////////////////////////

                // To keep them triggered, lose this block.

                $(this).each(function(key, bar) {

                    $(this).css("height", 0);

                });

            }  

          

        });

        ///////////////////////////////////////

        // Horizontal Chart

        $(".chartBarsHorizontal .bar").each(function() {

            var $this = $(this),

                offsetTop = $this.offset().top;

            if (

                scrolled + windowPercentage > offsetTop ||

                $win_height > offsetTop

            ) {

                $(this).each(function(key, bar) {

                    var percentage = $(this).data("percentage");

                    $(this).css("width", percentage + "%");

                    ///////////////////////////////////////

                    //        Animated numbers

                    $(this).prop("Counter", 0).animate(

                        {

                            Counter: $(this).data("percentage")

                        },

                        {

                            duration: 2000,

                            easing: "swing",

                            step: function(now) {

                                $(this).text(Math.ceil(now));

                            }

                        }

                    );

                    //        Animated numbers

                    ///////////////////////////////////////

                });

  

            } else {

                ///////////////////////////////////////

                // To keep them triggered, lose this block.

                $(this).each(function(key, bar) {

                    $(this).css("width", 0);

                });

            }  

          

        });

      

        ///////////////////////////////////////

        // Radial Graphs - scroll activate

        $(".piesite").each(function() {

            var $this = $(this),

                offsetTop = $this.offset().top;

            if (

                scrolled + windowPercentage > offsetTop ||

                $win_height > offsetTop

            ) {

                if (piesiteFired == 0) {

                    timerSeconds = 3;

                    timerFinish = new Date().getTime() + timerSeconds * 1000;

                    $(".piesite").each(function(a) {

                        pie = $("#pie_" + a).data("pie");

                        timer = setInterval(

                            "stoppie(" + a + ", " + pie + ")",

                            0

                        );

                    });

                    piesiteFired = 1;

                }

            } else {

                // To keep them triggered, lose this block.

                $(".piesite").each(function() {

                    piesiteFired = 0;

                });

            }

        });

    }

    scrollReveal();

});

///////////////////////////////////////

//        The Radial Graphs

///////////////////////////////////////

// The following code is originally from the excellent pen:

// https://codepen.io/StephenScaff/pen/VYaQGB by Stephen Scaff

var timer;

var timerFinish;

var timerSeconds;

function drawTimer(c, a) {

    $("#pie_" + c).html(

        '<div class="percent"></div><div id="slice"' +

            (a > 50 ? ' class="gt50"' : "") +

            '><div class="pie"></div>' +

            (a > 50 ? '<div class="pie fill"></div>' : "") +

            "</div>"

    );

    var b = 360 / 100 * a;

    $("#pie_" + c + " #slice .pie").css({

        "-moz-transform": "rotate(" + b + "deg)",

        "-webkit-transform": "rotate(" + b + "deg)",

        "-o-transform": "rotate(" + b + "deg)",

        transform: "rotate(" + b + "deg)"

    });

    a = Math.floor(a * 100) / 100;

    arr = a.toString().split(".");

    intPart = arr[0];

    $("#pie_" + c + " .percent").html(

        '<span class="int">' +

            intPart +

            "</span>" +

            '<span class="symbol">%</span>'

    );

}

function stoppie(d, b) {

    var c = (timerFinish - new Date().getTime()) / 1000;

    var a = 100 - c / timerSeconds * 100;

    a = Math.floor(a * 100) / 100;

    if (a <= b) {

        drawTimer(d, a);

    } else {

        b = $("#pie_" + d).data("pie");

        arr = b.toString().split(".");

        $("#pie_" + d + " .percent .int").html(arr[0]);

    }

}</script>

  </body>

</html>

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <meta name="description" content="">

    <meta name="author" content="">

    <title>Premier Inc. - Branding Guidelines</title>

    <!-- Bootstrap core CSS -->

    <link href="https://www.premierinc.com/external-assets/Branding-Guide/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom fonts for this template -->

    <link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:100,200,300,400,500,600,700,800,900" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">

    <link href="https://www.premierinc.com/external-assets/Branding-Guide/css/font-awesome.min.css" rel="stylesheet">

    <link href="https://www.premierinc.com/external-assets/Branding-Guide/css/devicons.min.css" rel="stylesheet">

    <link href="https://www.premierinc.com/external-assets/Branding-Guide/css/simple-line-icons.css" rel="stylesheet">

  <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab:300,400" rel="stylesheet">

    <!-- Custom styles for this template -->

    <link href="https://www.premierinc.com/external-assets/Branding-Guide/css/resume.min.css" rel="stylesheet">

<!-- new css -->

<style>

* {

  box-sizing: border-box;

}

.logocolumn {

  float: left;

  width: 250px;

  padding: 0 60px 0 0;

}

.clearspacecolumn {

  float: left;

  width: 450px;

  padding: 0 60px 0 0;

}

/* Clearfix (clear floats) */

.logorow::after {

  content: "";

  clear: both;

  display: table;

}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */

@media screen and (max-width: 500px) {

  .logocolumn {

    width: 60%;

  }

}

.yellow-line {

border-top: 8px solid #ffb819;

width: 65px;

float: left;

}

.roboto {

font-size:3rem;

text-align: left;

font-family: 'Roboto', sans-serif;

font-weight: 300;

}

.robotoslab {

font-size:3rem;

text-align: left;

font-family: 'Roboto Slab', serif;

font-weight: 300;

}

</style>

  <!-- color css -->

  <style>

  ul {

  padding: 0;

    list-style-type: none;

  }

.colorli {

  position: relative;

  display:inline-block;   

  width:200px;

  height:200px; 

  list-style:none; 

  margin:15px 15px 0px 0px;

 

   

}

.p1 {

  line-height:1.25;

  margin: 8px 25px 0px 0px;

text-align:right;

font-family: 'Lato', sans-serif;

font-size:14px;

color: #ffffff;

}

 

  .copyright {

  line-height:1.25;

text-align:center;

font-family: 'Lato', sans-serif;

font-size:12px;

color: #ffffff;

}

.span1 {

  color: #ffffff;

  font-weight: bold;

 

}

.color-1 { background-color: #003b49; }

.color-2 { background-color: #7a979f; }

.color-3 { background-color: #cad4d7; }

.color-4 { background-color: #f2f4f4; }

.color-5 { background-color: #0091b3; }

.color-6 { background-color: #8dc7d8; }

.color-7 { background-color: #d3e9ef; }

.color-8 { background-color: #ffc627; }

.color-9 { background-color: #ffe29b; }

.color-10 { background-color: #fff3d7; }

.color-11 { background-color: #000000; }

.color-12 { background-color: #e24301; }

.color-13 { background-color: #fea682; }

.white-line {

border-top: 1px solid #ffffff;

width: 80%;

margin-top: 25px;

}

.white-line2 {

border-top: 1px solid #ffffff;

width: 80%;

}

.white-line3 {

border-top: 1px solid #ffffff;

width: 80%;

margin-top: 20px;

}

  .btn2{

  border:2px solid;

color:#0091b3;

display:inline-block;

font-family: 'Roboto Slab';

font-weight:400;

font-size:16px;

line-height:40px;

text-align:center;

text-decoration:none;

width:220px;

-webkit-text-size-adjust:none;

mso-hide:all;

margin:25px 0px 25px 0px;

  }

  a:hover {

text-decoration: none;

}

</style>

  <!-- circle css -->

  <style>

.box-piesite {

  text-align: left;

  font-size: 22px;

}

.piesite {

  position: relative;

  width: 1em;

  height: 1em;

  font-size: 10em;

  cursor: default;

}

.piesite .percent {

  position: absolute;

  top: 1.1em;

  left: 0.1em;

  width: 100%;

  font-size: 0.3em;

  text-align: center;

  z-index: 2;

line-height: 1.25;

}

.piesite .percent .symbol {

  font-size: 0.5em;

  vertical-align: super;

  opacity: 0.5;

}

.piesite > #slice {

  position: absolute;

  width: 1em;

  height: 1em;

  clip: rect(0px, 1em, 1em, 0.5em);

}

.piesite > #slice.gt50 {

  clip: rect(auto, auto, auto, auto);

}

.piesite > #slice > .pie {

  position: absolute;

  border: 0.1em solid #444;

  width: 1em;

  height: 1em;

  clip: rect(0em, 0.5em, 1em, 0em);

  border-radius: 0.5em;

}

li.design .piesite > #slice > .pie {

  border-color: #0091b3;

}

li.usability .piesite > #slice > .pie {

  border-color: #003b49;

}

li.creativity .piesite > #slice > .pie {

  border-color: #ffc627;

}

.piesite > #slice > .pie.fill {

  -webkit-transform: rotate(180deg) !important;

  transform: rotate(180deg) !important;

}

.piesite.fill > .percent {

  display: none;

}

.piesite:after {

  content: '';

  display: block;

  position: absolute;

  top: 0.1em;

  left: 0.1em;

  width: 0.8em;

  height: 0.8em;

  background: #ffffff;

  border-radius: 100%;

  z-index: 1;

}

.piesite:before {

  content: '';

  display: block;

  position: absolute;

  width: 1em;

  height: 1em;

  border-radius: 0.5em;

  opacity: 0.5;

  z-index: 0;

}

.piesite:before {

  background: #b8b8b8;

}

.box-piesite ul {

  padding: 0;

}

.box-piesite ul li {

  display: inline-block;

  margin: 10px 20px;

}

</style>

  <!-- parallax css -->

  <style>

  .stretch-across {

  height: 19em;

  background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)), url('https://www.premierinc.com/external-assets/Branding-Guide/images/crayons.jpg') center center no-repeat fixed;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  margin-bottom: 2em;

}

  .stretch-across2 {

  height: 19em;

  background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)), url('https://www.premierinc.com/external-assets/Branding-Guide/images/letters.jpg') center center no-repeat fixed;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  margin-bottom: 2em;

}

 

  .stretch-across3 {

  height: 19em;

  background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)), url('https://www.premierinc.com/external-assets/Branding-Guide/images/voice.png') center center no-repeat fixed;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  margin-bottom: 2em;

}

.text-overlay {

  color: white;

  top: 50%;

  transform: translateY(-50%);

  margin-left: 105px;

  margin-right: auto;

  position: relative;

  text-align: left;

  width: 100%;

}

.parallaxtext {

  margin-top: 0;

  font-weight: bold;

  font-family: 'Roboto Slab', 'Times New Roman', serif;

  font-size: 3.5em;

}

</style>

  <!-- hover css -->

   <style>

:root {

  --mainColor: #ffc627;

}

a {

  background:

     linear-gradient(

       to bottom, var(--mainColor) 0%,

       var(--mainColor) 100%

     );

background-position: 0 100%;

background-repeat: repeat-x;

background-size: 4px 0px;

  color: #000;

  text-decoration: none;

  transition: background-size .2s;

}

a:hover {

  background-size: 4px 50px;

}

  a:active {

  background-size: 4px 50px;

  background-color: #ffc627;

  color: #003b49;

}</style>

  </head>

  <body id="page-top">

    <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">

      <a class="navbar-brand js-scroll-trigger" href="#page-top">

      

        <span class="d-none d-lg-block">

          <img class="img-fluid img-profile mx-auto mb-2" width="50" src="https://www.premierinc.com/external-assets/Branding-Guide/images/mobius.png" alt="">

        </span>

      </a>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

        <span class="navbar-toggler-icon"></span>

      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">

        <ul class="navbar-nav">

       

          <li class="nav-item">

            <a class="nav-link js-scroll-trigger" href="#logo">Logo</a>

          </li>

          <li class="nav-item">

            <a class="nav-link js-scroll-trigger" href="#colors">Color</a>

          </li>

        

          <li class="nav-item">

            <a class="nav-link js-scroll-trigger" href="#typography">Typography</a>

          </li>

<li class="nav-item">

            <a class="nav-link js-scroll-trigger" href="#voice">Voice</a>

          </li>

        

        </ul>

 

      </div>

<span  style="margin-bottom:40px" class="d-none d-lg-block">

          <img class="img-fluid img-profile mx-auto mb-2" width="150" src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_White_CMYK_Horiz_HiR..." alt=""> <p class="copyright">@ 2019 Premier Inc.</p>

        </span>

    </nav>

    <div class="container-fluid p-0">

      <section style="margin-left:50px;" class="resume-section p-3 p-lg-5 d-flex d-column" id="about">

        <div class="my-auto">

          <h1 style="padding-bottom:2rem;" class="mb-0 responsivetitle">Brand

            <span class="text-primary">Guidelines</span>

          </h1>

        

          <p class="mb-5">Welcome to our hub for partner guidelines and assets. We want to make it easy for you to integrate Premier in your creative assets while respecting our brand and legal/licensing restrictions.</p>

        

        </div>

      </section>

      <section style=" margin-bottom: 90px;margin-left:50px" class="resume-section p-3 p-lg-5 d-flex flex-column" id="logo">

        <div class="my-auto">

<hr class="yellow-line"><br>

          <p><h2 class="mb-5">Logo</h2></p>

          <div class="resume-item d-flex flex-column flex-md-row mb-5">

            <div class="resume-content mr-auto">

              <div class="subheading mb-3">Accepted Versions</div>

             

            </div>

         

          </div>

         <div class="logorow">

  <div class="logocolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_309_RGB_Horiz_HiRes...."  style="width:100%;padding-bottom:10px;">

   <p class="mb-5">PMS 309</p>

  </div>

  <div class="logocolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_Black_RGB_Horiz_HiRe..."  style="width:100%;padding-bottom:10px;">

   <p class="mb-5">Black</p>

  </div>

  <div class="logocolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_Gray_RBG_Horiz_HiRes..."  style="width:100%;padding-bottom:10px;">

   <p class="mb-5">PMS 424</p>

  </div>

<div class="logocolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_White_RGB_Horiz_HiRe..."  style="width:100%;padding-bottom:13px;">

  <p class="mb-5">White</p>

  </div>

</div><div class="subheading mb-3">Clear Space</div>

    <div class="logorow">

  <div class="clearspacecolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/Clear_Space_Print.png"  style="width:400px;padding-bottom:10px;">

   <p style="margin: 0px;"><b>Clear Space - Print</b></p>

  <p class="mb-5">In print materials, the preferred amount of clear

space around the logo is equal to the mobius.</p>

  </div>

  <div class="clearspacecolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/Clear_Space_Digital.png"  style="width:360px;padding-bottom:10px;">

   <p style="margin: 0px;"><b>Clear Space - Digital</b></p>

   <p class="mb-5">Maintaining a 8 pixel clear space is preferable.</p>

  </div>

</div>

  <div class="subheading mb-3">Minimum Logo Size</div>

    <div class="logorow">

  <div class="clearspacecolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/Minimum_Logo_Print.png"  style="width:380px;padding-bottom:10px;">

  <p style="margin: 0px;"><b>Minimum Logo Size - Print</b></p>

   <p class="mb-5">For print use, the logo should never be reduced

below the minimum size of 5.5cm x 1.2cm.</p>

  </div>

  <div class="clearspacecolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/Minimum_Logo_Digital.png"  style="width:340px;padding-bottom:10px;">

  <p style="margin: 0px;"><b>Minimum Logo Size - Digital</b></p>

   <p class="mb-5">The logo should not appear smaller than

107 px wide in digital executions.</p>

  </div>

</div>

  <div><a href="https://www.premierinc.com/external-assets/Branding-Guide/Downloads/PINC_Logos.zip"

class="btn2" id="colors">Download Logo Suite</a></div>

        </div>

      </section>

<div class="stretch-across" style="background-position-y:100%;" id="colors">

  <h1 class="text-overlay parallaxtext">Color</h1>

</div>

      <section style="margin-bottom:90px;margin-left:50px;" class="resume-section p-3 p-lg-5 d-flex flex-column" >

        <div class="my-auto">

<div class="subheading mb-3">Primary</div>

      <ul class="mb-5">

  <li class="color-1 colorli">

    <div style="padding-top: 5px;"><p class="p1"><span>CMYK<br></span>100.64.52.45</p></div>

  <div class="desc"><p class="p1"><span>RGB<br></span>0.59.73</p></div>

  <div class="desc"><p class="p1"><span>HEX<br></span>#003b49</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span>Night Shift | PMS 309 C</span></p></div>

 

  </li>

  <li class="color-2 colorli">

      <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>#56.31.33.1</p></div>

  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>#122.151.159</p></div>

  <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#7a979f</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span class "span1">Night Shift | 309@50</span></p></div>

  </li>

  <li class="color-3 colorli">

      <div style="padding-top: 5px;"><p class="p1" style="color:#000000"><span style="color:#000000">CMYK<br></span>20.10.12.0</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">RGB<br></span>202.212.215</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">HEX<br></span>#cad4d7</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span class "span1" style="color:#000000">Night Shift | 309@20</span></p></div>

  </li>

<li class="color-4 colorli">

      <div style="padding-top: 5px;"><p class="p1" style="color:#000000"><span style="color:#000000">CMYK<br></span>4.2.2.0</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">RGB<br></span>242.244.244</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">HEX<br></span>#f2f4f4</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">Night Shift | 309@5</span></p></div>

  </li>

  <li class="color-5 colorli">

       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>92.24.23.0</p></div>

  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>0.145.179</p></div>

  <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#0091b3</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span class "span1">Scrubs | PMS 632 C</span></p></div>

  </li>

  <li class="color-6 colorli">

       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>43.7.12.0</p></div>

  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>#141.199.216</p></div>

  <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#8dc7d8</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span class "span1">Scrubs | 632@50</span></p></div>

  </li>

  <li class="color-7 colorli">

       <div style="padding-top: 5px;"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">CMYK<br></span>16.2.4.0</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">RGB<br></span>211.233.239</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">HEX<br></span>#d3e9ef</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">Scrubs | 632@20</span></p></div>

  </ul>

 

<div class="subheading mb-3">Secondary</div>

  <ul class="mb-5">

  <li class="color-8 colorli">

       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>0.24.91.0</p></div>

  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>255.198.39</p></div>

  <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#ffc627</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span class "span1">Early Shift | PMS 123 C</span></p></div>

  </li>

  <li class="color-9 colorli">

       <div style="padding-top: 5px;"><p class="p1" style="color:#000000"><span style="color:#000000">CMYK<br></span>0.12.44.0</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">RGB<br></span>255.226.155</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">HEX<br></span>#ffe29b</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">Early Shift | 123@50</span></p></div>

  </li>

  <li class="color-10 colorli">

       <div style="padding-top: 5px;"><p class="p1" style="color:#000000"><span style="color:#000000">CMYK<br></span>0.4.15.0</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">RGB<br></span>255.243.215</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">HEX<br></span>#ff3d7</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">Early Shift | 123@20</span></p></div>

  </li>

  </ul>

  <div class="subheading mb-3">Tertiary</div>

  <ul class="mb-5"><li class="color-11 colorli">

       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>0.0.0.100</p></div>

  <hr class="white-line2">

<div class="desc"><p class="p1"><span class "span1">BLACK</span></p></div>

  <div class="desc"><p class="p1"><span class "span1">CMYK<br></span>65.30.35.100</p></div>

  <hr class="white-line3">

  <div class="desc"><p class="p1"><span class "span1">RICH BLACK</span></p></div>

  </li>

  <li class="color-12 colorli">

       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>6.87.100.1</p></div>

  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>226.67.1</p></div>

  <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#e24301</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span class "span1">Code Red | PMS 1665 C</span></p></div>

  </li>

  <li class="color-13 colorli">

       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>0.42.47.0</p></div>

  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>254.166.130</p></div>

  <div class   <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#fea682</p></div>

<hr class="white-line">

  <div class   <div class="desc"><p class="p1"><span class "span1">Code Red | 1665@50</span></p></div>

</li>

</ul>

<div class="subheading mb-3">Color Proportion</div>

<div class="box-piesite">

    <ul style="font-family: 'Roboto', sans-serif;">

        <li class="design">

            <div class="piesite" id="pie_0" data-pie="60"></div>

        </li>

        <li class="usability">

            <div class="piesite" id="pie_2" data-pie="30"></div>

        </li>

        <li class="creativity">

            <div class="piesite" id="pie_1" data-pie="10"></div>

        </li>

    </ul>

</div>

        </div>

      </section>

<div class="stretch-across2" style="background-position-y:100%;" id="typography">

  <h1 class="text-overlay parallaxtext">Typography</h1>

</div>

      <section style="margin-left:50px;" class="resume-section p-3 p-lg-5 d-flex flex-column">

        <div class="my-auto">

          <div class="subheading mb-3">Best Practices</div>

         <p style="margin: 0px;"><b>Font Styles</b></p>

   <p class="mb-5">Regular or Bold for headlines and subheads. Light or

Regular for body copy. Bold or Italic for emphasis.</p>

  <p style="margin: 0px;"><b>Use Cases</b></p>

   <p class="mb-5">Please refer to Premier’s Editorial Style Guide for proper usage of

uppercase, lowercase, sentence case, title case and all caps.</p>

   <p style="margin: 0px;"><b>Roboto</b> Font Family</p>

   <hr>

         <p class="roboto"> A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>

  <p class="roboto"> a b c d e f g h i j k l m n o p q r s t u v w x y z</p>

   <p class="roboto"> 1 2 3 4 5 6 7 8 9 0 . - + / * = ? : ; , < > " ! @ #"</p>

  <div class="mb-5"><a href="https://fonts.google.com/specimen/Roboto"

class="btn2" target="_blank">Download Font Family</a></div>

   <p style="margin: 0px;"><b>Roboto Slab</b> Font Family</p>

  

   <hr>

         <p class="robotoslab"> A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>

  <p class="robotoslab"> a b c d e f g h i j k l m n o p q r s t u v w x y z</p>

   <p class="robotoslab"> 1 2 3 4 5 6 7 8 9 0 . - + / * = ? : ; , < > " ! @ #"</p>

   <div class="mb-5"><a href="https://fonts.google.com/specimen/Roboto+Slab"

class="btn2" target="_blank">Download Font Family</a></div>

        </div>

      </section>

<div class="stretch-across3" style="background-position-y:100%;!important" id="voice">

  <h1 class="text-overlay parallaxtext">Voice</h1>

</div>

<section style="margin-left:50px;min-height:45vh !important" class="resume-section p-3 p-lg-5 d-flex flex-column" id="voice">

        <div class="my-auto">

          <p>Premier is an innovative team of leaders, thinkers and doers destined to change more than your bottom line. They are out to change the world of

healthcare. We are more than a healthcare GPO, we’re the sixth man on your team, a catalytic innovation machine that is transforming healthcare.</p>

          <p class="mb-0">We are smart, but not arrogant. Premier is daring and innovative, achieving results other companies can only dream of. We are constantly

challenging the normal to achieve the exceptional. Premier is not in the technology, pharmacy or GPO industry, we are in the competency

industry. Bringing insight and solutions to problems that seem all but impossible to solve. We have a contagious excitement about the

work we do. Healthcare isn’t frozen yogurt of spandex yoga pants. There is a human-connection to the work we do because people’s lives

are at stake. Our parents, children, neighbors, friends, and people we have yet to meet, depend on a functional healthcare system and we

help make that happen. We are passionate about creating lasting change for our members to help create an unrivaled healthcare system.

Premier isn’t in real estate; we aren’t transactional in nature. Our company is full of gifted team members with a strong helper sense. Problem

solvers. Servant heart. Service-minded. Premier is tenacious, honest, ethical, ambitious, trustworthy, knowledgeable, dedicated, wellrounded,

versatile, curious, imaginative, witty, clever, resilient and compassionate. The stakes are high, and Premier is playing for keeps.</p>

        </div>

      </section>

   

    </div>

    <!-- Bootstrap core JavaScript -->

    <script src="https://www.premierinc.com/external-assets/Branding-Guide/js/jquery.min.js"></script>

    <script src="https://www.premierinc.com/external-assets/Branding-Guide/js/bootstrap.bundle.min.js"></script>

    <!-- Plugin JavaScript -->

    <script src="https://www.premierinc.com/external-assets/Branding-Guide/js/jquery.easing.min.js"></script>

    <!-- Custom scripts for this template -->

    <script src="https://www.premierinc.com/external-assets/Branding-Guide/js/resume.min.js"></script>

<!-- circle js -->

<script>var piesiteFired = 0;

$(document).ready(function() {

    var $win = $(window),

        $win_height = $(window).height(),

        // - A multiple of viewport height - The higher this number the sooner triggered.

        windowPercentage = $(window).height() * 0.9;

    $win.on("scroll", scrollReveal);

    function scrollReveal() {

        var scrolled = $win.scrollTop();

       

        ///////////////////////////////////////

        // Bar Charts scroll activate, looking for .trigger class to fire.

        $(".trigger").each(function() {

            var $this = $(this),

                offsetTop = $this.offset().top;

            if (

                scrolled + windowPercentage > offsetTop ||

                $win_height > offsetTop

            ) {

                $(this).each(function(key, bar) {

                    var percentage = $(this).data("percentage");

                    $(this).css("height", percentage + "%");

                   

                    ///////////////////////////////////////

                    //        Animated numbers

                    $(this).prop("Counter", 0).animate(

                        {

                            Counter: $(this).data("percentage")

                        },

                        {

                            duration: 2000,

                            easing: "swing",

                            step: function(now) {

                                $(this).text(Math.ceil(now));

                            }

                        }

                    );

                    //        Animated numbers

                    ///////////////////////////////////////

                });

            } else {

                ///////////////////////////////////////

                // To keep them triggered, lose this block.

                $(this).each(function(key, bar) {

                    $(this).css("height", 0);

                });

            }   

           

        });

        ///////////////////////////////////////

        // Horizontal Chart

        $(".chartBarsHorizontal .bar").each(function() {

            var $this = $(this),

                offsetTop = $this.offset().top;

            if (

                scrolled + windowPercentage > offsetTop ||

                $win_height > offsetTop

            ) {

                $(this).each(function(key, bar) {

                    var percentage = $(this).data("percentage");

                    $(this).css("width", percentage + "%");

                    ///////////////////////////////////////

                    //        Animated numbers

                    $(this).prop("Counter", 0).animate(

                        {

                            Counter: $(this).data("percentage")

                        },

                        {

                            duration: 2000,

                            easing: "swing",

                            step: function(now) {

                                $(this).text(Math.ceil(now));

                            }

                        }

                    );

                    //        Animated numbers

                    ///////////////////////////////////////

                });

   

            } else {

                ///////////////////////////////////////

                // To keep them triggered, lose this block.

                $(this).each(function(key, bar) {

                    $(this).css("width", 0);

                });

            }   

           

        });

       

        ///////////////////////////////////////

        // Radial Graphs - scroll activate

        $(".piesite").each(function() {

            var $this = $(this),

                offsetTop = $this.offset().top;

            if (

                scrolled + windowPercentage > offsetTop ||

                $win_height > offsetTop

            ) {

                if (piesiteFired == 0) {

                    timerSeconds = 3;

                    timerFinish = new Date().getTime() + timerSeconds * 1000;

                    $(".piesite").each(function(a) {

                        pie = $("#pie_" + a).data("pie");

                        timer = setInterval(

                            "stoppie(" + a + ", " + pie + ")",

                            0

                        );

                    });

                    piesiteFired = 1;

                }

            } else {

                // To keep them triggered, lose this block.

                $(".piesite").each(function() {

                    piesiteFired = 0;

                });

            }

        });

    }

    scrollReveal();

});

///////////////////////////////////////

//        The Radial Graphs

///////////////////////////////////////

// The following code is originally from the excellent pen:

// https://codepen.io/StephenScaff/pen/VYaQGB by Stephen Scaff

var timer;

var timerFinish;

var timerSeconds;

function drawTimer(c, a) {

    $("#pie_" + c).html(

        '<div class="percent"></div><div id="slice"' +

            (a > 50 ? ' class="gt50"' : "") +

            '><div class="pie"></div>' +

            (a > 50 ? '<div class="pie fill"></div>' : "") +

            "</div>"

    );

    var b = 360 / 100 * a;

    $("#pie_" + c + " #slice .pie").css({

        "-moz-transform": "rotate(" + b + "deg)",

        "-webkit-transform": "rotate(" + b + "deg)",

        "-o-transform": "rotate(" + b + "deg)",

        transform: "rotate(" + b + "deg)"

    });

    a = Math.floor(a * 100) / 100;

    arr = a.toString().split(".");

    intPart = arr[0];

    $("#pie_" + c + " .percent").html(

        '<span class="int">' +

            intPart +

            "</span>" +

            '<span class="symbol">%</span>'

    );

}

function stoppie(d, b) {

    var c = (timerFinish - new Date().getTime()) / 1000;

    var a = 100 - c / timerSeconds * 100;

    a = Math.floor(a * 100) / 100;

    if (a <= b) {

        drawTimer(d, a);

    } else {

        b = $("#pie_" + d).data("pie");

        arr = b.toString().split(".");

        $("#pie_" + d + " .percent .int").html(arr[0]);

    }

}</script>

  </body>

</html>

kineticcreative123  wrote

Hello,

I have two questions regarding my buttons and the width of the page. The page loads fine with the horizontal layout is looking as it should but there is left padding behind the side menu which enables the page to scroll left to right. How can I adjust this so this doesn't happen. I like the spacing between the blue menu bar and the page content but can't figure out by just changing the padding.


I can point you in the right direction.

The horizontal scroll is being caused by these seperator divs in your main content:

<div class="stretch-across2" style="background-position-y:100%;" id="typography">

<h1 class="text-overlay parallaxtext">Typography</h1>

</div>

You need to revise how you are deploying them.

I would give your main-content <div> (the one which wraps all your sections) a class of 'content-wrapper' and a left margin of 270px so it sits flush to the right of the blue sidebar.

<div class="content-wrapper">

<section class="resume-section p-3 p-lg-5 d-flex d-column" id="about">

.content-wrapper {

margin-left: 270px;

}

Then set the margin to zero again at 990px;

@media screen and (max-width: 990px) {

.content-wrapper {

margin-left: 0;

}

}

You just then need to figure out how you want those stretch-across2 <divs> to function without them forcing a horizontal scroll.

Views

527

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 29, 2019 0
Adobe Community Professional ,
Jul 29, 2019

Copy link to clipboard

Copied

You really need to upload your work to a server space you control so we can see it in our browsers.  This is too much code to wade through in a forum for a simple layout question.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 29, 2019 0
Adobe Community Professional ,
Jul 29, 2019

Copy link to clipboard

Copied

My second question is how I can have each menu item have that solid yellow block

css

.nav-link {display:block}

.nav-link:active,

.nav-link:focus {

background-color: #ffc627 !important;

color: #003b49 !important;

}

HTML

<nav>

<ul>

<li><a class="nav-link" href="#">Some Link</a>

</li>

<li><a class="nav-link" href="#">Some Link</a>

</li>

<li><a class="nav-link" href="#">Some Link</a>

</li>

</ul>

</nav>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 29, 2019 1
Contributor ,
Jul 29, 2019

Copy link to clipboard

Copied

Thank you Nancy! Worked great. I kept js-scroll-trigger  to keep the smooth scroll and removed active and it worked.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 29, 2019 0
LEGEND ,
Jul 29, 2019

Copy link to clipboard

Copied

kineticcreative123  wrote

Hello,

I have two questions regarding my buttons and the width of the page. The page loads fine with the horizontal layout is looking as it should but there is left padding behind the side menu which enables the page to scroll left to right. How can I adjust this so this doesn't happen. I like the spacing between the blue menu bar and the page content but can't figure out by just changing the padding.


I can point you in the right direction.

The horizontal scroll is being caused by these seperator divs in your main content:

<div class="stretch-across2" style="background-position-y:100%;" id="typography">

<h1 class="text-overlay parallaxtext">Typography</h1>

</div>

You need to revise how you are deploying them.

I would give your main-content <div> (the one which wraps all your sections) a class of 'content-wrapper' and a left margin of 270px so it sits flush to the right of the blue sidebar.

<div class="content-wrapper">

<section class="resume-section p-3 p-lg-5 d-flex d-column" id="about">

.content-wrapper {

margin-left: 270px;

}

Then set the margin to zero again at 990px;

@media screen and (max-width: 990px) {

.content-wrapper {

margin-left: 0;

}

}

You just then need to figure out how you want those stretch-across2 <divs> to function without them forcing a horizontal scroll.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 29, 2019 0
Contributor ,
Jul 29, 2019

Copy link to clipboard

Copied

Hey osgood!

Thank you for the reply. I did exactly as above but I'm at a loss for the last step You just then need to figure out how you want those stretch-acroos2 <div> to function without them forcing a horizontal scroll.

You will notice I moved the scroll id so ignore. This is my new html. Sorry for not giving you a live link. I would have to upload to that iON platform that throws all the crazy code in.

I also can't figure out why my buttons are all in the active stat when first loading the page.

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <meta name="description" content="">

    <meta name="author" content="">

    <title>Premier Inc. - Branding Guidelines</title>

    <!-- Bootstrap core CSS -->

    <link href="https://www.premierinc.com/external-assets/Branding-Guide/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom fonts for this template -->

    <link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:100,200,300,400,500,600,700,800,900" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">

    <link href="https://www.premierinc.com/external-assets/Branding-Guide/css/font-awesome.min.css" rel="stylesheet">

    <link href="https://www.premierinc.com/external-assets/Branding-Guide/css/devicons.min.css" rel="stylesheet">

    <link href="https://www.premierinc.com/external-assets/Branding-Guide/css/simple-line-icons.css" rel="stylesheet">

  <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab:300,400" rel="stylesheet">

    <!-- Custom styles for this template -->

    <link href="https://www.premierinc.com/external-assets/Branding-Guide/css/resume.min.css" rel="stylesheet">

<!-- new css -->

<style>

* {

  box-sizing: border-box;

}

.logocolumn {

  float: left;

  width: 250px;

  padding: 0 60px 0 0;

}

.clearspacecolumn {

  float: left;

  width: 450px;

  padding: 0 60px 0 0;

}

/* Clearfix (clear floats) */

.logorow::after {

  content: "";

  clear: both;

  display: table;

}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */

@media screen and (max-width: 500px) {

  .logocolumn {

    width: 60%;

  }

}

.yellow-line {

border-top: 8px solid #ffb819;

width: 65px;

float: left;

}

.roboto {

font-size:3rem;

text-align: left;

font-family: 'Roboto', sans-serif;

font-weight: 300;

}

.robotoslab {

font-size:3rem;

text-align: left;

font-family: 'Roboto Slab', serif;

font-weight: 300;

}

.content-wrapper {

margin-left: 270px;

}

@media screen and (max-width: 990px) {

.content-wrapper {

margin-left: 0;

}

}

</style>

  <!-- color css -->

  <style>

  ul {

  padding: 0;

    list-style-type: none;

  }

.colorli {

  position: relative;

  display:inline-block;

  width:200px;

  height:200px;

  list-style:none;

  margin:15px 15px 0px 0px;

}

.p1 {

  line-height:1.25;

  margin: 8px 25px 0px 0px;

text-align:right;

font-family: 'Lato', sans-serif;

font-size:14px;

color: #ffffff;

}

  .copyright {

  line-height:1.25;

text-align:center;

font-family: 'Lato', sans-serif;

font-size:12px;

color: #ffffff;

}

.span1 {

  color: #ffffff;

  font-weight: bold;

}

.color-1 { background-color: #003b49; }

.color-2 { background-color: #7a979f; }

.color-3 { background-color: #cad4d7; }

.color-4 { background-color: #f2f4f4; }

.color-5 { background-color: #0091b3; }

.color-6 { background-color: #8dc7d8; }

.color-7 { background-color: #d3e9ef; }

.color-8 { background-color: #ffc627; }

.color-9 { background-color: #ffe29b; }

.color-10 { background-color: #fff3d7; }

.color-11 { background-color: #000000; }

.color-12 { background-color: #e24301; }

.color-13 { background-color: #fea682; }

.white-line {

border-top: 1px solid #ffffff;

width: 80%;

margin-top: 25px;

}

.white-line2 {

border-top: 1px solid #ffffff;

width: 80%;

}

.white-line3 {

border-top: 1px solid #ffffff;

width: 80%;

margin-top: 20px;

}

  .btn2{

  border:2px solid;

color:#0091b3;

display:inline-block;

font-family: 'Roboto Slab';

font-weight:400;

font-size:16px;

line-height:40px;

text-align:center;

text-decoration:none;

width:220px;

-webkit-text-size-adjust:none;

mso-hide:all;

margin:25px 0px 25px 0px;

  }

  a:hover {

text-decoration: none;

}

</style>

  <!-- circle css -->

  <style>

.box-piesite {

  text-align: left;

  font-size: 22px;

}

.piesite {

  position: relative;

  width: 1em;

  height: 1em;

  font-size: 10em;

  cursor: default;

}

.piesite .percent {

  position: absolute;

  top: 1.1em;

  left: 0.1em;

  width: 100%;

  font-size: 0.3em;

  text-align: center;

  z-index: 2;

line-height: 1.25;

}

.piesite .percent .symbol {

  font-size: 0.5em;

  vertical-align: super;

  opacity: 0.5;

}

.piesite > #slice {

  position: absolute;

  width: 1em;

  height: 1em;

  clip: rect(0px, 1em, 1em, 0.5em);

}

.piesite > #slice.gt50 {

  clip: rect(auto, auto, auto, auto);

}

.piesite > #slice > .pie {

  position: absolute;

  border: 0.1em solid #444;

  width: 1em;

  height: 1em;

  clip: rect(0em, 0.5em, 1em, 0em);

  border-radius: 0.5em;

}

li.design .piesite > #slice > .pie {

  border-color: #0091b3;

}

li.usability .piesite > #slice > .pie {

  border-color: #003b49;

}

li.creativity .piesite > #slice > .pie {

  border-color: #ffc627;

}

.piesite > #slice > .pie.fill {

  -webkit-transform: rotate(180deg) !important;

  transform: rotate(180deg) !important;

}

.piesite.fill > .percent {

  display: none;

}

.piesite:after {

  content: '';

  display: block;

  position: absolute;

  top: 0.1em;

  left: 0.1em;

  width: 0.8em;

  height: 0.8em;

  background: #ffffff;

  border-radius: 100%;

  z-index: 1;

}

.piesite:before {

  content: '';

  display: block;

  position: absolute;

  width: 1em;

  height: 1em;

  border-radius: 0.5em;

  opacity: 0.5;

  z-index: 0;

}

.piesite:before {

  background: #b8b8b8;

}

.box-piesite ul {

  padding: 0;

}

.box-piesite ul li {

  display: inline-block;

  margin: 10px 20px;

}

</style>

  <!-- parallax css -->

  <style>

  .stretch-across {

  height: 19em;

  background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)), url('https://www.premierinc.com/external-assets/Branding-Guide/images/Crayons.png ') center center no-repeat fixed;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  margin-bottom: 2em;

}

  .stretch-across2 {

  height: 19em;

  background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)), url('https://www.premierinc.com/external-assets/Branding-Guide/images/Logo@3x-100.jpg') center center no-repeat fixed;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  margin-bottom: 2em;

}

  .stretch-across3 {

  height: 19em;

  background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)), url('https://www.premierinc.com/external-assets/Branding-Guide/images/Voice.png') center center no-repeat fixed;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  margin-bottom: 2em;

}

.text-overlay {

  color: white;

  top: 50%;

  transform: translateY(-50%);

  margin-left: 105px;

  margin-right: auto;

  position: relative;

  text-align: left;

  width: 100%;

}

.parallaxtext {

  margin-top: 0;

  font-weight: bold;

  font-family: 'Roboto Slab', 'Times New Roman', serif;

  font-size: 3.5em;

}

</style>

  <!-- hover css -->

   <style>

:root {

  --mainColor: #ffc627;

}

a {

  background:

     linear-gradient(

       to bottom, var(--mainColor) 0%,

       var(--mainColor) 100%

     );

background-position: 0 100%;

background-repeat: repeat-x;

background-size: 4px 0px;

  color: #000;

  text-decoration: none;

  transition: background-size .2s;

}

a:hover {

  background-size: 4px 50px;

}

  .active {

  background-size: 4px 50px;

  background-color: #ffc627;

  color: #003b49 !important;

}</style>

  </head>

  <body id="page-top">

    <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">

  

   

        <span style="margin-top: 10rem !important;margin-bottom:3rem;" class="d-none d-lg-block">

          <img class="img-fluid img-profile mx-auto mb-2" width="50" src="https://www.premierinc.com/external-assets/Branding-Guide/images/mobius.png" alt="">

        </span>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

        <span class="navbar-toggler-icon"></span>

      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">

        <ul class="navbar-nav">

    

          <li class="nav-item">

            <a class="nav-link js-scroll-trigger active" href="#logo" aria-pressed="true">Logo</a>

          </li>

          <li class="nav-item">

            <a class="nav-link js-scroll-trigger active" href="#colors" aria-pressed="true">Color</a>

          </li>

     

          <li class="nav-item">

            <a class="nav-link js-scroll-trigger active" href="#typography" aria-pressed="true">Typography</a>

          </li>

<li class="nav-item">

            <a class="nav-link js-scroll-trigger active" href="#voice" aria-pressed="true">Voice</a>

          </li>

     

        </ul>

      </div>

<span  style="margin-bottom:40px" class="d-none d-lg-block">

          <img class="img-fluid img-profile mx-auto mb-2" width="150" src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_White_CMYK_Horiz_HiR..." alt=""> <p class="copyright">@ 2019 Premier Inc.</p>

        </span>

    </nav>

    <div class="content-wrapper">

  

<section class="resume-section p-3 p-lg-5 d-flex d-column" id="about">

        <div class="my-auto">

          <h1 style="padding-bottom:2rem;" class="mb-0 responsivetitle">Brand

            <span class="text-primary">Guidelines</span>

          </h1>

     

          <p class="mb-5">Welcome to our hub for partner guidelines and assets. We want to make it easy for you to integrate Premier in your creative assets while respecting our brand and legal/licensing restrictions.</p>

     

        </div>

      </section>

<div class="stretch-across2" style="background-position-y:100%;" id="logo" >

  <h1 class="text-overlay parallaxtext">Logo</h1>

</div>

      <section class="resume-section p-3 p-lg-5 d-flex flex-column">

        <div class="my-auto">

          <div class="resume-item d-flex flex-column flex-md-row mb-5">

            <div class="resume-content mr-auto">

              <div class="subheading mb-3">Accepted Versions</div>

          

            </div>

      

          </div>

         <div class="logorow">

  <div class="logocolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_309_RGB_Horiz_HiRes...."  style="width:100%;padding-bottom:10px;">

   <p class="mb-5">PMS 309</p>

  </div>

  <div class="logocolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_Black_RGB_Horiz_HiRe..."  style="width:100%;padding-bottom:10px;">

   <p class="mb-5">Black</p>

  </div>

  <div class="logocolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_Gray_RBG_Horiz_HiRes..."  style="width:100%;padding-bottom:10px;">

   <p class="mb-5">PMS 424</p>

  </div>

<div class="logocolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_White_RGB_Horiz_HiRe..."  style="width:100%;padding-bottom:13px;">

  <p class="mb-5">White</p>

  </div>

</div><div class="subheading mb-3">Clear Space</div>

    <div class="logorow">

  <div class="clearspacecolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/Clear_Space_Print.png"  style="width:400px;padding-bottom:10px;">

   <p style="margin: 0px;"><b>Clear Space - Print</b></p>

  <p class="mb-5">In print materials, the preferred amount of clear

space around the logo is equal to the mobius.</p>

  </div>

  <div class="clearspacecolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/Clear_Space_Digital.png"  style="width:360px;padding-bottom:10px;">

   <p style="margin: 0px;"><b>Clear Space - Digital</b></p>

   <p class="mb-5">Maintaining a 8 pixel clear space is preferable.</p>

  </div>

</div>

  <div class="subheading mb-3">Minimum Logo Size</div>

    <div class="logorow">

  <div class="clearspacecolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/Minimum_Logo_Print.png"  style="width:380px;padding-bottom:10px;">

  <p style="margin: 0px;"><b>Minimum Logo Size - Print</b></p>

   <p class="mb-5">For print use, the logo should never be reduced

below the minimum size of 5.5cm x 1.2cm.</p>

  </div>

  <div class="clearspacecolumn">

    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/Minimum_Logo_Digital.png"  style="width:340px;padding-bottom:10px;">

  <p style="margin: 0px;"><b>Minimum Logo Size - Digital</b></p>

   <p class="mb-5">The logo should not appear smaller than

107 px wide in digital executions.</p>

  </div>

</div>

  <div><a href="https://www.premierinc.com/external-assets/Branding-Guide/Downloads/PINC_Logos.zip"

class="btn2">Download Logo Suite</a></div>

        </div>

      </section>

<div class="stretch-across" style="background-position-y:100%;" id="colors" >

  <h1 class="text-overlay parallaxtext">Color</h1>

</div>

      <section  class="resume-section p-3 p-lg-5 d-flex flex-column">

        <div class="my-auto">

<div class="subheading mb-3">Primary</div>

      <ul class="mb-5">

  <li class="color-1 colorli">

    <div style="padding-top: 5px;"><p class="p1"><span>CMYK<br></span>100.64.52.45</p></div>

  <div class="desc"><p class="p1"><span>RGB<br></span>0.59.73</p></div>

  <div class="desc"><p class="p1"><span>HEX<br></span>#003b49</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span>Night Shift | PMS 309 C</span></p></div>

  </li>

  <li class="color-2 colorli">

      <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>#56.31.33.1</p></div>

  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>#122.151.159</p></div>

  <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#7a979f</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span class "span1">Night Shift | 309@50</span></p></div>

  </li>

  <li class="color-3 colorli">

      <div style="padding-top: 5px;"><p class="p1" style="color:#000000"><span style="color:#000000">CMYK<br></span>20.10.12.0</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">RGB<br></span>202.212.215</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">HEX<br></span>#cad4d7</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span class "span1" style="color:#000000">Night Shift | 309@20</span></p></div>

  </li>

<li class="color-4 colorli">

      <div style="padding-top: 5px;"><p class="p1" style="color:#000000"><span style="color:#000000">CMYK<br></span>4.2.2.0</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">RGB<br></span>242.244.244</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">HEX<br></span>#f2f4f4</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">Night Shift | 309@5</span></p></div>

  </li>

  <li class="color-5 colorli">

       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>92.24.23.0</p></div>

  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>0.145.179</p></div>

  <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#0091b3</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span class "span1">Scrubs | PMS 632 C</span></p></div>

  </li>

  <li class="color-6 colorli">

       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>43.7.12.0</p></div>

  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>#141.199.216</p></div>

  <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#8dc7d8</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span class "span1">Scrubs | 632@50</span></p></div>

  </li>

  <li class="color-7 colorli">

       <div style="padding-top: 5px;"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">CMYK<br></span>16.2.4.0</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">RGB<br></span>211.233.239</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">HEX<br></span>#d3e9ef</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">Scrubs | 632@20</span></p></div>

  </ul>

<div class="subheading mb-3">Secondary</div>

  <ul class="mb-5">

  <li class="color-8 colorli">

       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>0.24.91.0</p></div>

  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>255.198.39</p></div>

  <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#ffc627</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span class "span1">Early Shift | PMS 123 C</span></p></div>

  </li>

  <li class="color-9 colorli">

       <div style="padding-top: 5px;"><p class="p1" style="color:#000000"><span style="color:#000000">CMYK<br></span>0.12.44.0</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">RGB<br></span>255.226.155</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">HEX<br></span>#ffe29b</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">Early Shift | 123@50</span></p></div>

  </li>

  <li class="color-10 colorli">

       <div style="padding-top: 5px;"><p class="p1" style="color:#000000"><span style="color:#000000">CMYK<br></span>0.4.15.0</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">RGB<br></span>255.243.215</p></div>

  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">HEX<br></span>#ff3d7</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">Early Shift | 123@20</span></p></div>

  </li>

  </ul>

  <div class="subheading mb-3">Tertiary</div>

  <ul class="mb-5"><li class="color-11 colorli">

       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>0.0.0.100</p></div>

  <hr class="white-line2">

<div class="desc"><p class="p1"><span class "span1">BLACK</span></p></div>

  <div class="desc"><p class="p1"><span class "span1">CMYK<br></span>65.30.35.100</p></div>

  <hr class="white-line3">

  <div class="desc"><p class="p1"><span class "span1">RICH BLACK</span></p></div>

  </li>

  <li class="color-12 colorli">

       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>6.87.100.1</p></div>

  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>226.67.1</p></div>

  <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#e24301</p></div>

  <hr class="white-line">

  <div class="desc"><p class="p1"><span class "span1">Code Red | PMS 1665 C</span></p></div>

  </li>

  <li class="color-13 colorli">

       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>0.42.47.0</p></div>

  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>254.166.130</p></div>

  <div class   <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#fea682</p></div>

<hr class="white-line">

  <div class   <div class="desc"><p class="p1"><span class "span1">Code Red | 1665@50</span></p></div>

</li>

</ul>

<div class="subheading mb-3">Color Proportion</div>

<div class="box-piesite">

    <ul style="font-family: 'Roboto', sans-serif;">

        <li class="design">

            <div class="piesite" id="pie_0" data-pie="60"></div>

        </li>

        <li class="usability">

            <div class="piesite" id="pie_2" data-pie="30"></div>

        </li>

        <li class="creativity">

            <div class="piesite" id="pie_1" data-pie="10"></div>

        </li>

    </ul>

</div>

        </div>

      </section>

<div class="stretch-across2" style="background-position-y:100%;" id="typography">

  <h1 class="text-overlay parallaxtext">Typography</h1>

</div>

      <section class="resume-section p-3 p-lg-5 d-flex flex-column">

        <div class="my-auto">

          <div class="subheading mb-3">Best Practices</div>

         <p style="margin: 0px;"><b>Font Styles</b></p>

   <p class="mb-5">Regular or Bold for headlines and subheads. Light or

Regular for body copy. Bold or Italic for emphasis.</p>

  <p style="margin: 0px;"><b>Use Cases</b></p>

   <p class="mb-5">Please refer to Premier’s Editorial Style Guide for proper usage of

uppercase, lowercase, sentence case, title case and all caps.</p>

   <p style="margin: 0px;"><b>Roboto</b> Font Family</p>

   <hr>

         <p class="roboto"> A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>

  <p class="roboto"> a b c d e f g h i j k l m n o p q r s t u v w x y z</p>

   <p class="roboto"> 1 2 3 4 5 6 7 8 9 0 . - + / * = ? : ; , < > " ! @ #"</p>

  <div class="mb-5"><a href="https://fonts.google.com/specimen/Roboto"

class="btn2" target="_blank">Download Font Family</a></div>

   <p style="margin: 0px;"><b>Roboto Slab</b> Font Family</p>

   <hr>

         <p class="robotoslab"> A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>

  <p class="robotoslab"> a b c d e f g h i j k l m n o p q r s t u v w x y z</p>

   <p class="robotoslab"> 1 2 3 4 5 6 7 8 9 0 . - + / * = ? : ; , < > " ! @ #"</p>

   <div class="mb-5"><a href="https://fonts.google.com/specimen/Roboto+Slab"

class="btn2" target="_blank">Download Font Family</a></div>

        </div>

      </section>

<div class="stretch-across3" style="background-position-y:100%;!important" id="voice">

  <h1 class="text-overlay parallaxtext">Voice</h1>

</div>

<section  class="resume-section p-3 p-lg-5 d-flex flex-column">

        <div class="my-auto">

          <p>Premier is an innovative team of leaders, thinkers and doers destined to change more than your bottom line. They are out to change the world of

healthcare. We are more than a healthcare GPO, we’re the sixth man on your team, a catalytic innovation machine that is transforming healthcare.</p>

          <p class="mb-0">We are smart, but not arrogant. Premier is daring and innovative, achieving results other companies can only dream of. We are constantly

challenging the normal to achieve the exceptional. Premier is not in the technology, pharmacy or GPO industry, we are in the competency

industry. Bringing insight and solutions to problems that seem all but impossible to solve. We have a contagious excitement about the

work we do. Healthcare isn’t frozen yogurt of spandex yoga pants. There is a human-connection to the work we do because people’s lives

are at stake. Our parents, children, neighbors, friends, and people we have yet to meet, depend on a functional healthcare system and we

help make that happen. We are passionate about creating lasting change for our members to help create an unrivaled healthcare system.

Premier isn’t in real estate; we aren’t transactional in nature. Our company is full of gifted team members with a strong helper sense. Problem

solvers. Servant heart. Service-minded. Premier is tenacious, honest, ethical, ambitious, trustworthy, knowledgeable, dedicated, wellrounded,

versatile, curious, imaginative, witty, clever, resilient and compassionate. The stakes are high, and Premier is playing for keeps.</p>

        </div>

      </section>

    </div>

    <!-- Bootstrap core JavaScript -->

    <script src="https://www.premierinc.com/external-assets/Branding-Guide/js/jquery.min.js"></script>

    <script src="https://www.premierinc.com/external-assets/Branding-Guide/js/bootstrap.bundle.min.js"></script>

    <!-- Plugin JavaScript -->

    <script src="https://www.premierinc.com/external-assets/Branding-Guide/js/jquery.easing.min.js"></script>

    <!-- Custom scripts for this template -->

    <script src="https://www.premierinc.com/external-assets/Branding-Guide/js/resume.min.js"></script>

<!-- circle js -->

<script>var piesiteFired = 0;

$(document).ready(function() {

    var $win = $(window),

        $win_height = $(window).height(),

        // - A multiple of viewport height - The higher this number the sooner triggered.

        windowPercentage = $(window).height() * 0.9;

    $win.on("scroll", scrollReveal);

    function scrollReveal() {

        var scrolled = $win.scrollTop();

    

        ///////////////////////////////////////

        // Bar Charts scroll activate, looking for .trigger class to fire.

        $(".trigger").each(function() {

            var $this = $(this),

                offsetTop = $this.offset().top;

            if (

                scrolled + windowPercentage > offsetTop ||

                $win_height > offsetTop

            ) {

                $(this).each(function(key, bar) {

                    var percentage = $(this).data("percentage");

                    $(this).css("height", percentage + "%");

                

                    ///////////////////////////////////////

                    //        Animated numbers

                    $(this).prop("Counter", 0).animate(

                        {

                            Counter: $(this).data("percentage")

                        },

                        {

                            duration: 2000,

                            easing: "swing",

                            step: function(now) {

                                $(this).text(Math.ceil(now));

                            }

                        }

                    );

                    //        Animated numbers

                    ///////////////////////////////////////

                });

            } else {

                ///////////////////////////////////////

                // To keep them triggered, lose this block.

                $(this).each(function(key, bar) {

                    $(this).css("height", 0);

                });

            }

        

        });

        ///////////////////////////////////////

        // Horizontal Chart

        $(".chartBarsHorizontal .bar").each(function() {

            var $this = $(this),

                offsetTop = $this.offset().top;

            if (

                scrolled + windowPercentage > offsetTop ||

                $win_height > offsetTop

            ) {

                $(this).each(function(key, bar) {

                    var percentage = $(this).data("percentage");

                    $(this).css("width", percentage + "%");

                    ///////////////////////////////////////

                    //        Animated numbers

                    $(this).prop("Counter", 0).animate(

                        {

                            Counter: $(this).data("percentage")

                        },

                        {

                            duration: 2000,

                            easing: "swing",

                            step: function(now) {

                                $(this).text(Math.ceil(now));

                            }

                        }

                    );

                    //        Animated numbers

                    ///////////////////////////////////////

                });

            } else {

                ///////////////////////////////////////

                // To keep them triggered, lose this block.

                $(this).each(function(key, bar) {

                    $(this).css("width", 0);

                });

            }

        

        });

    

        ///////////////////////////////////////

        // Radial Graphs - scroll activate

        $(".piesite").each(function() {

            var $this = $(this),

                offsetTop = $this.offset().top;

            if (

                scrolled + windowPercentage > offsetTop ||

                $win_height > offsetTop

            ) {

                if (piesiteFired == 0) {

                    timerSeconds = 3;

                    timerFinish = new Date().getTime() + timerSeconds * 1000;

                    $(".piesite").each(function(a) {

                        pie = $("#pie_" + a).data("pie");

                        timer = setInterval(

                            "stoppie(" + a + ", " + pie + ")",

                            0

                        );

                    });

                    piesiteFired = 1;

                }

            } else {

                // To keep them triggered, lose this block.

                $(".piesite").each(function() {

                    piesiteFired = 0;

                });

            }

        });

    }

    scrollReveal();

});

///////////////////////////////////////

//        The Radial Graphs

///////////////////////////////////////

// The following code is originally from the excellent pen:

// https://codepen.io/StephenScaff/pen/VYaQGB by Stephen Scaff

var timer;

var timerFinish;

var timerSeconds;

function drawTimer(c, a) {

    $("#pie_" + c).html(

        '<div class="percent"></div><div id="slice"' +

            (a > 50 ? ' class="gt50"' : "") +

            '><div class="pie"></div>' +

            (a > 50 ? '<div class="pie fill"></div>' : "") +

            "</div>"

    );

    var b = 360 / 100 * a;

    $("#pie_" + c + " #slice .pie").css({

        "-moz-transform": "rotate(" + b + "deg)",

        "-webkit-transform": "rotate(" + b + "deg)",

        "-o-transform": "rotate(" + b + "deg)",

        transform: "rotate(" + b + "deg)"

    });

    a = Math.floor(a * 100) / 100;

    arr = a.toString().split(".");

    intPart = arr[0];

    $("#pie_" + c + " .percent").html(

        '<span class="int">' +

            intPart +

            "</span>" +

            '<span class="symbol">%</span>'

    );

}

function stoppie(d, b) {

    var c = (timerFinish - new Date().getTime()) / 1000;

    var a = 100 - c / timerSeconds * 100;

    a = Math.floor(a * 100) / 100;

    if (a <= b) {

        drawTimer(d, a);

    } else {

        b = $("#pie_" + d).data("pie");

        arr = b.toString().split(".");

        $("#pie_" + d + " .percent .int").html(arr[0]);

    }

}</script>

  </body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 29, 2019 0
LEGEND ,
Jul 29, 2019

Copy link to clipboard

Copied

Your buttons are all in the active state as you have applied the active css class to all of the links by default. Theres  no need to do that as this will happen automatically as and when each of your sections scrolls into the browser viewport. Remove all the active classes and just use Nancys css she provided.

As for your other issue, the horizontal scrolling, l would suggest looking at the css those stretch-across divs are using and see if you can track down what attribute of the css might be causing a horizontal scroll to appear

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 29, 2019 2
Contributor ,
Jul 29, 2019

Copy link to clipboard

Copied

Fixed it. I removed "width 100%" on the text overlay style.

.text-overlay {

  color: white;

  top: 50%;

  transform: translateY(-50%);

  margin-left: 105px;

  margin-right: auto;

  position: relative;

  text-align: left;

width:100%

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 29, 2019 0
LEGEND ,
Jul 30, 2019

Copy link to clipboard

Copied

kineticcreative123  wrote

Fixed it. I removed "width 100%" on the text overlay style.

.text-overlay {

  color: white;

  top: 50%;

  transform: translateY(-50%);

  margin-left: 105px;

  margin-right: auto;

  position: relative;

  text-align: left;

width:100%

}

Good work.

When issues like that happen just try to isolate the problem to a particular element/s and then start looking at what attributes have been applied to it. If you cant visually identify the problem by looking at the attributes then just remove them, one by one, and test in the broswer each time, until you find the culprit.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 30, 2019 0
Adobe Community Professional ,
Jul 30, 2019

Copy link to clipboard

Copied

That's why browser tools (F12)  are so handy.  Inspect Element in Chrome or Firefox can easily identity the selector name and which code is effecting it.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 30, 2019 0
LEGEND ,
Jul 30, 2019

Copy link to clipboard

Copied

Can be useful especially if youre using code written by someone else or something else or your own coding is a bit rough, fortunately l rarely need to to use the html and css tools myself as l know what l write will mostly perform how l write it to perform.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 30, 2019 0
Contributor ,
Jul 31, 2019

Copy link to clipboard

Copied

Yes I use them all the time to figure stuff out! Love inspect element!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 31, 2019 0