Part la- Floats (float-content.html) Implement a drop cap letter in float-content.html. Using placeholder text (https://loremipsum.io/) for the text content. Use em units for expressing all sizes/spacing in your style sheets. You will need to add HTML elements and style rules to complete this section. Style Requirements: • The line height for all elements should be tem • The font size for the drop cap letter should be 3em The font of the drop cap letter should be different than the font of adjacent text Remove all margins from the drop cap letter except for the right margin o You can experiment with the right margin until you find a value that you think looks good • Text should flow around the drop cap letter HTML Requirements: • 1x Paragraph element • 1x Span element When you are done you should have something that looks like the images below:
Part la- Floats (float-content.html) Implement a drop cap letter in float-content.html. Using placeholder text (https://loremipsum.io/) for the text content. Use em units for expressing all sizes/spacing in your style sheets. You will need to add HTML elements and style rules to complete this section. Style Requirements: • The line height for all elements should be tem • The font size for the drop cap letter should be 3em The font of the drop cap letter should be different than the font of adjacent text Remove all margins from the drop cap letter except for the right margin o You can experiment with the right margin until you find a value that you think looks good • Text should flow around the drop cap letter HTML Requirements: • 1x Paragraph element • 1x Span element When you are done you should have something that looks like the images below:
New Perspectives on HTML5, CSS3, and JavaScript
6th Edition
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Patrick M. Carey
Chapter3: Designing A Page Layout: Creating A Website For A Chocolatier
Section: Chapter Questions
Problem 14CP3
Related questions
Question
100%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Part 1a - Floats</title>
<style>
/* Write your style rule here */
</style>
</head>
<body>
<!-- Write your HTML here -->
</body>
</html>
Expert Solution
This question has been solved!
Explore an expertly crafted, step-by-step solution for a thorough understanding of key concepts.
Step by step
Solved in 2 steps with 2 images
Knowledge Booster
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.Recommended textbooks for you
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:
9781305503922
Author:
Patrick M. Carey
Publisher:
Cengage Learning
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:
9781305503922
Author:
Patrick M. Carey
Publisher:
Cengage Learning