diff --git a/client/css/cart.css b/client/css/cart.css new file mode 100644 index 0000000000000000000000000000000000000000..fb1e4b53d146bae71a5d4760f992888df3b66426 --- /dev/null +++ b/client/css/cart.css @@ -0,0 +1,88 @@ +@import url('https://fonts.googleapis.com/css?family=Inter'); + +*{ + margin: 0; + padding: 0; + font-family: Inter; + box-sizing: border-box; + transition: 0.5; +} + +.container{ + position: relative; + max-width: 100%; + height: 100vh; + mix-blend-mode: multiply; + background-position: center; + background-size: cover; + display: block; + place-items: center; +} + +.cart-group{ + padding-top: 10%; + display: block; + /* background-color: red; */ +} + +.cart-group h1{ + margin-bottom: 10px; + margin-left: 5%; + font-size: 30px; +} + +.cart-list{ + /* border-style: solid; */ + border-radius: 10px; + margin-left: 5%; + margin-right: 5%; + display: block; +} +.item{ + margin: 15px; + border-radius: 10px; + background-color: #eaeaea; + padding: 1%; + display: flex; +} +.item-picture-group{ + display:inline-block; + min-width: 20%; + min-height: 15vw; + background-color: azure; + border-radius: 10px; + margin: 10px; +} +.item-text-fields{ + display:inline-block; +} +/* .item-picture{} */ +.item-label{ + display: block; + margin: 10px; +} + +.button-field { + display:flex; + padding: 10px; + justify-content: right; +} + +#checkout-button { + cursor: pointer; + color: white; + background-color: rgb(137, 62, 137); + min-width: 25%; + height: 10vh; + font-size: 20px; + border-radius : 10px; + border-color: transparent; + margin-right: 15px; + margin-bottom: 15px; +} + +@media screen and ((max-width: 400px) or (max-height: 750px)) { + .cart-group{ + height: 750px; + } +} \ No newline at end of file diff --git a/client/protoype/cart.html b/client/protoype/cart.html new file mode 100644 index 0000000000000000000000000000000000000000..8cbe2717b8d0c81bc849514821ce1d867900a38c --- /dev/null +++ b/client/protoype/cart.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> + <head> + <meta name="viewport" content="width=device-width, initial scale=1.0"> + <title>Cart</title> + <link rel="stylesheet" href="../css/cart.css"> + <link rel="stylesheet" href="../css/navbar.css"> + <script src="https://kit.fontawesome.com/8505941c5b.js" crossorigin="anonymous"></script> + <script src="../js/navbar.js"></script> + </head> + <body> + <div class="container"> + <div id = "tabgroup"> + <script> + addnavbar(); + </script> + </div> + <div class="cart-group"> + <h1> + Cart + </h1> + <div class="cart-list"> + <div class="item"> + <div class="item-picture-group"> + <image src="#" class="item-picture"></image> + </div> + <div class="item-text-fields"> + <label class="item-label">Name</label> + <label class="item-label">Quantity</label> + <label class="item-label">Price</label> + </div> + </div> + <div class="item"> + <div class="item-picture-group"> + <image src="#" class="item-picture"></image> + </div> + <div class="item-text-fields"> + <label class="item-label">Name</label> + <label class="item-label">Quantity</label> + <label class="item-label">Price</label> + </div> + </div> + <div class="item"> + <div class="item-picture-group"> + <image src="#" class="item-picture"></image> + </div> + <div class="item-text-fields"> + <label class="item-label">Name</label> + <label class="item-label">Quantity</label> + <label class="item-label">Price</label> + </div> + </div> + <!-- contains item divs according to data --> + </div> + <div class="button-field"> + <button id="checkout-button"> + Checkout + </button> + </div> + </div> + </div> + </body> +</html> \ No newline at end of file