Skip to content

Commit f470ad9

Browse files
NarendraKoya999NarendraKoya999
authored
FCC-RWD course Project
I added 15 projects as part of the FC Responsive Web Design Course.
1 parent 0ced756 commit f470ad9

29 files changed

Lines changed: 2968 additions & 0 deletions

File tree

‎Balance Sheet/index.html‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Balance Sheet</title>
8+
<link rel="stylesheet" href="./styles.css" />
9+
</head>
10+
11+
<body>
12+
<main>
13+
<section>
14+
<h1>
15+
<span class="flex">
16+
<span>AcmeWidgetCorp</span>
17+
<span>Balance Sheet</span>
18+
</span>
19+
</h1>
20+
<div id="years" aria-hidden="true">
21+
<span class="year">2019</span>
22+
<span class="year">2020</span>
23+
<span class="year">2021</span>
24+
</div>
25+
<div class="table-wrap">
26+
<table>
27+
<caption>
28+
Assets
29+
</caption>
30+
<thead>
31+
<tr>
32+
<td></td>
33+
<th><span class="sr-only year">2019</span></th>
34+
<th><span class="sr-only year">2020</span></th>
35+
<th class="current"><span class="sr-only year">2021</span></th>
36+
</tr>
37+
</thead>
38+
<tbody>
39+
<tr class="data">
40+
<th>
41+
Cash
42+
<span class="description">This is the cash we currently have on hand.</span>
43+
</th>
44+
<td>$25</td>
45+
<td>$30</td>
46+
<td class="current">$28</td>
47+
</tr>
48+
<tr class="data">
49+
<th>
50+
Checking
51+
<span class="description">Our primary transactional account.</span>
52+
</th>
53+
<td>$54</td>
54+
<td>$56</td>
55+
<td class="current">$53</td>
56+
</tr>
57+
<tr class="data">
58+
<th>
59+
Savings
60+
<span class="description">Funds set aside for emergencies.</span>
61+
</th>
62+
<td>$500</td>
63+
<td>$650</td>
64+
<td class="current">$728</td>
65+
</tr>
66+
<tr class="total">
67+
<th>Total <span class="sr-only">Assets</span></th>
68+
<td>$579</td>
69+
<td>$736</td>
70+
<td class="current">$809</td>
71+
</tr>
72+
</tbody>
73+
</table>
74+
<table>
75+
<caption>
76+
Liabilities
77+
</caption>
78+
<thead>
79+
<tr>
80+
<td></td>
81+
<th><span class="sr-only">2019</span></th>
82+
<th><span class="sr-only">2020</span></th>
83+
<th><span class="sr-only">2021</span></th>
84+
</tr>
85+
</thead>
86+
<tbody>
87+
<tr class="data">
88+
<th>
89+
Loans
90+
<span class="description">The outstanding balance on our startup loan.</span>
91+
</th>
92+
<td>$500</td>
93+
<td>$250</td>
94+
<td class="current">$0</td>
95+
</tr>
96+
<tr class="data">
97+
<th>
98+
Expenses
99+
<span class="description">Annual anticipated expenses, such as payroll.</span>
100+
</th>
101+
<td>$200</td>
102+
<td>$300</td>
103+
<td class="current">$400</td>
104+
</tr>
105+
<tr class="data">
106+
<th>
107+
Credit
108+
<span class="description">The outstanding balance on our credit card.</span>
109+
</th>
110+
<td>$50</td>
111+
<td>$50</td>
112+
<td class="current">$75</td>
113+
</tr>
114+
<tr class="total">
115+
<th>Total <span class="sr-only">Liabilities</span></th>
116+
<td>$750</td>
117+
<td>$600</td>
118+
<td class="current">$475</td>
119+
</tr>
120+
</tbody>
121+
</table>
122+
<table>
123+
<caption>
124+
Net Worth
125+
</caption>
126+
<thead>
127+
<tr>
128+
<td></td>
129+
<th><span class="sr-only">2019</span></th>
130+
<th><span class="sr-only">2020</span></th>
131+
<th><span class="sr-only">2021</span></th>
132+
</tr>
133+
</thead>
134+
<tbody>
135+
<tr class="total">
136+
<th>Total <span class="sr-only">Net Worth</span></th>
137+
<td>$-171</td>
138+
<td>$136</td>
139+
<td class="current">$334</td>
140+
</tr>
141+
</tbody>
142+
</table>
143+
</div>
144+
</section>
145+
</main>
146+
</body>
147+
148+
</html>

‎Balance Sheet/styles.css‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
span[class~="sr-only"] {
2+
border: 0 !important;
3+
clip: rect(1px, 1px, 1px, 1px) !important;
4+
clip-path: inset(50%) !important;
5+
height: 1px !important;
6+
width: 1px !important;
7+
position: absolute !important;
8+
overflow: hidden !important;
9+
white-space: nowrap !important;
10+
padding: 0 !important;
11+
margin: -1px !important;
12+
}
13+
14+
html {
15+
box-sizing: border-box;
16+
}
17+
18+
body {
19+
font-family: sans-serif;
20+
color: #0a0a23;
21+
}
22+
23+
h1 {
24+
max-width: 37.25rem;
25+
margin: 0 auto;
26+
padding: 1.5rem 1.25rem;
27+
}
28+
29+
h1 .flex {
30+
display: flex;
31+
flex-direction: column-reverse;
32+
gap: 1rem;
33+
}
34+
35+
h1 .flex span:first-of-type {
36+
font-size: 0.7em;
37+
}
38+
39+
h1 .flex span:last-of-type {
40+
font-size: 1.2em;
41+
}
42+
43+
section {
44+
max-width: 40rem;
45+
margin: 0 auto;
46+
border: 2px solid #d0d0d5;
47+
}
48+
49+
#years {
50+
display: flex;
51+
justify-content: flex-end;
52+
position: sticky;
53+
z-index: 999;
54+
top: 0;
55+
background: #0a0a23;
56+
color: #fff;
57+
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
58+
margin: 0 -2px;
59+
}
60+
61+
#years span[class] {
62+
font-weight: bold;
63+
width: 4.5rem;
64+
text-align: right;
65+
}
66+
67+
.table-wrap {
68+
padding: 0 0.75rem 1.5rem 0.75rem;
69+
}
70+
71+
table {
72+
border-collapse: collapse;
73+
border: 0;
74+
width: 100%;
75+
position: relative;
76+
margin-top: 3rem;
77+
}
78+
79+
table caption {
80+
color: #356eaf;
81+
font-size: 1.3em;
82+
font-weight: normal;
83+
position: absolute;
84+
top: -2.25rem;
85+
left: 0.5rem;
86+
}
87+
88+
tbody td {
89+
width: 100vw;
90+
min-width: 4rem;
91+
max-width: 4rem;
92+
}
93+
94+
tbody th {
95+
width: calc(100% - 12rem);
96+
}
97+
98+
tr[class="total"] {
99+
border-bottom: 4px double #0a0a23;
100+
font-weight: bold;
101+
}
102+
103+
tr[class="total"] th {
104+
text-align: left;
105+
padding: 0.5rem 0 0.25rem 0.5rem;
106+
}
107+
108+
tr.total td {
109+
text-align: right;
110+
padding: 0 0.25rem;
111+
}
112+
113+
tr.total td:nth-of-type(3) {
114+
padding-right: 0.5rem;
115+
}
116+
117+
tr.total:hover {
118+
background-color: #99c9ff;
119+
}
120+
121+
td.current {
122+
font-style: italic;
123+
}
124+
125+
tr.data {
126+
background-image: linear-gradient(
127+
to bottom,
128+
#dfdfe2 1.845rem,
129+
white 1.845rem
130+
);
131+
}
132+
133+
tr.data th {
134+
text-align: left;
135+
padding-top: 0.3rem;
136+
padding-left: 0.5rem;
137+
}
138+
139+
tr.data th .description {
140+
display: block;
141+
font-weight: normal;
142+
font-style: italic;
143+
padding: 1rem 0 0.75rem;
144+
margin-right: -13.5rem;
145+
}
146+
147+
tr.data td {
148+
vertical-align: top;
149+
padding: 0.3rem 0.25rem 0;
150+
text-align: right;
151+
}

‎Cafe Menu/index.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Cafe Menu</title>
8+
<link href="styles.css" rel="stylesheet" />
9+
</head>
10+
11+
<body>
12+
<div class="menu">
13+
<main>
14+
<h1>CAMPER CAFE</h1>
15+
<p class="established">Est. 2020</p>
16+
<hr />
17+
<section>
18+
<h2>Coffee</h2>
19+
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon" />
20+
<article class="item">
21+
<p class="flavor">French Vanilla</p>
22+
<p class="price">3.00</p>
23+
</article>
24+
<article class="item">
25+
<p class="flavor">Caramel Macchiato</p>
26+
<p class="price">3.75</p>
27+
</article>
28+
<article class="item">
29+
<p class="flavor">Pumpkin Spice</p>
30+
<p class="price">3.50</p>
31+
</article>
32+
<article class="item">
33+
<p class="flavor">Hazelnut</p>
34+
<p class="price">4.00</p>
35+
</article>
36+
<article class="item">
37+
<p class="flavor">Mocha</p>
38+
<p class="price">4.50</p>
39+
</article>
40+
</section>
41+
<section>
42+
<h2>Desserts</h2>
43+
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg" alt="pie icon" />
44+
<article class="item">
45+
<p class="dessert">Donut</p>
46+
<p class="price">1.50</p>
47+
</article>
48+
<article class="item">
49+
<p class="dessert">Cherry Pie</p>
50+
<p class="price">2.75</p>
51+
</article>
52+
<article class="item">
53+
<p class="dessert">Cheesecake</p>
54+
<p class="price">3.00</p>
55+
</article>
56+
<article class="item">
57+
<p class="dessert">Cinnamon Roll</p>
58+
<p class="price">2.50</p>
59+
</article>
60+
</section>
61+
</main>
62+
<hr class="bottom-line" />
63+
<footer>
64+
<p>
65+
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
66+
</p>
67+
<p class="address">123 Free Code Camp Drive</p>
68+
</footer>
69+
</div>
70+
</body>
71+
72+
</html>

0 commit comments

Comments
 (0)