Skip to content

Commit e73d2ea

Browse files
softacodersoftacoder
committed
Second version
1 parent 20eaeee commit e73d2ea

File tree

2 files changed

+109
-89
lines changed

2 files changed

+109
-89
lines changed

‎Form-Controls/index.html‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,7 @@
1313
<h1>T-shirts</h1>
1414
</header>
1515
<main>
16-
17-
<form action="" id="tshirt-form">
16+
1817
<div class="form-div">
1918
<label id="name-label">Name</label><input type="text" id="name" name="name" placeholder="Enter your Name" required>
2019
</div>
@@ -49,23 +48,22 @@ <h1>T-shirts</h1>
4948
</select>
5049
</div>
5150
<div class="form-div">
52-
<!-- write your html here-->
53-
<!-- try writing out the requirements first-->
51+
5452
<div class="info">
55-
<label for="birth-date">D.O.D.<span class="sr-only">(Date of Delivery)</span></label>
56-
<input type="birth" name="birth-date" id="birth-date" />
53+
<label for="del-date">D.O.D.<span class="sr-only">(Date of Delivery)</span></label>
54+
<input type="date" name="del-date" id="del-date" />
5755
</div>
5856
<div class="form-div">
5957
<label>
60-
<input id="submit" type="submit" value="Submit">
58+
<input id="submit" type="submit" value="submit">
6159
</div>
6260
</form>
6361

6462
</main>
6563
<footer>
66-
<!-- change to your name-->
64+
6765
<h2>By Jan Softa</h2>
6866
</footer>
6967
</body>
7068

71-
</html>
69+
</html>

‎Form-Controls/styles.css‎

Lines changed: 102 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,109 @@
11
body{
2-
font-family: 'Poppins', sans-sherif;
3-
background-repeat: no-repeat;
4-
background-size: cover;
5-
background-image: linear-gradient(
6-
115deg,
7-
rgba(58, 58, 158, 0.8),
8-
rgba(136, 136, 206, 0.7)
9-
),
10-
url(https://cdn.pixabay.com/photo/2017/09/09/11/52/t-shirts-2731768_960_720.jpg);
11-
background-position: center;
12-
width: 100vw;
13-
color: white;
14-
margin: 0;
15-
}
16-
17-
#title{
18-
margin-top: 30px;
19-
text-align: center;
20-
margin-bottom: 5px;
21-
font-weight: 400;
22-
}
23-
24-
#description{
25-
margin-top: 0;
26-
text-align: center;
27-
font-style: italic;
28-
}
29-
30-
#survey-form{
31-
background-color: rgba(27, 27, 50, 0.8);
32-
width: 80%;
33-
margin: 0 auto;
34-
border-radius: 10px;
35-
}
2+
font-family: 'Poppins', sans-sherif;
3+
background-repeat: no-repeat;
4+
background-size: cover;
5+
background-image: linear-gradient(
6+
115deg,
7+
rgba(58, 58, 158, 0.8),
8+
rgba(136, 136, 206, 0.7)
9+
), url("https://cdn.pixabay.com/photo/2017/09/09/11/52/t-shirts-2731768_960_720.jpg");
10+
background-position: center;
11+
width: 100vw;
12+
color: white;
13+
margin: 0;
14+
}
15+
16+
17+
#title{
18+
margin-top: 30px;
19+
text-align: center;
20+
margin-bottom: 5px;
21+
font-weight: 400;
22+
}
23+
24+
#description{
25+
margin-top: 0;
26+
text-align: center;
27+
font-style: italic;
28+
}
29+
30+
#survey-form{
31+
background-color: rgba(27, 27, 50, 0.8);
32+
width: 80%;
33+
margin: 0 auto;
34+
border-radius: 10px;
35+
}
36+
37+
38+
.form-div{
39+
display: flex;
40+
flex-direction: column;
41+
justify-content: center;
42+
align-items: center;
43+
margin: 0 auto 1.25rem auto;
44+
padding: 0.25rem;
45+
}
46+
47+
label{
48+
margin-bottom: 10px;
49+
width: 90%;
50+
font-size: 18px;
51+
padding-top: 8px;
52+
}
53+
54+
input, select{
55+
width: 90%;
56+
height: 40px;
57+
border-radius: 5px;
58+
font-size: 15px;
59+
}
60+
61+
textarea{
62+
width: 90%;
63+
font-size: 16px;
64+
height: 100px;
65+
}
66+
67+
input[type="radio"], input[type="checkbox"]{
68+
height: 20px;
69+
margin-left: 80px;
70+
width: 10px;
3671

37-
.form-div{
72+
}
73+
74+
.form-radio, .div-checkbox{
3875
display: flex;
39-
flex-direction: column;
40-
justify-content: center;
76+
flex-direction: row;
4177
align-items: center;
42-
margin: 0 auto 1.25rem auto;
43-
padding: 0.25rem;
44-
}
78+
padding-bottom: 5px;
79+
}
4580

46-
label{
47-
margin-bottom: 10px;
48-
width: 90%;
49-
font-size: 18px;
50-
padding-top: 8px;
51-
}
52-
53-
input, select{
54-
width: 90%;
55-
height: 40px;
56-
border-radius: 5px;
57-
font-size: 15px;
58-
}
59-
60-
textarea{
61-
width: 90%;
62-
font-size: 16px;
63-
height: 100px;
64-
}
65-
66-
input[type="radio"], input[type="checkbox"]{
67-
height: 20px;
68-
margin-left: 80px;
69-
width: 10px;
70-
71-
}
72-
73-
.form-radio, .div-checkbox{
74-
display: flex;
75-
flex-direction: row;
76-
align-items: center;
77-
padding-bottom: 5px;
81+
input[type="date"]{
82+
background-color: #0080ff;
83+
padding: 5px;
84+
position: absolute;
85+
transform: translate(-50%,-50%);
86+
87+
left: 50%;
88+
font-family: "Roboto Mono",monospace;
89+
color: #ffffff;
90+
font-size: 18px;
91+
border: none;
92+
outline: none;
93+
border-radius: 5px;
7894
}
79-
80-
input[type="submit"]{
81-
width: 100%;
82-
color: white;
83-
background-color: green;
84-
border: 1px solid green;
85-
margin-bottom: 50px;
95+
::-webkit-calendar-picker-indicator{
96+
background-color: #ffffff;
97+
padding: 5px;
98+
cursor: pointer;
99+
border-radius: 3px;
86100
}
87-
101+
102+
103+
input[type="submit"]{
104+
width: 100%;
105+
color: white;
106+
background-color: green;
107+
border: 1px solid green;
108+
margin-bottom: 50px;
109+
}

0 commit comments

Comments
 (0)