Item: Skills Assessment Template
Rating: 3.4
Author: 007design

1 Downloads
168 Views
Tweet
Download Now View Demo

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

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

Technologies

Comments

More from 007design

A Pen by Daniel Hinds-Bond

A Pen by Daniel Hinds-Bond

sticky form

Vanilla JS Lazy Load

You Might Also Like

Cute Punnies

Perfil TDH

TableFilter sort numeric column with empty values

Poly Template [WIP]

Task 52

Critical bug Gong

Image / Album Gallery

Material background

Skills Assessment Template

In this example below you will see how to do a Skills Assessment Template with some HTML / CSS and JavascriptPlease don't alter the Pen Settings

Technologies

Comments

More from 007design

A Pen by Daniel Hinds-Bond

A Pen by Daniel Hinds-Bond

sticky form

Vanilla JS Lazy Load

You Might Also Like

Cute Punnies

Perfil TDH

TableFilter sort numeric column with empty values

Poly Template [WIP]

Task 52

Critical bug Gong

Image / Album Gallery

Material background

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