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

More from 007design

A Pen by Daniel Hinds-Bond

A Pen by Daniel Hinds-Bond

By 007design
A Pen by Daniel Hinds-Bond

A Pen by Daniel Hinds-Bond

By 007design
sticky form

sticky form

By 007design
Vanilla JS Lazy Load

Vanilla JS Lazy Load

By 007design

You Might Also Like

A Pen by baloglub

A Pen by baloglub

By baloglub
dafna

dafna

By nogaanaby
Responsiv table and fixed head

Responsiv table and fixed head

By Peteichuk
Stock Streaks with CloudQuote

Stock Streaks with CloudQuote

By mdierolf
Lottie &amp; bodymovin

Lottie & bodymovin

By 22nds
SpriteBlendr

SpriteBlendr

By n33kos
DigiCrypt Cryptography Tool

DigiCrypt Cryptography Tool

By kcak11
A Pen by Joshua Ogle

A Pen by Joshua Ogle

By joshuaogle
© 2018 - Copyright CodeSeek.co
contact email