<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title>Kyflo</title>
    <link rel="stylesheet" type="text/css" href="Assets/css/css.css">
    <link rel="stylesheet" type="text/css" href="Assets/css/resp.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head>

<body>

    <nav>
        <a id="kyflo" class="active" href="index.html">KyFlo</a>
        <a class="raccourci" href="#nous">A propos</a>
        <a class="raccourci" id="borL" href="#contact">Contact</a>
        <a id="panier" href="Assets/Pages/Autres/checkout.html"><img src="Assets/Images/Icones/cart.png" alt><h3>Panier</h3></a>
        <a id="go" href="Assets/Pages/Autres/search_result.html">GO</a>
        <input type="text" placeholder="Rechercher sur tout le site...">
    </nav>

    <div id="dark_popup">

        <div id="popup">
            <a href="#"><h1>X</h1></a>
            <h1>Votre question / votre retour a été pris en compte !</h1>
            <a href="Assets/Pages/Autres/checkout.html"><h2>Voir mon panier</h2></a>
            <a href="index.html"><h2>Continuer mes achats</h2></a>
        </div>
        
        <div id="bienvenue">
            <h1>Bienvenue sur le site de KyFlo !</h1>
            <h2>Vendeur de robot depuis 2010 !</h2>
        </div>

        <div id="slider">
            <figure>
                <a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Promotions/promo1.png" alt></a>
                <a href="Assets/Pages/Produits/pepper.html"><img src="Assets/Images/Promotions/promo2.png" alt></a>
                <a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Promotions/promo3.png" alt></a>
                <a href="Assets/Pages/Produits/terminator.html"><img src="Assets/Images/Promotions/promo4.png" alt></a>
                <a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Promotions/promo1.png" alt></a>
            </figure>
        </div>

        <div id="produits">
            <div class="title">
                <h1>Tout nos produits :</h1>
            </div>
            
            <div class="flex-container">
                <div>
                    <a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Produits/nao.png" alt>
                        <h2>Robot Nao</h2>
                    </a>
                </div>
                <div class="out">
                    <h1>Rupture de stock</h1>
                    <a href="#produits"><img src="Assets/Images/Produits/soldat.png" alt>
                        <h2>Robot soldat</h2>
                    </a>
                </div>
                <div>
                    <a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Produits/r2d2.png" alt>
                        <h2>Robot r2d2</h2>
                    </a>
                </div>
                <div class="out">
                    <h1>Rupture de stock</h1>
                    <a href="#produits"><img src="Assets/Images/Produits/valkyrie.png" alt>
                        <h2>Robot valkyrie</h2>
                    </a>
                </div>
                <div>
                    <a href="Assets/Pages/Produits/pepper.html"><img src="Assets/Images/Produits/pepper.png" alt>
                        <h2>Robot Pepper</h2>
                    </a>
                </div>
                <div>
                    <a href="Assets/Pages/Produits/terminator.html"><img src="Assets/Images/Produits/terminator.png" alt>
                        <h2>Terminator</h2>
                    </a>
                </div>
            </div>
        </div> 
        <div id="contact">
            <div class="title">
                <h1>Nous contacter :</h1>
            </div>

            <div class="content">
                <form action="#dark_popup">
                    <h2>Nom et Prénom :</h2>
                    <input type="text" required>
        
                    <h2>Email :</h2>
                    <input type="email" required>
        
                    <h2>Question :</h2>
                    <input type="text" placeholder="Question, suggestion, remarque" required>
        
                    <h2>Valider:</h2>
                    <input type="submit" value="Envoyer">
                </form>
            </div>
        </div>

        <div id="nous">
            <div class="title">
                <h1>Qui sommes nous ?</h1>
            </div>
            <div class="flex-container">
                <div>
                    <img src="Assets/Images/Sprites/benoit.png" alt>
                </div>
                <div>
                    <img src="Assets/Images/Sprites/florian.png" alt>
                </div>
                <div>
                    <img src="Assets/Images/Sprites/luca.png" alt>
                </div>
                <div id="engagements">
                    <h2>Nos engagements :</h2>
                    <ul>
                        <li>
                            Etre soucieux de la qualité de nos produits
                        </li>
                        <li>
                            Vendre des robots à la pointe de la technologie
                        </li>
                        <li>
                            Respecter l'environnement
                        </li>
                    </ul>
                </div>
                
            </div>
        </div>
    </div>
    
    <footer>
        <div id="acces">
            <table>
                <tbody>
                    <tr>
                        <th>Accès rapide</th>
                        <th id="line"></th>
                    </tr>
                    <tr>
                        <td><a href="index.html">Accueil</a></td>
                        <td><a href="index.html#slider">Nos Promotions</a></td>
                    </tr>
                    <tr>
                        <td><a href="index.html#produits">Nos Produits</a></td>
                        <td><a href="Assets/Pages/Autres/checkout.html">Votre panier</a></td>
                        
                    </tr>
                </tbody>
            </table>
        </div>
    </footer>

</body>

</html>