FlexQuotes Assignment & Live Preview

Assignment Requirements Summary

✓ Flexbox #1 (Navigation): Applied on `<ul>` for horizontal item distribution, centered alignment, and link styling.

✓ Flexbox #2 (Content Layout): Applied on `<section>` with `flex-wrap: wrap` to position quote cards side-by-side cleanly.

✓ External Stylesheet: Created `styles.css` and linked using `<link rel="stylesheet" href="styles.css">`.

✓ Responsive Design: Clean arrangement on desktops, laptops, tablets, and mobile browsers.

flexquotes.html

Interactive Window

Inspiring Quotes

Demonstrating CSS Flexbox layouts for modern design

"No matter how much you try to understand other people's hearts, people aren't able to change others. Every time, you have to change yourself."

Isagi Yoichi

You shouldn't aim to be the one that gets chosen, but the one that chooses."

Ego Jinpachi

Spread love everywhere you go. Let no one ever come to you without leaving happier.

Mother Teresa

In the middle of difficulty lies opportunity.

Albert Einstein

FlexQuotes.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FlexQuotes Project</title>
    <!-- Linked external stylesheet as required -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <header>
        <nav>
            <!-- FIRST FLEXBOX IS APPLIED TO THIS <ul> -->
            <ul class="nav-menu">
                <li><a href="#home">Home</a></li>
                <li><a href="#inspirational">Inspirational</a></li>
                <li><a href="#motivational">Motivational</a></li>
                <li><a href="#wisdom">Wisdom</a></li>
                <li><a href="#about">About</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <h1 class="page-title">Inspiring Quotes</h1>

        <!-- SECOND FLEXBOX IS APPLIED TO THIS <section> -->
        <section class="quotes-section">
            <article class="quote-card">
                <div class="quote-mark">“</div>
                <p class="quote-text">The only way to do great work is to love what you do.</p>
                <p class="quote-author">Steve Jobs</p>
            </article>

            <article class="quote-card">
                <div class="quote-mark">“</div>
                <p class="quote-text">Life is what happens when you're busy making other plans.</p>
                <p class="quote-author">John Lennon</p>
            </article>

            <article class="quote-card">
                <div class="quote-mark">“</div>
                <p class="quote-text">Spread love everywhere you go. Let no one ever come to you without leaving happier.</p>
                <p class="quote-author">Mother Teresa</p>
            </article>

            <article class="quote-card">
                <div class="quote-mark">“</div>
                <p class="quote-text">In the middle of difficulty lies opportunity.</p>
                <p class="quote-author">Albert Einstein</p>
            </article>
        </section>
    </main>

</body>
</html>

styles.css

/* External Stylesheet for FlexQuotes Assignment */

/* General Body Styling */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f6f9;
    margin: 0;
    padding: 20px;
    color: #333;
}

.page-title {
    text-align: center;
    color: #2c3e50;
    margin-top: 30px;
}


ul.nav-menu {
    display: flex;                /* Flexbox container #1 */
    justify-content: space-around;/* Distribute items evenly */
    align-items: center;        /* Vertically align items */
    list-style-type: none;        /* Remove default bullet points */
    padding: 0;
    margin: 0;
    background-color: #2c3e50;   /* Dark sleek background */
    border-radius: 8px;
}

ul.nav-menu li a {
    display: block;
    color: #ecf0f1;
    text-decoration: none;
    padding: 15px 20px;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

ul.nav-menu li a:hover {
    background-color: #34495e;
    color: #3498db;
    border-radius: 6px;
}

section.quotes-section {
    display: flex;                /* Flexbox container #2 */
    flex-wrap: wrap;              /* Wrap cards onto next line on smaller screens */
    justify-content: center;      /* Center cards horizontally */
    gap: 20px;                    /* Gap between quote cards */
    padding: 20px 0;
}


.quote-card {
    flex: 1 1 280px;              /* Growth, shrink, and base basis width */
    max-width: 380px;
    background-color: #ffffff;
    border-left: 5px solid #3498db;/* Accent border line */
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.quote-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.quote-mark {
    font-size: 3rem;
    color: #3498db;
    opacity: 0.3;
    line-height: 0.8;
}

.quote-text {
    font-size: 1.05rem;
    font-style: italic;
    color: #444;
    line-height: 1.6;
    margin-bottom: 15px;
}

.quote-author {
    font-weight: bold;
    color: #2c3e50;
    text-align: right;
    margin: 0;
}

.quote-author::before {
    content: "— ";
}

Code copied to clipboard!