web-html5-scripts/buttons-and-toggles/responsive-numeric-stepper/index.html

43 lines
1.4 KiB
HTML
Raw Permalink Normal View History

2020-05-07 20:51:13 +02:00
<!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>