Skip to content

Commit 0a587d5

Browse files
Daniel1000cDaniel1000c
committed
add general formatting and form input formatting
1 parent 6aa1a8b commit 0a587d5

File tree

1 file changed

+177
-0
lines changed

1 file changed

+177
-0
lines changed

‎formapi/css/style.css‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
/************General Formatting************/
2+
*{
3+
padding: 0;
4+
margin: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
/*Format body waves*/
9+
body {
10+
background: linear-gradient(300deg,deepskyblue,darkviolet,blue);
11+
background-size: 180% 180%;
12+
animation: gradient-animation 18s ease infinite;
13+
background-attachment: fixed;
14+
}
15+
/************End of general formatting************/
16+
17+
/************Keyframe Formatting************/
18+
@keyframes gradient-animation {
19+
0%{
20+
background-position: 0% 50%;
21+
}
22+
50%{
23+
background-position: 100% 50%;
24+
}
25+
100%{
26+
background-position: 0% 50%;
27+
}
28+
}
29+
/************End of Keyframe Formatting************/
30+
31+
/************Font Face Formatting************/
32+
@font-face {
33+
font-family: 'VarelaRound-Regular';
34+
src: url(../fonts/VarelaRound-Regular.ttf);
35+
}
36+
37+
@font-face {
38+
font-family: 'MPLUSRounded1c-Regular', sans-serif;
39+
src: url(../fonts/MPLUSRounded1c-Regular.ttf);
40+
}
41+
42+
@font-face {
43+
font-family: 'MPLUSRounded1c-ExtraBold', sans-serif;
44+
src: url(../fonts/MPLUSRounded1c-ExtraBold.ttf);
45+
}
46+
/************End of Font Face Formatting************/
47+
48+
/************Root Formatting************/
49+
:root {
50+
--primary-title: 'VarelaRound-Regular', sans-serif;/*Font family for h1 tag*/
51+
--primary-font-size: 5em;/*Primary font size*/
52+
--label-font-family: 'MPLUSRounded1c-Regular', sans-serif;/*Font family for labels*/
53+
--submit-btn-font: 'MPLUSRounded1c-ExtraBold', sans-serif;/*Font family for submit button*/
54+
--footer-title: monospace;/*Font family for footer*/
55+
--footer-font-size: 2em;/*Footer font size*/
56+
}
57+
/************End of Root Formatting************/
58+
59+
/************Header Formatting************/
60+
header {
61+
padding: 20px;
62+
}
63+
64+
header h1 {
65+
font-family: var(--primary-title);
66+
font-size: var(--primary-font-size);
67+
color: white;
68+
69+
}
70+
/************End of Header Formatting************/
71+
72+
/************Form Formatting************/
73+
form {
74+
width: 80%;
75+
margin: 0 auto;
76+
background-color: white;
77+
border-radius: 10px;
78+
padding: 50px;
79+
}
80+
81+
/*Format form title*/
82+
form h2 {
83+
font-family: var(--primary-title);
84+
font-size: 3em;
85+
color: black;
86+
text-align: center;
87+
margin-bottom: 25px;
88+
}
89+
90+
/*Format form labels*/
91+
label {
92+
font-family: var(--label-font-family);
93+
font-size: 4em;
94+
}
95+
96+
/*Format form inputs*/
97+
98+
/*text inputs*/
99+
input[type="text"]{
100+
margin-top: 15px;
101+
width: 100%;
102+
font-size: 3em;
103+
border-radius: 8px;
104+
border: 2px solid black;
105+
}
106+
107+
/*Email inputs*/
108+
input[type="email"]{
109+
margin-top: 15px;
110+
width: 100%;
111+
font-size: 3em;
112+
border-radius: 8px;
113+
border: 2px solid black;
114+
}
115+
116+
/*Phone number inputs*/
117+
input[type="tel"]{
118+
margin-top: 15px;
119+
width: 100%;
120+
font-size: 3em;
121+
border-radius: 8px;
122+
border: 2px solid black;
123+
}
124+
125+
/*Textarea inputs*/
126+
textarea {
127+
margin-top: 15px;
128+
margin-bottom: 15px;
129+
width: 100%;
130+
font-size: 10em;
131+
border-radius: 8px;
132+
border: 2px solid black;
133+
}
134+
135+
/*File inputs*/
136+
input[type="file"] {
137+
margin-top: 15px;
138+
margin-bottom: 15px;
139+
width: 100%;
140+
font-size: 3em;
141+
border-radius: 8px;
142+
}
143+
144+
/*Format button container*/
145+
.buttonContainer {
146+
text-align: center;
147+
}
148+
149+
/*Format submit button*/
150+
input[type="submit"] {
151+
margin-top: 20px;
152+
display: inline-block;
153+
width: 100%;
154+
padding: 20px;
155+
font-size: 4em;
156+
font-family: var(--submit-btn-font);
157+
font-weight: bolder;
158+
text-transform: uppercase;
159+
border: none;
160+
border-radius: 10px;
161+
background-color: #dd7973;
162+
color: white;
163+
}
164+
/************End of Form Formatting************/
165+
/************Footer Formatting************/
166+
footer {
167+
margin-top: 25px;
168+
padding: 20px;
169+
text-align: center;
170+
font-size: var(--footer-font-size);
171+
font-family: var(--footer-title);
172+
color: white;
173+
}
174+
/************End of Footer Formatting************/
175+
176+
177+

0 commit comments

Comments
 (0)