Drezil/infrastructure_homepage.html

## infrastructure_homepage.html
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css">

    <title>Infrastructure Services</title>
  </head>
  <body class="bg-yellow-200 text-green-700 font-sans">
    <header class="bg-red-700 text-white py-4">
      <div class="container mx-auto">
        <h1 class="text-2xl font-bold text-center">Infrastructure Services</h1>
      </div>
    </header>
    <main class="container mx-auto mt-4">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/3 px-4 mb-8">
          <div class="bg-white rounded-lg shadow-lg p-4">
            <h2 class="text-xl font-bold text-center mb-2">Nextcloud</h2>
            <p class="mb-4">Nextcloud is a self-hosted file sharing and collaboration platform. It allows you to store, share and access your files from anywhere.</p>
            <div class="text-center">
              <a href="#" class="btn btn-primary">Learn More</a>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/3 px-4 mb-8">
          <div class="bg-white rounded-lg shadow-lg p-4">
            <h2 class="text-xl font-bold text-center mb-2">Gitea</h2>
            <p class="mb-4">Gitea is a self-hosted Git repository manager that allows you to create and manage your Git repositories. It is easy to use and has a simple, intuitive interface.</p>
            <div class="text-center">
              <a href="#" class="btn btn-primary">Learn More</a>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/3 px-4 mb-8">
          <div class="bg-white rounded-lg shadow-lg p-4">
            <h2 class="text-xl font-bold text-center mb-2">Jitsi Meet</h2>
            <p class="mb-4">Jitsi Meet is a self-hosted video conferencing platform that allows you to hold online meetings and video conferences. It is secure, easy to use and has a clean, modern interface.</p>
            <div class="text-center">
              <a href="#" class="btn btn-primary">Learn More</a>
            </div>
          </div>
        </div>
      </div>
    </main>
    <footer class="bg-red-700 text-white py-4 mt-4">
      <div class="container mx-auto">
        <p class="text-center text-sm">Copyright &copy; 2021 Infrastructure Services. All rights reserved.</p>
      </div>
    </footer>
  </body>
</html>

## prompt.md

      
    Raw
  

              prompt.md
            
          
    Prompt

Design a landing page for a services homepage of a small family that hosts their own infrastructure. The services hosted are Nextcloud, Gitea and Jitsi meet. Make a static HTML-page, use Tailwindcss for styling. The Site should have a responsive layout.
Dominant colors should be an oak-leaf-green and majestic red for contrast. Accents should be in gold and possibly animated. The background should have a parchment feel to it.
ChatGPT

Here is a sample landing page for the small family hosting their own infrastructure services:

see infrastructure_homepage.html

To add responsive layout, you can use the responsive utilities provided by Tailwindcss. For example, to make an element only visible on medium screens and above, you can use the md:block utility class:
<div class="md:block">This element will be only visible on medium screens and above</div>
You can also use the w-full and mx-auto classes to make the content container take up the full width of the viewport and center it horizontally.
I hope this helps! Let me know if you have any questions.
	<!doctype html>
	<html lang="en">
	<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css">

	<title>Infrastructure Services</title>
	</head>
	<body class="bg-yellow-200 text-green-700 font-sans">
	<header class="bg-red-700 text-white py-4">
	<div class="container mx-auto">
	<h1 class="text-2xl font-bold text-center">Infrastructure Services</h1>
	</div>
	</header>
	<main class="container mx-auto mt-4">
	<div class="flex flex-wrap -mx-4">
	<div class="w-full md:w-1/3 px-4 mb-8">
	<div class="bg-white rounded-lg shadow-lg p-4">
	<h2 class="text-xl font-bold text-center mb-2">Nextcloud</h2>
	<p class="mb-4">Nextcloud is a self-hosted file sharing and collaboration platform. It allows you to store, share and access your files from anywhere.</p>
	<div class="text-center">
	<a href="#" class="btn btn-primary">Learn More</a>
	</div>
	</div>
	</div>
	<div class="w-full md:w-1/3 px-4 mb-8">
	<div class="bg-white rounded-lg shadow-lg p-4">
	<h2 class="text-xl font-bold text-center mb-2">Gitea</h2>
	<p class="mb-4">Gitea is a self-hosted Git repository manager that allows you to create and manage your Git repositories. It is easy to use and has a simple, intuitive interface.</p>
	<div class="text-center">
	<a href="#" class="btn btn-primary">Learn More</a>
	</div>
	</div>
	</div>
	<div class="w-full md:w-1/3 px-4 mb-8">
	<div class="bg-white rounded-lg shadow-lg p-4">
	<h2 class="text-xl font-bold text-center mb-2">Jitsi Meet</h2>
	<p class="mb-4">Jitsi Meet is a self-hosted video conferencing platform that allows you to hold online meetings and video conferences. It is secure, easy to use and has a clean, modern interface.</p>
	<div class="text-center">
	<a href="#" class="btn btn-primary">Learn More</a>
	</div>
	</div>
	</div>
	</div>
	</main>
	<footer class="bg-red-700 text-white py-4 mt-4">
	<div class="container mx-auto">
	<p class="text-center text-sm">Copyright © 2021 Infrastructure Services. All rights reserved.</p>
	</div>
	</footer>
	</body>
	</html>