Sure! Below is an example of how you can structure your HTML and CSS based on the requirements you've provided. You will need to replace the placeholder text and image source with your actual information.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Name's Page</title>
<style>
/* CSS styling */
html {
background-color: white;
}
body {
background-color: lightblue;
width: 600px;
border: 2px dotted grey;
margin: 0 auto; /* Center the body */
text-align: center; /* Center all text */
font-family: Tahoma, sans-serif;
}
.hometown {
color: red;
font-size: 40px;
}
img {
width: 200px; /* Adjust size as needed */
height: auto; /* Maintain aspect ratio */
}
</style>
</head>
<body>
<h1>Your Name</h1>
<div class="hometown">Your Hometown, State</div>
<p>Your High School Name</p>
<img src="your-image.jpg" alt="A smiley photo of yourself">
<p>
Hello! My name is [Your Name]. I'm from [Your Hometown, State]. I'm excited to share a bit about myself here. I enjoy [briefly mention your hobbies or interests]. Looking forward to connecting with everyone!
</p>
</body>
</html>
Notes:
- Replace
"Your Name"
with your actual name. - Replace
"Your Hometown, State"
with your actual hometown and state (e.g., "Statesboro, GA"). - Replace
"Your High School Name"
with the name of your high school. - Replace the image source in the
<img>
tag with the path to your personal photo (e.g.,"your-image.jpg"
). Ensure that the image file is in the same directory as yourindex.html
file. - Update your introduction text as needed.
Make sure to keep the image file with the same name and in the same directory as your HTML file when submitting.