Challenge: Media Usage
Let's practice a bit and make sure you've successfully uploaded your media files to AWS S3.
You see a picture of a turtle from the previous chapter, along with a fun fact about it. Your task is to replace the link in the code below with a link to your own picture of any creature or object, and write some interesting fact about your picture. It could be an animal or a building, anything. The most important thing is that when you click on "run code," your picture is displayed correctly and no errors are shown
index.html
99
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
<div style="border-radius: 10px; overflow: hidden;">
<div id="animated_styled_border">
<div style="display: flex; justify-content: space-between; align-content: center; align-items: center;">
<div style="flex: 1;">
<center>
<div style="width: 150px;">
<img width="150px" src="___" alt="your_image">
</div>
</center>
</div>
<div style="flex: 2;">
<p style="line-height: 1.3; text-align: justify">
Your description or fact here.</p>
</div>
</div>
</div>
</div>
<style>
@property --border-gradient-angle {
syntax: "<angle>";
initial-value: 90deg;
inherits: false;
}
#animated_styled_border {
border: 5px solid;
padding: 15px;
border-image: conic-gradient(from var(--border-gradient-angle), #ff8a191a, rgb(255, 138, 25, 1) 0.1turn, rgb(255, 138, 25, 1) 0.15turn, rgb(255, 138, 25, 0.1) 0.25turn) 30;
animation: borderRotate 4000ms linear infinite forwards;
border-radius: 15px;
}
@keyframes borderRotate {
100% {
--border-gradient-angle: 450deg;
}
}
</style>
Was alles duidelijk?
Bedankt voor je feedback!
Sectie 2. Hoofdstuk 4
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
