Skip to content

Instantly share code, notes, and snippets.

@zgulde

zgulde/order-pizza-bs4.html

Last active January 18, 2018 15:26
Show Gist options
  • Save zgulde/ab24b77a0420255f604c53d405b1284e to your computer and use it in GitHub Desktop.
Save zgulde/ab24b77a0420255f604c53d405b1284e to your computer and use it in GitHub Desktop.
Download ZIP
Codeup Pizza Ordering form exercise with Bootstrap v4
Raw
order-pizza-bs4.html
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Order Online</title>
<!-- Styles -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous" />
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet" />
<style>
.pizza-hero-image {
background-image: url(pizza.png);
}
.pizza-hero-image h1 {
background-color: white;
opacity: 0.7;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="#">Pizza World</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Menu</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Order Online</a>
</li>
</ul>
<form class="form-inline my-1 ml-5" action="">
<input class="form-control" type="" placeholder="Enter your zip code...">
<button class="btn btn-small btn-outline-primary">Search Stores Near You!</button>
</form>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="">Sign Up</a>
</li>
</ul>
</nav>
<div class="container">
<div class="jumbotron pizza-hero-image">
<h1 class="text-center">Welcome To Pizza World!</h1>
</div>
<h2 class="my-5">Build Your Own Pizza!</h2>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">
<span class="badge">1</span>
Size And Crust
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="badge">2</span>
Cheese and Sauce
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="badge">3</span>
Toppings
</a>
</li>
</ul>
<div class="card">
<div class="card-header text-white bg-primary">Choose size and crust</div>
<div class="card-body">
<div class="card">
<div class="card-header">Hand Tossed</div>
<div class="card-body">
Garlic seasoned crust with a rich, buttery taste.
</div>
<ul class="list-group">
<li class="list-group-item">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
Small (10")
</label>
</div>
</li>
<li class="list-group-item">
<div class="form-check">
<label class="form-check-label">
<input type="radio" name="optionsRadios" id="optionsRadios1" class="form-check-input" value="option1">
Medium (12")
</label>
</div>
</li>
</ul>
</div>
<div class="card mt-3">
<div class="card-header">Crispy Thin</div>
<div class="card-body">
Thin enough for optimum crispy to crunchy ratio.
</div>
<ul class="list-group">
<li class="list-group-item">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
Medium (12")
</label>
</div>
</li>
<li class="list-group-item">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
Large (14")
</label>
</div>
</li>
</ul>
</div>
</div>
<div class="card-footer text-right">
<button class="btn btn-primary">
Next Step
<i class="fas fa-angle-right"></i>
</button>
</div>
</div>
<div class="card mt-3">
<div class="card-header text-white bg-primary">Choose Cheese and Sauce</div>
<div class="card-body">
<div class="card">
<div class="card-header">Cheese</div>
<ul class="list-group">
<li class="list-group-item">
<label>How Much?</label>
<select class="form-control">
<option>Light</option>
<option selected>Regular</option>
<option>Extra</option>
</select>
</li>
</ul>
</div>
<div class="card mt-3">
<div class="card-header">Sauce</div>
<ul class="list-group">
<li class="list-group-item">
<label>What Type?</label>
<select class="form-control">
<option>Robust Inspired Tomato Sauce</option>
<option>White Sauce</option>
<option>BBQ Sauce</option>
</select>
</li>
<li class="list-group-item">
<label>How Much?</label>
<select class="form-control">
<option>Light</option>
<option selected>Regular</option>
<option>Heavy</option>
</select>
</li>
</ul>
</div>
</div>
<div class="card-footer text-right">
<div class="btn-group" role="group" aria-label="...">
<button class="btn btn-primary">
<i class="fas fa-angle-left"></i>
Previous Step
</button>
<button class="btn btn-primary">
Next Step
<i class="fas fa-angle-right"></i>
</button>
</div>
</div>
</div>
<div class="card mt-3">
<div class="card-header text-white bg-primary">Choose Toppings</div>
<div class="card-body">
<div class="card">
<div class="card-header">Choose Meats</div>
<ul class="list-group">
<li class="list-group-item">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox">
Beef
</label>
</div>
</li>
<li class="list-group-item">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox">
Ham
</label>
</div>
</li>
<li class="list-group-item">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox">
Philly Steak
</label>
</div>
</li>
<li class="list-group-item">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox">
Bacon
</label>
</div>
</li>
</ul>
</div>
<div class="card mt-3">
<div class="card-header">Choose Non-Meats</div>
<ul class="list-group">
<li class="list-group-item">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox">
Green Peppers
</label>
</div>
</li>
<li class="list-group-item">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox">
Mushrooms
</label>
</div>
</li>
<li class="list-group-item">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox">
Onions
</label>
</div>
</li>
<li class="list-group-item">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox">
Jalepeño Peppers
</label>
</div>
</li>
</ul>
</div>
</div>
<div class="card-footer text-right">
<button class="btn btn-primary">
Checkout
<i class="fas fa-shopping-cart"></i>
</button>
</div>
</div>
</div>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment