Angry CSS
I asked ChatGPT to write me angry CSS! What you see is my version of what ChatGPT offered below the code photo. The interesting part of the code that AI generated is the funny comments. I styled the comments in red to make them stand out. ChatGPT should go on tour!
"write me angry css" ChatGPT,
GPT-3.5, OpenAI, 3 Apr. 2024, ai-url.com/chat.
/* I'm so angry! */
body {
background-color: #FF0000; /* Red, because I'm seeing red! */
color: #FFFFFF; /* White, to show I mean business! */
font-family: "Comic Sans MS", cursive; /* Because nothing says rage like Comic Sans! */
}
h1 {
font-size: 36px; /* BIG AND BOLD! */
text-transform: uppercase; /* YELLING IN ALL CAPS! */
border-bottom: 2px solid #FFFFFF; /* Because anger needs boundaries! */
}
a {
color: #FFFFFF; /* White, just like my seething fury! */
text-decoration: none; /* No links allowed, too angry to navigate! */
}
a:hover {
text-decoration: underline; /* Hovering over links? Not on my watch! */
}
button {
background-color: #FF0000; /* Red, like the blood boiling in my veins! */
color: #FFFFFF; /* White, because I'm seeing white-hot anger! */
border: 2px solid #FFFFFF; /* Border to contain the rage! */
padding: 10px 20px; /* Big, bold, and in your face! */
font-size: 18px; /* Large and in charge! */
cursor: pointer; /* Click if you dare! */
}
button:hover {
background-color: #FFFFFF; /* White, like the steam coming out of my ears! */
color: #FF0000; /* Red, to remind you of my fury! */
}
.container {
max-width: 1200px; /* I contain my anger, but just barely! */
margin: 0 auto; /* Centered, like the focus of my rage! */
padding: 20px; /* Because my anger needs space to breathe! */
}
.alert {
background-color: #FF0000; /* Red, because I'm alerting you to my fury! */
color: #FFFFFF; /* White, to show I mean business! */
padding: 15px; /* My anger needs padding for protection! */
margin-bottom: 20px; /* Spacing to keep my anger from overflowing! */
border-radius: 5px; /* Softening the edges of my rage! */
}
.alert-danger {
background-color: #FF6347; * Tomato, because danger lurks in my anger! */
}
.alert-warning {
background-color: #FFD700; /* Gold, because my anger is a warning sign! */
}
.alert-success {
background-color: #32CD32; /* Lime green, because even in anger, there's room for success! */
}
.alert-info {
background-color: #87CEEB; /* Sky blue, because even in fury, there's room for information! */
}
Who says computers don't have a sense of humor?
Ponder
For the angry section above, I created a class named angry in the style.css file. In that section of CSS I nested styling for the h1, h2, and h3 tags! Although the CSS was rendered correctly, W3C validation reported that nested code as a parse error. So ultimately I had to go back and change the CSS to avoid failing on validation.