Part 1b - Floats                         Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?         Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

New Perspectives on HTML5, CSS3, and JavaScript
6th Edition
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Patrick M. Carey
Chapter8: Enhancing A Website With Multimedia: Working With Sound, Video, And Animation
Section: Chapter Questions
Problem 15RA
icon
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 1b - Floats</title>
    <style>

        /* Finish this rule */
        img:nth-of-type(1) {

        }

        /* Finish this rule */
        img:nth-of-type(2) {

        }

        /* don't modify this rule */
        p {
            font-size: 1.25em;
            text-align: center;
        }

    </style>
</head>
<body>
    <img src="https://via.placeholder.com/150">
    <img src="https://via.placeholder.com/150">
    <p>
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
    </p>
</body>
</html>

Part 1b- Floats (float-image.html)
You will complete style rules in float-image.html for this section. You do not need to change the
HTML in any way! You do not need to add any other style rules!
This section is considered complete when the webpage for float-image.html looks like the
images below:
Full Screen Size
Reduced Screen Size
Sed ut penpiciatis unde omnis iste atus emor sit voluptatem
doloremque laudatium, am remaperi
ab illo inventore veritatis et
chitecto beatae vitae dicta u
explicabe. Nemo enim ipam voluptatem quia
sit apernatur t oditt fugit, ed quia consequuntr
magni dolores eos qui ratione voluptatem segui nesciu. Neque poero
quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
sed quia on umquam cius modi empora incidunt ut lubore et dolore magnam
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis sscipit laboriosam, isi utaliquid en ca commodi
conequatur? Quis tem vel cum iure reprchenderit qui in ca voluptate velit esse
q nihil molestie consequatr, vel illum qui dokorem cum fugiat quo voluptas
lla pariatur Sed ut penpiciatis unde omnis iste atus emr st voluptatem
o b ndi mbea ade munpe anbup umn
inventore veritatis et quasi achitecto beatae vitae dicta sunt explicabo. Neme
enim ipam voluptatem quia voluptas sit aspermatur t odit t fugit, sed quia
consequntur magni dlores o qui atione volptatem segui nesciunt. Negue
pomo quinquan est, qui delorem ipum quia de sit amet, comsetetur, adinici
voup
exercitationem ullam corperis scipit laboriosam, nisi ut aliquid e ca commod
consequatur Quis autem vel cum ure reprehenderit qui in ca voluptate velit esse
quam nihil molestine comsequatur, vel illum qui delorem eum fugiat quo voluptas
ulla pariaturt
To accomplish this you need to use the following CSS properties:
float
• clip-path
• shape-outside
Hint:
• explore the polygon() function
Transcribed Image Text:Part 1b- Floats (float-image.html) You will complete style rules in float-image.html for this section. You do not need to change the HTML in any way! You do not need to add any other style rules! This section is considered complete when the webpage for float-image.html looks like the images below: Full Screen Size Reduced Screen Size Sed ut penpiciatis unde omnis iste atus emor sit voluptatem doloremque laudatium, am remaperi ab illo inventore veritatis et chitecto beatae vitae dicta u explicabe. Nemo enim ipam voluptatem quia sit apernatur t oditt fugit, ed quia consequuntr magni dolores eos qui ratione voluptatem segui nesciu. Neque poero quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. sed quia on umquam cius modi empora incidunt ut lubore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis sscipit laboriosam, isi utaliquid en ca commodi conequatur? Quis tem vel cum iure reprchenderit qui in ca voluptate velit esse q nihil molestie consequatr, vel illum qui dokorem cum fugiat quo voluptas lla pariatur Sed ut penpiciatis unde omnis iste atus emr st voluptatem o b ndi mbea ade munpe anbup umn inventore veritatis et quasi achitecto beatae vitae dicta sunt explicabo. Neme enim ipam voluptatem quia voluptas sit aspermatur t odit t fugit, sed quia consequntur magni dlores o qui atione volptatem segui nesciunt. Negue pomo quinquan est, qui delorem ipum quia de sit amet, comsetetur, adinici voup exercitationem ullam corperis scipit laboriosam, nisi ut aliquid e ca commod consequatur Quis autem vel cum ure reprehenderit qui in ca voluptate velit esse quam nihil molestine comsequatur, vel illum qui delorem eum fugiat quo voluptas ulla pariaturt To accomplish this you need to use the following CSS properties: float • clip-path • shape-outside Hint: • explore the polygon() function
Expert Solution
steps

Step by step

Solved in 4 steps with 3 images

Blurred answer
Knowledge Booster
Computational Systems
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.
Similar questions
Recommended textbooks for you
New Perspectives on HTML5, CSS3, and JavaScript
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:
9781305503922
Author:
Patrick M. Carey
Publisher:
Cengage Learning