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 Gabriel Berrios

A Pen by Gabriel Berrios

By gabriel-berrios
Gradient Animation

Gradient Animation

By MikeMcChillin
tornado test

tornado test

By ckingbailey
Angular Material (Jade)

Angular Material (Jade)

By machonky
Universal Nav Template Responsive Demo

Universal Nav Template Responsive Demo

By 310henderson
A Pen by Ingo Joseph

A Pen by Ingo Joseph

By ingojoseph
A Pen by Isaac Gierard

A Pen by Isaac Gierard

By igierard
A Pen by Aaron Olin

A Pen by Aaron Olin

By aolin480
© 2018 - Copyright CodeSeek.co
contact email