# Enhanced HTML and CSS structure with more dramatic retro features.
enhanced_html = """
Enhanced Retro Cartoon Network Style
Adventure Time: New Episode Tonight!
"""
enhanced_css = """
/* Global Styles */
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(90deg, #0099CC, #006699);
color: white;
}
/* Header */
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: linear-gradient(90deg, #FF6600, #FFCC00);
border-bottom: 5px solid #000;
}
.header .logo h1 {
font-family: 'Impact', sans-serif;
font-size: 30px;
color: white;
text-shadow: 3px 3px 0 #000;
}
.navbar ul {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
.navbar ul li {
margin: 0 10px;
}
.navbar ul li a {
text-decoration: none;
font-weight: bold;
color: white;
background: #003366;
padding: 5px 10px;
border: 3px solid #FFCC00;
text-transform: uppercase;
display: inline-block;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.navbar ul li a:hover {
transform: scale(1.1);
box-shadow: 0px 5px 10px #FFCC00;
}
/* Banner Section */
.banner {
text-align: center;
background: linear-gradient(90deg, #FFCC00, #FF6600);
padding: 30px;
margin: 20px 0;
border: 5px dashed #000;
}
.banner h2 {
font-family: 'Impact', sans-serif;
font-size: 26px;
color: #003366;
margin-bottom: 15px;
}
.banner button {
background: #003366;
color: #FFCC00;
padding: 15px 25px;
border: 3px solid #FFCC00;
font-size: 18px;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.banner button:hover {
transform: translateY(-5px);
box-shadow: 0px 5px 15px #FF6600;
}
/* Content Section */
.content {
display: flex;
padding: 20px;
}
/* Sidebar */
.sidebar {
width: 30%;
background: #003366;
padding: 15px;
border-right: 5px dashed #FFCC00;
}
.sidebar h3 {
font-family: 'Impact', sans-serif;
font-size: 20px;
color: #FFCC00;
margin-bottom: 15px;
}
.sidebar ul {
list-style: none;
padding: 0;
}
.sidebar ul li {
font-size: 16px;
margin: 10px 0;
color: white;
}
.sidebar ul li span {
font-weight: bold;
color: #FFCC00;
}
.poll-btn {
background: #FF6600;
color: #003366;
border: 3px solid #FFCC00;
padding: 10px;
width: 100%;
font-size: 16px;
cursor: pointer;
margin-top: 20px;
}
/* Main Grid */
.main-grid {
width: 70%;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
padding: 15px;
}
.grid-item {
background: #FF6600;
padding: 20px;
text-align: center;
border: 5px solid #003366;
font-size: 18px;
color: white;
font-family: 'Arial Black', sans-serif;
transition: transform 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
}
.grid-item:hover {
transform: scale(1.05);
box-shadow: 0px 5px 10px #003366;
}
/* Footer */
.footer {
text-align: center;
padding: 15px;
background: linear-gradient(90deg, #003366, #006699);
border-top: 5px solid #FFCC00;
}
"""
# Save the enhanced versions for the user.
with open("/mnt/data/enhanced_retro_site.html", "w") as enhanced_html_file:
enhanced_html_file.write(enhanced_html)
with open("/mnt/data/enhanced_styles.css", "w") as enhanced_css_file:
enhanced_css_file.write(enhanced_css)
"/mnt/data/enhanced_retro_site.html and /mnt/data/enhanced_styles.css created."