Merge branch 'sahilnsagar-master-patch-30224' of...
Merge branch 'sahilnsagar-master-patch-30224' of https://code.swecha.org/sahilnsagar/kisanmarket into next
body { | ||
font-family: Arial, Helvetica, sans-serif; | ||
background-color: black; | ||
} | ||
* { | ||
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];300;400;500;600;700&display=swap'); | ||
*{ | ||
margin: 0; | ||
padding: 0; | ||
box-sizing: border-box; | ||
font-family: 'Poppins',sans-serif; | ||
} | ||
body{ | ||
height: 100vh; | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
padding: 10px; | ||
background-image: url('https://images.unsplash.com/photo-1521218040446-6365be66a028?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'); | ||
/* Add padding to containers */ | ||
.container { | ||
padding: 16px; | ||
background-color: white; | ||
} | ||
.container{ | ||
max-width: 700px; | ||
width: 100%; | ||
background-image: url('https://images.unsplash.com/photo-1521218040446-6365be66a028?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'); | ||
/* Full-width input fields */ | ||
input[type=text], input[type=password], input[type=tell] { | ||
width: 50%; | ||
padding: 15px; | ||
margin: 5px 0px 22px 0px; | ||
display: inline-block; | ||
border: none; | ||
background: #f1f1f1; | ||
padding: 25px 30px; | ||
border-radius: 5px; | ||
box-shadow: 0 5px 10px rgba(0,0,0,0.15); | ||
} | ||
input[type=text]:focus, input[type=password]:focus, input[type=tell]:focus { | ||
background-color: #ddd; | ||
outline: none; | ||
.container .title{ | ||
font-size: 25px; | ||
font-weight: 500; | ||
position: relative; | ||
} | ||
select{ | ||
width: 50%; | ||
padding: 10px; | ||
.container .title::before{ | ||
content: ""; | ||
position: absolute; | ||
left: 0; | ||
bottom: 0; | ||
height: 3px; | ||
width: 30px; | ||
border-radius: 5px; | ||
background: linear-gradient(135deg, #71b7e6, #9b59b6); | ||
} | ||
/* Overwrite default styles of hr */ | ||
hr { | ||
border: 1px solid green; | ||
margin-bottom: 25px; | ||
.content form .user-details{ | ||
display: flex; | ||
flex-wrap: wrap; | ||
justify-content: space-between; | ||
margin: 20px 0 12px 0; | ||
} | ||
/* Set a style for the submit button */ | ||
.registerbtn { | ||
background-color: #f44336; | ||
color: white; | ||
padding: 14px 20px; | ||
margin: 8px 0; | ||
border: none; | ||
cursor: pointer; | ||
width: 10%; | ||
opacity: 0.9; | ||
form .user-details .input-box{ | ||
margin-bottom: 15px; | ||
width: calc(100% / 2 - 20px); | ||
} | ||
.registerbtn:hover { | ||
opacity: 1; | ||
form .input-box span.details{ | ||
display: block; | ||
font-weight: 500; | ||
margin-bottom: 5px; | ||
} | ||
/* Add a blue text color to links */ | ||
a { | ||
color: dodgerblue; | ||
.user-details .input-box input{ | ||
height: 45px; | ||
width: 100%; | ||
outline: none; | ||
font-size: 16px; | ||
border-radius: 5px; | ||
padding-left: 15px; | ||
border: 1px solid #ccc; | ||
border-bottom-width: 2px; | ||
transition: all 0.3s ease; | ||
} | ||
/* Set a grey background color and center the text of the "sign in" section */ | ||
.signin { | ||
background-color: #f1f1f1; | ||
text-align: center; | ||
.user-details .input-box input:focus, | ||
.user-details .input-box input:valid{ | ||
border-color: #9b59b6; | ||
} | ||
div | ||
{ | ||
padding:70px 75px 80px; | ||
background-image: url('https://images.unsplash.com/photo-1521218040446-6365be66a028?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'); | ||
opacity: 1; | ||
background-size: cover; | ||
height: 100%; | ||
form .category{ | ||
display: flex; | ||
width: 80%; | ||
margin: 14px 0 ; | ||
justify-content: space-between; | ||
} | ||
form .category label{ | ||
display: flex; | ||
align-items: center; | ||
cursor: pointer; | ||
} | ||
form .category label .dot{ | ||
height: 18px; | ||
width: 18px; | ||
border-radius: 50%; | ||
margin-right: 10px; | ||
background: #d9d9d9; | ||
border: 5px solid transparent; | ||
transition: all 0.3s ease; | ||
} | ||
#dot-1:checked ~ .category label .one, | ||
#dot-2:checked ~ .category label .two, | ||
#dot-3:checked ~ .category label .three{ | ||
background: #9b59b6; | ||
border-color: #d9d9d9; | ||
} | ||
form input[type="radio"]{ | ||
display: none; | ||
} | ||
form .button{ | ||
height: 45px; | ||
margin: 35px 0 | ||
} | ||
form .button input{ | ||
height: 100%; | ||
width: 100%; | ||
border-radius: 5px; | ||
border: none; | ||
color: red; | ||
font-size: 18px; | ||
font-weight: 500; | ||
letter-spacing: 1px; | ||
cursor: pointer; | ||
transition: all 0.3s ease; | ||
background color: #ffaa00; | ||
} | ||
form .button input:hover{ | ||
/* transform: scale(0.99); */ | ||
background: linear-gradient(-135deg, #71b7e6, #9b59b6); | ||
} | ||
@media(max-width: 584px){ | ||
.container{ | ||
max-width: 100%; | ||
} | ||
form .user-details .input-box{ | ||
margin-bottom: 15px; | ||
width: 100%; | ||
} | ||
form .category{ | ||
width: 100%; | ||
} | ||
.content form .user-details{ | ||
max-height: 300px; | ||
overflow-y: scroll; | ||
} | ||
.user-details::-webkit-scrollbar{ | ||
width: 5px; | ||
} | ||
} | ||
@media(max-width: 459px){ | ||
.container .content .category{ | ||
flex-direction: column; | ||
} | ||
} | ||
} | ||
\ No newline at end of file |
Please register or sign in to comment