Merge branch 'dev' into simplified-grid

maitrakhatri · Feb 9, 2022 · eb25d96 · eb25d96
2 parents 977ab96 + 6d7e083
commit eb25d96
Show file tree

Hide file tree

Showing 6 changed files with 185 additions and 4 deletions.
diff --git a/CSS/Components/card/card.css b/CSS/Components/card/card.css
@@ -1,3 +1,8 @@
+@import url(../../style.css);
+@import url(../badge/badge.css);
+@import url(../image/image.css);
+@import url(../button/button.css);
+
 .card {
     display: flex;
     flex-direction: column;
@@ -84,4 +89,78 @@
 
 .card-with-badge {
     position: relative;
+}
+
+/* PRODUCT CARD  */
+
+.product-card {
+    display: flex;
+    flex-direction: column;
+    width: min-content;
+    gap: 1rem;
+}
+
+.product-image {
+    max-height: 320px;
+}
+
+.product-image-container {
+    position: relative;
+}
+
+.product-card-body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+    text-align: center;
+}
+
+.product-action, .product-action * {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.product-price {
+    font-weight: bolder;
+    font-size: large;
+}
+
+.product-name {
+    margin-right: 0.5rem;
+    margin-left: 0.5rem;
+}
+
+.like-product {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    z-index: 1;
+    border-radius: 50%;
+    padding: 0.25rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.like-product img {
+    width: 24px;
+    height: 24px;
+}
+
+.product-horizontal {
+    flex-direction: row;
+    width: fit-content;
+}
+
+.product-horizontal .product-card-body {
+    margin: 1rem;
+    justify-content: space-around;
+    align-items: flex-start;
+}
+
+.product-horizontal .product-name {
+    margin: 0;
 }
diff --git a/CSS/Components/card/card.html b/CSS/Components/card/card.html
@@ -5,15 +5,16 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>card</title>
+    <script src="https://kit.fontawesome.com/d0623050fc.js" crossorigin="anonymous"></script>
     <link rel="stylesheet" href="card.css">
     <style>
 
         /* ONLY FOR DISPLAY PURPOSES. NOT PART OF COMPONENT */
 
         body {
             margin: 2rem;
-            display: inline-flex;
-            flex-flow: row wrap;
+            /* display: inline-flex;
+            flex-flow: row wrap; */
         }
 
         body > div {
@@ -155,5 +156,49 @@
 
     </div>
 
+    <h1> Ecom Card </h1>
+
+    <!-- <a href="https://www.flaticon.com/free-icons/heart" title="heart icons">Heart icons created by Kiranshastry - Flaticon</a> -->
+
+    <div class="product-card bg-gray">
+
+        <div class="product-image-container">
+            <img class="product-image" src="../../../assets/batmanPoster.jpg" alt="card image">
+            <span class="like-product bg-gray"><img src="../../../assets/heart-filled.png" alt=""></span>
+        </div>
+
+        <div class="product-card-body">
+            <div class="product-name">
+                Batman Ridller-Unmask Poster
+            </div>
+            <div class="product-price">
+                499 INR
+            </div>
+            <div class="product-action">
+                <button class="btn btn-yellow">Add to Cart</button>
+            </div>
+        </div>
+    </div>
+
+    <div class="product-card bg-gray product-horizontal">
+
+        <div class="product-image-container">
+            <img class="product-image" src="../../../assets/batmanPoster.jpg" alt="card image">
+        </div>
+
+        <div class="product-card-body">
+            <div class="product-name">
+                Batman Ridller-Unmask Poster
+            </div>
+            <div class="product-price">
+                499 INR
+            </div>
+            <div class="product-action">
+                <button class="btn btn-yellow">Add to Cart</button>
+                <button class="btn btn-outline-lightblue">Save to Wishlist</button>
+            </div>
+        </div>
+    </div>
+
 </body>
 </html>
diff --git a/assets/batmanPoster.jpg b/assets/batmanPoster.jpg
diff --git a/assets/heart-filled.png b/assets/heart-filled.png
diff --git a/assets/heart-outline.png b/assets/heart-outline.png
diff --git a/docs/components.html b/docs/components.html
@@ -496,6 +496,63 @@ <h3 class="sub-section-title">Card with Text Overlay</h3>
 
                 </div>
 
+                <h3 class="sub-section-title">E-commerce Product Card</h3>
+
+                <div class="component-container">
+                    <div class="product-card bg-gray">
+
+                        <div class="product-image-container">
+                            <img class="product-image" src="../assets/batmanPoster.jpg" alt="card image">
+                            <span class="like-product bg-gray"><img src="../assets/heart-filled.png" alt=""></span>
+                        </div>
+
+                        <div class="product-card-body">
+                            <div class="product-name">
+                                Batman Ridller-Unmask Poster
+                            </div>
+                            <div class="product-price">
+                                499 INR
+                            </div>
+                            <div class="product-action">
+                                <button class="btn btn-yellow">Add to Cart</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="code-snippets">
+                    <iframe src="https://carbon.now.sh/embed?bg=rgba%28255%2C255%2C255%2C1%29&t=seti&wt=none&l=htmlmixed&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%253Cdiv%2520class%253D%2522product-card%2522%253E%250A%250A%2520%2520%2520%2520%253Cdiv%2520class%253D%2522product-image-container%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cimg%2520class%253D%2522product-image%2522%2520src%253D%2522...%2522%2520alt%253D%2522product%2520name%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cspan%2520class%253D%2522like-product%2522%253E%253Cimg%2520src%253D%2522...%2522%2520alt%253D%2522like%2522%253E%253C%252Fspan%253E%250A%2520%2520%2520%2520%253C%252Fdiv%253E%250A%250A%2520%2520%2520%2520%253Cdiv%2520class%253D%2522product-card-body%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522product-name%2522%253E%2520Product%2520Name%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522product-price%2522%253E%2520Product%2520Price%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522product-action%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cbutton%2520class%253D%2522btn%2520btn-yellow%2522%253EAdd%2520to%2520Cart%253C%252Fbutton%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%253C%252Fdiv%253E%250A%253C%252Fdiv%253E" style="width: 706px; height: 467px; border:0; transform: scale(1); overflow:hidden;" sandbox="allow-scripts allow-same-origin"></iframe>
+                </div>
+
+                <h3 class="sub-section-title">E-commerce Horizontal Product Card</h3>
+
+                <div class="component-container">
+                    <div class="product-card product-horizontal bg-gray">
+
+                        <div class="product-image-container">
+                            <img class="product-image" src="../assets/batmanPoster.jpg" alt="card image">
+                        </div>
+
+                        <div class="product-card-body">
+                            <div class="product-name">
+                                Batman Ridller-Unmask Poster
+                            </div>
+                            <div class="product-price">
+                                499 INR
+                            </div>
+                            <div class="product-action">
+                                <button class="btn btn-yellow">Add to Cart</button>
+                                <button class="btn btn-outline-lightblue">Save to Wishlist</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="code-snippets">
+                    <iframe src="https://carbon.now.sh/embed?bg=rgba%28255%2C255%2C255%2C1%29&t=seti&wt=none&l=htmlmixed&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%253Cdiv%2520class%253D%2522product-card%2520product-horizontal%2522%253E%250A%250A%2520%2520%2520%2520%253Cdiv%2520class%253D%2522product-image-container%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cimg%2520class%253D%2522product-image%2522%2520src%253D%2522...%2522%2520alt%253D%2522product%2520name%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cspan%2520class%253D%2522like-product%2522%253E%253Cimg%2520src%253D%2522...%2522%2520alt%253D%2522like%2522%253E%253C%252Fspan%253E%250A%2520%2520%2520%2520%253C%252Fdiv%253E%250A%250A%2520%2520%2520%2520%253Cdiv%2520class%253D%2522product-card-body%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522product-name%2522%253E%2520Product%2520Name%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522product-price%2522%253E%2520Product%2520Price%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522product-action%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cbutton%2520class%253D%2522btn%2520btn-yellow%2522%253EAdd%2520to%2520Cart%253C%252Fbutton%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2509%253Cbutton%2520class%253D%2522btn%2520btn-outline-lightblue%2522%253EAdd%2520to%2520Wishlist%253C%252Fbutton%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%253C%252Fdiv%253E%250A%253C%252Fdiv%253E" style="width: 791px; height: 485px; border:0; transform: scale(1); overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe>
+
+                </div>
+
         </div>
 
         <div id="image" class="section">
@@ -839,8 +896,8 @@ <h2 class="section-title">Slider</h2>
                 <iframe src="https://carbon.now.sh/embed?bg=rgba%28255%2C255%2C255%2C1%29&t=seti&wt=none&l=htmlmixed&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%253Cinput%2520type%253D%2522range%2522%2520min%253D%2522100%2522%2520max%253D%25221000%2522%2520step%253D%2522100%2522%2520id%253D%2522slider%2522%253E%250A%253Cdiv%2520id%253D%2522slider-value%2522%253E" style="width: 700px; height: 206px; border:0; transform: scale(1); overflow:hidden;" sandbox="allow-scripts allow-same-origin"></iframe>
             </div>
 
-            <h3 class="sub-section-title">JS used in Slider</h3>
-            <p>P.S. you need not to attach it. It's already included with gozo JS package</p>
+            <h3>JS used in Slider</h3>
+            <p>P.S. you need to attach this code seperately in a JS file or script section</p>
 
             <div class="code-snippets">
                 <iframe src="https://carbon.now.sh/embed?bg=rgba%28255%2C255%2C255%2C1%29&t=seti&wt=none&l=javascript&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=const%2520slider%2520%253D%2520document.getElementById%28%2522slider%2522%29%253B%250Aconst%2520output%2520%253D%2520document.getElementById%28%2522slider-value%2522%29%253B%250Aoutput.innerHTML%2520%253D%2520slider.value%253B%2520%252F%252F%2520Display%2520the%2520default%2520slider%2520value%250A%250A%252F%252F%2520Update%2520the%2520current%2520slider%2520value%2520%28each%2520time%2520you%2520drag%2520the%2520slider%2520handle%29%250Aslider.addEventListener%28%2522input%2522%252C%2520%28%29%2520%253D%253E%2520output.innerText%2520%253D%2520slider.value%2520%29%253B" style="width: 1024px; height: 473px; border:0; transform: scale(1); overflow:hidden;"sandbox="allow-scripts allow-same-origin"></iframe>