Skip to content

Instantly share code, notes, and snippets.

@AJFaraday

AJFaraday/Index.html

Created December 28, 2022 13:46
Show Gist options
  • Save AJFaraday/d22ebda385e45db4143833c53b8cdadb to your computer and use it in GitHub Desktop.
Save AJFaraday/d22ebda385e45db4143833c53b8cdadb to your computer and use it in GitHub Desktop.
Download ZIP
Burger! By chatgpt
Raw
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Delicious Cheeseburgers</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- Header -->
<header>
<h1>Delicious Cheeseburgers</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Locations</a></li>
</ul>
</nav>
</header>
<!-- Main Content -->
<main>
<!-- Cheeseburger Card -->
<div class="cheeseburger-card">
<img src="https://www.example.com/images/cheeseburger-1.jpg" alt="Cheeseburger with lettuce, tomato, and cheese">
<h2>Classic Cheeseburger</h2>
<p>Lettuce, tomato, and cheese served on a toasty bun.</p>
<button>Order Now</button>
</div>
<!-- Cheeseburger Card -->
<div class="cheeseburger-card">
<img src="https://www.example.com/images/cheeseburger-2.jpg" alt="Cheeseburger with bacon and avocado">
<h2>Bacon Avocado Cheeseburger</h2>
<p>Bacon and avocado add a tasty twist to this classic burger.</p>
<button>Order Now</button>
</div>
<!-- Cheeseburger Card -->
<div class="cheeseburger-card">
<img src="https://www.example.com/images/cheeseburger-3.jpg" alt="Cheeseburger with grilled onions and mushrooms">
<h2>Mushroom Swiss Cheeseburger</h2>
<p>Grilled onions and mushrooms top this delicious burger.</p>
<button>Order Now</button>
</div>
</main>
<!-- Footer -->
<footer>
<p>Copyright Delicious Cheeseburgers 2022</p>
</footer>
</body>
</html>
Raw
Style.css
/* Add a background image to the body */
body {
background-image: url('https://www.example.com/images/cheeseburger-bg.jpg');
background-size: cover;
background-position: center;
color: white;
}
/* Style the header and main navigation */
header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: rgba(0, 0, 0, 0.8);
height: 60px;
}
header h1 {
font-size: 24px;
margin: 0;
padding: 0 20px;
}
nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
nav li {
font-size: 14px;
margin: 0 10px;
padding: 20px;
}
nav a {
color: white;
text-decoration: none;
}
/* Style the main content */
main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px;
}
/* Style the cheeseburger card */
.cheeseburger-card {
width: 300px;
height: 400px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
overflow: hidden;
margin-bottom: 20px;
}
.cheeseburger-card img {
width: 100%;
height: 60%;
object-fit: cover;
}
.cheeseburger-card h2 {
font-size: 18px;
margin: 10px;
padding: 0;
}
.cheeseburger-card p {
font-size: 14px;
margin: 10px;
padding: 0;
}
.cheeseburger-card button {
background-color: #f47a20;
border: none;
border-radius: 5px;
color: white;
cursor: pointer;
font-size: 16px;
padding: 10px 20px;
}
/* Style the footer */
footer {
background-color: rgba(0, 0, 0, 0.8);
color: white;
font-size: 12px;
padding: 20px;
text-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment