I would like a modern website. With three pages; Home, CV and contact me. Each page should have a navigation bar in the header. On the Home page there should also be an image on the left and on the right to that should be the title called In the Matrix. There should be three text elements below the title. On the CV page in the main Body under the title called My CV there should be an image on the left and to the right of the image a text area. Under that there should be three more text areas. On the contact me page there should be a form with name box, email box and a text box. Bellow the form there should be my name, my email address and my contact number.
Sure! Below is a simple HTML structure for a modern website with three pages: Home, CV, and Contact Me. Each page includes a navigation bar, and the layout follows your specifications. You can further enhance the design with CSS for styling and JavaScript for interactivity.
index.html (Home Page)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - In the Matrix</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="cv.html">CV</a></li>
<li><a href="contact.html">Contact Me</a></li>
</ul>
</nav>
</header>
<main>
<div class="home-content">
<img src="path/to/your/image.jpg" alt="Matrix Image" class="left-image">
<div class="title">
<h1>In the Matrix</h1>
<p>Text element 1</p>
<p>Text element 2</p>
<p>Text element 3</p>
</div>
</div>
</main>
</body>
</html>
cv.html (CV Page)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My CV</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="cv.html">CV</a></li>
<li><a href="contact.html">Contact Me</a></li>
</ul>
</nav>
</header>
<main>
<h1>My CV</h1>
<div class="cv-content">
<img src="path/to/your/cv-image.jpg" alt="CV Image" class="left-image">
<div class="cv-text">
<p>Text area 1</p>
</div>
</div>
<div class="additional-text">
<p>Text area 2</p>
<p>Text area 3</p>
<p>Text area 4</p>
</div>
</main>
</body>
</html>
contact.html (Contact Me Page)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Me</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="cv.html">CV</a></li>
<li><a href="contact.html">Contact Me</a></li>
</ul>
</nav>
</header>
<main>
<h1>Contact Me</h1>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Send</button>
</form>
<div class="contact-info">
<p>Your Name</p>
<p>Your Email: [email protected]</p>
<p>Your Contact Number: (123) 456-7890</p>
</div>
</main>
</body>
</html>
You can create a styles.css file to style your website. Here’s a basic example:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
padding: 10px 0;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: white;
text-decoration: none;
}
.home-content, .cv-content {
display: flex;
align-items: center;
margin: 20px;
}
.left-image {
width: 200px; /* Adjust as needed */
margin-right: 20px;
}
.title, .cv-text {
flex: 1;
}
.additional-text, .contact-info {
margin: 20px;
}
form {
display: flex;
flex-direction: column;
margin: 20px;
}
form label {
margin: 5px 0;
}
form input, form textarea {
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
}
form button {
padding: 10px;
background-color: #333;
color: white;
border: none;
cursor: pointer;
}
form button:hover {
background-color: #555;
}
path/to/your/image.jpg and path/to/your/cv-image.jpg with the actual paths to your images.