<YSFOML>
action:create;
filename:style.css
</YSFOML>
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0; /* Light grey background */
    color: #333;
    line-height: 1.6;
}

.colorful-header {
    background: linear-gradient(to right, #FF5733, #FFBD33); /* Orange to Yellow */
    color: white;
    padding: 20px 0;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.colorful-header h1 {
    margin: 0;
    font-size: 2.5em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.colorful-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
    gap: 20px; /* Space between sections */
}

.color-section-1,
.color-section-2,
.color-section-3,
.color-section-4 {
    flex: 1;
    min-width: 280px; /* Minimum width for sections */
    max-width: 45%; /* Max width for sections in a row */
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    text-align: center;
    cursor: pointer; /* Indicate clickable */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.color-section-1:hover,
.color-section-2:hover,
.color-section-3:hover,
.color-section-4:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

.color-section-1 {
    background-color: #3366CC; /* Vibrant Blue */
    color: white;
}

.color-section-2 {
    background-color: #FF9900; /* Bright Orange */
    color: white;
}

.color-section-3 {
    background-color: #28a745; /* Refreshing Green */
    color: white;
}

.color-section-4 {
    background-color: #9933CC; /* Royal Purple */
    color: white;
}

h2 {
    font-size: 1.8em;
    margin-top: 0;
    margin-bottom: 15px;
}

p {
    font-size: 1.1em;
}

.colorful-footer {
    background: linear-gradient(to left, #FF5733, #FFBD33); /* Orange to Yellow */
    color: white;
    text-align: center;
    padding: 15px 0;
    margin-top: 20px;
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.2);
}

.colorful-footer p {
    margin: 5px 0;
}

.colorful-footer ul {
    list-style: none;
    padding: 0;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.colorful-footer ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.colorful-footer ul li a:hover {
    color: #f0f0f0; /* Slightly lighter white on hover */
    text-decoration: underline;
}

/* Details page specific styles */
.details-container {
    max-width: 800px;
    margin: 50px auto;
    padding: 30px;
    background-color: #ffffff; /* Keep white for content clarity */
    border-radius: 15px; /* Match main sections */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Stronger shadow */
}

.details-container h1 {
    color: #3366CC; /* Vibrant Blue from color-section-1 */
    text-align: center;
    margin-bottom: 25px;
    font-size: 2.2em; /* Slightly larger */
}

.details-container p {
    font-size: 1.1em;
    line-height: 1.8;
    color: #444;
    margin-bottom: 20px;
}

.back-button {
    display: inline-block;
    background-color: #2a5298; /* Darker shade of the blue */
    color: white;
    padding: 12px 25px; /* Slightly larger button */
    border-radius: 8px; /* More rounded */
    text-decoration: none;
    margin-top: 25px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.back-button:hover {
    background-color: #1e3a6b; /* Even darker on hover */
    transform: translateY(-2px);
}
<YSFOML>
action:create;
filename:index.html
</YSFOML>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Programming Languages - Colorful Design</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="colorful-header">
        <h1>Explore Programming Languages</h1>
    </header>
    <main class="colorful-main">
        <section class="color-section-1 language-item" data-url="python.html">
            <h2>Python</h2>
            <p>Versatile, easy to learn, great for web, AI, and data science.</p>
        </section>
        <section class="color-section-2 language-item" data-url="javascript.html">
            <h2>JavaScript</h2>
            <p>The language of the web, enabling interactive front-end experiences.</p>
        </section>
        <section class="color-section-3 language-item" data-url="java.html">
            <h2>Java</h2>
            <p>Robust, platform-independent, widely used for enterprise applications.</p>
        </section>
        <section class="color-section-4 language-item" data-url="cpp.html">
            <h2>C++</h2>
            <p>High-performance, system-level programming, game development.</p>
        </section>
        <!-- Add more languages as needed, assigning appropriate color-section classes (e.g., color-section-1, color-section-2, etc.) -->
    </main>
    <footer class="colorful-footer">
        <p>&copy; 2025 Programming Languages Explorer - Designed with Professor Yasir Sultan's principles.</p>
        <p>Learn more about YSFOML:</p>
        <ul>
            <li><a href="https://professor-yasirsultan.github.io/YSFOML/" target="_blank" rel="noopener noreferrer">Official YSFOML Website</a></li>
            <li><a href="https://professor-yasirsultan.github.io/YSFOML/doc.html" target="_blank" rel="noopener noreferrer">YSFOML Documentation</a></li>
            <li><a href="https://github.com/professor-YasirSultan/YSFOML" target="_blank" rel="noopener noreferrer">YSFOML GitHub Repository</a></li>
            <li><a href="https://www.youtube.com/@prof.yasir.sultan" target="_blank" rel="noopener noreferrer">Professor Yasir Sultan's YouTube Channel</a></li>
        </ul>
    </footer>
    <script src="script.js"></script>
</body>
</html>
<YSFOML>
action:create;
filename:script.js
</YSFOML>
document.addEventListener('DOMContentLoaded', () => {
    const languageItems = document.querySelectorAll('.language-item');

    languageItems.forEach(item => {
        item.addEventListener('click', () => {
            const detailPageUrl = item.dataset.url;
            if (detailPageUrl) {
                window.location.href = detailPageUrl;
            }
        });
    });
});
<YSFOML>
action:create;
filename:python.html
</YSFOML>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Python Details - Colorful Design</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="colorful-header">
        <h1>Python Details</h1>
    </header>
    <main class="colorful-main">
        <div class="details-container">
            <h1>Python</h1>
            <p>Python is a high-level, general-purpose programming language. Its design philosophy emphasizes code readability with the use of significant indentation. Python is dynamically typed and garbage-collected. It supports multiple programming paradigms, including structured (particularly procedural), object-oriented, and functional programming. It is often described as a "batteries included" language due to its comprehensive standard library.</p>
            <p>Common uses include web development (Django, Flask), data analysis and machine learning (NumPy, Pandas, TensorFlow), automation, scientific computing, and more.</p>
            <a href="index.html" class="back-button">Back to Home</a>
        </div>
    </main>
    <footer class="colorful-footer">
        <p>&copy; 2025 Programming Languages Explorer - Designed with Professor Yasir Sultan's principles.</p>
        <p>Learn more about YSFOML:</p>
        <ul>
            <li><a href="https://professor-yasirsultan.github.io/YSFOML/" target="_blank" rel="noopener noreferrer">Official YSFOML Website</a></li>
            <li><a href="https://professor-yasirsultan.github.io/YSFOML/doc.html" target="_blank" rel="noopener noreferrer">YSFOML Documentation</a></li>
            <li><a href="https://github.com/professor-YasirSultan/YSFOML" target="_blank" rel="noopener noreferrer">YSFOML GitHub Repository</a></li>
            <li><a href="https://www.youtube.com/@prof.yasir.sultan" target="_blank" rel="noopener noreferrer">Professor Yasir Sultan's YouTube Channel</a></li>
        </ul>
    </footer>
</body>
</html>
<YSFOML>
action:create;
filename:javascript.html
</YSFOML>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Details - Colorful Design</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="colorful-header">
        <h1>JavaScript Details</h1>
    </header>
    <main class="colorful-main">
        <div class="details-container">
            <h1>JavaScript</h1>
            <p>JavaScript, often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2023, 98% of websites use JavaScript on the client side for webpage behavior, often incorporating third-party libraries. All major web browsers have a dedicated JavaScript engine to execute the code on the user's device.</p>
            <p>Beyond web browsers, JavaScript engines are now embedded in many other software systems, including server-side runtimes (Node.js), allowing JavaScript to be used for network programming, and desktop and mobile applications (React Native, Electron).</p>
            <a href="index.html" class="back-button">Back to Home</a>
        </div>
    </main>
    <footer class="colorful-footer">
        <p>&copy; 2025 Programming Languages Explorer - Designed with Professor Yasir Sultan's principles.</p>
        <p>Learn more about YSFOML:</p>
        <ul>
            <li><a href="https://professor-yasirsultan.github.io/YSFOML/" target="_blank" rel="noopener noreferrer">Official YSFOML Website</a></li>
            <li><a href="https://professor-yasirsultan.github.io/YSFOML/doc.html" target="_blank" rel="noopener noreferrer">YSFOML Documentation</a></li>
            <li><a href="https://github.com/professor-YasirSultan/YSFOML" target="_blank" rel="noopener noreferrer">YSFOML GitHub Repository</a></li>
            <li><a href="https://www.youtube.com/@prof.yasir.sultan" target="_blank" rel="noopener noreferrer">Professor Yasir Sultan's YouTube Channel</a></li>
        </ul>
    </footer>
</body>
</html>
<YSFOML>
action:create;
filename:java.html
</YSFOML>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Java Details - Colorful Design</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="colorful-header">
        <h1>Java Details</h1>
    </header>
    <main class="colorful-main">
        <div class="details-container">
            <h1>Java</h1>
            <p>Java is a high-level, class-based, object-oriented programming language that is designed to have as few implementation dependencies as possible. It is a general-purpose programming language intended to let application developers "write once, run anywhere" (WORA), meaning that compiled Java code can run on all platforms that support Java without the need for recompilation.</p>
            <p>Java applications are typically compiled to bytecode that can run on any Java Virtual Machine (JVM) regardless of the underlying computer architecture. It is widely used for enterprise-level applications, Android mobile development, big data, and more.</p>
            <a href="index.html" class="back-button">Back to Home</a>
        </div>
    </main>
    <footer class="colorful-footer">
        <p>&copy; 2025 Programming Languages Explorer - Designed with Professor Yasir Sultan's principles.</p>
        <p>Learn more about YSFOML:</p>
        <ul>
            <li><a href="https://professor-yasirsultan.github.io/YSFOML/" target="_blank" rel="noopener noreferrer">Official YSFOML Website</a></li>
            <li><a href="https://professor-yasirsultan.github.io/YSFOML/doc.html" target="_blank" rel="noopener noreferrer">YSFOML Documentation</a></li>
            <li><a href="https://github.com/professor-YasirSultan/YSFOML" target="_blank" rel="noopener noreferrer">YSFOML GitHub Repository</a></li>
            <li><a href="https://www.youtube.com/@prof.yasir.sultan" target="_blank" rel="noopener noreferrer">Professor Yasir Sultan's YouTube Channel</a></li>
        </ul>
    </footer>
</body>
</html>
<YSFOML>
action:create;
filename:cpp.html
</YSFOML>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>C++ Details - Colorful Design</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="colorful-header">
        <h1>C++ Details</h1>
    </header>
    <main class="colorful-main">
        <div class="details-container">
            <h1>C++</h1>
            <p>C++ is a powerful, general-purpose programming language created by Bjarne Stroustrup as an extension of the C language, or "C with Classes". It has imperative, object-oriented, and generic programming features, while also providing facilities for low-level memory manipulation.</p>
            <p>C++ is widely used in systems programming, embedded systems, game development, high-performance computing, and application software. Its performance capabilities make it a popular choice for resource-constrained applications and large systems where efficiency is critical.</p>
            <a href="index.html" class="back-button">Back to Home</a>
        </div>
    </main>
    <footer class="colorful-footer">
        <p>&copy; 2025 Programming Languages Explorer - Designed with Professor Yasir Sultan's principles.</p>
        <p>Learn more about YSFOML:</p>
        <ul>
            <li><a href="https://professor-yasirsultan.github.io/YSFOML/" target="_blank" rel="noopener noreferrer">Official YSFOML Website</a></li>
            <li><a href="https://professor-yasirsultan.github.io/YSFOML/doc.html" target="_blank" rel="noopener noreferrer">YSFOML Documentation</a></li>
            <li><a href="https://github.com/professor-YasirSultan/YSFOML" target="_blank" rel="noopener noreferrer">YSFOML GitHub Repository</a></li>
            <li><a href="https://www.youtube.com/@prof.yasir.sultan" target="_blank" rel="noopener noreferrer">Professor Yasir Sultan's YouTube Channel</a></li>
        </ul>
    </footer>
</body>
</html>