├── README.md ├── bg.jpg ├── index.html └── styles.css /README.md: -------------------------------------------------------------------------------- 1 | # Responsive-Contact-us-form 2 | Responsive Contact us form Using HTML and CSS 3 | -------------------------------------------------------------------------------- /bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingmarket07/Responsive-Contact-us-form/HEAD/bg.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Responsive Contact us form Using HTML and CSS 6 | 7 | 8 | 9 | 10 |
11 |
12 |

contact us form

13 |
14 |
15 |
16 | 17 | 18 | 19 | 20 |
21 |
22 | 23 |
send
24 |
25 |
26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Roboto'); 2 | 3 | *{ 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | outline: none; 8 | font-family: 'Roboto', sans-serif; 9 | } 10 | 11 | body{ 12 | background: url('bg.jpg') no-repeat top center; 13 | background-size: cover; 14 | height: 100vh; 15 | } 16 | 17 | .wrapper{ 18 | position: absolute; 19 | top: 50%; 20 | left: 50%; 21 | transform: translate(-50%, -50%); 22 | width: 100%; 23 | max-width: 550px; 24 | background: rgba(0,0,0,0.8); 25 | padding: 30px; 26 | border-radius: 5px; 27 | box-shadow: 0 0 10px rgba(0,0,0,0.3); 28 | } 29 | 30 | .wrapper .title h1{ 31 | color: #c5ecfd; 32 | text-align: center; 33 | margin-bottom: 25px; 34 | } 35 | 36 | .contact-form{ 37 | display: flex; 38 | } 39 | 40 | .input-fields{ 41 | display: flex; 42 | flex-direction: column; 43 | margin-right: 4%; 44 | } 45 | 46 | .input-fields, 47 | .msg{ 48 | width: 48%; 49 | } 50 | 51 | .input-fields .input, 52 | .msg textarea{ 53 | margin: 10px 0; 54 | background: transparent; 55 | border: 0px; 56 | border-bottom: 2px solid #c5ecfd; 57 | padding: 10px; 58 | color: #c5ecfd; 59 | width: 100%; 60 | } 61 | 62 | .msg textarea{ 63 | height: 212px; 64 | } 65 | 66 | ::-webkit-input-placeholder { 67 | /* Chrome/Opera/Safari */ 68 | color: #c5ecfd; 69 | } 70 | ::-moz-placeholder { 71 | /* Firefox 19+ */ 72 | color: #c5ecfd; 73 | } 74 | :-ms-input-placeholder { 75 | /* IE 10+ */ 76 | color: #c5ecfd; 77 | } 78 | 79 | .btn { 80 | background: #39b7dd; 81 | text-align: center; 82 | padding: 15px; 83 | border-radius: 5px; 84 | color: #fff; 85 | cursor: pointer; 86 | text-transform: uppercase; 87 | } 88 | 89 | @media screen and (max-width: 600px){ 90 | .contact-form{ 91 | flex-direction: column; 92 | } 93 | .msg textarea{ 94 | height: 80px; 95 | } 96 | .input-fields, 97 | .msg{ 98 | width: 100%; 99 | } 100 | } --------------------------------------------------------------------------------