e commerce project

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

CSS/cart.css

@@ -0,0 +1,116 @@
+/* resets and commons starts here  */
+:root{
+    --font-size:1.5rem;
+}
+
+*{ 
+     margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-weight: 400;
+    text-decoration: none;
+    list-style-type: none;
+    outline: none;
+}
+
+html{
+    background-color:#e6eaee;
+    scroll-behavior: smooth;
+    font-size: 62.5;
+    font-family: 'Rajdhani', sans-serif;
+}
+body{
+    width: 60rem;
+    margin: auto;
+}
+.chekout-form {
+    display: flex;
+    flex-wrap: wrap;
+}
+  .payment-information{
+    flex:70%
+  }
+  .cart-information{
+    flex:30%;
+  }
+  .payment-ditails{
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+  }
+  .main-form {
+    flex: 50%;
+  }
+
+  input[type=text], input[type=date] {
+    width: 100%;
+    margin-bottom: 20px;
+    padding: 12px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+  }
+
+  label {
+    margin-bottom: 10px;
+    display: block;
+  }
+
+  .btn {
+    background-color:#C27664;
+    color:black;
+    font-weight: 600;
+    padding: 12px;
+    margin: 10px 0;
+    border: none;
+    width: 100%;
+    border-radius: 3px;
+    cursor: pointer;
+    font-size: 17px;
+  }
+
+  .container {
+    background-color: white;
+    padding: 5px 20px 15px 20px;
+    border:lightgray 1px solid ;
+    border-radius: 3px;
+  }
+  h2{
+    margin-bottom: 1rem;
+    font-size: var(--font-size);
+    font-weight: 600;
+  }
+  span.price {
+    float: right;
+    color: grey;
+  }
+  .table__info{
+    width: 100%;
+    border-collapse: collapse;
+  }
+  td,tr{
+    border-bottom: 1px solid #ddd;
+    text-align: left;
+    padding: 1rem;
+  }
+  p{
+    font-size: var(--font-size);
+    margin-bottom: 1rem;
+  }
+/* resposiveness section starts here  */
+@media screen and (max-width:992px) {
+
+}
+
+@media screen and (max-width:760px) {
+
+}
+
+@media screen and (max-width:600px) {
+  .chekout-form {
+    flex-direction: column-reverse;
+}
+.cart-information{
+  margin-bottom: 2rem;
+}
+}
+/* resposiveness section ends here  */

CSS/login.css

@@ -0,0 +1,118 @@
+/* resets and commons starts here  */
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-weight: 400;
+    text-decoration: none;
+    list-style-type: none;
+    outline: none;
+}
+
+html{
+    background-color:#e6eaee;
+    scroll-behavior: smooth;
+    font-size: 62.5;
+    font-family: 'Rajdhani', sans-serif;
+}
+body{
+    width: 50rem;
+    margin: auto;
+}
+/* reset and commons ends here  */
+.box{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+   }
+#container{
+    display: flex;
+    flex-direction: column;
+    background-color: #fff;
+    width: 80%;
+    margin-top: 10rem;
+    height: 45vh;
+
+}
+img{
+width: 100px;
+margin-bottom: 1rem;
+}
+.col-15{
+    flex:15%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin:0 1rem;
+    gap: 1rem;
+}
+.col-30{
+    flex: 30%;
+    margin: 0 1rem;
+    display: flex;
+    align-items: center;
+}
+.col-40{
+    flex: 40%;
+    display: flex;
+    flex-direction: column;
+}
+.colum{
+    display: flex;
+    flex-direction: column;
+    align-items:center;
+    margin: 1rem 2rem;
+}
+.row{
+    display: flex;
+    justify-content: space-around;
+    gap: 1rem;
+    width: 100%;
+  }
+.sign-btn{
+    background-color:#C27664;
+    color: black;
+    font-weight: 600;
+    padding: 12px;
+    border: none;
+    width: 100%;
+    border-radius: 3px;
+    cursor: pointer;
+    font-size: 17px;
+}
+.btn{
+    display: flex;
+    justify-content:space-evenly;
+    align-items: center;
+    background-color:#C27664;
+    color:white;
+    font-weight: 600;
+    padding: 6px;
+    border: none;
+    width: 100%;
+    border-radius: 3px;
+    cursor: pointer;
+    font-size: 1.5rem;
+}
+input[type=email],
+input[type=password] {
+    width: 100%;
+    margin-bottom: 20px;
+    padding: 12px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+  }
+a{
+    color: black;
+ }
+
+ input[type=submit]{
+    background-color:#84D2C5;
+    color:black;
+    padding: 12px;
+    border: none;
+    width: 40%;
+    border-radius: 3px;
+    cursor: pointer;
+    font-size: 17px;
+ }