Add mini camera

src/css/addtocart.css

@@ -0,0 +1,15 @@
+.popup{
+    position: fixed;
+    top:100px;
+    left: 0px;
+    width:100vw;
+    height: 100vw;
+    background: rgba(0,0,0,0.7);
+    z-index: 1;
+}
+
+.popup .content {
+    position: absolute;
+    top: 50%;
+    left: 50%
+}

src/css/cart.css

@@ -0,0 +1,92 @@
+body{
+    font-family:'Courier New', Courier, monospace;
+    margin: 0;
+}
+
+.container{
+    margin: auto;
+    text-align: center;
+    position: fixed;
+    left: 70%;
+    top: 5%;
+
+
+}
+
+.container h1{
+    left: 70%;
+    top: 0.5%;
+    position: fixed;
+
+}
+
+
+svg{
+    width: 30px;
+    left: 90%;
+    top:1.5%;
+    position: fixed;
+}
+
+
+
+header .icon-cart span{
+    display: flex;
+    width: 30px;
+    height: 30px;
+    background-color: red;
+    justify-content: center;
+    align-items: center;
+    color:#fff;
+    border-radius: 50%;
+    position: fixed;
+    top: 4%;
+    right: 2px;
+}
+
+.cartTab{
+    width: 300px;
+    background-color: #35343200;
+    color: #eee;
+    position: fixed;
+    inset: 0 0 0 auto;
+    left: 80%;
+
+}
+
+body .showCart .cartTab{
+    inset: 0 0 0 auto;
+}
+
+body.showCart
+
+.cartTab .listCart .item img{
+    width: 100%;
+}
+
+.cartTab .listCart .item{
+    align-items: center;
+}
+
+.listCart .quantity span{
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    background-color: #eee;
+    color: #555;
+    border-radius: 50%;
+}
+
+.listCart{
+    overflow: auto;
+}
+
+.listCart::-webkit-scrollbar{
+    width: 0;
+}
+
+
+
+
+
+

src/css/examples.css

@@ -1,3 +1,6 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
 * {
   margin: 0;
   padding: 0;
@@ -24,3 +27,72 @@ div#info-text {
 div#info-text p {
   margin-bottom: 16px;
 }
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
+
+
+
+
+
+.btn{
+    padding: 10px 60px;
+    background: #fff;
+    border: 0;
+    outline: none;
+    cursor: pointer;
+    font-size: 22px;
+    font-weight: 500;
+    border-radius: 10px;
+    transition: transform 0.2s;
+}
+
+.btn:active{
+  transform: scale(0.95);
+}
+
+.popup{
+  width: 400px;
+  background: #fff;
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+  position: fixed;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0.1);
+  text-align: center;
+  padding: 0 30px 60px;
+  color: #333;
+  visibility: hidden;
+  transition: all 0.4s ease-in-out;
+}
+
+.open-popup{
+  visibility: visible;
+  top: 50%;
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.popup img{
+  width: 100px;
+}
+
+.popup h2{
+  font-size: 38px;
+  font-weight: 500;
+  margin: 30px 0 10px;
+}
+
+.popup button{
+  width: 100%;
+  margin-top: 50px;
+  padding: 10px 0;
+  background-color: #e02189;
+  color: #fff;
+  border: 0;
+  outline: none;
+  font-size: 18px;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px rgba(0,0,0,0.2);
+}
+