In this activity, you will refine your ability to position elements on the page with precision by working with intermediate-level CSS tags. Resources to help you are included in the activity guidelines document. To complete this assignment, review the PDF MODULE 3 document. i need this as soon as possible

it270_module3_intermediate_css.pdf

IT 270 Module Three Practicing Intermediate CSS Concepts
In the first seven videos of the “Styling Your HTML” section of the “Front-End Web Development Quick
Start with HTML5, CSS and JavaScript” module on Pluralsight.com, you watched—and hopefully
followed along. These tutorials demonstrated how changes made to the index.html file and CSS file
affect the website content that is rendered in the browser window.
In this exercise, you will begin with the index.html file in the Mod3-Act1 folder and add several
additional pieces of content and styles, based on your watching and understanding of the first seven
videos of the “Styling Your
HTML” section and the
“Front-End Web
Development Quick Start
with HTML5, CSS and
JavaScript” section.
Step 1. Download the IT270 Supplement
Exercise Files zip file if
you have not already done
so.
Step 2. Navigate to the
Mod3-Act1 folder in the exercise files.
Step 3. Drag the index.html file to a blank web browser tab or window—your starting page should look
like the figure below and to the right.
Step 4. Return to editing the index.html
file in Sublime Text by either using the
File menu > Open File command in the
program or by dragging the file from the
folder window into the blank Sublime
Text window.
Step 5. Complete the following edits and
additions in the index.html file: A. Place opening and closing <div> tags around the entire <img> reference, just after the
<h1> headline. Add the class attribute of “fixed” to the opening <div> tag.
B. Directly below the first <img> reference, add another:
<img src=”img/penmen.png” alt=”Penmen logo”>
C. Place opening and closing <div> tags around the <img> reference you just created, and
add the class attribute of “floated-image” to the opening <div> tag.
D. At the start of the last full paragraph (starting with the words “Sed virtutem”), add the
following code:
<div class="inline-box"><b>Go Penmen!</b></div>
Step 6. Switching over to your style.css file, create a new class selector called .fixed with the following
attributes (which will utilize the CSS positioning attribute to “fix” the SNHU.edu logo at the lower right
corner of the screen):
position: fixed;
bottom 0;
right: 0;
Step 7. Create another new class selector called .floated-image with the following attributes (which
utilizes the CSS float attribute to place the Penmen logo in a similar fashion to the SNHU logo when you
first started):
float: left
Step 8. Create another new class selector called .inline-box with the following attributes (which will
utilize the CSS display attribute to place an inline blocked tagline):
display: inline-block;
border: 3px solid red;
width: 100px;
height: 15px
Step 9. Proof your finished
work in a blank browser tab
or window before submitting
your assignment. Your
finished work should look like
the figure at right. Step 10. When you have completed the assignment according to the requirements outlined above, save your work and zip up the complete “Mod3” subfolder in which you have been working this exercise, and
submit it using the assignment link in Blackboard.