html
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
<h1>My Portfolio</h1>
<a href="images/1x1 pic.jpg" target="_blank">
<img src="images/1x1 pic.jpg" alt="My Image" id="profile" />
</a>
<h2>Photos</h2>
<br />
<div class="slider">
<!-- ******************************************************** -->
<input type="radio" name="buttons" id="slide-1" checked>
<input type="radio" name="buttons" id="slide-2">
<input type="radio" name="buttons" id="slide-3">
<!-- ******************************************************** -->
<div class="image-container">
<img src="images/Family.png" class="slide" width="500" height="300" id="picslide" />
<img src="images/Heel Click.jpg" class="slide" width="500" height="300" id="picslide" />
<img src="images/One Foot Balance Test.jpg" class="slide" width="500" height="300" id="picslide" />
</div>
<div class="buttons">
<!-- ******************************************************** -->
<label for="slide-1"></label>
<label for="slide-2"></label>
<label for="slide-3"></label>
<!-- ******************************************************** -->
</div>
</div>
<br />
<br />
<br />
Enter to Rename, Shift+Enter to Preview
css
css
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
#picslide {
width: 200px;
border: 100px;
float: left;
margin-right: 20px;
transition: transform 0.3s;
}
#profile {
width: 200px;
border-radius: 100px;
float: left;
margin-right: 20px;
transition: transform 0.3s;
}
#profile:hover {
transform: scale(1.1);
}
#twlogo {
width: 40px;
border-radius: 10opx;
float: left;
margin-right: 20px;
transition: transform 0.3s;
}
#twlogo:hover {
transform: scale(1.1);
}
#ytlogo {
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run