Staff Portal

In this example below you will see how to do a Staff Portal with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by SirAbe, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright SirAbe ©
  • HTML
  • CSS
  • JavaScript
    <div class="navbar">
  <div class='HomeButton'>
      <a href="/home">
        <b><h3>Home</h3></b>
      </a>
  </div>
  <div class='ReturnButton'>
      <a href="/back">
        <b><h3>Return</h3></b
      </a>
  </div>
  <div class='container'>
    <h1>
    Staff Portal
  </h1>
    <center>
      <p>
        Welcome to the Staff Portal page, where you can find all the information, documents or forms you will need as a staff member. If you have any issues please contact a senior staff member.
      </p>
    </center>
    <div class="butwn-container">
      <a href="/comm"><div class='butwn -salmon center'>Communication Policy</a></div>

      <a href="/values"><div class='butwn -salmon center'>Core Values</a></div>

      <a href="/staffsupport"><div class='butwn -salmon center'>Staff Support</a></div>

      <a href="/trello"><div class='butwn -salmon center'>Staff Trello</a></div>

    </div>
  </div>

/*Downloaded from https://www.codeseek.co/SirAbe/staff-portal-BKwdLX */
    @import url(https://fonts.googleapis.com/css?family=Roboto:400,700,500);
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-image: url('http://theartmad.com/wp-content/uploads/2015/09/Ocean-Waves-Wallpaper-Tumblr-4.jpg');
  opacity: 0.8;
  filter: alpha(opacity=40);
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 700;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 100vh;
  line-height: 1;
  box-sizing: border-box;
}

body.linked p {
  color: rgba(51, 48, 48, 0.3);
}

h1 {
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-size: 32px;
  color: #333030;
  font-weight: 700;
}

h1 span {
  font-weight: 400;
}

p {
  margin: 0 auto;
  font-weight: 400;
  color: rgba(51, 48, 48, 0.6);
  max-width: 460px;
  text-align: center;
  line-height: 1.5;
  -webkit-transition: color 180ms ease;
  transition: color 180ms ease;
}

a,
a:visited {
  color: #2b90d9;
  text-decoration: none;
  font-weight: 500;
}

a:hover,
a:visited:hover {
  text-decoration: underline;
}

.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  padding: 30px;
  background: whitesmoke;
}

.butwn-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 60px auto;
}

.butwn {
  border: 0 none;
  border-radius: 24px;
  padding: 12px 18px;
  margin: 10px;
  cursor: pointer;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 160px;
  -ms-flex: 0 0 160px;
  flex: 0 0 160px;
  text-align: center;
  line-height: 1.3;
  font-size: 14px;
  color: #fff;
  text-transform: none;
  font-weight: 500;
  -webkit-transition: all 60ms ease-in-out;
  transition: all 60ms ease-in-out;
}

.butwn:hover {
  opacity: .95;
  -webkit-transition: all 10ms ease;
  transition: all 10ms ease;
}

.butwn:active {
  opacity: .75;
  -webkit-transform: scale(0.97);
  transform: scale(0.97);
  -webkit-transition: all 10ms ease;
  transition: all 10ms ease;
}

.butwn.-salmon {
  background: transparent;
  border: 2px solid #ff4e4e;
  color: #ff4e4e;
}

.butwn.-border {
  background: transparent;
  border: 2px solid #2b90d9;
  color: #2b90d9;
}

a:hover {
  text-decoration: none;
  color: white;
}

page-footer {
  opacity: 1;
  filter: alpha(opacity=40)
}

.navbar {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  background: #2E5894;
  height: 70px;
  transition: 300ms height ease-in-out, 300ms background ease-in-out;
  z-index: 999999;
}

.navbar h3 {
  color: #F0FFFF;
  font-family: 'Roboto', sans-serif;
}

.navbar h3:hover {
  color: whitesmoke;
  transition: 300ms ease-in-out;
}

.HomeButton {
  float: left;
}

.ReturnButton {
  float: right;
}

.buttons {
  display: none;
}

.butwn.-salmon a {
  opacity: 0.8;
  filter: alpha(opacity=40);
  color: #ff4e4e;
}

.butwn.-salmon a:hover {
  opacity: 0.5;
  transition: 300ms ease-in-out;
}


/*Downloaded from https://www.codeseek.co/SirAbe/staff-portal-BKwdLX */
    

Comments