diff --git a/index.html b/index.html new file mode 100644 index 0000000..cfbc227 --- /dev/null +++ b/index.html @@ -0,0 +1,354 @@ + + + + + + + + + + + + + + + + Hello, world! + + +
+ +
+
+
drop-in
+ +
+ +
+
+ + +
+
+

Design Your Own Checkout

+ +
+ + +
+ +
+ +
+
+

Location

+
+
+ +
+

+ Choose your shopper location and language +

+
+ +
+

Shopper Location

+
+ +
three
+
+
+ +
+ +
+

Language

+
+ +
three
+
+
+
+ + +
+
+

Location

+
+
+ +
+

+ Choose your shopper location and language +

+
+ +
+

Shopper Location

+
+ +
three
+
+
+ +
+ +
+

Language

+
+ +
three
+
+
+
+ + +
+
+

Location

+
+
+ +
+

+ Choose your shopper location and language +

+
+ +
+

Shopper Location

+
+ +
three
+
+
+ +
+ +
+

Language

+
+ +
three
+
+
+
+ + +
+ +
+
+

Location2

+
+
+ +
+

+ Choose your shopper location and language +

+
+ +
+

Shopper Location

+
+ +
three
+
+
+ +
+ +
+

Language

+
+ +
three
+
+
+
+ + +
+
+

Location

+
+
+ +
+

+ Choose your shopper location and language +

+
+ +
+

Shopper Location

+
+ +
three
+
+
+ +
+ +
+

Language

+
+ +
three
+
+
+
+ + +
+
+

Location

+
+
+ +
+

+ Choose your shopper location and language +

+
+ +
+

Shopper Location

+
+ +
three
+
+
+ +
+ +
+

Language

+
+ +
three
+
+
+
+ + +
+ bye +
+
+
+
+
+
+
+ + + + + + + + diff --git a/main.css b/main.css new file mode 100644 index 0000000..e213029 --- /dev/null +++ b/main.css @@ -0,0 +1,90 @@ +:root { + --main-green: #0abf53; + --main-grey: #f3f5f9; + --main-text: #00112c; + --secondary-text: #ffffff; + --main-font: "Roboto", sans-serif; +} + +html, +body { + height: 100%; + font-family: "Roboto", sans-serif; + margin: 0; + padding: 0; +} + +.row { + height: 100%; +} + +.dropIn-UI { + background-color: var(--secondary-text); +} + +.config-UI { + background-color: var(--main-grey); + /* border-top-left-radius: 20px; + border-bottom-left-radius: 20px; */ + box-shadow: 1px 1px 5px 1px rgb(207, 207, 207); +} + +.config-Title { + font-family: "Roboto", sans-serif; + font-weight: 400; + font-weight: bold; +} + +.tab-options { + color: var(--main-text); + font-size: 10px; + margin-top: 1.5rem; +} + +.config-content-panel { + padding: 1rem; +} + +.titleFonts { + font-family: var(--main-font); + font-weight: 600; + font-size: 20px; +} + +.textFonts { + font-family: var(--main-font); + font-size: 12px; +} + +#test-cards-btn { + width: 15%; + margin-left: 2%; + padding: 0; + height: 0%; + background-color: rgb(6, 6, 46); + color: var(--main-grey); + border-top-left-radius: 10px; + border-top-right-radius: 10px; +} + +.test-cards-display { + height: 10%; + width: 30%; + background-color: rgb(6, 6, 46); +} + +.collapseText { + color: var(--main-grey); + font-family: var(--main-font); + font-size: 1rem; + font-weight: 400; +} + +.testCardBtn { + font-size: 1rem; + font-weight: 300; + margin-left: 5px; + margin-bottom: 0; + padding-bottom: 0; + margin-top: 10px; +}