Untitled

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Gradient City</title>
    <link href="css/01-gradients.css" rel="stylesheet" />
</head>
<body>
    <div id="wrapper">
        <header id="main-header">
            <h1>Gradient City</h1>
            <nav>
                <ul>
                    <li>
                        <a href="#">Beautiful</a>
                    </li>
                    <li>
                        <a href="#">Powerful</a>
                    </li>
                    <li>
                        <a href="#">Gradients</a>
                    </li>
                </ul>
            </nav>
        </header>
        <section class="linear">
            <header id="linear">
                <h1>
                    Linear Gradients
                </h1>
            </header>
            <article>
                <header id="vertical">
                    <h2>
                        Vertical Gradients
                    </h2>
                </header>
                <div class="innerContainer">
                    <div class="purple"></div>
                    <div class="blue"></div>
                    <div class="green"></div>
                    <div class="yellow"></div>
                    <div class="orange"></div>
                    <div class="red"></div>
                </div>
            </article>
            <article>
                <header id="horizontal">
                    <h2>
                        Horizontal Gradients
                    </h2>
                </header>
                <div class="innerContainer">
                    <div class="purple"></div>
                    <div class="blue"></div>
                    <div class="green"></div>
                    <div class="yellow"></div>
                    <div class="orange"></div>
                    <div class="red"></div>
                </div>
            </article>
            <article>
                <header id="diagonal">
                    <h2>
                        Diagonal Gradients
                    </h2>
                </header>
                <div class="innerContainer">
                    <div class="purple"></div>
                    <div class="blue"></div>
                    <div class="green"></div>
                    <div class="yellow"></div>
                    <div class="orange"></div>
                    <div class="red"></div>
                </div>
            </article>
        </section>
        <section class="radial">
            <header id="radial">
                <h1>
                    Radial Gradients
                </h1>
            </header>
            <article>
                <div class="innerContainer">
                    <div class="purple"></div>
                    <div class="blue"></div>
                    <div class="green"></div>
                    <div class="yellow"></div>
                    <div class="orange"></div>
                    <div class="red"></div>
                </div>
            </article>
        </section>
        <footer>
            <h3>Useful Links</h3>
            <ul>
                <li>
                    <a href="http://www.colorzilla.com/gradient-editor/" target="_blank">The Ultimate CSS Gradient Generator</a>
                </li>
                <li>
                    <a href="http://www.cssmatic.com/gradient-generator" target="_blank">Gradient CSS Generator</a>
                </li>
                <li>
                    <a href="https://softuni.bg/" target="_blank">Software University</a>
                </li>
            </ul>
        </footer>
    </div>
</body>
</html>