Skip to content

Commit 56b3eba

Browse files
manuel12manuel12
committed
CSS style showcase project, 1st commit.
0 parents  commit 56b3eba

File tree

4 files changed

+116
-0
lines changed

4 files changed

+116
-0
lines changed

‎.vscode/settings.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"workbench.colorCustomizations": {
3+
"activityBar.background": "#3C2638",
4+
"titleBar.activeBackground": "#54364F",
5+
"titleBar.activeForeground": "#FCFAFB"
6+
}
7+
}

‎demo.html

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
2+
<!DOCTYPE html>
3+
<html>
4+
<head>
5+
<link rel="stylesheet" href="styles.css" />
6+
<link rel="preconnect" href="https://fonts.googleapis.com" />
7+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
8+
<link
9+
href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap"
10+
rel="stylesheet"
11+
/>
12+
</head>
13+
<body>
14+
<header class="container-styles">
15+
<h1 id="title">Survey Form</h1>
16+
17+
<p id="description">
18+
Thank you for taking the time to fill out this form
19+
</p>
20+
</header>
21+
22+
<main class="container-styles">
23+
<form id="survey-form">
24+
<label for="name" id="name-label">
25+
Name
26+
<input
27+
id="name"
28+
type="text"
29+
placeholder="Enter name here..."
30+
required
31+
/>
32+
</label>
33+
<label for="email" id="email-label">
34+
Email
35+
<input
36+
id="email"
37+
type="email"
38+
required
39+
placeholder="Enter email here..."
40+
/>
41+
</label>
42+
<label for="number" id="number-label">
43+
Age (optional)
44+
<input
45+
id="number"
46+
type="number"
47+
min="13"
48+
max="120"
49+
placeholder="Enter age here..."
50+
/>
51+
</label>
52+
Which option best describes your current role?
53+
<select id="dropdown">
54+
<option>Student</option>
55+
<option>Full Time Job</option>
56+
<option>Full Time Learner</option>
57+
<option>Prefer not to say</option>
58+
<option>Other</option>
59+
</select>
60+
Would you recommend freeCodeCamp to a friend?
61+
<label>
62+
<input type="radio" name="recommend" value="definetely" />Definitely
63+
</label>
64+
<label>
65+
<input type="radio" name="recommend" value="maybe" />Maybe
66+
</label>
67+
<label>
68+
<input type="radio" name="recommend" value="not-sure" />Not sure
69+
</label>
70+
71+
What would you like to see improved? (Check all that apply)
72+
<label><input type="checkbox" value="A" />Front-end Projects</label>
73+
<label><input type="checkbox" value="B" />Back-end Projects</label>
74+
<label><input type="checkbox" value="C" />Data Visualization</label>
75+
<label><input type="checkbox" value="D" />Challenges</label>
76+
<label><input type="checkbox" value="E" />Open Source Community</label>
77+
<label><input type="checkbox" value="F" />Gitter help rooms</label>
78+
<label><input type="checkbox" value="G" />Videos</label>
79+
<label><input type="checkbox" value="H" />City Meetups</label>
80+
<label><input type="checkbox" value="J" />Wiki</label>
81+
<label><input type="checkbox" value="K" />Forum</label>
82+
<label><input type="checkbox" value="I" />Additional Courses</label>
83+
84+
<label>
85+
Any comments or suggestions?
86+
<textarea placeholder="Enter your comment here"> </textarea>
87+
</label>
88+
89+
<button id="submit" class="button-styles" type="submit">Submit</button>
90+
</form>
91+
</main>
92+
</body>
93+
</html>

‎index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
2+
<!DOCTYPE html>
3+
<html>
4+
<head>
5+
<link rel="stylesheet" href="styles.css" />
6+
<link rel="preconnect" href="https://fonts.googleapis.com" />
7+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
8+
<link
9+
href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap"
10+
rel="stylesheet"
11+
/>
12+
</head>
13+
<body>
14+
15+
</body>
16+
</html>

‎styles.css

Whitespace-only changes.

0 commit comments

Comments
 (0)