create-bucket.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="MetaDisk provides developers and IT teams with high performance, durable object storage.">
    <meta name="keywords" content="metadisk, meta disk, storj, storj labs, decentralized storage, object storage, decentralized, cloud, storage, secure, private, encrypted">

    <title>MetaDisk - The Most Secure Cloud Storage</title>

    <meta property="og:title" content="MetaDisk - The Most Secure Cloud Storage"/>
    <meta property="og:type" content="website"/>
    <meta property="og:image" content="img/metadisk.png" />
    <meta property="og:description" content="MetaDisk provides developers and IT teams with high performance, durable object storage."/>

	<link rel="shortcut icon" href="img/favicon//favicon.ico" type="image/x-icon">
	<link rel="icon" href="img/favicon//favicon.ico" type="image/x-icon">
	<link rel="icon" type="image/png" sizes="192x192"  href="img/favicon/favicon-192x192.png">
	<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="96x96" href="img/favicon/favicon-96x96.png">
	<link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <script src="js/modernizr.js"></script>

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body class="page">

	<nav class="navbar navbar-page">
	  <div class="container">
	    <!-- Brand and toggle get grouped for better mobile display -->
	    <div class="navbar-header">
	      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false">
	        <span class="sr-only">Toggle navigation</span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	      </button>
	      <!-- <a class="navbar-brand" href="#">MetaDisk</a> -->
	      <a href="index.html" class="navbar-brand">
			<img src="img/logo-blue.svg" alt="MetaDisk" class="logo">
		  </a>
	    </div>
	    <!-- Collect the nav links, forms, and other content for toggling -->
	    <div class="collapse navbar-collapse" id="navbar-menu">
	      <ul class="nav navbar-nav navbar-left">
	      	<li><a href="buckets.html">Buckets</a></li>
			<li><a href="api.html">API</a></li>
			<li><a href="billing.html">Billing</a></li>
			<li><a href="">Support</a></li>
	      </ul>
	      <div class="navbar-right">
	      	<li class="dropdown">
	          <a href="#" class="dropdown-toggle btn btn-menu btn-transparent" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Hi Tome <span class="caret"></span></a>
	          <ul class="dropdown-menu">
	            <li><a href="profile.html">Profile</a></li>
	            <li><a href="billing.html">Billing</a></li>
	            <li role="separator" class="divider"></li>
	            <li><a href="index.html">Logout</a></li>
	          </ul>
	        </li>
	      </div>
	    </div>
	  </div>
	</nav>

	<section>
		<div class="container">
			<div class="row">
				<div class="col-xs-12">
					<h2 class="title">Create New Bucket</h2>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12 col-sm-6 text-center-xs">
					<div class="content">
						<div class="row">
							<div class="col-xs-12 col-sm-4 col-md-3">
								<img src="img/icon-storage.svg" class="bucket-pricing-icon" alt="">
							</div>
							<div class="col-xs-12 col-sm-8 col-md-9">
								<p class="text-muted">Storage Price</p>
								<h2 class="mb0 blue"><b>$0.015<span> GB</b> / month</span></h2>
							</div>
						</div>
					</div>
				</div>
				<div class="col-xs-12 col-sm-6 text-center-xs">
					<div class="content">
						<div class="row">
							<div class="col-xs-12 col-sm-4 col-md-3">
								<img src="img/icon-bandwidth.svg" class="bucket-pricing-icon" alt="">
							</div>
							<div class="col-xs-12 col-sm-8 col-md-9">
								<p class="text-muted">Bandwidth Price</p>
								<h2 class="mb0 blue"><b>$0.05<span> GB</b> / month</span></h2>
							</div>
						</div>
						
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12">
					<div class="content">
						<label for="name">Bucket Name</label>
						<input type="text" name="name" placeholder="Enter a name for your bucket">
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12">
					<div class="content" id="publicKeys">
						<label for="public-key">Add Public Key</label>
						<a href="" class="pull-right" id="newKey">+ Add More Keys</a>
						<input type="text" name="public-key" placeholder="Enter your public key">
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12">
					<a href="" class="btn btn-green btn-block btn-create-bucket">Create Bucket</a>
				</div>
			</div>
		</div>
	</section>

	<script src="js/jquery-2.1.1.js"></script>
	<script src="js/bootstrap.min.js"></script>

	<script>
		$('.plan').click(function(e) {
	        e.preventDefault(); // prevent the default action
	        e.stopPropagation(); // stop the click from bubbling
	        $('.selected').removeClass('selected');
	        $(this).addClass('selected');
	    });

	    $('#newKey').click(function() {
		    var newKey = document.createElement('input');
		    $(newKey).attr("placeholder", "Enter your public key");
		    document.getElementById('publicKeys').appendChild(newKey);
		    return false;
		});
	</script>
	
	<script>
	  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

	  ga('create', 'UA-49085346-4', 'auto');
	  ga('send', 'pageview');
	</script>
	
</body>
</html>