Created
December 31, 2023 13:11
-
-
Save spookyuser/fca60a53ce341d93388b0266683de706 to your computer and use it in GitHub Desktop.
I asked chatgpt to make me a website with a 2010 aesthetic and showed it a picture of the stripe website in 2010
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>2010 Style Web Page</title> | |
<style> | |
body { | |
font-family: Arial, sans-serif; | |
background-color: #ebebeb; | |
color: #333; | |
margin: 0; | |
padding: 0; | |
} | |
.container { | |
width: 80%; | |
margin: auto; | |
overflow: hidden; | |
background: #fff; | |
border-radius: 5px; | |
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | |
padding: 20px; | |
} | |
header { | |
background: #5271ff; | |
background-image: linear-gradient(to bottom, #5271ff, #3957cc); | |
color: #fff; | |
padding: 20px 0; | |
text-align: center; | |
} | |
header h1 { | |
margin: 0; | |
} | |
.button { | |
display: inline-block; | |
padding: 10px 20px; | |
background: #ff9900; | |
background-image: linear-gradient(to bottom, #ff9900, #cc7a00); | |
color: #fff; | |
text-decoration: none; | |
border-radius: 5px; | |
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); | |
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); | |
} | |
.button:hover { | |
background-image: linear-gradient(to bottom, #ff9900, #e68a00); | |
} | |
.content { | |
padding: 20px; | |
background: #f4f4f4; | |
border: 1px solid #ddd; | |
border-radius: 5px; | |
margin-top: 20px; | |
} | |
</style> | |
</head> | |
<body> | |
<header> | |
<h1>My 2010 Style Website</h1> | |
</header> | |
<div class="container"> | |
<section class="content"> | |
<h2>Welcome to My Site!</h2> | |
<p>This is a simple template with a design aesthetic from the year 2010. It features gradients, rounded | |
corners, and shadows to give it a distinct look and feel of that era.</p> | |
<a href="#" class="button">Click Me!</a> | |
</section> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Honestly kind of like it
