├── app.js ├── img ├── email.png ├── location.png ├── phone.png └── shape.png ├── index.html └── style.css /app.js: -------------------------------------------------------------------------------- 1 | const inputs = document.querySelectorAll(".input"); 2 | 3 | function focusFunc() { 4 | let parent = this.parentNode; 5 | parent.classList.add("focus"); 6 | } 7 | 8 | function blurFunc() { 9 | let parent = this.parentNode; 10 | if (this.value == "") { 11 | parent.classList.remove("focus"); 12 | } 13 | } 14 | 15 | inputs.forEach((input) => { 16 | input.addEventListener("focus", focusFunc); 17 | input.addEventListener("blur", blurFunc); 18 | }); 19 | -------------------------------------------------------------------------------- /img/email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sefyudem/Contact-Form-HTML-CSS/029d2047611790f65b9012d09e8debe41c2ca782/img/email.png -------------------------------------------------------------------------------- /img/location.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sefyudem/Contact-Form-HTML-CSS/029d2047611790f65b9012d09e8debe41c2ca782/img/location.png -------------------------------------------------------------------------------- /img/phone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sefyudem/Contact-Form-HTML-CSS/029d2047611790f65b9012d09e8debe41c2ca782/img/phone.png -------------------------------------------------------------------------------- /img/shape.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sefyudem/Contact-Form-HTML-CSS/029d2047611790f65b9012d09e8debe41c2ca782/img/shape.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Contact Form 7 | 8 | 12 | 13 | 14 |
15 | 16 | 17 |
18 |
19 |

Let's get in touch

20 |

21 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe 22 | dolorum adipisci recusandae praesentium dicta! 23 |

24 | 25 |
26 |
27 | 28 |

92 Cherry Drive Uniondale, NY 11553

29 |
30 |
31 | 32 |

lorem@ipsum.com

33 |
34 |
35 | 36 |

123-456-789

37 |
38 |
39 | 40 | 57 |
58 | 59 |
60 | 61 | 62 | 63 |
64 |

Contact us

65 |
66 | 67 | 68 | Username 69 |
70 |
71 | 72 | 73 | Email 74 |
75 |
76 | 77 | 78 | Phone 79 |
80 |
81 | 82 | 83 | Message 84 |
85 | 86 |
87 |
88 |
89 |
90 | 91 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body, 10 | input, 11 | textarea { 12 | font-family: "Poppins", sans-serif; 13 | } 14 | 15 | .container { 16 | position: relative; 17 | width: 100%; 18 | min-height: 100vh; 19 | padding: 2rem; 20 | background-color: #fafafa; 21 | overflow: hidden; 22 | display: flex; 23 | align-items: center; 24 | justify-content: center; 25 | } 26 | 27 | .form { 28 | width: 100%; 29 | max-width: 820px; 30 | background-color: #fff; 31 | border-radius: 10px; 32 | box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1); 33 | z-index: 1000; 34 | overflow: hidden; 35 | display: grid; 36 | grid-template-columns: repeat(2, 1fr); 37 | } 38 | 39 | .contact-form { 40 | background-color: #1abc9c; 41 | position: relative; 42 | } 43 | 44 | .circle { 45 | border-radius: 50%; 46 | background: linear-gradient(135deg, transparent 20%, #149279); 47 | position: absolute; 48 | } 49 | 50 | .circle.one { 51 | width: 130px; 52 | height: 130px; 53 | top: 130px; 54 | right: -40px; 55 | } 56 | 57 | .circle.two { 58 | width: 80px; 59 | height: 80px; 60 | top: 10px; 61 | right: 30px; 62 | } 63 | 64 | .contact-form:before { 65 | content: ""; 66 | position: absolute; 67 | width: 26px; 68 | height: 26px; 69 | background-color: #1abc9c; 70 | transform: rotate(45deg); 71 | top: 50px; 72 | left: -13px; 73 | } 74 | 75 | form { 76 | padding: 2.3rem 2.2rem; 77 | z-index: 10; 78 | overflow: hidden; 79 | position: relative; 80 | } 81 | 82 | .title { 83 | color: #fff; 84 | font-weight: 500; 85 | font-size: 1.5rem; 86 | line-height: 1; 87 | margin-bottom: 0.7rem; 88 | } 89 | 90 | .input-container { 91 | position: relative; 92 | margin: 1rem 0; 93 | } 94 | 95 | .input { 96 | width: 100%; 97 | outline: none; 98 | border: 2px solid #fafafa; 99 | background: none; 100 | padding: 0.6rem 1.2rem; 101 | color: #fff; 102 | font-weight: 500; 103 | font-size: 0.95rem; 104 | letter-spacing: 0.5px; 105 | border-radius: 25px; 106 | transition: 0.3s; 107 | } 108 | 109 | textarea.input { 110 | padding: 0.8rem 1.2rem; 111 | min-height: 150px; 112 | border-radius: 22px; 113 | resize: none; 114 | overflow-y: auto; 115 | } 116 | 117 | .input-container label { 118 | position: absolute; 119 | top: 50%; 120 | left: 15px; 121 | transform: translateY(-50%); 122 | padding: 0 0.4rem; 123 | color: #fafafa; 124 | font-size: 0.9rem; 125 | font-weight: 400; 126 | pointer-events: none; 127 | z-index: 1000; 128 | transition: 0.5s; 129 | } 130 | 131 | .input-container.textarea label { 132 | top: 1rem; 133 | transform: translateY(0); 134 | } 135 | 136 | .btn { 137 | padding: 0.6rem 1.3rem; 138 | background-color: #fff; 139 | border: 2px solid #fafafa; 140 | font-size: 0.95rem; 141 | color: #1abc9c; 142 | line-height: 1; 143 | border-radius: 25px; 144 | outline: none; 145 | cursor: pointer; 146 | transition: 0.3s; 147 | margin: 0; 148 | } 149 | 150 | .btn:hover { 151 | background-color: transparent; 152 | color: #fff; 153 | } 154 | 155 | .input-container span { 156 | position: absolute; 157 | top: 0; 158 | left: 25px; 159 | transform: translateY(-50%); 160 | font-size: 0.8rem; 161 | padding: 0 0.4rem; 162 | color: transparent; 163 | pointer-events: none; 164 | z-index: 500; 165 | } 166 | 167 | .input-container span:before, 168 | .input-container span:after { 169 | content: ""; 170 | position: absolute; 171 | width: 10%; 172 | opacity: 0; 173 | transition: 0.3s; 174 | height: 5px; 175 | background-color: #1abc9c; 176 | top: 50%; 177 | transform: translateY(-50%); 178 | } 179 | 180 | .input-container span:before { 181 | left: 50%; 182 | } 183 | 184 | .input-container span:after { 185 | right: 50%; 186 | } 187 | 188 | .input-container.focus label { 189 | top: 0; 190 | transform: translateY(-50%); 191 | left: 25px; 192 | font-size: 0.8rem; 193 | } 194 | 195 | .input-container.focus span:before, 196 | .input-container.focus span:after { 197 | width: 50%; 198 | opacity: 1; 199 | } 200 | 201 | .contact-info { 202 | padding: 2.3rem 2.2rem; 203 | position: relative; 204 | } 205 | 206 | .contact-info .title { 207 | color: #1abc9c; 208 | } 209 | 210 | .text { 211 | color: #333; 212 | margin: 1.5rem 0 2rem 0; 213 | } 214 | 215 | .information { 216 | display: flex; 217 | color: #555; 218 | margin: 0.7rem 0; 219 | align-items: center; 220 | font-size: 0.95rem; 221 | } 222 | 223 | .icon { 224 | width: 28px; 225 | margin-right: 0.7rem; 226 | } 227 | 228 | .social-media { 229 | padding: 2rem 0 0 0; 230 | } 231 | 232 | .social-media p { 233 | color: #333; 234 | } 235 | 236 | .social-icons { 237 | display: flex; 238 | margin-top: 0.5rem; 239 | } 240 | 241 | .social-icons a { 242 | width: 35px; 243 | height: 35px; 244 | border-radius: 5px; 245 | background: linear-gradient(45deg, #1abc9c, #149279); 246 | color: #fff; 247 | text-align: center; 248 | line-height: 35px; 249 | margin-right: 0.5rem; 250 | transition: 0.3s; 251 | } 252 | 253 | .social-icons a:hover { 254 | transform: scale(1.05); 255 | } 256 | 257 | .contact-info:before { 258 | content: ""; 259 | position: absolute; 260 | width: 110px; 261 | height: 100px; 262 | border: 22px solid #1abc9c; 263 | border-radius: 50%; 264 | bottom: -77px; 265 | right: 50px; 266 | opacity: 0.3; 267 | } 268 | 269 | .big-circle { 270 | position: absolute; 271 | width: 500px; 272 | height: 500px; 273 | border-radius: 50%; 274 | background: linear-gradient(to bottom, #1cd4af, #159b80); 275 | bottom: 50%; 276 | right: 50%; 277 | transform: translate(-40%, 38%); 278 | } 279 | 280 | .big-circle:after { 281 | content: ""; 282 | position: absolute; 283 | width: 360px; 284 | height: 360px; 285 | background-color: #fafafa; 286 | border-radius: 50%; 287 | top: calc(50% - 180px); 288 | left: calc(50% - 180px); 289 | } 290 | 291 | .square { 292 | position: absolute; 293 | height: 400px; 294 | top: 50%; 295 | left: 50%; 296 | transform: translate(181%, 11%); 297 | opacity: 0.2; 298 | } 299 | 300 | @media (max-width: 850px) { 301 | .form { 302 | grid-template-columns: 1fr; 303 | } 304 | 305 | .contact-info:before { 306 | bottom: initial; 307 | top: -75px; 308 | right: 65px; 309 | transform: scale(0.95); 310 | } 311 | 312 | .contact-form:before { 313 | top: -13px; 314 | left: initial; 315 | right: 70px; 316 | } 317 | 318 | .square { 319 | transform: translate(140%, 43%); 320 | height: 350px; 321 | } 322 | 323 | .big-circle { 324 | bottom: 75%; 325 | transform: scale(0.9) translate(-40%, 30%); 326 | right: 50%; 327 | } 328 | 329 | .text { 330 | margin: 1rem 0 1.5rem 0; 331 | } 332 | 333 | .social-media { 334 | padding: 1.5rem 0 0 0; 335 | } 336 | } 337 | 338 | @media (max-width: 480px) { 339 | .container { 340 | padding: 1.5rem; 341 | } 342 | 343 | .contact-info:before { 344 | display: none; 345 | } 346 | 347 | .square, 348 | .big-circle { 349 | display: none; 350 | } 351 | 352 | form, 353 | .contact-info { 354 | padding: 1.7rem 1.6rem; 355 | } 356 | 357 | .text, 358 | .information, 359 | .social-media p { 360 | font-size: 0.8rem; 361 | } 362 | 363 | .title { 364 | font-size: 1.15rem; 365 | } 366 | 367 | .social-icons a { 368 | width: 30px; 369 | height: 30px; 370 | line-height: 30px; 371 | } 372 | 373 | .icon { 374 | width: 23px; 375 | } 376 | 377 | .input { 378 | padding: 0.45rem 1.2rem; 379 | } 380 | 381 | .btn { 382 | padding: 0.45rem 1.2rem; 383 | } 384 | } 385 | --------------------------------------------------------------------------------