var form = $("#signup-form");
form.steps({
headerTag: "h3",
bodyTag: "fieldset",
transitionEffect: "fade",
labels: {
previous: 'Anterior',
next: 'Siguiente',
finish: 'Finalizar',
current: ''
},
titleTemplate: '<h3 class="title">#title#</h3>',
onFinished: function(event, currentIndex) {
alert('Sumited');
},
});
/* @extend display-flex; */
display-flex, .signup-content, .actions ul, .actions ul li a {
display: flex;
display: -webkit-flex; }
/* @extend list-type-ulli; */
list-type-ulli, .actions ul {
list-style-type: none;
margin: 0;
padding: 0; }
/* poppins-300 - latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 300;
src: url("../fonts/poppins/poppins-v5-latin-300.eot");
/* IE9 Compat Modes */
src: local("Poppins Light"), local("Poppins-Light"), url("../fonts/poppins/poppins-v5-latin-300.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-300.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-300.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-300.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-300.svg#Poppins") format("svg");
/* Legacy iOS */ }
/* poppins-300italic - latin */
@font-face {
font-family: 'Poppins';
font-style: italic;
font-weight: 300;
src: url("../fonts/poppins/poppins-v5-latin-300italic.eot");
/* IE9 Compat Modes */
src: local("Poppins Light Italic"), local("Poppins-LightItalic"), url("../fonts/poppins/poppins-v5-latin-300italic.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-300italic.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-300italic.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-300italic.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-300italic.svg#Poppins") format("svg");
/* Legacy iOS */ }
/* poppins-regular - latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
src: url("../fonts/poppins/poppins-v5-latin-regular.eot");
/* IE9 Compat Modes */
src: local("Poppins Regular"), local("Poppins-Regular"), url("../fonts/poppins/poppins-v5-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-regular.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-regular.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-regular.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-regular.svg#Poppins") format("svg");
/* Legacy iOS */ }
/* poppins-italic - latin */
@font-face {
font-family: 'Poppins';
font-style: italic;
font-weight: 400;
src: url("../fonts/poppins/poppins-v5-latin-italic.eot");
/* IE9 Compat Modes */
src: local("Poppins Italic"), local("Poppins-Italic"), url("../fonts/poppins/poppins-v5-latin-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-italic.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-italic.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-italic.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-italic.svg#Poppins") format("svg");
/* Legacy iOS */ }
/* poppins-500 - latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
src: url("../fonts/poppins/poppins-v5-latin-500.eot");
/* IE9 Compat Modes */
src: local("Poppins Medium"), local("Poppins-Medium"), url("../fonts/poppins/poppins-v5-latin-500.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-500.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-500.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-500.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-500.svg#Poppins") format("svg");
/* Legacy iOS */ }
/* poppins-500italic - latin */
@font-face {
font-family: 'Poppins';
font-style: italic;
font-weight: 500;
src: url("../fonts/poppins/poppins-v5-latin-500italic.eot");
/* IE9 Compat Modes */
src: local("Poppins Medium Italic"), local("Poppins-MediumItalic"), url("../fonts/poppins/poppins-v5-latin-500italic.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-500italic.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-500italic.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-500italic.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-500italic.svg#Poppins") format("svg");
/* Legacy iOS */ }
/* poppins-600 - latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
src: url("../fonts/poppins/poppins-v5-latin-600.eot");
/* IE9 Compat Modes */
src: local("Poppins SemiBold"), local("Poppins-SemiBold"), url("../fonts/poppins/poppins-v5-latin-600.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-600.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-600.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-600.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-600.svg#Poppins") format("svg");
/* Legacy iOS */ }
/* poppins-700 - latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
src: url("../fonts/poppins/poppins-v5-latin-700.eot");
/* IE9 Compat Modes */
src: local("Poppins Bold"), local("Poppins-Bold"), url("../fonts/poppins/poppins-v5-latin-700.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-700.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-700.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-700.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-700.svg#Poppins") format("svg");
/* Legacy iOS */ }
/* poppins-700italic - latin */
@font-face {
font-family: 'Poppins';
font-style: italic;
font-weight: 700;
src: url("../fonts/poppins/poppins-v5-latin-700italic.eot");
/* IE9 Compat Modes */
src: local("Poppins Bold Italic"), local("Poppins-BoldItalic"), url("../fonts/poppins/poppins-v5-latin-700italic.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-700italic.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-700italic.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-700italic.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-700italic.svg#Poppins") format("svg");
/* Legacy iOS */ }
/* poppins-800 - latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 800;
src: url("../fonts/poppins/poppins-v5-latin-800.eot");
/* IE9 Compat Modes */
src: local("Poppins ExtraBold"), local("Poppins-ExtraBold"), url("../fonts/poppins/poppins-v5-latin-800.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-800.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-800.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-800.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-800.svg#Poppins") format("svg");
/* Legacy iOS */ }
/* poppins-800italic - latin */
@font-face {
font-family: 'Poppins';
font-style: italic;
font-weight: 800;
src: url("../fonts/poppins/poppins-v5-latin-800italic.eot");
/* IE9 Compat Modes */
src: local("Poppins ExtraBold Italic"), local("Poppins-ExtraBoldItalic"), url("../fonts/poppins/poppins-v5-latin-800italic.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-800italic.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-800italic.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-800italic.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-800italic.svg#Poppins") format("svg");
/* Legacy iOS */ }
/* poppins-900 - latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 900;
src: url("../fonts/poppins/poppins-v5-latin-900.eot");
/* IE9 Compat Modes */
src: local("Poppins Black"), local("Poppins-Black"), url("../fonts/poppins/poppins-v5-latin-900.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-900.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-900.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-900.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-900.svg#Poppins") format("svg");
/* Legacy iOS */ }
@font-face {
font-family: 'Muli';
font-style: normal;
font-weight: 400;
src: url("../fonts/muli/Muli-Regular.ttf");
/* IE9 Compat Modes */ }
@font-face {
font-family: 'Muli';
font-style: normal;
font-weight: 800;
src: url("../fonts/muli/Muli-ExtraBold.ttf");
/* IE9 Compat Modes */ }
/* Montserrat-300 - latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 300;
src: url("../fonts/montserrat/Montserrat-Light.ttf");
/* IE9 Compat Modes */ }
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url("../fonts/montserrat/Montserrat-Regular.ttf");
/* IE9 Compat Modes */ }
@font-face {
font-family: 'Montserrat';
font-style: italic;
font-weight: 400;
src: url("../fonts/montserrat/Montserrat-Italic.ttf");
/* IE9 Compat Modes */ }
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
src: url("../fonts/montserrat/Montserrat-Medium.ttf");
/* IE9 Compat Modes */ }
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
src: url("../fonts/montserrat/Montserrat-SemiBold.ttf");
/* IE9 Compat Modes */ }
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
src: url("../fonts/montserrat/Montserrat-Bold.ttf");
/* IE9 Compat Modes */ }
@font-face {
font-family: 'Montserrat';
font-style: italic;
font-weight: 700;
src: url("../fonts/montserrat/Montserrat-BoldItalic.ttf");
/* IE9 Compat Modes */ }
@font-face {
font-family: 'Montserrat';
font-style: italic;
font-weight: 900;
src: url("../fonts/montserrat/montserrat-v12-latin-900.ttf"), url("../fonts/montserrat/montserrat-v12-latin-900.eot") format("embedded-opentype"), url("../fonts/montserrat/montserrat-v12-latin-900.svg") format("woff2"), url("../fonts/montserrat/montserrat-v12-latin-900.woff") format("woff"), url("../fonts/montserrat/montserrat-v12-latin-900.woff2") format("truetype"); }
a:focus,
a:active {
text-decoration: none;
outline: none;
transition: all 300ms ease 0s;
-moz-transition: all 300ms ease 0s;
-webkit-transition: all 300ms ease 0s;
-o-transition: all 300ms ease 0s;
-ms-transition: all 300ms ease 0s; }
input,
select,
textarea {
outline: none;
appearance: unset !important;
-moz-appearance: unset !important;
-webkit-appearance: unset !important;
-o-appearance: unset !important;
-ms-appearance: unset !important; }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
appearance: none !important;
-moz-appearance: none !important;
-webkit-appearance: none !important;
-o-appearance: none !important;
-ms-appearance: none !important;
margin: 0; }
input:focus,
select:focus,
textarea:focus {
outline: none;
box-shadow: none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
-o-box-shadow: none !important;
-ms-box-shadow: none !important; }
input[type=checkbox] {
appearance: checkbox !important;
-moz-appearance: checkbox !important;
-webkit-appearance: checkbox !important;
-o-appearance: checkbox !important;
-ms-appearance: checkbox !important; }
input[type=radio] {
appearance: radio !important;
-moz-appearance: radio !important;
-webkit-appearance: radio !important;
-o-appearance: radio !important;
-ms-appearance: radio !important; }
input:-webkit-autofill {
box-shadow: 0 0 0 30px transparent inset;
-moz-box-shadow: 0 0 0 30px transparent inset;
-webkit-box-shadow: 0 0 0 30px transparent inset;
-o-box-shadow: 0 0 0 30px transparent inset;
-ms-box-shadow: 0 0 0 30px transparent inset;
background-color: transparent !important; }
.clear {
clear: both; }
h2 {
font-size: 27px;
color: #222;
font-weight: 800;
font-family: 'Muli';
margin: 0px;
padding-bottom: 65px; }
h2 span {
color: #e08f24; }
body {
font-size: 13px;
line-height: 1.6;
color: #222;
font-weight: 400;
font-family: 'Poppins';
margin: 0px;
background: #222; }
.main {
padding: 50px 0; }
.container {
width: 1400px;
position: relative;
margin: 0 auto;
background: #efeeff; }
p {
margin: 0px; }
p.desc {
padding-bottom: 330px;
color: #999;
line-height: 1.92; }
p.title {
font-weight: bold;
padding-bottom: 7px; }
.signup-img {
padding-bottom: 43px; }
fieldset {
border: none;
padding: 0px;
margin: 0px; }
.signup-desc {
background: #fff;
width: 495px; }
.signup-desc-content {
padding: 45px 55px; }
.signup-form-conent {
width: 905px; }
.signup-form {
padding: 55px 110px; }
input {
display: block;
width: 100%;
border: none;
border-bottom: 1px solid #bfbfbf;
box-sizing: border-box;
font-family: 'Poppins';
font-weight: bold;
font-size: 24px;
transition: 0.3s ease;
-moz-transition: 0.3s ease;
-webkit-transition: 0.3s ease;
-o-transition: 0.3s ease;
-ms-transition: 0.3s ease;
padding-top: 30px;
padding-bottom: 5px;
-webkit-appearance: none;
background: transparent; }
input + label {
position: absolute;
transition: 0.25s ease;
-moz-transition: 0.25s ease;
-webkit-transition: 0.25s ease;
-o-transition: 0.25s ease;
-ms-transition: 0.25s ease;
left: 0;
top: 25px;
font-size: 24px;
font-weight: bold;
color: #888; }
input:focus + label {
top: -7px;
font-size: 14px;
font-weight: 500; }
input:valid + label {
top: -7px;
font-size: 14px;
font-weight: 500; }
.form-group {
position: relative; }
.field-icon {
font-size: 24px;
position: relative;
z-index: 2;
float: right;
margin-top: -37px; }
.content {
padding: 340px 0 315px 0;
position: relative; }
.content h3 {
display: none; }
.step-current {
position: absolute;
right: 0;
top: 0;
font-family: 'Montserrat';
text-transform: uppercase;
font-weight: 800;
color: #f38749; }
.actions ul {
width: 100%;
justify-content: flex-end;
-moz-justify-content: flex-end;
-webkit-justify-content: flex-end;
-o-justify-content: flex-end;
-ms-justify-content: flex-end; }
.actions ul .disabled {
display: none; }
.actions ul li {
margin-left: 20px; }
.actions ul li:first-child a {
background: #fff;
color: #999; }
.actions ul li a {
width: 140px;
height: 50px;
color: #fff;
font-family: 'Montserrat';
font-size: 13px;
font-weight: bold;
background: #d18f2c;
align-items: center;
-moz-align-items: center;
-webkit-align-items: center;
-o-align-items: center;
-ms-align-items: center;
justify-content: center;
-moz-justify-content: center;
-webkit-justify-content: center;
-o-justify-content: center;
-ms-justify-content: center;
text-decoration: none; }
.steps {
display: none; }
@media screen and (max-width: 992px) {
.container {
width: calc(100% - 40px);
max-width: 100%; }
.signup-form {
padding: 55px 30px; }
.signup-desc {
width: 465px; }
.signup-img {
width: 100%; } }
@media screen and (max-width: 768px) {
.steps ul, .signup-content {
flex-direction: column;
-moz-flex-direction: column;
-webkit-flex-direction: column;
-o-flex-direction: column;
-ms-flex-direction: column; }
.steps ul li, .signup-desc, .signup-form-conent {
width: 100%; } }
@media screen and (max-width: 480px) {
.actions ul li a {
width: 100px; } }
/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Text</title>
<!-- Font Icon -->
<link rel="stylesheet" href="fonts/material-icon/css/material-design-iconic-font.min.css">
<!-- Main css -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main">
<div class="container">
<div class="signup-content">
<div class="signup-desc">
<div class="signup-desc-content">
<h2><span>Text</span>Text Text</h2>
<p class="title">CText</p>
<p class="desc">
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
</p>
<img src="img/ban.png" alt="" class="signup-img">
</div>
</div>
<div class="signup-form-conent">
<form method="POST" id="signup-form" class="signup-form" enctype="multipart/form-data">
<h3></h3>
<fieldset>
<span class="step-current">Paso 1 / 3</span>
<div class="form-group">
<input type="text" name="a" id="a" required/>
<label for="a">texttttt</label>
</div>
</fieldset>
<h3></h3>
<fieldset>
<span class="step-current">Paso 2 / 3</span>
<div class="form-group">
<input type="text" name="description" id="description" required/>
<label for="description">Descripción</label>
</div>
</fieldset>
<h3></h3>
<fieldset>
<span class="step-current">Paso 3 / 3</span>
<div class="form-group">
<input type="text" name="adjunto" id="adjunto" required/>
<label for="adjunto">texttttt</label>
</div>
</fieldset>
<h3></h3>
<fieldset>
<span class="step-current">texttttt</span>
<div class="form-group">
<h4>asadasd</h4><p id="s"></p>
<h4>asdasdón</h4><p id="s"></p>
<h4>asdasd</h4><p id="s"></p>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<!-- JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<script src="vendor/jquery-validation/dist/additional-methods.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.js"></script>
</body>
</html>