<!doctype html>
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if (gte IE 9)| IEMobile |!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Ghost Admin</title>
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,700" />
<link rel="stylesheet" href="../../../built/assets/vendor.css" />
<link rel="stylesheet" href="../../../built/assets/ghost.css" />
</head>
<body>


<div class="gh-flow">
    <header class="gh-flow-head">
        <nav class="gh-flow-nav">
            <a class="gh-flow-back" href="#"><i class="icon-arrow-left"></i> Back</a>
            <ol>
                <li><a class="step" href="#"><i class="icon-check"></i><span class="num">1</span></a></li>
                <li class="divider"></li>
                <li class="current"><a class="step" href="#"><i class="icon-check"></i><span class="num">2</span></a></li>
                <li class="divider"></li>
                <li><a class="step" href="#"><i class="icon-check"></i><span class="num">3</span></a></li>
            </ol>
        </nav>
    </header>

    <div class="gh-flow-content-wrap">
        <section class="gh-flow-content">
            <header>
                <h1>Create your account</h1>
            </header>

            <form class="gh-flow-create">
                <figure class="account-image">
                    <div  id="account-image" class="img"  style="background-image: url(http://www.gravatar.com/avatar/75e958a6674a7d68fe0d575fb235116c?d=404&s=250)">
                        <!-- fallback to: Ghost/core/shared/img/ghosticon.jpg -->
                        <span class="sr-only">User imge</span>
                    </div>
                    <a class="edit-account-image" href="#"><i class="icon-photos "><span class="sr-only">Upload an image</span></i></a>
                </figure>
                <div class="form-group success">
                    <label for="email-address">Email address</label>
                    <span class="input-icon icon-mail">
                        <input id="email-address" class="ember-view ember-text-field" type="email" placeholder="Eg. john@example.com">
                    </span>
                    <p class="response">Lookin' good</p>
                </div>
                <div class="form-group success">
                    <label for="full-name">Full name</label>
                    <span class="input-icon icon-user">
                        <input id="full-name" class="ember-view ember-text-field" type="text" placeholder="Eg. John Smith">
                    </span>
                    <p class="response">Nice to meet you, John! <a href="#">Upload a photo?</a></p>
                </div>
                <div class="form-group error">
                    <label for="password">Password</label>
                    <span class="input-icon icon-lock">
                        <input id="password" class="ember-view ember-text-field" type="password" placeholder="At least 7 characters">
                        <div class="pw-strength">
                            <div class="pw-strength-dot"></div>
                            <div class="pw-strength-dot"></div>
                            <div class="pw-strength-dot"></div>
                            <div class="pw-strength-dot"></div>
                            <span class="pw-strength-dot pw-strength-activedot"></span>
                        </div>
                    </span>
                    <p class="response">Too short, dear</p>
                </div>
                <div class="form-group">
                    <label for="blog-title">Blog title</label>
                    <span class="input-icon icon-content">
                        <input id="blog-title" class="ember-view ember-text-field" type="text" placeholder="Eg. The Daily Awesome">
                    </span>
                </div>
            </form>

            <a class="btn btn-green btn-lg btn-block" href="#">Last step: Invite your team <i class="icon-chevron"></i></a>
            <p class="main-error">The password fairy does not approve</p>
        </section>
    </div>
</div>


</body>
</html>