Skip to content

Commit 535c567

Browse files
jugeshraghavjugeshraghav
committed
conflicts resolved.
2 parents 28d0677 + 29c250d commit 535c567

File tree

5 files changed

+222
-0
lines changed

5 files changed

+222
-0
lines changed

‎Good-Vibes-Form/goodVibesForm.png

49.8 KB
Loading

‎Good-Vibes-Form/index.html

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>good vibes form</title>
8+
<link rel="stylesheet" href="main1.css">
9+
</head>
10+
11+
<body>
12+
<h1>Good Vibes Form</h1>
13+
<form>
14+
<p id="des">Tell us something that happened to you
15+
today.
16+
</p>
17+
<div class="form-rows">
18+
<div class="left">
19+
<label for="name">Name</label>
20+
</div>
21+
<div class="right">
22+
<input type="text" id="name" placeholder="Enter your name">
23+
</div>
24+
</div>
25+
26+
<div class="form-rows">
27+
<div class="left">
28+
<label for="email">Email</label>
29+
</div>
30+
<div class="right">
31+
<input type="email" id="email" placeholder="Enter your email address">
32+
<div class="right"></div>
33+
</div>
34+
<div class="form-rows"> <div class="left">
35+
<label for="good">On ascale of 1-10,how
36+
good was it?
37+
</label>
38+
</div>
39+
<div class="right">
40+
<input type="number" id="good" placeholder="Enter a number between 1-10">
41+
</div>
42+
</div>
43+
<div class="form-rows">
44+
<div class="left">
45+
<label for="list">Where did it
46+
happen?
47+
</label>
48+
</div>
49+
<div class="right">
50+
<select id="list">
51+
<option value="1">At home</option>
52+
<option value="2">At my commute</option>
53+
<option value="3">At street</option>
54+
<option value="4">other</option>
55+
</select>
56+
</div>
57+
</div>
58+
<div class="form-rows">
59+
<div class="left">
60+
<label>At what time did it happen?</label>
61+
</div>
62+
<div class="right">
63+
<input type="radio" style="height: 8px;" name="time">
64+
<p>Morning</p><br>
65+
<input type="radio" style="height: 8px;" name="time">
66+
<p>Afternoon</p><br>
67+
<input type="radio" style="height: 8px;" name="time">
68+
<p>Evening</p><br>
69+
</div>
70+
</div>
71+
<div class="form-rows">
72+
<div class="left">
73+
<label>At what time did it happen?</label>
74+
</div>
75+
<div class="right">
76+
<input type="checkbox" style="height: 8px;" name="emotions">
77+
<p>Exited</p><br>
78+
<input type="checkbox" style="height: 8px;" name="emotions">
79+
<p>Humbled</p><br>
80+
<input type="checkbox" style="height: 8px;" name="emotions">
81+
<p>Elated</p><br>
82+
<input type="checkbox" style="height: 8px;" name="emotions">
83+
<p>Loved</p><br>
84+
<input type="checkbox" style="height: 8px;" name="emotions">
85+
<p>Enthusiatic</p><br>
86+
</div>
87+
</div>
88+
<div class="form-rows">
89+
<div class="left">
90+
<label for="text">Please describe your positive experience.</label>
91+
</div>
92+
<div class="right">
93+
<textarea id="text" placeholder="Enter your experience here" cols="25" rows="5"></textarea>
94+
</div>
95+
</div>
96+
<input type="submit" id="button" value="submit">
97+
</form>
98+
99+
</body>
100+
101+
</html>

‎Good-Vibes-Form/main1.css

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
*{
2+
margin:0;
3+
padding:0;
4+
}
5+
body{
6+
background-color:lightblue;
7+
display:flex;
8+
flex-direction:column;
9+
align-items:center;
10+
}
11+
h1{
12+
font-size:60px;
13+
}
14+
/*form style*/
15+
form{
16+
text-align:center;
17+
border-radius:5px;
18+
border:1px solid rgb(240, 234, 234);
19+
background-color: rgb(240, 234, 234);
20+
width:55%;
21+
margin:40px;
22+
padding:20px;
23+
}
24+
25+
.form-rows{
26+
position:static;
27+
display:block;
28+
29+
}
30+
31+
.form-rows input{
32+
font-size:15px;
33+
margin:15px;
34+
border-radius:5px;
35+
padding:5px 15px;
36+
border:1px solid lightgrey;
37+
}
38+
.form-rows label{
39+
font-size:15px;
40+
41+
}
42+
.right{
43+
display:inline-block;
44+
vertical-align:middle;
45+
width:55%;
46+
text-align:left;
47+
48+
}
49+
.left{
50+
display:inline-block;
51+
text-align:right;
52+
width:40%;
53+
vertical-align:middle;
54+
55+
}
56+
p{
57+
font-size:15px;
58+
display:inline-block;
59+
}
60+
textarea{
61+
font-size: 5px 15px;
62+
border-radius:4px;
63+
padding:15px;
64+
border:1px solid lightgrey;
65+
}
66+
#button{
67+
padding:5px;
68+
background-color:rgb(102, 182, 247);
69+
color:white;
70+
border:1px solid rgb(102, 182, 247);
71+
border-radius:3px;
72+
font-size:15px;
73+
}
74+
#list{
75+
font-size:15px;
76+
border-radius:2px;
77+
border:1px solid lightgrey;
78+
margin: 5px;
79+
color:rgb(122, 116, 116);
80+
}
81+
#des{
82+
font-size:25px;
83+
margin-bottom:18px;
84+
}
85+
86+
87+

‎Good-Vibes-Form/readme.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Welcome 🖐 to the Good Vibes Form.
2+
It is a simple and resonsive Good Vibes Form.
3+
4+
## Desktop View
5+
![Default View](goodVibesForm.png)
6+
7+
8+
9+
## 💻Tech Stack
10+
<br>
11+
12+
![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
13+
![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
14+
15+
<br>
16+
17+
### How to use:
18+
19+
---
20+
21+
- Download or clone the repository
22+
23+
```
24+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
25+
```
26+
27+
- Go to the directory
28+
- Run the index.html file
29+
- Navigate the form.
30+
31+
<br>
32+
33+
## Happy Coding!

‎Index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,4 +130,5 @@ I've used the concept of *Async functions* and *react hook usestate* also worked
130130
|[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.
131131
| [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).
132132
|[My Online Meal](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/My-Online-Meal)| It is a simple and responsive website.
133+
|[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.
133134
|[Survey Form](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Survey-Form)| It is a simple and responsive urvey-Form.

0 commit comments

Comments
 (0)