Skip to content

Commit bfe1f94

Browse files
author
dima_los
committed
Update
1 parent 69131fd commit bfe1f94

26 files changed

+330
-0
lines changed

‎resources-6.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,10 @@ <h1 class="text-center pb-5">
7474
<div>
7575
<h2>Links (URLs)</h2>
7676
<ul class="links">
77+
<li>
78+
<a href="https://github.com/twbs/bootstrap" class="github-link">twbs/bootstrap</a>
79+
: https://www.youtube.com/watch?v=Idh8n5XuYIA
80+
</li>
7781
<li>
7882
<a href="https://github.com/twbs/bootstrap" class="github-link">twbs/bootstrap</a>
7983
: https://github.com/twbs/bootstrap

‎solutions/tutorial-06/3-1.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<p class="video-title">
2+
<a href="https://www.youtube.com/watch?v=Idh8n5XuYIA" class="video-link">
3+
Deadpool & Wolverine | Final Trailer | In Theaters July 26
4+
</a>
5+
</p>
6+
7+
<style>
8+
.video-title {
9+
width: 345px;
10+
}
11+
12+
.video-link {
13+
color: black;
14+
font-size: 18px;
15+
font-weight: bold;
16+
text-decoration: none;
17+
}
18+
</style>

‎solutions/tutorial-06/3-2.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<a href="https://www.youtube.com/watch?v=Idh8n5XuYIA">
2+
<img src="images/img-1.jpg" class="video-thumbnail">
3+
</a>
4+
<p class="video-title">
5+
<a href="https://www.youtube.com/watch?v=Idh8n5XuYIA" class="video-link">
6+
Deadpool & Wolverine | Final Trailer | In Theaters July 26
7+
</a>
8+
</p>
9+
<p class="channel-name">
10+
Marvel Entertainment
11+
</p>
12+
<p class="video-stats">
13+
7.1M views, 10 days ago
14+
</p>
15+
16+
<style>
17+
.video-thumbnail {
18+
width: 345px;
19+
}
20+
21+
.video-title {
22+
width: 345px;
23+
}
24+
25+
.video-link {
26+
color: black;
27+
font-size: 18px;
28+
font-weight: bold;
29+
text-decoration: none;
30+
}
31+
32+
.channel-name {
33+
color: grey;
34+
}
35+
36+
.video-stats {
37+
color: grey;
38+
}
39+
</style>

‎solutions/tutorial-06/3-3.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<img src="images/img-2.jpg" class="apartment-preview">
2+
<p class="apartment-title">
3+
Villa in Canggu,
4+
<img src="images/star.svg" class="apartment-star">
5+
5.0 (72)
6+
</p>
7+
<p class="apartment-description">
8+
Impressive brand new 4BR villa
9+
<br>
10+
Dec 11-15
11+
</p>
12+
<p class="apartment-price">
13+
$657 night
14+
</p>
15+
<style>
16+
.apartment-preview {
17+
width: 300px;
18+
}
19+
20+
.apartment-title {
21+
font-weight: bold;
22+
}
23+
24+
.apartment-star {
25+
width: 12px;
26+
}
27+
28+
.apartment-description {
29+
color: grey;
30+
line-height: 22px;
31+
text-transform: capitalize;
32+
}
33+
34+
.apartment-price {
35+
font-weight: bold;
36+
}
37+
</style>

‎solutions/tutorial-06/3-4.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<img src="images/img-3.webp" class="lego-preview">
2+
<p class="lego-stats">
3+
<img src="images/cake.png" class="lego-stats-img">
4+
18+
5+
<img src="images/parts-2.png" class="lego-stats-img">
6+
6187
7+
<img src="images/star-3.png" class="lego-stats-img">
8+
4.4
9+
</p>
10+
<p class="lego-title">
11+
The Razor Crest™
12+
</p>
13+
<p class="lego-price">
14+
599,99 €
15+
</p>
16+
<style>
17+
.lego-preview {
18+
width: 250px;
19+
}
20+
21+
.lego-stats {
22+
font-size: 14px;
23+
}
24+
25+
.lego-stats-img {
26+
height: 15px;
27+
}
28+
29+
.lego-price {
30+
font-weight: bold;
31+
}
32+
</style>

‎solutions/tutorial-06/3-5.html

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<p>
2+
<img src="images/icon-1.png" class="library-icon">
3+
<a href="https://github.com/twbs/bootstrap" class="library-name">
4+
twbs/bootstrap
5+
</a>
6+
</p>
7+
<p class="library-description">
8+
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
9+
</p>
10+
<p>
11+
<a href="https://github.com/topics/javascript" class="technology-tag">
12+
javascript
13+
</a>
14+
·
15+
<a href="https://github.com/topics/css" class="technology-tag">
16+
css
17+
</a>
18+
·
19+
<a href="https://github.com/topics/html" class="technology-tag">
20+
html
21+
</a>
22+
·
23+
<a href="https://github.com/topics/sass" class="technology-tag">
24+
sass
25+
</a>
26+
·
27+
<a href="https://github.com/topics/bootstrap" class="technology-tag">
28+
bootstrap
29+
</a>
30+
</p>
31+
<p class="library-stats">
32+
<img src="images/yellow-circle.png" class="icon-circle">
33+
JavaScript
34+
·
35+
<img src="images/hollow-star.png" class="icon-star">
36+
168k
37+
·
38+
Updated 18 minutes ago
39+
</p>
40+
41+
<style>
42+
.library-icon {
43+
width: 15px;
44+
}
45+
46+
.library-name {
47+
font-size: 25px;
48+
color: royalblue;
49+
}
50+
51+
.library-description {
52+
width: 500px;
53+
}
54+
55+
.technology-tag {
56+
color: royalblue;
57+
}
58+
59+
.library-stats {
60+
font-size: 14px;
61+
color: grey;
62+
}
63+
64+
.icon-circle {
65+
width: 12px;
66+
}
67+
.icon-star {
68+
width: 14px;
69+
}
70+
</style>

‎solutions/tutorial-06/3-6.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<p class="documentation-title">
2+
Terminology
3+
</p>
4+
<hr>
5+
<p class="documentation-subtitle">
6+
Rule declaration
7+
</p>
8+
<p>
9+
A “rule declaration” is the name given to a selector (or a group of selectors) with an accompanying group of properties. Here's an example:
10+
</p>
11+
<img src="images/code-1.png" class="code-image">
12+
<p class="documentation-subtitle">
13+
Selectors
14+
</p>
15+
<p>
16+
In a rule declaration, “selectors” are the bits that determine which elements in the DOM tree will be styled by the defined properties. Selectors can match HTML elements, as well as an element's class, ID, or any of its attributes. Here are some examples of selectors:
17+
</p>
18+
19+
<img src="images/code-2.png" class="code-image">
20+
21+
<style>
22+
.documentation-title {
23+
font-size: 26px;
24+
font-weight: bold;
25+
}
26+
27+
.documentation-subtitle {
28+
font-size: 20px;
29+
font-weight: bold;
30+
}
31+
32+
.code-image {
33+
width: 550px;
34+
}
35+
</style>

‎solutions/tutorial-06/3-7.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<p class="logo">
2+
<img src="images/logo-1.png" class="logo-image">
3+
YouTube
4+
</p>
5+
<img src="images/img-1.jpg" class="video-thumbnail">
6+
<p class="video-title">
7+
Deadpool & Wolverine | Final Trailer | In Theaters July 26
8+
</p>
9+
<p class="channel-name">
10+
Marvel Entertainment
11+
</p>
12+
<p class="video-stats">
13+
7.1M views, 10 days ago
14+
</p>
15+
16+
<style>
17+
.video-thumbnail {
18+
width: 345px;
19+
}
20+
21+
.video-title {
22+
width: 345px;
23+
font-size: 18px;
24+
font-weight: bold;
25+
}
26+
27+
.channel-name {
28+
color: grey;
29+
}
30+
31+
.video-stats {
32+
color: grey;
33+
}
34+
35+
.logo-image {
36+
width: 50px;
37+
}
38+
39+
.logo {
40+
font-size: 45px;
41+
font-weight: bold;
42+
}
43+
</style>

‎solutions/tutorial-06/3-8.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<p class="logo">
2+
<img src="images/logo-2.png" class="logo-image">
3+
Airbnb
4+
</p>
5+
<img src="images/img-2.jpg" class="apartment-preview">
6+
<p class="apartment-title">
7+
Villa in Canggu,
8+
<img src="images/star.svg" class="apartment-star">
9+
5.0 (72)
10+
</p>
11+
<p class="apartment-description">
12+
Impressive brand new 4BR villa
13+
<br>
14+
Dec 11-15
15+
</p>
16+
<p class="apartment-price">
17+
$657 night
18+
</p>
19+
<style>
20+
.apartment-preview {
21+
width: 300px;
22+
}
23+
24+
.apartment-title {
25+
font-weight: bold;
26+
}
27+
28+
.apartment-star {
29+
width: 12px;
30+
}
31+
32+
.apartment-description {
33+
color: grey;
34+
line-height: 22px;
35+
text-transform: capitalize;
36+
}
37+
38+
.apartment-price {
39+
font-weight: bold;
40+
}
41+
42+
.logo {
43+
font-size: 45px;
44+
color: lightcoral;
45+
}
46+
47+
.logo-image {
48+
width: 33px;
49+
}
50+
</style>

‎solutions/tutorial-06/images/cake.png

2.22 KB
Loading

0 commit comments

Comments
 (0)