write me a modern HTML website with 2 pages and an image based on infrastucture as code
Sure! Below is a simple example of a modern HTML website with two pages that focuses on the concept of "Infrastructure as Code" (IaC). The website includes a home page and an about page, along with an image related to infrastructure as code.
/infrastructure-as-code-website
│
├── index.html
├── about.html
└── images
└── infrastructure-as-code.jpg
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>Infrastructure as Code</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to Infrastructure as Code</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>What is Infrastructure as Code?</h2>
<p>Infrastructure as Code (IaC) is a key DevOps practice that allows you to manage and provision computing infrastructure through machine-readable definition files, rather than physical hardware configuration or interactive configuration tools.</p>
<img src="images/infrastructure-as-code.jpg" alt="Infrastructure as Code" />
</section>
</main>
<footer>
<p>© 2023 Infrastructure as Code. All rights reserved.</p>
</footer>
</body>
</html>
about.html
(About Page)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Infrastructure as Code</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>About Infrastructure as Code</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Benefits of Infrastructure as Code</h2>
<ul>
<li>Consistency: Ensures that the infrastructure is consistent across environments.</li>
<li>Speed: Automates the provisioning process, allowing for faster deployments.</li>
<li>Version Control: Infrastructure configurations can be versioned and tracked.</li>
<li>Collaboration: Teams can collaborate more effectively using code.</li>
</ul>
</section>
</main>
<footer>
<p>© 2023 Infrastructure as Code. All rights reserved.</p>
</footer>
</body>
</html>
styles.css
(CSS Styles)body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background: #35424a;
color: #ffffff;
padding: 10px 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: #ffffff;
text-decoration: none;
}
main {
padding: 20px;
}
h2 {
color: #35424a;
}
footer {
text-align: center;
padding: 10px 0;
background: #35424a;
color: #ffffff;
position: relative;
bottom: 0;
width: 100%;
}
img {
max-width: 100%;
height: auto;
display: block;
margin: 20px auto;
}
You will need to add an image named infrastructure-as-code.jpg
in the images
directory. You can use any relevant image that represents Infrastructure as Code.
infrastructure-as-code-website
.index.html
, about.html
, and styles.css
with the provided content.images
and place your image inside it.index.html
in a web browser to view the website.This is a basic example, and you can expand upon it by adding more content, styles, or even JavaScript functionality as needed!