Created
January 24, 2020 12:30
-
-
Save amardeep18/042de83d451d212820296c9aacb7f785 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*custom font*/ | |
@font-face { | |
font-family: 'Montserrat'; | |
font-style: normal; | |
font-weight: 400; | |
src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v11/SKK6Nusyv8QPNMtI4j9J2yEAvth_LlrfE80CYdSH47w.woff2) format('woff2'); | |
unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; | |
} | |
/* latin-ext */ | |
@font-face { | |
font-family: 'Montserrat'; | |
font-style: normal; | |
font-weight: 400; | |
src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v11/gFXtEMCp1m_YzxsBpKl68iEAvth_LlrfE80CYdSH47w.woff2) format('woff2'); | |
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; | |
} | |
/* latin */ | |
@font-face { | |
font-family: 'Montserrat'; | |
font-style: normal; | |
font-weight: 400; | |
src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v11/zhcz-_WihjSQC0oHJ9TCYPk_vArhqVIZ0nv9q090hN8.woff2) format('woff2'); | |
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; | |
} | |
/*basic reset*/ | |
* {margin: 0; padding: 0;} | |
html { | |
height: 100%; | |
/*Image only BG fallback*/ | |
background-image: url('sm.png'); | |
/*background = gradient + image pattern combo*/ | |
background-image: | |
linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), | |
url('sm.png'); | |
} | |
body { | |
font-family: montserrat, arial, verdana; | |
} | |
/*form styles*/ | |
#msdiv { | |
width: 70%; | |
margin: 50px auto; | |
text-align: center; | |
position: relative; | |
} | |
#msdiv fieldset { | |
background: white; | |
border: 0 none; | |
border-radius: 3px; | |
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4); | |
padding: 20px 30px; | |
box-sizing: border-box; | |
width: 80%; | |
margin: 0 10%; | |
/*stacking fieldsets above each other*/ | |
position: absolute; | |
} | |
/*Hide all except first fieldset*/ | |
#msdiv fieldset:not(:first-of-type) { | |
display: none; | |
} | |
/*inputs*/ | |
#msdiv input, #msdiv select { | |
padding: 15px; | |
border: 1px solid #ccc; | |
border-radius: 3px; | |
margin-bottom: 10px; | |
width: 100%; | |
box-sizing: border-box; | |
font-family: montserrat; | |
color: #2C3E50; | |
font-size: 13px; | |
} | |
#msdiv table{ | |
width: 100%; | |
position: static; | |
} | |
#msdiv input[type="radio"] { | |
padding: 15px; | |
border: 1px solid #ccc; | |
border-radius: 3px; | |
margin-bottom: 10px; | |
width: 20%; | |
box-sizing: border-box; | |
font-family: montserrat; | |
color: #2C3E50; | |
font-size: 13px; | |
} | |
/*buttons*/ | |
#msdiv .action-button, #msdiv textarea { | |
width: 100px; | |
background: #27AE60; | |
font-weight: bold; | |
color: white; | |
border: 0 none; | |
border-radius: 1px; | |
cursor: pointer; | |
padding: 10px 5px; | |
margin: 10px 5px; | |
} | |
#msdiv .action-button:hover, #msdiv .action-button:focus { | |
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60; | |
} | |
/*headings*/ | |
.fs-title { | |
font-size: 15px; | |
text-transform: uppercase; | |
color: #2C3E50; | |
margin-bottom: 10px; | |
} | |
.fs-subtitle { | |
font-weight: normal; | |
font-size: 13px; | |
color: #666; | |
margin-bottom: 20px; | |
} | |
/*progressbar*/ | |
#progressbar { | |
margin-bottom: 30px; | |
overflow: hidden; | |
margin-left: 100px; | |
/*CSS counters to number the steps*/ | |
counter-reset: step; | |
} | |
#progressbar li { | |
list-style-type: none; | |
color: white; | |
text-transform: uppercase; | |
font-size: 9px; | |
width: 20%; | |
float: left; | |
position: relative; | |
} | |
#progressbar li:before { | |
content: counter(step); | |
counter-increment: step; | |
width: 20px; | |
line-height: 20px; | |
display: block; | |
font-size: 10px; | |
color: #333; | |
background: white; | |
border-radius: 3px; | |
margin: 0 auto 5px auto; | |
} | |
/*progressbar connectors*/ | |
#progressbar li:after { | |
content: ''; | |
width: 100%; | |
height: 2px; | |
background: white; | |
position: absolute; | |
left: -50%; | |
top: 9px; | |
z-index: -1; /*put it behind the numbers*/ | |
} | |
#progressbar li:first-child:after { | |
/*connector not needed before the first step*/ | |
content: none; | |
} | |
/*marking active/completed steps green*/ | |
/*The number of the step and the connector before it = green*/ | |
#progressbar li.active:before, #progressbar li.active:after{ | |
background: #27AE60; | |
color: white; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment