Scribd
Upload
3 views5 pages

Body (

Uploaded by

chawlamanya31
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views5 pages

Body (

Uploaded by

chawlamanya31
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

body {

margin: 40px 0 40px 0;


padding: 0;
border: none;
outline: none;
/* background-color: #eee; */
background-color: #e35267;
box-shadow: none;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
'Helvetica Neue', Arial, sans-serif;
}

main {
background-color: white;
padding: 10px 40px 40px 40px;
display: block;
text-align: left;
max-width: 500px;
margin: auto;
border-radius: 10px;
}

header {
text-align: center;
}

h1 {
font-size: 40px;
/* color: #002f6c; */
color: #191516;
font-weight: bold;
}

form {
display: flex;
flex-direction: column;
font-size: 22px;
}

#name, #email, #number, #dropdown {


outline: none;
width: 100%;
padding: 7px;
font-size: 16px;
border: 0.5px solid #002f6c;
background-color: white;
box-sizing: border-box;
}

#dropdown, option {
outline: none;
}

select {
padding: 7px;
}

textarea {
display: block;
}

.form-group {
padding: 8px 0;
margin-bottom: 2px;
}

.form-group>label {
margin-bottom: 8px;
color: #191516;
display: block;
}

[type="checkbox"]+label>span, [type="radio"]+label {
font-size: 16px;
}

[type="checkbox"], [type="radio"] {
margin: 0 8px 0 0;
box-sizing: border-box;
min-width: 18px;
min-height: 18px;
}

/*hide the original checkbox and radio button*/

[type="checkbox"] , [type="radio"] {
opacity: 0;
pointer-events: none;
}

.radio-group, .checkbox-group {
display: flex;
flex-direction: row;
margin-bottom: 10px;
position: relative;
}

[type="radio"]+label {
margin: 0 5px 0 0;
font-size: 16px;
position: relative;
cursor: pointer;
}

[type="checkbox"]+label {
margin: 0 5px 0 0;
font-size: 16px;
position: relative;
cursor: pointer;
}

/* this is the custom box for the checkbox*/

[type="checkbox"]+label::before {
content: '';
min-width: 18px;
min-height: 18px;
position: absolute;
left: -26px;
border-radius: 3px;
/* top: 5px; */
background-color: #eee;
transition: all 0.4s;
}

/* custom checkmark made using only css*/

/*
[type="checkbox"]+label::after {
content: '';
min-width: 0px;
min-height: 0px;
position: absolute;
left: -20px;
top: 2px;
border-right: 1px solid white;
border-bottom: 1px solid white;
background-color:red;
transform: rotateZ(40deg);
transition: all 0.4s;

}
*/

/* this will unhide the custom checkmark */

/* [type="checkbox"]:checked +label::after {
min-width: 5px;
min-height: 10px;
} */

/* this is the svg for the checkmark */

[type="checkbox"]+label svg {
position: absolute;
width: 28px;
left: -31px;
top: -5px;
}

/* this is the polyline for the checkmark svg */

[type="checkbox"]+label svg polyline {


stroke: white;
stroke-width: 8;
fill: none;
stroke-dasharray: 70;
stroke-dashoffset: 70;
transition: stroke-dashoffset 0.4s;
}

/* change the color of custom checkbox when the original checkbox is in checked
state */

[type="checkbox"]:checked+label::before {
background-color: #191516;
}

/* setting stroke-dashoffset to 0 will reveal the hidden checkmark */

[type="checkbox"]:checked+label svg polyline {


stroke-dashoffset: 0;
}

textarea {
width: 100%;
box-sizing: border-box;
height: 200px;
resize: none;
padding: 4px;
font-size: 16px;
}

button {
width: 100%;
display: block;
height: 40px;
background-color: #191516;
border: none;
font-weight: bold;
font-size: 20px;
color: white;
box-sizing: border-box;
}

#description {
text-align: center;
font-style: italic;
margin-top: -10px;
}

/* custom circle for radio button*/


[type="radio"]+label::before {
content: '';
position: absolute;
border-radius: 50%;
background-color: #eee;
left: -27px;
top: -1px;
width: 20px;
height: 20px;
transition: all 0.4s;
}

/* fill circle with inset shadow when it is selected*/


[type="radio"]:checked+label::before {
box-shadow: inset 0 0 0 6px #191516;
}

@media (max-width: 460px) {


main {
max-width: 280px;
}
h1 {
font-size: 32px;
}
#description {
font-size: 15px;
}
form {
font-size: 18px;
}
#name, #email, #number, #dropdown, textarea {
font-size: 15px;
}
[type="radio"]+label, [type="checkbox"]+label>span {
font-size: 15px;
}
}

You might also like