Untitled

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>index</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css.css">
        <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
    </head>
    <body>
        <header>
            <img class="logo" src="img/logo.png" alt="logo">
            <nav>
                <ul class="navi">
                    <li><a href="index.html">ACCUEIL</a></li>
                    <li><a href="cuisine.html">NOTRE CUISINE</a></li>
                    <li><a href="carte.html">LA CARTE</a></li>
                    <li><a href="vin.html">LE VIN</a></li>
                    <li><a href="book.html">LIVRE D'OR</a></li>
                    <li><a href="realisation.html">NOS RÉALISATION</a></li>
                    <li><a href="event.html">EVÈNEMENTS</a></li>
                </ul>
            </nav>
            <a class="msg" href="#">CONTACT</a>
            </div>
        </div>
<div class="container main-container">

    <div id="carousel-example-generic" class="carousel slide" data-interval="7000">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">

            <!-- First slide -->
            <div class="item active deepskyblue">

                <div class="carousel-caption">
                    <h3 data-animation="animated bounceInLeft">
                        This is the caption for slide 1
                    </h3>
                    <h3 data-animation="animated bounceInRight">
                        This is the caption for slide 1
                    </h3>
                    <button class="btn btn-primary btn-lg" data-animation="animated zoomInUp">Button</button>
                </div>
            </div> <!-- /.item -->

            <!-- Second slide -->
            <div class="item skyblue">
                <div class="carousel-caption">
                    <h3 class="icon-container" data-animation="animated bounceInDown">
                        <span class="glyphicon glyphicon-heart"></span>
                    </h3>
                    <h3 data-animation="animated bounceInUp">
                        This is the caption for slide 2
                    </h3>
                    <button class="btn btn-primary btn-lg" data-animation="animated zoomInRight">Button</button>
                </div>
            </div><!-- /.item -->

            <!-- Third slide -->
            <div class="item darkerskyblue">
                <div class="carousel-caption">
                    <h3 class="icon-container" data-animation="animated zoomInLeft">
                        <span class="glyphicon glyphicon-glass"></span>
                    </h3>
                    <h3 data-animation="animated flipInX">
                        This is the caption for slide 3
                    </h3>
                    <button class="btn btn-primary btn-lg" data-animation="animated lightSpeedIn">Button</button>
                </div>
            </div><!-- /.item -->

        </div><!-- /.carousel-inner -->

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div><!-- /.carousel -->

</div><!-- /.container -->

    </body>
</html>