ohidurbappy/stepper.html

## stepper.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.0">
    <title>Stepper</title>
    <style>

:root {
  --stepper-circle-size: clamp(1.5rem, 5vw, 3rem);
  --stepper-spacing: clamp(0.25rem, 2vw, 0.5rem);
}

.c-stepper {
  display: flex;
}

.c-stepper__item {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
}
.c-stepper__item:before {
  --size: 3rem;
  content: "";
  display: block;
  width: var(--stepper-circle-size);
  height: var(--stepper-circle-size);
  border-radius: 50%;
  background-color: lightgrey;
  opacity: 0.8;
  margin: 0 auto 1rem;
}

.c-stepper__item.is-active:before {
background-color: #006aff;
}

.c-stepper__item:not(:last-child):after {
  content: "";
  position: relative;
  top: calc(var(--stepper-circle-size) / 2);
  width: calc(100% - var(--stepper-circle-size) - calc(var(--stepper-spacing) * 2));
  left: calc(50% + calc(var(--stepper-circle-size) / 2 + var(--stepper-spacing)));
  height: 2px;
  background-color: #e0e0e0;
  order: -1;
}

.c-stepper__title {
color: #353536;
  font-weight: bold;
  font-size: clamp(1rem, 4vw, 1.25rem);
  margin-bottom: 0.5rem;
}

.c-stepper__desc {
  color: grey;
  font-size: clamp(0.85rem, 2vw, 1rem);
  padding-left: var(--stepper-spacing);
  padding-right: var(--stepper-spacing);
}

/*** Non-demo CSS ***/
.wrapper {
  max-width: 1000px;
  margin: 2rem auto 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  padding: 1rem;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.next-btn{
    background-color: #006aff;
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

    </style>
</head>
<body>
    <div>
        <h2 style="text-align:center">Create a new order</h2>
    </div>

    <div class="wrapper option-1 option-1-1">
        <ol class="c-stepper">
          <li class="c-stepper__item is-active">
            <h4 class="c-stepper__title">Select products</h4>
            <p class="c-stepper__desc"></p>
          </li>
          <li class="c-stepper__item">
            <h4 class="c-stepper__title">Provide shipping details</h4>
            <p class="c-stepper__desc"></p>
          </li>
          <li class="c-stepper__item">
            <h4 class="c-stepper__title">Checkout</h4>
            <p class="c-stepper__desc"></p>
          </li>
        </ol>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <button style="float:right" class="next-btn">Next</button>
      </div>

      <div>
      </div>


</body>
</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.0">
	<title>Stepper</title>
	<style>

	:root {
	--stepper-circle-size: clamp(1.5rem, 5vw, 3rem);
	--stepper-spacing: clamp(0.25rem, 2vw, 0.5rem);
	}

	.c-stepper {
	display: flex;
	}

	.c-stepper__item {
	display: flex;
	flex-direction: column;
	flex: 1;
	text-align: center;
	}
	.c-stepper__item:before {
	--size: 3rem;
	content: "";
	display: block;
	width: var(--stepper-circle-size);
	height: var(--stepper-circle-size);
	border-radius: 50%;
	background-color: lightgrey;
	opacity: 0.8;
	margin: 0 auto 1rem;
	}

	.c-stepper__item.is-active:before {
	background-color: #006aff;
	}

	.c-stepper__item:not(:last-child):after {
	content: "";
	position: relative;
	top: calc(var(--stepper-circle-size) / 2);
	width: calc(100% - var(--stepper-circle-size) - calc(var(--stepper-spacing) * 2));
	left: calc(50% + calc(var(--stepper-circle-size) / 2 + var(--stepper-spacing)));
	height: 2px;
	background-color: #e0e0e0;
	order: -1;
	}

	.c-stepper__title {
	color: #353536;
	font-weight: bold;
	font-size: clamp(1rem, 4vw, 1.25rem);
	margin-bottom: 0.5rem;
	}

	.c-stepper__desc {
	color: grey;
	font-size: clamp(0.85rem, 2vw, 1rem);
	padding-left: var(--stepper-spacing);
	padding-right: var(--stepper-spacing);
	}

	/* Non-demo CSS */
	.wrapper {
	max-width: 1000px;
	margin: 2rem auto 0;
	}

	body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	padding: 1rem;
	}

	*,
	*:before,
	*:after {
	box-sizing: border-box;
	}

	.next-btn{
	background-color: #006aff;
	color: white;
	border: none;
	padding: 1rem 2rem;
	border-radius: 5px;
	font-size: 1rem;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
	}

	</style>
	</head>
	<body>
	<div>
	<h2 style="text-align:center">Create a new order</h2>
	</div>

	<div class="wrapper option-1 option-1-1">
	<ol class="c-stepper">
	<li class="c-stepper__item is-active">
	<h4 class="c-stepper__title">Select products</h4>
	<p class="c-stepper__desc"></p>
	</li>
	<li class="c-stepper__item">
	<h4 class="c-stepper__title">Provide shipping details</h4>
	<p class="c-stepper__desc"></p>
	</li>
	<li class="c-stepper__item">
	<h4 class="c-stepper__title">Checkout</h4>
	<p class="c-stepper__desc"></p>
	</li>
	</ol>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<button style="float:right" class="next-btn">Next</button>
	</div>

	<div>
	</div>


	</body>
	</html>