HWproj4

[esabbs]

1. Explain how you used ChatGPT or other AI tool(s) to help for this HW’s update to your project, or note if it wasn’t used.

Answer: I will continue you to use chatgpt with my coding portion with the project. This time around I will be adding the CSS code to the site to make it more attracting to the eye and organized right now.

2. Continue to develop the project, as we build it step by step over the semester so that it will be manageable rather than a crunch at the end, as follows.

Answer:

Here is the CSS code:
-I would also like to note I incorporated subpages for each section of the final project

/* General Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}

body {
background-color: #f4f4f4;
color: #333;
line-height: 1.6;
}

/* Header */
header {
background: #333;
color: white;
text-align: center;
padding: 20px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

header h1 {
font-size: 2rem;
}

header h2, header h3 {
font-size: 1.2rem;
font-weight: 300;
}

/* Navigation */
nav {
background: #444;
text-align: center;
padding: 10px 0;
position: sticky;
top: 0;
width: 100%;
z-index: 1000;
}

nav ul {
list-style: none;
display: flex;
justify-content: center;
}

nav ul li {
margin: 0 15px;
}

nav ul li a {
text-decoration: none;
color: white;
font-size: 1rem;
padding: 8px 15px;
transition: 0.3s;
}

nav ul li a:hover {
background: #555;
border-radius: 5px;
}

/* Main Content */
main {
max-width: 800px;
margin: 20px auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

section {
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #ddd;
}

h2 {
color: #222;
margin-bottom: 10px;
}

/* Footer */
footer {
text-align: center;
background: #333;
color: white;
padding: 10px;
margin-top: 20px;
}