Something System UI (Personal)

index.pug

.container
   .box
      .wrapper
         .theBox
            .inner-wrapper
               .logo-kuno 
                  h1 KUNWARI LOGO
               .desc
                  h2 PLM-CET-SIS
                  
            .lower-wrapper
               h3 Get Started!
         
         .anotherBox
            .window-buttons
               .close X
            
      

script.js

$(document).ready(function(){
   $('.lower-wrapper').click(function(){
      $('.theBox').hide();
      $('.anotherBox').show();
   });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

something-system-ui-personal.markdown

Something System UI (Personal)

A Pen by Francis Lorenz Taberdo on CodePen.

License.

style.sass

/* IMPORTS */
@import url('https://fonts.googleapis.com/css?family=Dosis|Source+Sans+Pro')

$bg: #323A45

/* RESET */
h1,
h2,
h3,
h4,
h5,
h6
   color: #fff
   font-family: 'Dosis', sans-serif

body
   color: #333
   background: #e4e4e4
   padding: 56px
   font-family: 'Source Sans Pro', sans-serif
   
.box
   min-height: 300px
   width: 100%
   background: #fff
   border-radius: 24px
   padding: 24px
   box-shadow: 0px 9px 12px #999
   
.wrapper
   display: flex

.theBox
   margin: auto
   min-height: 600px
   width: 400px
   background: $bg
   display: flex
   flex-direction: column
   color: #fff
   transition: all 0.8s ease-in-out
   
   .inner-wrapper
      flex: 2
   
   .desc
      text-align: center
      font-family: 'Dosis', sans-serif
   
   .logo-kuno
      height: 250px
      width: 250px
      background: #fff
      border-radius: 100%
      margin: 50px auto 0px
      display: flex
      
      h1
         margin: auto
         text-align: center
         font-weight: 600
         font-family: 'Source Sans Pro', sans-serif
         color: #333
         
   .lower-wrapper
      height: 70px
      width: 100%
      background: #1FBBA6
      display: flex
      cursor: pointer
      
      h3
         margin: auto
         
.anotherBox
   width: 100%
   height: 400px
   background: $bg
   display: none
   transition: all 0.8s ease-in-out
      
   .window-buttons
      height: 70px
      width: 100%
      background: transparent
      display: flex
      flex-direction: row
      align-items: center
         
      .close
         color: #fff
         
         

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />