Modern HTML Website Example: Infrastructure as Code

Answered using GPT-4o Mini by GPT4oMini.app

Question:

write me a modern HTML website with 2 pages and an image based on infrastucture as code

Answer:

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.

Directory Structure

/infrastructure-as-code-website
│
├── index.html
├── about.html
└── images
    └── infrastructure-as-code.jpg

1. 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>&copy; 2023 Infrastructure as Code. All rights reserved.</p>
    </footer>
</body>
</html>

2. 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>&copy; 2023 Infrastructure as Code. All rights reserved.</p>
    </footer>
</body>
</html>

3. 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;
}

4. Image

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.

How to Run

  1. Create a directory named infrastructure-as-code-website.
  2. Inside that directory, create the files index.html, about.html, and styles.css with the provided content.
  3. Create a folder named images and place your image inside it.
  4. Open 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!