0byt3m1n1
Path:
C:
/
Users
/
Administrator
/
Desktop
/
shafna
/
rainfall1
/
[
Home
]
File: styling.css
html, body { min-height: 100%; /* background-image: url(images/rain4.jpg); background: no-repeat; */ background-image: url(images/img-ba.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; } body, div, form, input, select, textarea, label ,p { padding: 0; margin: 0; outline: none; /*font-family: Roboto, Arial, sans-serif;*/ font-size: 14px; color: #666; line-height: 22px; min-width: min-content; } .inst .para { font-size: 16px; text-align: justify; /* font-style: oblique;*/ font-weight: 500; font-family: "Times New Roman", Times, serif; } .container { display: flex; width : 80%; margin-top: 10%; margin:10% ; } .head { margin-left: 20%; margin-top: 5%; } table .h2 { margin-left: 35%; font-size: 25px; color: teal; } .fixed-header { width: 100%; margin-top: 1%;; /*background: #083d77;*/ background-image: url(images/cwrdm_header.png); background-repeat: no-repeat; background-position: center; padding: 85px 0; color: #fff; top: 0; } .question { margin-left: 10%; } .fixed-footer { width: 100%; color: black; /* background: #083d77;*/ padding: 50px 0; color: #fff; bottom: 0; } h1 { position: absolute; margin: 0; font-size: 40px; color: #fff; z-index: 2; line-height: 83px; } textarea { width: calc(100% - 12px); padding: 5px; } .testbox { display: flex; justify-content: center; align-items: center; height: inherit; padding: 20px; } form { width: 50%; padding: 20px; border-radius: 15px; background: white; box-shadow: 0 0 8px #669999; margin-left: 0%; margin-top: 5%; margin-bottom: 10%; font-family: sans-serif; line-height:1.9; } .banner { position: relative; height: 300px; /*background-image: url("rainwater.jpg"); */ background-image: url("rainwater-harvest-03.jpg"); background-repeat: no-repeat; background-size: cover; display: flex; justify-content: center; align-items: center; text-align: center; } .banner::after { content: ""; background-color: rgba(0, 0, 0, 0.2); position: absolute; width: 100%; height: 100%; } input,select, textarea { margin-bottom: 10px; border: 1px solid #ccc; border-radius: 3px; } input { width: calc(100% - 20px); padding: 5px; } input[type="date"] { padding: 4px 5px; } .inst { width: 50%; padding: 20px; border-radius: 15px; background: white; box-shadow: 0 0 8px #669999; margin-left: 5%; margin-top: 5%; margin-bottom: 10%; } .img { width:20px; } .dim { margin-left: inherit; } .dim span { color:red; } select{ width: calc(100% - 10px); padding: 5px; } textarea { width: calc(100% - 12px); padding: 5px; } .item:hover p, .item:hover i, .question:hover p, .question label:hover, input:hover::placeholder { color: #669999; } .item input:hover, .item select:hover, .item textarea:hover { border: 1px solid transparent; box-shadow: 0 0 3px 0 #669999; color: #669999; } .item { position: relative; margin: 10px 0; } .item span { color: red; } .week { display:flex; justify-content:space-between; } .colums { margin-top: 10%; display:flex; justify-content:space-between; flex-direction:row; flex-wrap:wrap; } .colums div { width:48%; } input[type="date"]::-webkit-inner-spin-button { display: none; } .item i, input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; font-size: 20px; color: #a3c2c2; } .item i { right: 1%; top: 30px; z-index: 1; } input[type=radio], input[type=checkbox] { display: none; } label.radio { position: relative; display: inline-block; margin: 5px 20px 15px 0; cursor: pointer; } .question span { margin-left: 30px; } .question-answer label { display: block; } label.radio:before { content: ""; position: absolute; left: 0; width: 17px; height: 17px; border-radius: 50%; border: 2px solid #ccc; } input[type=radio]:checked + label:before, label.radio:hover:before { border: 2px solid #669999; } label.radio:after { content: ""; position: absolute; top: 6px; left: 5px; width: 8px; height: 4px; border: 3px solid #669999; border-top: none; border-right: none; transform: rotate(-45deg); opacity: 0; } input[type=radio]:checked + label:after { opacity: 1; } .flax { display:flex; justify-content:space-around; } .btn-block { margin-top: -15%; margin-left: 20%; text-align: center; } button { width: 150px; padding: 10px; border: none; border-radius: 5px; background: #669999; font-size: 16px; color: #fff; cursor: pointer; margin-top: 50%; } button:hover { background: #a3c2c2; } @media (min-width: 568px) { .name-item, .city-item { display: flex; flex-wrap: wrap; justify-content: space-between; } .name-item input, .name-item div { width: calc(50% - 20px); } .name-item div input { width:97%;} .name-item div label { display:block; padding-bottom:5px; } }