331 lines
16 KiB
HTML
331 lines
16 KiB
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">
|
||
<title>ABC</title>
|
||
<!-- Bootstrap -->
|
||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||
<link href="css/style.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="css/responsive.css">
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<div class="container">
|
||
<div class="logo d-flex">
|
||
<img src="img/logo.jpg" alt="">
|
||
<span class="d-flex align-items-center justify-content-center">
|
||
<h1>Continuing Education Registration</h1>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<section class="abc-tab">
|
||
<div class="container">
|
||
<div class="d-flex flex-row nav">
|
||
<div><a href="index.html">Anaheim</a></div>
|
||
<div> <a href="laventura.html" class="active">LA / Ventura</a></div>
|
||
</div>
|
||
<!-- first item -->
|
||
<div class="abc-detail d-flex">
|
||
<div class="title">
|
||
<h2 class="justify-content-center d-flex">Class Title</h2>
|
||
<div class="adv"> Advanced Mechanic's Lien Hrs<span class="hr-span">4</span></div>
|
||
<div class="date"><span> <input type="checkbox" id="start" class="check_box" placeholder="start"><label for="start"></label>Start Date:</span>
|
||
<span>10/12/2018</span>
|
||
<span>3pm </span>
|
||
<span>M, W, F</span>
|
||
</div>
|
||
</div>
|
||
<div class="seat">
|
||
<h2 class="justify-content-center d-flex">Seats Remaining</h2>
|
||
<span> 25</span>
|
||
</div>
|
||
</div>
|
||
<div class="abc-expand start">
|
||
<div class="member d-flex"> <span>Member / Alumni: $165.00 </span> <span> Non -Member: $265.00 </span> <span>SE: $0.00</span></div>
|
||
<div class="d-flex class-des">
|
||
<div class="col-md-5 no-pad">
|
||
<h2>Class Description</h2>
|
||
<p>Class follows the American Traffic Safety Services Association curriculum.</p>
|
||
<span>Instructor: Samuel Smith</span>
|
||
</div>
|
||
<div class="col-md-7">
|
||
<h2>Class Details</h2>
|
||
<p>Start Date: 08/06/2018<br>
|
||
End Date: 08/30/2018<br>
|
||
Time: 5:00 pm – 9:00 pm<br>
|
||
Location: Room 102<br>
|
||
Days of Week: M, T, W, TH, F<br>
|
||
Seats Available: 28<br>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="attendee">
|
||
<h3>Attendee Info</h3>
|
||
<label>Member / Alumni</label>
|
||
<div class="member flex-row d-flex flex-wrap">
|
||
<div class="col-sm-10 no-pad">
|
||
<ul class="d-flex">
|
||
<li><input type="text" placeholder="First Name*"></li>
|
||
<li><input type="text" placeholder="Last Name*"></li>
|
||
<li><input type="text" placeholder="Email Address*"></li>
|
||
<li><input type="text" placeholder="Phone Number*"></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-sm-2 enroll-btn">
|
||
<label class="d-flex">
|
||
<span>+</span>
|
||
<p>Enroll Attendee</p>
|
||
</label>
|
||
</div>
|
||
<div class="col-sm-10 clone-append no-pad"> </div>
|
||
</div>
|
||
|
||
<label>Non-Member</label>
|
||
<div class="member flex-row d-flex flex-wrap">
|
||
<div class="col-sm-10 no-pad">
|
||
<ul class="d-flex">
|
||
<li><input type="text" placeholder="First Name*"></li>
|
||
<li><input type="text" placeholder="Last Name*"></li>
|
||
<li><input type="text" placeholder="Email Address*"></li>
|
||
<li><input type="text" placeholder="Phone Number*"></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-sm-2 enroll-btn">
|
||
<label class="d-flex">
|
||
<span>+</span>
|
||
<p>Enroll Attendee</p>
|
||
</label>
|
||
</div>
|
||
<div class="col-sm-10 clone-append no-pad"> </div>
|
||
</div>
|
||
|
||
<label>Subscribing Employer</label>
|
||
<div class="member flex-row d-flex flex-wrap">
|
||
<div class="col-sm-10 no-pad">
|
||
<ul class="d-flex">
|
||
<li><input type="text" placeholder="First Name*"></li>
|
||
<li><input type="text" placeholder="Last Name*"></li>
|
||
<li><input type="text" placeholder="Email Address*"></li>
|
||
<li><input type="text" placeholder="Phone Number*"></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-sm-2 enroll-btn">
|
||
<label class="d-flex">
|
||
<span>+</span>
|
||
<p>Enroll Attendee</p>
|
||
</label>
|
||
</div>
|
||
<div class="col-sm-10 clone-append no-pad"> </div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<div class="class-total">
|
||
<h3>Class Totals</h3>
|
||
<div class="alumi">
|
||
<label>Member / Alumni</label>
|
||
<div class="d-flex alumi-content">
|
||
<div class="col-sm-8">Joe Smith jsmith@yahoo.com (714) 293-2310 <span> X </span></div>
|
||
<div class="col-sm-4">$ 196.00</div>
|
||
</div>
|
||
<label>Non-Member</label>
|
||
<div class="d-flex alumi-content">
|
||
<div class="col-sm-8">Sam Smith ssmith@yahoo.com (909) 797-1234 <span> X </span></div>
|
||
<div class="col-sm-4">$ 254.00</div>
|
||
</div>
|
||
<div class="d-flex alumi-content">
|
||
<div class="col-sm-8">Bob Jones bobjones@msn.com (714) 555-2222 <span> X </span></div>
|
||
<div class="col-sm-4">$ 254.00</div>
|
||
</div>
|
||
<div class="d-flex alumi-content">
|
||
<div class="col-sm-8">Sam Smith ssmith@yahoo.com (909) 797-1234 <span> X </span></div>
|
||
<div class="col-sm-4">$ 254.00</div>
|
||
</div>
|
||
<label>Subscribing Employer</label>
|
||
<div class="d-flex alumi-content">
|
||
<div class="col-sm-8">Joe Smith jsmith@yahoo.com (714) 293-2310 <span> X </span></div>
|
||
<div class="col-sm-4">$ 254.00</div>
|
||
</div>
|
||
<div class="d-flex alumi-content class-sum">
|
||
<div class="col-sm-8">Class Total</div>
|
||
<div class="col-sm-4">$ 958.00</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /first item -->
|
||
|
||
|
||
<!-- second item-->
|
||
<div class="abc-detail d-flex">
|
||
<div class="title">
|
||
<h2 class="justify-content-center d-flex">Class Title</h2>
|
||
<div class="adv"> Advanced Mechanic's Lien Hrs<span class="hr-span">4</span></div>
|
||
<div class="date"><span> <input type="checkbox" id="start1" class="check_box" placeholder="start1"><label for="start1"></label>Start Date:</span>
|
||
<span>10/12/2018</span>
|
||
<span>3pm </span>
|
||
<span>M, W, F</span>
|
||
</div>
|
||
</div>
|
||
<div class="seat">
|
||
<h2 class="justify-content-center d-flex">Seats Remaining</h2>
|
||
<span> 25</span>
|
||
</div>
|
||
</div>
|
||
<div class="abc-expand start1">
|
||
<div class="member"> <span>Member / Alumni: $165.00 </span> <span> Non -Member: $265.00 </span> <span>SE: $0.00</span></div>
|
||
<div class="d-flex class-des">
|
||
<div class="col-md-5 no-pad">
|
||
<h2>Class Description</h2>
|
||
<p>Class follows the American Traffic Safety Services Association curriculum.</p>
|
||
<span>Instructor: Samuel Smith</span>
|
||
</div>
|
||
<div class="col-md-7">
|
||
<h2>Class Details</h2>
|
||
<p>Start Date: 08/06/2018<br>
|
||
End Date: 08/30/2018<br>
|
||
Time: 5:00 pm – 9:00 pm<br>
|
||
Location: Room 102<br>
|
||
Days of Week: M, T, W, TH, F<br>
|
||
Seats Available: 28<br>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="attendee">
|
||
<h3>Attendee Info</h3>
|
||
<label>Member / Alumni</label>
|
||
<div class="member flex-row d-flex flex-wrap">
|
||
<div class="col-sm-10 no-pad">
|
||
<ul class="d-flex">
|
||
<li><input type="text" placeholder="First Name*"></li>
|
||
<li><input type="text" placeholder="Last Name*"></li>
|
||
<li><input type="text" placeholder="Email Address*"></li>
|
||
<li><input type="text" placeholder="Phone Number*"></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-sm-2 enroll-btn">
|
||
<label class="d-flex">
|
||
<span>+</span>
|
||
<p>Enroll Attendee</p>
|
||
</label>
|
||
</div>
|
||
<div class="col-sm-10 clone-append no-pad"> </div>
|
||
</div>
|
||
|
||
<label>Non-Member</label>
|
||
<div class="member flex-row d-flex flex-wrap">
|
||
<div class="col-sm-10 no-pad">
|
||
<ul class="d-flex">
|
||
<li><input type="text" placeholder="First Name*"></li>
|
||
<li><input type="text" placeholder="Last Name*"></li>
|
||
<li><input type="text" placeholder="Email Address*"></li>
|
||
<li><input type="text" placeholder="Phone Number*"></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-sm-2 enroll-btn">
|
||
<label class="d-flex">
|
||
<span>+</span>
|
||
<p>Enroll Attendee</p>
|
||
</label>
|
||
</div>
|
||
<div class="col-sm-10 clone-append no-pad"> </div>
|
||
</div>
|
||
|
||
<label>Subscribing Employer</label>
|
||
<div class="member flex-row d-flex flex-wrap">
|
||
<div class="col-sm-10 no-pad">
|
||
<ul class="d-flex">
|
||
<li><input type="text" placeholder="First Name*"></li>
|
||
<li><input type="text" placeholder="Last Name*"></li>
|
||
<li><input type="text" placeholder="Email Address*"></li>
|
||
<li><input type="text" placeholder="Phone Number*"></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-sm-2 enroll-btn">
|
||
<label class="d-flex">
|
||
<span>+</span>
|
||
<p>Enroll Attendee</p>
|
||
</label>
|
||
</div>
|
||
<div class="col-sm-10 clone-append no-pad"> </div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<div class="class-total">
|
||
<h3>Class Totals</h3>
|
||
<div class="alumi">
|
||
<label>Member / Alumni</label>
|
||
<div class="d-flex alumi-content">
|
||
<div class="col-sm-8">Joe Smith jsmith@yahoo.com (714) 293-2310 <span> X </span></div>
|
||
<div class="col-sm-4">$ 196.00</div>
|
||
</div>
|
||
<label>Non-Member</label>
|
||
<div class="d-flex alumi-content">
|
||
<div class="col-sm-8">Sam Smith ssmith@yahoo.com (909) 797-1234 <span> X </span></div>
|
||
<div class="col-sm-4">$ 254.00</div>
|
||
</div>
|
||
<div class="d-flex alumi-content">
|
||
<div class="col-sm-8">Bob Jones bobjones@msn.com (714) 555-2222 <span> X </span></div>
|
||
<div class="col-sm-4">$ 254.00</div>
|
||
</div>
|
||
<div class="d-flex alumi-content">
|
||
<div class="col-sm-8">Sam Smith ssmith@yahoo.com (909) 797-1234 <span> X </span></div>
|
||
<div class="col-sm-4">$ 254.00</div>
|
||
</div>
|
||
<label>Subscribing Employer</label>
|
||
<div class="d-flex alumi-content">
|
||
<div class="col-sm-8">Joe Smith jsmith@yahoo.com (714) 293-2310 <span> X </span></div>
|
||
<div class="col-sm-4">$ 254.00</div>
|
||
</div>
|
||
<div class="d-flex alumi-content class-sum">
|
||
<div class="col-sm-8">Class Total</div>
|
||
<div class="col-sm-4">$ 958.00</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /seconditem -->
|
||
|
||
<div class="d-flex justify-content-between abc-btn">
|
||
<div class="p-2"><button type="button" class="btn" style="background: #899ec4;">Back</button></div>
|
||
<div class="p-2"><button type="button" class="btn" style="background: #ff0000; color: #fff; ">Reset</button></div>
|
||
<div class="p-2"><button type="button" class="btn" style="background: #333366; color: #fff;">Review Order</button></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
|
||
<script type="text/javascript">
|
||
$(document).ready(function() {
|
||
$(".enroll-btn").click(function(){
|
||
var html="";
|
||
html+='<div><ul class="d-flex">'
|
||
html+='<li><input type="text" placeholder="First Name*"></li>'
|
||
html+='<li><input type="text" placeholder="Last Name*"></li>'
|
||
html+=' <li><input type="text" placeholder="Email Address*"></li>'
|
||
html+=' <li><input type="text" placeholder="Phone Number*"></li> <button class="cls-btn"> X </button></ul></div>'
|
||
$(this).parent().find('.clone-append').append(html).html();
|
||
});
|
||
$('body').delegate(".cls-btn", "click",function(){
|
||
$(this).closest('div').hide();
|
||
// // $(this).parent().hide();
|
||
// $(this).parent().hide();
|
||
});
|
||
});
|
||
</script>
|
||
<script type="text/javascript">
|
||
$(document).ready(function(){
|
||
$('input[type="checkbox"]').click(function(){
|
||
var inputValue = $(this).attr("placeholder");
|
||
$("." + inputValue).toggle();
|
||
});
|
||
});
|
||
|
||
</script>
|
||
</body>
|
||
</html> |