# Title Page

doc.add_heading("5-2 Final Project Milestone Three: Site Aesthetics", level=1)

doc.add_paragraph("\n")

doc.add_paragraph("Course: IT 270")

doc.add_paragraph("Student Name: [Your Name]")

doc.add_paragraph("Date: [Insert Date]")

doc.add_page_break()

# Introduction Section

doc.add_heading("Introduction", level=1)

doc.add_paragraph(

"This document compiles the work completed from Modules 1 through 5 for the IT 270 course. "

"It includes the necessary codes, multimedia elements, and explanations for design choices. "

"Additionally, it incorporates aesthetics and functionality considerations for the 'Kit and Tools' website."

)

# Multimedia Elements

doc.add_heading("Integrated Multimedia Elements", level=1)

doc.add_paragraph("Below are the multimedia elements integrated into the project:")

# Section for Images

doc.add_heading("Images", level=2)

doc.add_paragraph("1. Initial Image Provided:")

doc.add_paragraph("Description: This image demonstrates basic image integration.")

doc.add_paragraph("CSS Code:")

doc.add_paragraph(

"""

img {

width: 300px;

height: auto;

border: 2px solid black;

filter: drop-shadow(5px 5px 5px gray);

}

""",

,

)

doc.add_paragraph("2. Kit and Tools Website Image:")

doc.add_paragraph("Description: An image specifically designed for the Kit and Tools website.")

# Section for Audio

doc.add_heading("Audio", level=2)

doc.add_paragraph("Audio files of formats .wav and .mp3 were integrated into the webpage.")

doc.add_paragraph("HTML Code for Audio Integration:")

doc.add_paragraph(

"""

<audio controls>

<source src="audio-file.mp3" type="audio/mpeg">

<source src="audio-file.wav" type="audio/wav">

Your browser does not support the audio element.

</audio>

""",

,

)

# Section for Videos

doc.add_heading("Videos", level=2)

doc.add_paragraph("YouTube and Vimeo videos were integrated using the following HTML code:")

doc.add_paragraph(

"""

<iframe width="560" height="315"

src="https://www.youtube.com/embed/example"

title="YouTube video player" frameborder="0"

allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>

</iframe>

""",

,

)

# Section for Rotations

doc.add_heading("Rotations", level=2)

doc.add_paragraph("Images and headlines were rotated using CSS3 transformations.")

doc.add_paragraph("CSS Code:")

doc.add_paragraph(

"""

h1 {

transform: rotate(-15deg);

}

img {

transform: rotate(30deg);

}

""",

,

)

# Section for Backgrounds

doc.add_heading("Background Image", level=2)

doc.add_paragraph("The webpage background image was styled using CSS3.")

doc.add_paragraph("CSS Code:")

doc.add_paragraph(

"""

body {

background-image: url('background.jpg');

background-size: cover;

background-position: center;

color: #ffffff;

}

""",

,

)

# Conclusion

doc.add_heading("Conclusion", level=1)

doc.add_paragraph(

"The multimedia elements, including images, audio, video, and CSS transformations, "

"were incorporated to enhance user engagement. The design choices reflect considerations "

"for aesthetics, usability, and functionality."

)

# APA References Section

doc.add_page_break()

doc.add_heading("References", level=1)

doc.add_paragraph(

"Southern New Hampshire University. (2024). IT 270 Module Five: Multimedia and Web Activity Guidelines."

)

doc.add_paragraph(

"Lynch, P. J., & Horton, S. (2016). Web Style Guide: Basic Design Principles for Creating Websites (4th ed.). Yale University Press."

)

doc.add_paragraph(

"W3Schools. (2024). HTML Multimedia. Retrieved from https://www.w3schools.com/html/html_media.asp"

)

doc.add_paragraph(

"MDN Web Docs. (2024). Using CSS for Visual Effects. Retrieved from https://developer.mozilla.org"

)

# Save the Word document

output_path = Path("/mnt/data/IT270_Final_Project.docx")

doc.save(output_path)

# Create a zip folder with the document and additional files

zip_path = Path("/mnt/data/IT270_Final_Project.zip")

with ZipFile(zip_path, 'w') as zipf:

zipf.write(output_path, arcname="IT270_Final_Project.docx")

Outlook