<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Homepage</title>
    <style>
        @font-face {
            font-family: 'HP Simplified';
            src: url('https://www.hp.com/pl-pl/shop/pwa-static/fonts/HPSimplifiedLight.woff') format('woff');
            font-weight: 300;
            font-style: normal;
        }

        @font-face {
            font-family: 'Montserrat';
            src: url('https://www.hp.com/pl-pl/shop/pwa-static/fonts/MontserratSemiBold.woff') format('woff');
            font-weight: 600;
            font-style: normal;
        }

        @font-face {
            font-family: 'Montserrat';
            src: url('https://www.hp.com/pl-pl/shop/pwa-static/fonts/MontserratBold.woff') format('woff');
            font-weight: 700;
            font-style: normal;
        }

        :root {
            --hp-font-family: 'HP Simplified', -apple-system, BlinkMacSystemFont, sans-serif;
            --hp-secondary-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
            --hp-color-10: #767676;
            --hp-color-25: #024AD8;
            --hp-color-26: #0036C4;
            --hp-color-27: #2c3038;
            --hp-text-color: var(--hp-color-27);
            --hp-font-size: 16px;
            --hp-line-height: 1.5;
        }

        html {
            font-family: var(--hp-font-family);
            font-size: var(--hp-font-size);
            line-height: var(--hp-line-height);
            color: var(--hp-color-27);
        }

        body {
            margin: 0;
        }

        .root {
            text-align: center;
            padding: 3.125rem 1rem;
        }

        .root h1,
        .root h2,
        .root h3,
        .root p {
            margin: 0;
        }

        .root h1,
        .root h2,
        .root h3,
        .link,
        .button {
            font-family: var(--hp-secondary-font-family);
        }

        .root h1,
        .root h3 {
            font-weight: 700;
        }

        .root h1,
        .root h2 {
            color: var(--hp-color-10);
        }

        .root h2,
        .link,
        .button {
            font-weight: 600;
        }

        .root h1,
        .root h2,
        .link,
        .button {
            text-transform: uppercase;
        }

        .root h1 {
            font-size: 1.25rem;
            margin-bottom: 1rem;
        }

        .root h2 {
            display: flex;
            flex-direction: column;
            margin-bottom: 4.25rem;
        }

        .root h3 {
            margin-bottom: 1rem;
        }

        .root h2,
        .root h3 {
            font-size: 1rem;
        }

        .root p {
            font-weight: 300;
            margin-bottom: 0.375rem;
        }

        .link,
        .button {
            display: inline-flex;
            align-items: center;
            font-size: 0.875rem;
            text-decoration: none;
            color: var(--hp-color-25);
        }

        .link span,
        .button span {
            display: inline-flex;
            align-items: center;
            transition: all .25s ease-out;
        }

        .link svg,
        .button svg {
            fill: var(--hp-color-25);
            margin-left: 0.5rem;
            flex-shrink: 0;
        }

        .link:hover,
        .button:hover {
            color: var(--hp-color-26)
        }

        .link:hover svg,
        .button:hover svg {
            fill: var(--hp-color-26)
        }

        .logo {
            margin-bottom: 3.125rem;
        }

        .link {
            padding: 0.5rem 0.75rem;
        }

        .link span {
            position: relative;
            transform: translateY(0);
        }

        .link span::after {
            content: "";
            display: block;
            position: absolute;
            bottom: -0.3125rem;
            height: 0.1875rem;
            width: 100%;
            opacity: 0;
            background-color: var(--hp-color-25);
            transition: inherit;
        }

        .link:hover span {
            transform: translateY(-0.25rem);
        }

        .link:hover span::after {
            background-color: var(--hp-color-26);
            opacity: 1;
            transform: translateY(0.25rem);
        }

        .button {
            padding: 0.9375rem 2.4375rem;
            background-color: #fff;
            border: 1px solid var(--hp-color-25);
            border-radius: 0.1875rem;
            transition: all .25s ease-out;
        }

        .button span {
            transform: translateX(0.875rem);
        }

        .button svg {
            opacity: 0;
            transform: translateX(-1.75rem);
            transition: inherit;
        }

        .button:hover {
            border-color: var(--hp-color-26);
        }

        .button:hover span {
            transform: translateX(0);
        }

        .button:hover svg {
            transform: translateX(0);
            opacity: 1;
        }

        .alternative {
            margin-bottom: 3.5rem;
        }

        .alternative:last-child {
            margin-bottom: 0;
        }

        .contact {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        @media (min-width: 64rem) {
            .root {
                padding: 6.875rem 1rem;
            }

            .root h1 {
                font-size: 2.75rem;
                margin-bottom: 1.75rem;
            }

            .root h2 {
                font-size: 1.5rem;
                margin-bottom: 8.375rem;
            }

            .root h3,
            .root p {
                font-size: 1.25rem;
            }

            .root p {
                margin-bottom: 1rem;
            }

            .logo {
                margin-bottom: 5.25rem;
            }

            .logo svg {
                width: 7.5rem;
                height: 7.5rem;
            }

            .contact {
                flex-direction: row;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <svg style="display: none;">
        <defs>
            <symbol id="i-logo">
                <defs xmlns="http://www.w3.org/2000/svg"><style>.a{fill:#0096d6;}</style></defs>
                <path class="a" d="M59.832.2c1.782-.01,3.557-.414,5.325-.038a60,60,0,0,1,54.784,55.4A56.862,56.862,0,0,0,120,63.715a60.656,60.656,0,0,1-6,22.553,59.963,59.963,0,0,1-48.161,33.359,34.911,34.911,0,0,1-5.167.307c-1.146-.075-2.319.291-3.42-.178q6.325-17.789,12.684-35.571c4.63-.085,9.264.031,13.895-.055a7.456,7.456,0,0,0,6.846-4.772c3.916-11.022,7.93-22.012,11.723-33.082a8.584,8.584,0,0,0,.472-5.285,6.863,6.863,0,0,0-4.883-4.376c-1.895-.588-3.9-.373-5.844-.407-5.944-.017-11.887.031-17.827-.027-.1.2-.291.591-.386.786Q59.5,77.5,45.045,118.024A60.081,60.081,0,0,1,1.173,71.3,78.663,78.663,0,0,1,0,60.3,63.428,63.428,0,0,1,4.309,37.8C11.357,19.783,27.666,5.6,46.625,1.545,36.92,28.446,27.44,55.429,17.738,82.333a6.7,6.7,0,0,0,1.9.123c3.536-.017,7.076.007,10.612-.007.482,0,.431-.673.633-.981,4.261-12.027,8.573-24.036,12.848-36.056a19.9,19.9,0,0,1,.838-2.205c2.216.038,4.432-.01,6.648.024-4.647,13.028-9.254,26.077-13.97,39.081a4.285,4.285,0,0,0,1.546.147c3.714-.035,7.428.024,11.142-.027,4.2-11.839,8.443-23.657,12.65-35.489a8.526,8.526,0,0,0-.451-7.514,7.2,7.2,0,0,0-5.879-3.012c-3.091-.092-6.186.007-9.281-.048C51.232,24.3,55.612,12.279,59.832.2" transform="translate(0 0)"/><path class="a" d="M11.915.245c.363-.414,1.007-.163,1.491-.234,1.685.031,3.37-.014,5.056.024C14.537,11.351,10.427,22.6,6.567,33.941,4.384,34.1,2.185,34,0,33.989,3.985,22.748,7.93,11.49,11.915.245" transform="translate(72 42.985)"/>
            </symbol>
            <symbol id="i-link">
                <path d="M16 13v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2H6v8h8v-1a1 1 0 0 1 2 0Zm-.08-8.38a1 1 0 0 0-.54-.54A1 1 0 0 0 15 4h-4a1 1 0 0 0 0 2h1.59l-2.3 2.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0L14 7.41V9a1 1 0 0 0 2 0V5a1 1 0 0 0-.08-.38Z"></path>
            </symbol>
            <symbol id="i-arrow">
                <path d="m17.34 10.5.07-.09a1 1 0 0 0 0-.82l-.06-.09a1.08 1.08 0 0 0-.18-.23l-6-5a1 1 0 1 0-1.31 1.5L13.74 9H3.5a1 1 0 0 0 0 2h10.24l-3.88 3.23a1 1 0 0 0-.13 1.41 1 1 0 0 0 .77.36 1 1 0 0 0 .64-.23l6-5a.81.81 0 0 0 .2-.27Z"></path>
            </symbol>
        </defs>
    </svg>
    <div class="root">
        <div class="heading">
            <div class="logo">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="80" height="80">
                    <use xlink:href="#i-logo"></use>
                </svg>
            </div>
            <h1>Shoppen bij ons wordt nog leuker!</h1>
            <h2>
                <span>Bedankt voor je bezoek aan de officiële HP Store</span>
                <span>We werken momenteel aan een aantal verbeteringen om jou een nog betere winkelervaring te bieden.</span>
            </h2>
        </div>
        <div class="alternative">
            <h3>Probeer later nog eens</h3>
            <p>Technische ondersteuning voor HP producten</p>
            <div class="contact">
                <a class="link" href="tel:078 07 92 98">
                    <span>
                        078 07 92 99
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="20" width="20">
                            <use xlink:href="#i-link"></use>
                        </svg>
                    </span>
                </a>
            </div>
        </div>
        <div class="alternative">
            <h3>Hulp nodig?</h3>
            <a class="button" href="https://support.hp.com/be-nl" target="_blank">
                <span>
                    Technische ondersteuning voor HP producten
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="20" width="20">
                        <use xlink:href="#i-arrow"></use>
                    </svg>
                </span>
            </a>
        </div>
    </div>
</body>
</html>
