good vibes form added.

jeevika17 · Aug 2, 2021 · 57a16dd · 57a16dd
1 parent 0a11ad4
commit 57a16dd
Show file tree

Hide file tree

Showing 5 changed files with 222 additions and 0 deletions.
diff --git a/Good-Vibes-Form/goodVibesForm.png b/Good-Vibes-Form/goodVibesForm.png
diff --git a/Good-Vibes-Form/index.html b/Good-Vibes-Form/index.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>good vibes form</title>
+    <link rel="stylesheet" href="main1.css">
+</head>
+
+<body>
+    <h1>Good Vibes Form</h1>
+    <form>
+        <p id="des">Tell us something that happened to you
+            today.
+        </p>
+        <div class="form-rows">
+            <div class="left">
+                <label for="name">Name</label>
+            </div>
+            <div class="right">
+                <input type="text" id="name" placeholder="Enter your name">
+            </div>
+        </div>
+
+        <div class="form-rows">
+            <div class="left">
+                <label for="email">Email</label>
+            </div>
+            <div class="right">
+                <input type="email" id="email" placeholder="Enter your email address">
+                <div class="right"></div>
+            </div>
+            <div class="form-rows"> <div class="left">
+                <label for="good">On ascale of 1-10,how
+                    good was it?
+                </label>
+            </div>
+            <div class="right">
+                <input type="number" id="good" placeholder="Enter a number between 1-10">
+            </div>
+        </div>
+        <div class="form-rows">
+            <div class="left">
+                <label for="list">Where did it
+                    happen?
+                </label>
+            </div>
+            <div class="right">
+                <select id="list">
+                    <option value="1">At home</option>
+                    <option value="2">At my commute</option>
+                    <option value="3">At street</option>
+                    <option value="4">other</option>
+                </select>
+            </div>
+        </div>
+        <div class="form-rows">
+            <div class="left">
+                <label>At what time did it happen?</label>
+            </div>
+            <div class="right">
+                <input type="radio" style="height: 8px;" name="time">
+                <p>Morning</p><br>
+                <input type="radio" style="height: 8px;" name="time">
+                <p>Afternoon</p><br>
+                <input type="radio" style="height: 8px;" name="time">
+                <p>Evening</p><br>
+            </div>
+        </div>
+        <div class="form-rows">
+            <div class="left">
+                <label>At what time did it happen?</label>
+            </div>
+            <div class="right">
+                <input type="checkbox" style="height: 8px;" name="emotions">
+                <p>Exited</p><br>
+                <input type="checkbox" style="height: 8px;" name="emotions">
+                <p>Humbled</p><br>
+                <input type="checkbox" style="height: 8px;" name="emotions">
+                <p>Elated</p><br>
+                <input type="checkbox" style="height: 8px;" name="emotions">
+                <p>Loved</p><br>
+                <input type="checkbox" style="height: 8px;" name="emotions">
+                <p>Enthusiatic</p><br>
+            </div>
+        </div>
+        <div class="form-rows">
+            <div class="left">
+                <label for="text">Please describe your positive experience.</label>
+            </div>
+            <div class="right">
+                <textarea id="text" placeholder="Enter your experience here" cols="25" rows="5"></textarea>
+            </div>
+        </div>
+        <input type="submit" id="button" value="submit">
+    </form>
+
+</body>
+
+</html>
diff --git a/Good-Vibes-Form/main1.css b/Good-Vibes-Form/main1.css
@@ -0,0 +1,87 @@
+*{
+    margin:0;
+    padding:0;
+}
+body{
+    background-color:lightblue;
+    display:flex;
+    flex-direction:column;
+    align-items:center;
+}
+h1{
+    font-size:60px;
+}
+/*form style*/
+form{
+    text-align:center;
+    border-radius:5px;
+    border:1px solid rgb(240, 234, 234);
+    background-color: rgb(240, 234, 234);
+    width:55%;
+    margin:40px;
+    padding:20px;
+}
+
+.form-rows{
+    position:static;
+    display:block;
+
+}
+
+.form-rows input{
+font-size:15px;
+margin:15px;
+border-radius:5px;
+padding:5px 15px;
+border:1px solid lightgrey;
+}
+.form-rows label{
+font-size:15px;
+
+}
+.right{
+    display:inline-block;
+    vertical-align:middle;
+    width:55%;
+    text-align:left;
+
+}
+.left{
+    display:inline-block;
+    text-align:right;
+    width:40%;
+    vertical-align:middle;
+
+}
+p{
+    font-size:15px;
+    display:inline-block;
+}
+textarea{
+    font-size: 5px 15px;
+    border-radius:4px;
+    padding:15px;
+    border:1px solid lightgrey;
+}
+#button{
+    padding:5px;
+    background-color:rgb(102, 182, 247);
+    color:white;
+    border:1px solid rgb(102, 182, 247);;
+    border-radius:3px;
+    font-size:15px;
+}
+#list{
+    font-size:15px;
+    border-radius:2px;
+    border:1px solid lightgrey;
+    margin: 5px;
+    color:rgb(122, 116, 116);
+}
+#des{
+    font-size:25px;
+    margin-bottom:18px;
+}
+
+
+
diff --git a/Good-Vibes-Form/readme.md b/Good-Vibes-Form/readme.md
@@ -0,0 +1,33 @@
+# Welcome 🖐 to the Good Vibes Form.
+It is a simple and resonsive Good Vibes Form.
+
+## Desktop View
+![Default View](goodVibesForm.png)
+
+
+
+## 💻Tech Stack
+<br>
+
+![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
+![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
+
+<br>
+
+### How to use:
+
+---
+
+- Download or clone the repository
+
+```
+git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
+```
+
+- Go to the directory
+- Run the index.html file
+- Navigate the form.
+
+<br>
+
+## Happy Coding!
diff --git a/Index.md b/Index.md
@@ -130,3 +130,4 @@ I've used the concept of *Async functions* and *react hook usestate* also worked
 |[Product Landing Page](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/saloni-15-project-1/Product%20Landing%20Page)| A beginner-friendly single-page product landing website built with HTML and CSS for understanding the concept of responsive websites using CSS Grids.
 | [Loan Calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Loan%20Calculator)| This is a simple loan calculator which calculates the Loan EMI (Equated Monthly Installment).
 |[My Online Meal](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/My-Online-Meal)| It is a simple and responsive website.
+|[Good Vibes Form](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Good-Vibes-Form)| It is a simple and responsive form which can be used in any project.