-
Notifications
You must be signed in to change notification settings - Fork 189
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
4bb4c9f
commit ce7d5df
Showing
5 changed files
with
330 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| <h1 align='center'><b>💥 Survey Form 💥</b></h1> | ||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| <h3 align='center'>Tech Stack Used 🎮</h3> | ||
|
|
||
|
|
||
| <div align='center'> | ||
|
|
||
|  | ||
|  | ||
|
|
||
| </div> | ||
|
|
||
|
|
||
|  | ||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| ## :zap: Description 📃 | ||
|
|
||
| <div> | ||
| <p>A survey form is a tool used to collect information or opinions from respondents, typically through a series of questions. It's often used in research, marketing, or feedback collection to gather data for analysis.</p> | ||
| </div> | ||
|
|
||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| ## :zap: How to run it? 🕹️ | ||
|
|
||
| <div> | ||
| <p>To run this project locally, follow these steps: | ||
|
|
||
| 1. Fork the repository. | ||
|
|
||
| 2. Clone the repository to your local machine: | ||
| git clone | ||
|
|
||
| 3. Open the project folder in your preferred code editor, now you can view website in live. | ||
|
|
||
| </p> | ||
| </div> | ||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| ## :zap: Screenshots 📸 | ||
| <!-- add the screenshot of the project (Mandatory) --> | ||
|
|
||
| <img src='./screenshot.webp'> | ||
|
|
||
|
|
||
|  | ||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| <h4 align='center'>Developed By <b><i>Khushi Pushkar</i></b></h4> | ||
| <p align='center'> | ||
| <a href='https://www.linkedin.com/in/khushi-pushkar-9029b8287/'> | ||
| <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' /> | ||
| </a> | ||
| <a href='https://github.com/Khushi-Pushkar'> | ||
| <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' /> | ||
| </a> | ||
| </p> | ||
|
|
||
| <h4 align='center'>Happy Coding 🧑💻</h4> | ||
|
|
||
| <h3 align="center">Show some ❤️ by 🌟 this repository!</h3> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Survey Form</title> | ||
| <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;700&display=swap" rel="stylesheet"> | ||
| <link rel="stylesheet" href="styles.css"> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <h1>Survey Form</h1> | ||
| <form action="#" method="post"> | ||
| <div class="form-group"> | ||
| <label for="name">Name:</label> | ||
| <input type="text" id="name" name="name" required> | ||
| </div> | ||
| <div class="form-group"> | ||
| <label for="email">Email:</label> | ||
| <input type="email" id="email" name="email" required> | ||
| </div> | ||
| <div class="form-group"> | ||
| <label for="age">Age:</label> | ||
| <input type="number" id="age" name="age" required> | ||
| </div> | ||
| <div class="form-group"> | ||
| <label for="gender">Gender:</label> | ||
| <select id="gender" name="gender" required> | ||
| <option value="">Select...</option> | ||
| <option value="male">Male</option> | ||
| <option value="female">Female</option> | ||
| <option value="other">Other</option> | ||
| </select> | ||
| </div> | ||
| <div class="form-group"> | ||
| <label for="feedback">Feedback:</label> | ||
| <textarea id="feedback" name="feedback" rows="4" required></textarea> | ||
| </div> | ||
| <button type="submit">Submit</button> | ||
| </form> | ||
| </div> | ||
| </body> | ||
| </html> | ||
|
|
||
|
|
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,216 @@ | ||
| /* Import Google Font */ | ||
| @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;700&display=swap'); | ||
|
|
||
| body { | ||
| font-family: 'Raleway', sans-serif; | ||
| background: linear-gradient(135deg, #12c2e9, #c471ed, #f64f59); | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 100vh; | ||
| margin: 0; | ||
| color: #333; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .container { | ||
| background: rgba(255, 255, 255, 0.9); | ||
| padding: 50px; | ||
| border-radius: 20px; | ||
| box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); | ||
| width: 100%; | ||
| max-width: 600px; | ||
| box-sizing: border-box; | ||
| animation: fadeIn 1s ease-in-out; | ||
| backdrop-filter: blur(10px); | ||
| border: 1px solid rgba(255, 255, 255, 0.2); | ||
| position: relative; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| @keyframes fadeIn { | ||
| from { opacity: 0; transform: translateY(-20px); } | ||
| to { opacity: 1; transform: translateY(0); } | ||
| } | ||
|
|
||
| h1 { | ||
| margin-bottom: 30px; | ||
| font-size: 36px; | ||
| color: #444; | ||
| text-align: center; | ||
| animation: slideIn 1s ease-in-out; | ||
| position: relative; | ||
| background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59); | ||
| -webkit-background-clip: text; | ||
| -webkit-text-fill-color: transparent; | ||
| } | ||
|
|
||
| @keyframes slideIn { | ||
| from { opacity: 0; transform: translateX(-30px); } | ||
| to { opacity: 1; transform: translateX(0); } | ||
| } | ||
|
|
||
| .form-group { | ||
| margin-bottom: 25px; | ||
| position: relative; | ||
| } | ||
|
|
||
| label { | ||
| display: block; | ||
| margin-bottom: 10px; | ||
| font-weight: 500; | ||
| color: #555; | ||
| font-size: 15px; | ||
| position: relative; | ||
| } | ||
|
|
||
| input, select, textarea { | ||
| width: 100%; | ||
| padding: 15px; | ||
| border: 1px solid #ddd; | ||
| border-radius: 15px; | ||
| box-sizing: border-box; | ||
| font-size: 16px; | ||
| background-color: #f9f9f9; | ||
| transition: all 0.3s ease; | ||
| box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); | ||
| } | ||
|
|
||
| input:focus, select:focus, textarea:focus { | ||
| outline: none; | ||
| border-color: #c471ed; | ||
| box-shadow: 0 0 10px rgba(196, 113, 237, 0.3); | ||
| } | ||
|
|
||
| button { | ||
| width: 100%; | ||
| padding: 15px; | ||
| background: linear-gradient(135deg, #12c2e9, #c471ed, #f64f59); | ||
| color: white; | ||
| border: none; | ||
| border-radius: 15px; | ||
| cursor: pointer; | ||
| font-size: 18px; | ||
| font-weight: 500; | ||
| transition: background-color 0.3s ease, transform 0.3s ease; | ||
| position: relative; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| button:hover { | ||
| background: linear-gradient(135deg, #f64f59, #c471ed, #12c2e9); | ||
| transform: translateY(-3px); | ||
| } | ||
|
|
||
| button:before { | ||
| content: ""; | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 50%; | ||
| width: 300%; | ||
| height: 300%; | ||
| background: rgba(255, 255, 255, 0.2); | ||
| transition: all 0.3s ease; | ||
| border-radius: 50%; | ||
| transform: translate(-50%, -50%) scale(0); | ||
| } | ||
|
|
||
| button:hover:before { | ||
| transform: translate(-50%, -50%) scale(1); | ||
| } | ||
|
|
||
| /* Additional Enhancements */ | ||
| .container::before { | ||
| content: ""; | ||
| position: absolute; | ||
| top: -50px; | ||
| left: -50px; | ||
| width: 200px; | ||
| height: 200px; | ||
| background: rgba(255, 255, 255, 0.2); | ||
| border-radius: 50%; | ||
| animation: pulse 2s infinite; | ||
| } | ||
|
|
||
| .container::after { | ||
| content: ""; | ||
| position: absolute; | ||
| bottom: -50px; | ||
| right: -50px; | ||
| width: 200px; | ||
| height: 200px; | ||
| background: rgba(255, 255, 255, 0.2); | ||
| border-radius: 50%; | ||
| animation: pulse 2s infinite; | ||
| } | ||
|
|
||
| @keyframes pulse { | ||
| 0% { | ||
| transform: scale(0.95); | ||
| opacity: 0.7; | ||
| } | ||
| 70% { | ||
| transform: scale(1); | ||
| opacity: 0.5; | ||
| } | ||
| 100% { | ||
| transform: scale(0.95); | ||
| opacity: 0.7; | ||
| } | ||
| } | ||
|
|
||
| /* Advanced Styling */ | ||
| label::after { | ||
| content: ''; | ||
| position: absolute; | ||
| left: 0; | ||
| bottom: -5px; | ||
| width: 0; | ||
| height: 2px; | ||
| background: linear-gradient(135deg, #12c2e9, #c471ed, #f64f59); | ||
| transition: width 0.4s; | ||
| } | ||
|
|
||
| input:focus + label::after, | ||
| select:focus + label::after, | ||
| textarea:focus + label::after { | ||
| width: 100%; | ||
| } | ||
|
|
||
| /* Modern Input Styling */ | ||
| input, select, textarea { | ||
| background-color: rgba(255, 255, 255, 0.8); | ||
| border: 1px solid transparent; | ||
| border-bottom: 2px solid #ddd; | ||
| border-radius: 0; | ||
| transition: border-color 0.3s ease, box-shadow 0.3s ease; | ||
| } | ||
|
|
||
| input:focus, select:focus, textarea:focus { | ||
| border-bottom: 2px solid #c471ed; | ||
| box-shadow: 0 4px 6px -1px rgba(196, 113, 237, 0.1); | ||
| } | ||
|
|
||
| /* Animated Background */ | ||
| body::before { | ||
| content: ''; | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| background: linear-gradient(135deg, rgba(18, 194, 233, 0.3), rgba(196, 113, 237, 0.3), rgba(246, 79, 89, 0.3)); | ||
| animation: gradientShift 6s infinite alternate; | ||
| } | ||
|
|
||
| @keyframes gradientShift { | ||
| 0% { | ||
| background-position: 0% 50%; | ||
| } | ||
| 50% { | ||
| background-position: 100% 50%; | ||
| } | ||
| 100% { | ||
| background-position: 0% 50%; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters