Skills Assessment Template

In this example below you will see how to do a Skills Assessment Template with some HTML / CSS and Javascript

Please don't alter the Pen Settings

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
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Skills Assessment Template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='css/https___cdn_jsdelivr_net_.css'>

  
  
</head>

<body>

  <div class="page-container" data-ng-app="app">
  <div class="header-container">
    <div class="logo">
      <img src="//placehold.it/50x50" alt="">
    </div>
  </div>
  <div class="hero-container">
    <div class="hero-background"></div>
    <div class="hero-foreground">
      <div class="hero-foreground-content">
        <h1>Hello World</h1>
        <p>Lorem ipsum</p>
      </div>
    </div>
    <div class="form-container" data-ng-controller="FormCtrl">
      <div class="form-header">
        <h2>Hello World</h2>
      </div>
      <form class="form-step-one" data-ng-show="step == 0" data-ng-submit="submitStep()">
        <div class="form-row">
          <input type="text" class="form-input" placeholder="First Name*" required>
        </div>
        <div class="form-row">
          <input type="text" class="form-input" placeholder="Last Name*" required>
        </div>
        <div class="form-row">
          <button class="form-button" type="submit" data-ng-click="validate()">Next Step</button>
        </div>
      </form>
      <form class="form-step-two" data-ng-show="step == 1">
        <div class="form-row">
          <input type="text" class="form-input" placeholder="Street Address">
        </div>
        <div class="form-row">
          <input type="text" class="form-input" placeholder="City">
        </div>
        <div class="form-row">
          <select class="form-select">
            <option value="">State</option>
            <option value="AL">Alabama</option>
            <option value="AK">Alaska</option>
            <option value="AZ">Arizona</option>
          </select>
        </div>
        <div class="form-row">
          <input type="text" class="form-input" placeholder="Zip">
        </div>
        <div class="form-row">
          <button class="form-button last-step" type="submit">Submit</button>
        </div>
      </form>
    </div>
  </div>
  <div class="content-container">
    <div class="content-headline">
      <h2>Hello World</h2>
    </div>
    <div class="feature-cards-three">
      <div class="feature-card-container">
        <div class="feature-card card-one">
          <img src="//placehold.it/50x50" alt="">
          <p>Hello World</p>
        </div>
      </div>
      <div class="feature-card-container">
        <div class="feature-card card-two">
          <img src="//placehold.it/50x50" alt="">
          <p>Hello World</p>
        </div>
      </div>
      <div class="feature-card-container">
        <div class="feature-card card-three">
          <img src="//placehold.it/50x50" alt="">
          <p>Hello World</p>
        </div>
      </div>
    </div>
    <div class="feature-cards-two">
      <div class="feature-card-container">
        <div class="feature-card card-one">
          <img src="//placehold.it/50x50" alt="">
          <p>Hello World</p>
        </div>
      </div>
      <div class="feature-card-container">
        <div class="feature-card card-two">
          <img src="//placehold.it/50x50" alt="">
          <p>Hello World</p>
        </div>
      </div>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/007design/skills-assessment-template-mpBNmo */
angular.module('app', [])

.controller('FormCtrl', ['$scope', function($scope) {
  $scope.step = 0;
  $scope.form = {};
  
  $scope.submitStep = function() {
    $scope.step = $scope.step + 1;
  };
  
  $scope.validate = function() {
    alert('test');
  };
}])

Comments