-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
129 lines (112 loc) · 3.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!--
Message from Brad:
Thanks for watching CSS3 in 30 Days! You're awesome.
Want more fun design & coding courses? Check out my website.
https://codecollege.ca
(it's free to start)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Useful Broken Images | Code 30 Things in 30 Days with CSS3</title>
<!-- NORMALIZE CSS -->
<link rel="stylesheet" href="./_theme-styles/normalize.css" />
<!-- PROJECT THEME CSS -->
<link rel="stylesheet" href="./_theme-styles/theme.css" />
<!-- FINAL PROJECT CSS (use for reference) -->
<link rel="stylesheet" href="final.css" />
<!-- SANDBOX CSS (this is your file!) -->
<link rel="stylesheet" href="sandbox.css" />
<link
href="https://fonts.googleapis.com/css?family=Bubblegum+Sans|Nova+Mono|Roboto+Condensed"
rel="stylesheet"
/>
</head>
<body>
<h1><small>Day #5</small> Useful Broken Images</h1>
<div class="sandbox">
<h2>Sandbox <small>This is where you play</small></h2>
<div class="content">
<p>
<strong>Instructions:</strong> Whether it's a typo in the
<code>img</code> tag source, or the image itself was misplaced or
removed on the server - images break all the time on the web. The
problem is, the browsers default way to display a broken image is
really ugly. You can fix that and actually use it as an opportunity to
enhance the user's experience on your web pages with CSS! That's your
challenge in this lesson.
</p>
<section>
<h4>Example</h4>
<img
src="img/brokenimage.jpg"
alt="Diamond crystal"
class="image"
/><br />
<img src="img/brokenimage2.jpg" alt="Paddleboard" class="image" />
</section>
</div>
</div>
<div class="final-result">
<h2>Final Result <small>Use this for reference!</small></h2>
<div class="content">
<section>
<h4>Example</h4>
<img
src="img/brokenimage.jpg"
alt="Flying eagle"
class="final__image"
/>
</section>
</div>
</div>
<div class="info">
<h2>Information <small>About this lesson</small></h2>
<h3>What are we making?</h3>
<p>Fun & fancy ways to handle broken images!</p>
<h3>Where can I use it?</h3>
<p>
In your websites, client projects and applications as a backup solution
for any broken images that might be misplaced on the server.
</p>
<h3>How compatible are these styles with major browsers?</h3>
<p>
Check the CSS3 styles from your stylesheet
<a href="http://caniuse.com/">on this website.</a> It allows you to see
the compatibility of every CSS style with major browser.
</p>
</div>
<footer>
<div class="logo">
<a href="http://codecollege.ca/" id="logo">
<img
src="./_theme-styles/img/bggray.svg"
width="60px"
id="logo_bg-gray"
/>
<img
src="./_theme-styles/img/bgyellow.svg"
width="60px"
id="logo_bg-yellow"
/>
<img
src="./_theme-styles/img/codecollegelogo.svg"
width="60px"
id="logo_codecollege"
/>
<!-- <img src="../_theme-styles/img/codecollegelogo.png" alt="Learn to Code at CodeCollege.ca" height="60px"> -->
</a>
</div>
<div class="made-by">
Made by <a href="https://github.com/zaharsm">Zahar</a>
</div>
<div class="course">
<a href="https://github.com/zaharsm"
>Code 30 things in 30 days with CSS3</a
>
</div>
<div class="copyright">©2022 Developed by Zahar</div>
</footer>
</body>
</html>