Test En

Maak hier een afspraak

500 euro extra korting bovenop de saloncondities bij CIAC Groep! 

Maak een afspraak

Bekijk ons aanbod

1 - Home

Home

Voor professionelen

Voor particulieren

FINANCIERING & LEASING

Job offers

Offres d'emplois

Vacatures

About us

À propos de nous

Over ons

Our group

2 - Vehicles

Vehicles

3 - News

News

4 - Our group

5 - Contact

Contact

2 - Our facebook

Our facebook

 - Over CIAC

Over CIAC

Sur CIAC

1 - About us

Instagram

asdasd

Face

Location

English

Dutch

French

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    wrapper h1 {
        color: white;
        font-weight: bold;
        font-size: 36px;
    }

    wrapper h2 {
        color: #1b3761;
        font-weight: bold;
        margin-bottom: 2rem;
        font-size: 24px;
        font-weight: bold;
    }

    wrapper p {
        color: black;
        line-height: 30px;
        font-size: 16px;
    }

    wrapper button {
        color: #fff;
        background: #99BF30;
        border-radius: 5px;
        padding: 0.5rem 1rem;
        border: none;
    }


    baner {
        background: url("https://images.hyperportal.org/bluekens/UFpqNhYgOQMfElrJrHkjQ");
        display: flex;
        flex-direction: column;
        height: 400px;
        justify-content: center;
    }

    baner h1 {
        margin-left: 5rem;
    }

    baner a {
        margin-left: 5rem;
    }

    baner button {
        margin-top: 20px;
    }

    bannerContentWrapper {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: rgba(27, 55, 97, 0.67);
    }

    firstBlock > subBlock {
        display: flex;
        flex-direction: column;
        padding: 2rem 4rem 0 4rem;
    }

    lightBlueBlock {
        background: #e4f1f5;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 2rem 4rem;
    }

    lightBlueBlock > subBlock {
        width: 45%;
        max-width: 45%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    lightBlueBlock > img {
        width: 500px;
        height: 350px;
        display: flex;
    }

    .mobileImage {
        display: none;
    }

    rightSideImgBlock {
        background: #fff;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 2rem 4rem;
    }

    rightSideImgBlock > subBlock {
        width: 45%;
        max-width: 45%;
        margin-bottom: 20px;
    }

    rightSideImgBlock > img {
        width: 500px;
        height: 350px;
    }

    rightSideImgBlock > subBlock > ul {
        list-style: none;
        padding: 0;
        line-height: 50px;
    }

    rightSideImgBlock > subBlock > ul li {
        font-size: 16px;
    }

    rightSideImgBlock > subBlock > ul li:before {
        content: '✓';
        margin-right: 25px;
    }

    footerBlock {
        background: url("https://images.hyperportal.org/bluekens/LLqMNJmeBsljUcwVBvuPc");
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        flex-direction: row;
        height: 400px;
        justify-content: center;
        align-items: center;

    }

    footerBlock p {
        color: white;
    }

    footerBlock button {
        padding: 0.5rem 5rem;
    }

    footerBlock div {
        width: 50%;
    }

    @media screen and (max-width: 800px) {
        baner h1 {
            margin-left: 1rem;"
        }

        baner a {
            margin-left: 1rem;"
        }

        firstBlock > subBlock {
            padding: 2rem 0 0 0;
        }

        lightBlueBlock {
            flex-direction: column;
            padding: 1rem;
            margin-bottom: 1rem;
        }

        lightBlueBlock > subBlock {
            width: 99%;
            max-width: 99%;
        }

        lightBlueBlock > subBlock > a {
            margin-bottom: 1rem;
        }

        lightBlueBlock > img {
            display: none;
        }

        .mobileImage {
            width: -webkit-fill-available;
            height: fit-content;
            display: flex;
        }

        rightSideImgBlock {
            flex-direction: column;
            padding: 0 0 1rem 0;
        }

        rightSideImgBlock > subBlock {
            width: 99%;
            max-width: 99%;
            justify-content: left;
        }

        rightSideImgBlock > img {
            width: -webkit-fill-available;
            height: fit-content;
        }

        footerBlock {
            flex-direction: column;
            justify-content: center;
            align-items: end;

        }

        footerBlock p {
            color: white;
        }

        footerBlock button {
            padding: 0.5rem 5rem;
        }

        .footerDummyDiv {
            display: none;
        }

        footerBlock div {
            width: 99%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    }

</style>
<wrapper>
    <baner class="baner">
        <bannerContentWrapper>
            <h1>Service: reparatie en onderhoud</h1>
            <a href="">
                <button>
                    Neem contact op →
                </button>
            </a>
        </bannerContentWrapper>
    </baner>
    <content>
        <firstBlock>
            <subBlock>
                <p style="margin-top: 2rem">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    et dolore magna aliqua.
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat.
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                    pariatur. Excepteur sint occaecat.
                    uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                    pariatur. Excepteur sint occaecat
                </p>
            </subBlock>
            <rightSideImgBlock>
                <subBlock>
                    <h2>BYD</h2>
                    <ul>
                        <li>USP 1</li>
                        <li>USP 2</li>
                        <li>USP 3</li>
                    </ul>
                    <br>
                    <a href="">
                        <button>
                            Neem contact op →
                        </button>
                    </a>
                </subBlock>
                <img src="https://images.hyperportal.org/bluekens/UFpqNhYgOQMfElrJrHkjQ" alt="">
            </rightSideImgBlock>
        </firstBlock>
        <lightBlueBlock style="align-items: center">
            <img src="https://images.hyperportal.org/bluekens/UFpqNhYgOQMfElrJrHkjQ" alt="">
            <subBlock>
                <h2>B-ON</h2>
                <p>Ongeacht het merk van je elektrische bedrijfswagen, kunnen we
                    op maat gemaakte service bieden. Momenteel beheren we
                    meer dan 450 voertuigen van merken zoals BYD, B-On, Renault
                    en Maxus voor klanten in diverse branches. Waaronder post- en
                    pakketbezorging, transport en logistiek, en
                    boodschappenbezorging.</p>
                <a href="">
                    <button>
                        Neem contact op →
                    </button>
                </a>
            </subBlock>
            <img class="mobileImage" src="https://images.hyperportal.org/bluekens/UFpqNhYgOQMfElrJrHkjQ" alt="">

        </lightBlueBlock>
        <rightSideImgBlock>
            <subBlock>
                <h2>RENAULT MAXUS</h2>
                <ul>
                    <li>USP 1</li>
                    <li>USP 2</li>
                    <li>USP 3</li>
                </ul>
                <br>
                <a href="">
                    <button>
                        Neem contact op →
                    </button>
                </a>
            </subBlock>
            <img src="https://images.hyperportal.org/bluekens/UFpqNhYgOQMfElrJrHkjQ" alt="">
        </rightSideImgBlock>
        <lightBlueBlock>
            <img src="https://images.hyperportal.org/bluekens/UFpqNhYgOQMfElrJrHkjQ" alt="">
            <subBlock>
                <h2>B-ON</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                    do eiusmod tempor incididunt ut labore et dolore magna
                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat</p>
                <br>
                <a href="">
                    <button>
                        Neem contact op →
                    </button>
                </a>
            </subBlock>
            <img class="mobileImage" src="https://images.hyperportal.org/bluekens/UFpqNhYgOQMfElrJrHkjQ" alt="">
        </lightBlueBlock>
    </content>
    <footerBlock>
        <div class="footerDummyDiv" style="width: 50%">

        </div>
        <div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. At dicta ducimus explicabo
            </p>
            <a href="">
                <button>
                    Neem contact op ✉
                </button>
            </a>
        </div>
    </footerBlock>
</wrapper>
</body>
</html>

CIAC Toyota

dummy page

CIAC