HTML + CSS (возможно, Bootstrap Framework), создающий список LI 1 2 3

Question

Добрый день,

У меня довольно смутный вопрос.Я хотел бы сделать следующее в HTML:

Хотя я понятия не имею, как это называется.Я хочу использовать его следующим образом:

1. Перейти на наш сайт
2. Нажмите кнопку «Создать учетную запись» в левом верхнем углу
3. Заполните свои данные
4. Нажмите «Готово» и НАЙДИТЕ УДОВОЛЬСТВИЕ

Что-то в этом роде.

Но я бы хотел сделать это в HTML и CSS, и я точно не знаю, как это описать.

редактировать, вижу минус.Но я просто не знаю, как назвать это на правильном английском, поэтому найти ответ в Интернете очень сложно для меня.Я нахожу много ответов, но все не соответствуют тому, что я ищу.

Какой-то код был желателен, поэтому здесь я его пишу.

Я хотел бы включитьследующий код на картинке в стиле выше

<ol>
    <li>Go to our website</li>
    <li>Click on create account button in the left top corner</li>
    <li>Fill in your data</li>
    <li>Click finish and HAVE FUN</li>
</ol>

Answer 1

если я правильно понял, вы хотите что-то подобное.Я знаю, что есть правильный способ сделать это.Но, надеюсь, кто-то сможет предоставить вам лучший пример.

Вместо этого я хотел оставить это как комментарий в виде fiddle.Но у меня пока нет этой привилегии.

.vl {
    border-left: 2px solid #FF4500;
    height: 300px;
		transform: translatex(90px);
		position:absolute;
		z-index:-2;
}

.bullet-less {
	list-style:none;
}

.round-item {
	border: thin solid #FFA500;
	border-radius: 30px;
	padding: 20px;
	text-align:center;
	margin: 20px;
	width: 20px;
	font-weight:bold;
	background-color: #FFA500;
}

<div class="wrap">
	<div class="vl"></div>
	<ul class="bullet-less">
		<li class="round-item">1</li>
		<li class="round-item">2</li>
		<li class="round-item">3</li>
		<li class="round-item">4</li>
	</ul>
</div>