Assignment 4: Expanded Draft
ASSIGNMENT 4: EXPANDED DRAFT ASSIGNMENT 4: EXPANDED DRAFT Due in Week 5 and worth 50
Assignment 4 Expanded Draft assignment 4 Expanded Draft due in Week 5 and worth 50. Based on the feedback from your earlier assignment, make any changes necessary. You will continue to work on your site, adding the following elements: Add any other pages to your site and adjust the navigational scheme. Use of CSS including: An element selector, a class selector, an ID selector, a pseudo-class selector (try this on your hyperlinks!). Use of float and clear around an image. Text-align. A form that includes a minimum of: Five text fields, one text area field, checkboxes, radio buttons, a select field (either a list or a drop-down menu), a submit button, optional use of an image button. The use of alert message on one page.
Paper For Above instruction
/ Element selector example /
p {
font-family: Arial, sans-serif;
line-height: 1.6;
}
/ Class selector example /
.highlight {
background-color: #f0f8ff;
padding: 10px;
}
/ ID selector example /
main-header {
color: #2e8b57;
font-size: 2em;
}
/ Pseudo-class selector for hyperlinks /
a:hover {
color: #ff4500;
text-decoration: underline;
}
/ Float and clear around image /
.image-container {
float: right;
margin: 10px;
width: 300px;
}
.image-container img {
width: 100%;
height: auto;
display: block;
}
/ Text align /
.centered {
text-align: center;
}
/ Form styling /
form {
margin-top: 20px;
}
label {
display: block;
margin-top: 10px;
}
Welcome to My Website
This is a sample paragraph demonstrating the use of CSS selectors, floats, and text alignment within a webpage. The image to the right is floated using CSS, and the text is aligned centrally or left as needed. The navigation links change color on hover, thanks to the pseudo-class selector.
Contact Us
// Alert message on form submission
function showAlert() {
alert("Thank you for reaching out! We will contact you soon.");
return true; // Allow form submission
}