Skip to content

Commit 26fd7f4

Browse files
Jestavo1Jestavo1
committed
renaming CSS file for form controls
1 parent 7dccd6a commit 26fd7f4

1 file changed

Lines changed: 112 additions & 0 deletions

File tree

‎Form-Controls/style.css‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
```css
2+
body {
3+
font-family: "Segoe UI", Tahoma, sans-serif;
4+
background: linear-gradient(135deg, #e8f0ff, #f8faff);
5+
color: #243447;
6+
margin: 0;
7+
min-height: 100vh;
8+
}
9+
10+
header {
11+
background: linear-gradient(120deg, #4a69bd, #6a89cc);
12+
color: #ffffff;
13+
text-align: center;
14+
padding: 35px 20px;
15+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
16+
}
17+
18+
header h1 {
19+
margin: 0;
20+
font-size: 2rem;
21+
letter-spacing: 1px;
22+
}
23+
24+
main {
25+
max-width: 700px;
26+
margin: 45px auto;
27+
padding: 0 25px;
28+
}
29+
30+
fieldset {
31+
background-color: #ffffff;
32+
border: none;
33+
border-left: 5px solid #4a69bd;
34+
border-radius: 12px;
35+
padding: 28px;
36+
margin-bottom: 25px;
37+
box-shadow: 0 8px 20px rgba(74, 105, 189, 0.12);
38+
}
39+
40+
legend {
41+
font-weight: 700;
42+
color: #4a69bd;
43+
padding: 0 12px;
44+
font-size: 1.1rem;
45+
}
46+
47+
fieldset p {
48+
margin-bottom: 20px;
49+
line-height: 1.5;
50+
}
51+
52+
input[type="text"],
53+
input[type="email"] {
54+
display: block;
55+
width: 100%;
56+
box-sizing: border-box;
57+
padding: 13px 15px;
58+
margin-top: 8px;
59+
border: 2px solid #d9e2f3;
60+
border-radius: 8px;
61+
background-color: #f9fbff;
62+
color: #243447;
63+
transition: border-color 0.2s ease, box-shadow 0.2s ease;
64+
}
65+
66+
select {
67+
display: block;
68+
margin-top: 8px;
69+
padding: 13px 15px;
70+
border: 2px solid #d9e2f3;
71+
border-radius: 8px;
72+
background-color: #f9fbff;
73+
color: #243447;
74+
cursor: pointer;
75+
}
76+
77+
input[type="submit"] {
78+
background: linear-gradient(120deg, #4a69bd, #3867d6);
79+
color: #ffffff;
80+
font-weight: 700;
81+
font-size: 1rem;
82+
padding: 13px 26px;
83+
border: none;
84+
border-radius: 8px;
85+
cursor: pointer;
86+
box-shadow: 0 5px 12px rgba(56, 103, 214, 0.25);
87+
transition: transform 0.2s ease, box-shadow 0.2s ease;
88+
}
89+
90+
input[type="submit"]:hover {
91+
transform: translateY(-2px);
92+
box-shadow: 0 8px 16px rgba(56, 103, 214, 0.3);
93+
}
94+
95+
input[type="text"]:focus,
96+
input[type="email"]:focus,
97+
input[type="radio"]:focus,
98+
input[type="submit"]:focus,
99+
select:focus {
100+
outline: none;
101+
border-color: #4a69bd;
102+
box-shadow: 0 0 0 4px rgba(74, 105, 189, 0.2);
103+
}
104+
105+
footer {
106+
text-align: center;
107+
font-weight: 600;
108+
color: #65748b;
109+
padding: 20px;
110+
margin-top: 20px;
111+
}
112+
```

0 commit comments

Comments
 (0)