Copy the code below, and add embedded (internal) styles so that it looks like the image below. You will need the following colours: #E5F4E1 and #017B1B. Use any image you like for dogs.jpg. (you do not need to submit your image, you only need to submit your code). Document Amazing facts about dogs Did you know that dogs can only see two colours and can smell cancer and diabetes? And they can learn over 100 words and gestures! More fun facts
Copy the code below, and add embedded (internal) styles so that it looks like the image below. You will need the following colours: #E5F4E1 and #017B1B. Use any image you like for dogs.jpg. (you do not need to submit your image, you only need to submit your code).
Algorithm: Styling a Webpage with Embedded (Internal) Styles
1. Start with an HTML document.
2. Within the `<head>` section of the HTML document:
a. Define the character set with <meta charset="UTF-8">.
b. Set the title of the document with <title>.
c. Include a `<style>` block to add embedded (internal) CSS.
3. Inside the `<style>` block, define the following styles:
a. Set the background color of the body to #E5F4E1.
b. Center the content in the middle of the page using flexbox.
c. Style the article with a white background, padding, and a box shadow.
d. Add text-align: center to center the content inside the article.
e. Style the header with a green background (#017B1B) and white text.
f. Style the heading with no margin to remove default spacing.
g. Set the image width to 100% and limit its height to 250px.
h. Add margin to the paragraphs for spacing.
i. Style the link with a green background and white text.
j. On hover, change the link's background color to a darker green (#015415).
4. In the `<body>` section, create an `<article>` element.
5. Inside the `<article>` element:
a. Create a `<div>` with a class of "header" for the header.
b. Add an `<h2>` with the title text.
c. Include an `<img>` element with the source set to "dogs.jpg" and alt text.
d. Add two `<p>` elements for information about dogs.
e. Create an `<a>` element with an href to "dogs.html" for additional facts.
6. Close the HTML document.
Ensure that "dogs.jpg" is a valid image file in the same directory as the HTML file. The HTML file, image, and CSS styles should work together to create the desired web page layout with the specified colors and styles.
Step by step
Solved in 4 steps with 3 images
