<style>
@import url('https://fonts.googleapis.com/css?family=Caveat|Montserrat&display=swap');
</style>

<header class="main-header">
  <h1 class="title">Ma boutique en ligne</h1>
  <div class="menu">
    <ul>
      <li>Lorem</li>
      <li>Ipsum</li>
      <li>Lorem</li>
      <li>Ipsum</li>
      <input type="text" class="menu_search" placeholder="Chercher un article..."/>
      <div class="menu_cart">
        <i class="fas fa-shopping-bag"></i>
        <div class="menu_cart_nb">3</div>
      </div>
      <div class="menu_user">Sidonie <i class="fas fa-sort-down"></i></div>
    </ul>
  </div>
</header>
<div class="checkout-frame">
  <div class="basket">
    <div class="basket_back-container">
      <i class="fas fa-chevron-left"></i>
      <h3>Mon panier</h3>
    </div>
    <div class="basket-total">
      <p>79.98€</p>
      <p>(dont TVA <span>15,99€</span>)</p>
    </div>
  </div><!--close basket-->
  <div class="checkout-form">
    <p>Choisissez un moyen de paiement</p>
    <ul class="paiement">
      <li><i class="fab fa-cc-visa"></i></li>
      <li><i class="fab fa-cc-mastercard"></i></li>
      <li><i class="fab fa-cc-amex"></i></li>
      <li><i class="fab fa-cc-paypal"></i></li>
    </ul>
    <form>
      <label for="">Nom figurant sur la carte</label>
      <input type="text" class="large-input" required/>
      <label for="">Numéro de la carte</label>
      <input type="text" class="large-input" required/>
      <label for="">Code de vérification <i class="fas fa-question-circle"></i></label>
      <input type="text" class="sm-input" placeholder="_ _ _" required/>
      <label>Expiration</label>
      <input type="text" placeholder="mm/aa" class="sm-input" required/>
      <input type="submit" value="Payer" />
    </form>
  </div>
</div>

/*
chosen palette: https://colorhunt.co/palette/148452
*/
:root {
  --green: #c1f6e7;
  --pink: #ffcbcb;
  --dark-pink: #bb7171;
  --aubergine: #4e3440;
}
body {
  background-color: var(--pink);
  box-sizing: border-box;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  margin: 0;
}
*, *:before, *:after {
  box-sizing: inherit;
}
ul {
  list-style-type: none;
}
input {
  font-family: 'Montserrat', sans-serif;
}
.main-header {
  background-color: rgba(187, 113, 113, 0.3);
  padding-bottom: 20px;
}
.title {
  text-align: center;
  font-size: 3.5rem;
  color: var(--aubergine);
  font-family: 'Caveat', cursive;
  margin-top: 0;
}
.menu li,
.menu_search,
.menu_user,
.menu_cart {
  cursor: pointer;
}
.menu ul,
.checkout-form ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.menu li {
  font-size: 0.9rem;
  font-weight: bold;
}
.menu {
  color: var(--aubergine);
  width: 70%;
  margin: auto;
}
.menu_search {
  width: 200px;
  height: 30px;
  border-radius: 20px;
  background-color: white;
  border: none;
  padding-left: 10px;
}
.menu_user {
  font-size: 1.2rem;
  font-family: 'Caveat', cursive;
  background-color: var(--pink);
  padding: 8px 16px;
  border-radius: 60px;
}
.menu_user .fas {
  font-size: 1.5rem;
}
.menu_cart {
  position: relative;
}
.menu_cart .fas {
  font-size: 2.2rem;
  color: var(--green);
}
.menu_cart_nb {
  width: 17px;
  height: 17px;
  position: relative;
  text-align: center;
  color: var(--aubergine);
  top: -18px;
  left: 18px;
  background-color: white;
  border-radius: 180px;
}
.basket h3 {
  cursor: pointer;
  font-family: 'Caveat', cursive;
  font-size: 2.5rem;
}
.checkout-frame {
  background-color: white;
  color: black;
  width: 70%;
  margin: 15vh auto;
  display: flex;
  justify-content: space-around;
  border-radius: 5px;
  padding: 30px;
}
.checkout-form form,
.basket{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.checkout-form form {
  justify-content: center;
}
.basket {
  justify-content: space-around;
}
.basket {
  width: 30%;
  height: 300px;
  border: 4px solid var(--dark-pink);
  border-radius: 5px;
  margin: auto;
}
.basket_back-container {
  width: 100%;
  display: flex;
}
.basket_back-container .fas {
  font-size: 2.5rem;
  cursor: pointer;
  margin-left: 40px;
  margin-right: 55px;
  display: flex;
  align-items: center;
}
.basket_back-container .fas:hover {
  color: var(--dark-pink);
}
.basket-total {
  text-align: center;
}
.basket-total p:first-child {
  font-size: 3.5rem;
  color: var(--dark-pink);
  font-weight: 600;
  font-family: 'Caveat', cursive;
  margin: 0;
}
.basket-total p:last-child {
  font-size: 0.8rem;
  font-style: italic;
}
.checkout-form {
  width: 65%;
}
.checkout-form p {
  text-align: center;
}
.paiement {
  width: 70%;
  margin: auto;
  color: var(--aubergine);
}
.checkout-form .fab {
  font-size: 2.5rem;
  cursor: pointer;
}
.checkout-form .fa-cc-visa {
  color: var(--pink);
}
.checkout-form form {
  margin-top: 50px;
}
.checkout-form input {
  padding: 7px;
  margin: 10px 0;
  border-radius: 5px;
  border: 1px solid black;
}
.large-input {
  width: 300px;
}
.checkout-form label {
  font-size: 0.9rem;
}
.sm-input {
  width: 70px;
}
input[type="submit"] {
  width: 120px;
  background-color: var(--dark-pink);
  font-family: 'Caveat', cursive;
  font-size: 2.1rem;
  border: none;
  box-shadow: 0 2px 3px var(--aubergine);
  cursor: pointer;
}
.fa-question-circle {
  cursor: pointer;
}