<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta http-equiv="Content-Language" content="en" />
    <link rel="stylesheet" href="css/tachyons.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/main.css">

    <title>Landing page 1</title>
</head>

<body class="vh-100 relative">
    <header class="bg-black-90 fixed w-100 ph3 pv3 pv4-ns ph4-m ph5-l">
        <nav class="f5 fw6 ttu tracked">
            <a class="link dim pink dir mr3" href="#" title="Biographie">Biographie</a>
            <a class="link dim pink dir mr3" href="#" title="Oeuvres">Oeuvres</a>
            <a class="link dim pink dir mr3" href="#" title="Coaching">Coaching</a>
            <a class="link dim pink dir mr3" href="#" title="Contact">Contact</a>
        </nav>
    </header>
    <section class="bg-pink w-100 h-100 pt6 pt6-ns ph2 pv2">
        <header class="">
            <h1>Bienvenue sur ma page !</h1>
        </header>
        <svg viewBox="0 0 1000 300"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <path id="MyPath"
            d="M 100 200
            C 200 100 300   0 400 100
            C 500 200 600 300 700 200
            C 800 100 900 100 900 100" />
        </defs>

        <use xlink:href="#MyPath" fill="none"/>

        <text font-family="Verdana" font-size="42.5">
            <textPath xlink:href="#MyPath">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            </textPath>
        </text>

    </svg>

    <svg class="absolute top-2 right-2" width="200" height="200">
        <circle cx="100" cy="100" r="90" stroke="black" stroke-width="4" fill="white" />
    </svg>
    <section>
        <footer class="bg-light-gray w-100 tc ph3 pv3 pv4-ns ph4-m ph5-l center absolute bottom-1 left-0 right-0">
            <div class="dib center">
                <a class="link dim pink dir mr3" href="#" title="Biographie">Biographie</a>
                <a class="link dim pink dir mr3" href="#" title="Oeuvres">Oeuvres</a>
                <a class="link dim pink dir mr3" href="#" title="Coaching">Coaching</a>
                <a class="link dim pink dir mr3" href="#" title="Contact">Contact</a>
            </div>
        </footer>
        <script src="app.js" type="text/javascript"></script>
    </body>
    </html>
