<!doctype html>
<html lang="en_EN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <meta name="description" content="<%= htmlWebpackPlugin.options.description %>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
</head>

<body class="home">
    <header id="header" class="header">
		<div class="container">
			<div class="grid">
				<div class="col-12">
					<div class="text-center">
                        <hgroup>
							<a href="/">
                                <h1 class="h2 margin-top-4 margin-bottom-0">
                                    <svg class="icon icon--big margin-bottom-1" alt="Crispy CSS">
                                        <use xlink:href="symbol-defs.svg#icon-logo" />
                                    </svg><br />
								    Crispy CSS
                                </h1>
                            </a>
                            <small class="text-color-primary">v3.0.0</small>
                            <h2 class="h5 margin-top-1">
                                Lightweight CSS Framework for Building Apps and Websites
                            </h2>
						</hgroup>
					</div>
				</div>
			</div>
		</div>
	</header>
	<div class="container">
        <div class="grid margin-top-2 margin-bottom-2">
            <div class="col-12 col-sm-6 col-lg-4 col-align-center">
                <h3 class="h4 text-center">
                    <span class="h3__icon">
                        <svg class="icon icon-color-primary text-size-medium" alt="Mixins and Functions">
                            <use xlink:href="symbol-defs.svg#icon-emoticon-zip" />
                        </svg>
                    </span>
                    <div>Ugly</div>
                </h3>
                <p class="text-center">
                    Yes, this Framework has no fancy Layout or shiny Elements,
                    because what created with Crispy CSS could be fancy.
                    This Framework adds basic styles and support your Work.
                </p>
            </div>
            <div class="col-12 col-sm-6 col-lg-4">
                <h3 class="h4 text-center">
                    <span class="h3__icon">
                        <svg class="icon icon-color-primary text-size-medium" alt="Customizeable">
                            <use xlink:href="symbol-defs.svg#icon-spray" />
                        </svg>
                    </span>
                    <div>Helpers</div>
                </h3>
                <p class="text-center">
                    Mixins, Functions and Modifiers make your Workflow simpler. Only
                    import Components you really need and make your Work lightweight.
                </p>
            </div>
            <div class="col-12 col-sm-6 col-lg-4">
                <h3 class="h4 text-center">
                    <span class="h3__icon">
                        <svg class="icon icon-color-primary text-size-large" alt="Coding Style">
                            <use xlink:href="symbol-defs.svg#icon-design" />
                        </svg>
                    </span>
                    <div>Coding Style</div>
                </h3>
                <p class="text-center">
                    Crispy CSS uses <a href="http://getbem.com/" target="_blank">BEM</a>, but
                    an simpler approach of it. BEM is good to show dependencies
                    in Components and add structure to your Styles.
                </p>
            </div>
        </div>

        <div class="margin-bottom-2 text-center text-size-medium">
            <a class="button background-color-success text-color-white margin-left-1 margin-right-1" href="/getting-started.html">
                Getting started!
                <svg class="icon margin-left-1" alt="proceed">
                    <use xlink:href="symbol-defs.svg#icon-circle-right" />
                </svg>
            </a>
            <a class="button background-color-grey text-color-white margin-left-1 margin-right-1" target="_blank" href="https://github.com/tentakelfabrik/crispy-css">
                Visit on Github
                <svg class="icon margin-left-1" alt="github">
                    <use xlink:href="symbol-defs.svg#icon-github" />
                </svg>
            </a>
        </div>

        <div class="margin-bottom-5 margin-top-4">
            <div class="grid">
                <div class="col-12">
                    <h2 class="h3 text-center">Apps and Websites that have been crafted</h2>
                </div>
            </div>
            <div class="grid">
                <div class="col-12 col-sm-6 col-md-4">
                    <h3 class="h5 text-center">
                        Tentakelfabrik
                    </h3>
                    <a class="text-center show" href="https://tentakelfabrik.de" target="_blank">
                        <img class="bordered img-responsive width-100" src="img/tentakelfabrik.jpg" />
                    </a>
                </div>
                <div class="col-12 col-sm-6 col-md-4">
                    <h3 class="h5 text-center">
                        Gaming Circus
                    </h3>
                    <a class="text-center show" href="https://gaming-circus.de" target="_blank">
                        <img class="bordered img-responsive width-100" src="img/gaming-circus.jpg" />
                    </a>
                </div>
                <div class="col-12 col-sm-6 col-md-4">
                    <h3 class="h5 text-center">
                        Trinkkofi
                    </h3>
                    <a class="text-center show" href="https://trinkkofi.de" target="_blank">
                        <img class="bordered img-responsive width-100" src="img/trinkkofi.jpg" />
                    </a>
                </div>
            </div>
        </div>
    </div>

    <%= htmlWebpackPlugin.options.footer %>

</body>
</html>