UI updated

ThakareSakshi · Nov 18, 2023 · c80bbd8 · c80bbd8
1 parent cf03fcc
commit c80bbd8
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 27 deletions.
diff --git a/Sanket_Mahadik/index.html b/Sanket_Mahadik/index.html
@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="style.css" />
 
     <!-- for dwonload pdf -->
+    <script src="https://rawgit.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js"></script>
 </head>
 
 <body>
@@ -18,10 +19,7 @@
 
         <form class="mainForm" id="downloadPDF">
             <div class="row">
-
-
                 <!-- top section date , invoice no  -->
-
                 <div class="card1" id="card1">
                     <div class="dateInvoice">
                         <div class="dateSection">

diff --git a/Sanket_Mahadik/style.css b/Sanket_Mahadik/style.css
@@ -7,6 +7,7 @@
 body {
     margin: 0;
     padding: 0;
+    width: 100vw;
     font-family: "Arial", sans-serif;
     background-color: #cdcaca;
     display: flex;
@@ -24,13 +25,16 @@ body {
 }
 
 .container {
-    width: 90%;
+    width: 100%;
     height: 90vh;
     overflow: hidden;
+    display: flex;
+    justify-content: center;
 }
 
 .mainForm {
     display: flex;
+    justify-content: center;
     width: 97%;
     height: 100%;
     justify-content: space-between;
@@ -39,30 +43,16 @@ body {
 
 .row {
     display: flex;
+    justify-content: center;
     width: 97%;
     height: 100%;
     gap: 2rem;
+    flex-wrap: nowrap;
 }
 
 .card1 {
     display: flex;
-    width: 100%;
-    flex-direction: column;
-    background-color: #fff;
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
-    transition: box-shadow 0.3s;
-    overflow: scroll;
-}
-
-.card1:hover {
-    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
-}
-
-.card1 {
-    display: flex;
-    width: 100%;
+    width: 40%;
     flex-direction: column;
     background-color: #fff;
     padding: 20px;
@@ -72,15 +62,11 @@ body {
     overflow: scroll;
 }
 
-.card1:hover {
-    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
-}
-
 .card2 {
     display: flex;
     justify-content: center;
-    width: 25%;
-    height: 40%;
+    width: 12%;
+    height: 30vh;
     background-color: #ffffff;
     padding: 10px;
     border-radius: 10px;
@@ -241,4 +227,17 @@ textarea {
     padding: 10px;
     margin: 10px;
     line-height: 1.2rem;
+}
+
+.mb-3 select {
+    width: 80%;
+}
+
+@media screen and (max-width: 720px) {
+    .card1 {
+        width: 85vw;
+    }
+    .row {
+        flex-direction: column;
+    }
 }