<meta charset="UTF-8">

<title>Site Vitrine</title>

<link rel="stylesheet" href="sitevitrine.css">

<nav>

    <h1>Burgure</h1>

    <div class="onglets">

        <a href="#">Home</a>

        <a href="#produits">Nos produits</a>

        <a href="#contact">Contacts</a>

    </div>

</nav>



<header>

    <h1>Burgure,</h1>

    <h4>LE MEILLEUR FASTFOOD </h4>

    <button>Parcourir</button>

</header>



<section class="main" id="produits">



    <div class="content">

        <div class="card">

            <div class="left">

                <h1>Nos valeurs</h1>

                <p>Mangez sainement mais délicieusement. Nos clients sont toujours rois</p>

            </div>

            <div class="right">

                <a href="#"><img src="Plat 1.PNG" alt=""></a>

            </div>

        </div>



        <div class="card">

            <div class="left">

                <h1>Nos recettes</h1>

                <p>Nous mettons à votre disposition les recettes de nos burgers les plus délicieux ! </p>

            </div>

            <div class="right">

               <a href="#"> <img src="Plat 2.PNG" alt=""></a>

            </div>

        </div>

    </div>

</section>



<footer>



    <h1>Nos services</h1>

    <div class="services">

        

        <div class="service">

            <h3>Livraison gratuite</h3>

            <p>Nous vous livrons des burgers dans un délai maximum de 30 min et les frais supplémentaires de transport sont pris en charge</p>

        </div>



        <div class="service">

            <h3>Paiement en ligne</h3>

            <p>Désormais il est possible d'effectuer des paiements en ligne via CARD VISA, MASTERCLASS, etc</p>

        </div>



        <div class="service">

            <h3>Satisfait ou remboursé</h3>

            <p>En cas d'insatisfaction du client il sera remboursé en totalité</p>

        </div>



    </div>



    <p id="contact">Contact : 06 98 12 169 8 | &copy; 2022, Burgure.</p>

</footer>

scroll-behavior: smooth;

margin: 0px;

padding: 0px;

font-family: 'Montserrat', sans-serif;

display:flex;

flex-wrap:wrap;

justify-content: center;

align-items: center;

border-bottom: 5px solid #6f6f6f;

color: #717171;

font-family: 'Playfair Display', serif;

font-size: 30px;

margin-top: 3px;

margin-left: 300px;

text-decoration: none;

color: #000;

margin-right: 10px;

border-bottom: 1px solid #000;

padding-bottom: 5px;

display: flex;

flex-direction: column;

align-items: center;

background: url('Fond.PNG');

background-size: cover;

color: #fff;

padding: 40px;

font-family: 'Playfair Display', serif;

font-size: 50px;

margin-top: -20px;

font-size: 20px;

text-align: center;

border-bottom: 1px solid #fff;

padding: 10px 20px;

background-color: #fff;

color:#000;

border:none;

margin-bottom: 30px;

outline:none;

font-size: 20px;

font-family: 'Playfair Display', serif;

cursor: pointer;

margin-top: 40px;

display: flex;

flex-direction: column;

align-items: center;

display: flex;

flex-wrap: wrap;

justify-content: center;

margin-bottom:20px;

height:300px;

width: 400px;

margin-top: 5px;

margin-top: 40px;

border-top: 5px solid #6f6f6f;

background-color: rgb(0, 0, 0);

color: #fff;

padding: 30px 100px;;

font-family: 'Playfair Display', serif;

border-bottom: 1px solid white;

width: 20%;

padding-bottom: 5px;

margin-top: -10px;

display:flex;

flex-wrap:wrap;

margin-right: 30px;

max-width: 300px;

color: rgb(181, 181, 181);

nav .onglets {

    margin-left: 0px;

    margin-bottom: 20px;

}

.main .card {

    margin: 10px;

}

.main .content .card .right img{

    height:200px;

    width: 100%;

    margin-top: -0px;

}

.main .content .card{

    display: block;

}

footer{

    padding: 30px;

}