Skip to content

Commit 602955f

Browse files
VandreicVandreic
committed
Lesson 3
Added lesson 3.
1 parent c74bac1 commit 602955f

11 files changed

+236
-3
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
A website containing exercises from a HTML & CSS course by SuperSimpleDev on [YouTube](https://youtu.be/G3e-cpL7ofc).
33

44
## Access the Website
5-
The website is hosted on GitHub Pages. Click [here](https://vandreic.github.io/html-css-course/) to visit.
5+
The website is hosted on GitHub Pages. Click [here](https://vandreic.github.io/HTML-CSS-Course/) to visit.
66

77
## Progress
88
- [x] 1. HTML Basics
99
- [x] 2. CSS Basics
10-
- [ ] 3. Hovers, Transitions, Shadows
10+
- [x] 3. Hovers, Transitions, Shadows
1111
- [ ] 4. Chrome DevTools & CSS Box Model
1212
- [ ] 5. Text Styles
1313
- [ ] 6. The HTML Structure

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ <h2>Lessons</h2>
1212
<ul>
1313
<li><a href="lessons/lesson-01/lesson-01.html">Lesson 1: HTML Basics</a></li>
1414
<li><a href="lessons/lesson-02/lesson-02.html">Lesson 2: CSS Basics</a></li>
15-
<li>Lesson 3: Hovers, Transitions, Shadows</li>
15+
<li><a href="lessons/lesson-03/lesson-03.html">Lesson 3: Hovers, Transitions, Shadows</a></li>
1616
<li>Lesson 4: Chrome DevTools & CSS Box Model</li>
1717
<li>Lesson 5: Text Styles</li>
1818
<li>Lesson 6: The HTML Structure</li>

‎lessons/lesson-03/lesson-03.css‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
/* Uber button */
2+
.uber-button {
3+
background-color: black;
4+
color: white;
5+
border: none;
6+
cursor: pointer;
7+
padding: 10px 20px;
8+
transition: opacity 0.15s;
9+
}
10+
.uber-button:hover {
11+
opacity: 0.8;
12+
}
13+
14+
/* Amazon button */
15+
.amazon-button {
16+
background-color: rgb(255, 216, 20);
17+
color: black;
18+
border: none;
19+
cursor: pointer;
20+
padding: 10px 50px;
21+
border-radius: 40px;
22+
transition: background-color 0.15s;
23+
}
24+
.amazon-button:hover {
25+
background-color: rgba(255, 216, 20, 0.8);
26+
}
27+
28+
/* GitHub button */
29+
.github-button {
30+
background-color: rgb(46, 164, 79);
31+
color: white;
32+
border: none;
33+
cursor: pointer;
34+
padding: 10px 20px;
35+
border-radius: 5px;
36+
font-weight: bold;
37+
transition: box-shadow 0.15s;
38+
}
39+
.github-button:hover {
40+
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25);
41+
}
42+
43+
/* Bootstrap 'Get Started' button */
44+
.bootstrap-button-get-started {
45+
background-color: rgb(121, 82, 179);
46+
color: white;
47+
border: none;
48+
cursor: pointer;
49+
padding: 10px 20px;
50+
border-radius: 5px;
51+
font-weight: bold;
52+
transition: background-color 0.15s, color 0.15s;
53+
}
54+
.bootstrap-button-get-started:hover {
55+
background-color: rgb(100, 61, 158);
56+
color: white;
57+
}
58+
59+
/* Bootstrap 'Download' button */
60+
.bootstrap-button-download {
61+
background-color: white;
62+
color: rgb(109, 117, 125);
63+
border-radius: 5px;
64+
border-width: 1px;
65+
border-style: solid;
66+
border-color: rgb(109, 117, 125);
67+
cursor: pointer;
68+
padding: 10px 20px;
69+
font-weight: bold;
70+
transition: background-color 0.15s, color 0.15s;
71+
}
72+
.bootstrap-button-download:hover {
73+
background-color: rgb(109, 117, 125);
74+
color: white;
75+
}
76+
77+
/* LinkedIn 'Apply' button */
78+
.linkedin-button-apply {
79+
background-color: rgb(10, 102, 194);
80+
color: white;
81+
border: none;
82+
cursor: pointer;
83+
padding: 10px 14px;
84+
border-radius: 40px;
85+
font-weight: bold;
86+
transition: background-color 0.15s, border-width 0.15s;
87+
}
88+
.linkedin-button-apply:hover {
89+
background-color: rgb(8, 82, 156);
90+
border-width: 2px;
91+
}
92+
93+
/* LinkedIn 'Save' button */
94+
.linkedin-button-save {
95+
background-color: white;
96+
color: rgb(10, 102, 194);
97+
border-radius: 40px;
98+
border-width: 1px;
99+
border-style: solid;
100+
border-color: rgb(10, 102, 194);
101+
cursor: pointer;
102+
padding: 10px 14px;
103+
font-weight: bold;
104+
transition: background-color 0.15s, border-width 0.15s;
105+
}
106+
.linkedin-button-save:hover {
107+
background-color: rgb(235, 245, 255);
108+
border-width: 2px;
109+
}
110+
111+
/* Exercise 3f - Back to Amazon link */
112+
.ex3f-back-to-amazon {
113+
color: rgb(0, 113, 133);
114+
text-decoration: underline;
115+
cursor: pointer;
116+
transition: color 0.15s;
117+
}
118+
.ex3f-back-to-amazon:hover {
119+
color: rgb(212, 128, 1);
120+
}
121+
.ex3f-back-to-amazon:active {
122+
color: rgba(212, 128, 1, 0.65);
123+
}
124+
125+
/* Exercise 3f - Product name */
126+
.ex3f-product-name {
127+
color: black;
128+
font-size: 32px;
129+
font-weight: bold;
130+
}
131+
132+
/* Exercise 3f - Price */
133+
.ex3f-price {
134+
color: rgb(0, 118, 0);
135+
font-size: 16px;
136+
}
137+
138+
/* Exercise 3f - Delivery information */
139+
.ex3f-delivery {
140+
color: black;
141+
font-size: 14px;
142+
}
143+
144+
/* Exercise 3f - Add to Cart button */
145+
.ex3f-button-add-to-cart {
146+
background-color: rgb(255, 216, 20);
147+
color: black;
148+
border: none;
149+
cursor: pointer;
150+
padding: 10px 30px;
151+
border-radius: 40px;
152+
transition: background-color 0.15s, transform 0.1s;
153+
}
154+
.ex3f-button-add-to-cart:hover {
155+
background-color: rgba(255, 216, 20, 0.8);
156+
}
157+
.ex3f-button-add-to-cart:active {
158+
transform: scale(0.95);
159+
}
160+
161+
/* Exercise 3f - Buy Now button */
162+
.ex3f-button-buy-now {
163+
background-color: rgb(255, 164, 28);
164+
color: black;
165+
border: none;
166+
cursor: pointer;
167+
padding: 10px 30px;
168+
border-radius: 40px;
169+
transition: background-color 0.15s, transform 0.1s;
170+
}
171+
.ex3f-button-buy-now:hover {
172+
background-color: rgba(255, 164, 28, 0.8);
173+
}
174+
.ex3f-button-buy-now:active {
175+
transform: scale(0.95);
176+
}

‎lessons/lesson-03/lesson-03.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>HTML & CSS Course - Lesson 3</title>
6+
<link rel="stylesheet" href="lesson-03.css" />
7+
</head>
8+
<body>
9+
<h1>Lesson 3 Exercises - Hovers, Transitions, Shadows</h1>
10+
<a href="../../index.html"><button>Go back to Home</button></a>
11+
12+
<br />
13+
<br />
14+
15+
<h2>Exercise 3a</h2>
16+
<button class="uber-button">Request now</button>
17+
18+
<hr />
19+
<br />
20+
21+
<h2>Exercise 3b</h2>
22+
<button class="amazon-button">Add to Cart</button>
23+
24+
<hr />
25+
<br />
26+
27+
<h2>Exercise 3c</h2>
28+
<button class="github-button">Sign up</button>
29+
30+
<hr />
31+
<br />
32+
33+
<h2>Exercise 3d</h2>
34+
<button class="bootstrap-button-get-started">Get started</button>
35+
<button class="bootstrap-button-download">Download</button>
36+
37+
<hr />
38+
<br />
39+
40+
<h2>Exercise 3e</h2>
41+
<button class="linkedin-button-apply">Apply on company website</button>
42+
<button class="linkedin-button-save">Save</button>
43+
44+
<hr />
45+
<br />
46+
47+
<h2>Exercise 3f</h2>
48+
<a href="https://www.amazon.com" target="_blank"
49+
><p class="ex3f-back-to-amazon">Back to Amazon</p></a
50+
>
51+
<p class="ex3f-product-name">Nike Black Running Shoes</p>
52+
<p class="ex3f-price">$39 - in stock</p>
53+
<p class="ex3f-delivery">Free delivery tomorrow.</p>
54+
<button class="ex3f-button-add-to-cart">Add to Cart</button>
55+
<button class="ex3f-button-buy-now">Buy now</button>
56+
</body>
57+
</html>

‎lessons/lesson-03/lesson-exercises-03-01-01.png‎

1020 KB
Loading

‎lessons/lesson-03/lesson-exercises-03-01-02.png‎

1 MB
Loading

‎lessons/lesson-03/lesson-exercises-03-01-03.png‎

1.02 MB
Loading

‎lessons/lesson-03/lesson-exercises-03-02-01.png‎

916 KB
Loading

‎lessons/lesson-03/lesson-exercises-03-02-02.png‎

909 KB
Loading

‎lessons/lesson-03/lesson-exercises-03-02-03.png‎

775 KB
Loading

0 commit comments

Comments
 (0)