Skip to content

Instantly share code, notes, and snippets.

@kaysiz

kaysiz/app.component.html

Last active February 19, 2018 16:40
Show Gist options
  • Save kaysiz/3ae10bffa00f63d9688fca458d3d3fa0 to your computer and use it in GitHub Desktop.
Save kaysiz/3ae10bffa00f63d9688fca458d3d3fa0 to your computer and use it in GitHub Desktop.
Download ZIP
Djangular - PyConNamibia 2018
Raw
app.component.html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">PyConNamibia 2018</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link">Shop</a>
</div>
</div>
</nav>
Raw
order.component.html
<!-- form card cc payment -->
<div class="container card card-outline-secondary">
<div class="card-block">
<h3 class="text-center">Place Order</h3>
<form class="form" role="form" autocomplete="off">
<div class="form-group">
<label for="cc_name">Full Name</label>
<input type="text" class="form-control" id="cc_name" pattern="\w+ \w+.*" title="First and last name" required="required">
</div>
<div class="form-group">
<label>Email Address</label>
<input type="email" class="form-control">
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="text" class="form-control" autocomplete="off" maxlength="20" pattern="\d{16}" required="">
</div>
<div class="form-group row">
<div class="col-md-10">
<label>Product Name</label>
<input type="text" class="form-control" required="">
</div>
<div class="col-md-2">
<label>Quantity</label>
<input type="number" class="form-control" required="">
</div>
</div>
<div class="row">
<label class="col-md-12">Amount</label>
</div>
<div class="form-inline">
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control text-right" value="39">
</div>
</div>
<hr>
<div class="form-group row">
<div class="col-md-6">
<button type="reset" class="btn btn-default btn-lg btn-block">Cancel</button>
</div>
<div class="col-md-6">
<button type="submit" class="btn btn-success btn-lg btn-block">Place Order</button>
</div>
</div>
</form>
</div>
</div>
<!-- /form card cc payment -->
Raw
shop.component.html
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="card">
<div class="card-header">
Categories
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item"> <a href=""> All</a></li>
<li class="list-group-item"><a href="">Technology</a></li>
</ul>
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">
<div class="card mb-2">
<img class="card-img-top img-fluid m-x-auto" src="//placehold.it/500x300" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-2">
<img class="card-img-top img-fluid m-x-auto" src="//placehold.it/500x300" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-2">
<img class="card-img-top img-fluid m-x-auto" src="//placehold.it/500x300" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-2">
<img class="card-img-top img-fluid m-x-auto" src="//placehold.it/500x300" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-2">
<img class="card-img-top img-fluid m-x-auto" src="//placehold.it/500x300" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-2">
<img class="card-img-top img-fluid m-x-auto" src="//placehold.it/500x300" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment