Create a web page that shows images for your activity 1 recipe. The following re
ID: 3866549 • Letter: C
Question
Create a web page that shows images for your activity 1 recipe.
The following requirements must be met:
Besides the standard HTML tags, you must use all of the following:
1) 1 image to the left of a paragraph of text
2) 1 image to the right of a paragraph of text
3) 1 image centered in a row by itself
4) 1 absolutely positioned image
5) 1 image that overlaps another image
6) 1 image with a thick rectangular border
7) 1 image with a rounded border
8) 1 rotated image (via transform styles)
9) 1 semi-transparent image
10) 3 of the same image in the same row with extra style margin between them. Each of these must be a different size via different width attributes.
11) 3 of the same image in the same row with extra style margin between them. Each of these must be a different size via different image files.
12) At least 1 image with mouse hover pop-up text (title attribute)
13) At least 1 image with alternative screen reader text (alt attribute)
All images must be correctly proportional, with no distortion.
You may use "filler text" to fill out paragraphs as shown in the assignment example. However, you must also have some specific, non-filler text.
Explanation / Answer
<!DOCTYPE html>
<html>
<head>
<title>Homework</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="block">
<div class="float-left">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="float-right">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</div>
<div class="block">
<div class="float-left">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
<div class="float-right">
<img src="http://via.placeholder.com/350x150">
</div>
</div>
<div class="block text-center">
<img class="img-center" src="http://via.placeholder.com/350x150">
</div>
<div class="block">
<img class="img-abs" src="http://via.placeholder.com/350x150">
</div>
<script type="text/javascript">
window.setTimeout(function () {
window.location.reload();
}, 5 * 1000);
</script>
</body>
</html>
.float-right {
display: inline;
position: relative;
float: right;
width: 50%;
}
.float-left {
display: inline;
position: relative;
float: left;
width: 50%;
}
div.block {
display: block;
overflow: auto;
}
div.text-center {
text-align: center;
}
img.img-center {
margin: 0 auto;
}
img.img-abs {
position: absolute;
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.