Atlantis UI Kit

In this example below you will see how to do a Atlantis UI Kit with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by nickcomito, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright nickcomito ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Atlantis UI Kit</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <section class="color-palette">
  <div class="swatch bg-primary"></div>
  <div class="swatch bg-secondary"></div>
  <div class="swatch bg-tertiary"></div>
  <div class="swatch bg-quaternary"></div>
  <div class="swatch bg-dark"></div>
  <div class="swatch bg-light"></div>
</section>

<section class="buttons">
  <button class="primary">Button</button>
  <button class="secondary">Button</button>
  <button class="tertiary">Button</button>
  <button class="disabled">Disabled</button>
</section>

<section class="input">
  <input type="text" placeholder="Text">
  <input type="text" class="search" placeholder="Search">
  <select>
    <option selected="selected" disabled="disabled">Select</option>
    <option>Option One</option>
    <option>Option Two</option>
    <option>Option Three</option>
    <option>Option Four</option>
    <option>Option Five</option>
  </select>
</section>

<section class="textarea">
  <textarea>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum.</textarea>
</section>

<section class="radios">
  <div class="radio-option whitespace">
    <input type="radio" id="radio-1" name="radio">
    <label for="radio-1">Radio option</label></div>
  <div class="radio-option  whitespace">
    <input type="radio" id="radio-2" name="radio">
    <label for="radio-2">Radio option</label></div>
  <div class="radio-option whitespace">
    <input type="radio" id="radio-3" name="radio">
    <label for="radio-3">Radio option</label></div>
</section>

<section class="checkboxes">
  <div class="checkbox-option whitespace"><input type="checkbox" id="checkbox-1" name="checkbox"><label for="checkbox-1">Checkbox option</label></div>
  <div class="checkbox-option  whitespace"><input type="checkbox" id="checkbox-2" name="checkbox"><label for="checkbox-2">Checkbox option</label></div>
  <div class="checkbox-option  whitespace"><input type="checkbox" checked="checked" id="checkbox-3" name="checkbox"><label for="checkbox-3">Checkbox option</label></div>
</section>

<div class="toggle off whitespace">
  <!--<a href="#" class="toggler off"><span>off</span></a>-->
  <a></a>
  <span></span>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/nickcomito/atlantis-ui-kit-zvwRgW */
.bg-primary {
  background-color: #5bc1c2;
}

.bg-secondary {
  background-color: #b2e5dc;
}

.bg-tertiary {
  background-color: #3d565b;
}

.bg-quaternary {
  background-color: #edcb55;
}

.bg-dark {
  background-color: #4b5251;
}

.bg-light {
  background-color: #f1f1f1;
}

.whitespace {
  margin: 10px;
}

* {
  font-family: helvetica-neue, helvetica, arial, sans-serif;
}

.icon {
  width: 32px;
  height: 32px;
}

section {
  clear: both;
  width: 100%;
}

.swatch {
  float: left;
  height: 75px;
  margin: 10px;
  width: 75px;
}

label {
  color: #555;
  font-family: helvetica-neue, helvetica, arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
}

input,
select,
textarea,
button {
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 3px;
  color: #555;
  font-size: 13px;
  font-weight: 500;
  margin: 10px;
  outline: 0;
  padding: 10px;
  /* firefox 19+ */
  /* ie */
}
input::-webkit-input-placeholder,
select::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
button::-webkit-input-placeholder {
  color: #999;
}
input::-moz-placeholder,
select::-moz-placeholder,
textarea::-moz-placeholder,
button::-moz-placeholder {
  color: #999;
}
input:-ms-input-placeholder,
select:-ms-input-placeholder,
textarea:-ms-input-placeholder,
button:-ms-input-placeholder {
  color: #999;
}
input:-moz-placeholder,
select:-moz-placeholder,
textarea:-moz-placeholder,
button:-moz-placeholder {
  color: #999;
}
input:hover,
select:hover,
textarea:hover,
button:hover {
  background-color: #fafafa;
}
input:focus, input:active,
select:focus,
select:active,
textarea:focus,
textarea:active,
button:focus,
button:active {
  background-color: #fff;
  box-shadow: 0 0 0 1px #5bc1c2;
  color: #222;
}

button {
  border: 0;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 30px;
  text-transform: uppercase;
}
button:hover {
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all .1s ease-in-out;
}
button:active {
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: 0;
}
button.primary {
  background: #5bc1c2;
}
button.primary:hover {
  background: #6ec8c9;
}
button.secondary {
  background: #edcb55;
  color: #7e6b29;
}
button.secondary:hover {
  background: #efd26c;
}
button.tertiary {
  background: transparent;
  box-shadow: inset 0 0 0 2px #4b5251;
  color: #4b5251;
}
button.tertiary:hover {
  box-shadow: inset 0 0 0 2px #5bc1c2;
  color: #5bc1c2;
}
button.disabled {
  background: #ccc;
  box-shadow: none;
  color: #999;
}

input.search {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJGaWxsZWRfT2xkX0ljb25zIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiDQoJIHk9IjBweCIgdmlld0JveD0iMCAwIDY0IDY0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2NCA2NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6IzVCNUI1Qjt9DQo8L3N0eWxlPg0KPGc+DQoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTI0LDQ4YzUuNywwLDEwLjktMiwxNS01LjNsMjAuNCwyMC41YzEsMSwyLjcsMSwzLjgsMGMxLTEsMS0yLjcsMC0zLjhMNDIuOCwzOC45QzQ2LDM0LjgsNDgsMjkuNiw0OCwyNA0KCQlDNDgsMTAuOCwzNy4yLDAsMjQsMFMwLDEwLjgsMCwyNEMwLDM3LjIsMTAuOCw0OCwyNCw0OHogTTI0LDUuM2MxMC4zLDAsMTguNyw4LjQsMTguNywxOC43YzAsMTAuMy04LjQsMTguNy0xOC43LDE4LjcNCgkJQzEzLjcsNDIuNyw1LjMsMzQuMyw1LjMsMjRDNS4zLDEzLjcsMTMuNyw1LjMsMjQsNS4zeiIvPg0KPC9nPg0KPGc+DQoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTAuMi0xMjAuOGMtMC40LDAtMC44LTAuMS0xLjItMC40Yy0wLjgtMC43LTAuOS0xLjktMC4zLTIuN2wxOS0yMS41YzAuNC0wLjQsMC45LTAuNywxLjUtMC43DQoJCWMwLjUsMCwxLjEsMC4yLDEuNSwwLjdsMTkuOSwyMS41YzAuNywwLjgsMC42LDItMC4yLDIuN2MtMC44LDAuNy0yLDAuNi0yLjctMC4ybC0xOC40LTE5LjdMMS43LTEyMS41DQoJCUMxLjMtMTIxLjEsMC44LTEyMC44LDAuMi0xMjAuOHoiLz4NCjwvZz4NCjxnPg0KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zOS4xLTEwNy4zYzAuNCwwLDAuOCwwLjEsMS4yLDAuNGMwLjgsMC43LDAuOSwxLjksMC4zLDIuN2wtMTksMjEuNWMtMC40LDAuNC0wLjksMC43LTEuNSwwLjcNCgkJYy0wLjUsMC0xLjEtMC4yLTEuNS0wLjdsLTE5LjktMjEuNWMtMC43LTAuOC0wLjYtMiwwLjItMi43YzAuOC0wLjcsMi0wLjYsMi43LDAuMkwyMC4xLTg3bDE3LjUtMTkuNw0KCQlDMzgtMTA3LjEsMzguNi0xMDcuMywzOS4xLTEwNy4zeiIvPg0KPC9nPg0KPC9zdmc+");
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: 95%;
}

.toggle {
  background: #ccc;
  border-radius: 32px;
  border: 1px solid;
  box-sizing: border-box;
  font-family: helvetica-neue, helvetica, arial, sans-serif;
  height: 26px;
  width: 45px;
  position: relative;
}
.toggle a {
  border-radius: 100%;
  display: block;
  height: 17px;
  left: 3px;
  text-decoration: none;
  width: 17px;
  position: absolute;
  top: 4px;
}
.toggle span:after {
  display: block;
  font-size: 8px;
  position: absolute;
  text-transform: uppercase;
  top: 8px;
}
.toggle.on {
  background: #5bc1c2;
  border-color: #5bc1c2;
}
.toggle.on a {
  background: #fff;
  left: auto;
  right: 3px;
}
.toggle.on span:after {
  content: "on";
  color: #fff;
  left: 5px;
}
.toggle.off {
  background: #f3f3f3;
  border-color: #ccc;
}
.toggle.off a {
  background: #cccccc;
  left: auto;
  left: 3px;
}
.toggle.off span:after {
  content: "off";
  color: #222;
  display: block;
  font-size: 8px;
  right: 5px;
  top: 8px;
  position: absolute;
  text-transform: uppercase;
}

textarea {
  min-width: 530px;
  min-height: 75px;
}

input[type="radio"] {
  float: left;
  border-radius: 100%;
  height: 16px;
  width: 16px;
  margin: 0 5px 0;
  padding: 0;
  position: relative;
  transition: all .2s ease-in-out;
}
input[type="radio"]:checked {
  background: #5bc1c2;
  box-shadow: inset 0 0 0 3px #fff;
}
input[type="radio"]:checked:focus {
  border-color: #5bc1c2;
}

input[type="checkbox"] {
  float: left;
  height: 16px;
  width: 16px;
  margin: 0 5px 0;
  padding: 0;
  position: relative;
  transition: all .1s ease-in-out;
}
input[type="checkbox"]:checked {
  background: #fff;
  border-color: #5bc1c2;
}
input[type="checkbox"]:checked:after {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJGaWxsZWRfT2xkX0ljb25zIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiDQoJIHk9IjBweCIgdmlld0JveD0iMCAwIDY0IDY0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2NCA2NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6IzVCNUI1Qjt9DQoJLnN0MXtmaWxsOiM1QkMxQzI7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0tNTctNS41YzUuNywwLDEwLjktMiwxNS01LjNsMjAuNCwyMC41YzEsMSwyLjcsMSwzLjgsMGMxLTEsMS0yLjcsMC0zLjhsLTIwLjQtMjAuNmMzLjMtNC4xLDUuMi05LjMsNS4yLTE0LjkNCgkJYzAtMTMuMi0xMC44LTI0LTI0LTI0cy0yNCwxMC44LTI0LDI0Qy04MS0xNi4zLTcwLjItNS41LTU3LTUuNXogTS01Ny00OC4yYzEwLjMsMCwxOC43LDguNCwxOC43LDE4LjdjMCwxMC4zLTguNCwxOC43LTE4LjcsMTguNw0KCQljLTEwLjMsMC0xOC43LTguNC0xOC43LTE4LjdDLTc1LjctMzkuOC02Ny4zLTQ4LjItNTctNDguMnoiLz4NCjwvZz4NCjxnPg0KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0wLjItMTIwLjhjLTAuNCwwLTAuOC0wLjEtMS4yLTAuNGMtMC44LTAuNy0wLjktMS45LTAuMy0yLjdsMTktMjEuNWMwLjQtMC40LDAuOS0wLjcsMS41LTAuNw0KCQljMC41LDAsMS4xLDAuMiwxLjUsMC43bDE5LjksMjEuNWMwLjcsMC44LDAuNiwyLTAuMiwyLjdjLTAuOCwwLjctMiwwLjYtMi43LTAuMmwtMTguNC0xOS43TDEuNy0xMjEuNQ0KCQlDMS4zLTEyMS4xLDAuOC0xMjAuOCwwLjItMTIwLjh6Ii8+DQo8L2c+DQo8Zz4NCgk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzkuMS0xMDcuM2MwLjQsMCwwLjgsMC4xLDEuMiwwLjRjMC44LDAuNywwLjksMS45LDAuMywyLjdsLTE5LDIxLjVjLTAuNCwwLjQtMC45LDAuNy0xLjUsMC43DQoJCWMtMC41LDAtMS4xLTAuMi0xLjUtMC43bC0xOS45LTIxLjVjLTAuNy0wLjgtMC42LTIsMC4yLTIuN2MwLjgtMC43LDItMC42LDIuNywwLjJMMjAuMS04N2wxNy41LTE5LjcNCgkJQzM4LTEwNy4xLDM4LjYtMTA3LjMsMzkuMS0xMDcuM3oiLz4NCjwvZz4NCjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik02MS42LDE4LjRsLTkuOC05LjhjLTAuNS0wLjUtMS4zLTAuNS0xLjgsMEwyNC41LDM0LjFMMTIuOSwyMy4yYy0wLjUtMC41LTEuMy0wLjUtMS44LDBMMS40LDMzDQoJYy0wLjUsMC41LTAuNSwxLjMsMCwxLjhsMjIuMywyMS42YzAuMiwwLjIsMC42LDAuNCwwLjksMC40YzAuMywwLDAuNi0wLjEsMC45LTAuNGwzNi4yLTM2LjJDNjIuMSwxOS43LDYyLjEsMTguOSw2MS42LDE4LjR6Ii8+DQo8L3N2Zz4=");
  content: '';
  height: 11px;
  width: 11px;
  position: absolute;
  top: 2px;
  left: 2px;
}

select,
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJGaWxsZWRfT2xkX0ljb25zIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiDQoJIHk9IjBweCIgdmlld0JveD0iMCAwIDY0IDY0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2NCA2NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6IzVCNUI1Qjt9DQo8L3N0eWxlPg0KPGc+DQoJPHBhdGggZD0iTTM0LDE5MS4zYzUuMSwwLDkuNy0xLjgsMTMuNC00LjdsMTguMiwxOC4zYzAuOSwwLjksMi40LDAuOSwzLjQsMGMwLjktMC45LDAuOS0yLjQsMC0zLjRsLTE4LjItMTguMw0KCQljMi45LTMuNiw0LjctOC4zLDQuNy0xMy4zYzAtMTEuOC05LjYtMjEuNC0yMS40LTIxLjRzLTIxLjQsOS42LTIxLjQsMjEuNEMxMi42LDE4MS43LDIyLjIsMTkxLjMsMzQsMTkxLjN6IE0zNCwxNTMuMw0KCQljOS4yLDAsMTYuNiw3LjUsMTYuNiwxNi42YzAsOS4yLTcuNSwxNi42LTE2LjYsMTYuNmMtOS4yLDAtMTYuNi03LjUtMTYuNi0xNi42QzE3LjQsMTYwLjgsMjQuOCwxNTMuMywzNCwxNTMuM3oiLz4NCjwvZz4NCjxnPg0KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMi42LDI1LjNjLTAuNCwwLTAuOC0wLjEtMS4yLTAuNGMtMC44LTAuNy0wLjktMS45LTAuMy0yLjdMMzAsMC43QzMwLjQsMC4zLDMwLjksMCwzMS41LDANCgkJQzMyLDAsMzIuNiwwLjIsMzMsMC43bDE5LjksMjEuNWMwLjcsMC44LDAuNiwyLTAuMiwyLjdjLTAuOCwwLjctMiwwLjYtMi43LTAuMkwzMS42LDQuOUwxNCwyNC42QzEzLjcsMjUsMTMuMSwyNS4zLDEyLjYsMjUuM3oiLz4NCjwvZz4NCjxnPg0KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik01MS40LDM4LjdjMC40LDAsMC44LDAuMSwxLjIsMC40YzAuOCwwLjcsMC45LDEuOSwwLjMsMi43TDM0LDYzLjNjLTAuNCwwLjQtMC45LDAuNy0xLjUsMC43DQoJCWMtMC41LDAtMS4xLTAuMi0xLjUtMC43TDExLjEsNDEuOWMtMC43LTAuOC0wLjYtMiwwLjItMi43YzAuOC0wLjcsMi0wLjYsMi43LDAuMmwxOC40LDE5LjdMNTAsMzkuNEM1MC4zLDM5LDUwLjksMzguNyw1MS40LDM4Ljd6Ig0KCQkvPg0KPC9nPg0KPC9zdmc+");
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: 95%;
  font-size: 13px;
  font-weight: 500;
  font-family: helvetica-neue, helvetica, arial, sans-serif;
  min-width: 170px;
  padding-right: 32px;
}
select:hover {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJGaWxsZWRfT2xkX0ljb25zIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiDQoJIHk9IjBweCIgdmlld0JveD0iMCAwIDY0IDY0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2NCA2NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6IzVCNUI1Qjt9DQo8L3N0eWxlPg0KPGc+DQoJPHBhdGggZD0iTTM0LDE5MS4zYzUuMSwwLDkuNy0xLjgsMTMuNC00LjdsMTguMiwxOC4zYzAuOSwwLjksMi40LDAuOSwzLjQsMGMwLjktMC45LDAuOS0yLjQsMC0zLjRsLTE4LjItMTguMw0KCQljMi45LTMuNiw0LjctOC4zLDQuNy0xMy4zYzAtMTEuOC05LjYtMjEuNC0yMS40LTIxLjRzLTIxLjQsOS42LTIxLjQsMjEuNEMxMi42LDE4MS43LDIyLjIsMTkxLjMsMzQsMTkxLjN6IE0zNCwxNTMuMw0KCQljOS4yLDAsMTYuNiw3LjUsMTYuNiwxNi42YzAsOS4yLTcuNSwxNi42LTE2LjYsMTYuNmMtOS4yLDAtMTYuNi03LjUtMTYuNi0xNi42QzE3LjQsMTYwLjgsMjQuOCwxNTMuMywzNCwxNTMuM3oiLz4NCjwvZz4NCjxnPg0KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMi42LDI1LjNjLTAuNCwwLTAuOC0wLjEtMS4yLTAuNGMtMC44LTAuNy0wLjktMS45LTAuMy0yLjdMMzAsMC43QzMwLjQsMC4zLDMwLjksMCwzMS41LDANCgkJQzMyLDAsMzIuNiwwLjIsMzMsMC43bDE5LjksMjEuNWMwLjcsMC44LDAuNiwyLTAuMiwyLjdjLTAuOCwwLjctMiwwLjYtMi43LTAuMkwzMS42LDQuOUwxNCwyNC42QzEzLjcsMjUsMTMuMSwyNS4zLDEyLjYsMjUuM3oiLz4NCjwvZz4NCjxnPg0KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik01MS40LDM4LjdjMC40LDAsMC44LDAuMSwxLjIsMC40YzAuOCwwLjcsMC45LDEuOSwwLjMsMi43TDM0LDYzLjNjLTAuNCwwLjQtMC45LDAuNy0xLjUsMC43DQoJCWMtMC41LDAtMS4xLTAuMi0xLjUtMC43TDExLjEsNDEuOWMtMC43LTAuOC0wLjYtMiwwLjItMi43YzAuOC0wLjcsMi0wLjYsMi43LDAuMmwxOC40LDE5LjdMNTAsMzkuNEM1MC4zLDM5LDUwLjksMzguNyw1MS40LDM4Ljd6Ig0KCQkvPg0KPC9nPg0KPC9zdmc+");
}


/*Downloaded from https://www.codeseek.co/nickcomito/atlantis-ui-kit-zvwRgW */
$(".toggle").click(function() {
  $(this).toggleClass("off");
  $(this).toggleClass("on");
})

Comments