#### HTML and CSS Code for Category Creativity
Below is a simple HTML code with CSS to provide information about the category "creativity" using interactive CSS and JS.
HTML:
Category: Creativity
Welcome to the World of Creativity
Explore the fascinating realm of creativity and innovation.
What is Creativity?
Creativity is the ability to generate new ideas, concepts, and associations that lead to innovative solutions and artistic expressions.
Examples of Creativity
Artistic masterpieces
Innovative designs
Original storytelling
CSS (styles.css):
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
text-align: center;
}
h1 {
color: #4CAF50;
}
.creativity-info {
background-color: #fff;
padding: 20px;
margin: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.creativity-info h2 {
color: #4CAF50;
}
.creativity-examples {
background-color: #fff;
padding: 20px;
margin: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.creativity-examples ul {
list-style-type: none;
}
.creativity-examples li {
padding: 5px 0;
color: #555;
}
JavaScript (script.js):
// Add interactivity here
// For example, create a button that changes the background color when clicked
document.addEventListener('DOMContentLoaded', function() {
const button = document.createElement('button');
button.textContent = 'Change Background Color';
button.addEventListener('click', function() {
document.body.style.backgroundColor = getRandomColor();
});
document.body.appendChild(button);
});
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
This code provides a basic web page about the category "creativity" and includes interactive CSS and JavaScript to enhance the user experience.