43 lines
1.4 KiB
HTML
43 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Responsive numeric stepper</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
|
|
<link rel="stylesheet" href="./style.css">
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div class="passengers">
|
|
<h1>Select number of passengers</h1>
|
|
<div class="passenger">
|
|
<p class="passenger__label">Adult <span>(age 12 & up)</span></p>
|
|
<div class="passenger__stepper">
|
|
<button type="button" class="stepper stepper__less">-</button>
|
|
<p class="stepper__display">1</p>
|
|
<button type="button" class="stepper stepper__more">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="passenger">
|
|
<p class="passenger__label">Children <span>(age 2-11yrs)</span></p>
|
|
<div class="passenger__stepper">
|
|
<button type="button" class="stepper stepper__less">-</button>
|
|
<p class="stepper__display">1</p>
|
|
<button type="button" class="stepper stepper__more">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="passenger">
|
|
<p class="passenger__label">Infant <span>(age 1-23mths)</span></p>
|
|
<div class="passenger__stepper">
|
|
<button type="button" class="stepper stepper__less">-</button>
|
|
<p class="stepper__display">1</p>
|
|
<button type="button" class="stepper stepper__more">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
|
|
</body>
|
|
</html>
|