diff --git a/frontend/checkout.css b/frontend/checkout.css
new file mode 100644
index 0000000000000000000000000000000000000000..3d77fa5484428544e50b7f5ff551da154751c2bb
--- /dev/null
+++ b/frontend/checkout.css
@@ -0,0 +1,65 @@
+input[type=text], input[type=email], input[type=tel] {
+ width: 100%;
+ padding : 12 px;
+ border: 1px solid #ccc;
+ border-radius: 4 px;
+ box-sizing: border-box;
+}
+
+
+label {
+ padding: 12px 12px 12px 0;
+ display: inline-block;
+}
+
+.euladiv + label{
+ display: block
+ padding-left: 15px;
+ text-indent: -15px;
+}
+
+input[type=checkbox] {
+ width: 13px;
+ height: 13px;
+ padding: 0;
+ margin: 0;
+ vertical-align: bottom;
+ position: relative;
+ top: -1px;
+ *overflow: hidden;
+}
+
+input[type=submit] {
+ float: right;
+ padding: 12px 20px;
+}
+
+.container {
+ border-radius: 5px;
+ padding: 20px;
+}
+
+.col-25 {
+ float: left;
+ width: 25%;
+ margin-top: 6px;
+}
+
+.col-75 {
+ float: left;
+ width: 75%;
+ margin-top: 6px;
+}
+
+.row:after {
+ content: "";
+ display: table;
+ clear: both;
+}
+
+@media screen and (max-width: 600px) {
+ .col-25, .col-75, input[type=submit]{
+ width: 100%;
+ margin-top: 0;
+ }
+}
diff --git a/frontend/checkout.html b/frontend/checkout.html
new file mode 100644
index 0000000000000000000000000000000000000000..988f615d3c9d37f247280c1af80d4878990ae48c
--- /dev/null
+++ b/frontend/checkout.html
@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <!-- <link rel="stylesheet" href="style.css"> -->
+ <link rel="stylesheet" href="menu.css">
+ <link rel="stylesheet" href="checkout.css">
+ <!-- <link rel="stylesheet" href="button.css"> -->
+ <title>Checkout</title>
+</head>
+<body>
+
+ <nav>
+ <div class="shop">
+ <a href="shop.html" id="back">BACK TO MENU</a>
+ </div>
+
+ <p id="fill">CHECKOUT</p>
+ <div class="shop">
+
+ <div id="sac">
+ <a href="cart.html"><img src="img/sac.svg" id="logo"></a>
+ </div>
+ </div>
+
+
+ </nav>
+
+
+ <main>
+ <div class="container">
+ <form class="" action="index.html" method="post">
+
+ <div class="row">
+ <div class="col-25">
+
+ </div>
+ <div class="col-75">
+
+ </div>
+ </div>
+
+
+ <div class="row">
+ <div class="col-25">
+
+ </div>
+ <div class="col-75">
+
+ </div>
+ </div>
+
+
+ <div class="row">
+ <div class="col-25">
+
+ </div>
+ <div class="col-75">
+
+ </div>
+ </div>
+
+
+ <div class="row">
+ <div class="col-25">
+ <label for="fname"> Prénom </label>
+ </div>
+ <div class="col-75">
+ <input type="text" name="fname" placeholder="Jean-Paul">
+ </div>
+ </div>
+
+
+ <div class="row">
+ <div class="col-25">
+ <label for="name"> Nom </label>
+ </div>
+ <div class="col-75">
+ <input type="text" name="name" placeholder="Sartre">
+ </div>
+ </div>
+
+
+ <div class="row">
+ <div class="col-25">
+ <label for="email"> Adresse mail </label>
+ </div>
+ <div class="col-75">
+ <input type="email" name="email" placeholder="JPSartre@gmail.com">
+ </div>
+ </div>
+
+
+ <div class="row">
+ <div class="col-25">
+ <label for="street"> Rue et Numéro </label>
+ </div>
+ <div class="col-75">
+ <input type="text" name="street" placeholder="chemin des oublis 69">
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col-25">
+ <label for="NPA"> Code Postal </label>
+ </div>
+ <div class="col-75">
+ <input type="text" name="NPA" placeholder="75000">
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col-25">
+ <label for="city"> Ville </label>
+ </div>
+ <div class="col-75">
+ <input type="text" name="city" placeholder="Paris">
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col-25">
+ <label for="cardnb"> Numéro de carte de crédit </label>
+ </div>
+ <div class="col-75">
+ <input type="tel" inputmode="numeric" required pattern="[0-9\s]{13,19}" name="cardnb" autocomplete="cc-number" maxlength="19" placeholder="xxxx xxxx xxxx xxxx">
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col-25"></div>
+ <div class="col-75">
+ <div class="euladiv">
+ <label for="eula"> <input type="checkbox" name="eula" placeholder="false"> I have read and agreed to the terms and conditions </label>
+ <input type="submit" placeholder="envoyer">
+ </div>
+ </div>
+ </div>
+
+ </form>
+
+ </div>
+ </main>
+
+
+ <footer>
+
+ </footer>
+
+</body>
+</html>