Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!doctype html>
<html class="no-js" lang="">
<!-- 
                RED HAT SINGLE SIGN ON FORM         
                    `.``     .-..`                          
                   ://///:--///////:-.`                     
                  ://///////////////////:-`                 
                 ./////////////////////////:                
                `///////////////////////////-               
                :////////////////////////////`              
                /////////////////////////////-              
       `..-::/: `:////////////////////////////              
     `:////////   `-//////////////////////////.             
    `//////////:`    `-://////////////////////-`            
    `////////////-`      `.-:////////////////-`//-`         
     ://///////////:.          ``...----...`   :////.       
      -///////////////:-.`                    -//////:      
       `://////////////////:--.           .-://///////:     
         `-////////////////////////////////////////////`    
            `-/////////////////////////////////////////`    
               `.:////////////////////////////////////.     
                   `.-://///////////////////////////:`      
                        ``.-:////////////////////:.`        
                                ```-://///////```             
-->
<head>
  <meta charset="utf-8">
  <title>Red Hat Sign-In</title>
  <meta name="description" content="sign-in page for Red Hat employees">
  <meta name="viewport"    content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#cc0000">
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
 
<svg xmlns="http://www.w3.org/2000/svg" class="logo" viewBox="0 0 850 240">
  <path id="brim" d="M230.2 110.6c.1-1.6-.1-3.1-.4-4.5l-9.6-41.5c-2.2-9.2-4.2-13.3-20.1-21.4-12.5-6.3-39.6-16.8-47.6-16.8-7.5 0-9.6 9.5-18.6 9.5-9 0-14.9-7-23.1-7-8.1 0-12.7 5.2-16.5 15.9 0 0-10.8 30.4-12.2 34.9a10 10 0 0 0-.3 2.5c0 11.8 45.8 50.7 109 50.7 16 0 39.4-3.2 39.4-22.3zm2.4 7.5a72 72 0 0 1 2.2 13c0 18-20.2 28-46.8 28-60 0-112.4-35.1-112.4-58.4 0-3.3.7-6.5 2-9.6C56.2 92.5 28 96.5 28 121c0 40.4 95.6 90.2 171.5 90.2 58 0 72.7-26.3 72.7-47.1 0-16.3-14-34.8-39.5-45.9"/>
  <path id="band" d="M232.7 118.2a58 58 0 0 1 2.2 13c0 18-20.2 28-46.8 28-60 0-112.5-35.1-112.5-58.4 0-3.3.6-6.5 2-9.6l4.6-11.4-.3 2.4c0 12 46.6 50.7 109 50.7 15.9 0 39.3-4.1 39.3-22.3 0-1.6-.1-3.1-.4-4.5z"/>
  <path id="type" d="M771.2 144.7c0 15.3 9.2 22.8 26 22.8a68 68 0 0 0 15.3-2.2v-17.7a31.8 31.8 0 0 1-9.9 1.5c-6.9 0-9.4-2.2-9.4-8.7v-27.2h20V95h-20V71.9l-22 4.7V95h-14.4v18.2h14.4v31.5zm-61.8 23c7.7 0 13.9-1.6 19.7-5.5v4.3h21.6v-45.8c0-17.5-11.7-27-31.3-27a79 79 0 0 0-33.4 7.8l7.8 16.1a57 57 0 0 1 21.7-5.7c9 0 13.6 3.5 13.6 10.7v3.5a61 61 0 0 0-16.2-2c-18.4 0-29.5 7.7-29.5 21.5 0 12.5 10 22.1 26 22.1zm-5.2-22.6c0-4.7 4.8-7 11.9-7 4.8 0 9.1.7 13 1.6v9.2c-4 2.3-8.8 3.4-13.6 3.4-7.1 0-11.3-2.7-11.3-7.2zm-112.4 21.4h23.3v-37H654v37h23.3V71.9H654v36.3h-38.9V71.9h-23.3v94.6zm-54.8 0h21.6V67.1L536.7 72v26.9a36.2 36.2 0 0 0-18.2-4.8 36.6 36.6 0 0 0-37.2 36.7 36.4 36.4 0 0 0 36.5 36.8 32 32 0 0 0 19.2-6.3v5.3zm-34.2-35.8a18 18 0 0 1 18.8-18.1c5.9 0 11.3 2 15.1 5.5v25c-3.9 3.8-9 5.7-15.1 5.7a18.1 18.1 0 0 1-18.8-18.1zm-101.3.1c0 20.8 17 37.1 38.9 37.1 12.1 0 20.8-3.3 29.9-10.9l-14.5-12.8a19.1 19.1 0 0 1-14.3 5.4c-8.1 0-14.7-4.5-17.6-11.3h51v-5.5c0-22.7-15.3-39-36.1-39-21 0-37.3 16.2-37.3 37zm36.9-19.2c6.9 0 12.7 4.5 15 11.4h-29.9c2.2-7.2 7.6-11.4 14.9-11.4zm-121 54.9h23.3V132h17.7l17.8 34.5h26l-20.7-37.8a29 29 0 0 0 17.7-26.7c0-17-13.4-30.1-33.4-30.1h-48.4v94.6zm46.3-74.8c7.7 0 12 5 12 10.7 0 5.8-4.3 10.7-12 10.7h-23V91.7h23z"/>
</svg>

  
<form 
id="login_form" 
name="login_form" 
autocomplete="off"
method="post"
enctype="application/x-www-form-urlencoded" 
onsubmit="javascript:stripspaces(this)" >
        
  
  
  
<input type="text"  
id="username" 
class="username"
name="username" 
size="20" 
autocapitalize="off"
autocorrect="off" 
autocomplete="on"  
autofocus="on"
required />


<label for="username">Username</label> <small>Red Hat ID</small>  <svg viewbox="0 0 10 10" ><use xlink:href="#user" /> <use xlink:href="#fed" class="fedora" /> <use xlink:href="#burst" class="flash"  /></svg>


<input 
   id="password" 
 type="password" 
 name="password"
autocorrect="off" 
autocomplete="off"  
autocomplete="new-password"
value=""  
size="20"
required>
 
<label for="password">Password</label> <small>PIN + Token</small> <svg viewbox="0 0 10 10"><use xlink:href="#pad" /><use class="flash" xlink:href="#burst" /><use class="lock" xlink:href="#lock" />
</svg>


  <button id="submit" type="submit" name="submit"  >Log In</button>
 
   
<span class="note" id="note">NOTE: You must close your browser or clear your cookies to completely log out.</span>
  
  
  <svg xmlns="http://www.w3.org/2000/svg" 
       class="hbox" viewBox="0 0 200 40">
      <rect  x=".5" y=".5" ry="3" rx="3" width="199" height="42" />
  </svg>
</form>



<svg class="hide">
  
    <defs>
   
   
 
      

  <g id="padlock"> <path id="pad" d="m 3,5.5 5,0 0,4 -5,0 z" /> <path id="lock" d="m 3,5.5 0,-2 c 0,-3 4,-3 4,-0.25 L 7,4 "/>  </g>
    
  <path id="fed" d="M7.8 3.8c-.7.6-3.5.6-4.4-.1-.3-.2 4.8-.2 4.4.1zM7 3.5c-.4-.7-.3-2-1.5-1.5-1-.5-1 .7-1.5 1.5"  />
      
  <path id="user" d="M5.5 5.8c-2 0-2-3 0-3 2.3 0 2 3 0 3zm.8-.3c1.2 0 2.2 1 2.2 2.3v1.7h-6V7.7c0-1.2 1-2.2 2.3-2.2"  />
  <path id="burst" d="m 5.47,0 v 2.19 m 4.38,2.19 h -2.2 m -6.55,0 H 3.28 M 2.38,1.28 3.92,2.83 M 8.56,1.28 7.02,2.83" />
    

  </defs>
</svg>

  


</body> 
<script>
</script>



              
            
!

CSS

              
                :root {
  font-size: 1.25rem;
  user-select: none;
}

:root {
  font-family: "Red Hat Text", sans-serif;
  --brand: #e00;
  --bg: #fff;
  --fg: #000811;
  --mid: #999;
  outline: none;
}

*,:before,:after{box-sizing:border-box; outline:0}

*{}
body {
  background-color: var(--bg);
  background-color:#fafafa;
  color: var(--fg);
  overscroll-behavior: none;
  /* display: flex;*/
  flex-direction: column;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  text-align: center;
  display: flex;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #050505;
    --fg: #ddd;
    --mid: #555;
  }
  body{background-color:#050505}
  #band {
    fill: transparent;
  }
  form:before {
    opacity: 0.2 !important;
  }
}



body::before,
body::after {
  content: "";
  /*  flex: 1; */
}

form {
  position: relative;

  display: block;
  border-radius: 0.4rem;
  box-shadow: 0 0.5rem 0.75rem -0.75rem rgba(0, 0, 0, 0.5);

  width: 20rem;
  margin: 0 auto;
  min-height: 4rem;
}

form:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--mid);
  opacity: 0.085;
  z-index: 0;

  border-radius: 0.4rem;
}

/* BEGIN GHETTO RESET */
*,
*:before,
*:after {
  box-sizing: border-box;
  padding: 0;
  appearance: none;
  font-size: 1rem;
  font-weight: 300;
  font-family: "Red Hat Text", sans-serif;
  border: 0;
  box-shadow: 0;
  pointer-events: none;

  text-rendering: optimizelegibility;
}
input {appearance:none;
  pointer-events: all;
  color: currentcolor;
  cursor: pointer;
  box-shadow: none;
  outline:0 !important;
}


small {
  color: var(--mid);
  z-index: 1;
}

:valid + label,
:focus + label {
  z-index: 4;

  transform-origin: 2.5rem 0;
  animation: rise 0.45s ease-out forwards;
   transform: scale(0.75) translate(0, -1rem);
}

@keyframes rise {
  0% {
    transform: scale(1) translate(0, -.5rem);
    color: currentcolor; opacity:0;
  }
  100% {
    transform: scale(0.75) translate(0, -1rem);
  }
}



:valid + label {
  color: var(--mid);
}
:focus + label {
  color: var(--brand);
}

:focus {
  outline: 0;
}

::selection {
  color: #fff;
  background: rgba(238, 0, 0, 0.99);
}

::-moz-focus-inner {
  border: 0;
  outline: 0;
}

label {
  font-weight: 400;
  color: var(--mid);
}
input,
label,
svg,
small {
  width: 10rem;
  height: 4rem;
  line-height: 4.5rem;
  position: absolute;
  padding: 0;
  display: block;
  margin: 0 auto;
  text-indent: 0;
  text-align: left;
}

input[type="text"]:not(:focus),
input[type="password"]:not(:focus) {
}

/* END GHETTO RESET */
[type="submit"] {
  background-color: var(--brand);
  color: #fff;
  border-radius: 0 0 0.4rem 0.4rem;
  text-align: center;
  background-image: linear-gradient(#f00, #c00);
  line-height: 4rem;
  width: 100%;
  position: relative;
  display:block;
  transition: all 0.24s ease;
  overflow: hidden;
  position: absolute;
  bottom: -4rem;
}


[type="submit"]:after{content:""; display:block; position:absolute; height: 4rem; top:0; 
  left: 50%; margin-left: -4rem; transform: skew(-45deg) translate(-200%, 0); background-color:#f00; width: 8rem; transition: all .5s ease;}

[type="submit"]:focus:after{transform: skew(-45deg) translate(200%, 0); opacity:0}
/*hide submit button until fields have input*/
:not(:valid) ~ [type="submit"] {
  opacity: 0;
  transform: translate(0, 0.3rem);
  z-index: 0;
}

:valid ~ :valid ~ [type="submit"] {
  height: 4rem;
  margin-top: 4rem;
  opacity: 1;

  transform: translate(0, -0.1rem);
  box-shadow: 0 0.5rem 0.5rem -0.5rem rgba(0, 0, 0, 0.3);
  transition: all 0.5s cubic-bezier(0.3, 0.2, 0.2, 1);
}

[type="submit"]:focus {
  box-shadow:  
    0 0.5rem 0.5rem -0.5rem rgba(0, 0, 0, 0.3) !important;
}
 
.note {
  position: fixed;
  bottom: 1em;
  left: 0;
  color: var(--mid);
  width: 100%;
  font-size: 0.5em;
  z-index: -1;
}

small {
  opacity: 0;
  font-weight: 200;
}
:focus:not(:valid) + label + small {
  opacity: 0.5;
  transition: opacity 1s ease 1s;
}

label,
small {
  text-indent: 2.75rem;
}

[type="text"],
[type="password"] {
  text-indent: 2.75rem;
  text-align: left;
  background-color: transparent;
  line-height: 4rem;
  padding-top: 0.5rem;
  top: 0; /*
background-image: linear-gradient(145deg,  transparent, rgba(0,0,0,0.035) );*/
}

[type="text"] {
  border-radius: 0 0 0;
}

[type="text"]:focus,
[type="password"]:focus {
  /* box-shadow:  0 -.15rem var(--brand);*/
  transition: box-shadow 0.4s ease;
  background-image: none;
  background-color: var(--bg);
  box-shadow: 0 .5rem .5rem -.4rem rgba(0,0,0,0.4)
}

[type="password"],
[type="password"] + label,
[type="password"] + label + small {
  right: 0;
}

[type="password"] + label + small + svg {
  left: 10.75rem;
}

/*
Portrait mode for phones and sidebars 
*/

@media screen and (max-width: 440px) {
  :root {
    font-size: 1rem;
  }

  form {
    min-height: 8rem;
    width: 10rem;
  }

  [type="submit"] {
    margin-top: 4rem; 
    position: relative; 
    height:3rem;
    line-height:3rem;
  }

  :valid ~ :valid ~ [type="submit"] {height:3rem; line-height:3rem;}
  [type="text"]:focus,
  [type="password"]:focus {
    box-shadow: 0 0.1em 0 var(--brand);
    z-index: 3;
  }

  [type="password"],
  [type="password"] + label,
  [type="password"] + label + small,
  [type="password"] + label + small + svg {
    top: 4rem;
  }

  [viewbox="0 0 10 10"] {
    left: 0.25rem;
  }

  [type="password"] + label + small + svg {
    left: 0.25rem;
    top: 5.5rem;
  }
}

@media (min-width: 300px) and (orientation: landscape) {
  .hbox {
    display: block !important;
    width: 100%;
    height: 4rem;
    top: 0;
    fill: none;
    stroke-width: 1;
    stroke: var(--mid);
    stroke-dasharray: 0 468;
    stroke-dashoffset: -96;
    transition: all 0.5s ease;
  }

  [type="text"]:focus ~ .hbox,
  [type="password"]:focus ~ .hbox {
    stroke-dasharray: 138 334;
    stroke-dashoffset: 42;
    stroke: var(--brand);
  }

  [type="submit"]:focus ~ .hbox {
    stroke-dashoffset: -300;
  }

  [type="password"]:focus ~ .hbox {
    stroke-dashoffset: -96;
  }

  /*field outline*/
}

small + svg {
  stroke: var(--mid);
  color: var(--mid);
}
input:focus + label + small + svg,
input:focus + label + small + svg use {
  stroke: var(--brand);
  color: var(--brand);
}
.fedora {
  fill: currentcolor !important;
}

/* icons*/

#burst {
  stroke: var(--mid);
}

#fed,
#user,
#lock,
#pad,
#burst,
[viewbox="0 0 10 10"] use {
  fill: transparent;
  stroke-width: 1px;
}
#fed {
  fill: currentcolor !important;
}
input + label + small + svg {
  text-align: left;
  z-index: 3;
  height: 1.25rem;
  width: 1.25rem;
  left: 0.5rem;
  top: 1.5rem;
}

.fedora {
  transform: translate(0, -1.5px);

  opacity: 0;
}

.lock {
  transform: translate(0, 0px);
}

[type="password"]:valid ~ svg .lock {
  transition: transform 0.5s ease;
  transform: translate(0, 1.25px);
}

input[type="text"]:valid ~ svg .fedora {
  transform: translate(0, -0.7px);
  transition: opacity 0.2s ease, transform 0.35s ease;
  opacity: 1;
}

svg use {
  fill: none;
}
#fed {
  fill: auto !important;
}

.logo {
  width: 100%;
  position: relative;
  margin: 1rem auto;
  width: 100%;
}
#brim {
  fill: var(--brand);
}
#type {
  fill: currentcolor;
}

.flash {
  stroke-dasharray: 1 5;
  stroke-dashoffset: -4;
  stroke-linecap: round;
  opacity: 0;
}

:focus + label + small + svg .flash {
  stroke-dashoffset: 1;
  transition: all 0.6s ease-out;
  opacity: 1;
  stroke-linecap: round;
}

[type="text"] {
  user-select: all;
}

.logo {
  height: 2.5rem;
}

/*helper objects */
.hbox {
  display: none;
}

@media (max-height: 300px) and (orientation: landscape) {
  body {
    overflow-y: auto;
  }

  .hbox {
    display: none;
  }
  form {
    .note,
    .logo {
      display: none;
    }
  }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  transition: background-color 50000s ease-in-out 50000s;
  font-family: "Red Hat Text", sans-serif !important;
  box-shadow: inset 0 0 0 10rem var(--bg); z-index:3;
}

input:-webkit-autofill:hover + label + small {
  display: none !important;
}

              
            
!

JS

              
                  
              
            
!
999px

Console