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

Jon tribute page

Jon tribute page

By lukaspalsson
Simple Animated Progress Bar

Simple Animated Progress Bar

By luanpiegas
hao

hao

By bxq2005
css eye animations

css eye animations

By creme
CSS Beautify - taken from https://github.com/senchalabs/cssbeautify

CSS Beautify - taken from https://github.com/senchalabs/cssbeautify

By systemctl
Dotted-border Mixin for Sass

Dotted-border Mixin for Sass

By poopsplat
A Pen by Aseralis

A Pen by Aseralis

By Aseralis
Demo Store Cart

Demo Store Cart

By keithmercado
© 2018 - Copyright CodeSeek.co
contact email