File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change 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 >
Original file line number Diff line number Diff line change 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+ }
You can’t perform that action at this time.
0 commit comments