Untitled
unknown
css
2 years ago
2.6 kB
3
Indexable
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } body{ background: #fec107; padding: 0 10px; } .wrapper{ max-width: 500px; width: 100%; background: #fff; margin: 20px auto; box-shadow: 1px 1px 2px rgba(0,0,0,0.125); padding: 30px; } .wrapper .title{ font-size: 24px; font-weight: 700; margin-bottom: 25px; color: #fec107; text-transform: uppercase; text-align: center; } .wrapper .form{ width: 100%; } .wrapper .form .inputfield{ margin-bottom: 15px; display: flex; align-items: center; } .wrapper .form .inputfield label{ width: 200px; color: #757575; margin-right: 10px; font-size: 14px; } .wrapper .form .inputfield .input{ width: 100%; outline: none; border: 1px solid #d5dbd9; font-size: 15px; padding: 8px 10px; border-radius: 3px; transition: all 0.3s ease; } .wrapper .form .inputfield .custom_select{ position: relative; width: 100%; height: 37px; } .wrapper .form .inputfield .custom_select select{ width: 100%; height: 100%; border: 0px; padding: 8px 10px; font-size: 15px; border: 1px solid #d5dbd9; border-radius: 3px; } .wrapper .form .inputfield .input:focus, .wrapper .form .inputfield .textarea:focus, .wrapper .form .inputfield .custom_select select:focus{ border: 1px solid #fec107; } .wrapper .form .inputfield p{ font-size: 9.5px; color: #757575; } .wrapper .form .inputfield .check{ width: 15px; height: 15px; position: relative; display: block; cursor: pointer; } .wrapper .form .inputfield .check input[type="checkbox"]{ position: absolute; top: 0; left: 0; opacity: 0; } .wrapper .form .inputfield .check .checkmark{ width: 15px; height: 15px; border: 1px solid #fec107; display: block; position: relative; } .wrapper .form .inputfield .check .checkmark:before{ content: ""; position: absolute; top: 1px; left: 2px; width: 5px; height: 2px; border: 2px solid; border-color: #fec107 #fec107 #fec107 #fec107; display: none; } .wrapper .form .inputfield .check input[type="checkbox"]:checked ~ .checkmark{ background: #fec107; } .wrapper .form .inputfield .check input[type="checkbox"]:checked ~ .checkmark:before{ display: block; } .wrapper .form .inputfield .btn{ width: 100%; padding: 8px 10px; font-size: 15px; border: 0px; background: #fec107; color: #fff; cursor: pointer; border-radius: 3px; outline: none; } .wrapper .form .inputfield .btn:hover{ background: #ffd658; } }
Editor is loading...