-
-
Save Iheanacho-ai/65a6ff9f2f372b2be2763482fc0f61bb 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
*{ | |
margin: 0; | |
padding: 0; | |
box-sizing: border-box; | |
font-family: "Poppins", sans-serif; | |
} | |
body{ | |
margin: 0; | |
padding: 0; | |
height: 100vh; | |
overflow: hidden; | |
} | |
.create-job{ | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
width: 400px; | |
background: white; | |
border-radius: 10px; | |
box-shadow: 10px 10px 15px rgba(0,0,0,0.05); | |
} | |
.create-job h2{ | |
text-align: center; | |
padding: 20px 0; | |
border-bottom: 1px solid silver; | |
} | |
.create-job form{ | |
padding: 0 40px; | |
box-sizing: border-box; | |
} | |
form .txt-field{ | |
position: relative; | |
border-bottom: 2px solid #adadad; | |
margin: 30px 0; | |
} | |
.txt-field input{ | |
width: 100%; | |
padding: 0 5px; | |
height: 40px; | |
font-size: 16px; | |
border: none; | |
background: none; | |
outline: none; | |
} | |
.txt-field label{ | |
position: absolute; | |
top: 50%; | |
left: 5px; | |
color: #adadad; | |
transform: translateY(-50%); | |
font-size: 16px; | |
pointer-events: none; | |
transition: .5s; | |
} | |
.txt-field span::before{ | |
content: ''; | |
position: absolute; | |
top: 40px; | |
left: 0; | |
width: 0%; | |
height: 2px; | |
background: rgb(56, 55, 55); | |
transition: .5s; | |
} | |
.txt-field input:focus ~ label, | |
.txt-field input:valid ~ label{ | |
top: -5px; | |
color: rgb(56, 55, 55); | |
} | |
.txt-field input:focus ~ span::before, | |
.txt-field input:valid ~ span::before{ | |
width: 100%; | |
} | |
.submit{ | |
width: 100%; | |
height: 50px; | |
border: 1px solid; | |
background: rgb(56, 55, 55); | |
border-radius: 25px; | |
font-size: 18px; | |
color: #e9f4fb; | |
font-weight: 700; | |
cursor: pointer; | |
outline: none; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
margin-bottom: 30px; | |
} | |
.submit:hover{ | |
border-color: rgb(56, 55, 55); | |
transition: .5s; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment