007design

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>007design</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans'>

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

  
</head>

<body>

  <div class="page-container" data-ng-app="app" data-nav data-ng-class="{'nav-open': navOpen}">
  <div class="mobile-header">
    <div class="logo">
      <div class="logo-top"></div>
      <div class="logo-bottom"><p>ipsum</p></div>
    </div>
    <div class="mobile-nav-button" data-ng-click="navOpen = !navOpen"></div>
  </div>
  <div class="desktop-header">
    <ul class="menu-links">
      <li class="menu-link fa fa-github"></li>
      <li class="menu-link fa fa-codepen"></li>
      <li class="menu-link fa fa-linkedin"></li>
    </ul>
  </div>
  <div class="smoke"></div>
  <div class="mobile-menu">
    <ul class="menu-links">
      <li class="menu-link">Lorem</li>
      <li class="menu-link">Ipsum</li>
    </ul>
  </div>
  <div class="main-content">
    <div class="main-left">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur iaculis nec ante sit amet ornare. Integer luctus condimentum purus, vel tristique nulla iaculis sit amet. Integer interdum magna a arcu finibus, et dictum urna vestibulum. Phasellus a faucibus arcu. Ut at leo consectetur lacus venenatis ultrices. Maecenas est nunc, convallis vulputate consectetur in, congue interdum felis. Nunc dolor lorem, hendrerit vel augue sed, cursus iaculis tortor. Nulla rutrum dui ac ante aliquet varius in consectetur arcu. Aenean suscipit vestibulum lorem quis maximus. Nulla facilisi. Morbi vulputate suscipit arcu dignissim auctor. Aenean eget felis dignissim, convallis turpis at, aliquam magna.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur iaculis nec ante sit amet ornare. Integer luctus condimentum purus, vel tristique nulla iaculis sit amet. Integer interdum magna a arcu finibus, et dictum urna vestibulum. Phasellus a faucibus arcu. Ut at leo consectetur lacus venenatis ultrices. Maecenas est nunc, convallis vulputate consectetur in, congue interdum felis. Nunc dolor lorem, hendrerit vel augue sed, cursus iaculis tortor. Nulla rutrum dui ac ante aliquet varius in consectetur arcu. Aenean suscipit vestibulum lorem quis maximus. Nulla facilisi. Morbi vulputate suscipit arcu dignissim auctor. Aenean eget felis dignissim, convallis turpis at, aliquam magna.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur iaculis nec ante sit amet ornare. Integer luctus condimentum purus, vel tristique nulla iaculis sit amet. Integer interdum magna a arcu finibus, et dictum urna vestibulum. Phasellus a faucibus arcu. Ut at leo consectetur lacus venenatis ultrices. Maecenas est nunc, convallis vulputate consectetur in, congue interdum felis. Nunc dolor lorem, hendrerit vel augue sed, cursus iaculis tortor. Nulla rutrum dui ac ante aliquet varius in consectetur arcu. Aenean suscipit vestibulum lorem quis maximus. Nulla facilisi. Morbi vulputate suscipit arcu dignissim auctor. Aenean eget felis dignissim, convallis turpis at, aliquam magna.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur iaculis nec ante sit amet ornare. Integer luctus condimentum purus, vel tristique nulla iaculis sit amet. Integer interdum magna a arcu finibus, et dictum urna vestibulum. Phasellus a faucibus arcu. Ut at leo consectetur lacus venenatis ultrices. Maecenas est nunc, convallis vulputate consectetur in, congue interdum felis. Nunc dolor lorem, hendrerit vel augue sed, cursus iaculis tortor. Nulla rutrum dui ac ante aliquet varius in consectetur arcu. Aenean suscipit vestibulum lorem quis maximus. Nulla facilisi. Morbi vulputate suscipit arcu dignissim auctor. Aenean eget felis dignissim, convallis turpis at, aliquam magna.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur iaculis nec ante sit amet ornare. Integer luctus condimentum purus, vel tristique nulla iaculis sit amet. Integer interdum magna a arcu finibus, et dictum urna vestibulum. Phasellus a faucibus arcu. Ut at leo consectetur lacus venenatis ultrices. Maecenas est nunc, convallis vulputate consectetur in, congue interdum felis. Nunc dolor lorem, hendrerit vel augue sed, cursus iaculis tortor. Nulla rutrum dui ac ante aliquet varius in consectetur arcu. Aenean suscipit vestibulum lorem quis maximus. Nulla facilisi. Morbi vulputate suscipit arcu dignissim auctor. Aenean eget felis dignissim, convallis turpis at, aliquam magna.</p>
    </div>
    <div class="main-right"></div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/007design/007design-OgMwMX */
body {
  margin: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
}

.page-container {
  position: relative;
  height: 100vh;
  overflow-y: scroll;
  border: 1px solid black;
  margin: 0;
  padding-top: 50px;
  background: linear-gradient(to bottom, white 0%, rgba(0, 143, 234, 0.2) 100%);
}
@media (min-width: 768px) {
  .page-container {
    padding-top: 20px;
  }
}
.page-container.nav-open {
  background: #008fea;
}
.page-container.nav-open .logo .logo-bottom {
  color: white;
  background: none;
}
.page-container.nav-open .smoke {
  background-image: url("//placehold.it/50x500/ffffff");
}
.page-container.nav-open .mobile-menu {
  display: block;
}
.page-container.nav-open .main-content {
  display: none;
}
.page-container.nav-open .main-content p {
  margin: 0 0 20px;
}
.page-container .mobile-header {
  position: fixed;
  top: 0px;
  width: 100%;
  height: 50px;
  background-color: white;
  border-bottom: 1px solid #008fea;
  z-index: 2;
}
@media (min-width: 768px) {
  .page-container .mobile-header {
    display: none;
  }
}
.page-container .mobile-header .mobile-nav-button {
  height: 40px;
  width: 40px;
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}
.page-container .mobile-header .mobile-nav-button:before {
  content: "\f13a";
  color: #008fea;
  font-family: FontAwesome;
  font-size: 40px;
}
.page-container .desktop-header {
  position: fixed;
  top: 0px;
  width: 100%;
  height: 50px;
  background-color: white;
  padding: 10px;
  text-align: center;
  display: none;
}
@media (min-width: 768px) {
  .page-container .desktop-header {
    display: block;
  }
}
.page-container .desktop-header .menu-links {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 30px;
  color: #008fea;
}
.page-container .desktop-header .menu-links .menu-link {
  display: inline-block;
  margin: 0 10px;
}
.page-container .logo .logo-top {
  height: 50px;
  width: 260px;
  background: url("//placehold.it/260x50/008fea");
}
.page-container .logo .logo-bottom {
  font-size: 13px;
  position: absolute;
  height: 40px;
  width: 100%;
  padding-right: 60px;
  top: 51px;
  color: #008fea;
  text-align: right;
  background: linear-gradient(to bottom, white 40%, rgba(255, 255, 255, 0) 100%);
}
.page-container .logo .logo-bottom p {
  padding-right: 60px;
  margin: 0;
}
.page-container .smoke {
  position: fixed;
  top: 50px;
  left: 0;
  height: 100%;
  width: 50px;
  background-image: url("//placehold.it/50x500");
  animation: slide-up linear 15s infinite;
  z-index: 0;
}
@media (min-width: 768px) {
  .page-container .smoke {
    top: 0;
  }
}
.page-container .mobile-menu {
  position: relative;
  z-index: 2;
  color: black;
  display: none;
}
.page-container .mobile-menu .menu-links {
  margin: 30px 0 0 60px;
  padding: 0;
  list-style-type: none;
}
.page-container .mobile-menu .menu-links .menu-link {
  margin: 0 0 10px;
  padding: 0;
  padding: 10px;
  border-left: 1px solid #ddd;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0.2) 100%);
}
.page-container .main-content {
  position: relative;
  z-index: 1;
}
.page-container .main-content .main-left {
  padding: 30px 10px 0 40px;
}
@media (min-width: 768px) {
  .page-container .main-content .main-left {
    width: 50%;
    float: left;
  }
}
.page-container .main-content .main-right {
  width: calc(50% - 50px);
  float: left;
  min-height: 400px;
  background: url("//placehold.it/400x200/008fea") bottom center no-repeat;
  display: none;
  position: relative;
}
.page-container .main-content .main-right:after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, rgba(0, 143, 234, 0) 0%, #008fea 30%, #008fea 100%);
}
@media (min-width: 768px) {
  .page-container .main-content .main-right {
    display: block;
  }
}

@keyframes slide-up {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -1000px;
  }
}


/*Downloaded from https://www.codeseek.co/007design/007design-OgMwMX */
angular.module('app', [])
.directive('nav', [function() {
  return {
    restrict: 'A',
    scope: true,
    link: function() {
      
    }
  };
}])

Comments