<!-- partie rayan -->
<header class="container-fluid">
        <div class="header-menu">
            <div class="container d-flex f-justify-content-between f-align-items-center f_wrap">
                <div class="col">
                    <h1 class="title-header"><a href="#">The Modernist</a></h1>
                    <p class="subtitle-header">Free PSD Website Template</p>
                </div>
                <div class="col">
                    <nav>
                        <ul class="d-flex text-upper">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">Style Demo</a></li>
                            <li><a href="#">Full Width</a></li>
                            <li><a href="#">Dropdown</a></li>
                            <li><a href="#">Portfolio</a></li>
                            <li><a href="#">Gallery</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
            <div class="mySlides fade">
                    <div class="container d-flex f-justify-content-between f-align-items-center">
                        <div class="col">
                            <p class="title-carrou">Cursus penati saccum nulla.</p>
                            <p class="text-carrou">Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna. Urnaultrices quis curabitur phasellentesque congue magnis vestibulum quismodo nulla et feugiat adipiscinia pellentum leo.</p>
                            <p class="text-carrou-read button"><a href="#">Read More Here »</a></p>
                        </div>
                        <div class="col">
                            <img src="media/slide-1.png" alt="plate-fries" width="380" height="380" class="slide"></img>
                        </div>
                    </div>
                </div>
                <div class="mySlides fade">
                    <div class="container d-flex f-justify-content-between f-align-items-center">
                        <div class="col">
                            <p class="title-carrou">Mozzarella sur son lit de verdure.</p>
                            <p class="text-carrou">Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna. Urnaultrices quis curabitur phasellentesque congue magnis vestibulum quismodo nulla et feugiat adipiscinia pellentum leo.</p>
                            <p class="text-carrou-read button"><a href="#">Read More Here »</a></p>
                        </div>
                        <div class="col">
                            <img src="media/slide-2.png" alt="plate-salad" width="380" height="380" class="slide"></img>
                        </div>
                    </div>
                </div>
                <div class="mySlides fade">
                    <div class="container d-flex f-justify-content-between f-align-items-center">
                        <div class="col">
                            <p class="title-carrou">Poulet truffé d'oignons.</p>
                            <p class="text-carrou">Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna. Urnaultrices quis curabitur phasellentesque congue magnis vestibulum quismodo nulla et feugiat adipiscinia pellentum leo.</p>
                            <p class="text-carrou-read button"><a href="#">Read More Here »</a></p>
                        </div>
                        <div class="col">
                            <img src="media/slide-3.png" alt="plate-chicken" width="380" height="380" class="slide"></img>
                        </div>
                    </div>
                </div>
            <!-- green arrow next and previous -->
            <a class="prev" onclick="plusSlides(-1)"><img src="media/arrow-left.png" alt="left-arrow" width="15" height="28"></a>
            <a class="next" onclick="plusSlides(1)"><img src="media/arrow-right.png" alt="right-arrow" width="15" height="28"></a>
        </div>
</header>
    <!-- partie de Fiona -->