Skip to content

Commit 40b77e4

Browse files
djmears-devdjmears-dev
committed
added css and linked it to my html page
1 parent cd4c17b commit 40b77e4

2 files changed

Lines changed: 100 additions & 0 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<title>My form exercise</title>
77
<meta name="description" content="" />
88
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
<link rel="stylesheet" href="style.css">
910
</head>
1011
<body>
1112
<header>

‎Form-Controls/style.css‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
/* Import cool Google Font */
2+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
3+
4+
/* Reset default spacing */
5+
* {
6+
margin: 0;
7+
padding: 0;
8+
box-sizing: border-box;
9+
}
10+
11+
/* Page styling */
12+
body {
13+
font-family: 'Poppins', sans-serif;
14+
background: #f4f4f4;
15+
display: flex;
16+
justify-content: center;
17+
align-items: center;
18+
min-height: 100vh;
19+
color: #444;
20+
}
21+
22+
/* Main form container */
23+
main {
24+
background: white;
25+
padding: 40px;
26+
border-radius: 20px;
27+
width: 400px;
28+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
29+
}
30+
31+
/* Heading */
32+
h1 {
33+
text-align: center;
34+
margin-bottom: 25px;
35+
color: #ff4f87;
36+
}
37+
38+
/* Labels */
39+
label,
40+
p {
41+
font-weight: 500;
42+
margin-bottom: 8px;
43+
display: block;
44+
}
45+
46+
/* Text inputs and dropdown */
47+
input[type="text"],
48+
input[type="email"],
49+
select {
50+
width: 100%;
51+
padding: 12px;
52+
border: 2px solid #ddd;
53+
border-radius: 12px;
54+
margin-top: 6px;
55+
margin-bottom: 20px;
56+
font-size: 14px;
57+
transition: 0.3s;
58+
}
59+
60+
/* Input focus effect */
61+
input[type="text"]:focus,
62+
input[type="email"]:focus,
63+
select:focus {
64+
border-color: #ff4f87;
65+
outline: none;
66+
}
67+
68+
/* Radio buttons section */
69+
input[type="radio"] {
70+
margin-right: 5px;
71+
margin-left: 10px;
72+
}
73+
74+
/* Submit button */
75+
button {
76+
width: 100%;
77+
padding: 14px;
78+
border: none;
79+
border-radius: 12px;
80+
background: #ff4f87;
81+
color: white;
82+
font-size: 16px;
83+
font-weight: 600;
84+
cursor: pointer;
85+
transition: 0.3s;
86+
}
87+
88+
/* Button hover effect */
89+
button:hover {
90+
background: #e63e74;
91+
}
92+
93+
/* Footer */
94+
footer {
95+
position: absolute;
96+
bottom: 20px;
97+
font-size: 14px;
98+
color: #888;
99+
}

0 commit comments

Comments
 (0)