Skip to content

Instantly share code, notes, and snippets.

@Flashwalker

Flashwalker/index.html

Created August 24, 2021 07:33
Show Gist options
  • Save Flashwalker/9c6f8687a069fdcc2308fb1fc5ba660d to your computer and use it in GitHub Desktop.
Save Flashwalker/9c6f8687a069fdcc2308fb1fc5ba660d to your computer and use it in GitHub Desktop.
Download ZIP
Responsive stepper - JS Bin // source https://jsbin.com/potifat
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Responsive stepper - JS Bin</title>
<style id="jsbin-css">
.t-body {
margin: 0;
}
a, b, blockquote, center, code, div, h1, h2, h3, h4, h5, h6, i, img, p, pre, span, table, td, th, tr, u, video {
margin: 0;
padding: 0;
border: 0;
}
*, :after, :before {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.t-records {
-webkit-font_smoothing: antialiased;
background-color: none;
}
#allrecords {
-webkit-font-smoothing: antialiased;
background-color: none;
}
.t-rec_pt_0 {
padding-top: 0;
}
.t-rec_pb_150 {
padding-bottom: 150px;
}
.t-container, .t-container_10, .t-container_8 {
margin-left: auto;
margin-right: auto;
padding: 0;
width: 100%;
}
.t-container {
max-width: 1200px;
}
.t-clear, .t-container:after, .t-container_100:after, .t-container_10:after, .t-container_8:after {
clear: both;
}
.t-container:after,
.t-container:before,
.t-container_100:after,
.t-container_100:before,
.t-container_10:after,
.t-container_10:before,
.t-container_8:after,
.t-container_8:before {
display: table;
content: " ";
}
.t-col {
display: inline;
float: left;
margin-left: 20px;
margin-right: 20px;
width: 100%;
}
.t-col_3 {
max-width: 260px;
}
.t563__numberwrapper {
position: relative;
}
.t-align_left {
text-align: left;
}
.t563__number {
position: relative;
z-index: 1;
width: 34px;
height: 34px;
background-color: #222;
border-radius: 100%;
border: 2px solid #fff;
}
.t563__line {
position: absolute;
top: 50%;
left: 0;
right: -40px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background-color: #222;
height: 2px;
}
.t563__col:first-child .t563__line {
left: 2px;
}
.t563__col:last-child .t563__line {
display: none;
}
.t-text {
font-family: 'IBM Plex Sans',Arial,sans-serif;
font-weight: 300;
color: #000;
}
.t-text_xs {
font-size: 15px;
line-height: 1.55;
}
.t563__text {
margin-top: 16px;
}
.t-name {
font-family: 'Montserrat',Arial,sans-serif;
font-weight: 600;
color: #000;
}
.t-name_md {
font-size: 20px;
line-height: 1.35;
}
.t-name_xs {
font-size: 16px;
line-height: 1.35;
}
.t563__digit {
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #fff;
}
.t563__title {
margin-top: 20px;
}
@media screen and (max-width: 1200px){
.t-col {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 100%;
}
.t-col_3 {
max-width: 220px;
}
.t-container {
max-width: 960px;
padding: 0;
}
.t-name_xs {
line-height: 1.35;
font-size: 14px;
}
.t-text_xs {
font-size: 14px;
}
}
@media screen and (max-width: 960px){
.t-col, .t-container.flexx, .t-container_flex {
display: block;
}
.t-col, .t-col_1, .t-col_10, .t-col_11, .t-col_12, .t-col_2, .t-col_3, .t-col_4, .t-col_5, .t-col_6, .t-col_7, .t-col_8, .t-col_9 {
width: 100%;
max-width: 100%;
}
.t-col {
float: none;
padding-left: 20px;
padding-right: 20px;
margin: 0;
box-sizing: border-box;
}
.t563__col:last-child {
margin-bottom: 0;
}
.t-container {
max-width: 640px;
}
.t563__textwrapper {
padding-left: 22px;
}
.t563__numberwrapper, .t563__textwrapper {
display: table-cell;
vertical-align: top;
padding-bottom: 40px;
}
.t563__col:last-child .t563__numberwrapper, .t563__col:last-child .t563__textwrapper {
padding-bottom: 0;
}
.t563__line {
display: none;
}
.t563__line_mobile {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #1f5bff;
width: 2px;
}
.t563__col:last-child .t563__line_mobile {
display: none;
}
.t563__title {
margin-top: 0!important;
}
.t563__text {
margin-top: 8px;
}
}
@media screen and (max-width: 640px){
.t-name_xs {
font-size: 12px;
}
.t-text_xs {
font-size: 12px;
line-height: 1.45;
}
}
@media screen and (max-width: 480px){
.t-rec_pt_0 {
padding-top: 0;
}
.t-rec_pb_150 {
padding-bottom: 150px;
}
}
@media screen and (min-width: 960px) {
.t563__textwrapper {
padding-left: 0!important;
}
}
@media screen and (min-width: 980px) {
div:not(.t396) .t-animate[data-animate-style="fadein"], div:not(.t396) .t-animate[data-animate-style="fadeinup"], div:not(.t396) .t-animate[data-animate-style="fadeindown"], div:not(.t396) .t-animate[data-animate-style="fadeinleft"], div:not(.t396) .t-animate[data-animate-style="fadeinright"], div:not(.t396) .t-animate[data-animate-style="zoomin"], div:not(.t396) .t-animate[data-animate-style="zoomout"] {
opacity: 0;
-webkit-transition-property: opacity,transform;
transition-property: opacity,transform;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: cubic-bezier(.19,1,.22,1);
transition-timing-function: cubic-bezier(.19,1,.22,1);
-webkit-backface-visibility: hidden;
}
div:not(.t396) .t-animate_started[data-animate-style="fadein"] {
opacity: 1;
}
div:not(.t396) .t-animate[data-animate-style="fadeinleft"] {
-webkit-transform: translate(100px,0);
transform: translate(100px,0);
}
div:not(.t396) .t-animate_started[data-animate-style="fadeinleft"] {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
</style>
</head>
<body class="t-body" style="margin: 0px;">
<div id="allrecords" data-tilda-export="yes" class="t-records t-records_animated t-records_visible" data-hook="blocks-collection-content-node" data-tilda-project-id="2247290" data-tilda-page-id="10979544" data-tilda-page-alias="main" data-tilda-formskey="53175bf9b3bb241e3930ea24a134f805" data-tilda-lazy="yes" style="overflow-x: hidden;">
<div id="rec209884702" class="r t-rec t-rec_pt_0 t-rec_pb_150" style="padding-top:0px;padding-bottom:150px;background-color:#6d36b0; " data-record-type="563" data-bg-color="#6d36b0" data-animationappear="off">
<!-- T563 -->
<div class="t563">
<div class="t-container">
<div class="t563__col t-col t-col_3">
<div class="t563__numberwrapper t-animate t-animate_started" data-animate-style="fadein" data-animate-group="yes" data-animate-order="1" style="transition-delay: 0s;">
<div class="t563__number" style=" border-width: 2px; background: #6d36b0;">
<div class="t563__digit t-name t-name_xs" style="">1</div>
</div>
<div class="t563__line" style="height: 2px; background-color: #ffffff;"></div>
<div class="t563__line_mobile" style="width: 2px; background-color: #ffffff;"></div>
</div>
<div class="t563__textwrapper t-align_left t-animate t-animate__chain_first-in-row t-animate_started t-animate__chain_showed" data-animate-style="fadeinleft" data-animate-chain="yes" data-animate-start-time="1629784303040" style="transition-delay: 0s;">
<div class="t563__title t-name t-name_md" style="color:#ffffff;" field="title">
<div style="font-size:22px;" data-customstyle="yes">Выбор товара или услуги</div>
</div>
<div class="t563__text t-text t-text_xs" style="color:#ffffff;" field="descr">
<div style="font-size:16px;" data-customstyle="yes">Клиент выбирает товар или услугу и решает оформить рассрочку или кредит</div>
</div>
</div>
</div>
<div class="t563__col t-col t-col_3">
<div class="t563__numberwrapper t-animate t-animate_started" data-animate-style="fadein" data-animate-group="yes" data-animate-order="1" style="transition-delay: 0s;">
<div class="t563__number" style=" border-width: 2px; background: #6d36b0;">
<div class="t563__digit t-name t-name_xs" style="">2</div>
</div>
<div class="t563__line" style="height: 2px; background-color: #ffffff;"></div>
<div class="t563__line_mobile" style="width: 2px; background-color: #ffffff;"></div>
</div>
<div class="t563__textwrapper t-align_left t-animate t-animate_started" data-animate-style="fadeinleft" data-animate-chain="yes" data-animate-start-time="1629784303200" style="transition-delay: 0.16s;">
<div class="t563__title t-name t-name_md" style="color:#ffffff;" field="title2">
<div style="font-size:22px;" data-customstyle="yes">Заполнение короткой анкеты</div>
</div>
<div class="t563__text t-text t-text_xs" style="color:#ffffff;" field="descr2">
<div style="font-size:16px;" data-customstyle="yes">Клиент заполняет короткую анкету, заявка моментально уходит в несколько банков</div>
</div>
</div>
</div>
<div class="t563__col t-col t-col_3">
<div class="t563__numberwrapper t-animate t-animate_started" data-animate-style="fadein" data-animate-group="yes" data-animate-order="1" style="transition-delay: 0s;">
<div class="t563__number" style=" border-width: 2px; background: #6d36b0;">
<div class="t563__digit t-name t-name_xs" style="">3</div>
</div>
<div class="t563__line" style="height: 2px; background-color: #ffffff;"></div>
<div class="t563__line_mobile" style="width: 2px; background-color: #ffffff;"></div>
</div>
<div class="t563__textwrapper t-align_left t-animate t-animate_started" data-animate-style="fadeinleft" data-animate-chain="yes" data-animate-start-time="1629784303360" style="transition-delay: 0.32s;">
<div class="t563__title t-name t-name_md" style="color:#ffffff;" field="title3">
<div style="font-size:22px;" data-customstyle="yes">Быстрое одобрение заявки</div>
</div>
<div class="t563__text t-text t-text_xs" style="color:#ffffff;" field="descr3">
<div style="font-size:16px;" data-customstyle="yes">Клиент получает решение от нескольких банков и выбирает наиболее выгодный для него вариант</div>
</div>
</div>
</div>
<div class="t563__col t-col t-col_3">
<div class="t563__numberwrapper t-animate t-animate_started" data-animate-style="fadein" data-animate-group="yes" data-animate-order="1" style="transition-delay: 0s;">
<div class="t563__number" style=" border-width: 2px; background: #6d36b0;">
<div class="t563__digit t-name t-name_xs" style="">4</div>
</div>
<div class="t563__line" style="height: 2px; background-color: #ffffff;"></div>
<div class="t563__line_mobile" style="width: 2px; background-color: #ffffff;"></div>
</div>
<div class="t563__textwrapper t-align_left t-animate t-animate_started" data-animate-style="fadeinleft" data-animate-chain="yes" data-animate-start-time="1629784303520" style="transition-delay: 0.48s;">
<div class="t563__title t-name t-name_md" style="color:#ffffff;" field="title4">
<div style="font-size:22px;" data-customstyle="yes">Подписание договора</div>
</div>
<div class="t563__text t-text t-text_xs" style="color:#ffffff;" field="descr4">
<div style="font-size:16px;" data-customstyle="yes">Для оформления рассрочки или кредита клиент подписывает договор с помощью SMS на сайте или бумажный договор в точке продаж. После этого он получает товар</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script id="jsbin-source-css" type="text/css">.t-body {
margin: 0;
}
a, b, blockquote, center, code, div, h1, h2, h3, h4, h5, h6, i, img, p, pre, span, table, td, th, tr, u, video {
margin: 0;
padding: 0;
border: 0;
}
*, :after, :before {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.t-records {
-webkit-font_smoothing: antialiased;
background-color: none;
}
#allrecords {
-webkit-font-smoothing: antialiased;
background-color: none;
}
.t-rec_pt_0 {
padding-top: 0;
}
.t-rec_pb_150 {
padding-bottom: 150px;
}
.t-container, .t-container_10, .t-container_8 {
margin-left: auto;
margin-right: auto;
padding: 0;
width: 100%;
}
.t-container {
max-width: 1200px;
}
.t-clear, .t-container:after, .t-container_100:after, .t-container_10:after, .t-container_8:after {
clear: both;
}
.t-container:after,
.t-container:before,
.t-container_100:after,
.t-container_100:before,
.t-container_10:after,
.t-container_10:before,
.t-container_8:after,
.t-container_8:before {
display: table;
content: " ";
}
.t-col {
display: inline;
float: left;
margin-left: 20px;
margin-right: 20px;
width: 100%;
}
.t-col_3 {
max-width: 260px;
}
.t563__numberwrapper {
position: relative;
}
.t-align_left {
text-align: left;
}
.t563__number {
position: relative;
z-index: 1;
width: 34px;
height: 34px;
background-color: #222;
border-radius: 100%;
border: 2px solid #fff;
}
.t563__line {
position: absolute;
top: 50%;
left: 0;
right: -40px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background-color: #222;
height: 2px;
}
.t563__col:first-child .t563__line {
left: 2px;
}
.t563__col:last-child .t563__line {
display: none;
}
.t-text {
font-family: 'IBM Plex Sans',Arial,sans-serif;
font-weight: 300;
color: #000;
}
.t-text_xs {
font-size: 15px;
line-height: 1.55;
}
.t563__text {
margin-top: 16px;
}
.t-name {
font-family: 'Montserrat',Arial,sans-serif;
font-weight: 600;
color: #000;
}
.t-name_md {
font-size: 20px;
line-height: 1.35;
}
.t-name_xs {
font-size: 16px;
line-height: 1.35;
}
.t563__digit {
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #fff;
}
.t563__title {
margin-top: 20px;
}
@media screen and (max-width: 1200px){
.t-col {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 100%;
}
.t-col_3 {
max-width: 220px;
}
.t-container {
max-width: 960px;
padding: 0;
}
.t-name_xs {
line-height: 1.35;
font-size: 14px;
}
.t-text_xs {
font-size: 14px;
}
}
@media screen and (max-width: 960px){
.t-col, .t-container.flexx, .t-container_flex {
display: block;
}
.t-col, .t-col_1, .t-col_10, .t-col_11, .t-col_12, .t-col_2, .t-col_3, .t-col_4, .t-col_5, .t-col_6, .t-col_7, .t-col_8, .t-col_9 {
width: 100%;
max-width: 100%;
}
.t-col {
float: none;
padding-left: 20px;
padding-right: 20px;
margin: 0;
box-sizing: border-box;
}
.t563__col:last-child {
margin-bottom: 0;
}
.t-container {
max-width: 640px;
}
.t563__textwrapper {
padding-left: 22px;
}
.t563__numberwrapper, .t563__textwrapper {
display: table-cell;
vertical-align: top;
padding-bottom: 40px;
}
.t563__col:last-child .t563__numberwrapper, .t563__col:last-child .t563__textwrapper {
padding-bottom: 0;
}
.t563__line {
display: none;
}
.t563__line_mobile {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #1f5bff;
width: 2px;
}
.t563__col:last-child .t563__line_mobile {
display: none;
}
.t563__title {
margin-top: 0!important;
}
.t563__text {
margin-top: 8px;
}
}
@media screen and (max-width: 640px){
.t-name_xs {
font-size: 12px;
}
.t-text_xs {
font-size: 12px;
line-height: 1.45;
}
}
@media screen and (max-width: 480px){
.t-rec_pt_0 {
padding-top: 0;
}
.t-rec_pb_150 {
padding-bottom: 150px;
}
}
@media screen and (min-width: 960px) {
.t563__textwrapper {
padding-left: 0!important;
}
}
@media screen and (min-width: 980px) {
div:not(.t396) .t-animate[data-animate-style="fadein"], div:not(.t396) .t-animate[data-animate-style="fadeinup"], div:not(.t396) .t-animate[data-animate-style="fadeindown"], div:not(.t396) .t-animate[data-animate-style="fadeinleft"], div:not(.t396) .t-animate[data-animate-style="fadeinright"], div:not(.t396) .t-animate[data-animate-style="zoomin"], div:not(.t396) .t-animate[data-animate-style="zoomout"] {
opacity: 0;
-webkit-transition-property: opacity,transform;
transition-property: opacity,transform;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: cubic-bezier(.19,1,.22,1);
transition-timing-function: cubic-bezier(.19,1,.22,1);
-webkit-backface-visibility: hidden;
}
div:not(.t396) .t-animate_started[data-animate-style="fadein"] {
opacity: 1;
}
div:not(.t396) .t-animate[data-animate-style="fadeinleft"] {
-webkit-transform: translate(100px,0);
transform: translate(100px,0);
}
div:not(.t396) .t-animate_started[data-animate-style="fadeinleft"] {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
</script>
</body>
</html>
Raw
jsbin.potifat.css
.t-body {
margin: 0;
}
a, b, blockquote, center, code, div, h1, h2, h3, h4, h5, h6, i, img, p, pre, span, table, td, th, tr, u, video {
margin: 0;
padding: 0;
border: 0;
}
*, :after, :before {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.t-records {
-webkit-font_smoothing: antialiased;
background-color: none;
}
#allrecords {
-webkit-font-smoothing: antialiased;
background-color: none;
}
.t-rec_pt_0 {
padding-top: 0;
}
.t-rec_pb_150 {
padding-bottom: 150px;
}
.t-container, .t-container_10, .t-container_8 {
margin-left: auto;
margin-right: auto;
padding: 0;
width: 100%;
}
.t-container {
max-width: 1200px;
}
.t-clear, .t-container:after, .t-container_100:after, .t-container_10:after, .t-container_8:after {
clear: both;
}
.t-container:after,
.t-container:before,
.t-container_100:after,
.t-container_100:before,
.t-container_10:after,
.t-container_10:before,
.t-container_8:after,
.t-container_8:before {
display: table;
content: " ";
}
.t-col {
display: inline;
float: left;
margin-left: 20px;
margin-right: 20px;
width: 100%;
}
.t-col_3 {
max-width: 260px;
}
.t563__numberwrapper {
position: relative;
}
.t-align_left {
text-align: left;
}
.t563__number {
position: relative;
z-index: 1;
width: 34px;
height: 34px;
background-color: #222;
border-radius: 100%;
border: 2px solid #fff;
}
.t563__line {
position: absolute;
top: 50%;
left: 0;
right: -40px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background-color: #222;
height: 2px;
}
.t563__col:first-child .t563__line {
left: 2px;
}
.t563__col:last-child .t563__line {
display: none;
}
.t-text {
font-family: 'IBM Plex Sans',Arial,sans-serif;
font-weight: 300;
color: #000;
}
.t-text_xs {
font-size: 15px;
line-height: 1.55;
}
.t563__text {
margin-top: 16px;
}
.t-name {
font-family: 'Montserrat',Arial,sans-serif;
font-weight: 600;
color: #000;
}
.t-name_md {
font-size: 20px;
line-height: 1.35;
}
.t-name_xs {
font-size: 16px;
line-height: 1.35;
}
.t563__digit {
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #fff;
}
.t563__title {
margin-top: 20px;
}
@media screen and (max-width: 1200px){
.t-col {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 100%;
}
.t-col_3 {
max-width: 220px;
}
.t-container {
max-width: 960px;
padding: 0;
}
.t-name_xs {
line-height: 1.35;
font-size: 14px;
}
.t-text_xs {
font-size: 14px;
}
}
@media screen and (max-width: 960px){
.t-col, .t-container.flexx, .t-container_flex {
display: block;
}
.t-col, .t-col_1, .t-col_10, .t-col_11, .t-col_12, .t-col_2, .t-col_3, .t-col_4, .t-col_5, .t-col_6, .t-col_7, .t-col_8, .t-col_9 {
width: 100%;
max-width: 100%;
}
.t-col {
float: none;
padding-left: 20px;
padding-right: 20px;
margin: 0;
box-sizing: border-box;
}
.t563__col:last-child {
margin-bottom: 0;
}
.t-container {
max-width: 640px;
}
.t563__textwrapper {
padding-left: 22px;
}
.t563__numberwrapper, .t563__textwrapper {
display: table-cell;
vertical-align: top;
padding-bottom: 40px;
}
.t563__col:last-child .t563__numberwrapper, .t563__col:last-child .t563__textwrapper {
padding-bottom: 0;
}
.t563__line {
display: none;
}
.t563__line_mobile {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #1f5bff;
width: 2px;
}
.t563__col:last-child .t563__line_mobile {
display: none;
}
.t563__title {
margin-top: 0!important;
}
.t563__text {
margin-top: 8px;
}
}
@media screen and (max-width: 640px){
.t-name_xs {
font-size: 12px;
}
.t-text_xs {
font-size: 12px;
line-height: 1.45;
}
}
@media screen and (max-width: 480px){
.t-rec_pt_0 {
padding-top: 0;
}
.t-rec_pb_150 {
padding-bottom: 150px;
}
}
@media screen and (min-width: 960px) {
.t563__textwrapper {
padding-left: 0!important;
}
}
@media screen and (min-width: 980px) {
div:not(.t396) .t-animate[data-animate-style="fadein"], div:not(.t396) .t-animate[data-animate-style="fadeinup"], div:not(.t396) .t-animate[data-animate-style="fadeindown"], div:not(.t396) .t-animate[data-animate-style="fadeinleft"], div:not(.t396) .t-animate[data-animate-style="fadeinright"], div:not(.t396) .t-animate[data-animate-style="zoomin"], div:not(.t396) .t-animate[data-animate-style="zoomout"] {
opacity: 0;
-webkit-transition-property: opacity,transform;
transition-property: opacity,transform;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: cubic-bezier(.19,1,.22,1);
transition-timing-function: cubic-bezier(.19,1,.22,1);
-webkit-backface-visibility: hidden;
}
div:not(.t396) .t-animate_started[data-animate-style="fadein"] {
opacity: 1;
}
div:not(.t396) .t-animate[data-animate-style="fadeinleft"] {
-webkit-transform: translate(100px,0);
transform: translate(100px,0);
}
div:not(.t396) .t-animate_started[data-animate-style="fadeinleft"] {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment