From 1d7386db3f24a77da126902098e96496b51f5c19 Mon Sep 17 00:00:00 2001
From: Leon Xu <dcwinfield362@gmail.com>
Date: Thu, 5 May 2022 21:13:51 -0700
Subject: [PATCH] doc: add checkout ads and texts with its styles

---
 src/Checkout/Checkout.css | 17 +++++++++++++++++
 src/Checkout/Checkout.js  | 18 +++++++++++++++++-
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/Checkout/Checkout.css b/src/Checkout/Checkout.css
index e69de29..a919daa 100644
--- a/src/Checkout/Checkout.css
+++ b/src/Checkout/Checkout.css
@@ -0,0 +1,17 @@
+.checkout {
+  display: flex;
+  padding: 20px;
+  background-color: white;
+  height: max-content;
+}
+
+.checkout__ad {
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.checkout__title {
+  margin-right: 10px;
+  padding: 10px;
+  border-bottom: 1px solid lightgray;
+}
\ No newline at end of file
diff --git a/src/Checkout/Checkout.js b/src/Checkout/Checkout.js
index a7ceda2..95d420e 100644
--- a/src/Checkout/Checkout.js
+++ b/src/Checkout/Checkout.js
@@ -2,7 +2,23 @@ import React from "react";
 import "./Checkout.css";
 
 function Checkout() {
-  return <section className="checkout">Checkout</section>;
+  return (
+    <section className="checkout">
+      <article className="checkout__left">
+        <img
+          className="checkout__ad"
+          src="https://images-na.ssl-images-amazon.com/images/G/02/UK_CCMP/TM/OCC_Amazon1._CB423492668_.jpg"
+          alt="amazon ads"
+        />
+
+        <article>
+          <h2 className="checkout__title">Your Shopping Basket</h2>
+        </article>
+      </article>
+
+      <article className="checkout__right"></article>
+    </section>
+  );
 }
 
 export default Checkout;