<div id="wrapper">
    <div id="container">
        <div id="welcome">
            <h1><span>Welcome to</span> Symfony {{ constant('Symfony\\Component\\HttpKernel\\Kernel::VERSION') }}</h1>
        </div>

        <div id="status">
            <p>
                <svg id="icon-status" width="1792" height="1792" viewBox="0 0 1792 1792"
                     xmlns="http://www.w3.org/2000/svg">
                    <path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z"
                          fill="#759E1A"/>
                </svg>

                Your application is now ready. You can start working on it at:
            </p>
        </div>

        <div id="next">
            <h2>What's next?</h2>
            <p>{{ text }}</p>


            <a href='{{ url('page1') }}'>tab one</a>
            <br/>
            <a href='{{ url('page2') }}'>tab two</a>
            <br/>
            <a href='/syf43/page1'>retrograde to symfony43</a>
        </div>

    </div>
</div>

<style>
    a:hover {
        text-decoration: none;
    }

    code {
        background: #F5F5F5;
        max-width: 100px;
        padding: 2px 6px;
        word-wrap: break-word;
    }

    #wrapper {
        background: #FFF;
        margin: 1em auto;
        max-width: 800px;
        width: 95%;
    }

    #container {
        padding: 2em;
    }

    #welcome, #status {
        margin-bottom: 2em;
    }

    #welcome h1 span {
        display: block;
        font-size: 75%;
    }

    #icon-status, #icon-book {
        float: left;
        height: 64px;
        margin-right: 1em;
        margin-top: -4px;
        width: 64px;
    }

    #icon-book {
        display: none;
    }

    @media (min-width: 768px) {
        #wrapper {
            width: 80%;
            margin: 2em auto;
        }

        #icon-book {
            display: inline-block;
        }

        #status a, #next a {
            display: block;
        }

        @-webkit-keyframes fade-in {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        @keyframes fade-in {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        .sf-toolbar {
            opacity: 0;
            -webkit-animation: fade-in 1s .2s forwards;
            animation: fade-in 1s .2s forwards;
        }
    }
</style>