Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

First atempt #1

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

First atempt #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
17732bd
initial commit
Oct 7, 2016
8d5ebfa
Finished
Oct 10, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
333 changes: 333 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,333 @@
<!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">
<title>UI 4 Dev</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>

<div class="container">
<div class="row">
<div class="col-md-3">
<div class="row">&nbsp;</div>
<img src="http://placehold.it/150x100">
</div>
<div class="col-md-5">
<div class="row">&nbsp;</div>
<div class="row">&nbsp;</div>
<div class="row">&nbsp;</div>
<div class="input-group">
<span class="input-group-btn">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
All categories <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Laptops, Tablets & Phones</a></li>
<li><a href="#">TV, Audio, Photo</a></li>
<li><a href="#">Appliances</a></li>
<li><a href="#">Gaming</a></li>
<li><a href="#">Smart Tech</a></li>
</ul>
</div>
</span>
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="glyphicon glyphicon-search" aria-hidden="true"></i>
</button>
</span>
</div>
</div>
<div class="col-md-4">
<div class="row">&nbsp;</div>
<div class="row">&nbsp;</div>
<div class="row">&nbsp;</div>
<div class="row pull-right">
<div class="btn-toolbar" role="toolbar" aria-label="headerUserControls">
<div class="btn-group" role="group" aria-label="userOptions">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
John Doe <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">My orders</a></li>
<li><a href="#">Wishlist</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Profile</a></li>
</ul>
</div>
</div>
<div class="btn-group" role="group" aria-label="shoppingCart">
<button class="btn btn-default" type="button">
<i class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></i>
<span class="badge">3</span>
items
</button>
</div>
<div class="btn-group" role="group" aria-label="logout">
<button class="btn btn-default" type="button">
<i class="glyphicon glyphicon-log-out" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">&nbsp;</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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="#bs-example-navbar-collapse-1" 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>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Laptops, Tablets & Phones <span class="sr-only">(current)</span></a></li>

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">TV, Audio, Photo <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Smart TVs</a></li>
<li><a href="#">LED TVs</a></li>
<li><a href="#">Speakers</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Home cinema</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Projectors</a></li>
</ul>
</li>

<li><a href="#">Appliances</a></li>
<li><a href="#">Gaming</a></li>
<li><a href="#">Smart Tech</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="row">&nbsp;</div>
<div class="row">
<div class="col-md-12">
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">User</a></li>
<li class="active">Profile</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-md-2">
<ul class="nav nav-stacked">
<li role="presentation" class="active"><a href="index.html">Profile</a></li>
<li role="presentation"><a href="#">Address Book</a></li>
<li role="presentation"><a href="orders.html">Orders</a></li>
<li role="presentation"><a href="notifications.html">Notifications</a></li>
<li role="presentation"><a href="#">Gift Cards</a></li>
<li role="presentation"><a href="#">Reviews</a></li>
</ul>
</div>
<div class="col-md-10">
<div class="alert alert-warning">
Change account settings, personal informations, email or password
</div>
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#myInfo" aria-controls="myInfo" role="tab" data-toggle="tab">My information</a></li>
<li role="presentation"><a href="#password" aria-controls="password" role="tab" data-toggle="tab">Password</a></li>
<li role="presentation"><a href="#email" aria-controls="email" role="tab" data-toggle="tab">Email</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="myInfo">
<div class="row">&nbsp;</div>
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="firstName">First name</label>
<input type="text" class="form-control" id="firstName" placeholder="First name">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="lastName">Last name</label>
<input type="text" class="form-control" id="lastName" placeholder="Last name">
</div>
</div>
</div>
<div class="form-group">
<label for="address">Address</label>
<input type="text" class="form-control" id="address" placeholder="Address">
</div>
<div class="form-group">
<label for="address2">Address line 2 (optional)</label>
<input type="text" class="form-control" id="address2" placeholder="Address line 2">
</div>
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="city">City</label>
<input type="text" class="form-control" id="city" placeholder="City">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="state">State</label>
<input type="text" class="form-control" id="state" placeholder="State">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="zipCode">Zip code</label>
<input type="text" class="form-control" id="zipCode" placeholder="Zip code">
</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="country">Country</label>
<span class="pull-right"><a href="#">Customs notice</a></span>
<select class="form-control" id="country">
<option>US</option>
<option>Romania</option>
<option>UK</option>
<option>Germany</option>
</select>
</div>

</div>
</div>
<div class="row">
<div class="col-md-12">
<p>Please enter your billing phone number on file with your credit card company.</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="phone">Phone</label>
<input type="tel" class="form-control" id="phone" placeholder="Phone">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="otherPhone">Other phone</label>
<input type="tel" class="form-control" id="otherPhone" placeholder="Other phone">
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-offset-4 col-md-4 text-center">
<button type="reset" class="btn btn-link">Cancel</button>
<button type="submit" class="btn btn-default">Save</button>
</div>
</div>
</form>
</div>
<div role="tabpanel" class="tab-pane fade" id="password">
<div class="row">&nbsp;</div>
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="currentPassword">Current password</label>
<input type="password" class="form-control" id="currentPassword" placeholder="Current password">
</div>
</div>
</div>
<hr/>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="newPassword">New password</label>
<span class="pull-right"><a href="#">Help</a></span>
<input type="password" class="form-control" id="newPassword" placeholder="New password">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="repeatPassword">Repeat password</label>
<input type="password" class="form-control" id="repeatPassword" placeholder="Repeat password">
</div>
</div>
</div>
<hr/>
<div class="row">
<div class="col-md-offset-4 col-md-4 text-center">
<button type="reset" class="btn btn-link">Cancel</button>
<button type="submit" class="btn btn-default">Change password</button>
</div>
</div>
</form>
</div>
<div role="tabpanel" class="tab-pane fade" id="email">
<div class="row">&nbsp;</div>
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="currentEmail">Current email address</label>
<input type="email" class="form-control" id="currentEmail" placeholder="Current email">
</div>
</div>
</div>
<hr/>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="newEmail">New email address</label>
<span class="pull-right"><a href="#">Help</a></span>
<input type="email" class="form-control" id="newEmail" placeholder="New email address">
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-offset-4 col-md-4 text-center">
<button type="reset" class="btn btn-link">Cancel</button>
<button type="submit" class="btn btn-default">Apply</button>
</div>
</div>
</form>
</div>
</div>
<div class="row">&nbsp;</div>
<div class="row">&nbsp;</div>
<div class="row">&nbsp;</div>
<div class="row">&nbsp;</div>
<div class="row">&nbsp;</div>
<div class="row">&nbsp;</div>
<!-- add some extra footer space -->
</div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>
Loading