Skip to content

Commit b848a7b

Browse files
atef7534atef7534
committed
Add my Assignments solutions
1 parent edbb32e commit b848a7b

32 files changed

Lines changed: 1434 additions & 4 deletions

File tree

‎all-course/Assignment-05/index.css‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
width: fit-content;
55
cursor: pointer;
66
/* Adds depth to the child elements' movements */
7-
perspective: 1000px;
7+
perspective: 1000px;
88
}
99

1010
.menu span {
@@ -20,7 +20,7 @@
2020

2121
/* Top bar: Slides down, rotates 45deg, and flips forward */
2222
.menu:hover span:nth-child(1) {
23-
transform: translateY(11px) rotateZ(-45deg) rotateY(180deg);
23+
transform: translateY(11px) rotateZ(45deg) rotateY(180deg);
2424
background-color: #ff4757;
2525
}
2626

@@ -32,6 +32,7 @@
3232

3333
/* Bottom bar: Slides up, rotates 45deg, and flips backward */
3434
.menu:hover span:nth-child(3) {
35-
transform: translateY(-11px) rotateZ(45deg) rotateY(-180deg);
35+
transform: translateY(-11px) rotateZ(-45deg) rotateY(-180deg);
3636
background-color: #ff4757;
37-
}
37+
}
38+

‎all-course/Assignment-06/index.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
a {
8+
text-decoration: none;
9+
color: #333;
10+
font-size: 2rem;
11+
}
12+
13+
[href="https://www.elzero.courses/"] {
14+
color: red;
15+
}

‎all-course/Assignment-06/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Assignment 06</title>
7+
<link rel="stylesheet" href="./index.css" />
8+
</head>
9+
<body>
10+
<!--
11+
-- TODO --
12+
🔵 We have a group of links as shown in the example. ✅
13+
🔵 You're required to style the last link that doesn't contain classes. ✅
14+
🔵 With considering that you can change their places so don't rely on selecting the element with the child. ✅
15+
🔵 You must not use classes in the solution at all. ✅
16+
🔵 It's required to set a color for the last link. ✅
17+
-->
18+
<a class="url" href="https://google.com">Google</a>
19+
<a class="link" href="https://elzero.org/">Elzero Academy</a>
20+
<a href="https://www.elzero.courses/">Elzero Courses</a>
21+
</body>
22+
</html>

‎all-course/Assignment-07/index.css‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
:root {
8+
--first-ul-bg: #eeeeee;
9+
--marker-li-bg: #dddddd;
10+
--first-li-color: #333;
11+
--teal-green: #009688;
12+
}
13+
14+
body {
15+
counter-set: n 0;
16+
font-family: arial;
17+
}
18+
19+
ul {
20+
list-style-type: none;
21+
}
22+
23+
body > ul {
24+
background-color: var(--first-ul-bg);
25+
padding: 10px;
26+
}
27+
28+
body > ul > li {
29+
color: var(--first-li-color);
30+
background-color: #fff;
31+
margin-top: 10px;
32+
padding: 10px;
33+
font-size: 1.5rem;
34+
}
35+
36+
body > ul > li:first-child {
37+
margin-top: 0px;
38+
}
39+
body > ul > li:last-child {
40+
background-color: var(--marker-li-bg);
41+
}
42+
43+
body > ul > li::before {
44+
counter-increment: n;
45+
content: counter(n);
46+
background-color: var(--marker-li-bg);
47+
display: inline-block;
48+
width: 40px;
49+
height: 40px;
50+
line-height: 40px;
51+
text-align: center;
52+
margin-right: 10px;
53+
font-weight: bold;
54+
}
55+
56+
body > ul > li:last-child::before {
57+
background-color: #fff;
58+
margin-left: 5px;
59+
}
60+
61+
body > ul > li > ul {
62+
padding: 10px 20px;
63+
counter-reset: n 0;
64+
}
65+
66+
body > ul > li:last-child > ul > li {
67+
background-color: white;
68+
margin-top: 10px;
69+
padding: 10px;
70+
margin-bottom: 15px;
71+
}
72+
73+
body > ul > li:last-child > ul > li::before {
74+
counter-increment: n;
75+
content: "4." counter(n);
76+
background-color: var(--teal-green);
77+
width: 40px;
78+
height: 40px;
79+
display: inline-block;
80+
color: #fff;
81+
line-height: 40px;
82+
text-align: center;
83+
margin-right: 10px;
84+
font-weight: bold;
85+
font-size: 19px;
86+
}

‎all-course/Assignment-07/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Assignment 07</title>
7+
<link rel="stylesheet" href="./index.css" />
8+
</head>
9+
<body>
10+
<!--
11+
-- TODO --
12+
🔵 You have the following HTML structure and you must not modify it. ✅
13+
🔵 Write a CSS code to create the shape as shown in the image below. ✅
14+
-->
15+
<ul>
16+
<li>List item</li>
17+
<li>List item</li>
18+
<li>List item</li>
19+
<li>
20+
List item
21+
<ul>
22+
<li>Sub List item</li>
23+
<li>Sub List item</li>
24+
<li>Sub List item</li>
25+
</ul>
26+
</li>
27+
</ul>
28+
</body>
29+
</html>

‎all-course/Assignment-08/index.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: #eee;
9+
font-family: Arial;
10+
}
11+
12+
:root {
13+
--bg-color: #2196f3;
14+
}
15+
16+
a {
17+
display: block;
18+
text-decoration: none;
19+
color: white;
20+
font-size: 1.3rem;
21+
background-color: var(--bg-color);
22+
width: fit-content;
23+
padding: 15px;
24+
margin: 15px 10px;
25+
border-radius: 15px;
26+
font-weight: bold;
27+
}
28+
29+
.url::before {
30+
content: "Name: " attr(title) "| URL: " attr(href);
31+
}
32+
33+
.link::before {
34+
content: "Name: " attr(title) "| URL: " attr(href);
35+
}
36+
37+
[href="https://www.elzero.courses/"]::before {
38+
content: "Name: " attr(title) "| URL: " attr(href);
39+
}

‎all-course/Assignment-08/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Assignment 08</title>
7+
<link rel="stylesheet" href="./index.css" />
8+
</head>
9+
<body>
10+
<!--
11+
-- TODO --
12+
👉 Don't modify on the following HTML structure. ✅
13+
👉 Feel free to write a CSS code to create the shape as shown in the image below. ✅
14+
👉 Note that the link text is not existed. ✅
15+
-->
16+
<a class="url" href="https://google.com" title="Google"></a>
17+
<a class="link" href="https://elzero.org/" title="Elzero Academy"></a>
18+
<a href="https://www.elzero.courses/" title="Elzero Courses"></a>
19+
</body>
20+
</html>

‎all-course/Assignment-09/index.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
* {
2+
padding: 0;
3+
box-sizing: border-box;
4+
}
5+
6+
body {
7+
font-family: Arial;
8+
background-color: var(--bg-color);
9+
}
10+
11+
:root {
12+
--bg-color: #eeeeee;
13+
--top-color: #ff4d00;
14+
--bottom-color: #ffb700;
15+
}
16+
17+
.text {
18+
padding: 20px;
19+
font-size: 5rem;
20+
text-transform: capitalize;
21+
font-weight: bold;
22+
background: linear-gradient(to bottom, var(--top-color), var(--bottom-color));
23+
background-clip: text;
24+
-webkit-text-fill-color: transparent;
25+
}

‎all-course/Assignment-09/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Assignment 09</title>
7+
<link rel="stylesheet" href="./index.css" />
8+
</head>
9+
<body>
10+
<!--
11+
-- TODO --
12+
👉 You must not modify the following HTML structure. ✅
13+
👉 You are free to write a CSS code to create shape in the image below. ✅
14+
👉 You may choose two difference colors. ✅
15+
-->
16+
<div class="text">elzero web school</div>
17+
</body>
18+
</html>

‎all-course/Assignment-10/index.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
:root {
8+
--black-tile: black;
9+
--white-tile: white;
10+
--bg-chessboard: #eee;
11+
}
12+
13+
body {
14+
background-color: var(--bg-chessboard);
15+
}
16+
17+
.container {
18+
border: 3px solid var(--black-tile);
19+
width: 600px;
20+
height: 600px;
21+
margin: 5vh auto;
22+
display: flex;
23+
flex-wrap: wrap;
24+
}
25+
26+
.container > div {
27+
width: calc(100% / 8);
28+
height: calc(100% / 8);
29+
}
30+
.black {
31+
background-color: var(--black-tile);
32+
}
33+
34+
.white {
35+
background-color: var(--white-tile);
36+
}

0 commit comments

Comments
 (0)