From ebd8b25561771052b41698db3eca7992dea8a82c Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Fri, 26 Mar 2021 00:04:02 +0530 Subject: [PATCH 01/83] feat: added avatar, badge and card component --- components/avatar.css | 63 ++++ components/avatar.html | 54 ++++ components/badge.css | 119 ++++++++ components/badge.html | 279 ++++++++++++++++++ components/cards.css | 186 ++++++++++++ components/cards.html | 186 ++++++++++++ index.css | 0 index.html | 14 + resources/avatar-svgrepo-com.svg | 125 ++++++++ resources/bell.svg | 1 + resources/heart.svg | 47 +++ resources/heart1.svg | 1 + .../iconfinder_christmas_line-15_2636386.svg | 3 + resources/iconfinder_heart_2561448.svg | 1 + .../iconfinder_shopping-cart_2561279.svg | 1 + resources/man.svg | 194 ++++++++++++ resources/prism.css | 204 +++++++++++++ resources/prism.js | 10 + resources/shopping-cart.svg | 56 ++++ resources/x.svg | 1 + 20 files changed, 1545 insertions(+) create mode 100644 components/avatar.css create mode 100644 components/avatar.html create mode 100644 components/badge.css create mode 100644 components/badge.html create mode 100644 components/cards.css create mode 100644 components/cards.html create mode 100644 index.css create mode 100644 index.html create mode 100644 resources/avatar-svgrepo-com.svg create mode 100644 resources/bell.svg create mode 100644 resources/heart.svg create mode 100644 resources/heart1.svg create mode 100644 resources/iconfinder_christmas_line-15_2636386.svg create mode 100644 resources/iconfinder_heart_2561448.svg create mode 100644 resources/iconfinder_shopping-cart_2561279.svg create mode 100644 resources/man.svg create mode 100644 resources/prism.css create mode 100644 resources/prism.js create mode 100644 resources/shopping-cart.svg create mode 100644 resources/x.svg diff --git a/components/avatar.css b/components/avatar.css new file mode 100644 index 0000000..410ae57 --- /dev/null +++ b/components/avatar.css @@ -0,0 +1,63 @@ +* { + box-sizing: border-box; +} + +:root { + --border-color: #e5e5e5; +} + +.avatar { + display: flex; + padding: 1rem; + /* border: 1px solid black; */ + flex-direction: column; +} + +.avatar-display { + display: flex; + /* justify-content: flex-start; */ + flex-wrap: wrap; + align-items: center; + border: 1px solid var(--border-color); + padding: 1rem; + border-bottom: 0; +} + +.language-markup { + margin: 0; +} + +.img-big { + max-width: 96px; +} + +.img-medium { + max-width: 64px; +} + +.img-small { + max-width: 48px; +} + +.img-ex-small { + max-width: 32px; +} +/* utils */ + +.img-utils { + margin: 1.7rem; + width: 100%; + border-radius: 50%; +} + +/* .img-distance { +} + +.justify-center { +} + +.img-responsive { +} + +.is-round { +} */ diff --git a/components/avatar.html b/components/avatar.html new file mode 100644 index 0000000..9d60770 --- /dev/null +++ b/components/avatar.html @@ -0,0 +1,54 @@ + + + + + + + Document + + + + + +
+
+ avatar-small + avatar-medium + avatar-medium + avatar-extra-small +
+ 
+           
+        <img class="img-big img-utils" alt="avatar-big" src="../resources/man.svg" width="128" height="128" />
+        <img class="img-medium img-utils" alt="avatar-medium" src="../resources/man.svg" width="96" height="96"/>
+        <img class="img-small img-utils" alt="avatar-small" src="../resources/man.svg" width="64" height="64 "/>
+        <img class="img-ex-small img-utils" alt="avatar-extra-small" src="../resources/man.svg" width="32" height="32" />
+
+
+ + + diff --git a/components/badge.css b/components/badge.css new file mode 100644 index 0000000..f4d91ed --- /dev/null +++ b/components/badge.css @@ -0,0 +1,119 @@ +@import url("https://fonts.googleapis.com/css2?family=Inter&family=Ubuntu&display=swap"); + +:root { + --presence-color: #3aa169; + --badge-border-color: #fff; + --border-color: #e5e5e5; +} + +.badge-icon-container, +.avatar-container { + display: flex; + flex-direction: column; + border: 1px solid var(--border-color); + border-bottom: 0; + margin-bottom: 2rem; + border-radius: 5px; +} + +.badge-div { + display: flex; + border-bottom: 1px solid var(--border-color); +} + +.badge-icon { + position: relative; + text-decoration: none; + display: inline-block; + padding: 2rem; + border-radius: 50%; + color: #111827; +} + +.num-badge { + position: absolute; + background-color: #f16565; + color: white; + padding: 0.2rem; + border: 2px solid white; + border-radius: 60%; + font-family: Ubuntu; + font-size: 0.8rem; + font-weight: 600; + bottom: 2.8rem; + right: 1rem; +} + +.cart-badge { + background-color: #f16565; + color: white; +} + +.notif-badge { + background-color: #2a77f0; +} + +/* avatar component */ + +.avatar-comp { + position: relative; + margin: 1rem; +} + +.avatar-badge { + position: absolute; + display: inline-block; + min-width: 1rem; + min-height: 1rem; + background-color: var(--presence-color); + border-radius: 50%; + border: 2px solid var(--badge-border-color); + bottom: 0.3rem; +} + +.avatar-badge-large { + min-height: 1.8rem; + min-width: 1.8rem; + right: 1.8rem; +} + +.avatar-badge-medium { + min-height: 1.3rem; + min-width: 1.3rem; + right: 2.8rem; +} + +.avatar-badge-small { + right: 3.4rem; +} + +.avatar-badge-ex-small { + min-height: 0.7rem; + min-width: 0.7em; + right: 3.9rem; +} + +.avatar-display { + display: flex; + justify-content: flex-start; + flex-wrap: wrap; + align-items: center; + padding: 1rem; + border-bottom: 1px solid var(--border-color); + /* justify-content: center; */ +} + +.img-utils { + width: 100%; + border-radius: 50%; +} + +/* setting some attributes of code block */ +.language-markup { + max-height: 100px; +} + +div.code-toolbar > .toolbar { + top: 1.5rem; + right: 1.5rem; +} diff --git a/components/badge.html b/components/badge.html new file mode 100644 index 0000000..8db1e8a --- /dev/null +++ b/components/badge.html @@ -0,0 +1,279 @@ + + + + + + + Document + + + + +
+
+ + + + + + + 10 + + + + + + 10 + + + + + + + 10 + +
+ 
+        
+          <a href="#" class="badge-icon">
+          <svg
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <circle
+              cx="8"
+              cy="21"
+              fill="none"
+              r="2"
+              stroke="#000"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            />
+            <circle
+              cx="20"
+              cy="21"
+              fill="none"
+              r="2"
+              stroke="#000"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            />
+            <path
+              d="M5.67,6H23l-1.68,8.39a2,2,0,0,1-2,1.61H8.75a2,2,0,0,1-2-1.74L5.23,2.74A2,2,0,0,0,3.25,1H1"
+              fill="none"
+              stroke="#000"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            />
+          </svg>
+          <span class="num-badge cart-badge">10</span>
+        </a>
+        
+
+ 
+        
+          <a href="#" class="badge-icon">
+          <svg
+            fill="none"
+            height="24"
+            stroke="#000"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
+            />
+          </svg>
+          <span class="num-badge wishlist-badge">10</span>
+        </a>
+        
+
+ 
+        
+          <a href="#" class="badge-icon">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="feather feather-bell"
+          >
+            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
+            <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
+          </svg>
+          <span class="num-badge notif-badge">10</span>
+        </a>
+
+        
+
+
+
+
+
+ avatar-large + +
+
+ avatar-medium + +
+
+ avatar-medium + +
+
+ avatar-extra-small + +
+
+ 
+           
+        <div class="avatar-comp">
+          <img
+            class="img-big img-utils"
+            alt="avatar-large"
+            src="../resources/man.svg"
+            width="96"
+            height="96"
+          />
+          <span class="avatar-badge avatar-badge-large"></span>
+        </div>
+          
+
+ 
+          
+        <div class="avatar-comp">
+          <img
+            class="img-medium img-utils"
+            alt="avatar-medium"
+            src="../resources/man.svg"
+            width="64"
+            height="64"
+          />
+          <span class="avatar-badge avatar-badge-medium"></span>
+        </div>
+        
+
+ 
+          
+        <div class="avatar-comp">
+          <img
+            class="img-small img-utils"
+            alt="avatar-medium"
+            src="../resources/man.svg"
+            width="48"
+            height="48"
+          />
+          <span class="avatar-badge avatar-badge-small"></span>
+        </div>
+          
+
+ 
+          
+        <div class="avatar-comp">
+          <img
+            class="img-ex-small img-utils"
+            alt="avatar-extra-small"
+            src="../resources/man.svg"
+            width="32"
+            height="32"
+          />
+          <span class="avatar-badge avatar-badge-ex-small"></span>
+        </div>
+          
+
+
+ + + diff --git a/components/cards.css b/components/cards.css new file mode 100644 index 0000000..673b471 --- /dev/null +++ b/components/cards.css @@ -0,0 +1,186 @@ +@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"); +* { + box-sizing: border-box; +} +:root { + --primary-color: #111827; + --border-color: #e5e5e5; +} +.cards-container { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-around; +} +.product-container { + display: flex; + flex-direction: column; + max-width: 200px; + font-family: Lato; + font-weight: bolder; + position: relative; + margin: 0; +} + +.wish-btn { + display: inline-block; + width: fit-content; + padding: 0; + background-color: transparent; + border: 0; + outline: 0; + align-self: flex-end; + position: absolute; + bottom: 6.8rem; + right: 0.5rem; +} + +.heart-svg:hover { + stroke: #f16565; +} + +.close-btn { + display: inline-block; + width: fit-content; + padding: 0; + background-color: transparent; + border: 0; + outline: 0; + position: absolute; + top: 0.5rem; + left: 0.2rem; +} + +.svg-close:hover { + stroke: #e84545; +} + +.product-img { + width: 100%; +} +.product-info { + text-decoration: none; + color: var(--primary-color); + font-size: 1.2rem; + margin: 5px 0; +} +.primary-btn { + background-color: #fff; + border: 1.8px solid var(--primary-color); + padding: 0.6rem; + font-family: Lato; + font-weight: 900; +} + +.primary-btn:hover { + background-color: var(--primary-color); + color: #fff; +} + +.price-tag { + display: block; + font-size: 1rem; + margin: 3px 0; + font-weight: normal; +} + +.overlay-div { + background: rgba(255, 255, 255, 0.5); + display: flex; + flex-direction: column; + align-items: center; + padding: 1rem; + width: 100%; + height: 100%; + position: absolute; +} + +.overlay-text { + position: absolute; + height: fit-content; + color: var(--primary-color); + top: 8rem; +} + +.text-card { + padding: 0.7rem; + border: 1px solid var(--primary-color); + border-radius: 0.3rem; + color: var(--primary-color); + max-width: 300px; + max-height: 140px; + display: flex; + flex-direction: column; +} + +.text-card-title { + font-family: Lato; + margin: 0; + padding: 0.5rem 0; + border-bottom: 1px solid var(--primary-color); +} + +.text-card-info { + margin: 0.5rem 0; + font-family: Lato; +} + +.horizontal-product-container { + display: flex; + font-family: Lato; + font-weight: bolder; + position: relative; + max-height: 200px; + margin: 0; + padding: 1rem; +} + +.hcard-product-info { + display: block; + height: 100%; + margin: 0; +} + +.second-horizontal-section { + display: flex; + flex-direction: column; + padding: 1rem 1rem; + flex-shrink: 2; + border: 1px solid black; + border-left: 0; +} + +.hcard-title { + margin: 0; +} + +.hcard-img { + height: 100%; +} + +.hcard-title-desc { + font-weight: 100; +} + +.hcard-price { + margin: 0.5rem 0; +} + +.horizontal-primary-btn { + display: inline-block; + font-size: 0.7rem; + width: 10rem; +} + +.hcard-product-desc { + margin: 0.3rem 0; + font-weight: 200; +} + +.hcard-wish-btn { + position: absolute; + top: 2rem; + right: 2rem; + bottom: 0; + height: fit-content; +} diff --git a/components/cards.html b/components/cards.html new file mode 100644 index 0000000..411178b --- /dev/null +++ b/components/cards.html @@ -0,0 +1,186 @@ + + + + + + + Document + + + + +
+
+ + productLorem ipsum Rs. 250 + + +
+
+ + + productLorem ipsum Rs. 250 + + +
+
+ + productLorem ipsum Rs. 250 + + +
+ + OUT OF STOCK +
+
+
+

CARD TITLE

+

+ I am a very simple card. I am good at containing small bits of + information. I am convenient because I require little markup to use + effectively. +

+
+
+ + product +
+

Lorem ipsum

+ Lorem ipsum dolor sit amet. + Rs. 250 +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, + nulla. Lorem ipsum dolor sit amet. +

+ + +
+
+
+ + diff --git a/index.css b/index.css new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html new file mode 100644 index 0000000..c8fcbb4 --- /dev/null +++ b/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + +
+ +
+ + \ No newline at end of file diff --git a/resources/avatar-svgrepo-com.svg b/resources/avatar-svgrepo-com.svg new file mode 100644 index 0000000..fcf1007 --- /dev/null +++ b/resources/avatar-svgrepo-com.svg @@ -0,0 +1,125 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/resources/bell.svg b/resources/bell.svg new file mode 100644 index 0000000..bba561c --- /dev/null +++ b/resources/bell.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/heart.svg b/resources/heart.svg new file mode 100644 index 0000000..5863366 --- /dev/null +++ b/resources/heart.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/resources/heart1.svg b/resources/heart1.svg new file mode 100644 index 0000000..9fdd6eb --- /dev/null +++ b/resources/heart1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/iconfinder_christmas_line-15_2636386.svg b/resources/iconfinder_christmas_line-15_2636386.svg new file mode 100644 index 0000000..8842f02 --- /dev/null +++ b/resources/iconfinder_christmas_line-15_2636386.svg @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/resources/iconfinder_heart_2561448.svg b/resources/iconfinder_heart_2561448.svg new file mode 100644 index 0000000..0663141 --- /dev/null +++ b/resources/iconfinder_heart_2561448.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/iconfinder_shopping-cart_2561279.svg b/resources/iconfinder_shopping-cart_2561279.svg new file mode 100644 index 0000000..15b6fd8 --- /dev/null +++ b/resources/iconfinder_shopping-cart_2561279.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/man.svg b/resources/man.svg new file mode 100644 index 0000000..0ea5d3e --- /dev/null +++ b/resources/man.svg @@ -0,0 +1,194 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/resources/prism.css b/resources/prism.css new file mode 100644 index 0000000..5911857 --- /dev/null +++ b/resources/prism.css @@ -0,0 +1,204 @@ +@import url("https://fonts.googleapis.com/css2?family=Inter&family=Ubuntu&display=swap"); +/* PrismJS 1.23.0 +https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript&plugins=normalize-whitespace+toolbar+copy-to-clipboard */ +/** + * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML + * Based on https://github.com/chriskempson/tomorrow-theme + * @author Rose Pritchard + */ + +code[class*="language-"], +pre[class*="language-"] { + color: #ccc; + background: none; + font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; + font-size: 1em; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + /* margin: .5em 0; */ + overflow: auto; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: #2d2d2d; +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: 0.1em; + border-radius: 0.3em; + white-space: normal; +} + +.token.comment, +.token.block-comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #999; +} + +.token.punctuation { + color: #ccc; +} + +.token.tag, +.token.attr-name, +.token.namespace, +.token.deleted { + color: #e2777a; +} + +.token.function-name { + color: #6196cc; +} + +.token.boolean, +.token.number, +.token.function { + color: #f08d49; +} + +.token.property, +.token.class-name, +.token.constant, +.token.symbol { + color: #f8c555; +} + +.token.selector, +.token.important, +.token.atrule, +.token.keyword, +.token.builtin { + color: #cc99cd; +} + +.token.string, +.token.char, +.token.attr-value, +.token.regex, +.token.variable { + color: #7ec699; +} + +.token.operator, +.token.entity, +.token.url { + color: #67cdcc; +} + +.token.important, +.token.bold { + font-weight: bold; +} +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} + +.token.inserted { + color: green; +} + +div.code-toolbar { + position: relative; +} + +div.code-toolbar > .toolbar { + position: absolute; + top: 0.5em; + right: 0.5em; + transition: opacity 0.3s ease-in-out; + /* opacity: 0; */ + background-color: red; + border-radius: 5%; + font-family: Ubuntu; +} + +div.code-toolbar:hover > .toolbar { + opacity: 1; +} + +/* Separate line b/c rules are thrown out if selector is invalid. + IE11 and old Edge versions don't support :focus-within. */ +div.code-toolbar:focus-within > .toolbar { + opacity: 1; +} + +div.code-toolbar > .toolbar { + display: block; +} + +/* .toolbar { + display: none; +} */ + +div.code-toolbar:hover .toolbar { + display: inline-block; + background-color: red; +} + +div.code-toolbar > .toolbar a { + cursor: pointer; +} + +div.code-toolbar > .toolbar button { + background: none; + border: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + padding: 0; + -webkit-user-select: none; /* for button */ + -moz-user-select: none; + -ms-user-select: none; +} + +div.code-toolbar > .toolbar a, +div.code-toolbar > .toolbar button, +div.code-toolbar > .toolbar span { + font-size: 0.8em; + padding: 0.5em; + outline-color: red; + outline-width: 1rem; + font-weight: bolder; + color: white; + /* background: #f5f2f0; + background: rgba(224, 224, 224, 0.2); + box-shadow: 0 2px 0 0 rgba(0,0,0,0.2); + border-radius: .5em; */ +} + +div.code-toolbar > .toolbar a:hover, +div.code-toolbar > .toolbar a:focus, +div.code-toolbar > .toolbar button:hover, +div.code-toolbar > .toolbar button:focus, +div.code-toolbar > .toolbar span:hover, +div.code-toolbar > .toolbar span:focus { + color: inherit; + text-decoration: none; +} diff --git a/resources/prism.js b/resources/prism.js new file mode 100644 index 0000000..4eee8c2 --- /dev/null +++ b/resources/prism.js @@ -0,0 +1,10 @@ +/* PrismJS 1.23.0 +https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript&plugins=normalize-whitespace+toolbar+copy-to-clipboard */ +var _self = "undefined" != typeof window ? window : "undefined" != typeof WorkerGlobalScope && self instanceof WorkerGlobalScope ? self : {}, Prism = function (u) { var c = /\blang(?:uage)?-([\w-]+)\b/i, n = 0, e = {}, M = { manual: u.Prism && u.Prism.manual, disableWorkerMessageHandler: u.Prism && u.Prism.disableWorkerMessageHandler, util: { encode: function e(n) { return n instanceof W ? new W(n.type, e(n.content), n.alias) : Array.isArray(n) ? n.map(e) : n.replace(/&/g, "&").replace(/= l.reach); y += m.value.length, m = m.next) { var b = m.value; if (t.length > n.length) return; if (!(b instanceof W)) { var k, x = 1; if (h) { if (!(k = z(v, y, n, f))) break; var w = k.index, A = k.index + k[0].length, P = y; for (P += m.value.length; P <= w;)m = m.next, P += m.value.length; if (P -= m.value.length, y = P, m.value instanceof W) continue; for (var E = m; E !== t.tail && (P < A || "string" == typeof E.value); E = E.next)x++, P += E.value.length; x--, b = n.slice(y, P), k.index -= y } else if (!(k = z(v, 0, b, f))) continue; var w = k.index, S = k[0], O = b.slice(0, w), L = b.slice(w + S.length), N = y + b.length; l && N > l.reach && (l.reach = N); var j = m.prev; O && (j = I(t, j, O), y += O.length), q(t, j, x); var C = new W(o, g ? M.tokenize(S, g) : S, d, S); if (m = I(t, j, C), L && I(t, m, L), 1 < x) { var _ = { cause: o + "," + u, reach: N }; e(n, t, r, m.prev, y, _), l && _.reach > l.reach && (l.reach = _.reach) } } } } } }(e, a, n, a.head, 0), function (e) { var n = [], t = e.head.next; for (; t !== e.tail;)n.push(t.value), t = t.next; return n }(a) }, hooks: { all: {}, add: function (e, n) { var t = M.hooks.all; t[e] = t[e] || [], t[e].push(n) }, run: function (e, n) { var t = M.hooks.all[e]; if (t && t.length) for (var r, a = 0; r = t[a++];)r(n) } }, Token: W }; function W(e, n, t, r) { this.type = e, this.content = n, this.alias = t, this.length = 0 | (r || "").length } function z(e, n, t, r) { e.lastIndex = n; var a = e.exec(t); if (a && r && a[1]) { var i = a[1].length; a.index += i, a[0] = a[0].slice(i) } return a } function i() { var e = { value: null, prev: null, next: null }, n = { value: null, prev: e, next: null }; e.next = n, this.head = e, this.tail = n, this.length = 0 } function I(e, n, t) { var r = n.next, a = { value: t, prev: n, next: r }; return n.next = a, r.prev = a, e.length++, a } function q(e, n, t) { for (var r = n.next, a = 0; a < t && r !== e.tail; a++)r = r.next; (n.next = r).prev = n, e.length -= a } if (u.Prism = M, W.stringify = function n(e, t) { if ("string" == typeof e) return e; if (Array.isArray(e)) { var r = ""; return e.forEach(function (e) { r += n(e, t) }), r } var a = { type: e.type, content: n(e.content, t), tag: "span", classes: ["token", e.type], attributes: {}, language: t }, i = e.alias; i && (Array.isArray(i) ? Array.prototype.push.apply(a.classes, i) : a.classes.push(i)), M.hooks.run("wrap", a); var l = ""; for (var o in a.attributes) l += " " + o + '="' + (a.attributes[o] || "").replace(/"/g, """) + '"'; return "<" + a.tag + ' class="' + a.classes.join(" ") + '"' + l + ">" + a.content + "" }, !u.document) return u.addEventListener && (M.disableWorkerMessageHandler || u.addEventListener("message", function (e) { var n = JSON.parse(e.data), t = n.language, r = n.code, a = n.immediateClose; u.postMessage(M.highlight(r, M.languages[t], t)), a && u.close() }, !1)), M; var t = M.util.currentScript(); function r() { M.manual || M.highlightAll() } if (t && (M.filename = t.src, t.hasAttribute("data-manual") && (M.manual = !0)), !M.manual) { var a = document.readyState; "loading" === a || "interactive" === a && t && t.defer ? document.addEventListener("DOMContentLoaded", r) : window.requestAnimationFrame ? window.requestAnimationFrame(r) : window.setTimeout(r, 16) } return M }(_self); "undefined" != typeof module && module.exports && (module.exports = Prism), "undefined" != typeof global && (global.Prism = Prism); +Prism.languages.markup = { comment: //, prolog: /<\?[\s\S]+?\?>/, doctype: { pattern: /"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i, greedy: !0, inside: { "internal-subset": { pattern: /(\[)[\s\S]+(?=\]>$)/, lookbehind: !0, greedy: !0, inside: null }, string: { pattern: /"[^"]*"|'[^']*'/, greedy: !0 }, punctuation: /^$|[[\]]/, "doctype-tag": /^DOCTYPE/, name: /[^\s<>'"]+/ } }, cdata: //i, tag: { pattern: /<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/, greedy: !0, inside: { tag: { pattern: /^<\/?[^\s>\/]+/, inside: { punctuation: /^<\/?/, namespace: /^[^\s>\/:]+:/ } }, "special-attr": [], "attr-value": { pattern: /=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/, inside: { punctuation: [{ pattern: /^=/, alias: "attr-equals" }, /"|'/] } }, punctuation: /\/?>/, "attr-name": { pattern: /[^\s>\/]+/, inside: { namespace: /^[^\s>\/:]+:/ } } } }, entity: [{ pattern: /&[\da-z]{1,8};/i, alias: "named-entity" }, /&#x?[\da-f]{1,8};/i] }, Prism.languages.markup.tag.inside["attr-value"].inside.entity = Prism.languages.markup.entity, Prism.languages.markup.doctype.inside["internal-subset"].inside = Prism.languages.markup, Prism.hooks.add("wrap", function (a) { "entity" === a.type && (a.attributes.title = a.content.replace(/&/, "&")) }), Object.defineProperty(Prism.languages.markup.tag, "addInlined", { value: function (a, e) { var s = {}; s["language-" + e] = { pattern: /(^$)/i, lookbehind: !0, inside: Prism.languages[e] }, s.cdata = /^$/i; var t = { "included-cdata": { pattern: //i, inside: s } }; t["language-" + e] = { pattern: /[\s\S]+/, inside: Prism.languages[e] }; var n = {}; n[a] = { pattern: RegExp("(<__[^>]*>)(?:))*\\]\\]>|(?!)".replace(/__/g, function () { return a }), "i"), lookbehind: !0, greedy: !0, inside: t }, Prism.languages.insertBefore("markup", "cdata", n) } }), Object.defineProperty(Prism.languages.markup.tag, "addAttribute", { value: function (a, e) { Prism.languages.markup.tag.inside["special-attr"].push({ pattern: RegExp("(^|[\"'\\s])(?:" + a + ")\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s'\">=]+(?=[\\s>]))", "i"), lookbehind: !0, inside: { "attr-name": /^[^\s=]+/, "attr-value": { pattern: /=[\s\S]+/, inside: { value: { pattern: /(=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/, lookbehind: !0, alias: [e, "language-" + e], inside: Prism.languages[e] }, punctuation: [{ pattern: /^=/, alias: "attr-equals" }, /"|'/] } } } }) } }), Prism.languages.html = Prism.languages.markup, Prism.languages.mathml = Prism.languages.markup, Prism.languages.svg = Prism.languages.markup, Prism.languages.xml = Prism.languages.extend("markup", {}), Prism.languages.ssml = Prism.languages.xml, Prism.languages.atom = Prism.languages.xml, Prism.languages.rss = Prism.languages.xml; +!function (s) { var e = /("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/; s.languages.css = { comment: /\/\*[\s\S]*?\*\//, atrule: { pattern: /@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/, inside: { rule: /^@[\w-]+/, "selector-function-argument": { pattern: /(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/, lookbehind: !0, alias: "selector" }, keyword: { pattern: /(^|[^\w-])(?:and|not|only|or)(?![\w-])/, lookbehind: !0 } } }, url: { pattern: RegExp("\\burl\\((?:" + e.source + "|(?:[^\\\\\r\n()\"']|\\\\[^])*)\\)", "i"), greedy: !0, inside: { function: /^url/i, punctuation: /^\(|\)$/, string: { pattern: RegExp("^" + e.source + "$"), alias: "url" } } }, selector: RegExp("[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|" + e.source + ")*(?=\\s*\\{)"), string: { pattern: e, greedy: !0 }, property: /(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i, important: /!important\b/i, function: /[-a-z0-9]+(?=\()/i, punctuation: /[(){};:,]/ }, s.languages.css.atrule.inside.rest = s.languages.css; var t = s.languages.markup; t && (t.tag.addInlined("style", "css"), t.tag.addAttribute("style", "css")) }(Prism); +Prism.languages.clike = { comment: [{ pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/, lookbehind: !0, greedy: !0 }, { pattern: /(^|[^\\:])\/\/.*/, lookbehind: !0, greedy: !0 }], string: { pattern: /(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/, greedy: !0 }, "class-name": { pattern: /(\b(?:class|interface|extends|implements|trait|instanceof|new)\s+|\bcatch\s+\()[\w.\\]+/i, lookbehind: !0, inside: { punctuation: /[.\\]/ } }, keyword: /\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/, boolean: /\b(?:true|false)\b/, function: /\w+(?=\()/, number: /\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i, operator: /[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/, punctuation: /[{}[\];(),.:]/ }; +Prism.languages.javascript = Prism.languages.extend("clike", { "class-name": [Prism.languages.clike["class-name"], { pattern: /(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:prototype|constructor))/, lookbehind: !0 }], keyword: [{ pattern: /((?:^|})\s*)catch\b/, lookbehind: !0 }, { pattern: /(^|[^.]|\.\.\.\s*)\b(?:as|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/, lookbehind: !0 }], function: /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/, number: /\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/, operator: /--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/ }), Prism.languages.javascript["class-name"][0].pattern = /(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/, Prism.languages.insertBefore("javascript", "keyword", { regex: { pattern: /((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*]|\\.|[^/\\\[\r\n])+\/[gimyus]{0,6}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/, lookbehind: !0, greedy: !0, inside: { "regex-source": { pattern: /^(\/)[\s\S]+(?=\/[a-z]*$)/, lookbehind: !0, alias: "language-regex", inside: Prism.languages.regex }, "regex-flags": /[a-z]+$/, "regex-delimiter": /^\/|\/$/ } }, "function-variable": { pattern: /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/, alias: "function" }, parameter: [{ pattern: /(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/, lookbehind: !0, inside: Prism.languages.javascript }, { pattern: /(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i, inside: Prism.languages.javascript }, { pattern: /(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/, lookbehind: !0, inside: Prism.languages.javascript }, { pattern: /((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/, lookbehind: !0, inside: Prism.languages.javascript }], constant: /\b[A-Z](?:[A-Z_]|\dx?)*\b/ }), Prism.languages.insertBefore("javascript", "string", { "template-string": { pattern: /`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|(?!\${)[^\\`])*`/, greedy: !0, inside: { "template-punctuation": { pattern: /^`|`$/, alias: "string" }, interpolation: { pattern: /((?:^|[^\\])(?:\\{2})*)\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}/, lookbehind: !0, inside: { "interpolation-punctuation": { pattern: /^\${|}$/, alias: "punctuation" }, rest: Prism.languages.javascript } }, string: /[\s\S]+/ } } }), Prism.languages.markup && (Prism.languages.markup.tag.addInlined("script", "javascript"), Prism.languages.markup.tag.addAttribute("on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)", "javascript")), Prism.languages.js = Prism.languages.javascript; +!function () { if ("undefined" != typeof Prism && "undefined" != typeof document) { var i = Object.assign || function (e, n) { for (var t in n) n.hasOwnProperty(t) && (e[t] = n[t]); return e }; e.prototype = { setDefaults: function (e) { this.defaults = i(this.defaults, e) }, normalize: function (e, n) { for (var t in n = i(this.defaults, n)) { var r = t.replace(/-(\w)/g, function (e, n) { return n.toUpperCase() }); "normalize" !== t && "setDefaults" !== r && n[t] && this[r] && (e = this[r].call(this, e, n[t])) } return e }, leftTrim: function (e) { return e.replace(/^\s+/, "") }, rightTrim: function (e) { return e.replace(/\s+$/, "") }, tabsToSpaces: function (e, n) { return n = 0 | n || 4, e.replace(/\t/g, new Array(++n).join(" ")) }, spacesToTabs: function (e, n) { return n = 0 | n || 4, e.replace(RegExp(" {" + n + "}", "g"), "\t") }, removeTrailing: function (e) { return e.replace(/\s*?$/gm, "") }, removeInitialLineFeed: function (e) { return e.replace(/^(?:\r?\n|\r)/, "") }, removeIndent: function (e) { var n = e.match(/^[^\S\n\r]*(?=\S)/gm); return n && n[0].length ? (n.sort(function (e, n) { return e.length - n.length }), n[0].length ? e.replace(RegExp("^" + n[0], "gm"), "") : e) : e }, indent: function (e, n) { return e.replace(/^[^\S\n\r]*(?=\S)/gm, new Array(++n).join("\t") + "$&") }, breakLines: function (e, n) { n = !0 === n ? 80 : 0 | n || 80; for (var t = e.split("\n"), r = 0; r < t.length; ++r)if (!(s(t[r]) <= n)) { for (var i = t[r].split(/(\s+)/g), o = 0, a = 0; a < i.length; ++a) { var l = s(i[a]); n < (o += l) && (i[a] = "\n" + i[a], o = l) } t[r] = i.join("") } return t.join("\n") } }, "undefined" != typeof module && module.exports && (module.exports = e), "undefined" != typeof Prism && (Prism.plugins.NormalizeWhitespace = new e({ "remove-trailing": !0, "remove-indent": !0, "left-trim": !0, "right-trim": !0 }), Prism.hooks.add("before-sanity-check", function (e) { var n = Prism.plugins.NormalizeWhitespace; if ((!e.settings || !1 !== e.settings["whitespace-normalization"]) && Prism.util.isActive(e.element, "whitespace-normalization", !0)) if (e.element && e.element.parentNode || !e.code) { var t = e.element.parentNode; if (e.code && t && "pre" === t.nodeName.toLowerCase()) { for (var r = t.childNodes, i = "", o = "", a = !1, l = 0; l < r.length; ++l) { var s = r[l]; s == e.element ? a = !0 : "#text" === s.nodeName && (a ? o += s.nodeValue : i += s.nodeValue, t.removeChild(s), --l) } if (e.element.children.length && Prism.plugins.KeepMarkup) { var c = i + e.element.innerHTML + o; e.element.innerHTML = n.normalize(c, e.settings), e.code = e.element.textContent } else e.code = i + e.code + o, e.code = n.normalize(e.code, e.settings) } } else e.code = n.normalize(e.code, e.settings) })) } function e(e) { this.defaults = i({}, e) } function s(e) { for (var n = 0, t = 0; t < e.length; ++t)e.charCodeAt(t) == "\t".charCodeAt(0) && (n += 3); return e.length + n } }(); +!function () { if ("undefined" != typeof Prism && "undefined" != typeof document) { var i = [], l = {}, d = function () { }; Prism.plugins.toolbar = {}; var e = Prism.plugins.toolbar.registerButton = function (e, n) { var t; t = "function" == typeof n ? n : function (e) { var t; return "function" == typeof n.onClick ? ((t = document.createElement("button")).type = "button", t.addEventListener("click", function () { n.onClick.call(this, e) })) : "string" == typeof n.url ? (t = document.createElement("a")).href = n.url : t = document.createElement("span"), n.className && t.classList.add(n.className), t.textContent = n.text, t }, e in l ? console.warn('There is a button with the key "' + e + '" registered already.') : i.push(l[e] = t) }, t = Prism.plugins.toolbar.hook = function (a) { var e = a.element.parentNode; if (e && /pre/i.test(e.nodeName) && !e.parentNode.classList.contains("code-toolbar")) { var t = document.createElement("div"); t.classList.add("code-toolbar"), e.parentNode.insertBefore(t, e), t.appendChild(e); var r = document.createElement("div"); r.classList.add("toolbar"); var n = i, o = function (e) { for (; e;) { var t = e.getAttribute("data-toolbar-order"); if (null != t) return (t = t.trim()).length ? t.split(/\s*,\s*/g) : []; e = e.parentElement } }(a.element); o && (n = o.map(function (e) { return l[e] || d })), n.forEach(function (e) { var t = e(a); if (t) { var n = document.createElement("div"); n.classList.add("toolbar-item"), n.appendChild(t), r.appendChild(n) } }), t.appendChild(r) } }; e("label", function (e) { var t = e.element.parentNode; if (t && /pre/i.test(t.nodeName) && t.hasAttribute("data-label")) { var n, a, r = t.getAttribute("data-label"); try { a = document.querySelector("template#" + r) } catch (e) { } return a ? n = a.content : (t.hasAttribute("data-url") ? (n = document.createElement("a")).href = t.getAttribute("data-url") : n = document.createElement("span"), n.textContent = r), n } }), Prism.hooks.add("complete", t) } }(); +!function () { function u(t, e) { t.addEventListener("click", function () { !function (t) { navigator.clipboard ? navigator.clipboard.writeText(t.getText()).then(t.success, t.error) : function (e) { var t = document.createElement("textarea"); t.value = e.getText(), t.style.top = "0", t.style.left = "0", t.style.position = "fixed", document.body.appendChild(t), t.focus(), t.select(); try { var o = document.execCommand("copy"); setTimeout(function () { o ? e.success() : e.error() }, 1) } catch (t) { setTimeout(function () { e.error(t) }, 1) } document.body.removeChild(t) }(t) }(e) }) } "undefined" != typeof Prism && "undefined" != typeof document && (Prism.plugins.toolbar ? Prism.plugins.toolbar.registerButton("copy-to-clipboard", function (t) { var e = t.element, o = function (t) { var e = { copy: "COPY", "copy-error": "Press Ctrl+C to copy", "copy-success": "Copied!", "copy-timeout": 5e3 }; for (var o in e) { for (var n = "data-prismjs-" + o, r = t; r && !r.hasAttribute(n);)r = r.parentElement; r && (e[o] = r.getAttribute(n)) } return e }(e), n = document.createElement("button"); n.className = "copy-to-clipboard-button", n.setAttribute("type", "button"); var r = document.createElement("span"); return n.appendChild(r), i("copy"), u(n, { getText: function () { return e.textContent }, success: function () { i("copy-success"), c() }, error: function () { i("copy-error"), setTimeout(function () { !function (t) { window.getSelection().selectAllChildren(t) }(e) }, 1), c() } }), n; function c() { setTimeout(function () { i("copy") }, o["copy-timeout"]) } function i(t) { r.textContent = o[t], n.setAttribute("data-copy-state", t) } }) : console.warn("Copy to Clipboard plugin loaded before Toolbar plugin.")) }(); diff --git a/resources/shopping-cart.svg b/resources/shopping-cart.svg new file mode 100644 index 0000000..05881ba --- /dev/null +++ b/resources/shopping-cart.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/resources/x.svg b/resources/x.svg new file mode 100644 index 0000000..b1e395c --- /dev/null +++ b/resources/x.svg @@ -0,0 +1 @@ + \ No newline at end of file From c047b359a2973bb8cf4529c3e45cf7d666a022e0 Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Fri, 26 Mar 2021 13:35:39 +0530 Subject: [PATCH 02/83] feat: Complted navbar --- index.css | 88 +++++++++++++++++++ index.html | 81 +++++++++++++++-- resources/github.svg | 1 + ...onfinder_1_Twitter_colored_svg_5296514.svg | 1 + resources/iconfinder_GitHub_4745725.svg | 1 + resources/menu.svg | 1 + resources/twitter.svg | 1 + 7 files changed, 165 insertions(+), 9 deletions(-) create mode 100644 resources/github.svg create mode 100644 resources/iconfinder_1_Twitter_colored_svg_5296514.svg create mode 100644 resources/iconfinder_GitHub_4745725.svg create mode 100644 resources/menu.svg create mode 100644 resources/twitter.svg diff --git a/index.css b/index.css index e69de29..e71194c 100644 --- a/index.css +++ b/index.css @@ -0,0 +1,88 @@ +@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"); + +* { + box-sizing: border-box; + margin: 0; +} + +:root { + --primary-font: Lato; + --primary-color: #111827; + --border-color: #e5e5e5; +} + +.main { + padding: 1rem; +} + +.navbar { + display: flex; + flex-direction: column; + align-items: center; + + position: relative; +} + +.navbar__title { + display: flex; + align-items: center; + justify-content: center; + + width: 100%; + + padding-bottom: 1rem; + + border-bottom: 3px solid var(--primary-color); + + color: var(--primary-color); + + font-family: var(--primary-font); + font-size: 1.3rem; + font-weight: 700; +} + +.navbar__menu { + display: flex; + justify-content: space-between; + + width: 100%; + + padding-bottom: 1rem; +} + +.navbar__menu__btn { + display: inline-block; + width: fit-content; + + padding: 0; + + background-color: transparent; + + border: 0; + + outline: 0; + + cursor: pointer; +} + +.navbar__menu__social__twitter, +.navbar__menu__social__github { + display: inline-block; + margin: 0 0.1rem; +} + +.navbar__title__text { + cursor: pointer; +} + +@media screen and (min-width: 576px) { + .navbar__title { + position: absolute; + } + .navbar__menu { + z-index: 1; + } + .navbar__title__text { + z-index: 2; + } +} diff --git a/index.html b/index.html index c8fcbb4..6450ec5 100644 --- a/index.html +++ b/index.html @@ -1,14 +1,77 @@ - - - - + + + + Document - - + + +
- +
- - \ No newline at end of file + + diff --git a/resources/github.svg b/resources/github.svg new file mode 100644 index 0000000..ff0af48 --- /dev/null +++ b/resources/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/iconfinder_1_Twitter_colored_svg_5296514.svg b/resources/iconfinder_1_Twitter_colored_svg_5296514.svg new file mode 100644 index 0000000..6d4e417 --- /dev/null +++ b/resources/iconfinder_1_Twitter_colored_svg_5296514.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/iconfinder_GitHub_4745725.svg b/resources/iconfinder_GitHub_4745725.svg new file mode 100644 index 0000000..5ff6db6 --- /dev/null +++ b/resources/iconfinder_GitHub_4745725.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/menu.svg b/resources/menu.svg new file mode 100644 index 0000000..e8a84a9 --- /dev/null +++ b/resources/menu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/twitter.svg b/resources/twitter.svg new file mode 100644 index 0000000..00ffb44 --- /dev/null +++ b/resources/twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file From 1f3bd389e887787cb6444f77f630e4dc614490d3 Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Fri, 26 Mar 2021 18:50:53 +0530 Subject: [PATCH 03/83] feat: completed menu --- .vscode/settings.json | 3 +++ index.css | 61 +++++++++++++++++++++++++++++++++++++++++++ index.html | 43 ++++++++++++++++++++++++++++++ 3 files changed, 107 insertions(+) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index.css b/index.css index e71194c..e1611f1 100644 --- a/index.css +++ b/index.css @@ -11,6 +11,10 @@ --border-color: #e5e5e5; } +/* body { + background-color: #e8e2e2; +} */ + .main { padding: 1rem; } @@ -86,3 +90,60 @@ z-index: 2; } } + +.grid-container { + /* display: grid; */ + /* grid-template-columns: 1fr 4fr; */ + display: flex; + margin: 1rem 0; +} + +.sidebar { + width: fit-content; + background-color: var(--backgroud-color); + border-right: 3px solid var(--primary-color); +} + +.sidebar__title { + font-size: 10px; + + letter-spacing: 0.5px; + + font-family: var(--primary-font); + + color: var(--primary-color); +} + +.sidebar__list { + position: sticky; + top: 0; + list-style-type: none; + + margin: 0; + margin-top: 2rem; + padding: 0; + padding-top: 1rem; + padding-right: 2rem; + padding-bottom: 2rem; +} + +.sidebar__item { + display: block; + + text-decoration: none; + + padding: 0.3rem 0; + + font-size: 1.3rem; + color: var(--primary-color); + font-family: var(--primary-font); + font-weight: 600; +} + +.check-img { + width: 100%; +} + +.component-container { + margin-top: 2rem; +} diff --git a/index.html b/index.html index 6450ec5..8bc08fc 100644 --- a/index.html +++ b/index.html @@ -72,6 +72,49 @@ CHAKRAWAKRA +
+
+ +
+
+
+ +
+
+ +
+
+ +
+
+
From d3dac2fb0627b461cef214d2835baa2a42be1bff Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Fri, 26 Mar 2021 18:55:58 +0530 Subject: [PATCH 04/83] refactor: add comments and change margins --- index.css | 11 +++++++---- index.html | 2 +- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/index.css b/index.css index e1611f1..200557e 100644 --- a/index.css +++ b/index.css @@ -19,6 +19,8 @@ padding: 1rem; } +/* navbar */ + .navbar { display: flex; flex-direction: column; @@ -91,13 +93,15 @@ } } -.grid-container { +.container { /* display: grid; */ /* grid-template-columns: 1fr 4fr; */ display: flex; margin: 1rem 0; } +/* sidebar */ + .sidebar { width: fit-content; background-color: var(--backgroud-color); @@ -120,9 +124,8 @@ list-style-type: none; margin: 0; - margin-top: 2rem; padding: 0; - padding-top: 1rem; + padding-top: 2rem; padding-right: 2rem; padding-bottom: 2rem; } @@ -145,5 +148,5 @@ } .component-container { - margin-top: 2rem; + margin: 2rem 0 0 2rem; } diff --git a/index.html b/index.html index 8bc08fc..e8bf2d9 100644 --- a/index.html +++ b/index.html @@ -72,7 +72,7 @@ CHAKRAWAKRA -
+
    COMPONENTS From 0c68615e735a57047458bf498552f8549ae4b260 Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Fri, 26 Mar 2021 21:23:49 +0530 Subject: [PATCH 05/83] style: added component container --- index.css | 14 +++++-- index.html | 108 ++++++++++++++++++++++++++++++++++++++++++----------- 2 files changed, 98 insertions(+), 24 deletions(-) diff --git a/index.css b/index.css index 200557e..b391a68 100644 --- a/index.css +++ b/index.css @@ -94,9 +94,9 @@ } .container { - /* display: grid; */ - /* grid-template-columns: 1fr 4fr; */ - display: flex; + display: grid; + grid-template-columns: 1fr 1fr; + /* display: flex; */ margin: 1rem 0; } @@ -148,5 +148,13 @@ } .component-container { + display: flex; margin: 2rem 0 0 2rem; + flex-direction: column; +} + +.component-container__avatar { + max-width: 100%; + padding: 1rem; + border: 1px solid black; } diff --git a/index.html b/index.html index e8bf2d9..b36e4c2 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,9 @@ Document + + + @@ -92,29 +95,92 @@
-
- -
-
- -
-
- -
+ +
+
+ avatar-small + avatar-medium + avatar-medium + avatar-extra-small +
+ 
+           
+        <img class="img-big img-utils" alt="avatar-big" src="../resources/man.svg" width="128" height="128" />
+        <img class="img-medium img-utils" alt="avatar-medium" src="../resources/man.svg" width="96" height="96"/>
+        <img class="img-small img-utils" alt="avatar-small" src="../resources/man.svg" width="64" height="64 "/>
+        <img class="img-ex-small img-utils" alt="avatar-extra-small" src="../resources/man.svg" width="32" height="32" />
+
+
+
+ +
+
+
+
+ avatar-small + avatar-medium + avatar-medium + avatar-extra-small
+ 
+           
+        <img class="img-big img-utils" alt="avatar-big" src="../resources/man.svg" width="128" height="128" />
+        <img class="img-medium img-utils" alt="avatar-medium" src="../resources/man.svg" width="96" height="96"/>
+        <img class="img-small img-utils" alt="avatar-small" src="../resources/man.svg" width="64" height="64 "/>
+        <img class="img-ex-small img-utils" alt="avatar-extra-small" src="../resources/man.svg" width="32" height="32" />
+
+ From 32ed2f8dbc1f1797b0a39a227de3636657997fc3 Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Fri, 26 Mar 2021 22:09:39 +0530 Subject: [PATCH 06/83] refactor: add comments in index.html --- index.html | 116 +++++++++++++++++++++++++++++++++-------------------- 1 file changed, 72 insertions(+), 44 deletions(-) diff --git a/index.html b/index.html index b36e4c2..b47accd 100644 --- a/index.html +++ b/index.html @@ -74,8 +74,10 @@
CHAKRAWAKRA
- + +
+
-
+
+
-
-
- avatar-small - avatar-medium - avatar-medium - avatar-extra-small -
- 
-           
-        <img class="img-big img-utils" alt="avatar-big" src="../resources/man.svg" width="128" height="128" />
-        <img class="img-medium img-utils" alt="avatar-medium" src="../resources/man.svg" width="96" height="96"/>
-        <img class="img-small img-utils" alt="avatar-small" src="../resources/man.svg" width="64" height="64 "/>
-        <img class="img-ex-small img-utils" alt="avatar-extra-small" src="../resources/man.svg" width="32" height="32" />
-
-
-
+
+
+ avatar-small + avatar-medium + avatar-medium + avatar-extra-small +
+ 
+            
+
- - + + +
Date: Fri, 26 Mar 2021 22:35:59 +0530 Subject: [PATCH 07/83] fix: fix little overflow --- components/avatar.css | 2 +- index.css | 11 ++++--- index.html | 69 +++++++++++++++---------------------------- 3 files changed, 29 insertions(+), 53 deletions(-) diff --git a/components/avatar.css b/components/avatar.css index 410ae57..37cf87a 100644 --- a/components/avatar.css +++ b/components/avatar.css @@ -14,7 +14,7 @@ } .avatar-display { - display: flex; + /* display: flex; */ /* justify-content: flex-start; */ flex-wrap: wrap; align-items: center; diff --git a/index.css b/index.css index b391a68..9b730ea 100644 --- a/index.css +++ b/index.css @@ -94,9 +94,9 @@ } .container { - display: grid; - grid-template-columns: 1fr 1fr; - /* display: flex; */ + /* display: grid; */ + /* grid-template-columns: 1fr 1fr; */ + display: flex; margin: 1rem 0; } @@ -143,14 +143,13 @@ font-weight: 600; } -.check-img { - width: 100%; -} +/* component container */ .component-container { display: flex; margin: 2rem 0 0 2rem; flex-direction: column; + max-width: 100%; } .component-container__avatar { diff --git a/index.html b/index.html index b47accd..54304c4 100644 --- a/index.html +++ b/index.html @@ -74,10 +74,10 @@
CHAKRAWAKRA
- + +
-
-
+
+
+
+ +
+ +
+
avatar-smallAvatar width="32" height="32" /> - - -
- -
- -
-
-
- avatar-small - avatar-medium - avatar-medium - avatar-extra-small -
- 
+
+ 
            
         <img class="img-big img-utils" alt="avatar-big" src="../resources/man.svg" width="128" height="128" />
         <img class="img-medium img-utils" alt="avatar-medium" src="../resources/man.svg" width="96" height="96"/>
         <img class="img-small img-utils" alt="avatar-small" src="../resources/man.svg" width="64" height="64 "/>
         <img class="img-ex-small img-utils" alt="avatar-extra-small" src="../resources/man.svg" width="32" height="32" />
- - - + + + From 6ecdea1a5275bf06a733bdc1f79280c091c9963b Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Sat, 27 Mar 2021 11:35:03 +0530 Subject: [PATCH 08/83] feat: horizontal card completed --- components/avatar.css | 3 +- components/cards.css | 136 +++++++++++++++++++++++++++++++++++++----- components/cards.html | 28 +++++---- index.css | 43 +++++++++---- index.html | 66 ++++++-------------- 5 files changed, 187 insertions(+), 89 deletions(-) diff --git a/components/avatar.css b/components/avatar.css index 37cf87a..9caa216 100644 --- a/components/avatar.css +++ b/components/avatar.css @@ -8,9 +8,10 @@ .avatar { display: flex; - padding: 1rem; + /* padding: 1rem; */ /* border: 1px solid black; */ flex-direction: column; + width: 100%; } .avatar-display { diff --git a/components/cards.css b/components/cards.css index 673b471..397cbf2 100644 --- a/components/cards.css +++ b/components/cards.css @@ -2,34 +2,52 @@ * { box-sizing: border-box; } + +body { + margin: 0; + padding: 0; +} :root { --primary-color: #111827; + --secondary-color: white; --border-color: #e5e5e5; } .cards-container { display: flex; + flex-direction: column; flex-wrap: wrap; align-items: center; - justify-content: space-around; + justify-items: space-evenly; + /* justify-content: space-evenly; */ } + .product-container { display: flex; flex-direction: column; + max-width: 200px; + font-family: Lato; font-weight: bolder; + position: relative; + margin: 0; } .wish-btn { display: inline-block; + + align-self: flex-end; + width: fit-content; + padding: 0; + background-color: transparent; border: 0; outline: 0; - align-self: flex-end; + position: absolute; bottom: 6.8rem; right: 0.5rem; @@ -41,11 +59,15 @@ .close-btn { display: inline-block; + width: fit-content; + padding: 0; + background-color: transparent; border: 0; outline: 0; + position: absolute; top: 0.5rem; left: 0.2rem; @@ -55,19 +77,21 @@ stroke: #e84545; } -.product-img { - width: 100%; -} .product-info { text-decoration: none; + color: var(--primary-color); font-size: 1.2rem; + margin: 5px 0; } .primary-btn { background-color: #fff; + border: 1.8px solid var(--primary-color); + padding: 0.6rem; + font-family: Lato; font-weight: 900; } @@ -79,75 +103,109 @@ .price-tag { display: block; - font-size: 1rem; + margin: 3px 0; + + font-size: 1rem; + font-weight: normal; } .overlay-div { background: rgba(255, 255, 255, 0.5); + display: flex; flex-direction: column; align-items: center; + padding: 1rem; + width: 100%; height: 100%; + position: absolute; } .overlay-text { position: absolute; + height: fit-content; + color: var(--primary-color); + top: 8rem; } +/* text card */ + .text-card { + display: flex; + flex-direction: column; + padding: 0.7rem; + border: 1px solid var(--primary-color); border-radius: 0.3rem; - color: var(--primary-color); + + color: var(--secondary-color); + max-width: 300px; max-height: 140px; - display: flex; - flex-direction: column; + + background-color: var(--primary-color); } .text-card-title { font-family: Lato; + margin: 0; + padding: 0.5rem 0; + border-bottom: 1px solid var(--primary-color); } .text-card-info { margin: 0.5rem 0; + font-family: Lato; } +/* horizontal card */ + .horizontal-product-container { display: flex; + font-family: Lato; font-weight: bolder; + position: relative; - max-height: 200px; - margin: 0; - padding: 1rem; + + height: 20rem; + + width: 40rem; + + padding: 2rem; + border: 1px solid var(--primary-color); } .hcard-product-info { display: block; - height: 100%; + /* height: 100%; */ + width: 40%; margin: 0; } .second-horizontal-section { display: flex; flex-direction: column; - padding: 1rem 1rem; + /* align-content: space-between; */ + justify-content: space-between; + padding: 0 0 0 2rem; flex-shrink: 2; - border: 1px solid black; + /* border: 1px solid black; */ border-left: 0; + width: 60%; } .hcard-title { @@ -175,6 +233,7 @@ .hcard-product-desc { margin: 0.3rem 0; font-weight: 200; + font-size: 1rem; } .hcard-wish-btn { @@ -184,3 +243,50 @@ bottom: 0; height: fit-content; } + +/* utility */ + +.product-img { + width: 100%; +} + +.distance-margin { + margin: 2rem; +} + +@media screen and (max-width: 620px) { + .distance-margin { + margin: 0.5rem; + } + /* horizontal card */ + .horizontal-product-container { + margin: 0.5rem; + /* width: 25rem; */ + width: 90%; + height: 11rem; + padding: 1rem; + } + + .hcard-product-desc { + display: none; + } + + .hcard-product-info { + width: 35%; + } + + .horizontal-primary-btn { + width: 100%; + height: 30%; + } + + .second-horizontal-section { + justify-content: space-between; + padding-left: 1rem; + } + + .hcard-wish-btn { + top: 1rem; + right: 1rem; + } +} diff --git a/components/cards.html b/components/cards.html index 411178b..7a3b948 100644 --- a/components/cards.html +++ b/components/cards.html @@ -13,7 +13,7 @@
-
+
-
+
-
+
OUT OF STOCK
-
+

CARD TITLE

I am a very simple card. I am good at containing small bits of @@ -142,21 +142,23 @@

CARD TITLE

effectively.

-
+
product
-

Lorem ipsum

- Lorem ipsum dolor sit amet. - Rs. 250 -

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, - nulla. Lorem ipsum dolor sit amet. -

+
+

Lorem ipsum

+ Lorem ipsum dolor sit amet. + Rs. 250 +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Explicabo, nulla. Lorem ipsum dolor sit amet. +

+
diff --git a/index.css b/index.css index 9b730ea..278be0f 100644 --- a/index.css +++ b/index.css @@ -16,7 +16,7 @@ } */ .main { - padding: 1rem; + padding: 1rem 2rem; } /* navbar */ @@ -94,18 +94,20 @@ } .container { - /* display: grid; */ - /* grid-template-columns: 1fr 1fr; */ - display: flex; + display: grid; + /* grid-template-columns: minmax(0.5fr, 1fr) minmax(4fr, 4fr); */ + grid-template-columns: 1fr 4fr; + /* display: flex; */ margin: 1rem 0; + height: 100vh; } /* sidebar */ .sidebar { - width: fit-content; background-color: var(--backgroud-color); border-right: 3px solid var(--primary-color); + /* flex: 0 2 1; */ } .sidebar__title { @@ -146,14 +148,33 @@ /* component container */ .component-container { - display: flex; + /* flex: 0 1 auto; */ margin: 2rem 0 0 2rem; - flex-direction: column; - max-width: 100%; + display: grid; + grid-template-columns: 1fr; + /* flex-direction: column; */ + width: 80%; +} + +.component--mod { + padding: 1rem 0; + + font-family: var(--primary-font); } -.component-container__avatar { +/* .component-container__avatar { */ +/* max-width: 100%; */ +/* padding: 1rem; */ +/* border: 1px solid black; */ +/* } */ +.ex-img { max-width: 100%; - padding: 1rem; - border: 1px solid black; + /* height: 699px; */ +} +.img { + width: 100%; +} + +.avatar { + width: 100%; } diff --git a/index.html b/index.html index 54304c4..8154521 100644 --- a/index.html +++ b/index.html @@ -72,7 +72,7 @@
- CHAKRAWAKRA + UNDECORATED
@@ -81,7 +81,7 @@
    COMPONENTS - Avatar + Avatar Alert Button Card @@ -99,9 +99,7 @@
    - +

    Avatar

    Avatar <img class="img-ex-small img-utils" alt="avatar-extra-small" src="../resources/man.svg" width="32" height="32" />
    - + +
    + +
    +
    + +
    +
    + +
    -
    - -
    -
    - avatar-small - avatar-medium - avatar-medium - avatar-extra-small -
    - 
    -           
-        <img class="img-big img-utils" alt="avatar-big" src="../resources/man.svg" width="128" height="128" />
-        <img class="img-medium img-utils" alt="avatar-medium" src="../resources/man.svg" width="96" height="96"/>
-        <img class="img-small img-utils" alt="avatar-small" src="../resources/man.svg" width="64" height="64 "/>
-        <img class="img-ex-small img-utils" alt="avatar-extra-small" src="../resources/man.svg" width="32" height="32" />
-
    -
    - - + +
+ + From d038b3687d4b6923e5f0a817fe5b42b54a8d33a6 Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Sat, 27 Mar 2021 13:41:40 +0530 Subject: [PATCH 09/83] feat: added shadow card --- components/cards.css | 80 ++++++++++++++++++++++++++++++++++++ components/cards.html | 96 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 176 insertions(+) diff --git a/components/cards.css b/components/cards.css index 397cbf2..718f085 100644 --- a/components/cards.css +++ b/components/cards.css @@ -11,6 +11,8 @@ body { --primary-color: #111827; --secondary-color: white; --border-color: #e5e5e5; + --primary-font: Lato; + --star-color: ; } .cards-container { display: flex; @@ -94,6 +96,8 @@ body { font-family: Lato; font-weight: 900; + + outline: none; } .primary-btn:hover { @@ -244,16 +248,92 @@ body { height: fit-content; } +/* shadow card */ + +.shadow_card { + display: flex; + flex-direction: column; + /* border: 1px solid black; */ + /* padding: 1rem; */ + height: 30rem; + border-radius: 1rem; + box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), + 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), + 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), + 0 100px 80px rgba(0, 0, 0, 0.12); + width: 20rem; +} + +.shadow_card__productimgLink { + display: block; + margin: 0; + height: 50%; +} + +.shadow_card__productimg { + display: block; + height: 100%; +} + +.shadow_card__product-info { + display: flex; + flex-direction: column; + justify-content: space-between; + background-color: var(--secondary-color); + color: var(--primary-color); + padding: 1rem; + height: 50%; + position: relative; +} + +.shadow_card__product-title { + margin: 0; + + font-family: var(--primary-font); +} + +.shadow_card__product-rating__title { + display: block; + font-weight: 700; +} + +.shadow_card--wishbtn { + display: inline-block; + + align-self: flex-end; + + width: fit-content; + + padding: 0; + + background-color: transparent; + border: 0; + outline: 0; + + position: absolute; + + top: 1rem; + right: 1rem; +} + /* utility */ .product-img { width: 100%; + object-fit: cover; + object-position: center; } .distance-margin { margin: 2rem; } +.font-family { + font-family: var(--primary-font); +} + +/* media queries */ + @media screen and (max-width: 620px) { .distance-margin { margin: 0.5rem; diff --git a/components/cards.html b/components/cards.html index 7a3b948..6cbb171 100644 --- a/components/cards.html +++ b/components/cards.html @@ -183,6 +183,102 @@

Lorem ipsum

+
+ + product + +
+
+

Lorem ipsum dolor sit

+ Lorem ipsum dolor sit amet consectetur adipisicing. +
+
+ RATING + + + + + + + + + + + + + + + +
+ + +
+
From d3a42bc01f925311110da2586e903edb61a988d0 Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Sat, 27 Mar 2021 23:52:41 +0530 Subject: [PATCH 10/83] fix: fix home page --- components/cards.css | 12 ++++--- components/cards.html | 2 +- components/images.css | 63 ++++++++++++++++++++++++++++++++++ components/images.html | 34 +++++++++++++++++++ index.css | 69 +++++++++++++++++++++++++++----------- index.html | 76 ++++++++++++++++++------------------------ 6 files changed, 187 insertions(+), 69 deletions(-) create mode 100644 components/images.css create mode 100644 components/images.html diff --git a/components/cards.css b/components/cards.css index 718f085..ac344ca 100644 --- a/components/cards.css +++ b/components/cards.css @@ -218,6 +218,7 @@ body { .hcard-img { height: 100%; + object-fit: cover !important; } .hcard-title-desc { @@ -257,22 +258,23 @@ body { /* padding: 1rem; */ height: 30rem; border-radius: 1rem; - box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), + /* box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), - 0 100px 80px rgba(0, 0, 0, 0.12); + 0 100px 80px rgba(0, 0, 0, 0.12); */ width: 20rem; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .shadow_card__productimgLink { - display: block; + /* display: block; */ margin: 0; height: 50%; } .shadow_card__productimg { display: block; - height: 100%; + /* height: 100%; */ } .shadow_card__product-info { @@ -320,7 +322,7 @@ body { .product-img { width: 100%; - object-fit: cover; + object-fit: contain; object-position: center; } diff --git a/components/cards.html b/components/cards.html index 6cbb171..184446b 100644 --- a/components/cards.html +++ b/components/cards.html @@ -146,7 +146,7 @@

CARD TITLE

product
diff --git a/components/images.css b/components/images.css new file mode 100644 index 0000000..4b68071 --- /dev/null +++ b/components/images.css @@ -0,0 +1,63 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; + padding: 0; +} + +.img-container { + display: flex; + padding: 1rem; + width: 100%; + height: fit-content; + overflow: hidden; + border: 1px solid black; + height: 50vh; + /* margin: 1rem; */ +} + +.img-container__responsive, +.img-container__round { + /* height: 100%; */ + /* width: 50%; */ + /* padding: 1% 0 0 0; */ +} + +.img-container__round { + border-radius: 50%; +} + +.responsive-img { + width: 100%; + object-fit: contain; + object-position: bottom; + height: 100%; +} + +.responsive-round-img { + /* border-radius: 50%; */ +} + +/* .img-container__round { + padding-top: 1rem; +} */ + +.img-container__round { + width: 100%; + background-size: contain; +} + +.container { + /* height: 20rem; */ + display: flex; + margin: 2rem; + /* border: 1px solid black; */ + padding: 1rem; + /* overflow: hidden; */ +} + +.round { + border-radius: 50%; +} diff --git a/components/images.html b/components/images.html new file mode 100644 index 0000000..eea86f4 --- /dev/null +++ b/components/images.html @@ -0,0 +1,34 @@ + + + + + + + Images + + + + +
+ round_img + + round_img +
+ + diff --git a/index.css b/index.css index 278be0f..bea183f 100644 --- a/index.css +++ b/index.css @@ -16,7 +16,7 @@ } */ .main { - padding: 1rem 2rem; + padding: 1rem 0.5rem; } /* navbar */ @@ -81,22 +81,10 @@ cursor: pointer; } -@media screen and (min-width: 576px) { - .navbar__title { - position: absolute; - } - .navbar__menu { - z-index: 1; - } - .navbar__title__text { - z-index: 2; - } -} - .container { - display: grid; + /* display: grid; */ /* grid-template-columns: minmax(0.5fr, 1fr) minmax(4fr, 4fr); */ - grid-template-columns: 1fr 4fr; + /* grid-template-columns: 1fr; */ /* display: flex; */ margin: 1rem 0; height: 100vh; @@ -107,6 +95,7 @@ .sidebar { background-color: var(--backgroud-color); border-right: 3px solid var(--primary-color); + display: none; /* flex: 0 2 1; */ } @@ -143,17 +132,20 @@ color: var(--primary-color); font-family: var(--primary-font); font-weight: 600; + + width: 100%; } /* component container */ .component-container { /* flex: 0 1 auto; */ - margin: 2rem 0 0 2rem; - display: grid; - grid-template-columns: 1fr; + /* margin: 2rem 0 0 2rem; */ + display: flex; + flex-direction: column; + /* grid-template-columns: 1fr; */ /* flex-direction: column; */ - width: 80%; + /* width: 80%; */ } .component--mod { @@ -175,6 +167,43 @@ width: 100%; } -.avatar { +/* .avatar { width: 100%; +} */ + +@media screen and (min-width: 576px) { + .container { + display: flex; + } + + .sidebar { + width: 20%; + } + + /* .sidebar__list { + display: flex; + flex-direction: column; + flex-wrap: wrap; + } */ + + .component-container { + width: 80%; + padding-top: 1rem; + padding-left: 1rem; + } + .main { + padding: 1rem 2rem; + } + .sidebar { + display: inline-block; + } + .navbar__title { + position: absolute; + } + .navbar__menu { + z-index: 1; + } + .navbar__title__text { + z-index: 2; + } } diff --git a/index.html b/index.html index 8154521..5d1f79b 100644 --- a/index.html +++ b/index.html @@ -72,7 +72,7 @@
- UNDECORATED + UNDEFINED
@@ -101,56 +101,46 @@

Avatar

-
- avatar-small - avatar-medium - avatar-medium - avatar-extra-small -
- 
+      

+        avatar-small
+        avatar-medium
+        avatar-medium
+        avatar-extra-small
+      

+      
            
         <img class="img-big img-utils" alt="avatar-big" src="../resources/man.svg" width="128" height="128" />
         <img class="img-medium img-utils" alt="avatar-medium" src="../resources/man.svg" width="96" height="96"/>
         <img class="img-small img-utils" alt="avatar-small" src="../resources/man.svg" width="64" height="64 "/>
         <img class="img-ex-small img-utils" alt="avatar-extra-small" src="../resources/man.svg" width="32" height="32" />
 

-
+
-
- -
-
- -
-
- -
- From 583d6bdc1aa3a05231fc54f11f572c47b90aa8c2 Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Sun, 28 Mar 2021 02:07:35 +0530 Subject: [PATCH 11/83] feat: fix navar and completed home page layout --- components/avatar.css | 6 +- components/badge.css | 16 +- index.css | 59 ++++---- index.html | 343 +++++++++++++++++++++++++++++++++++++----- resources/prism.css | 12 ++ 5 files changed, 362 insertions(+), 74 deletions(-) diff --git a/components/avatar.css b/components/avatar.css index 9caa216..07d9fb7 100644 --- a/components/avatar.css +++ b/components/avatar.css @@ -12,14 +12,16 @@ /* border: 1px solid black; */ flex-direction: column; width: 100%; + border: 1px solid var(--border-color); + border-radius: 5px; } .avatar-display { - /* display: flex; */ + display: flex; /* justify-content: flex-start; */ flex-wrap: wrap; align-items: center; - border: 1px solid var(--border-color); + padding: 1rem; border-bottom: 0; } diff --git a/components/badge.css b/components/badge.css index f4d91ed..435d2ea 100644 --- a/components/badge.css +++ b/components/badge.css @@ -53,6 +53,11 @@ background-color: #2a77f0; } +.avatar-container .avatar-display { + display: flex; + align-items: center; +} + /* avatar component */ .avatar-comp { @@ -68,13 +73,14 @@ background-color: var(--presence-color); border-radius: 50%; border: 2px solid var(--badge-border-color); - bottom: 0.3rem; + bottom: 0; + right: 0; } .avatar-badge-large { min-height: 1.8rem; min-width: 1.8rem; - right: 1.8rem; + bottom: 1rem; } .avatar-badge-medium { @@ -93,7 +99,7 @@ right: 3.9rem; } -.avatar-display { +.badge-icon-container .avatar-display { display: flex; justify-content: flex-start; flex-wrap: wrap; @@ -109,11 +115,11 @@ } /* setting some attributes of code block */ -.language-markup { +.badge-icon-container .language-markup { max-height: 100px; } -div.code-toolbar > .toolbar { +.badge-icon-container .code-toolbar .toolbar { top: 1.5rem; right: 1.5rem; } diff --git a/index.css b/index.css index bea183f..83dd9cd 100644 --- a/index.css +++ b/index.css @@ -11,12 +11,14 @@ --border-color: #e5e5e5; } -/* body { - background-color: #e8e2e2; -} */ - .main { padding: 1rem 0.5rem; + position: relative; +} + +/* utils */ +.space-comp { + margin-bottom: 2rem; } /* navbar */ @@ -82,12 +84,10 @@ } .container { - /* display: grid; */ - /* grid-template-columns: minmax(0.5fr, 1fr) minmax(4fr, 4fr); */ - /* grid-template-columns: 1fr; */ - /* display: flex; */ + display: flex; margin: 1rem 0; height: 100vh; + position: relative; } /* sidebar */ @@ -96,7 +96,8 @@ background-color: var(--backgroud-color); border-right: 3px solid var(--primary-color); display: none; - /* flex: 0 2 1; */ + position: fixed; + /* top: 3rem; */ } .sidebar__title { @@ -134,18 +135,19 @@ font-weight: 600; width: 100%; + + flex-shrink: 1; } /* component container */ .component-container { - /* flex: 0 1 auto; */ - /* margin: 2rem 0 0 2rem; */ + width: 100%; display: flex; + flex-direction: column; - /* grid-template-columns: 1fr; */ - /* flex-direction: column; */ - /* width: 80%; */ + margin: 1rem 0; + height: 100vh; } .component--mod { @@ -154,48 +156,41 @@ font-family: var(--primary-font); } -/* .component-container__avatar { */ -/* max-width: 100%; */ -/* padding: 1rem; */ -/* border: 1px solid black; */ -/* } */ .ex-img { max-width: 100%; - /* height: 699px; */ } .img { width: 100%; } -/* .avatar { - width: 100%; -} */ +div.code-toolbar { + right: 0; +} @media screen and (min-width: 576px) { .container { display: flex; } - .sidebar { width: 20%; } - /* .sidebar__list { - display: flex; - flex-direction: column; - flex-wrap: wrap; - } */ - .component-container { + /* display: flex; + flex-direction: column; */ width: 80%; - padding-top: 1rem; - padding-left: 1rem; + padding-left: 2rem; + /* margin: 2rem; */ + position: absolute; + /* top: 0; */ + left: 20%; } .main { padding: 1rem 2rem; } .sidebar { display: inline-block; + flex-shrink: 1; } .navbar__title { position: absolute; diff --git a/index.html b/index.html index 5d1f79b..19e9c6c 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ + @@ -84,6 +85,7 @@ Avatar Alert Button + Badge Card Image Input @@ -93,55 +95,326 @@ Slider Simplified Grid Text Utilities - Toast/Notify/Snackbar + Toast Notify Snackbar

Avatar

-
-
- avatar-small - avatar-medium - avatar-medium - avatar-extra-small -
- 
+          

+            

+              avatar-small
+              avatar-medium
+              avatar-medium
+              avatar-extra-small
+            

+            
            
         <img class="img-big img-utils" alt="avatar-big" src="../resources/man.svg" width="128" height="128" />
         <img class="img-medium img-utils" alt="avatar-medium" src="../resources/man.svg" width="96" height="96"/>
         <img class="img-small img-utils" alt="avatar-small" src="../resources/man.svg" width="64" height="64 "/>
         <img class="img-ex-small img-utils" alt="avatar-extra-small" src="../resources/man.svg" width="32" height="32" />
 

-    

+
+ +

+ Badge +

+ +
+
+ + + + + + + 10 + + + + + + 10 + + + + + + + 10 + +
+ 
+        
+          <a href="#" class="badge-icon">
+          <svg
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <circle
+              cx="8"
+              cy="21"
+              fill="none"
+              r="2"
+              stroke="#000"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            />
+            <circle
+              cx="20"
+              cy="21"
+              fill="none"
+              r="2"
+              stroke="#000"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            />
+            <path
+              d="M5.67,6H23l-1.68,8.39a2,2,0,0,1-2,1.61H8.75a2,2,0,0,1-2-1.74L5.23,2.74A2,2,0,0,0,3.25,1H1"
+              fill="none"
+              stroke="#000"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            />
+          </svg>
+          <span class="num-badge cart-badge">10</span>
+        </a>
+        
+
+ 
+        
+          <a href="#" class="badge-icon">
+          <svg
+            fill="none"
+            height="24"
+            stroke="#000"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
+            />
+          </svg>
+          <span class="num-badge wishlist-badge">10</span>
+        </a>
+        
+
+ 
+        
+          <a href="#" class="badge-icon">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="feather feather-bell"
+          >
+            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
+            <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
+          </svg>
+          <span class="num-badge notif-badge">10</span>
+        </a>
 
+        
+
+
+
+
+
+ avatar-large + +
+
+ avatar-medium + +
+
+ avatar-medium + +
+
+ avatar-extra-small + +
+
+ 
+           
+        <div class="avatar-comp">
+          <img
+            class="img-big img-utils"
+            alt="avatar-large"
+            src="../resources/man.svg"
+            width="96"
+            height="96"
+          />
+          <span class="avatar-badge avatar-badge-large"></span>
+        </div>
+          
+
+ 
+          
+        <div class="avatar-comp">
+          <img
+            class="img-medium img-utils"
+            alt="avatar-medium"
+            src="../resources/man.svg"
+            width="64"
+            height="64"
+          />
+          <span class="avatar-badge avatar-badge-medium"></span>
+        </div>
+        
+
+ 
+          
+        <div class="avatar-comp">
+          <img
+            class="img-small img-utils"
+            alt="avatar-medium"
+            src="../resources/man.svg"
+            width="48"
+            height="48"
+          />
+          <span class="avatar-badge avatar-badge-small"></span>
+        </div>
+          
+
+ 
+          
+        <div class="avatar-comp">
+          <img
+            class="img-ex-small img-utils"
+            alt="avatar-extra-small"
+            src="../resources/man.svg"
+            width="32"
+            height="32"
+          />
+          <span class="avatar-badge avatar-badge-ex-small"></span>
+        </div>
+          
+
+
+
- + + diff --git a/resources/prism.css b/resources/prism.css index 5911857..fd5d7ae 100644 --- a/resources/prism.css +++ b/resources/prism.css @@ -7,6 +7,10 @@ https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+cli * @author Rose Pritchard */ +* { + box-sizing: border-box; +} + code[class*="language-"], pre[class*="language-"] { color: #ccc; @@ -202,3 +206,11 @@ div.code-toolbar > .toolbar span:focus { color: inherit; text-decoration: none; } + +pre { + margin: 0; +} + +div.code-toolbar { + margin-top: 1rem; +} From 68d3005e89b311471bede4188785f3e2d7fe79fe Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Sun, 28 Mar 2021 15:06:32 +0530 Subject: [PATCH 12/83] feat: completed image component --- components/badge.css | 9 +++--- components/images.css | 70 ++++++++++++++++++++++-------------------- components/images.html | 64 ++++++++++++++++++++++++++------------ index.css | 7 ++++- index.html | 55 ++++++++++++++++++++++++++++++--- resources/prism.css | 23 +++++++++----- 6 files changed, 157 insertions(+), 71 deletions(-) diff --git a/components/badge.css b/components/badge.css index 435d2ea..a07648b 100644 --- a/components/badge.css +++ b/components/badge.css @@ -115,11 +115,12 @@ } /* setting some attributes of code block */ -.badge-icon-container .language-markup { +/* .badge-icon-container .language-markup { max-height: 100px; -} +} */ -.badge-icon-container .code-toolbar .toolbar { +/* left to fix */ +/* .badge-icon-container .code-toolbar .toolbar { top: 1.5rem; right: 1.5rem; -} +} */ diff --git a/components/images.css b/components/images.css index 4b68071..fb7faea 100644 --- a/components/images.css +++ b/components/images.css @@ -2,6 +2,10 @@ box-sizing: border-box; } +:root { + --border-color: #e5e5e5; +} + body { margin: 0; padding: 0; @@ -9,55 +13,55 @@ body { .img-container { display: flex; - padding: 1rem; + flex-direction: column; width: 100%; - height: fit-content; - overflow: hidden; - border: 1px solid black; - height: 50vh; - /* margin: 1rem; */ + /* padding: 1rem; */ } -.img-container__responsive, -.img-container__round { - /* height: 100%; */ +.img-container__simple-img, +.img-container__round-img { /* width: 50%; */ - /* padding: 1% 0 0 0; */ -} - -.img-container__round { - border-radius: 50%; + padding: 1rem; + height: 25rem; } .responsive-img { width: 100%; - object-fit: contain; - object-position: bottom; + object-fit: cover; + object-position: center; height: 100%; } -.responsive-round-img { - /* border-radius: 50%; */ +.img-round { + border-radius: 50%; } -/* .img-container__round { - padding-top: 1rem; -} */ +.img-container--border { + border: 1px solid var(--border-color); +} -.img-container__round { - width: 100%; - background-size: contain; +.img-container--margin { + margin-bottom: 1rem; } -.container { - /* height: 20rem; */ - display: flex; - margin: 2rem; - /* border: 1px solid black; */ - padding: 1rem; - /* overflow: hidden; */ +@media screen and (min-width: 920px) { + .img-container { + height: 50%; + } + .img-container__simple-img, + .img-container__round-img { + width: 50%; + height: 40rem; + } } -.round { - border-radius: 50%; +@media screen and (min-width: 576px) and (max-width: 920px) { + .img-container { + height: 50%; + } + .img-container__simple-img, + .img-container__round-img { + width: 60%; + height: 30rem; + } } diff --git a/components/images.html b/components/images.html index eea86f4..b8a0f7e 100644 --- a/components/images.html +++ b/components/images.html @@ -5,30 +5,54 @@ Images + + - -
- round_img +
+
+
+ round_img +
+ 
+        
+          <div class="img-container__simple-img">
+        <img
+          class="responsive-img"
+          src="https://source.unsplash.com/random"
+          alt="round_img"
+        />
+      </div>
 
-      round_img
+        
+
+
+
+
+ round_img +
+ 
+      
+        <div class="img-container__round-img round">
+      <img
+        class="responsive-img img-round"
+        src="https://source.unsplash.com/random"
+        alt="round_img"
+      />
+    </div>
+      
+
+
+ diff --git a/index.css b/index.css index 83dd9cd..d044cdb 100644 --- a/index.css +++ b/index.css @@ -1,5 +1,8 @@ @import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"); - +@import url("./resources/prism.css"); +@import url("./components/images.css"); +@import url("./components/avatar.css"); +@import url("./components/badge.css"); * { box-sizing: border-box; margin: 0; @@ -167,6 +170,8 @@ div.code-toolbar { right: 0; } +/* media queries for larger screens */ + @media screen and (min-width: 576px) { .container { display: flex; diff --git a/index.html b/index.html index 19e9c6c..faea91f 100644 --- a/index.html +++ b/index.html @@ -5,10 +5,6 @@ Document - - - - @@ -87,7 +83,7 @@ Button Badge Card - Image + Image Input Lists Modal @@ -412,6 +408,55 @@

+ +

+ Image +

+ +
+
+
+ round_img +
+ 
+        
+          <div class="img-container__simple-img">
+        <img
+          class="responsive-img"
+          src="https://source.unsplash.com/random"
+          alt="round_img"
+        />
+      </div>
+
+        
+
+
+
+
+ round_img +
+ 
+      
+        <div class="img-container__round-img round">
+      <img
+        class="responsive-img img-round"
+        src="https://source.unsplash.com/random"
+        alt="round_img"
+      />
+    </div>
+      
+
+
+
+ diff --git a/resources/prism.css b/resources/prism.css index fd5d7ae..7b3b451 100644 --- a/resources/prism.css +++ b/resources/prism.css @@ -38,7 +38,7 @@ pre[class*="language-"] { pre[class*="language-"] { padding: 1em; /* margin: .5em 0; */ - overflow: auto; + overflow: scroll; } :not(pre) > code[class*="language-"], @@ -133,8 +133,8 @@ div.code-toolbar { div.code-toolbar > .toolbar { position: absolute; - top: 0.5em; - right: 0.5em; + top: 0.5rem; + right: 1.5rem; transition: opacity 0.3s ease-in-out; /* opacity: 0; */ background-color: red; @@ -177,16 +177,13 @@ div.code-toolbar > .toolbar button { line-height: normal; overflow: visible; padding: 0; - -webkit-user-select: none; /* for button */ - -moz-user-select: none; - -ms-user-select: none; } div.code-toolbar > .toolbar a, div.code-toolbar > .toolbar button, div.code-toolbar > .toolbar span { - font-size: 0.8em; - padding: 0.5em; + font-size: 0.6rem; + padding: 0.5rem; outline-color: red; outline-width: 1rem; font-weight: bolder; @@ -214,3 +211,13 @@ pre { div.code-toolbar { margin-top: 1rem; } + +.language-markup { + height: 10rem; +} + +@media screen and (max-width: 576px) { + div.code-toolbar > .toolbar { + right: 0.5rem; + } +} From 617b1190ad3934e01dc5583e6eb61257f697aafb Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Sun, 28 Mar 2021 17:31:51 +0530 Subject: [PATCH 13/83] feat: added cards --- components/cards.css | 47 ++- components/cards.html | 750 +++++++++++++++++++++++++++++------------ components/images.css | 1 + components/images.html | 6 +- components/utils.css | 29 ++ index.css | 2 + index.html | 621 +++++++++++++++++++++++++++++++++- postnotes.txt | 1 + 8 files changed, 1234 insertions(+), 223 deletions(-) create mode 100644 components/utils.css create mode 100644 postnotes.txt diff --git a/components/cards.css b/components/cards.css index ac344ca..dc9d7b4 100644 --- a/components/cards.css +++ b/components/cards.css @@ -1,4 +1,6 @@ @import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"); +@import url("../resources/prism.css"); +@import url("./utils.css"); * { box-sizing: border-box; } @@ -12,14 +14,15 @@ body { --secondary-color: white; --border-color: #e5e5e5; --primary-font: Lato; - --star-color: ; + --wish-svg-stroke: #f16565; + --close-svg-stroke: #e84545; } .cards-container { display: flex; flex-direction: column; flex-wrap: wrap; - align-items: center; - justify-items: space-evenly; + /* align-items: center; */ + width: 100%; /* justify-content: space-evenly; */ } @@ -27,14 +30,16 @@ body { display: flex; flex-direction: column; - max-width: 200px; + max-width: 13rem; font-family: Lato; font-weight: bolder; position: relative; - margin: 0; + margin: auto; /* remove this while giving to user */ + + /* padding: 1rem; */ } .wish-btn { @@ -56,7 +61,7 @@ body { } .heart-svg:hover { - stroke: #f16565; + stroke: var(--wish-svg-stroke); } .close-btn { @@ -76,7 +81,7 @@ body { } .svg-close:hover { - stroke: #e84545; + stroke: var(--close-svg-stroke); } .product-info { @@ -146,15 +151,15 @@ body { display: flex; flex-direction: column; - padding: 0.7rem; + padding: 1rem; border: 1px solid var(--primary-color); border-radius: 0.3rem; color: var(--secondary-color); - max-width: 300px; - max-height: 140px; + max-width: 20rem; + /* max-height: 9rem; */ background-color: var(--primary-color); } @@ -334,6 +339,15 @@ body { font-family: var(--primary-font); } +/* .align-center { + /* text-align: center; */ + +/* .cards-container { + display: flex; + justify-content: center; + margin: auto; +} */ + /* media queries */ @media screen and (max-width: 620px) { @@ -371,4 +385,17 @@ body { top: 1rem; right: 1rem; } + + .primary-btn:hover { + background-color: var(--secondary-color); + color: var(--primary-color); + } + + .heart-svg { + stroke: var(--wish-svg-stroke); + } + + .svg-close { + stroke: var(--close-svg-stroke); + } } diff --git a/components/cards.html b/components/cards.html index 184446b..2b6f4d9 100644 --- a/components/cards.html +++ b/components/cards.html @@ -13,107 +13,83 @@
-
- - productLorem ipsum Rs. 250 - - -
-
- - - productLorem ipsum Rs. 250 - - + + +
+ + + 
+        
+          <a href="#" class="badge-icon">
+          <svg
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <circle
+              cx="8"
+              cy="21"
+              fill="none"
+              r="2"
+              stroke="#000"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            />
+            <circle
+              cx="20"
+              cy="21"
+              fill="none"
+              r="2"
+              stroke="#000"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            />
+            <path
+              d="M5.67,6H23l-1.68,8.39a2,2,0,0,1-2,1.61H8.75a2,2,0,0,1-2-1.74L5.23,2.74A2,2,0,0,0,3.25,1H1"
+              fill="none"
+              stroke="#000"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            />
+          </svg>
+          <span class="num-badge cart-badge">10</span>
+        </a>
+        
+
-
- - productLorem ipsum Rs. 250 - - -
+ +
+
- OUT OF STOCK -
-
-
-

CARD TITLE

-

- I am a very simple card. I am good at containing small bits of - information. I am convenient because I require little markup to use - effectively. -

-
-
- - product -
-
-

Lorem ipsum

- Lorem ipsum dolor sit amet. - Rs. 250 -

- Lorem ipsum dolor sit amet consectetur adipisicing elit. - Explicabo, nulla. Lorem ipsum dolor sit amet. -

-
- - +
+ + 
+          
+        <div class="product-container">
+          <button class="close-btn">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#B9B9B9"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="svg-close"
+            >
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+          <a href="#" class="product-info">
+            <img
+              class="product-img"
+              src="https://unsplash.it/200/300"
+              alt="product"
+            />Lorem ipsum <span class="price-tag">Rs. 250</span></a
+          >
+          <button class="wish-btn">
+            <svg
+              class="heart-svg"
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#B9B9B9"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path
+                d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
+              ></path>
+            </svg>
+          </button>
+          <button class="primary-btn">ADD TO CART</button>
+        </div>
+
+          
+
-
- - product - -
-
-

Lorem ipsum dolor sit

- Lorem ipsum dolor sit amet consectetur adipisicing. -
-
- RATING - - - - - - - - - - - - - - - -
- - + +
+ + OUT OF STOCK +
+
+ 
+          
+        <div class="product-container">
+          <a href="#" class="product-info">
+            <img
+              class="product-img"
+              src="https://unsplash.it/200/300"
+              alt="product"
+            />Lorem ipsum <span class="price-tag">Rs. 250</span></a
+          >
+          <button class="wish-btn">
+            <svg
+              class="heart-svg"
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#B9B9B9"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path
+                d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
+              ></path>
+            </svg>
+          </button>
+          <button class="primary-btn">ADD TO CART</button>
+          <div class="overlay-div">
+            <button class="close-btn">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="#B9B9B9"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="svg-close"
+              >
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+              </svg>
+            </button>
+            <span class="overlay-text"> OUT OF STOCK </span>
+          </div>
+        </div>
+          
+
+ +
+ +
+
+

CARD TITLE

+

+ I am a very simple card. I am good at containing small bits of + information. I am convenient because I require little markup to use + effectively. +

+
+ + 
+          
+        <div class="text-card">
+          <h4 class="text-card-title">---card title---</h4>
+          <p class="text-card-info">
+            --- enter your text here ---
+          </p>
+        </div>
+
+          
+
+
+ +
+
+ + product +
+
+

Lorem ipsum

+ Lorem ipsum dolor sit amet. + Rs. 250 +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Explicabo, nulla. Lorem ipsum dolor sit amet. +

+
+ + +
+
+ + 
+          
+        <div class="horizontal-product-container">
+          <a href="#" class="product-info hcard-product-info">
+            <img
+              class="product-img hcard-img"
+              src="https://source.unsplash.com/random/"
+              alt="product"
+          /></a>
+          <div class="second-horizontal-section">
+            <div class="hsection_info">
+              <h4 class="hcard-title">Lorem ipsum</h4>
+              <small class="hcard-title-desc"
+                >Lorem ipsum dolor sit amet.</small
+              >
+              <span class="price-tag hcard-price">Rs. 250</span>
+              <p class="hcard-product-desc">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                Explicabo, nulla. Lorem ipsum dolor sit amet.
+              </p>
+            </div>
+            <button class="primary-btn horizontal-primary-btn">
+              ADD TO CART
+            </button>
+            <button class="wish-btn hcard-wish-btn">
+              <svg
+                class="heart-svg"
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                hcard-wish-btn
+                fill="none"
+                stroke="#B9B9B9"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path
+                  d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
+                ></path>
+              </svg>
+            </button>
+          </div>
+        </div>
+ 
+          
+
+
+ +
+
+ + product + +
+
+

Lorem ipsum dolor sit

+ Lorem ipsum dolor sit amet consectetur adipisicing. +
+
+ RATING + + + + + + + + + + + + + + + +
+ + +
+ + 
+          
+        <div class="shadow_card">
+          <a href="#" class="shadow_card__productimgLink">
+            <img
+              class="product-img shadow_card__productimg"
+              src="https://source.unsplash.com/random"
+              alt="product"
+            />
+          </a>
+          <div class="shadow_card__product-info">
+            <div class="shadow_card__product-header">
+              <h3 class="shadow_card__product-title">Lorem ipsum dolor sit</h3>
+              <small class="font-family"
+                >Lorem ipsum dolor sit amet consectetur adipisicing.</small
+              >
+            </div>
+            <div class="shadow_card__product-rating">
+              <span class="shadow_card__product-rating__title font-family"
+                >RATING</span
+              >
+              <svg
+                height="16"
+                viewBox="0 -10 511.98685 511"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0"
+                  fill="#ffc107"
+                />
+              </svg>
+              <svg
+                height="16"
+                viewBox="0 -10 511.98685 511"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0"
+                  fill="#ffc107"
+                />
+              </svg>
+              <svg
+                height="16"
+                viewBox="0 -10 511.98685 511"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0"
+                  fill="#ffc107"
+                />
+              </svg>
+              <svg
+                height="16"
+                viewBox="0 -10 511.98685 511"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0"
+                  fill="#ffc107"
+                />
+              </svg>
+              <svg
+                height="16"
+                viewBox="0 -10 511.98685 511"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0"
+                  fill="#ffc107"
+                />
+              </svg>
+            </div>
+            <button class="primary-btn shadow_card--btn">ADD TO CART</button>
+            <button class="shadow_card--wishbtn">
+              <svg
+                class="heart-svg"
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="#B9B9B9"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path
+                  d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
+                ></path>
+              </svg>
+            </button>
+          </div>
+        </div>
+          
+
+
+ + diff --git a/components/images.css b/components/images.css index fb7faea..bc8da63 100644 --- a/components/images.css +++ b/components/images.css @@ -1,3 +1,4 @@ +@import url("./utils.css"); * { box-sizing: border-box; } diff --git a/components/images.html b/components/images.html index b8a0f7e..a599198 100644 --- a/components/images.html +++ b/components/images.html @@ -11,7 +11,7 @@
-
+
round_img
- 
+        
         
           <div class="img-container__simple-img">
         <img
@@ -32,7 +32,7 @@
-
+
Alert Button Badge - Card + Cards Image Input Lists @@ -408,6 +408,625 @@

+

+ Cards +

+
+
+
+ + productLorem ipsum Rs. 250 + + +
+ + + 
+        
+          <a href="#" class="badge-icon">
+          <svg
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <circle
+              cx="8"
+              cy="21"
+              fill="none"
+              r="2"
+              stroke="#000"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            />
+            <circle
+              cx="20"
+              cy="21"
+              fill="none"
+              r="2"
+              stroke="#000"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            />
+            <path
+              d="M5.67,6H23l-1.68,8.39a2,2,0,0,1-2,1.61H8.75a2,2,0,0,1-2-1.74L5.23,2.74A2,2,0,0,0,3.25,1H1"
+              fill="none"
+              stroke="#000"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            />
+          </svg>
+          <span class="num-badge cart-badge">10</span>
+        </a>
+        
+
+
+ +
+
+ + + productLorem ipsum Rs. 250 + + +
+ + 
+          
+        <div class="product-container">
+          <button class="close-btn">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#B9B9B9"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="svg-close"
+            >
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+          <a href="#" class="product-info">
+            <img
+              class="product-img"
+              src="https://unsplash.it/200/300"
+              alt="product"
+            />Lorem ipsum <span class="price-tag">Rs. 250</span></a
+          >
+          <button class="wish-btn">
+            <svg
+              class="heart-svg"
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#B9B9B9"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path
+                d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
+              ></path>
+            </svg>
+          </button>
+          <button class="primary-btn">ADD TO CART</button>
+        </div>
+
+          
+
+
+ +
+
+ + productLorem ipsum Rs. 250 + + +
+ + OUT OF STOCK +
+
+ 
+          
+        <div class="product-container">
+          <a href="#" class="product-info">
+            <img
+              class="product-img"
+              src="https://unsplash.it/200/300"
+              alt="product"
+            />Lorem ipsum <span class="price-tag">Rs. 250</span></a
+          >
+          <button class="wish-btn">
+            <svg
+              class="heart-svg"
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#B9B9B9"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path
+                d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
+              ></path>
+            </svg>
+          </button>
+          <button class="primary-btn">ADD TO CART</button>
+          <div class="overlay-div">
+            <button class="close-btn">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="#B9B9B9"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="svg-close"
+              >
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+              </svg>
+            </button>
+            <span class="overlay-text"> OUT OF STOCK </span>
+          </div>
+        </div>
+          
+
+ +
+ +
+
+

CARD TITLE

+

+ I am a very simple card. I am good at containing small bits of + information. I am convenient because I require little markup + to use effectively. +

+
+ + 
+          
+        <div class="text-card">
+          <h4 class="text-card-title">---card title---</h4>
+          <p class="text-card-info">
+            --- enter your text here ---
+          </p>
+        </div>
+
+          
+
+
+ +
+
+ + product +
+
+

Lorem ipsum

+ Lorem ipsum dolor sit amet. + Rs. 250 +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Explicabo, nulla. Lorem ipsum dolor sit amet. +

+
+ + +
+
+ + 
+          
+        <div class="horizontal-product-container">
+          <a href="#" class="product-info hcard-product-info">
+            <img
+              class="product-img hcard-img"
+              src="https://source.unsplash.com/random/"
+              alt="product"
+          /></a>
+          <div class="second-horizontal-section">
+            <div class="hsection_info">
+              <h4 class="hcard-title">Lorem ipsum</h4>
+              <small class="hcard-title-desc"
+                >Lorem ipsum dolor sit amet.</small
+              >
+              <span class="price-tag hcard-price">Rs. 250</span>
+              <p class="hcard-product-desc">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                Explicabo, nulla. Lorem ipsum dolor sit amet.
+              </p>
+            </div>
+            <button class="primary-btn horizontal-primary-btn">
+              ADD TO CART
+            </button>
+            <button class="wish-btn hcard-wish-btn">
+              <svg
+                class="heart-svg"
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                hcard-wish-btn
+                fill="none"
+                stroke="#B9B9B9"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path
+                  d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
+                ></path>
+              </svg>
+            </button>
+          </div>
+        </div>
+ 
+          
+
+
+ +
+
+ + product + +
+
+

+ Lorem ipsum dolor sit +

+ Lorem ipsum dolor sit amet consectetur + adipisicing. +
+
+ RATING + + + + + + + + + + + + + + + +
+ + +
+
+ + 
+          
+        <div class="shadow_card">
+          <a href="#" class="shadow_card__productimgLink">
+            <img
+              class="product-img shadow_card__productimg"
+              src="https://source.unsplash.com/random"
+              alt="product"
+            />
+          </a>
+          <div class="shadow_card__product-info">
+            <div class="shadow_card__product-header">
+              <h3 class="shadow_card__product-title">Lorem ipsum dolor sit</h3>
+              <small class="font-family"
+                >Lorem ipsum dolor sit amet consectetur adipisicing.</small
+              >
+            </div>
+            <div class="shadow_card__product-rating">
+              <span class="shadow_card__product-rating__title font-family"
+                >RATING</span
+              >
+              <svg
+                height="16"
+                viewBox="0 -10 511.98685 511"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0"
+                  fill="#ffc107"
+                />
+              </svg>
+              <svg
+                height="16"
+                viewBox="0 -10 511.98685 511"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0"
+                  fill="#ffc107"
+                />
+              </svg>
+              <svg
+                height="16"
+                viewBox="0 -10 511.98685 511"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0"
+                  fill="#ffc107"
+                />
+              </svg>
+              <svg
+                height="16"
+                viewBox="0 -10 511.98685 511"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0"
+                  fill="#ffc107"
+                />
+              </svg>
+              <svg
+                height="16"
+                viewBox="0 -10 511.98685 511"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0"
+                  fill="#ffc107"
+                />
+              </svg>
+            </div>
+            <button class="primary-btn shadow_card--btn">ADD TO CART</button>
+            <button class="shadow_card--wishbtn">
+              <svg
+                class="heart-svg"
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="#B9B9B9"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path
+                  d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
+                ></path>
+              </svg>
+            </button>
+          </div>
+        </div>
+          
+
+
+ +
+

Image diff --git a/postnotes.txt b/postnotes.txt new file mode 100644 index 0000000..7a8ed6f --- /dev/null +++ b/postnotes.txt @@ -0,0 +1 @@ +- remove margin: auto in product-container in cards css. \ No newline at end of file From abe06c992f9bf6171a3f833fb0cd6bb3f0b3155c Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Sun, 28 Mar 2021 18:57:38 +0530 Subject: [PATCH 14/83] refactor: images height and width --- components/alerts.css | 3 ++ components/alerts.html | 65 ++++++++++++++++++++++++++++++++++++++++++ components/cards.css | 34 +++++++++++----------- components/images.css | 4 +-- index.html | 45 ++++++++++++++--------------- 5 files changed, 110 insertions(+), 41 deletions(-) create mode 100644 components/alerts.css create mode 100644 components/alerts.html diff --git a/components/alerts.css b/components/alerts.css new file mode 100644 index 0000000..1236d8e --- /dev/null +++ b/components/alerts.css @@ -0,0 +1,3 @@ +* { + box-sizing: border-box; +} diff --git a/components/alerts.html b/components/alerts.html new file mode 100644 index 0000000..a4ff84a --- /dev/null +++ b/components/alerts.html @@ -0,0 +1,65 @@ + + + + + + + Alerts + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + this is an success alert - check it out! +
+
+ + diff --git a/components/cards.css b/components/cards.css index dc9d7b4..44009d9 100644 --- a/components/cards.css +++ b/components/cards.css @@ -37,8 +37,6 @@ body { position: relative; - margin: auto; /* remove this while giving to user */ - /* padding: 1rem; */ } @@ -208,11 +206,11 @@ body { .second-horizontal-section { display: flex; flex-direction: column; - /* align-content: space-between; */ justify-content: space-between; + padding: 0 0 0 2rem; flex-shrink: 2; - /* border: 1px solid black; */ + border-left: 0; width: 60%; } @@ -236,12 +234,15 @@ body { .horizontal-primary-btn { display: inline-block; + font-size: 0.7rem; + width: 10rem; } .hcard-product-desc { margin: 0.3rem 0; + font-weight: 200; font-size: 1rem; } @@ -251,6 +252,7 @@ body { top: 2rem; right: 2rem; bottom: 0; + height: fit-content; } @@ -259,15 +261,17 @@ body { .shadow_card { display: flex; flex-direction: column; - /* border: 1px solid black; */ - /* padding: 1rem; */ + height: 30rem; + border-radius: 1rem; /* box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); */ + width: 20rem; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } @@ -286,10 +290,14 @@ body { display: flex; flex-direction: column; justify-content: space-between; + background-color: var(--secondary-color); color: var(--primary-color); + padding: 1rem; + height: 50%; + position: relative; } @@ -301,6 +309,7 @@ body { .shadow_card__product-rating__title { display: block; + font-weight: 700; } @@ -339,15 +348,6 @@ body { font-family: var(--primary-font); } -/* .align-center { - /* text-align: center; */ - -/* .cards-container { - display: flex; - justify-content: center; - margin: auto; -} */ - /* media queries */ @media screen and (max-width: 620px) { @@ -357,9 +357,11 @@ body { /* horizontal card */ .horizontal-product-container { margin: 0.5rem; - /* width: 25rem; */ + width: 90%; + height: 11rem; + padding: 1rem; } diff --git a/components/images.css b/components/images.css index bc8da63..6a98ac2 100644 --- a/components/images.css +++ b/components/images.css @@ -51,8 +51,8 @@ body { } .img-container__simple-img, .img-container__round-img { - width: 50%; - height: 40rem; + width: 40%; + height: 25rem; } } diff --git a/index.html b/index.html index 8bb64b1..e05838c 100644 --- a/index.html +++ b/index.html @@ -492,7 +492,7 @@

-
+
From cd1570a67908e4dba86dd1787cb71d3fa0f133eb Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Mon, 29 Mar 2021 00:28:39 +0530 Subject: [PATCH 20/83] feat: added alert component --- components/alerts.css | 17 +- components/alerts.html | 772 +++++++++++++++++++++++++++++------------ index.css | 1 + index.html | 581 ++++++++++++++++++++++++++++++- resources/prism.css | 2 +- 5 files changed, 1144 insertions(+), 229 deletions(-) diff --git a/components/alerts.css b/components/alerts.css index a10b26a..a6d21bb 100644 --- a/components/alerts.css +++ b/components/alerts.css @@ -1,5 +1,6 @@ @import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"); - +@import url("../resources/prism.css"); +@import url("./utils.css"); * { box-sizing: border-box; } @@ -30,6 +31,8 @@ font-size: var(--alert-font-size); font-family: var(--primary-font); + + border-radius: 0.5rem; } .alerts--margin--common { @@ -55,3 +58,15 @@ background-color: var(--info-alert-backcolor); color: var(--info-alert-fontcolor); } + +@media screen and (max-width: 620px) { + .alerts--common { + margin: 0 1rem 0 1rem; + } +} + +@media screen and (min-width: 620px) { + .alert--reduce-width { + width: 50%; + } +} diff --git a/components/alerts.html b/components/alerts.html index 8c8608d..96d6196 100644 --- a/components/alerts.html +++ b/components/alerts.html @@ -9,249 +9,571 @@
-
- - - - +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + This is an success alert - check it out! +
+ 
+            
+                <div class="alerts__success alerts--common">
+          <span class="alerts--margin--common">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              xmlns:svgjs="http://svgjs.com/svgjs"
+              version="1.1"
+              width="24"
+              height="24"
+              x="0"
+              y="0"
+              viewBox="0 0 367.805 367.805"
+              style="enable-background: new 0 0 512 512"
+              xml:space="preserve"
+              class=""
+            >
+              <g>
+                <g xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    style=""
+                    d="M183.903,0.001c101.566,0,183.902,82.336,183.902,183.902s-82.336,183.902-183.902,183.902   S0.001,285.469,0.001,183.903l0,0C-0.288,82.625,81.579,0.29,182.856,0.001C183.205,0,183.554,0,183.903,0.001z"
+                    fill="#3bb54a"
+                    data-original="#3bb54a"
+                    class=""
+                  />
+                  <polygon
+                    style=""
+                    points="285.78,133.225 155.168,263.837 82.025,191.217 111.805,161.96 155.168,204.801    256.001,103.968  "
+                    fill="#ffffff"
+                    data-original="#d4e1f4"
+                    class=""
+                  />
+                </g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+              </g>
+            </svg>
+          </span>
+          This is an success alert - check it out!
+        </div>
+            
+
+
+ +
+
+ + + + - + + + - - - - - - - - - - - - - - - - - - - This is an success alert - check it out! -
- -
- - - - - - - - - - - - - This is an error alert - check it out! + + + This is an error alert - check it out! +
+ 
+            
+                <div class="alerts__error alerts--common">
+          <span class="alerts--margin--common">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              xmlns:svgjs="http://svgjs.com/svgjs"
+              version="1.1"
+              width="24"
+              height="24"
+              x="0"
+              y="0"
+              viewBox="0 0 511.82388 511"
+              style="enable-background: new 0 0 512 512"
+              xml:space="preserve"
+              class=""
+            >
+              <g>
+                <path
+                  xmlns="http://www.w3.org/2000/svg"
+                  d="m439.210938 459.449219h-366.609376c-25.160156 0-48.53125-13.027344-61.757812-34.433594-13.230469-21.402344-14.433594-48.128906-3.179688-70.636719l183.304688-313.832031c12.300781-24.59375 37.4375-40.132813 64.9375-40.132813s52.636719 15.539063 64.9375 40.132813l183.304688 313.832031c11.253906 22.507813 10.050781 49.234375-3.179688 70.636719-13.226562 21.40625-36.59375 34.433594-61.757812 34.433594zm0 0"
+                  fill="#d1403f"
+                  data-original="#d1403f"
+                  style=""
+                  class=""
+                />
+                <path
+                  xmlns="http://www.w3.org/2000/svg"
+                  d="m439.253906 459.449219h-183.347656v-459.035157c27.566406-.171874 52.804688 15.429688 64.972656 40.167969l183.257813 313.820313c11.269531 22.492187 10.082031 49.21875-3.136719 70.621094-13.222656 21.40625-36.585938 34.433593-61.746094 34.425781zm0 0"
+                  fill="#d1403f"
+                  data-original="#f29c1f"
+                  style=""
+                  class=""
+                />
+                <path
+                  xmlns="http://www.w3.org/2000/svg"
+                  d="m291.21875 380c0 19.503906-15.8125 35.3125-35.3125 35.3125s-35.308594-15.808594-35.308594-35.3125c0-19.5 15.808594-35.308594 35.308594-35.308594s35.3125 15.808594 35.3125 35.308594zm0 0"
+                  fill="#ffffff"
+                  data-original="#35495e"
+                  style=""
+                  class=""
+                />
+                <path
+                  xmlns="http://www.w3.org/2000/svg"
+                  d="m291.21875 380c0 9.367188-3.71875 18.347656-10.339844 24.972656-6.625 6.621094-15.605468 10.339844-24.972656 10.339844v-70.621094c9.367188-.003906 18.347656 3.714844 24.972656 10.339844 6.621094 6.621094 10.339844 15.605469 10.339844 24.96875zm0 0"
+                  fill="#ffffff"
+                  data-original="#2c3e50"
+                  style=""
+                  class=""
+                />
+                <path
+                  xmlns="http://www.w3.org/2000/svg"
+                  d="m255.90625 71.035156c19.5 0 35.3125 15.808594 35.3125 35.3125v167.722656c0 19.5-15.8125 35.308594-35.3125 35.308594s-35.308594-15.808594-35.308594-35.308594v-167.722656c0-19.503906 15.808594-35.3125 35.308594-35.3125zm0 0"
+                  fill="#ffffff"
+                  data-original="#35495e"
+                  style=""
+                  class=""
+                />
+                <path
+                  xmlns="http://www.w3.org/2000/svg"
+                  d="m291.21875 106.347656v167.722656c0 9.367188-3.71875 18.347657-10.339844 24.96875-6.625 6.625-15.605468 10.34375-24.972656 10.339844v-238.34375c9.367188-.011718 18.359375 3.703125 24.984375 10.328125 6.621094 6.625 10.339844 15.613281 10.328125 24.984375zm0 0"
+                  fill="#ffffff"
+                  data-original="#2c3e50"
+                  style=""
+                  class=""
+                />
+              </g>
+            </svg>
+          </span>
+          This is an error alert - check it out!
+        </div>
+              version="1.1"
+              width="24"
+              height="24"
+              x="0"
+              y="0"
+              viewBox="0 0 367.805 367.805"
+              style="enable-background: new 0 0 512 512"
+              xml:space="preserve"
+              class=""
+            >
+              <g>
+                <g xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    style=""
+                    d="M183.903,0.001c101.566,0,183.902,82.336,183.902,183.902s-82.336,183.902-183.902,183.902   S0.001,285.469,0.001,183.903l0,0C-0.288,82.625,81.579,0.29,182.856,0.001C183.205,0,183.554,0,183.903,0.001z"
+                    fill="#3bb54a"
+                    data-original="#3bb54a"
+                    class=""
+                  />
+                  <polygon
+                    style=""
+                    points="285.78,133.225 155.168,263.837 82.025,191.217 111.805,161.96 155.168,204.801    256.001,103.968  "
+                    fill="#ffffff"
+                    data-original="#d4e1f4"
+                    class=""
+                  />
+                </g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+              </g>
+            </svg>
+          </span>
+          This is an success alert - check it out!
+        </div>
+            
+
-
- - - - - - - - - - - - - This is an warning alert - check it out! -
- -
- - - - +
+
+ + + + + + + + + + + + This is an warning alert - check it out! +
+ 
+            
+                <div class="alerts__warning alerts--common">
+          <span class="alerts--margin--common">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              xmlns:svgjs="http://svgjs.com/svgjs"
+              version="1.1"
+              width="24"
+              height="24"
+              x="0"
+              y="0"
+              viewBox="0 0 511.82388 511"
+              style="enable-background: new 0 0 512 512"
+              xml:space="preserve"
+              class=""
+            >
+              <g>
+                <path
+                  xmlns="http://www.w3.org/2000/svg"
+                  d="m439.210938 459.449219h-366.609376c-25.160156 0-48.53125-13.027344-61.757812-34.433594-13.230469-21.402344-14.433594-48.128906-3.179688-70.636719l183.304688-313.832031c12.300781-24.59375 37.4375-40.132813 64.9375-40.132813s52.636719 15.539063 64.9375 40.132813l183.304688 313.832031c11.253906 22.507813 10.050781 49.234375-3.179688 70.636719-13.226562 21.40625-36.59375 34.433594-61.757812 34.433594zm0 0"
+                  fill="#f0c419"
+                  data-original="#f0c419"
+                  style=""
+                  class=""
+                />
+                <path
+                  xmlns="http://www.w3.org/2000/svg"
+                  d="m439.253906 459.449219h-183.347656v-459.035157c27.566406-.171874 52.804688 15.429688 64.972656 40.167969l183.257813 313.820313c11.269531 22.492187 10.082031 49.21875-3.136719 70.621094-13.222656 21.40625-36.585938 34.433593-61.746094 34.425781zm0 0"
+                  fill="#f0c419"
+                  data-original="#f29c1f"
+                  style=""
+                  class=""
+                />
+                <path
+                  xmlns="http://www.w3.org/2000/svg"
+                  d="m291.21875 380c0 19.503906-15.8125 35.3125-35.3125 35.3125s-35.308594-15.808594-35.308594-35.3125c0-19.5 15.808594-35.308594 35.308594-35.308594s35.3125 15.808594 35.3125 35.308594zm0 0"
+                  fill="#ffffff"
+                  data-original="#35495e"
+                  style=""
+                  class=""
+                />
+                <path
+                  xmlns="http://www.w3.org/2000/svg"
+                  d="m291.21875 380c0 9.367188-3.71875 18.347656-10.339844 24.972656-6.625 6.621094-15.605468 10.339844-24.972656 10.339844v-70.621094c9.367188-.003906 18.347656 3.714844 24.972656 10.339844 6.621094 6.621094 10.339844 15.605469 10.339844 24.96875zm0 0"
+                  fill="#ffffff"
+                  data-original="#2c3e50"
+                  style=""
+                  class=""
+                />
+                <path
+                  xmlns="http://www.w3.org/2000/svg"
+                  d="m255.90625 71.035156c19.5 0 35.3125 15.808594 35.3125 35.3125v167.722656c0 19.5-15.8125 35.308594-35.3125 35.308594s-35.308594-15.808594-35.308594-35.308594v-167.722656c0-19.503906 15.808594-35.3125 35.308594-35.3125zm0 0"
+                  fill="#ffffff"
+                  data-original="#35495e"
+                  style=""
+                  class=""
+                />
+                <path
+                  xmlns="http://www.w3.org/2000/svg"
+                  d="m291.21875 106.347656v167.722656c0 9.367188-3.71875 18.347657-10.339844 24.96875-6.625 6.625-15.605468 10.34375-24.972656 10.339844v-238.34375c9.367188-.011718 18.359375 3.703125 24.984375 10.328125 6.621094 6.625 10.339844 15.613281 10.328125 24.984375zm0 0"
+                  fill="#ffffff"
+                  data-original="#2c3e50"
+                  style=""
+                  class=""
+                />
+              </g>
+            </svg>
+          </span>
+          This is an warning alert - check it out!
+        </div>
+            
+
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - This is an info alert - check it out! + + + This is an info alert - check it out! +
+ 
+            
+                <div class="alerts__info alerts--common">
+          <span class="alerts--margin--common">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              xmlns:svgjs="http://svgjs.com/svgjs"
+              version="1.1"
+              width="24"
+              height="24"
+              x="0"
+              y="0"
+              viewBox="0 0 438.533 438.533"
+              style="enable-background: new 0 0 512 512"
+              xml:space="preserve"
+              class=""
+            >
+              <g>
+                <g xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    d="M409.133,109.203c-19.608-33.592-46.205-60.189-79.798-79.796C295.736,9.801,259.058,0,219.273,0   c-39.781,0-76.47,9.801-110.063,29.407c-33.595,19.604-60.192,46.201-79.8,79.796C9.801,142.8,0,179.489,0,219.267   c0,39.78,9.804,76.463,29.407,110.062c19.607,33.592,46.204,60.189,79.799,79.798c33.597,19.605,70.283,29.407,110.063,29.407   s76.47-9.802,110.065-29.407c33.593-19.602,60.189-46.206,79.795-79.798c19.603-33.596,29.403-70.284,29.403-110.062   C438.533,179.485,428.732,142.795,409.133,109.203z M182.727,54.813c0-2.666,0.855-4.853,2.57-6.565   c1.712-1.711,3.903-2.57,6.567-2.57h54.82c2.662,0,4.853,0.859,6.561,2.57c1.711,1.712,2.573,3.899,2.573,6.565v45.682   c0,2.664-0.862,4.854-2.573,6.564c-1.708,1.712-3.898,2.568-6.561,2.568h-54.82c-2.664,0-4.854-0.856-6.567-2.568   c-1.715-1.709-2.57-3.9-2.57-6.564V54.813z M292.359,356.309c0,2.662-0.863,4.853-2.57,6.561c-1.704,1.714-3.895,2.57-6.563,2.57   H155.317c-2.667,0-4.854-0.856-6.567-2.57c-1.712-1.708-2.568-3.898-2.568-6.564v-45.682c0-2.67,0.856-4.853,2.568-6.567   c1.713-1.708,3.903-2.57,6.567-2.57h27.41v-91.358h-27.41c-2.667,0-4.853-0.855-6.567-2.568c-1.712-1.711-2.568-3.901-2.568-6.567   v-45.679c0-2.666,0.856-4.853,2.568-6.567c1.715-1.713,3.905-2.568,6.567-2.568h91.367c2.662,0,4.853,0.855,6.561,2.568   c1.711,1.714,2.573,3.901,2.573,6.567v146.179h27.401c2.669,0,4.859,0.855,6.57,2.566c1.704,1.712,2.566,3.901,2.566,6.567v45.683   H292.359z"
+                    fill="#447eae"
+                    data-original="#000000"
+                    style=""
+                    class=""
+                  />
+                </g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+                <g xmlns="http://www.w3.org/2000/svg"></g>
+              </g>
+            </svg>
+          </span>
+          This is an info alert - check it out!
+        </div>
+            
+
+ + diff --git a/index.css b/index.css index 5893db6..e22b8cd 100644 --- a/index.css +++ b/index.css @@ -4,6 +4,7 @@ @import url("./components/avatar.css"); @import url("./components/badge.css"); @import url("./components/cards.css"); +@import url("./components/alerts.css"); @import url("./components/utils.css"); * { box-sizing: border-box; diff --git a/index.html b/index.html index e05838c..2f7d43b 100644 --- a/index.html +++ b/index.html @@ -79,7 +79,7 @@
+

+ Alerts +

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + This is an success alert - check it out! +
+ 
+                  
+                      <div class="alerts__success alerts--common">
+                <span class="alerts--margin--common">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                    xmlns:svgjs="http://svgjs.com/svgjs"
+                    version="1.1"
+                    width="24"
+                    height="24"
+                    x="0"
+                    y="0"
+                    viewBox="0 0 367.805 367.805"
+                    style="enable-background: new 0 0 512 512"
+                    xml:space="preserve"
+                    class=""
+                  >
+                    <g>
+                      <g xmlns="http://www.w3.org/2000/svg">
+                        <path
+                          style=""
+                          d="M183.903,0.001c101.566,0,183.902,82.336,183.902,183.902s-82.336,183.902-183.902,183.902   S0.001,285.469,0.001,183.903l0,0C-0.288,82.625,81.579,0.29,182.856,0.001C183.205,0,183.554,0,183.903,0.001z"
+                          fill="#3bb54a"
+                          data-original="#3bb54a"
+                          class=""
+                        />
+                        <polygon
+                          style=""
+                          points="285.78,133.225 155.168,263.837 82.025,191.217 111.805,161.96 155.168,204.801    256.001,103.968  "
+                          fill="#ffffff"
+                          data-original="#d4e1f4"
+                          class=""
+                        />
+                      </g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                    </g>
+                  </svg>
+                </span>
+                This is an success alert - check it out!
+              </div>
+                  
+
+
+ +
+
+ + + + + + + + + + + + + This is an error alert - check it out! +
+ 
+                  
+                      <div class="alerts__error alerts--common">
+                <span class="alerts--margin--common">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                    xmlns:svgjs="http://svgjs.com/svgjs"
+                    version="1.1"
+                    width="24"
+                    height="24"
+                    x="0"
+                    y="0"
+                    viewBox="0 0 511.82388 511"
+                    style="enable-background: new 0 0 512 512"
+                    xml:space="preserve"
+                    class=""
+                  >
+                    <g>
+                      <path
+                        xmlns="http://www.w3.org/2000/svg"
+                        d="m439.210938 459.449219h-366.609376c-25.160156 0-48.53125-13.027344-61.757812-34.433594-13.230469-21.402344-14.433594-48.128906-3.179688-70.636719l183.304688-313.832031c12.300781-24.59375 37.4375-40.132813 64.9375-40.132813s52.636719 15.539063 64.9375 40.132813l183.304688 313.832031c11.253906 22.507813 10.050781 49.234375-3.179688 70.636719-13.226562 21.40625-36.59375 34.433594-61.757812 34.433594zm0 0"
+                        fill="#d1403f"
+                        data-original="#d1403f"
+                        style=""
+                        class=""
+                      />
+                      <path
+                        xmlns="http://www.w3.org/2000/svg"
+                        d="m439.253906 459.449219h-183.347656v-459.035157c27.566406-.171874 52.804688 15.429688 64.972656 40.167969l183.257813 313.820313c11.269531 22.492187 10.082031 49.21875-3.136719 70.621094-13.222656 21.40625-36.585938 34.433593-61.746094 34.425781zm0 0"
+                        fill="#d1403f"
+                        data-original="#f29c1f"
+                        style=""
+                        class=""
+                      />
+                      <path
+                        xmlns="http://www.w3.org/2000/svg"
+                        d="m291.21875 380c0 19.503906-15.8125 35.3125-35.3125 35.3125s-35.308594-15.808594-35.308594-35.3125c0-19.5 15.808594-35.308594 35.308594-35.308594s35.3125 15.808594 35.3125 35.308594zm0 0"
+                        fill="#ffffff"
+                        data-original="#35495e"
+                        style=""
+                        class=""
+                      />
+                      <path
+                        xmlns="http://www.w3.org/2000/svg"
+                        d="m291.21875 380c0 9.367188-3.71875 18.347656-10.339844 24.972656-6.625 6.621094-15.605468 10.339844-24.972656 10.339844v-70.621094c9.367188-.003906 18.347656 3.714844 24.972656 10.339844 6.621094 6.621094 10.339844 15.605469 10.339844 24.96875zm0 0"
+                        fill="#ffffff"
+                        data-original="#2c3e50"
+                        style=""
+                        class=""
+                      />
+                      <path
+                        xmlns="http://www.w3.org/2000/svg"
+                        d="m255.90625 71.035156c19.5 0 35.3125 15.808594 35.3125 35.3125v167.722656c0 19.5-15.8125 35.308594-35.3125 35.308594s-35.308594-15.808594-35.308594-35.308594v-167.722656c0-19.503906 15.808594-35.3125 35.308594-35.3125zm0 0"
+                        fill="#ffffff"
+                        data-original="#35495e"
+                        style=""
+                        class=""
+                      />
+                      <path
+                        xmlns="http://www.w3.org/2000/svg"
+                        d="m291.21875 106.347656v167.722656c0 9.367188-3.71875 18.347657-10.339844 24.96875-6.625 6.625-15.605468 10.34375-24.972656 10.339844v-238.34375c9.367188-.011718 18.359375 3.703125 24.984375 10.328125 6.621094 6.625 10.339844 15.613281 10.328125 24.984375zm0 0"
+                        fill="#ffffff"
+                        data-original="#2c3e50"
+                        style=""
+                        class=""
+                      />
+                    </g>
+                  </svg>
+                </span>
+                This is an error alert - check it out!
+              </div>
+                    version="1.1"
+                    width="24"
+                    height="24"
+                    x="0"
+                    y="0"
+                    viewBox="0 0 367.805 367.805"
+                    style="enable-background: new 0 0 512 512"
+                    xml:space="preserve"
+                    class=""
+                  >
+                    <g>
+                      <g xmlns="http://www.w3.org/2000/svg">
+                        <path
+                          style=""
+                          d="M183.903,0.001c101.566,0,183.902,82.336,183.902,183.902s-82.336,183.902-183.902,183.902   S0.001,285.469,0.001,183.903l0,0C-0.288,82.625,81.579,0.29,182.856,0.001C183.205,0,183.554,0,183.903,0.001z"
+                          fill="#3bb54a"
+                          data-original="#3bb54a"
+                          class=""
+                        />
+                        <polygon
+                          style=""
+                          points="285.78,133.225 155.168,263.837 82.025,191.217 111.805,161.96 155.168,204.801    256.001,103.968  "
+                          fill="#ffffff"
+                          data-original="#d4e1f4"
+                          class=""
+                        />
+                      </g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                    </g>
+                  </svg>
+                </span>
+                This is an success alert - check it out!
+              </div>
+                  
+
+
+ +
+
+ + + + + + + + + + + + + This is an warning alert - check it out! +
+ 
+                  
+                      <div class="alerts__warning alerts--common">
+                <span class="alerts--margin--common">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                    xmlns:svgjs="http://svgjs.com/svgjs"
+                    version="1.1"
+                    width="24"
+                    height="24"
+                    x="0"
+                    y="0"
+                    viewBox="0 0 511.82388 511"
+                    style="enable-background: new 0 0 512 512"
+                    xml:space="preserve"
+                    class=""
+                  >
+                    <g>
+                      <path
+                        xmlns="http://www.w3.org/2000/svg"
+                        d="m439.210938 459.449219h-366.609376c-25.160156 0-48.53125-13.027344-61.757812-34.433594-13.230469-21.402344-14.433594-48.128906-3.179688-70.636719l183.304688-313.832031c12.300781-24.59375 37.4375-40.132813 64.9375-40.132813s52.636719 15.539063 64.9375 40.132813l183.304688 313.832031c11.253906 22.507813 10.050781 49.234375-3.179688 70.636719-13.226562 21.40625-36.59375 34.433594-61.757812 34.433594zm0 0"
+                        fill="#f0c419"
+                        data-original="#f0c419"
+                        style=""
+                        class=""
+                      />
+                      <path
+                        xmlns="http://www.w3.org/2000/svg"
+                        d="m439.253906 459.449219h-183.347656v-459.035157c27.566406-.171874 52.804688 15.429688 64.972656 40.167969l183.257813 313.820313c11.269531 22.492187 10.082031 49.21875-3.136719 70.621094-13.222656 21.40625-36.585938 34.433593-61.746094 34.425781zm0 0"
+                        fill="#f0c419"
+                        data-original="#f29c1f"
+                        style=""
+                        class=""
+                      />
+                      <path
+                        xmlns="http://www.w3.org/2000/svg"
+                        d="m291.21875 380c0 19.503906-15.8125 35.3125-35.3125 35.3125s-35.308594-15.808594-35.308594-35.3125c0-19.5 15.808594-35.308594 35.308594-35.308594s35.3125 15.808594 35.3125 35.308594zm0 0"
+                        fill="#ffffff"
+                        data-original="#35495e"
+                        style=""
+                        class=""
+                      />
+                      <path
+                        xmlns="http://www.w3.org/2000/svg"
+                        d="m291.21875 380c0 9.367188-3.71875 18.347656-10.339844 24.972656-6.625 6.621094-15.605468 10.339844-24.972656 10.339844v-70.621094c9.367188-.003906 18.347656 3.714844 24.972656 10.339844 6.621094 6.621094 10.339844 15.605469 10.339844 24.96875zm0 0"
+                        fill="#ffffff"
+                        data-original="#2c3e50"
+                        style=""
+                        class=""
+                      />
+                      <path
+                        xmlns="http://www.w3.org/2000/svg"
+                        d="m255.90625 71.035156c19.5 0 35.3125 15.808594 35.3125 35.3125v167.722656c0 19.5-15.8125 35.308594-35.3125 35.308594s-35.308594-15.808594-35.308594-35.308594v-167.722656c0-19.503906 15.808594-35.3125 35.308594-35.3125zm0 0"
+                        fill="#ffffff"
+                        data-original="#35495e"
+                        style=""
+                        class=""
+                      />
+                      <path
+                        xmlns="http://www.w3.org/2000/svg"
+                        d="m291.21875 106.347656v167.722656c0 9.367188-3.71875 18.347657-10.339844 24.96875-6.625 6.625-15.605468 10.34375-24.972656 10.339844v-238.34375c9.367188-.011718 18.359375 3.703125 24.984375 10.328125 6.621094 6.625 10.339844 15.613281 10.328125 24.984375zm0 0"
+                        fill="#ffffff"
+                        data-original="#2c3e50"
+                        style=""
+                        class=""
+                      />
+                    </g>
+                  </svg>
+                </span>
+                This is an warning alert - check it out!
+              </div>
+                  
+
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + This is an info alert - check it out! +
+ 
+                  
+                      <div class="alerts__info alerts--common">
+                <span class="alerts--margin--common">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                    xmlns:svgjs="http://svgjs.com/svgjs"
+                    version="1.1"
+                    width="24"
+                    height="24"
+                    x="0"
+                    y="0"
+                    viewBox="0 0 438.533 438.533"
+                    style="enable-background: new 0 0 512 512"
+                    xml:space="preserve"
+                    class=""
+                  >
+                    <g>
+                      <g xmlns="http://www.w3.org/2000/svg">
+                        <path
+                          d="M409.133,109.203c-19.608-33.592-46.205-60.189-79.798-79.796C295.736,9.801,259.058,0,219.273,0   c-39.781,0-76.47,9.801-110.063,29.407c-33.595,19.604-60.192,46.201-79.8,79.796C9.801,142.8,0,179.489,0,219.267   c0,39.78,9.804,76.463,29.407,110.062c19.607,33.592,46.204,60.189,79.799,79.798c33.597,19.605,70.283,29.407,110.063,29.407   s76.47-9.802,110.065-29.407c33.593-19.602,60.189-46.206,79.795-79.798c19.603-33.596,29.403-70.284,29.403-110.062   C438.533,179.485,428.732,142.795,409.133,109.203z M182.727,54.813c0-2.666,0.855-4.853,2.57-6.565   c1.712-1.711,3.903-2.57,6.567-2.57h54.82c2.662,0,4.853,0.859,6.561,2.57c1.711,1.712,2.573,3.899,2.573,6.565v45.682   c0,2.664-0.862,4.854-2.573,6.564c-1.708,1.712-3.898,2.568-6.561,2.568h-54.82c-2.664,0-4.854-0.856-6.567-2.568   c-1.715-1.709-2.57-3.9-2.57-6.564V54.813z M292.359,356.309c0,2.662-0.863,4.853-2.57,6.561c-1.704,1.714-3.895,2.57-6.563,2.57   H155.317c-2.667,0-4.854-0.856-6.567-2.57c-1.712-1.708-2.568-3.898-2.568-6.564v-45.682c0-2.67,0.856-4.853,2.568-6.567   c1.713-1.708,3.903-2.57,6.567-2.57h27.41v-91.358h-27.41c-2.667,0-4.853-0.855-6.567-2.568c-1.712-1.711-2.568-3.901-2.568-6.567   v-45.679c0-2.666,0.856-4.853,2.568-6.567c1.715-1.713,3.905-2.568,6.567-2.568h91.367c2.662,0,4.853,0.855,6.561,2.568   c1.711,1.714,2.573,3.901,2.573,6.567v146.179h27.401c2.669,0,4.859,0.855,6.57,2.566c1.704,1.712,2.566,3.901,2.566,6.567v45.683   H292.359z"
+                          fill="#447eae"
+                          data-original="#000000"
+                          style=""
+                          class=""
+                        />
+                      </g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                    </g>
+                  </svg>
+                </span>
+                This is an info alert - check it out!
+              </div>
+                  
+
+
+ +
+ +

Badge

@@ -307,6 +883,7 @@

+
@@ -407,7 +984,7 @@

- +

Cards

diff --git a/resources/prism.css b/resources/prism.css index 60bf550..94ab101 100644 --- a/resources/prism.css +++ b/resources/prism.css @@ -219,6 +219,6 @@ div.code-toolbar { @media screen and (max-width: 576px) { div.code-toolbar > .toolbar { - right: 0.5rem; + right: 1.5rem; } } From 3d3ff8e6744032710df2c0142c6a08409028abbd Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Mon, 29 Mar 2021 00:43:08 +0530 Subject: [PATCH 21/83] style: change alignment of the avatars --- components/avatar.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/avatar.css b/components/avatar.css index 07d9fb7..81d9983 100644 --- a/components/avatar.css +++ b/components/avatar.css @@ -18,7 +18,7 @@ .avatar-display { display: flex; - /* justify-content: flex-start; */ + justify-content: center; flex-wrap: wrap; align-items: center; From 855a0e12106d993ef4c7e2bf5963c57bbbb68e35 Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Mon, 29 Mar 2021 01:46:31 +0530 Subject: [PATCH 22/83] feat: added navigation component --- components/cards.css | 4 +- components/images.css | 6 -- components/navbar.css | 104 +++++++++++++++++++++++++++++ components/navbar.html | 148 +++++++++++++++++++++++++++++++++++++++++ index.css | 3 +- index.html | 142 +++++++++++++++++++++++++++++++++++++++ 6 files changed, 398 insertions(+), 9 deletions(-) create mode 100644 components/navbar.css create mode 100644 components/navbar.html diff --git a/components/cards.css b/components/cards.css index 44009d9..140b9be 100644 --- a/components/cards.css +++ b/components/cards.css @@ -190,7 +190,7 @@ body { height: 20rem; - width: 40rem; + width: 80%; padding: 2rem; border: 1px solid var(--primary-color); @@ -350,7 +350,7 @@ body { /* media queries */ -@media screen and (max-width: 620px) { +@media screen and (max-width: 780px) { .distance-margin { margin: 0.5rem; } diff --git a/components/images.css b/components/images.css index 6a98ac2..121b304 100644 --- a/components/images.css +++ b/components/images.css @@ -46,9 +46,6 @@ body { } @media screen and (min-width: 920px) { - .img-container { - height: 50%; - } .img-container__simple-img, .img-container__round-img { width: 40%; @@ -57,9 +54,6 @@ body { } @media screen and (min-width: 576px) and (max-width: 920px) { - .img-container { - height: 50%; - } .img-container__simple-img, .img-container__round-img { width: 60%; diff --git a/components/navbar.css b/components/navbar.css new file mode 100644 index 0000000..e474b57 --- /dev/null +++ b/components/navbar.css @@ -0,0 +1,104 @@ +@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"); +@import url("../resources/prism.css"); +@import url("./utils.css"); +* { + box-sizing: border-box; +} +body { + margin: 0; + padding: 0; +} +:root { + --primary-font: Lato; + --primary-color: #111827; + --border-color: #e5e5e5; +} + +/* .navbar-container { + margin: 1rem; +} */ + +.navbar-component { + display: flex; + flex-direction: column; + align-items: center; + + position: relative; + padding: 0 1rem 0 1rem; +} + +.navbar-component__title { + display: flex; + align-items: center; + justify-content: center; + + width: 100%; + + padding: 1rem; + padding-top: 0; + + border-bottom: 3px solid var(--primary-color); + + color: var(--primary-color); + + font-family: var(--primary-font); + font-size: 1.3rem; + font-weight: 700; +} + +.navbar-component__menu { + display: flex; + justify-content: space-between; + + width: 100%; + + padding: 1rem; +} + +.navbar-component__menu__btn { + display: inline-block; + width: fit-content; + + padding: 0; + + background-color: transparent; + + border: 0; + + outline: 0; + + cursor: pointer; +} + +.navbar-component__menu__social__twitter, +.navbar-component__menu__social__github { + display: inline-block; + margin: 0 0.1rem; +} + +.navbar-component__title__text { + cursor: pointer; +} + +@media screen and (min-width: 576px) { + .navbar-component { + padding: 0 2rem 0 2rem; + } + .navbar-component__title { + position: absolute; + top: 1rem; + width: 90%; + border: 0; + padding-bottom: 0; + } + + .navbar-component__menu { + padding-left: 0; + padding-right: 0; + z-index: 1; + border-bottom: 3px solid var(--primary-color); + } + .navbar-component__title__text { + z-index: 2; + } +} diff --git a/components/navbar.html b/components/navbar.html new file mode 100644 index 0000000..366b71a --- /dev/null +++ b/components/navbar.html @@ -0,0 +1,148 @@ + + + + + + + Navbar + + + +
+
+ + 
+          
+              <nav class="navbar-component">
+        <div class="navbar-component__menu">
+          <button class="navbar-component__menu__btn">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#111827"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="feather feather-menu"
+            >
+              <line x1="3" y1="12" x2="21" y2="12"></line>
+              <line x1="3" y1="6" x2="21" y2="6"></line>
+              <line x1="3" y1="18" x2="21" y2="18"></line>
+            </svg>
+          </button>
+          <div class="navbar-component__menu_social">
+            <a href="#" class="navbar-component__menu__social__github">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="feather feather-github"
+              >
+                <path
+                  d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
+                ></path>
+              </svg>
+            </a>
+            <a href="#" class="navbar-component__menu__social__twitter">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="#1DA1F2"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="feather feather-twitter"
+              >
+                <path
+                  d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"
+                ></path>
+              </svg>
+            </a>
+          </div>
+        </div>
+        <div class="navbar-component__title">
+          <span class="navbar-component__title__text">UNDEFINED</span>
+        </div>
+      </nav>
+          
+
+
+
+ + + + diff --git a/index.css b/index.css index e22b8cd..10b7c9e 100644 --- a/index.css +++ b/index.css @@ -1,11 +1,12 @@ @import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"); @import url("./resources/prism.css"); +@import url("./components/utils.css"); @import url("./components/images.css"); @import url("./components/avatar.css"); @import url("./components/badge.css"); @import url("./components/cards.css"); @import url("./components/alerts.css"); -@import url("./components/utils.css"); +@import url("./components/navbar.css"); * { box-sizing: border-box; margin: 0; diff --git a/index.html b/index.html index 2f7d43b..e7d5910 100644 --- a/index.html +++ b/index.html @@ -86,6 +86,7 @@ Image Input Lists + Navigation Modal Rating Slider @@ -1652,9 +1653,150 @@

+

+ Navigation +

+
+
+ + 
+          
+              <nav class="navbar-component">
+        <div class="navbar-component__menu">
+          <button class="navbar-component__menu__btn">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#111827"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="feather feather-menu"
+            >
+              <line x1="3" y1="12" x2="21" y2="12"></line>
+              <line x1="3" y1="6" x2="21" y2="6"></line>
+              <line x1="3" y1="18" x2="21" y2="18"></line>
+            </svg>
+          </button>
+          <div class="navbar-component__menu_social">
+            <a href="#" class="navbar-component__menu__social__github">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="feather feather-github"
+              >
+                <path
+                  d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
+                ></path>
+              </svg>
+            </a>
+            <a href="#" class="navbar-component__menu__social__twitter">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="#1DA1F2"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="feather feather-twitter"
+              >
+                <path
+                  d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"
+                ></path>
+              </svg>
+            </a>
+          </div>
+        </div>
+        <div class="navbar-component__title">
+          <span class="navbar-component__title__text">UNDEFINED</span>
+        </div>
+      </nav>
+          
+
+
+
+
+

From 3cf9c05197514371bb3e1ebd59804eee9d6d5a06 Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Tue, 30 Mar 2021 23:36:28 +0530 Subject: [PATCH 23/83] style: change copy button margin in mobile view --- components/button.css | 0 components/button.html | 0 resources/prism.css | 2 +- 3 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 components/button.css create mode 100644 components/button.html diff --git a/components/button.css b/components/button.css new file mode 100644 index 0000000..e69de29 diff --git a/components/button.html b/components/button.html new file mode 100644 index 0000000..e69de29 diff --git a/resources/prism.css b/resources/prism.css index 94ab101..60bf550 100644 --- a/resources/prism.css +++ b/resources/prism.css @@ -219,6 +219,6 @@ div.code-toolbar { @media screen and (max-width: 576px) { div.code-toolbar > .toolbar { - right: 1.5rem; + right: 0.5rem; } } From 0fb3a993fb800c7c9ab14dae26976239827895f1 Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Wed, 31 Mar 2021 11:36:43 +0530 Subject: [PATCH 24/83] feat: added link buttons --- components/button.css | 130 +++++++++++++++++++++++++++++++++ components/button.html | 162 +++++++++++++++++++++++++++++++++++++++++ components/cards.css | 17 +++-- components/utils.css | 9 ++- index.css | 2 +- 5 files changed, 310 insertions(+), 10 deletions(-) diff --git a/components/button.css b/components/button.css index e69de29..399e97a 100644 --- a/components/button.css +++ b/components/button.css @@ -0,0 +1,130 @@ +@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"); +@import url("../resources/prism.css"); +@import url("./utils.css"); +* { + box-sizing: border-box; +} +body { + margin: 0; + padding: 0; +} +:root { + --primary-font: Lato; + --font-weight: 600; + --primary-color: #111827; + --secondary-color: #fff; + --border-color: #e5e5e5; + --button-radius: 0.3rem; + --twitter-color: #1da1f2; + --facebook-color: #385898; + --github-color: #24292e; + --button-margin: 0.5rem; + --button-padding: 0.6rem; +} + +.button__container { + padding: 1rem; + + margin: 1rem; + + border: 1px solid black; +} + +/* primary button */ +.button__primary { + background-color: var(--secondary-color); + + color: var(--primary-color); + + border: 1.8px solid var(--primary-color); + + padding: var(--button-padding); + + margin: var(--button-margin); + + font-family: var(--primary-font); + font-weight: var(--font-weight); + + outline: var(--primary-color); + + cursor: pointer; +} +/* secondary button */ +.button__secondary { + background-color: var(--primary-color); + + color: var(--secondary-color); + + border: 1.8px solid var(--primary-color); + + padding: var(--button-padding); + + margin: var(--button-margin); + + font-family: var(--primary-font); + font-weight: var(--font-weight); + + cursor: pointer; + + outline: var(--primary-color); + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), + 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); +} + +/* round button utility */ + +.button--round { + border-radius: var(--button-radius); +} + +/* Link Button */ + +.button__link-button { + text-decoration: none; + + display: flex; + justify-content: center; + align-items: center; + + padding: var(--button-padding); + + margin: var(--button-margin); + + background-color: var(--primary-font); + + color: var(--secondary-color); + + font-family: var(--primary-font); + font-weight: var(--font-weight); + + max-width: max-content; + + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), + 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); +} + +.svg--right-margin { + margin-right: 0.3rem; +} + +.twitter--btn { + background-color: var(--twitter-color); + color: var(--secondary-color); +} + +.facebook--btn { + background-color: var(--facebook-color); + color: var(--secondary-color); +} + +.github--btn { + background-color: var(--github-color); + color: var(--secondary-color); +} + +@media screen and (min-width: 576px) { + .button__primary:hover { + background-color: var(--primary-color); + color: var(--secondary-color); + } +} diff --git a/components/button.html b/components/button.html index e69de29..7f4af54 100644 --- a/components/button.html +++ b/components/button.html @@ -0,0 +1,162 @@ + + + + + + + + Button Component + + +
+
+
+ + + + +
+ 
+          
+            <button class="button__primary">ADD TO CART</button> 
+            <button class="button__secondary">ADD TO CART</button>
+            <button class="button__primary button--round">ADD TO CART</button>      
+            <button class="button__secondary button--round">ADD TO CART</button>
+          
+
+
+ +
+
+ + + + + + + + + + + + + Github + +
+ 
+          
+            <a href="#" class="button__link-button button--round">
+              <span class="svg--right-margin">
+                <!-- put your choice of svg here -->
+              </span>
+                <!-- put your text -->
+            </a>
+          
+
+
+ +
+ + + diff --git a/components/cards.css b/components/cards.css index 140b9be..e9f8218 100644 --- a/components/cards.css +++ b/components/cards.css @@ -32,7 +32,7 @@ body { max-width: 13rem; - font-family: Lato; + font-family: var(--primary-font); font-weight: bolder; position: relative; @@ -91,21 +91,22 @@ body { margin: 5px 0; } .primary-btn { - background-color: #fff; + background-color: var(--secondary-color); border: 1.8px solid var(--primary-color); padding: 0.6rem; - font-family: Lato; + font-family: var(--primary-font); font-weight: 900; - outline: none; + border-radius: 0.3rem; + outline: var(--primary-color); } .primary-btn:hover { background-color: var(--primary-color); - color: #fff; + color: var(--secondary-color); } .price-tag { @@ -163,7 +164,7 @@ body { } .text-card-title { - font-family: Lato; + font-family: var(--primary-font); margin: 0; @@ -175,7 +176,7 @@ body { .text-card-info { margin: 0.5rem 0; - font-family: Lato; + font-family: var(--primary-font); } /* horizontal card */ @@ -183,7 +184,7 @@ body { .horizontal-product-container { display: flex; - font-family: Lato; + font-family: var(--primary-font); font-weight: bolder; position: relative; diff --git a/components/utils.css b/components/utils.css index 4d1c175..b06175d 100644 --- a/components/utils.css +++ b/components/utils.css @@ -3,7 +3,7 @@ } .container--border { border: 1px solid var(--border-color); - padding: 1rem 0 1rem 0; + padding: 1rem 0 0rem 0; } .container--margin { @@ -20,6 +20,13 @@ justify-content: center; } */ +.flex--container { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; +} + .responsive--container { width: 100%; } diff --git a/index.css b/index.css index 10b7c9e..be87cda 100644 --- a/index.css +++ b/index.css @@ -137,7 +137,7 @@ padding: 0.3rem 0; - font-size: 1.3rem; + font-size: 1.1rem; color: var(--primary-color); font-family: var(--primary-font); font-weight: 600; From fd906b87beb0c2f3fb4d9d64b1601b6fcd98bee5 Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Wed, 31 Mar 2021 11:42:28 +0530 Subject: [PATCH 25/83] refactor: added box shadow in variables --- components/button.css | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/components/button.css b/components/button.css index 399e97a..19920f1 100644 --- a/components/button.css +++ b/components/button.css @@ -20,13 +20,14 @@ body { --github-color: #24292e; --button-margin: 0.5rem; --button-padding: 0.6rem; + --button-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), + 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } .button__container { padding: 1rem; margin: 1rem; - border: 1px solid black; } @@ -67,8 +68,7 @@ body { cursor: pointer; outline: var(--primary-color); - box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), - 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + box-shadow: var(--button-shadow); } /* round button utility */ @@ -99,8 +99,7 @@ body { max-width: max-content; - box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), - 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + box-shadow: var(--button-shadow); } .svg--right-margin { From 19159a673784f4ec457ff034774adaeabb030326 Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Wed, 31 Mar 2021 12:16:01 +0530 Subject: [PATCH 26/83] fix: overflow of the codeblocks in all components --- components/alerts.css | 4 ++++ components/badge.css | 18 ++++++++---------- components/button.html | 7 ++++++- components/cards.css | 5 +++++ components/navbar.css | 5 +++++ resources/prism.css | 6 +----- 6 files changed, 29 insertions(+), 16 deletions(-) diff --git a/components/alerts.css b/components/alerts.css index a6d21bb..c2adf4a 100644 --- a/components/alerts.css +++ b/components/alerts.css @@ -70,3 +70,7 @@ width: 50%; } } + +.alerts .language-markup { + height: 10rem; +} diff --git a/components/badge.css b/components/badge.css index a07648b..28277fe 100644 --- a/components/badge.css +++ b/components/badge.css @@ -114,13 +114,11 @@ border-radius: 50%; } -/* setting some attributes of code block */ -/* .badge-icon-container .language-markup { - max-height: 100px; -} */ - -/* left to fix */ -/* .badge-icon-container .code-toolbar .toolbar { - top: 1.5rem; - right: 1.5rem; -} */ +/* fix overflow of the code block */ +.badge-icon-container .language-markup { + height: 10rem; +} + +.avatar-container .language-markup { + height: 10rem; +} diff --git a/components/button.html b/components/button.html index 7f4af54..b603f0c 100644 --- a/components/button.html +++ b/components/button.html @@ -17,13 +17,18 @@ 
-          
+          
             <button class="button__primary">ADD TO CART</button> 
             <button class="button__secondary">ADD TO CART</button>
             <button class="button__primary button--round">ADD TO CART</button>      
             <button class="button__secondary button--round">ADD TO CART</button>
+ 
+          
+            <button class="button__secondary">ADD TO CART</button>
+          
+
diff --git a/components/cards.css b/components/cards.css index e9f8218..e5427c4 100644 --- a/components/cards.css +++ b/components/cards.css @@ -349,6 +349,11 @@ body { font-family: var(--primary-font); } +/* fix overflow of the code block */ +.cards-container .language-markup { + height: 10rem; +} + /* media queries */ @media screen and (max-width: 780px) { diff --git a/components/navbar.css b/components/navbar.css index e474b57..e052c0c 100644 --- a/components/navbar.css +++ b/components/navbar.css @@ -80,6 +80,11 @@ body { cursor: pointer; } +/* fix overflow the codeblock */ +.navbar-container .language-markup { + height: 10rem; +} + @media screen and (min-width: 576px) { .navbar-component { padding: 0 2rem 0 2rem; diff --git a/resources/prism.css b/resources/prism.css index 60bf550..077ac86 100644 --- a/resources/prism.css +++ b/resources/prism.css @@ -213,12 +213,8 @@ div.code-toolbar { margin-top: 1rem; } -.language-markup { - height: 10rem; -} - @media screen and (max-width: 576px) { div.code-toolbar > .toolbar { - right: 0.5rem; + right: 1.1rem; } } From 5ac9b8ee0a739c110d0f97e612418921e5818b69 Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Wed, 31 Mar 2021 14:50:47 +0530 Subject: [PATCH 27/83] feat: added icon button --- components/button.css | 46 +++++++++- components/button.html | 192 ++++++++++++++++++++++++++++++++++++++++- 2 files changed, 234 insertions(+), 4 deletions(-) diff --git a/components/button.css b/components/button.css index 19920f1..ba26aba 100644 --- a/components/button.css +++ b/components/button.css @@ -90,10 +90,12 @@ body { margin: var(--button-margin); - background-color: var(--primary-font); + background-color: var(--primary-color); color: var(--secondary-color); + border: 1px solid var(--primary-color); + font-family: var(--primary-font); font-weight: var(--font-weight); @@ -106,19 +108,55 @@ body { margin-right: 0.3rem; } +/* icon button */ +.icon__button { + outline: var(--primary-color); + + /* border: 1px solid var(--primary-color); */ + + background-color: var(--secondary-color); + + border: 0; + + /* color: var(--secondary-color); */ + + padding: var(--button-padding); + + box-shadow: var(--button-shadow); + + margin: var(--button-margin); +} + +/* utilities for twitter, facebook and github buttons */ .twitter--btn { background-color: var(--twitter-color); color: var(--secondary-color); + + border: 1px solid var(--twitter-color); } .facebook--btn { background-color: var(--facebook-color); color: var(--secondary-color); + + border: 1px solid var(--facebook-color); } .github--btn { background-color: var(--github-color); color: var(--secondary-color); + + border: 1px solid var(--github-color); +} + +/* fix overflow for code block */ +.button__container .language-markup { + overflow-x: scroll; + overflow-y: hidden; +} + +.button__container .toolbar { + right: 1rem; } @media screen and (min-width: 576px) { @@ -126,4 +164,10 @@ body { background-color: var(--primary-color); color: var(--secondary-color); } + + /* codeblock overflow fix for desktop and tablets */ + .button__container .language-markup { + overflow-x: hidden; + overflow-y: hidden; + } } diff --git a/components/button.html b/components/button.html index b603f0c..a57ac93 100644 --- a/components/button.html +++ b/components/button.html @@ -19,9 +19,6 @@ 
           
             <button class="button__primary">ADD TO CART</button> 
-            <button class="button__secondary">ADD TO CART</button>
-            <button class="button__primary button--round">ADD TO CART</button>      
-            <button class="button__secondary button--round">ADD TO CART</button>
           
         
@@ -29,6 +26,15 @@
             <button class="button__secondary">ADD TO CART</button>
+ 
+          
+            <button class="button__primary button--round">ADD TO CART</button>      
+          
+
+ 
+          
+            <button class="button__secondary button--round">ADD TO CART</button>
+
@@ -161,6 +167,186 @@
+
+
+ + + + +
+ 
+          
+            <button class="icon__button">
+              <!-- put your choice of svg here -->
+            </button>
+          
+
+
From 11a2f60f1ffa34088afec1f80bd8d7697651695a Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Wed, 31 Mar 2021 16:06:18 +0530 Subject: [PATCH 28/83] refactor: fix copy button alignment --- components/alerts.css | 8 ++++---- index.css | 15 ++++++++------- index.html | 2 +- resources/prism.css | 2 +- 4 files changed, 14 insertions(+), 13 deletions(-) diff --git a/components/alerts.css b/components/alerts.css index c2adf4a..54ff254 100644 --- a/components/alerts.css +++ b/components/alerts.css @@ -59,6 +59,10 @@ color: var(--info-alert-fontcolor); } +.alerts .language-markup { + height: 10rem; +} + @media screen and (max-width: 620px) { .alerts--common { margin: 0 1rem 0 1rem; @@ -70,7 +74,3 @@ width: 50%; } } - -.alerts .language-markup { - height: 10rem; -} diff --git a/index.css b/index.css index be87cda..dc244f6 100644 --- a/index.css +++ b/index.css @@ -99,7 +99,6 @@ } /* sidebar */ - .sidebar { background-color: var(--backgroud-color); border-right: 3px solid var(--primary-color); @@ -155,7 +154,8 @@ flex-direction: column; margin: 1rem 0; - height: 100vh; + /* height: 100vh; */ + /* border: 1px solid black; */ } .component--mod { @@ -182,18 +182,19 @@ div.code-toolbar { display: flex; } .sidebar { - width: 20%; + width: 15%; } .component-container { - /* display: flex; - flex-direction: column; */ + display: flex; + flex-direction: column; + justify-content: center; width: 80%; - padding-left: 3rem; + /* padding-left: 0.5rem; */ /* margin: 2rem; */ position: absolute; /* top: 0; */ - left: 20%; + left: 19.5%; } .main { padding: 1rem 2rem; diff --git a/index.html b/index.html index e7d5910..04b093d 100644 --- a/index.html +++ b/index.html @@ -97,7 +97,7 @@
-
+

Avatar

diff --git a/resources/prism.css b/resources/prism.css index 077ac86..c56b7ac 100644 --- a/resources/prism.css +++ b/resources/prism.css @@ -215,6 +215,6 @@ div.code-toolbar { @media screen and (max-width: 576px) { div.code-toolbar > .toolbar { - right: 1.1rem; + right: 0.7rem; } } From 4d1e4ca694c750434f12042b02d2aa1504496ae0 Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Wed, 31 Mar 2021 17:16:09 +0530 Subject: [PATCH 29/83] feat: added hox shadow to cards --- components/button.css | 20 +++++++++ components/button.html | 93 ++++++++++++++++++++++++++++++++++++++++++ components/cards.css | 24 +++++++---- resources/prism.css | 2 +- 4 files changed, 130 insertions(+), 9 deletions(-) diff --git a/components/button.css b/components/button.css index ba26aba..9d35fb9 100644 --- a/components/button.css +++ b/components/button.css @@ -127,6 +127,26 @@ body { margin: var(--button-margin); } +/* floating button */ +.floating__button { + outline: var(--primary-color); + + background-color: var(--primary-color); + + border: 0; + + padding: var(--button-padding); + + display: flex; + justify-content: center; + + box-shadow: var(--button-shadow); + + margin: var(--button-margin); + + border-radius: 50%; +} + /* utilities for twitter, facebook and github buttons */ .twitter--btn { background-color: var(--twitter-color); diff --git a/components/button.html b/components/button.html index a57ac93..783caff 100644 --- a/components/button.html +++ b/components/button.html @@ -347,6 +347,99 @@
+ +
+
+ + + +
+ 
+          
+            <button class="floating__button">
+              <!-- put your choice of svg here -->
+            </button>
+          
+
+
diff --git a/components/cards.css b/components/cards.css index e5427c4..8fb3b5f 100644 --- a/components/cards.css +++ b/components/cards.css @@ -16,6 +16,8 @@ body { --primary-font: Lato; --wish-svg-stroke: #f16565; --close-svg-stroke: #e84545; + --shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), + 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } .cards-container { display: flex; @@ -25,7 +27,7 @@ body { width: 100%; /* justify-content: space-evenly; */ } - +/* product card */ .product-container { display: flex; flex-direction: column; @@ -37,7 +39,10 @@ body { position: relative; + padding: 1rem; + /* padding: 1rem; */ + box-shadow: var(--shadow); } .wish-btn { @@ -54,8 +59,8 @@ body { outline: 0; position: absolute; - bottom: 6.8rem; - right: 0.5rem; + bottom: 7.1rem; + right: 1.3rem; } .heart-svg:hover { @@ -74,8 +79,8 @@ body { outline: 0; position: absolute; - top: 0.5rem; - left: 0.2rem; + top: 1.4rem; + left: 1rem; } .svg-close:hover { @@ -132,6 +137,8 @@ body { height: 100%; position: absolute; + top: 0; + left: 0; } .overlay-text { @@ -193,6 +200,8 @@ body { width: 80%; + box-shadow: var(--shadow); + padding: 2rem; border: 1px solid var(--primary-color); } @@ -252,9 +261,8 @@ body { position: absolute; top: 2rem; right: 2rem; - bottom: 0; - - height: fit-content; + width: fit-content; + height: 1.5rem; } /* shadow card */ diff --git a/resources/prism.css b/resources/prism.css index c56b7ac..66d1b26 100644 --- a/resources/prism.css +++ b/resources/prism.css @@ -135,7 +135,7 @@ div.code-toolbar { div.code-toolbar > .toolbar { position: absolute; top: 0.5rem; - right: 1.5rem; + right: 1.2rem; transition: opacity 0.3s ease-in-out; /* opacity: 0; */ background-color: red; From 2fa4ca57ab29aadd477595a6ef6791f6d351c6d4 Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Wed, 31 Mar 2021 17:22:26 +0530 Subject: [PATCH 30/83] refactor: change horizontal card alignment --- components/cards.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/cards.css b/components/cards.css index 8fb3b5f..0f5d04f 100644 --- a/components/cards.css +++ b/components/cards.css @@ -388,12 +388,12 @@ body { } .horizontal-primary-btn { - width: 100%; - height: 30%; + width: 80%; + height: 25%; } .second-horizontal-section { - justify-content: space-between; + justify-content: space-around; padding-left: 1rem; } From 1d4fe01ab307905e42760b99d57ab3e4f360ba76 Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Wed, 31 Mar 2021 17:56:42 +0530 Subject: [PATCH 31/83] refactor: changed shadow card img class --- components/cards.css | 9 ++++++++- components/cards.html | 4 ++-- components/images.css | 18 +++++------------- index.html | 6 +----- 4 files changed, 16 insertions(+), 21 deletions(-) diff --git a/components/cards.css b/components/cards.css index 0f5d04f..ef8b47b 100644 --- a/components/cards.css +++ b/components/cards.css @@ -345,10 +345,17 @@ body { .product-img { width: 100%; - object-fit: contain; + object-fit: cover; object-position: center; } +.shadow_card--img { + width: 100%; + object-fit: cover; + object-position: center; + height: 100%; +} + .distance-margin { margin: 2rem; } diff --git a/components/cards.html b/components/cards.html index 2b6f4d9..bddaa5e 100644 --- a/components/cards.html +++ b/components/cards.html @@ -413,7 +413,7 @@

Lorem ipsum

product @@ -512,7 +512,7 @@

Lorem ipsum dolor sit

<div class="shadow_card"> <a href="#" class="shadow_card__productimgLink"> <img - class="product-img shadow_card__productimg" + class="shadow_card--img shadow_card__productimg" src="https://source.unsplash.com/random" alt="product" /> diff --git a/components/images.css b/components/images.css index 121b304..d95f0e6 100644 --- a/components/images.css +++ b/components/images.css @@ -21,9 +21,9 @@ body { .img-container__simple-img, .img-container__round-img { - /* width: 50%; */ - padding: 1rem; + width: 100%; height: 25rem; + margin: auto; } .responsive-img { @@ -39,24 +39,16 @@ body { .img-container--border { border: 1px solid var(--border-color); + padding: 1rem 0 0 0; } .img-container--margin { margin-bottom: 1rem; } -@media screen and (min-width: 920px) { - .img-container__simple-img, - .img-container__round-img { - width: 40%; - height: 25rem; - } -} - -@media screen and (min-width: 576px) and (max-width: 920px) { +@media screen and (min-width: 450px) { .img-container__simple-img, .img-container__round-img { - width: 60%; - height: 30rem; + width: 25rem; } } diff --git a/index.html b/index.html index 04b093d..ecaddba 100644 --- a/index.html +++ b/index.html @@ -1506,7 +1506,7 @@

<div class="shadow_card"> <a href="#" class="shadow_card__productimgLink"> <img - class="product-img shadow_card__productimg" + class="shadow_card--img shadow_card__productimg" src="https://source.unsplash.com/random" alt="product" /> @@ -1621,13 +1621,11 @@ 

                   
-                    <div class="img-container__simple-img">
                   <img
                     class="responsive-img"
                     src="https://source.unsplash.com/random"
                     alt="round_img"
                   />
-                </div>
@@ -1641,13 +1639,11 @@ 

                   
-                      <div class="img-container__round-img round">
                     <img
                       class="responsive-img img-round"
                       src="https://source.unsplash.com/random"
                       alt="round_img"
                     />
-                  </div>
From 3d2fdcfcc741551669a8463bc83741bdae4a28bc Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Wed, 31 Mar 2021 23:42:31 +0530 Subject: [PATCH 32/83] feat: added compiled css --- components/badge.css | 22 +- components/cards.css | 2 +- components/compiled.css | 1171 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 1186 insertions(+), 9 deletions(-) create mode 100644 components/compiled.css diff --git a/components/badge.css b/components/badge.css index 28277fe..573b8b8 100644 --- a/components/badge.css +++ b/components/badge.css @@ -4,6 +4,12 @@ --presence-color: #3aa169; --badge-border-color: #fff; --border-color: #e5e5e5; + --primary-font: Lato; + --primary-color: #111827; + --border-color: #e5e5e5; + --badge-color-pink: #f16565; + --secondary-color: #fff; + --badge-color-blue: #2a77f0; } .badge-icon-container, @@ -27,17 +33,17 @@ display: inline-block; padding: 2rem; border-radius: 50%; - color: #111827; + color: var(--primary-color); } .num-badge { position: absolute; - background-color: #f16565; - color: white; + background-color: var(--badge-color-pink); + color: var(--secondary-color); padding: 0.2rem; - border: 2px solid white; + border: 2px solid var(--secondary-color); border-radius: 60%; - font-family: Ubuntu; + font-family: var(--primary-font); font-size: 0.8rem; font-weight: 600; bottom: 2.8rem; @@ -45,12 +51,12 @@ } .cart-badge { - background-color: #f16565; - color: white; + background-color: var(--badge-color-pink); + color: var(--secondary-color); } .notif-badge { - background-color: #2a77f0; + background-color: var(--badge-color-blue); } .avatar-container .avatar-display { diff --git a/components/cards.css b/components/cards.css index ef8b47b..4e2a826 100644 --- a/components/cards.css +++ b/components/cards.css @@ -59,7 +59,7 @@ body { outline: 0; position: absolute; - bottom: 7.1rem; + bottom: 7.5rem; right: 1.3rem; } diff --git a/components/compiled.css b/components/compiled.css new file mode 100644 index 0000000..ca1912b --- /dev/null +++ b/components/compiled.css @@ -0,0 +1,1171 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; + padding: 0; +} + +:root { + --primary-font: Lato; + --font-weight: 600; + --primary-color: #111827; + --secondary-color: #fff; + --border-color: #e5e5e5; + --button-radius: 0.3rem; + --twitter-color: #1da1f2; + --facebook-color: #385898; + --github-color: #24292e; + --button-margin: 0.5rem; + --button-padding: 0.6rem; + --button-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), + 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + --success-alert-backcolor: #c6f4d5; + --success-alert-fontcolor: #3bb54a; + --error-alert-backcolor: #fdd7d7; + --error-alert-fontcolor: #d1403f; + --warning-alert-backcolor: #feebc8; + --warning-alert-fontcolor: #f0c419; + --info-alert-backcolor: #bee3f8; + --info-alert-fontcolor: #447eae; + --alert-font-size: 1.3rem; + --alert-icon-margin-right: 1rem; + --alert-padding: 1rem; + --presence-color: #3aa169; + --badge-border-color: #fff; + --wish-svg-stroke: #f16565; + --close-svg-stroke: #e84545; +} + +/*-------------------- Avatar ---------------------*/ + +.avatar { + display: flex; + /* padding: 1rem; */ + /* border: 1px solid black; */ + flex-direction: column; + width: 100%; + border: 1px solid var(--border-color); + border-radius: 5px; +} + +.avatar-display { + display: flex; + justify-content: center; + flex-wrap: wrap; + align-items: center; + + padding: 1rem; + border-bottom: 0; +} + +.img-big { + max-width: 96px; +} + +.img-medium { + max-width: 64px; +} + +.img-small { + max-width: 48px; +} + +.img-ex-small { + max-width: 32px; +} + +/* utils */ + +.img-utils { + margin: 1.7rem; + width: 100%; + border-radius: 50%; +} + +/*-------------------- alerts css ------------------*/ + +.alerts { + width: 100%; +} + +.alerts--common { + display: flex; + align-items: center; + padding: var(--alert-padding); + + font-size: var(--alert-font-size); + font-family: var(--primary-font); + + border-radius: 0.5rem; +} + +.alerts--margin--common { + margin-right: var(--alert-icon-margin-right); +} + +.alerts__success { + background-color: var(--success-alert-backcolor); + color: var(--success-alert-fontcolor); +} + +.alerts__error { + background-color: var(--error-alert-backcolor); + color: var(--error-alert-fontcolor); +} + +.alerts__warning { + background-color: var(--warning-alert-backcolor); + color: var(--warning-alert-fontcolor); +} + +.alerts__info { + background-color: var(--info-alert-backcolor); + color: var(--info-alert-fontcolor); +} + +.alerts .language-markup { + height: 10rem; +} + +/* buttons css */ + +/* primary button */ +.button__primary { + background-color: var(--secondary-color); + + color: var(--primary-color); + + border: 1.8px solid var(--primary-color); + + padding: var(--button-padding); + + margin: var(--button-margin); + + font-family: var(--primary-font); + font-weight: var(--font-weight); + + outline: var(--primary-color); + + cursor: pointer; +} +/* secondary button */ +.button__secondary { + background-color: var(--primary-color); + + color: var(--secondary-color); + + border: 1.8px solid var(--primary-color); + + padding: var(--button-padding); + + margin: var(--button-margin); + + font-family: var(--primary-font); + font-weight: var(--font-weight); + + cursor: pointer; + + outline: var(--primary-color); + box-shadow: var(--button-shadow); +} + +/* round button utility */ + +.button--round { + border-radius: var(--button-radius); +} + +/* Link Button */ + +.button__link-button { + text-decoration: none; + + display: flex; + justify-content: center; + align-items: center; + + padding: var(--button-padding); + + margin: var(--button-margin); + + background-color: var(--primary-color); + + color: var(--secondary-color); + + border: 1px solid var(--primary-color); + + font-family: var(--primary-font); + font-weight: var(--font-weight); + + max-width: max-content; + + box-shadow: var(--button-shadow); +} + +.svg--right-margin { + margin-right: 0.3rem; +} + +/* icon button */ +.icon__button { + outline: var(--primary-color); + + /* border: 1px solid var(--primary-color); */ + + background-color: var(--secondary-color); + + border: 0; + + /* color: var(--secondary-color); */ + + padding: var(--button-padding); + + box-shadow: var(--button-shadow); + + margin: var(--button-margin); +} + +/* floating button */ +.floating__button { + outline: var(--primary-color); + + background-color: var(--primary-color); + + border: 0; + + padding: var(--button-padding); + + display: flex; + justify-content: center; + + box-shadow: var(--button-shadow); + + margin: var(--button-margin); + + border-radius: 50%; +} + +/* utilities for twitter, facebook and github buttons */ +.twitter--btn { + background-color: var(--twitter-color); + color: var(--secondary-color); + + border: 1px solid var(--twitter-color); +} + +.facebook--btn { + background-color: var(--facebook-color); + color: var(--secondary-color); + + border: 1px solid var(--facebook-color); +} + +.github--btn { + background-color: var(--github-color); + color: var(--secondary-color); + + border: 1px solid var(--github-color); +} + +.button__container .toolbar { + right: 1rem; +} + +/*------------------------- Badges ----------------------------*/ + +.badge-icon-container, +.avatar-container { + display: flex; + flex-direction: column; + border: 1px solid var(--border-color); + border-bottom: 0; + margin-bottom: 2rem; + border-radius: 5px; +} +.product-container { + display: flex; + flex-direction: column; + + max-width: 13rem; + + font-family: var(--primary-font); + font-weight: bolder; + + position: relative; + + padding: 1rem; + + /* padding: 1rem; */ + box-shadow: var(--shadow); +} + +.wish-btn { + display: inline-block; + + align-self: flex-end; + + width: fit-content; + + padding: 0; + + background-color: transparent; + border: 0; + outline: 0; + + position: absolute; + bottom: 7.5rem; + right: 1.3rem; +} + +.heart-svg:hover { + stroke: var(--wish-svg-stroke); +} + +.close-btn { + display: inline-block; + + width: fit-content; + + padding: 0; + + background-color: transparent; + border: 0; + outline: 0; + + position: absolute; + top: 1.4rem; + left: 1rem; +} + +.svg-close:hover { + stroke: var(--close-svg-stroke); +} + +.product-info { + text-decoration: none; + + color: var(--primary-color); + font-size: 1.2rem; + + margin: 5px 0; +} +.primary-btn { + background-color: var(--secondary-color); + + border: 1.8px solid var(--primary-color); + + padding: 0.6rem; + + font-family: var(--primary-font); + font-weight: 900; + + border-radius: 0.3rem; + outline: var(--primary-color); +} + +.primary-btn:hover { + background-color: var(--primary-color); + color: var(--secondary-color); +} + +.price-tag { + display: block; + + margin: 3px 0; + + font-size: 1rem; + + font-weight: normal; +} + +.overlay-div { + background: rgba(255, 255, 255, 0.5); + + display: flex; + flex-direction: column; + align-items: center; + + padding: 1rem; + + width: 100%; + height: 100%; + + position: absolute; + top: 0; + left: 0; +} + +.overlay-text { + position: absolute; + + height: fit-content; + + color: var(--primary-color); + + top: 8rem; +} + +/* text card */ + +.text-card { + display: flex; + flex-direction: column; + + padding: 1rem; + + border: 1px solid var(--primary-color); + border-radius: 0.3rem; + + color: var(--secondary-color); + + max-width: 20rem; + /* max-height: 9rem; */ + + background-color: var(--primary-color); +} + +.text-card-title { + font-family: var(--primary-font); + + margin: 0; + + padding: 0.5rem 0; + + border-bottom: 1px solid var(--primary-color); +} + +.text-card-info { + margin: 0.5rem 0; + + font-family: var(--primary-font); +} + +/* horizontal card */ + +.horizontal-product-container { + display: flex; + + font-family: var(--primary-font); + font-weight: bolder; + + position: relative; + + height: 20rem; + + width: 80%; + + box-shadow: var(--shadow); + + padding: 2rem; + border: 1px solid var(--primary-color); +} + +.hcard-product-info { + display: block; + /* height: 100%; */ + width: 40%; + margin: 0; +} + +.second-horizontal-section { + display: flex; + flex-direction: column; + justify-content: space-between; + + padding: 0 0 0 2rem; + flex-shrink: 2; + + border-left: 0; + width: 60%; +} + +.hcard-title { + margin: 0; +} + +.hcard-img { + height: 100%; + object-fit: cover !important; +} + +.hcard-title-desc { + font-weight: 100; +} + +.hcard-price { + margin: 0.5rem 0; +} + +.horizontal-primary-btn { + display: inline-block; + + font-size: 0.7rem; + + width: 10rem; +} + +.hcard-product-desc { + margin: 0.3rem 0; + + font-weight: 200; + font-size: 1rem; +} + +.hcard-wish-btn { + position: absolute; + top: 2rem; + right: 2rem; + width: fit-content; + height: 1.5rem; +} + +/* shadow card */ + +.shadow_card { + display: flex; + flex-direction: column; + + height: 30rem; + + border-radius: 1rem; + /* box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), + 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), + 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), + 0 100px 80px rgba(0, 0, 0, 0.12); */ + + width: 20rem; + + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +.shadow_card__productimgLink { + /* display: block; */ + margin: 0; + height: 50%; +} + +.shadow_card__productimg { + display: block; + /* height: 100%; */ +} + +.shadow_card__product-info { + display: flex; + flex-direction: column; + justify-content: space-between; + + background-color: var(--secondary-color); + color: var(--primary-color); + + padding: 1rem; + + height: 50%; + + position: relative; +} + +.shadow_card__product-title { + margin: 0; + + font-family: var(--primary-font); +} + +.shadow_card__product-rating__title { + display: block; + + font-weight: 700; +} + +.shadow_card--wishbtn { + display: inline-block; + + align-self: flex-end; + + width: fit-content; + + padding: 0; + + background-color: transparent; + border: 0; + outline: 0; + + position: absolute; + + top: 1rem; + right: 1rem; +} + +/* utility */ + +.product-img { + width: 100%; + object-fit: cover; + object-position: center; +} + +.shadow_card--img { + width: 100%; + object-fit: cover; + object-position: center; + height: 100%; +} + +.distance-margin { + margin: 2rem; +} + +.font-family { + font-family: var(--primary-font); +} + +/*------------------- Badge ------------------*/ + +.badge-div { + display: flex; + border-bottom: 1px solid var(--border-color); +} + +.badge-icon { + position: relative; + text-decoration: none; + display: inline-block; + padding: 2rem; + border-radius: 50%; + color: #111827; +} + +.num-badge { + position: absolute; + background-color: #f16565; + color: white; + padding: 0.2rem; + border: 2px solid white; + border-radius: 60%; + font-family: var(--primary-font); + font-size: 0.8rem; + font-weight: 600; + bottom: 2.8rem; + right: 1rem; +} + +.cart-badge { + background-color: #f16565; + color: white; +} + +.notif-badge { + background-color: #2a77f0; +} + +.avatar-container .avatar-display { + display: flex; + align-items: center; +} + +/* avatar component */ + +.avatar-comp { + position: relative; + margin: 1rem; +} + +.avatar-badge { + position: absolute; + display: inline-block; + min-width: 1rem; + min-height: 1rem; + background-color: var(--presence-color); + border-radius: 50%; + border: 2px solid var(--badge-border-color); + bottom: 0; + right: 0; +} + +.avatar-badge-large { + min-height: 1.8rem; + min-width: 1.8rem; + bottom: 1rem; +} + +.avatar-badge-medium { + min-height: 1.3rem; + min-width: 1.3rem; + right: 2.8rem; +} + +.avatar-badge-small { + right: 3.4rem; +} + +.avatar-badge-ex-small { + min-height: 0.7rem; + min-width: 0.7em; + right: 3.9rem; +} + +.badge-icon-container .avatar-display { + display: flex; + justify-content: flex-start; + flex-wrap: wrap; + align-items: center; + padding: 1rem; + border-bottom: 1px solid var(--border-color); + /* justify-content: center; */ +} + +.img-utils { + width: 100%; + border-radius: 50%; +} + +.product-container { + display: flex; + flex-direction: column; + + max-width: 13rem; + + font-family: var(--primary-font); + font-weight: bolder; + + position: relative; + + padding: 1rem; + + /* padding: 1rem; */ + box-shadow: var(--shadow); +} + +.wish-btn { + display: inline-block; + + align-self: flex-end; + + width: fit-content; + + padding: 0; + + background-color: transparent; + border: 0; + outline: 0; + + position: absolute; + bottom: 7.5rem; + right: 1.3rem; +} + +.heart-svg:hover { + stroke: var(--wish-svg-stroke); +} + +.close-btn { + display: inline-block; + + width: fit-content; + + padding: 0; + + background-color: transparent; + border: 0; + outline: 0; + + position: absolute; + top: 1.4rem; + left: 1rem; +} + +.svg-close:hover { + stroke: var(--close-svg-stroke); +} + +.product-info { + text-decoration: none; + + color: var(--primary-color); + font-size: 1.2rem; + + margin: 5px 0; +} +.primary-btn { + background-color: var(--secondary-color); + + border: 1.8px solid var(--primary-color); + + padding: 0.6rem; + + font-family: var(--primary-font); + font-weight: 900; + + border-radius: 0.3rem; + outline: var(--primary-color); +} + +.primary-btn:hover { + background-color: var(--primary-color); + color: var(--secondary-color); +} + +.price-tag { + display: block; + + margin: 3px 0; + + font-size: 1rem; + + font-weight: normal; +} + +.overlay-div { + background: rgba(255, 255, 255, 0.5); + + display: flex; + flex-direction: column; + align-items: center; + + padding: 1rem; + + width: 100%; + height: 100%; + + position: absolute; + top: 0; + left: 0; +} + +.overlay-text { + position: absolute; + + height: fit-content; + + color: var(--primary-color); + + top: 8rem; +} + +/* text card */ + +.text-card { + display: flex; + flex-direction: column; + + padding: 1rem; + + border: 1px solid var(--primary-color); + border-radius: 0.3rem; + + color: var(--secondary-color); + + max-width: 20rem; + /* max-height: 9rem; */ + + background-color: var(--primary-color); +} + +.text-card-title { + font-family: var(--primary-font); + + margin: 0; + + padding: 0.5rem 0; + + border-bottom: 1px solid var(--primary-color); +} + +.text-card-info { + margin: 0.5rem 0; + + font-family: var(--primary-font); +} + +/* horizontal card */ + +.horizontal-product-container { + display: flex; + + font-family: var(--primary-font); + font-weight: bolder; + + position: relative; + + height: 20rem; + + width: 80%; + + box-shadow: var(--shadow); + + padding: 2rem; + border: 1px solid var(--primary-color); +} + +.hcard-product-info { + display: block; + /* height: 100%; */ + width: 40%; + margin: 0; +} + +.second-horizontal-section { + display: flex; + flex-direction: column; + justify-content: space-between; + + padding: 0 0 0 2rem; + flex-shrink: 2; + + border-left: 0; + width: 60%; +} + +.hcard-title { + margin: 0; +} + +.hcard-img { + height: 100%; + object-fit: cover !important; +} + +.hcard-title-desc { + font-weight: 100; +} + +.hcard-price { + margin: 0.5rem 0; +} + +.horizontal-primary-btn { + display: inline-block; + + font-size: 0.7rem; + + width: 10rem; +} + +.hcard-product-desc { + margin: 0.3rem 0; + + font-weight: 200; + font-size: 1rem; +} + +.hcard-wish-btn { + position: absolute; + top: 2rem; + right: 2rem; + + width: fit-content; + + height: 1.5rem; +} + +/* shadow card */ + +.shadow_card { + display: flex; + flex-direction: column; + + height: 30rem; + + border-radius: 1rem; + + width: 20rem; + + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +.shadow_card__productimgLink { + /* display: block; */ + margin: 0; + height: 50%; +} + +.shadow_card__productimg { + display: block; + /* height: 100%; */ +} + +.shadow_card__product-info { + display: flex; + flex-direction: column; + justify-content: space-between; + + background-color: var(--secondary-color); + color: var(--primary-color); + + padding: 1rem; + + height: 50%; + + position: relative; +} + +.shadow_card__product-title { + margin: 0; + + font-family: var(--primary-font); +} + +.shadow_card__product-rating__title { + display: block; + + font-weight: 700; +} + +.shadow_card--wishbtn { + display: inline-block; + + align-self: flex-end; + + width: fit-content; + + padding: 0; + + background-color: transparent; + border: 0; + outline: 0; + + position: absolute; + + top: 1rem; + right: 1rem; +} + +/* utility */ + +.product-img { + width: 100%; + object-fit: cover; + object-position: center; +} + +.shadow_card--img { + width: 100%; + object-fit: cover; + object-position: center; + height: 100%; +} + +.distance-margin { + margin: 2rem; +} + +.font-family { + font-family: var(--primary-font); +} + +/*----------------------- Image -------------------*/ + +.img-container { + display: flex; + flex-direction: column; + width: 100%; + /* padding: 1rem; */ +} + +.img-container__simple-img, +.img-container__round-img { + width: 100%; + height: 25rem; + margin: auto; +} + +.responsive-img { + width: 100%; + object-fit: cover; + object-position: center; + height: 100%; +} + +.img-round { + border-radius: 50%; +} + +.img-container--border { + border: 1px solid var(--border-color); + padding: 1rem 0 0 0; +} + +.img-container--margin { + margin-bottom: 1rem; +} + +/* media queries */ + +@media screen and (max-width: 780px) { + .distance-margin { + margin: 0.5rem; + } + /* horizontal card */ + .horizontal-product-container { + margin: 0.5rem; + + width: 90%; + + height: 11rem; + + padding: 1rem; + } + + .hcard-product-desc { + display: none; + } + + .hcard-product-info { + width: 35%; + } + + .horizontal-primary-btn { + width: 80%; + height: 25%; + } + + .second-horizontal-section { + justify-content: space-around; + padding-left: 1rem; + } + + .hcard-wish-btn { + top: 1rem; + right: 1rem; + } + + .primary-btn:hover { + background-color: var(--secondary-color); + color: var(--primary-color); + } + + .heart-svg { + stroke: var(--wish-svg-stroke); + } + + .svg-close { + stroke: var(--close-svg-stroke); + } +} + +@media screen and (max-width: 620px) { + .alerts--common { + margin: 0 1rem 0 1rem; + } +} + +@media screen and (min-width: 620px) { + .alert--reduce-width { + width: 50%; + } +} + +@media screen and (min-width: 576px) { + .button__primary:hover { + background-color: var(--primary-color); + color: var(--secondary-color); + } +} + +@media screen and (min-width: 450px) { + .img-container__simple-img, + .img-container__round-img { + width: 25rem; + } +} From 9ea449e1fe91f695604708cf9f40cd31e5c7d44c Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Thu, 1 Apr 2021 00:25:01 +0530 Subject: [PATCH 33/83] docs: added compiled css --- components/compiled.css | 1 + components/forUser.css | 49 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 50 insertions(+) create mode 100644 components/forUser.css diff --git a/components/compiled.css b/components/compiled.css index ca1912b..e977d16 100644 --- a/components/compiled.css +++ b/components/compiled.css @@ -1,3 +1,4 @@ +@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"); * { box-sizing: border-box; } diff --git a/components/forUser.css b/components/forUser.css new file mode 100644 index 0000000..790e365 --- /dev/null +++ b/components/forUser.css @@ -0,0 +1,49 @@ +@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"); +* { + box-sizing: border-box; +} + +body { + margin: 0; + padding: 0; +} + +:root { + --primary-font: Lato; + --font-weight: 600; + --primary-color: #111827; + --secondary-color: #fff; + --border-color: #e5e5e5; + --button-radius: 0.3rem; + --twitter-color: #1da1f2; + --facebook-color: #385898; + --github-color: #24292e; + --button-margin: 0.5rem; + --button-padding: 0.6rem; + --button-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), + 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + --success-alert-backcolor: #c6f4d5; + --success-alert-fontcolor: #3bb54a; + --error-alert-backcolor: #fdd7d7; + --error-alert-fontcolor: #d1403f; + --warning-alert-backcolor: #feebc8; + --warning-alert-fontcolor: #f0c419; + --info-alert-backcolor: #bee3f8; + --info-alert-fontcolor: #447eae; + --alert-font-size: 1.3rem; + --alert-icon-margin-right: 1rem; + --alert-padding: 1rem; + --presence-color: #3aa169; + --badge-border-color: #fff; + --wish-svg-stroke: #f16565; + --close-svg-stroke: #e84545; +} + +@import url("https://raw.githubusercontent.com/jugalkpatel/Component_Library/development/components/utils.css"); +@import url("https://raw.githubusercontent.com/jugalkpatel/Component_Library/development/components/avatar.css"); +@import url("https://raw.githubusercontent.com/jugalkpatel/Component_Library/development/components/alerts.css"); +@import url("https://raw.githubusercontent.com/jugalkpatel/Component_Library/development/components/badge.css"); +@import url("https://raw.githubusercontent.com/jugalkpatel/Component_Library/development/components/button.css"); +@import url("https://raw.githubusercontent.com/jugalkpatel/Component_Library/development/components/cards.css"); +@import url("https://raw.githubusercontent.com/jugalkpatel/Component_Library/development/components/images.css"); +@import url("https://raw.githubusercontent.com/jugalkpatel/Component_Library/development/components/navbar.css"); From 2ed1d807144876d452eb21066689a524bc8ef22c Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Thu, 1 Apr 2021 02:05:26 +0530 Subject: [PATCH 34/83] style: changed styling of card component --- components/button.css | 6 +- components/button.html | 1 + components/cards.css | 138 ++++++++---- index.css | 2 + index.html | 494 ++++++++++++++++++++++++++++++++++++++++- 5 files changed, 588 insertions(+), 53 deletions(-) diff --git a/components/button.css b/components/button.css index 9d35fb9..0b35396 100644 --- a/components/button.css +++ b/components/button.css @@ -25,10 +25,10 @@ body { } .button__container { - padding: 1rem; + /* padding: 1rem; */ - margin: 1rem; - border: 1px solid black; + /* margin: 1rem; */ + /* border: 1px solid black; */ } /* primary button */ diff --git a/components/button.html b/components/button.html index 783caff..ce7e1bc 100644 --- a/components/button.html +++ b/components/button.html @@ -440,6 +440,7 @@ + diff --git a/components/cards.css b/components/cards.css index 4e2a826..a32996a 100644 --- a/components/cards.css +++ b/components/cards.css @@ -18,31 +18,24 @@ body { --close-svg-stroke: #e84545; --shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + --small-text: 0.7rem; + --small-text-color: #878787; } -.cards-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - /* align-items: center; */ + +/* utility */ + +.product-img { width: 100%; - /* justify-content: space-evenly; */ + object-fit: cover; + object-position: center; } -/* product card */ -.product-container { - display: flex; - flex-direction: column; - max-width: 13rem; +.distance-margin { + margin: 2rem; +} +.font-family { font-family: var(--primary-font); - font-weight: bolder; - - position: relative; - - padding: 1rem; - - /* padding: 1rem; */ - box-shadow: var(--shadow); } .wish-btn { @@ -60,7 +53,7 @@ body { position: absolute; bottom: 7.5rem; - right: 1.3rem; + right: 1.2rem; } .heart-svg:hover { @@ -87,6 +80,35 @@ body { stroke: var(--close-svg-stroke); } +/* cards-container */ + +.cards-container { + display: flex; + flex-direction: column; + flex-wrap: wrap; + /* align-items: center; */ + width: 100%; + /* justify-content: space-evenly; */ +} + +/* product card */ +.product-container { + display: flex; + flex-direction: column; + + max-width: 13rem; + + font-family: var(--primary-font); + font-weight: bolder; + + position: relative; + + padding: 1rem; + + /* padding: 1rem; */ + box-shadow: var(--shadow); +} + .product-info { text-decoration: none; @@ -95,6 +117,46 @@ body { margin: 5px 0; } + +.product-info__img { + height: 13rem; +} + +.product-info__small { + display: block; + font-size: var(--small-text); + color: var(--small-text-color); + font-weight: 300; +} + +.product-info__rating { + display: flex; + justify-content: center; + + max-width: max-content; + + background-color: var(--primary-color); + color: var(--secondary-color); + + font-size: var(--small-text); + text-align: center; + + padding: 0.15rem 0.3rem; + + border-radius: 0.2rem; + + margin: 0.5rem; + margin-left: 0; +} + +.svg__rating { + margin-right: 5px; +} + +.product-info__wish-btn { + bottom: 8rem; +} + .primary-btn { background-color: var(--secondary-color); @@ -119,11 +181,13 @@ body { margin: 3px 0; - font-size: 1rem; + font-size: 1.1rem; - font-weight: normal; + font-weight: 900; } +/* product card with overlay */ + .overlay-div { background: rgba(255, 255, 255, 0.5); @@ -295,6 +359,13 @@ body { /* height: 100%; */ } +.shadow_card--img { + width: 100%; + object-fit: cover; + object-position: center; + height: 100%; +} + .shadow_card__product-info { display: flex; flex-direction: column; @@ -341,29 +412,6 @@ body { right: 1rem; } -/* utility */ - -.product-img { - width: 100%; - object-fit: cover; - object-position: center; -} - -.shadow_card--img { - width: 100%; - object-fit: cover; - object-position: center; - height: 100%; -} - -.distance-margin { - margin: 2rem; -} - -.font-family { - font-family: var(--primary-font); -} - /* fix overflow of the code block */ .cards-container .language-markup { height: 10rem; diff --git a/index.css b/index.css index dc244f6..8adc294 100644 --- a/index.css +++ b/index.css @@ -4,9 +4,11 @@ @import url("./components/images.css"); @import url("./components/avatar.css"); @import url("./components/badge.css"); +@import url("./components/button.css"); @import url("./components/cards.css"); @import url("./components/alerts.css"); @import url("./components/navbar.css"); + * { box-sizing: border-box; margin: 0; diff --git a/index.html b/index.html index ecaddba..709fc92 100644 --- a/index.html +++ b/index.html @@ -80,8 +80,8 @@ COMPONENTS Avatar Alert - Button Badge + Button Cards Image Input @@ -986,6 +986,459 @@

+ +

+ Buttons +

+
+
+
+ + + + +
+ 
+                
+                  <button class="button__primary">ADD TO CART</button> 
+                
+
+ 
+                
+                  <button class="button__secondary">ADD TO CART</button>
+                
+
+ 
+                
+                  <button class="button__primary button--round">ADD TO CART</button>      
+                
+
+ 
+                
+                  <button class="button__secondary button--round">ADD TO CART</button>
+
+
+ +
+
+ + + + + + + + + + + + + Github + +
+ 
+                
+                  <a href="#" class="button__link-button button--round">
+                    <span class="svg--right-margin">
+                      <!-- put your choice of svg here -->
+                    </span>
+                      <!-- put your text -->
+                  </a>
+                
+
+
+ +
+
+ + + + +
+ 
+                
+                  <button class="icon__button">
+                    <!-- put your choice of svg here -->
+                  </button>
+                
+
+
+ +
+
+ + + +
+ 
+                
+                  <button class="floating__button">
+                    <!-- put your choice of svg here -->
+                  </button>
+                
+
+
+ +
+ +

Cards

@@ -996,12 +1449,44 @@

productLorem ipsum Rs. 250Lorem ipsum + Lorem ipsum dolor sit Lorem + + + + + + + + 4.5 + + ₹2500 - -
From 92e1006fe76c28f7afc79dc567625f5c11117ae7 Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Thu, 1 Apr 2021 10:26:19 +0530 Subject: [PATCH 35/83] style: added sidebar width --- components/cards.css | 12 +- index.css | 1 + index.html | 307 ++++++++++++++++++++++++------------------- resources/prism.css | 5 + 4 files changed, 188 insertions(+), 137 deletions(-) diff --git a/components/cards.css b/components/cards.css index a32996a..fdf0174 100644 --- a/components/cards.css +++ b/components/cards.css @@ -20,6 +20,7 @@ body { 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); --small-text: 0.7rem; --small-text-color: #878787; + --zindex-one: 1; } /* utility */ @@ -116,6 +117,8 @@ body { font-size: 1.2rem; margin: 5px 0; + + position: relative; } .product-info__img { @@ -154,7 +157,10 @@ body { } .product-info__wish-btn { - bottom: 8rem; + bottom: 7rem; + right: 0.3rem; + z-index: var(--zindex-one); + cursor: pointer; } .primary-btn { @@ -181,7 +187,7 @@ body { margin: 3px 0; - font-size: 1.1rem; + font-size: 1.3rem; font-weight: 900; } @@ -280,7 +286,7 @@ body { .second-horizontal-section { display: flex; flex-direction: column; - justify-content: space-between; + justify-content: space-evenly; padding: 0 0 0 2rem; flex-shrink: 2; diff --git a/index.css b/index.css index 8adc294..acb2bc7 100644 --- a/index.css +++ b/index.css @@ -12,6 +12,7 @@ * { box-sizing: border-box; margin: 0; + scrollbar-width: thin; } :root { diff --git a/index.html b/index.html index 709fc92..5bfffb6 100644 --- a/index.html +++ b/index.html @@ -81,7 +81,7 @@ Avatar Alert Badge - Button + Buttons Cards Image Input @@ -1484,71 +1484,92 @@

4.5 - ₹2500 - + ₹ 2500 + + 
-        
-          <a href="#" class="badge-icon">
-          <svg
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <circle
-              cx="8"
-              cy="21"
-              fill="none"
-              r="2"
-              stroke="#000"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-            />
-            <circle
-              cx="20"
-              cy="21"
-              fill="none"
-              r="2"
-              stroke="#000"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-            />
-            <path
-              d="M5.67,6H23l-1.68,8.39a2,2,0,0,1-2,1.61H8.75a2,2,0,0,1-2-1.74L5.23,2.74A2,2,0,0,0,3.25,1H1"
-              fill="none"
-              stroke="#000"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-            />
-          </svg>
-          <span class="num-badge cart-badge">10</span>
-        </a>
-        
-
+ + <a href="#" class="product-info"> + <img + class="product-img product-info__img" + src="https://unsplash.it/200/300" + alt="product" + />Lorem ipsum + <span class="product-info__small" + >Lorem ipsum dolor sit Lorem</span + > + <span class="product-info__rating"> + <?xml version="1.0"?> + <svg + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:svgjs="http://svgjs.com/svgjs" + version="1.1" + width="14" + height="14" + x="0" + y="0" + viewBox="0 0 511.98685 511" + style="enable-background: new 0 0 512 512" + xml:space="preserve" + class="svg__rating" + > + <g> + <path + xmlns="http://www.w3.org/2000/svg" + d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0" + fill="#ffffff" + data-original="#ffc107" + style="" + /> + </g> + </svg> + 4.5 + </span> + <span class="price-tag">₹2500</span></a + > + <button class="wish-btn product-info__wish-btn"> + <svg + class="heart-svg" + xmlns="http://www.w3.org/2000/svg" + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + stroke="#B9B9B9" + stroke-width="2" + stroke-linecap="round" + stroke-linejoin="round" + > + <path + d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 + 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 + 0 0-7.78z" + ></path> + </svg> + </button> + +
stroke-linejoin="round" > <path - d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" + d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 + 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 + 5.5 0 0 0 0-7.78z" ></path> </svg> </button> @@ -1727,7 +1750,9 @@

stroke-linejoin="round" > <path - d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" + d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1. + 06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7. + 78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" ></path> </svg> </button> @@ -1795,7 +1820,7 @@

CARD TITLE

/>
-

Lorem ipsum

+

Lorem ipsum

Lorem ipsum dolor sit amet. @@ -1869,7 +1894,9 @@

Lorem ipsum

stroke-linejoin="round" > <path - d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" + d="M20.84 4.61a5.5 5.5 0 0 0-7.78 + 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 + 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" ></path> </svg> </button> @@ -1978,7 +2005,9 @@

stroke-linejoin="round" > @@ -2013,7 +2042,17 @@

xmlns="http://www.w3.org/2000/svg" > <path - d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0" + d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17. + 730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136. + 769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20. + 714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13. + 417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 + 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 + 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 + 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3. + 882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 + 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 + 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0" fill="#ffc107" /> </svg> @@ -2204,72 +2243,72 @@ 

-          
-              <nav class="navbar-component">
-        <div class="navbar-component__menu">
-          <button class="navbar-component__menu__btn">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="#111827"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              class="feather feather-menu"
-            >
-              <line x1="3" y1="12" x2="21" y2="12"></line>
-              <line x1="3" y1="6" x2="21" y2="6"></line>
-              <line x1="3" y1="18" x2="21" y2="18"></line>
-            </svg>
-          </button>
-          <div class="navbar-component__menu_social">
-            <a href="#" class="navbar-component__menu__social__github">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="feather feather-github"
-              >
-                <path
-                  d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
-                ></path>
-              </svg>
-            </a>
-            <a href="#" class="navbar-component__menu__social__twitter">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="#1DA1F2"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="feather feather-twitter"
-              >
-                <path
-                  d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"
-                ></path>
-              </svg>
-            </a>
-          </div>
-        </div>
-        <div class="navbar-component__title">
-          <span class="navbar-component__title__text">UNDEFINED</span>
-        </div>
-      </nav>
-          
-
+ + <nav class="navbar-component"> + <div class="navbar-component__menu"> + <button class="navbar-component__menu__btn"> + <svg + xmlns="http://www.w3.org/2000/svg" + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + stroke="#111827" + stroke-width="2" + stroke-linecap="round" + stroke-linejoin="round" + class="feather feather-menu" + > + <line x1="3" y1="12" x2="21" y2="12"></line> + <line x1="3" y1="6" x2="21" y2="6"></line> + <line x1="3" y1="18" x2="21" y2="18"></line> + </svg> + </button> + <div class="navbar-component__menu_social"> + <a href="#" class="navbar-component__menu__social__github"> + <svg + xmlns="http://www.w3.org/2000/svg" + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + stroke-width="2" + stroke-linecap="round" + stroke-linejoin="round" + class="feather feather-github" + > + <path + d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" + ></path> + </svg> + </a> + <a href="#" class="navbar-component__menu__social__twitter"> + <svg + xmlns="http://www.w3.org/2000/svg" + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + stroke="#1DA1F2" + stroke-width="2" + stroke-linecap="round" + stroke-linejoin="round" + class="feather feather-twitter" + > + <path + d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" + ></path> + </svg> + </a> + </div> + </div> + <div class="navbar-component__title"> + <span class="navbar-component__title__text">UNDEFINED</span> + </div> + </nav> + +
diff --git a/resources/prism.css b/resources/prism.css index 66d1b26..f559d91 100644 --- a/resources/prism.css +++ b/resources/prism.css @@ -40,6 +40,7 @@ pre[class*="language-"] { /* margin: .5em 0; */ overflow-y: scroll; overflow-x: hidden; + /* scrollbar-width: thin; */ } :not(pre) > code[class*="language-"], @@ -213,6 +214,10 @@ div.code-toolbar { margin-top: 1rem; } +.language-markup { + scrollbar-width: thin; +} + @media screen and (max-width: 576px) { div.code-toolbar > .toolbar { right: 0.7rem; From 3a2f44c5a1a892dc7ac0a5238b82b2b695225a82 Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Thu, 1 Apr 2021 11:47:35 +0530 Subject: [PATCH 36/83] fix: height of the link button --- .index.html.swp | Bin 0 -> 16384 bytes components/button.css | 2 ++ index.html | 35 +++++++++++++++++++++++++++++++---- 3 files changed, 33 insertions(+), 4 deletions(-) create mode 100644 .index.html.swp diff --git a/.index.html.swp b/.index.html.swp new file mode 100644 index 0000000000000000000000000000000000000000..d8043261b76b1b1fd1711f58ce35ecc7378bf390 GIT binary patch literal 16384 zcmeHOU5p!76`s-`D5OmTZBZX6Hxo4isWbMBy|y8X)94B6bV6IfET0?0ey^wc%cYd3aCI!o3;=rO#`%)pYP5+v$n7Q zwguD@%}C#jXTEdJz4!Rsx%Zs)E~gLf+QSOEso=OuQCQje*y)SDqa3?QQ4YI}#u5H} z!qM_tniotE0(~?xm|E~wnsv{v1gUwi(ej#3Gc4_Pmwnqml5(3BXH~C-jrwGBiA3Uo z!~^T~Ks!976|Pvym`0kbY*9C}cfE6Iz1oRf;(^2ii3bu7BpygSka!^RK;nVK0~de? z!j`Ih3gdVSjpZYBy-2$Li;n&D{G$^8PvYn4`L`whAH;uvp1&yZuM$5?&kgE8+>gH# zKTW(R@vjhHB>sfNzfAl#;-8lIzY(7!{=MXoxc$EppCx`t;{QUtPW(L*f1dc;i9adv zFA-lN{;G?`hq(Q7#8-*;B>qL>ZzldxiT^Y4w-A5*CH?kaAbuzDHHrTd@v;BECGmeG zemm)(k@&O3e~|e1U)taPABf*ad?@k1Cq9mk(-QwY@p1nzxvby*bHv|9_HU8+XNf;R z{8uIZ4DoTsd|u+8A%1sk|E>M)KTZ5*;_sLE-w_|j-${voiufpbhmErm|0MA@kp1_( zt-t->5`PEr+a>-t#K-gZD-uuPq{Q+6q{Nfi!r*o2?P|8#;TS!)VOO0|jqc*) z80E6^PC)`yxa~$uQ^hEyP(Gzuq&gxzMYd}lhn0>kUt+wAH=EgWhoo?NTWk7B0>z zy1BHtuw&=0#T^Us*m}Fxr@7YoVeQEs;4;#D=8u9-wYQsMy3bmvmL1jx3C1c#b&r{0 z8QVzf(=0lrS(+JIMmMs|(5Esit7i-1#F?~~*9$q8=@@g6&gHlc&XE#>aG+(`G@D`u zOd5I)HlnjInrCL2lP144(;B!bJF8E@{8VHjt?B84rWZ1Ec|C8k=)`3qjZWUJ_PxLO z;4D5c>FMA&>9u&sfw1EU-^GWvpD;ZcP$f zaVuf1sG6hf;0W8tXU8=S)6tOMT$|!zl8Fa+>$dmY<78 z7@b7l&_Y2sG6&5eLH8fct*RT=+RJi$ym3>j-1dF^pmg4=dqXDtg+IUO`{eXyu>lZz?mc7am{(W1inqybQ zH_s#PPUbsUU4!sQ-3e-r6RMO@>GZSna)3>9iWH(v-t2-`ZX+nLUl#Y#qGvUn(8gY} z;S^Qw`j+Rz7Tr%5bK{7l(9K48hX0hP-KiRy_$1Z+wBz9 z4{J+v8vkiLGOlIppSzZK?I=1?UJ!RO(k<6)KXB0S(t({C=3qoxV(b?GDLt#(&1z9~ zxPPq83w!4e+WR-d0+*o0Q-R(fNOy>$k9&#_X3{)JYX4^1v0?9foCwLUjckH3r2NDll zz#hP&hs8>~+oSCqEr$3Ulzq1qvcNAFRXyc9f!FrSPLOK(ZqU#V2YlxwWM~OQ@ua7A z!WY=J%1K|LM6R-|6=K%Jc~AN(D^kKI*G_nEdkRWxI{`c&tb&T2MybS?c#XCl;-YCH zp%>#}I0m~)|AD5hb-G&|8tC<)zS!49D|A$P>Qx@1KJW+?8-HMX%%#d+Wytfb^>Bt) zthQFenP@A*$J9L{8h#!@GsXpa9J}?dwinKbF~9-wKjZZlxP%BdxK`+jTH#hkG{gCB z$!=^LUF%AB6!E8ZjfRKSh<|g^ zy+3&6qaRX+>k3ZripaS{Gb2iL6Z_DUW!Ztx6MD%5PA)X|L>pLI z41}F6;zF6CxEXx6MU@Y^94Umy#P1va9!UzDyb3$6uqnPnr5hmfr~l>qOO)LvcHzzU G`uaER4uW3* literal 0 HcmV?d00001 diff --git a/components/button.css b/components/button.css index 0b35396..06005ad 100644 --- a/components/button.css +++ b/components/button.css @@ -101,6 +101,8 @@ body { max-width: max-content; + height: max-content; + box-shadow: var(--button-shadow); } diff --git a/index.html b/index.html index 5bfffb6..11708b9 100644 --- a/index.html +++ b/index.html @@ -2266,9 +2266,7 @@

</button> <div class="navbar-component__menu_social"> <a href="#" class="navbar-component__menu__social__github"> - <svg - xmlns="http://www.w3.org/2000/svg" - width="24" + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" @@ -2308,12 +2306,41 @@

</div> </nav> - + + + + + + + + + + From 6476af029e13ef2882ad851b76789a817d47e388 Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Thu, 1 Apr 2021 12:01:57 +0530 Subject: [PATCH 37/83] feat: added go to top button --- index.css | 11 ++++++++++- index.html | 58 +++++++++++++++++++++++++++--------------------------- 2 files changed, 39 insertions(+), 30 deletions(-) diff --git a/index.css b/index.css index acb2bc7..ffb3d0d 100644 --- a/index.css +++ b/index.css @@ -27,6 +27,13 @@ position: relative; } +.main__top-btn { + position: fixed; + bottom: 0; + right: 0; + border-radius: 50%; +} + /* utils */ .space-comp { margin-bottom: 2rem; @@ -94,6 +101,8 @@ cursor: pointer; } +/* container */ + .container { display: flex; margin: 1rem 0; @@ -200,7 +209,7 @@ div.code-toolbar { left: 19.5%; } .main { - padding: 1rem 2rem; + padding: 1rem 3rem; } .sidebar { display: inline-block; diff --git a/index.html b/index.html index 11708b9..aefc8cf 100644 --- a/index.html +++ b/index.html @@ -2312,37 +2312,37 @@

- - - - - - - - - + + + + + + + + + From 2fb8cda92e2c1183e33442b1f1153f38f0ec5cad Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Thu, 1 Apr 2021 16:15:04 +0530 Subject: [PATCH 38/83] style: change code blocks in avatar component --- components/avatar.css | 14 - components/avatar.html | 25 +- components/compiled.css | 1120 ++------------------------------------- components/inputs.css | 23 + components/inputs.html | 17 + components/utils.css | 10 - index.html | 25 +- resources/prism.css | 2 +- 8 files changed, 109 insertions(+), 1127 deletions(-) create mode 100644 components/inputs.css create mode 100644 components/inputs.html diff --git a/components/avatar.css b/components/avatar.css index 81d9983..44262a7 100644 --- a/components/avatar.css +++ b/components/avatar.css @@ -8,8 +8,6 @@ .avatar { display: flex; - /* padding: 1rem; */ - /* border: 1px solid black; */ flex-direction: column; width: 100%; border: 1px solid var(--border-color); @@ -52,15 +50,3 @@ width: 100%; border-radius: 50%; } - -/* .img-distance { -} - -.justify-center { -} - -.img-responsive { -} - -.is-round { -} */ diff --git a/components/avatar.html b/components/avatar.html index 9d60770..c869da3 100644 --- a/components/avatar.html +++ b/components/avatar.html @@ -42,12 +42,25 @@ /> 
-           
-        <img class="img-big img-utils" alt="avatar-big" src="../resources/man.svg" width="128" height="128" />
-        <img class="img-medium img-utils" alt="avatar-medium" src="../resources/man.svg" width="96" height="96"/>
-        <img class="img-small img-utils" alt="avatar-small" src="../resources/man.svg" width="64" height="64 "/>
-        <img class="img-ex-small img-utils" alt="avatar-extra-small" src="../resources/man.svg" width="32" height="32" />
-
+ + <img class="img-big img-utils" alt="avatar-big" src="--enter--your--source" width="128" height="128" /> + + + 
+        
+          <img class="img-medium img-utils" alt="avatar-medium" src="--enter--your--source" width="96" height="96"/>
+        
+
+ 
+       
+        <img class="img-small img-utils" alt="avatar-small" src="--enter--your--source" width="64" height="64 "/>
+       
+
+ 
+        
+          <img class="img-ex-small img-utils" alt="avatar-extra-small" src="--enter--your--source" width="32" height="32" /> 
+        
+
diff --git a/components/compiled.css b/components/compiled.css index e977d16..d4501b7 100644 --- a/components/compiled.css +++ b/components/compiled.css @@ -14,6 +14,7 @@ body { --primary-color: #111827; --secondary-color: #fff; --border-color: #e5e5e5; + --button-radius: 0.3rem; --twitter-color: #1da1f2; --facebook-color: #385898; @@ -22,6 +23,7 @@ body { --button-padding: 0.6rem; --button-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + --success-alert-backcolor: #c6f4d5; --success-alert-fontcolor: #3bb54a; --error-alert-backcolor: #fdd7d7; @@ -39,12 +41,36 @@ body { --close-svg-stroke: #e84545; } -/*-------------------- Avatar ---------------------*/ +/* utility */ + +.container--border { + border: 1px solid var(--border-color); + padding: 1rem 0 0rem 0; +} + +.container--margin { + margin-bottom: 1rem; +} + +.flex--container { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; +} + +.responsive--container { + width: 100%; +} + +.center--margin { + margin: 0 auto; +} + +/* Avatar */ .avatar { display: flex; - /* padding: 1rem; */ - /* border: 1px solid black; */ flex-direction: column; width: 100%; border: 1px solid var(--border-color); @@ -77,1096 +103,10 @@ body { max-width: 32px; } -/* utils */ +/* avatar - utils */ .img-utils { margin: 1.7rem; width: 100%; border-radius: 50%; } - -/*-------------------- alerts css ------------------*/ - -.alerts { - width: 100%; -} - -.alerts--common { - display: flex; - align-items: center; - padding: var(--alert-padding); - - font-size: var(--alert-font-size); - font-family: var(--primary-font); - - border-radius: 0.5rem; -} - -.alerts--margin--common { - margin-right: var(--alert-icon-margin-right); -} - -.alerts__success { - background-color: var(--success-alert-backcolor); - color: var(--success-alert-fontcolor); -} - -.alerts__error { - background-color: var(--error-alert-backcolor); - color: var(--error-alert-fontcolor); -} - -.alerts__warning { - background-color: var(--warning-alert-backcolor); - color: var(--warning-alert-fontcolor); -} - -.alerts__info { - background-color: var(--info-alert-backcolor); - color: var(--info-alert-fontcolor); -} - -.alerts .language-markup { - height: 10rem; -} - -/* buttons css */ - -/* primary button */ -.button__primary { - background-color: var(--secondary-color); - - color: var(--primary-color); - - border: 1.8px solid var(--primary-color); - - padding: var(--button-padding); - - margin: var(--button-margin); - - font-family: var(--primary-font); - font-weight: var(--font-weight); - - outline: var(--primary-color); - - cursor: pointer; -} -/* secondary button */ -.button__secondary { - background-color: var(--primary-color); - - color: var(--secondary-color); - - border: 1.8px solid var(--primary-color); - - padding: var(--button-padding); - - margin: var(--button-margin); - - font-family: var(--primary-font); - font-weight: var(--font-weight); - - cursor: pointer; - - outline: var(--primary-color); - box-shadow: var(--button-shadow); -} - -/* round button utility */ - -.button--round { - border-radius: var(--button-radius); -} - -/* Link Button */ - -.button__link-button { - text-decoration: none; - - display: flex; - justify-content: center; - align-items: center; - - padding: var(--button-padding); - - margin: var(--button-margin); - - background-color: var(--primary-color); - - color: var(--secondary-color); - - border: 1px solid var(--primary-color); - - font-family: var(--primary-font); - font-weight: var(--font-weight); - - max-width: max-content; - - box-shadow: var(--button-shadow); -} - -.svg--right-margin { - margin-right: 0.3rem; -} - -/* icon button */ -.icon__button { - outline: var(--primary-color); - - /* border: 1px solid var(--primary-color); */ - - background-color: var(--secondary-color); - - border: 0; - - /* color: var(--secondary-color); */ - - padding: var(--button-padding); - - box-shadow: var(--button-shadow); - - margin: var(--button-margin); -} - -/* floating button */ -.floating__button { - outline: var(--primary-color); - - background-color: var(--primary-color); - - border: 0; - - padding: var(--button-padding); - - display: flex; - justify-content: center; - - box-shadow: var(--button-shadow); - - margin: var(--button-margin); - - border-radius: 50%; -} - -/* utilities for twitter, facebook and github buttons */ -.twitter--btn { - background-color: var(--twitter-color); - color: var(--secondary-color); - - border: 1px solid var(--twitter-color); -} - -.facebook--btn { - background-color: var(--facebook-color); - color: var(--secondary-color); - - border: 1px solid var(--facebook-color); -} - -.github--btn { - background-color: var(--github-color); - color: var(--secondary-color); - - border: 1px solid var(--github-color); -} - -.button__container .toolbar { - right: 1rem; -} - -/*------------------------- Badges ----------------------------*/ - -.badge-icon-container, -.avatar-container { - display: flex; - flex-direction: column; - border: 1px solid var(--border-color); - border-bottom: 0; - margin-bottom: 2rem; - border-radius: 5px; -} -.product-container { - display: flex; - flex-direction: column; - - max-width: 13rem; - - font-family: var(--primary-font); - font-weight: bolder; - - position: relative; - - padding: 1rem; - - /* padding: 1rem; */ - box-shadow: var(--shadow); -} - -.wish-btn { - display: inline-block; - - align-self: flex-end; - - width: fit-content; - - padding: 0; - - background-color: transparent; - border: 0; - outline: 0; - - position: absolute; - bottom: 7.5rem; - right: 1.3rem; -} - -.heart-svg:hover { - stroke: var(--wish-svg-stroke); -} - -.close-btn { - display: inline-block; - - width: fit-content; - - padding: 0; - - background-color: transparent; - border: 0; - outline: 0; - - position: absolute; - top: 1.4rem; - left: 1rem; -} - -.svg-close:hover { - stroke: var(--close-svg-stroke); -} - -.product-info { - text-decoration: none; - - color: var(--primary-color); - font-size: 1.2rem; - - margin: 5px 0; -} -.primary-btn { - background-color: var(--secondary-color); - - border: 1.8px solid var(--primary-color); - - padding: 0.6rem; - - font-family: var(--primary-font); - font-weight: 900; - - border-radius: 0.3rem; - outline: var(--primary-color); -} - -.primary-btn:hover { - background-color: var(--primary-color); - color: var(--secondary-color); -} - -.price-tag { - display: block; - - margin: 3px 0; - - font-size: 1rem; - - font-weight: normal; -} - -.overlay-div { - background: rgba(255, 255, 255, 0.5); - - display: flex; - flex-direction: column; - align-items: center; - - padding: 1rem; - - width: 100%; - height: 100%; - - position: absolute; - top: 0; - left: 0; -} - -.overlay-text { - position: absolute; - - height: fit-content; - - color: var(--primary-color); - - top: 8rem; -} - -/* text card */ - -.text-card { - display: flex; - flex-direction: column; - - padding: 1rem; - - border: 1px solid var(--primary-color); - border-radius: 0.3rem; - - color: var(--secondary-color); - - max-width: 20rem; - /* max-height: 9rem; */ - - background-color: var(--primary-color); -} - -.text-card-title { - font-family: var(--primary-font); - - margin: 0; - - padding: 0.5rem 0; - - border-bottom: 1px solid var(--primary-color); -} - -.text-card-info { - margin: 0.5rem 0; - - font-family: var(--primary-font); -} - -/* horizontal card */ - -.horizontal-product-container { - display: flex; - - font-family: var(--primary-font); - font-weight: bolder; - - position: relative; - - height: 20rem; - - width: 80%; - - box-shadow: var(--shadow); - - padding: 2rem; - border: 1px solid var(--primary-color); -} - -.hcard-product-info { - display: block; - /* height: 100%; */ - width: 40%; - margin: 0; -} - -.second-horizontal-section { - display: flex; - flex-direction: column; - justify-content: space-between; - - padding: 0 0 0 2rem; - flex-shrink: 2; - - border-left: 0; - width: 60%; -} - -.hcard-title { - margin: 0; -} - -.hcard-img { - height: 100%; - object-fit: cover !important; -} - -.hcard-title-desc { - font-weight: 100; -} - -.hcard-price { - margin: 0.5rem 0; -} - -.horizontal-primary-btn { - display: inline-block; - - font-size: 0.7rem; - - width: 10rem; -} - -.hcard-product-desc { - margin: 0.3rem 0; - - font-weight: 200; - font-size: 1rem; -} - -.hcard-wish-btn { - position: absolute; - top: 2rem; - right: 2rem; - width: fit-content; - height: 1.5rem; -} - -/* shadow card */ - -.shadow_card { - display: flex; - flex-direction: column; - - height: 30rem; - - border-radius: 1rem; - /* box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), - 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), - 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), - 0 100px 80px rgba(0, 0, 0, 0.12); */ - - width: 20rem; - - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -} - -.shadow_card__productimgLink { - /* display: block; */ - margin: 0; - height: 50%; -} - -.shadow_card__productimg { - display: block; - /* height: 100%; */ -} - -.shadow_card__product-info { - display: flex; - flex-direction: column; - justify-content: space-between; - - background-color: var(--secondary-color); - color: var(--primary-color); - - padding: 1rem; - - height: 50%; - - position: relative; -} - -.shadow_card__product-title { - margin: 0; - - font-family: var(--primary-font); -} - -.shadow_card__product-rating__title { - display: block; - - font-weight: 700; -} - -.shadow_card--wishbtn { - display: inline-block; - - align-self: flex-end; - - width: fit-content; - - padding: 0; - - background-color: transparent; - border: 0; - outline: 0; - - position: absolute; - - top: 1rem; - right: 1rem; -} - -/* utility */ - -.product-img { - width: 100%; - object-fit: cover; - object-position: center; -} - -.shadow_card--img { - width: 100%; - object-fit: cover; - object-position: center; - height: 100%; -} - -.distance-margin { - margin: 2rem; -} - -.font-family { - font-family: var(--primary-font); -} - -/*------------------- Badge ------------------*/ - -.badge-div { - display: flex; - border-bottom: 1px solid var(--border-color); -} - -.badge-icon { - position: relative; - text-decoration: none; - display: inline-block; - padding: 2rem; - border-radius: 50%; - color: #111827; -} - -.num-badge { - position: absolute; - background-color: #f16565; - color: white; - padding: 0.2rem; - border: 2px solid white; - border-radius: 60%; - font-family: var(--primary-font); - font-size: 0.8rem; - font-weight: 600; - bottom: 2.8rem; - right: 1rem; -} - -.cart-badge { - background-color: #f16565; - color: white; -} - -.notif-badge { - background-color: #2a77f0; -} - -.avatar-container .avatar-display { - display: flex; - align-items: center; -} - -/* avatar component */ - -.avatar-comp { - position: relative; - margin: 1rem; -} - -.avatar-badge { - position: absolute; - display: inline-block; - min-width: 1rem; - min-height: 1rem; - background-color: var(--presence-color); - border-radius: 50%; - border: 2px solid var(--badge-border-color); - bottom: 0; - right: 0; -} - -.avatar-badge-large { - min-height: 1.8rem; - min-width: 1.8rem; - bottom: 1rem; -} - -.avatar-badge-medium { - min-height: 1.3rem; - min-width: 1.3rem; - right: 2.8rem; -} - -.avatar-badge-small { - right: 3.4rem; -} - -.avatar-badge-ex-small { - min-height: 0.7rem; - min-width: 0.7em; - right: 3.9rem; -} - -.badge-icon-container .avatar-display { - display: flex; - justify-content: flex-start; - flex-wrap: wrap; - align-items: center; - padding: 1rem; - border-bottom: 1px solid var(--border-color); - /* justify-content: center; */ -} - -.img-utils { - width: 100%; - border-radius: 50%; -} - -.product-container { - display: flex; - flex-direction: column; - - max-width: 13rem; - - font-family: var(--primary-font); - font-weight: bolder; - - position: relative; - - padding: 1rem; - - /* padding: 1rem; */ - box-shadow: var(--shadow); -} - -.wish-btn { - display: inline-block; - - align-self: flex-end; - - width: fit-content; - - padding: 0; - - background-color: transparent; - border: 0; - outline: 0; - - position: absolute; - bottom: 7.5rem; - right: 1.3rem; -} - -.heart-svg:hover { - stroke: var(--wish-svg-stroke); -} - -.close-btn { - display: inline-block; - - width: fit-content; - - padding: 0; - - background-color: transparent; - border: 0; - outline: 0; - - position: absolute; - top: 1.4rem; - left: 1rem; -} - -.svg-close:hover { - stroke: var(--close-svg-stroke); -} - -.product-info { - text-decoration: none; - - color: var(--primary-color); - font-size: 1.2rem; - - margin: 5px 0; -} -.primary-btn { - background-color: var(--secondary-color); - - border: 1.8px solid var(--primary-color); - - padding: 0.6rem; - - font-family: var(--primary-font); - font-weight: 900; - - border-radius: 0.3rem; - outline: var(--primary-color); -} - -.primary-btn:hover { - background-color: var(--primary-color); - color: var(--secondary-color); -} - -.price-tag { - display: block; - - margin: 3px 0; - - font-size: 1rem; - - font-weight: normal; -} - -.overlay-div { - background: rgba(255, 255, 255, 0.5); - - display: flex; - flex-direction: column; - align-items: center; - - padding: 1rem; - - width: 100%; - height: 100%; - - position: absolute; - top: 0; - left: 0; -} - -.overlay-text { - position: absolute; - - height: fit-content; - - color: var(--primary-color); - - top: 8rem; -} - -/* text card */ - -.text-card { - display: flex; - flex-direction: column; - - padding: 1rem; - - border: 1px solid var(--primary-color); - border-radius: 0.3rem; - - color: var(--secondary-color); - - max-width: 20rem; - /* max-height: 9rem; */ - - background-color: var(--primary-color); -} - -.text-card-title { - font-family: var(--primary-font); - - margin: 0; - - padding: 0.5rem 0; - - border-bottom: 1px solid var(--primary-color); -} - -.text-card-info { - margin: 0.5rem 0; - - font-family: var(--primary-font); -} - -/* horizontal card */ - -.horizontal-product-container { - display: flex; - - font-family: var(--primary-font); - font-weight: bolder; - - position: relative; - - height: 20rem; - - width: 80%; - - box-shadow: var(--shadow); - - padding: 2rem; - border: 1px solid var(--primary-color); -} - -.hcard-product-info { - display: block; - /* height: 100%; */ - width: 40%; - margin: 0; -} - -.second-horizontal-section { - display: flex; - flex-direction: column; - justify-content: space-between; - - padding: 0 0 0 2rem; - flex-shrink: 2; - - border-left: 0; - width: 60%; -} - -.hcard-title { - margin: 0; -} - -.hcard-img { - height: 100%; - object-fit: cover !important; -} - -.hcard-title-desc { - font-weight: 100; -} - -.hcard-price { - margin: 0.5rem 0; -} - -.horizontal-primary-btn { - display: inline-block; - - font-size: 0.7rem; - - width: 10rem; -} - -.hcard-product-desc { - margin: 0.3rem 0; - - font-weight: 200; - font-size: 1rem; -} - -.hcard-wish-btn { - position: absolute; - top: 2rem; - right: 2rem; - - width: fit-content; - - height: 1.5rem; -} - -/* shadow card */ - -.shadow_card { - display: flex; - flex-direction: column; - - height: 30rem; - - border-radius: 1rem; - - width: 20rem; - - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -} - -.shadow_card__productimgLink { - /* display: block; */ - margin: 0; - height: 50%; -} - -.shadow_card__productimg { - display: block; - /* height: 100%; */ -} - -.shadow_card__product-info { - display: flex; - flex-direction: column; - justify-content: space-between; - - background-color: var(--secondary-color); - color: var(--primary-color); - - padding: 1rem; - - height: 50%; - - position: relative; -} - -.shadow_card__product-title { - margin: 0; - - font-family: var(--primary-font); -} - -.shadow_card__product-rating__title { - display: block; - - font-weight: 700; -} - -.shadow_card--wishbtn { - display: inline-block; - - align-self: flex-end; - - width: fit-content; - - padding: 0; - - background-color: transparent; - border: 0; - outline: 0; - - position: absolute; - - top: 1rem; - right: 1rem; -} - -/* utility */ - -.product-img { - width: 100%; - object-fit: cover; - object-position: center; -} - -.shadow_card--img { - width: 100%; - object-fit: cover; - object-position: center; - height: 100%; -} - -.distance-margin { - margin: 2rem; -} - -.font-family { - font-family: var(--primary-font); -} - -/*----------------------- Image -------------------*/ - -.img-container { - display: flex; - flex-direction: column; - width: 100%; - /* padding: 1rem; */ -} - -.img-container__simple-img, -.img-container__round-img { - width: 100%; - height: 25rem; - margin: auto; -} - -.responsive-img { - width: 100%; - object-fit: cover; - object-position: center; - height: 100%; -} - -.img-round { - border-radius: 50%; -} - -.img-container--border { - border: 1px solid var(--border-color); - padding: 1rem 0 0 0; -} - -.img-container--margin { - margin-bottom: 1rem; -} - -/* media queries */ - -@media screen and (max-width: 780px) { - .distance-margin { - margin: 0.5rem; - } - /* horizontal card */ - .horizontal-product-container { - margin: 0.5rem; - - width: 90%; - - height: 11rem; - - padding: 1rem; - } - - .hcard-product-desc { - display: none; - } - - .hcard-product-info { - width: 35%; - } - - .horizontal-primary-btn { - width: 80%; - height: 25%; - } - - .second-horizontal-section { - justify-content: space-around; - padding-left: 1rem; - } - - .hcard-wish-btn { - top: 1rem; - right: 1rem; - } - - .primary-btn:hover { - background-color: var(--secondary-color); - color: var(--primary-color); - } - - .heart-svg { - stroke: var(--wish-svg-stroke); - } - - .svg-close { - stroke: var(--close-svg-stroke); - } -} - -@media screen and (max-width: 620px) { - .alerts--common { - margin: 0 1rem 0 1rem; - } -} - -@media screen and (min-width: 620px) { - .alert--reduce-width { - width: 50%; - } -} - -@media screen and (min-width: 576px) { - .button__primary:hover { - background-color: var(--primary-color); - color: var(--secondary-color); - } -} - -@media screen and (min-width: 450px) { - .img-container__simple-img, - .img-container__round-img { - width: 25rem; - } -} diff --git a/components/inputs.css b/components/inputs.css new file mode 100644 index 0000000..927f409 --- /dev/null +++ b/components/inputs.css @@ -0,0 +1,23 @@ +* { + box-sizing: border-box; +} + +body { + padding: 0; + margin: 0; +} + +:root { + --primary-font: Lato; + --primary-color: #111827; + --border-color: #e5e5e5; +} + +.input { + margin: 1rem; + padding: 1rem; + border: 1px solid black; +} + +.input__primary { +} diff --git a/components/inputs.html b/components/inputs.html new file mode 100644 index 0000000..023111b --- /dev/null +++ b/components/inputs.html @@ -0,0 +1,17 @@ + + + + + + + + inputs + + +
+
+ +
+
+ + diff --git a/components/utils.css b/components/utils.css index b06175d..65830c9 100644 --- a/components/utils.css +++ b/components/utils.css @@ -10,16 +10,6 @@ margin-bottom: 1rem; } -/* .container--border { - display: flex; - flex-direction: column; - align-items: center; -} */ -/* .center--margin { - display: flex; - justify-content: center; -} */ - .flex--container { display: flex; align-items: center; diff --git a/index.html b/index.html index aefc8cf..069ea9d 100644 --- a/index.html +++ b/index.html @@ -131,12 +131,25 @@

Avatar

/> 
-           
-        <img class="img-big img-utils" alt="avatar-big" src="../resources/man.svg" width="128" height="128" />
-        <img class="img-medium img-utils" alt="avatar-medium" src="../resources/man.svg" width="96" height="96"/>
-        <img class="img-small img-utils" alt="avatar-small" src="../resources/man.svg" width="64" height="64 "/>
-        <img class="img-ex-small img-utils" alt="avatar-extra-small" src="../resources/man.svg" width="32" height="32" />
-
+ + <img class="img-big img-utils" alt="avatar-big" src="--enter--your--source" width="128" height="128" /> + + + 
+                
+                  <img class="img-medium img-utils" alt="avatar-medium" src="--enter--your--source" width="96" height="96"/>
+                
+
+ 
+              
+                <img class="img-small img-utils" alt="avatar-small" src="--enter--your--source" width="64" height="64 "/>
+              
+
+ 
+              
+                <img class="img-ex-small img-utils" alt="avatar-extra-small" src="--enter--your--source" width="32" height="32" /> 
+              
+

diff --git a/resources/prism.css b/resources/prism.css index f559d91..ec8ed56 100644 --- a/resources/prism.css +++ b/resources/prism.css @@ -136,7 +136,7 @@ div.code-toolbar { div.code-toolbar > .toolbar { position: absolute; top: 0.5rem; - right: 1.2rem; + right: 1.5rem; transition: opacity 0.3s ease-in-out; /* opacity: 0; */ background-color: red; From 1be566f7c5bcf4ea573e1ce66475f7ac2b5b533c Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Thu, 1 Apr 2021 19:10:29 +0530 Subject: [PATCH 39/83] refactor: change codeblocks in icon buttons --- components/alerts.html | 187 ++++++-------- components/badge.css | 41 ++- components/button.css | 28 +- components/cards.css | 2 +- components/compiled.css | 204 ++++++++++++++- index.html | 553 +++++++++++++++++++++++++++------------- 6 files changed, 700 insertions(+), 315 deletions(-) diff --git a/components/alerts.html b/components/alerts.html index 96d6196..701e970 100644 --- a/components/alerts.html +++ b/components/alerts.html @@ -199,123 +199,78 @@ 
             
-                <div class="alerts__error alerts--common">
-          <span class="alerts--margin--common">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              xmlns:xlink="http://www.w3.org/1999/xlink"
-              xmlns:svgjs="http://svgjs.com/svgjs"
-              version="1.1"
-              width="24"
-              height="24"
-              x="0"
-              y="0"
-              viewBox="0 0 511.82388 511"
-              style="enable-background: new 0 0 512 512"
-              xml:space="preserve"
-              class=""
-            >
-              <g>
-                <path
-                  xmlns="http://www.w3.org/2000/svg"
-                  d="m439.210938 459.449219h-366.609376c-25.160156 0-48.53125-13.027344-61.757812-34.433594-13.230469-21.402344-14.433594-48.128906-3.179688-70.636719l183.304688-313.832031c12.300781-24.59375 37.4375-40.132813 64.9375-40.132813s52.636719 15.539063 64.9375 40.132813l183.304688 313.832031c11.253906 22.507813 10.050781 49.234375-3.179688 70.636719-13.226562 21.40625-36.59375 34.433594-61.757812 34.433594zm0 0"
-                  fill="#d1403f"
-                  data-original="#d1403f"
-                  style=""
-                  class=""
-                />
-                <path
-                  xmlns="http://www.w3.org/2000/svg"
-                  d="m439.253906 459.449219h-183.347656v-459.035157c27.566406-.171874 52.804688 15.429688 64.972656 40.167969l183.257813 313.820313c11.269531 22.492187 10.082031 49.21875-3.136719 70.621094-13.222656 21.40625-36.585938 34.433593-61.746094 34.425781zm0 0"
-                  fill="#d1403f"
-                  data-original="#f29c1f"
-                  style=""
-                  class=""
-                />
-                <path
-                  xmlns="http://www.w3.org/2000/svg"
-                  d="m291.21875 380c0 19.503906-15.8125 35.3125-35.3125 35.3125s-35.308594-15.808594-35.308594-35.3125c0-19.5 15.808594-35.308594 35.308594-35.308594s35.3125 15.808594 35.3125 35.308594zm0 0"
-                  fill="#ffffff"
-                  data-original="#35495e"
-                  style=""
-                  class=""
-                />
-                <path
-                  xmlns="http://www.w3.org/2000/svg"
-                  d="m291.21875 380c0 9.367188-3.71875 18.347656-10.339844 24.972656-6.625 6.621094-15.605468 10.339844-24.972656 10.339844v-70.621094c9.367188-.003906 18.347656 3.714844 24.972656 10.339844 6.621094 6.621094 10.339844 15.605469 10.339844 24.96875zm0 0"
-                  fill="#ffffff"
-                  data-original="#2c3e50"
-                  style=""
-                  class=""
-                />
-                <path
-                  xmlns="http://www.w3.org/2000/svg"
-                  d="m255.90625 71.035156c19.5 0 35.3125 15.808594 35.3125 35.3125v167.722656c0 19.5-15.8125 35.308594-35.3125 35.308594s-35.308594-15.808594-35.308594-35.308594v-167.722656c0-19.503906 15.808594-35.3125 35.308594-35.3125zm0 0"
-                  fill="#ffffff"
-                  data-original="#35495e"
-                  style=""
-                  class=""
-                />
-                <path
-                  xmlns="http://www.w3.org/2000/svg"
-                  d="m291.21875 106.347656v167.722656c0 9.367188-3.71875 18.347657-10.339844 24.96875-6.625 6.625-15.605468 10.34375-24.972656 10.339844v-238.34375c9.367188-.011718 18.359375 3.703125 24.984375 10.328125 6.621094 6.625 10.339844 15.613281 10.328125 24.984375zm0 0"
-                  fill="#ffffff"
-                  data-original="#2c3e50"
-                  style=""
-                  class=""
-                />
-              </g>
-            </svg>
-          </span>
-          This is an error alert - check it out!
-        </div>
-              version="1.1"
-              width="24"
-              height="24"
-              x="0"
-              y="0"
-              viewBox="0 0 367.805 367.805"
-              style="enable-background: new 0 0 512 512"
-              xml:space="preserve"
-              class=""
-            >
-              <g>
-                <g xmlns="http://www.w3.org/2000/svg">
-                  <path
-                    style=""
-                    d="M183.903,0.001c101.566,0,183.902,82.336,183.902,183.902s-82.336,183.902-183.902,183.902   S0.001,285.469,0.001,183.903l0,0C-0.288,82.625,81.579,0.29,182.856,0.001C183.205,0,183.554,0,183.903,0.001z"
-                    fill="#3bb54a"
-                    data-original="#3bb54a"
-                    class=""
-                  />
-                  <polygon
-                    style=""
-                    points="285.78,133.225 155.168,263.837 82.025,191.217 111.805,161.96 155.168,204.801    256.001,103.968  "
-                    fill="#ffffff"
-                    data-original="#d4e1f4"
+              <div
+                class="alerts__error alerts--common alert--reduce-width center--margin"
+              >
+                <span class="alerts--margin--common">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                    xmlns:svgjs="http://svgjs.com/svgjs"
+                    version="1.1"
+                    width="24"
+                    height="24"
+                    x="0"
+                    y="0"
+                    viewBox="0 0 511.82388 511"
+                    style="enable-background: new 0 0 512 512"
+                    xml:space="preserve"
                     class=""
-                  />
-                </g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-              </g>
-            </svg>
-          </span>
-          This is an success alert - check it out!
-        </div>
+                  >
+                    <g>
+                      <path
+                        xmlns="http://www.w3.org/2000/svg"
+                        d="m439.210938 459.449219h-366.609376c-25.160156 0-48.53125-13.027344-61.757812-34.433594-13.230469-21.402344-14.433594-48.128906-3.179688-70.636719l183.304688-313.832031c12.300781-24.59375 37.4375-40.132813 64.9375-40.132813s52.636719 15.539063 64.9375 40.132813l183.304688 313.832031c11.253906 22.507813 10.050781 49.234375-3.179688 70.636719-13.226562 21.40625-36.59375 34.433594-61.757812 34.433594zm0 0"
+                        fill="#d1403f"
+                        data-original="#d1403f"
+                        style=""
+                        class=""
+                      />
+                      <path
+                        xmlns="http://www.w3.org/2000/svg"
+                        d="m439.253906 459.449219h-183.347656v-459.035157c27.566406-.171874 52.804688 15.429688 64.972656 40.167969l183.257813 313.820313c11.269531 22.492187 10.082031 49.21875-3.136719 70.621094-13.222656 21.40625-36.585938 34.433593-61.746094 34.425781zm0 0"
+                        fill="#d1403f"
+                        data-original="#f29c1f"
+                        style=""
+                        class=""
+                      />
+                      <path
+                        xmlns="http://www.w3.org/2000/svg"
+                        d="m291.21875 380c0 19.503906-15.8125 35.3125-35.3125 35.3125s-35.308594-15.808594-35.308594-35.3125c0-19.5 15.808594-35.308594 35.308594-35.308594s35.3125 15.808594 35.3125 35.308594zm0 0"
+                        fill="#ffffff"
+                        data-original="#35495e"
+                        style=""
+                        class=""
+                      />
+                      <path
+                        xmlns="http://www.w3.org/2000/svg"
+                        d="m291.21875 380c0 9.367188-3.71875 18.347656-10.339844 24.972656-6.625 6.621094-15.605468 10.339844-24.972656 10.339844v-70.621094c9.367188-.003906 18.347656 3.714844 24.972656 10.339844 6.621094 6.621094 10.339844 15.605469 10.339844 24.96875zm0 0"
+                        fill="#ffffff"
+                        data-original="#2c3e50"
+                        style=""
+                        class=""
+                      />
+                      <path
+                        xmlns="http://www.w3.org/2000/svg"
+                        d="m255.90625 71.035156c19.5 0 35.3125 15.808594 35.3125 35.3125v167.722656c0 19.5-15.8125 35.308594-35.3125 35.308594s-35.308594-15.808594-35.308594-35.308594v-167.722656c0-19.503906 15.808594-35.3125 35.308594-35.3125zm0 0"
+                        fill="#ffffff"
+                        data-original="#35495e"
+                        style=""
+                        class=""
+                      />
+                      <path
+                        xmlns="http://www.w3.org/2000/svg"
+                        d="m291.21875 106.347656v167.722656c0 9.367188-3.71875 18.347657-10.339844 24.96875-6.625 6.625-15.605468 10.34375-24.972656 10.339844v-238.34375c9.367188-.011718 18.359375 3.703125 24.984375 10.328125 6.621094 6.625 10.339844 15.613281 10.328125 24.984375zm0 0"
+                        fill="#ffffff"
+                        data-original="#2c3e50"
+                        style=""
+                        class=""
+                      />
+                    </g>
+                  </svg>
+                </span>
+                This is an error alert - check it out!
+              </div>
diff --git a/components/badge.css b/components/badge.css index 573b8b8..7450b5e 100644 --- a/components/badge.css +++ b/components/badge.css @@ -16,36 +16,51 @@ .avatar-container { display: flex; flex-direction: column; + border: 1px solid var(--border-color); border-bottom: 0; + margin-bottom: 2rem; + border-radius: 5px; } .badge-div { display: flex; + border-bottom: 1px solid var(--border-color); } .badge-icon { position: relative; + text-decoration: none; + display: inline-block; + padding: 2rem; + border-radius: 50%; + color: var(--primary-color); } .num-badge { position: absolute; + background-color: var(--badge-color-pink); + color: var(--secondary-color); + padding: 0.2rem; + border: 2px solid var(--secondary-color); border-radius: 60%; + font-family: var(--primary-font); font-size: 0.8rem; font-weight: 600; + bottom: 2.8rem; right: 1rem; } @@ -68,54 +83,64 @@ .avatar-comp { position: relative; + margin: 1rem; } .avatar-badge { position: absolute; + display: inline-block; + min-width: 1rem; min-height: 1rem; + background-color: var(--presence-color); border-radius: 50%; border: 2px solid var(--badge-border-color); + bottom: 0; right: 0; } .avatar-badge-large { - min-height: 1.8rem; - min-width: 1.8rem; - bottom: 1rem; + min-height: 2rem; + min-width: 2rem; + + bottom: 0.5rem; } .avatar-badge-medium { min-height: 1.3rem; min-width: 1.3rem; - right: 2.8rem; + + bottom: 0.3rem; } .avatar-badge-small { - right: 3.4rem; + bottom: 0.3rem; } .avatar-badge-ex-small { min-height: 0.7rem; min-width: 0.7em; - right: 3.9rem; + + bottom: 0.3rem; } .badge-icon-container .avatar-display { display: flex; justify-content: flex-start; flex-wrap: wrap; + align-items: center; + padding: 1rem; + border-bottom: 1px solid var(--border-color); - /* justify-content: center; */ } -.img-utils { +.badge-utils { width: 100%; border-radius: 50%; } diff --git a/components/button.css b/components/button.css index 06005ad..e915c52 100644 --- a/components/button.css +++ b/components/button.css @@ -116,17 +116,23 @@ body { /* border: 1px solid var(--primary-color); */ - background-color: var(--secondary-color); + background-color: var(--primary-color); border: 0; + color: white; + + box-shadow: var(--button-shadow); + /* color: var(--secondary-color); */ padding: var(--button-padding); - box-shadow: var(--button-shadow); - margin: var(--button-margin); + + border-radius: 0.3rem; + + cursor: pointer; } /* floating button */ @@ -147,6 +153,8 @@ body { margin: var(--button-margin); border-radius: 50%; + + cursor: pointer; } /* utilities for twitter, facebook and github buttons */ @@ -172,15 +180,19 @@ body { } /* fix overflow for code block */ -.button__container .language-markup { +/* .button__container .language-markup { overflow-x: scroll; overflow-y: hidden; -} +} */ .button__container .toolbar { right: 1rem; } +.btn-codeblock--height { + height: 10rem; +} + @media screen and (min-width: 576px) { .button__primary:hover { background-color: var(--primary-color); @@ -188,8 +200,12 @@ body { } /* codeblock overflow fix for desktop and tablets */ - .button__container .language-markup { + /* .button__container .language-markup { overflow-x: hidden; overflow-y: hidden; + } */ + + .button__container > div.code-toolbar > .toolbar { + right: 1rem; } } diff --git a/components/cards.css b/components/cards.css index fdf0174..24c8e9b 100644 --- a/components/cards.css +++ b/components/cards.css @@ -97,7 +97,7 @@ body { display: flex; flex-direction: column; - max-width: 13rem; + max-width: 15rem; font-family: var(--primary-font); font-weight: bolder; diff --git a/components/compiled.css b/components/compiled.css index d4501b7..680282d 100644 --- a/components/compiled.css +++ b/components/compiled.css @@ -15,15 +15,6 @@ body { --secondary-color: #fff; --border-color: #e5e5e5; - --button-radius: 0.3rem; - --twitter-color: #1da1f2; - --facebook-color: #385898; - --github-color: #24292e; - --button-margin: 0.5rem; - --button-padding: 0.6rem; - --button-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), - 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); - --success-alert-backcolor: #c6f4d5; --success-alert-fontcolor: #3bb54a; --error-alert-backcolor: #fdd7d7; @@ -35,10 +26,12 @@ body { --alert-font-size: 1.3rem; --alert-icon-margin-right: 1rem; --alert-padding: 1rem; + --presence-color: #3aa169; --badge-border-color: #fff; - --wish-svg-stroke: #f16565; - --close-svg-stroke: #e84545; + --badge-color-pink: #f16565; + --secondary-color: #fff; + --badge-color-blue: #2a77f0; } /* utility */ @@ -110,3 +103,192 @@ body { width: 100%; border-radius: 50%; } + +/* Alerts */ + +.alerts { + width: 100%; +} + +.alerts--common { + display: flex; + align-items: center; + padding: var(--alert-padding); + + font-size: var(--alert-font-size); + font-family: var(--primary-font); + + border-radius: 0.5rem; +} + +.alerts--margin--common { + margin-right: var(--alert-icon-margin-right); +} + +.alerts__success { + background-color: var(--success-alert-backcolor); + color: var(--success-alert-fontcolor); +} + +.alerts__error { + background-color: var(--error-alert-backcolor); + color: var(--error-alert-fontcolor); +} + +.alerts__warning { + background-color: var(--warning-alert-backcolor); + color: var(--warning-alert-fontcolor); +} + +.alerts__info { + background-color: var(--info-alert-backcolor); + color: var(--info-alert-fontcolor); +} + +/* Badges */ +.badge-icon-container, +.avatar-container { + display: flex; + flex-direction: column; + + border: 1px solid var(--border-color); + border-bottom: 0; + + margin-bottom: 2rem; + + border-radius: 5px; +} + +.badge-div { + display: flex; + + border-bottom: 1px solid var(--border-color); +} + +.badge-icon { + position: relative; + + text-decoration: none; + + display: inline-block; + + padding: 2rem; + + border-radius: 50%; + + color: var(--primary-color); +} + +.num-badge { + position: absolute; + + background-color: var(--badge-color-pink); + + color: var(--secondary-color); + + padding: 0.2rem; + + border: 2px solid var(--secondary-color); + border-radius: 60%; + + font-family: var(--primary-font); + font-size: 0.8rem; + font-weight: 600; + + bottom: 2.8rem; + right: 1rem; +} + +.cart-badge { + background-color: var(--badge-color-pink); + color: var(--secondary-color); +} + +.notif-badge { + background-color: var(--badge-color-blue); +} + +.avatar-container .avatar-display { + display: flex; + align-items: center; +} + +/* avatar component with Badge */ + +.avatar-comp { + position: relative; + + margin: 1rem; +} + +.avatar-badge { + position: absolute; + + display: inline-block; + + min-width: 1rem; + min-height: 1rem; + + background-color: var(--presence-color); + border-radius: 50%; + border: 2px solid var(--badge-border-color); + + bottom: 0; + right: 0; +} + +.avatar-badge-large { + min-height: 2rem; + min-width: 2rem; + + bottom: 0.5rem; +} + +.avatar-badge-medium { + min-height: 1.3rem; + min-width: 1.3rem; + + bottom: 0.3rem; +} + +.avatar-badge-small { + bottom: 0.3rem; +} + +.avatar-badge-ex-small { + min-height: 0.7rem; + min-width: 0.7em; + + bottom: 0.3rem; +} + +.badge-icon-container .avatar-display { + display: flex; + justify-content: flex-start; + flex-wrap: wrap; + + align-items: center; + + padding: 1rem; + + border-bottom: 1px solid var(--border-color); +} + +.badge-utils { + width: 100%; + border-radius: 50%; +} + +/* Alerts Media Queries */ + +@media screen and (max-width: 620px) { + .alerts--common { + margin: 0 1rem 0 1rem; + } +} + +@media screen and (min-width: 620px) { + .alert--reduce-width { + width: 50%; + } +} diff --git a/index.html b/index.html index 069ea9d..d635439 100644 --- a/index.html +++ b/index.html @@ -350,123 +350,76 @@ 

                   
-                      <div class="alerts__error alerts--common">
-                <span class="alerts--margin--common">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                    xmlns:svgjs="http://svgjs.com/svgjs"
-                    version="1.1"
-                    width="24"
-                    height="24"
-                    x="0"
-                    y="0"
-                    viewBox="0 0 511.82388 511"
-                    style="enable-background: new 0 0 512 512"
-                    xml:space="preserve"
-                    class=""
-                  >
-                    <g>
-                      <path
-                        xmlns="http://www.w3.org/2000/svg"
-                        d="m439.210938 459.449219h-366.609376c-25.160156 0-48.53125-13.027344-61.757812-34.433594-13.230469-21.402344-14.433594-48.128906-3.179688-70.636719l183.304688-313.832031c12.300781-24.59375 37.4375-40.132813 64.9375-40.132813s52.636719 15.539063 64.9375 40.132813l183.304688 313.832031c11.253906 22.507813 10.050781 49.234375-3.179688 70.636719-13.226562 21.40625-36.59375 34.433594-61.757812 34.433594zm0 0"
-                        fill="#d1403f"
-                        data-original="#d1403f"
-                        style=""
-                        class=""
-                      />
-                      <path
-                        xmlns="http://www.w3.org/2000/svg"
-                        d="m439.253906 459.449219h-183.347656v-459.035157c27.566406-.171874 52.804688 15.429688 64.972656 40.167969l183.257813 313.820313c11.269531 22.492187 10.082031 49.21875-3.136719 70.621094-13.222656 21.40625-36.585938 34.433593-61.746094 34.425781zm0 0"
-                        fill="#d1403f"
-                        data-original="#f29c1f"
-                        style=""
-                        class=""
-                      />
-                      <path
-                        xmlns="http://www.w3.org/2000/svg"
-                        d="m291.21875 380c0 19.503906-15.8125 35.3125-35.3125 35.3125s-35.308594-15.808594-35.308594-35.3125c0-19.5 15.808594-35.308594 35.308594-35.308594s35.3125 15.808594 35.3125 35.308594zm0 0"
-                        fill="#ffffff"
-                        data-original="#35495e"
-                        style=""
-                        class=""
-                      />
-                      <path
-                        xmlns="http://www.w3.org/2000/svg"
-                        d="m291.21875 380c0 9.367188-3.71875 18.347656-10.339844 24.972656-6.625 6.621094-15.605468 10.339844-24.972656 10.339844v-70.621094c9.367188-.003906 18.347656 3.714844 24.972656 10.339844 6.621094 6.621094 10.339844 15.605469 10.339844 24.96875zm0 0"
-                        fill="#ffffff"
-                        data-original="#2c3e50"
-                        style=""
-                        class=""
-                      />
-                      <path
-                        xmlns="http://www.w3.org/2000/svg"
-                        d="m255.90625 71.035156c19.5 0 35.3125 15.808594 35.3125 35.3125v167.722656c0 19.5-15.8125 35.308594-35.3125 35.308594s-35.308594-15.808594-35.308594-35.308594v-167.722656c0-19.503906 15.808594-35.3125 35.308594-35.3125zm0 0"
-                        fill="#ffffff"
-                        data-original="#35495e"
-                        style=""
-                        class=""
-                      />
-                      <path
-                        xmlns="http://www.w3.org/2000/svg"
-                        d="m291.21875 106.347656v167.722656c0 9.367188-3.71875 18.347657-10.339844 24.96875-6.625 6.625-15.605468 10.34375-24.972656 10.339844v-238.34375c9.367188-.011718 18.359375 3.703125 24.984375 10.328125 6.621094 6.625 10.339844 15.613281 10.328125 24.984375zm0 0"
-                        fill="#ffffff"
-                        data-original="#2c3e50"
-                        style=""
-                        class=""
-                      />
-                    </g>
-                  </svg>
-                </span>
-                This is an error alert - check it out!
-              </div>
-                    version="1.1"
-                    width="24"
-                    height="24"
-                    x="0"
-                    y="0"
-                    viewBox="0 0 367.805 367.805"
-                    style="enable-background: new 0 0 512 512"
-                    xml:space="preserve"
-                    class=""
-                  >
-                    <g>
-                      <g xmlns="http://www.w3.org/2000/svg">
-                        <path
-                          style=""
-                          d="M183.903,0.001c101.566,0,183.902,82.336,183.902,183.902s-82.336,183.902-183.902,183.902   S0.001,285.469,0.001,183.903l0,0C-0.288,82.625,81.579,0.29,182.856,0.001C183.205,0,183.554,0,183.903,0.001z"
-                          fill="#3bb54a"
-                          data-original="#3bb54a"
-                          class=""
-                        />
-                        <polygon
-                          style=""
-                          points="285.78,133.225 155.168,263.837 82.025,191.217 111.805,161.96 155.168,204.801    256.001,103.968  "
-                          fill="#ffffff"
-                          data-original="#d4e1f4"
+                    <div class="alerts__error alerts--common">
+                      <span class="alerts--margin--common">
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          xmlns:xlink="http://www.w3.org/1999/xlink"
+                          xmlns:svgjs="http://svgjs.com/svgjs"
+                          version="1.1"
+                          width="24"
+                          height="24"
+                          x="0"
+                          y="0"
+                          viewBox="0 0 511.82388 511"
+                          style="enable-background: new 0 0 512 512"
+                          xml:space="preserve"
                           class=""
-                        />
-                      </g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                    </g>
-                  </svg>
-                </span>
-                This is an success alert - check it out!
-              </div>
+                        >
+                          <g>
+                            <path
+                              xmlns="http://www.w3.org/2000/svg"
+                              d="m439.210938 459.449219h-366.609376c-25.160156 0-48.53125-13.027344-61.757812-34.433594-13.230469-21.402344-14.433594-48.128906-3.179688-70.636719l183.304688-313.832031c12.300781-24.59375 37.4375-40.132813 64.9375-40.132813s52.636719 15.539063 64.9375 40.132813l183.304688 313.832031c11.253906 22.507813 10.050781 49.234375-3.179688 70.636719-13.226562 21.40625-36.59375 34.433594-61.757812 34.433594zm0 0"
+                              fill="#d1403f"
+                              data-original="#d1403f"
+                              style=""
+                              class=""
+                            />
+                            <path
+                              xmlns="http://www.w3.org/2000/svg"
+                              d="m439.253906 459.449219h-183.347656v-459.035157c27.566406-.171874 52.804688 15.429688 64.972656 40.167969l183.257813 313.820313c11.269531 22.492187 10.082031 49.21875-3.136719 70.621094-13.222656 21.40625-36.585938 34.433593-61.746094 34.425781zm0 0"
+                              fill="#d1403f"
+                              data-original="#f29c1f"
+                              style=""
+                              class=""
+                            />
+                            <path
+                              xmlns="http://www.w3.org/2000/svg"
+                              d="m291.21875 380c0 19.503906-15.8125 35.3125-35.3125 35.3125s-35.308594-15.808594-35.308594-35.3125c0-19.5 15.808594-35.308594 35.308594-35.308594s35.3125 15.808594 35.3125 35.308594zm0 0"
+                              fill="#ffffff"
+                              data-original="#35495e"
+                              style=""
+                              class=""
+                            />
+                            <path
+                              xmlns="http://www.w3.org/2000/svg"
+                              d="m291.21875 380c0 9.367188-3.71875 18.347656-10.339844 24.972656-6.625 6.621094-15.605468 10.339844-24.972656 10.339844v-70.621094c9.367188-.003906 18.347656 3.714844 24.972656 10.339844 6.621094 6.621094 10.339844 15.605469 10.339844 24.96875zm0 0"
+                              fill="#ffffff"
+                              data-original="#2c3e50"
+                              style=""
+                              class=""
+                            />
+                            <path
+                              xmlns="http://www.w3.org/2000/svg"
+                              d="m255.90625 71.035156c19.5 0 35.3125 15.808594 35.3125 35.3125v167.722656c0 19.5-15.8125 35.308594-35.3125 35.308594s-35.308594-15.808594-35.308594-35.308594v-167.722656c0-19.503906 15.808594-35.3125 35.308594-35.3125zm0 0"
+                              fill="#ffffff"
+                              data-original="#35495e"
+                              style=""
+                              class=""
+                            />
+                            <path
+                              xmlns="http://www.w3.org/2000/svg"
+                              d="m291.21875 106.347656v167.722656c0 9.367188-3.71875 18.347657-10.339844 24.96875-6.625 6.625-15.605468 10.34375-24.972656 10.339844v-238.34375c9.367188-.011718 18.359375 3.703125 24.984375 10.328125 6.621094 6.625 10.339844 15.613281 10.328125 24.984375zm0 0"
+                              fill="#ffffff"
+                              data-original="#2c3e50"
+                              style=""
+                              class=""
+                            />
+                          </g>
+                        </svg>
+                      </span>
+                      This is an error alert - check it out!
+                    </div>
@@ -902,7 +855,7 @@

avatar-large
avatar-medium
avatar-medium
avatar-extra-small <div class="avatar-comp"> <img - class="img-big img-utils" + class="img-big badge-utils" alt="avatar-large" src="../resources/man.svg" width="96" @@ -959,7 +912,7 @@

<div class="avatar-comp"> <img - class="img-medium img-utils" + class="img-medium badge-utils" alt="avatar-medium" src="../resources/man.svg" width="64" @@ -973,7 +926,7 @@

<div class="avatar-comp"> <img - class="img-small img-utils" + class="img-small badge-utils" alt="avatar-medium" src="../resources/man.svg" width="48" @@ -987,7 +940,7 @@

<div class="avatar-comp"> <img - class="img-ex-small img-utils" + class="img-ex-small badge-utils" alt="avatar-extra-small" src="../resources/man.svg" width="32" @@ -1177,7 +1130,7 @@

- - - -
- 
+              
                 
-                  <button class="icon__button">
-                    <!-- put your choice of svg here -->
+                  <button class="icon__button icon__cart">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                    xmlns:svgjs="http://svgjs.com/svgjs"
+                    version="1.1"
+                    width="20"
+                    height="20"
+                    x="0"
+                    y="0"
+                    viewBox="0 0 424.449 424.449"
+                    style="enable-background: new 0 0 512 512"
+                    xml:space="preserve"
+                    class=""
+                  >
+                    <g>
+                      <g xmlns="http://www.w3.org/2000/svg">
+                        <g>
+                          <g>
+                            <circle
+                              cx="170.241"
+                              cy="374.273"
+                              r="50.176"
+                              fill="#ffffff"
+                              data-original="#000000"
+                              style=""
+                              class=""
+                            />
+                            <path
+                              d="M316.673,324.098L316.673,324.098c-27.711,0-50.176,22.465-50.176,50.176s22.465,50.176,50.176,50.176     c27.711,0,50.176-22.465,50.176-50.176S344.384,324.098,316.673,324.098z"
+                              fill="#ffffff"
+                              data-original="#000000"
+                              style=""
+                              class=""
+                            />
+                            <path
+                              d="M402.177,272.897H140.545l-5.12-29.696h215.04c6.326,0.019,12.017-3.843,14.336-9.728l51.2-129.024     c3.111-7.892-0.766-16.812-8.658-19.922c-1.808-0.713-3.735-1.076-5.678-1.07H108.801L96.513,12.801     c-1.262-7.471-7.784-12.906-15.36-12.8h-58.88c-8.483,0-15.36,6.877-15.36,15.36s6.877,15.36,15.36,15.36h46.08l44.032,260.096     c1.262,7.471,7.784,12.906,15.36,12.8h274.432c8.483,0,15.36-6.877,15.36-15.36C417.537,279.774,410.66,272.897,402.177,272.897z     "
+                              fill="#ffffff"
+                              data-original="#000000"
+                              style=""
+                              class=""
+                            />
+                          </g>
+                        </g>
+                      </g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                    </g>
+                  </svg>
+                </button> 
+                
+              

+              
+                
+                  <button class="icon__button icon__heart">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                    xmlns:svgjs="http://svgjs.com/svgjs"
+                    version="1.1"
+                    width="20"
+                    height="20"
+                    x="0"
+                    y="0"
+                    viewBox="0 0 512 512"
+                    style="enable-background: new 0 0 512 512"
+                    xml:space="preserve"
+                    class=""
+                  >
+                    <g>
+                      <g xmlns="http://www.w3.org/2000/svg">
+                        <g>
+                          <path
+                            d="M376,30c-27.783,0-53.255,8.804-75.707,26.168c-21.525,16.647-35.856,37.85-44.293,53.268    c-8.437-15.419-22.768-36.621-44.293-53.268C189.255,38.804,163.783,30,136,30C58.468,30,0,93.417,0,177.514    c0,90.854,72.943,153.015,183.369,247.118c18.752,15.981,40.007,34.095,62.099,53.414C248.38,480.596,252.12,482,256,482    s7.62-1.404,10.532-3.953c22.094-19.322,43.348-37.435,62.111-53.425C439.057,330.529,512,268.368,512,177.514    C512,93.417,453.532,30,376,30z"
+                            fill="#ffffff"
+                            data-original="#000000"
+                            style=""
+                            class=""
+                          />
+                        </g>
+                      </g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                    </g>
+                  </svg>
+                </button> 
+                
+              

+              
+                
+                  <button class="icon__button icon__home">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                    xmlns:svgjs="http://svgjs.com/svgjs"
+                    version="1.1"
+                    width="20"
+                    height="20"
+                    x="0"
+                    y="0"
+                    viewBox="0 0 306.773 306.773"
+                    style="enable-background: new 0 0 512 512"
+                    xml:space="preserve"
+                    class=""
+                  >
+                    <g>
+                      <g xmlns="http://www.w3.org/2000/svg">
+                        <path
+                          style=""
+                          d="M302.93,149.794c5.561-6.116,5.024-15.49-1.199-20.932L164.63,8.898   c-6.223-5.442-16.2-5.328-22.292,0.257L4.771,135.258c-6.092,5.585-6.391,14.947-0.662,20.902l3.449,3.592   c5.722,5.955,14.971,6.665,20.645,1.581l10.281-9.207v134.792c0,8.27,6.701,14.965,14.965,14.965h53.624   c8.264,0,14.965-6.695,14.965-14.965v-94.3h68.398v94.3c-0.119,8.264,5.794,14.959,14.058,14.959h56.828   c8.264,0,14.965-6.695,14.965-14.965V154.024c0,0,2.84,2.488,6.343,5.567c3.497,3.073,10.842,0.609,16.403-5.513L302.93,149.794z"
+                          fill="#ffffff"
+                          data-original="#010002"
+                          class=""
+                        />
+                      </g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                      <g xmlns="http://www.w3.org/2000/svg"></g>
+                    </g>
+                  </svg>
+                </button>
+                
+              

+              
+                
+                  <button class="icon__button icon__profile">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      xmlns:xlink="http://www.w3.org/1999/xlink"
+                      xmlns:svgjs="http://svgjs.com/svgjs"
+                      version="1.1"
+                      width="20"
+                      height="20"
+                      x="0"
+                      y="0"
+                      viewBox="0 0 512 512"
+                      style="enable-background: new 0 0 512 512"
+                      xml:space="preserve"
+                      class=""
+                    >
+                      <g>
+                        <g xmlns="http://www.w3.org/2000/svg">
+                          <g>
+                            <path
+                              d="M256,0c-74.439,0-135,60.561-135,135s60.561,135,135,135s135-60.561,135-135S330.439,0,256,0z"
+                              fill="#ffffff"
+                              data-original="#000000"
+                              style=""
+                              class=""
+                            />
+                          </g>
+                        </g>
+                        <g xmlns="http://www.w3.org/2000/svg">
+                          <g>
+                            <path
+                              d="M423.966,358.195C387.006,320.667,338.009,300,286,300h-60c-52.008,0-101.006,20.667-137.966,58.195    C51.255,395.539,31,444.833,31,497c0,8.284,6.716,15,15,15h420c8.284,0,15-6.716,15-15    C481,444.833,460.745,395.539,423.966,358.195z"
+                              fill="#ffffff"
+                              data-original="#000000"
+                              style=""
+                              class=""
+                            />
+                          </g>
+                        </g>
+                        <g xmlns="http://www.w3.org/2000/svg"></g>
+                        <g xmlns="http://www.w3.org/2000/svg"></g>
+                        <g xmlns="http://www.w3.org/2000/svg"></g>
+                        <g xmlns="http://www.w3.org/2000/svg"></g>
+                        <g xmlns="http://www.w3.org/2000/svg"></g>
+                        <g xmlns="http://www.w3.org/2000/svg"></g>
+                        <g xmlns="http://www.w3.org/2000/svg"></g>
+                        <g xmlns="http://www.w3.org/2000/svg"></g>
+                        <g xmlns="http://www.w3.org/2000/svg"></g>
+                        <g xmlns="http://www.w3.org/2000/svg"></g>
+                        <g xmlns="http://www.w3.org/2000/svg"></g>
+                        <g xmlns="http://www.w3.org/2000/svg"></g>
+                        <g xmlns="http://www.w3.org/2000/svg"></g>
+                        <g xmlns="http://www.w3.org/2000/svg"></g>
+                        <g xmlns="http://www.w3.org/2000/svg"></g>
+                      </g>
+                    </svg>
                   </button>
                 
               


From e90756960639302612d8a853919469332d40d5b4 Mon Sep 17 00:00:00 2001
From: jugalkpatel 
Date: Sat, 3 Apr 2021 15:07:23 +0530
Subject: [PATCH 40/83] refactor: move all svgs to seperate folder

---
 components/badge.css   |    3 -
 components/button.css  |   34 +-
 components/button.html |   41 +-
 components/cards.css   |   70 +-
 index.html             | 1839 +++++-----------------------------------
 svgs/black-bell.svg    |    4 +
 svgs/black-cart.svg    |    5 +
 svgs/black-heart.svg   |    3 +
 svgs/close-btn.svg     |    4 +
 svgs/error-alert.svg   |   10 +
 svgs/facebook.svg      |    5 +
 svgs/github.svg        |    7 +
 svgs/info-alert.svg    |   22 +
 svgs/product-wish.svg  |    3 +
 svgs/rating.svg        |    5 +
 svgs/star.svg          |    3 +
 svgs/success-alert.svg |   23 +
 svgs/twitter.svg       |   20 +
 svgs/warning-alert.svg |   10 +
 svgs/white-cart.svg    |   28 +
 svgs/white-heart.svg   |   24 +
 svgs/white-home.svg    |   22 +
 svgs/white-profile.svg |   29 +
 svgs/wish-btn.svg      |    3 +
 24 files changed, 498 insertions(+), 1719 deletions(-)
 create mode 100644 svgs/black-bell.svg
 create mode 100644 svgs/black-cart.svg
 create mode 100644 svgs/black-heart.svg
 create mode 100644 svgs/close-btn.svg
 create mode 100644 svgs/error-alert.svg
 create mode 100644 svgs/facebook.svg
 create mode 100644 svgs/github.svg
 create mode 100644 svgs/info-alert.svg
 create mode 100644 svgs/product-wish.svg
 create mode 100644 svgs/rating.svg
 create mode 100644 svgs/star.svg
 create mode 100644 svgs/success-alert.svg
 create mode 100644 svgs/twitter.svg
 create mode 100644 svgs/warning-alert.svg
 create mode 100644 svgs/white-cart.svg
 create mode 100644 svgs/white-heart.svg
 create mode 100644 svgs/white-home.svg
 create mode 100644 svgs/white-profile.svg
 create mode 100644 svgs/wish-btn.svg

diff --git a/components/badge.css b/components/badge.css
index 7450b5e..47713d7 100644
--- a/components/badge.css
+++ b/components/badge.css
@@ -146,9 +146,6 @@
 }
 
 /* fix overflow of the code block */
-.badge-icon-container .language-markup {
-  height: 10rem;
-}
 
 .avatar-container .language-markup {
   height: 10rem;
diff --git a/components/button.css b/components/button.css
index e915c52..31e2a5e 100644
--- a/components/button.css
+++ b/components/button.css
@@ -24,15 +24,9 @@ body {
     0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
 }
 
-.button__container {
-  /* padding: 1rem; */
-
-  /* margin: 1rem; */
-  /* border: 1px solid black; */
-}
-
 /* primary button */
 .button__primary {
+  display: inline-block;
   background-color: var(--secondary-color);
 
   color: var(--primary-color);
@@ -52,6 +46,8 @@ body {
 }
 /* secondary button */
 .button__secondary {
+  display: inline-block;
+
   background-color: var(--primary-color);
 
   color: var(--secondary-color);
@@ -82,10 +78,14 @@ body {
 .button__link-button {
   text-decoration: none;
 
-  display: flex;
+  display: inline-flex;
   justify-content: center;
   align-items: center;
 
+  /* display: inline-block; */
+
+  text-align: center;
+
   padding: var(--button-padding);
 
   margin: var(--button-margin);
@@ -112,6 +112,10 @@ body {
 
 /* icon button */
 .icon__button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
   outline: var(--primary-color);
 
   /* border: 1px solid var(--primary-color); */
@@ -137,6 +141,10 @@ body {
 
 /* floating button */
 .floating__button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
   outline: var(--primary-color);
 
   background-color: var(--primary-color);
@@ -179,19 +187,13 @@ body {
   border: 1px solid var(--github-color);
 }
 
-/* fix overflow for code block */
-/* .button__container .language-markup {
-  overflow-x: scroll;
-  overflow-y: hidden;
-} */
-
 .button__container .toolbar {
   right: 1rem;
 }
 
-.btn-codeblock--height {
+/* .btn-codeblock--height {
   height: 10rem;
-}
+} */
 
 @media screen and (min-width: 576px) {
   .button__primary:hover {
diff --git a/components/button.html b/components/button.html
index ce7e1bc..5d4eb51 100644
--- a/components/button.html
+++ b/components/button.html
@@ -41,46 +41,7 @@
         

           
diff --git a/components/cards.css b/components/cards.css
index 24c8e9b..cd88036 100644
--- a/components/cards.css
+++ b/components/cards.css
@@ -18,7 +18,7 @@ body {
   --close-svg-stroke: #e84545;
   --shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
     0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-  --small-text: 0.7rem;
+  --small-text: 0.8rem;
   --small-text-color: #878787;
   --zindex-one: 1;
 }
@@ -53,8 +53,11 @@ body {
   outline: 0;
 
   position: absolute;
-  bottom: 7.5rem;
+  bottom: 7.7rem;
   right: 1.2rem;
+
+  z-index: var(--zindex-one);
+  /* cursor: progress; */
 }
 
 .heart-svg:hover {
@@ -75,12 +78,38 @@ body {
   position: absolute;
   top: 1.4rem;
   left: 1rem;
+
+  z-index: var(--zindex-one);
+
+  /* cursor: progress; */
 }
 
 .svg-close:hover {
   stroke: var(--close-svg-stroke);
 }
 
+.primary-btn {
+  background-color: var(--secondary-color);
+
+  border: 1.8px solid var(--primary-color);
+
+  padding: 0.6rem;
+
+  font-family: var(--primary-font);
+  font-weight: 900;
+
+  border-radius: 0.1rem;
+
+  outline: var(--primary-color);
+
+  cursor: pointer;
+}
+
+.primary-btn:hover {
+  background-color: var(--primary-color);
+  color: var(--secondary-color);
+}
+
 /* cards-container */
 
 .cards-container {
@@ -106,7 +135,14 @@ body {
 
   padding: 1rem;
 
+  margin: 1rem;
+
   /* padding: 1rem; */
+
+  /* border: 1px solid black; */
+}
+
+.product-container:hover {
   box-shadow: var(--shadow);
 }
 
@@ -122,19 +158,20 @@ body {
 }
 
 .product-info__img {
-  height: 13rem;
+  height: 20rem;
 }
 
 .product-info__small {
   display: block;
   font-size: var(--small-text);
   color: var(--small-text-color);
-  font-weight: 300;
+  font-weight: 500;
 }
 
 .product-info__rating {
   display: flex;
   justify-content: center;
+  align-items: center;
 
   max-width: max-content;
 
@@ -152,10 +189,6 @@ body {
   margin-left: 0;
 }
 
-.svg__rating {
-  margin-right: 5px;
-}
-
 .product-info__wish-btn {
   bottom: 7rem;
   right: 0.3rem;
@@ -163,31 +196,12 @@ body {
   cursor: pointer;
 }
 
-.primary-btn {
-  background-color: var(--secondary-color);
-
-  border: 1.8px solid var(--primary-color);
-
-  padding: 0.6rem;
-
-  font-family: var(--primary-font);
-  font-weight: 900;
-
-  border-radius: 0.3rem;
-  outline: var(--primary-color);
-}
-
-.primary-btn:hover {
-  background-color: var(--primary-color);
-  color: var(--secondary-color);
-}
-
 .price-tag {
   display: block;
 
   margin: 3px 0;
 
-  font-size: 1.3rem;
+  font-size: 1.1rem;
 
   font-weight: 900;
 }
diff --git a/index.html b/index.html
index d635439..2168ba1 100644
--- a/index.html
+++ b/index.html
@@ -163,112 +163,18 @@ 

                 class="alerts__success alerts--common center--margin alert--reduce-width"
               >
                 
-                  
-                    
-                      
-                        
-                        
-                      
-                      
-                      
-                      
-                      
-                      
-                      
-                      
-                      
-                      
-                      
-                      
-                      
-                      
-                      
-                      
-                    
-                  
+                  success_icon
                 
                 This is an success alert - check it out!
               

               
                   
-                      <div class="alerts__success alerts--common">
-                <span class="alerts--margin--common">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                    xmlns:svgjs="http://svgjs.com/svgjs"
-                    version="1.1"
-                    width="24"
-                    height="24"
-                    x="0"
-                    y="0"
-                    viewBox="0 0 367.805 367.805"
-                    style="enable-background: new 0 0 512 512"
-                    xml:space="preserve"
-                    class=""
-                  >
-                    <g>
-                      <g xmlns="http://www.w3.org/2000/svg">
-                        <path
-                          style=""
-                          d="M183.903,0.001c101.566,0,183.902,82.336,183.902,183.902s-82.336,183.902-183.902,183.902   S0.001,285.469,0.001,183.903l0,0C-0.288,82.625,81.579,0.29,182.856,0.001C183.205,0,183.554,0,183.903,0.001z"
-                          fill="#3bb54a"
-                          data-original="#3bb54a"
-                          class=""
-                        />
-                        <polygon
-                          style=""
-                          points="285.78,133.225 155.168,263.837 82.025,191.217 111.805,161.96 155.168,204.801    256.001,103.968  "
-                          fill="#ffffff"
-                          data-original="#d4e1f4"
-                          class=""
-                        />
-                      </g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                    </g>
-                  </svg>
-                </span>
-                This is an success alert - check it out!
-              </div>
+                    <div class="alerts__success alerts--common center--margin alert--reduce-width">
+                      <span class="alerts--margin--common">
+                        <img src="./svgs/success-alert.svg" alt="success_icon" />
+                      </span>
+                      This is an success alert - check it out!
+                    </div>
@@ -280,143 +186,15 @@

class="alerts__error alerts--common alert--reduce-width center--margin" > - - - - - - - - - - + error_icon This is an error alert - check it out! 

                   
-                    <div class="alerts__error alerts--common">
+                    <div class="alerts__error alerts--common alert--reduce-width center--margin">
                       <span class="alerts--margin--common">
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          xmlns:xlink="http://www.w3.org/1999/xlink"
-                          xmlns:svgjs="http://svgjs.com/svgjs"
-                          version="1.1"
-                          width="24"
-                          height="24"
-                          x="0"
-                          y="0"
-                          viewBox="0 0 511.82388 511"
-                          style="enable-background: new 0 0 512 512"
-                          xml:space="preserve"
-                          class=""
-                        >
-                          <g>
-                            <path
-                              xmlns="http://www.w3.org/2000/svg"
-                              d="m439.210938 459.449219h-366.609376c-25.160156 0-48.53125-13.027344-61.757812-34.433594-13.230469-21.402344-14.433594-48.128906-3.179688-70.636719l183.304688-313.832031c12.300781-24.59375 37.4375-40.132813 64.9375-40.132813s52.636719 15.539063 64.9375 40.132813l183.304688 313.832031c11.253906 22.507813 10.050781 49.234375-3.179688 70.636719-13.226562 21.40625-36.59375 34.433594-61.757812 34.433594zm0 0"
-                              fill="#d1403f"
-                              data-original="#d1403f"
-                              style=""
-                              class=""
-                            />
-                            <path
-                              xmlns="http://www.w3.org/2000/svg"
-                              d="m439.253906 459.449219h-183.347656v-459.035157c27.566406-.171874 52.804688 15.429688 64.972656 40.167969l183.257813 313.820313c11.269531 22.492187 10.082031 49.21875-3.136719 70.621094-13.222656 21.40625-36.585938 34.433593-61.746094 34.425781zm0 0"
-                              fill="#d1403f"
-                              data-original="#f29c1f"
-                              style=""
-                              class=""
-                            />
-                            <path
-                              xmlns="http://www.w3.org/2000/svg"
-                              d="m291.21875 380c0 19.503906-15.8125 35.3125-35.3125 35.3125s-35.308594-15.808594-35.308594-35.3125c0-19.5 15.808594-35.308594 35.308594-35.308594s35.3125 15.808594 35.3125 35.308594zm0 0"
-                              fill="#ffffff"
-                              data-original="#35495e"
-                              style=""
-                              class=""
-                            />
-                            <path
-                              xmlns="http://www.w3.org/2000/svg"
-                              d="m291.21875 380c0 9.367188-3.71875 18.347656-10.339844 24.972656-6.625 6.621094-15.605468 10.339844-24.972656 10.339844v-70.621094c9.367188-.003906 18.347656 3.714844 24.972656 10.339844 6.621094 6.621094 10.339844 15.605469 10.339844 24.96875zm0 0"
-                              fill="#ffffff"
-                              data-original="#2c3e50"
-                              style=""
-                              class=""
-                            />
-                            <path
-                              xmlns="http://www.w3.org/2000/svg"
-                              d="m255.90625 71.035156c19.5 0 35.3125 15.808594 35.3125 35.3125v167.722656c0 19.5-15.8125 35.308594-35.3125 35.308594s-35.308594-15.808594-35.308594-35.308594v-167.722656c0-19.503906 15.808594-35.3125 35.308594-35.3125zm0 0"
-                              fill="#ffffff"
-                              data-original="#35495e"
-                              style=""
-                              class=""
-                            />
-                            <path
-                              xmlns="http://www.w3.org/2000/svg"
-                              d="m291.21875 106.347656v167.722656c0 9.367188-3.71875 18.347657-10.339844 24.96875-6.625 6.625-15.605468 10.34375-24.972656 10.339844v-238.34375c9.367188-.011718 18.359375 3.703125 24.984375 10.328125 6.621094 6.625 10.339844 15.613281 10.328125 24.984375zm0 0"
-                              fill="#ffffff"
-                              data-original="#2c3e50"
-                              style=""
-                              class=""
-                            />
-                          </g>
-                        </svg>
+                        <img src="./svgs/error-alert.svg" alt="error_icon" />
                       </span>
                       This is an error alert - check it out!
                     </div>
@@ -431,146 +209,18 @@ 

                 class="alerts__warning alerts--common alert--reduce-width center--margin"
               >
                 
-                  
-                    
-                      
-                      
-                      
-                      
-                      
-                      
-                    
-                  
+                  warning_icon
                 
                 This is an warning alert - check it out!
               
                   
-                      <div class="alerts__warning alerts--common">
-                <span class="alerts--margin--common">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                    xmlns:svgjs="http://svgjs.com/svgjs"
-                    version="1.1"
-                    width="24"
-                    height="24"
-                    x="0"
-                    y="0"
-                    viewBox="0 0 511.82388 511"
-                    style="enable-background: new 0 0 512 512"
-                    xml:space="preserve"
-                    class=""
-                  >
-                    <g>
-                      <path
-                        xmlns="http://www.w3.org/2000/svg"
-                        d="m439.210938 459.449219h-366.609376c-25.160156 0-48.53125-13.027344-61.757812-34.433594-13.230469-21.402344-14.433594-48.128906-3.179688-70.636719l183.304688-313.832031c12.300781-24.59375 37.4375-40.132813 64.9375-40.132813s52.636719 15.539063 64.9375 40.132813l183.304688 313.832031c11.253906 22.507813 10.050781 49.234375-3.179688 70.636719-13.226562 21.40625-36.59375 34.433594-61.757812 34.433594zm0 0"
-                        fill="#f0c419"
-                        data-original="#f0c419"
-                        style=""
-                        class=""
-                      />
-                      <path
-                        xmlns="http://www.w3.org/2000/svg"
-                        d="m439.253906 459.449219h-183.347656v-459.035157c27.566406-.171874 52.804688 15.429688 64.972656 40.167969l183.257813 313.820313c11.269531 22.492187 10.082031 49.21875-3.136719 70.621094-13.222656 21.40625-36.585938 34.433593-61.746094 34.425781zm0 0"
-                        fill="#f0c419"
-                        data-original="#f29c1f"
-                        style=""
-                        class=""
-                      />
-                      <path
-                        xmlns="http://www.w3.org/2000/svg"
-                        d="m291.21875 380c0 19.503906-15.8125 35.3125-35.3125 35.3125s-35.308594-15.808594-35.308594-35.3125c0-19.5 15.808594-35.308594 35.308594-35.308594s35.3125 15.808594 35.3125 35.308594zm0 0"
-                        fill="#ffffff"
-                        data-original="#35495e"
-                        style=""
-                        class=""
-                      />
-                      <path
-                        xmlns="http://www.w3.org/2000/svg"
-                        d="m291.21875 380c0 9.367188-3.71875 18.347656-10.339844 24.972656-6.625 6.621094-15.605468 10.339844-24.972656 10.339844v-70.621094c9.367188-.003906 18.347656 3.714844 24.972656 10.339844 6.621094 6.621094 10.339844 15.605469 10.339844 24.96875zm0 0"
-                        fill="#ffffff"
-                        data-original="#2c3e50"
-                        style=""
-                        class=""
-                      />
-                      <path
-                        xmlns="http://www.w3.org/2000/svg"
-                        d="m255.90625 71.035156c19.5 0 35.3125 15.808594 35.3125 35.3125v167.722656c0 19.5-15.8125 35.308594-35.3125 35.308594s-35.308594-15.808594-35.308594-35.308594v-167.722656c0-19.503906 15.808594-35.3125 35.308594-35.3125zm0 0"
-                        fill="#ffffff"
-                        data-original="#35495e"
-                        style=""
-                        class=""
-                      />
-                      <path
-                        xmlns="http://www.w3.org/2000/svg"
-                        d="m291.21875 106.347656v167.722656c0 9.367188-3.71875 18.347657-10.339844 24.96875-6.625 6.625-15.605468 10.34375-24.972656 10.339844v-238.34375c9.367188-.011718 18.359375 3.703125 24.984375 10.328125 6.621094 6.625 10.339844 15.613281 10.328125 24.984375zm0 0"
-                        fill="#ffffff"
-                        data-original="#2c3e50"
-                        style=""
-                        class=""
-                      />
-                    </g>
-                  </svg>
-                </span>
-                This is an warning alert - check it out!
-              </div>
+                    <div class="alerts__warning alerts--common alert--reduce-width" >
+                      <span class="alerts--margin--common">
+                        <img src="./svgs/warning-alert.svg" alt="warning_icon" />
+                      </span>
+                      This is an warning alert - check it out!
+                    </div>
@@ -582,98 +232,18 @@

class="alerts__info alerts--common alert--reduce-width center--margin" > - - - - - - - - - - - - - - - - - - - - - - + info_icon This is an info alert - check it out! 
                   
-                      <div class="alerts__info alerts--common">
-                <span class="alerts--margin--common">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                    xmlns:svgjs="http://svgjs.com/svgjs"
-                    version="1.1"
-                    width="24"
-                    height="24"
-                    x="0"
-                    y="0"
-                    viewBox="0 0 438.533 438.533"
-                    style="enable-background: new 0 0 512 512"
-                    xml:space="preserve"
-                    class=""
-                  >
-                    <g>
-                      <g xmlns="http://www.w3.org/2000/svg">
-                        <path
-                          d="M409.133,109.203c-19.608-33.592-46.205-60.189-79.798-79.796C295.736,9.801,259.058,0,219.273,0   c-39.781,0-76.47,9.801-110.063,29.407c-33.595,19.604-60.192,46.201-79.8,79.796C9.801,142.8,0,179.489,0,219.267   c0,39.78,9.804,76.463,29.407,110.062c19.607,33.592,46.204,60.189,79.799,79.798c33.597,19.605,70.283,29.407,110.063,29.407   s76.47-9.802,110.065-29.407c33.593-19.602,60.189-46.206,79.795-79.798c19.603-33.596,29.403-70.284,29.403-110.062   C438.533,179.485,428.732,142.795,409.133,109.203z M182.727,54.813c0-2.666,0.855-4.853,2.57-6.565   c1.712-1.711,3.903-2.57,6.567-2.57h54.82c2.662,0,4.853,0.859,6.561,2.57c1.711,1.712,2.573,3.899,2.573,6.565v45.682   c0,2.664-0.862,4.854-2.573,6.564c-1.708,1.712-3.898,2.568-6.561,2.568h-54.82c-2.664,0-4.854-0.856-6.567-2.568   c-1.715-1.709-2.57-3.9-2.57-6.564V54.813z M292.359,356.309c0,2.662-0.863,4.853-2.57,6.561c-1.704,1.714-3.895,2.57-6.563,2.57   H155.317c-2.667,0-4.854-0.856-6.567-2.57c-1.712-1.708-2.568-3.898-2.568-6.564v-45.682c0-2.67,0.856-4.853,2.568-6.567   c1.713-1.708,3.903-2.57,6.567-2.57h27.41v-91.358h-27.41c-2.667,0-4.853-0.855-6.567-2.568c-1.712-1.711-2.568-3.901-2.568-6.567   v-45.679c0-2.666,0.856-4.853,2.568-6.567c1.715-1.713,3.905-2.568,6.567-2.568h91.367c2.662,0,4.853,0.855,6.561,2.568   c1.711,1.714,2.573,3.901,2.573,6.567v146.179h27.401c2.669,0,4.859,0.855,6.57,2.566c1.704,1.712,2.566,3.901,2.566,6.567v45.683   H292.359z"
-                          fill="#447eae"
-                          data-original="#000000"
-                          style=""
-                          class=""
-                        />
-                      </g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                    </g>
-                  </svg>
-                </span>
-                This is an info alert - check it out!
-              </div>
+                    <div class="alerts__info alerts--common alert--reduce-width">
+                      <span class="alerts--margin--common">
+                      <img src="./svgs/info-alert.svg" alt="info_icon" />
+                      </span>
+                      This is an info alert - check it out!
+                    </div>
@@ -688,167 +258,42 @@

- - - - - + cart 10 - - - + heart 10 - - - - + bell 10 
-        
-          <a href="#" class="badge-icon">
-          <svg
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <circle
-              cx="8"
-              cy="21"
-              fill="none"
-              r="2"
-              stroke="#000"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-            />
-            <circle
-              cx="20"
-              cy="21"
-              fill="none"
-              r="2"
-              stroke="#000"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-            />
-            <path
-              d="M5.67,6H23l-1.68,8.39a2,2,0,0,1-2,1.61H8.75a2,2,0,0,1-2-1.74L5.23,2.74A2,2,0,0,0,3.25,1H1"
-              fill="none"
-              stroke="#000"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-            />
-          </svg>
-          <span class="num-badge cart-badge">10</span>
-        </a>
-        
-
+ + <a href="#" class="badge-icon"> + <img src="./svgs/black-cart.svg" alt="cart" /> + <span class="num-badge cart-badge">10</span> + </a> + + 
-        
-          <a href="#" class="badge-icon">
-          <svg
-            fill="none"
-            height="24"
-            stroke="#000"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
-            />
-          </svg>
-          <span class="num-badge wishlist-badge">10</span>
-        </a>
-        
-
+ + <a href="#" class="badge-icon"> + <img src="./svgs/black-heart.svg" alt="heart" /> + <span class="num-badge wishlist-badge">10</span> + </a> + + 
-        
-          <a href="#" class="badge-icon">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="feather feather-bell"
-          >
-            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
-            <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
-          </svg>
-          <span class="num-badge notif-badge">10</span>
-        </a>
-
-        
-
+ + <a href="#" class="badge-icon"> + <img src="./svgs/black-bell.svg" alt="bell" /> + <span class="num-badge notif-badge">10</span> + </a> + +
@@ -996,46 +441,7 @@

class="button__link-button button--round twitter--btn" > - - - - - - - - - - - - - - - - - - - - + twitter_icon Twitter @@ -1044,29 +450,7 @@

class="button__link-button button--round facebook--btn" > - - - - - + facebook_icon Facebook @@ -1075,43 +459,7 @@

class="button__link-button button--round github--btn" > - - - - - - - + githuv_icon Github @@ -1131,433 +479,43 @@

- 
+              
                 
                   <button class="icon__button icon__cart">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                    xmlns:svgjs="http://svgjs.com/svgjs"
-                    version="1.1"
-                    width="20"
-                    height="20"
-                    x="0"
-                    y="0"
-                    viewBox="0 0 424.449 424.449"
-                    style="enable-background: new 0 0 512 512"
-                    xml:space="preserve"
-                    class=""
-                  >
-                    <g>
-                      <g xmlns="http://www.w3.org/2000/svg">
-                        <g>
-                          <g>
-                            <circle
-                              cx="170.241"
-                              cy="374.273"
-                              r="50.176"
-                              fill="#ffffff"
-                              data-original="#000000"
-                              style=""
-                              class=""
-                            />
-                            <path
-                              d="M316.673,324.098L316.673,324.098c-27.711,0-50.176,22.465-50.176,50.176s22.465,50.176,50.176,50.176     c27.711,0,50.176-22.465,50.176-50.176S344.384,324.098,316.673,324.098z"
-                              fill="#ffffff"
-                              data-original="#000000"
-                              style=""
-                              class=""
-                            />
-                            <path
-                              d="M402.177,272.897H140.545l-5.12-29.696h215.04c6.326,0.019,12.017-3.843,14.336-9.728l51.2-129.024     c3.111-7.892-0.766-16.812-8.658-19.922c-1.808-0.713-3.735-1.076-5.678-1.07H108.801L96.513,12.801     c-1.262-7.471-7.784-12.906-15.36-12.8h-58.88c-8.483,0-15.36,6.877-15.36,15.36s6.877,15.36,15.36,15.36h46.08l44.032,260.096     c1.262,7.471,7.784,12.906,15.36,12.8h274.432c8.483,0,15.36-6.877,15.36-15.36C417.537,279.774,410.66,272.897,402.177,272.897z     "
-                              fill="#ffffff"
-                              data-original="#000000"
-                              style=""
-                              class=""
-                            />
-                          </g>
-                        </g>
-                      </g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                    </g>
-                  </svg>
-                </button> 
+                    <img src="./svgs/white-cart.svg" alt="cart_icon" />
+                  </button>
                 
               

-              
+              
                 
                   <button class="icon__button icon__heart">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                    xmlns:svgjs="http://svgjs.com/svgjs"
-                    version="1.1"
-                    width="20"
-                    height="20"
-                    x="0"
-                    y="0"
-                    viewBox="0 0 512 512"
-                    style="enable-background: new 0 0 512 512"
-                    xml:space="preserve"
-                    class=""
-                  >
-                    <g>
-                      <g xmlns="http://www.w3.org/2000/svg">
-                        <g>
-                          <path
-                            d="M376,30c-27.783,0-53.255,8.804-75.707,26.168c-21.525,16.647-35.856,37.85-44.293,53.268    c-8.437-15.419-22.768-36.621-44.293-53.268C189.255,38.804,163.783,30,136,30C58.468,30,0,93.417,0,177.514    c0,90.854,72.943,153.015,183.369,247.118c18.752,15.981,40.007,34.095,62.099,53.414C248.38,480.596,252.12,482,256,482    s7.62-1.404,10.532-3.953c22.094-19.322,43.348-37.435,62.111-53.425C439.057,330.529,512,268.368,512,177.514    C512,93.417,453.532,30,376,30z"
-                            fill="#ffffff"
-                            data-original="#000000"
-                            style=""
-                            class=""
-                          />
-                        </g>
-                      </g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                    </g>
-                  </svg>
-                </button> 
+                    <img src="./svgs/white-heart.svg" alt="heart_icon" />
+                  </button> 
                 
               

-              
+              
                 
                   <button class="icon__button icon__home">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                    xmlns:svgjs="http://svgjs.com/svgjs"
-                    version="1.1"
-                    width="20"
-                    height="20"
-                    x="0"
-                    y="0"
-                    viewBox="0 0 306.773 306.773"
-                    style="enable-background: new 0 0 512 512"
-                    xml:space="preserve"
-                    class=""
-                  >
-                    <g>
-                      <g xmlns="http://www.w3.org/2000/svg">
-                        <path
-                          style=""
-                          d="M302.93,149.794c5.561-6.116,5.024-15.49-1.199-20.932L164.63,8.898   c-6.223-5.442-16.2-5.328-22.292,0.257L4.771,135.258c-6.092,5.585-6.391,14.947-0.662,20.902l3.449,3.592   c5.722,5.955,14.971,6.665,20.645,1.581l10.281-9.207v134.792c0,8.27,6.701,14.965,14.965,14.965h53.624   c8.264,0,14.965-6.695,14.965-14.965v-94.3h68.398v94.3c-0.119,8.264,5.794,14.959,14.058,14.959h56.828   c8.264,0,14.965-6.695,14.965-14.965V154.024c0,0,2.84,2.488,6.343,5.567c3.497,3.073,10.842,0.609,16.403-5.513L302.93,149.794z"
-                          fill="#ffffff"
-                          data-original="#010002"
-                          class=""
-                        />
-                      </g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                      <g xmlns="http://www.w3.org/2000/svg"></g>
-                    </g>
-                  </svg>
-                </button>
+                    <img src="./svgs/white-home.svg" alt="home_icon" />
+                  </button> 
                 
               

-              
+              
                 
                   <button class="icon__button icon__profile">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      xmlns:xlink="http://www.w3.org/1999/xlink"
-                      xmlns:svgjs="http://svgjs.com/svgjs"
-                      version="1.1"
-                      width="20"
-                      height="20"
-                      x="0"
-                      y="0"
-                      viewBox="0 0 512 512"
-                      style="enable-background: new 0 0 512 512"
-                      xml:space="preserve"
-                      class=""
-                    >
-                      <g>
-                        <g xmlns="http://www.w3.org/2000/svg">
-                          <g>
-                            <path
-                              d="M256,0c-74.439,0-135,60.561-135,135s60.561,135,135,135s135-60.561,135-135S330.439,0,256,0z"
-                              fill="#ffffff"
-                              data-original="#000000"
-                              style=""
-                              class=""
-                            />
-                          </g>
-                        </g>
-                        <g xmlns="http://www.w3.org/2000/svg">
-                          <g>
-                            <path
-                              d="M423.966,358.195C387.006,320.667,338.009,300,286,300h-60c-52.008,0-101.006,20.667-137.966,58.195    C51.255,395.539,31,444.833,31,497c0,8.284,6.716,15,15,15h420c8.284,0,15-6.716,15-15    C481,444.833,460.745,395.539,423.966,358.195z"
-                              fill="#ffffff"
-                              data-original="#000000"
-                              style=""
-                              class=""
-                            />
-                          </g>
-                        </g>
-                        <g xmlns="http://www.w3.org/2000/svg"></g>
-                        <g xmlns="http://www.w3.org/2000/svg"></g>
-                        <g xmlns="http://www.w3.org/2000/svg"></g>
-                        <g xmlns="http://www.w3.org/2000/svg"></g>
-                        <g xmlns="http://www.w3.org/2000/svg"></g>
-                        <g xmlns="http://www.w3.org/2000/svg"></g>
-                        <g xmlns="http://www.w3.org/2000/svg"></g>
-                        <g xmlns="http://www.w3.org/2000/svg"></g>
-                        <g xmlns="http://www.w3.org/2000/svg"></g>
-                        <g xmlns="http://www.w3.org/2000/svg"></g>
-                        <g xmlns="http://www.w3.org/2000/svg"></g>
-                        <g xmlns="http://www.w3.org/2000/svg"></g>
-                        <g xmlns="http://www.w3.org/2000/svg"></g>
-                        <g xmlns="http://www.w3.org/2000/svg"></g>
-                        <g xmlns="http://www.w3.org/2000/svg"></g>
-                      </g>
-                    </svg>
+                    <img src="./svgs/white-profile.svg" alt="profile_icon" />
                   </button>
                 
               

@@ -1677,51 +635,12 @@ 

                     >Lorem ipsum dolor sit Lorem
                   
-                    
-                    
-                      
-                        
-                      
-                    
+                    rating_icon
                     4.5
                   
                   ₹ 2500
@@ -1729,65 +648,24 @@ 

                 
-                  <a href="#" class="product-info">
-                  <img
-                    class="product-img product-info__img"
-                    src="https://unsplash.it/200/300"
-                    alt="product"
-                  />Lorem ipsum
-                  <span class="product-info__small"
-                    >Lorem ipsum dolor sit Lorem</span
-                  >
-                  <span class="product-info__rating">
-                    <?xml version="1.0"?>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      xmlns:xlink="http://www.w3.org/1999/xlink"
-                      xmlns:svgjs="http://svgjs.com/svgjs"
-                      version="1.1"
-                      width="14"
-                      height="14"
-                      x="0"
-                      y="0"
-                      viewBox="0 0 511.98685 511"
-                      style="enable-background: new 0 0 512 512"
-                      xml:space="preserve"
-                      class="svg__rating"
-                    >
-                      <g>
-                        <path
-                          xmlns="http://www.w3.org/2000/svg"
-                          d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0"
-                          fill="#ffffff"
-                          data-original="#ffc107"
-                          style=""
-                        />
-                      </g>
-                    </svg>
-                    4.5
-                  </span>
-                  <span class="price-tag">₹2500</span></a
-                >
-                <button class="wish-btn product-info__wish-btn">
-                  <svg
-                    class="heart-svg"
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="#B9B9B9"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  >
-                    <path
-                      d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 
-                      0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 
-                      0 0-7.78z"
-                    ></path>
-                  </svg>
-                </button>
+                  <div class="product-container">
+                    <a href="#" class="product-info">
+                      <img
+                        class="product-img product-info__img"
+                        src="https://unsplash.it/200/300"
+                        alt="product"
+                      />Lorem ipsum
+                      <span class="product-info__small">Lorem ipsum dolor sit Lorem</span>
+                      <span class="product-info__rating">
+                        <img src="./svgs/rating.svg" alt="rating_icon" />
+                        4.5
+                      </span>
+                      <span class="price-tag">₹ 2500</span>
+                      <button class="wish-btn product-info__wish-btn">
+                        <img src="./svgs/product-wish.svg" alt="wish_btn" />
+                      </button>
+                    </a>
+                </div>

@@ -1797,21 +675,7 @@

>
/>Lorem ipsum Rs. 250 
-          
-        <div class="product-container">
-          <button class="close-btn">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="#B9B9B9"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              class="svg-close"
-            >
-              <line x1="18" y1="6" x2="6" y2="18"></line>
-              <line x1="6" y1="6" x2="18" y2="18"></line>
-            </svg>
-          </button>
-          <a href="#" class="product-info">
-            <img
-              class="product-img"
-              src="https://unsplash.it/200/300"
-              alt="product"
-            />Lorem ipsum <span class="price-tag">Rs. 250</span></a
-          >
-          <button class="wish-btn">
-            <svg
-              class="heart-svg"
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="#B9B9B9"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path
-                d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 
-                5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 
-                5.5 0 0 0 0-7.78z"
-              ></path>
-            </svg>
-          </button>
-          <button class="primary-btn">ADD TO CART</button>
-        </div>
-
-          
-
+ + <div class="product-container"> + <button class="close-btn"> + <img src="./svgs/close-btn.svg" alt="close_btn" /> + </button> + <a href="#" class="product-info"> + <img + class="product-img" + src="https://unsplash.it/200/300" + alt="product" + />Lorem ipsum <span class="price-tag">Rs. 250</span></a + > + <button class="wish-btn"> + <img src="./svgs/wish-btn.svg" alt="wish-btn" /> + </button> + <button class="primary-btn">ADD TO CART</button> + </div> + +
/>Lorem ipsum Rs. 250
OUT OF STOCK 
-          
-        <div class="product-container">
-          <a href="#" class="product-info">
-            <img
-              class="product-img"
-              src="https://unsplash.it/200/300"
-              alt="product"
-            />Lorem ipsum <span class="price-tag">Rs. 250</span></a
-          >
-          <button class="wish-btn">
-            <svg
-              class="heart-svg"
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="#B9B9B9"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path
-                d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.
-                06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.
-                78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
-              ></path>
-            </svg>
-          </button>
-          <button class="primary-btn">ADD TO CART</button>
-          <div class="overlay-div">
-            <button class="close-btn">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="#B9B9B9"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="svg-close"
-              >
-                <line x1="18" y1="6" x2="6" y2="18"></line>
-                <line x1="6" y1="6" x2="18" y2="18"></line>
-              </svg>
-            </button>
-            <span class="overlay-text"> OUT OF STOCK </span>
-          </div>
-        </div>
-          
-
+ + <div class="product-container"> + <a href="#" class="product-info"> + <img + class="product-img" + src="https://unsplash.it/200/300" + alt="product" + />Lorem ipsum <span class="price-tag">Rs. 250</span></a + > + <button class="wish-btn"> + <img src="./svgs/wish-btn.svg" alt="wish-btn" /> + </button> + <button class="primary-btn">ADD TO CART</button> + <div class="overlay-div"> + <button class="close-btn"> + <img src="./svgs/close-btn.svg" alt="close-btn" /> + </button> + <span class="overlay-text"> OUT OF STOCK </span> + </div> + </div> + + @@ -2016,16 +773,15 @@

CARD TITLE

-          
-        <div class="text-card">
-          <h4 class="text-card-title">---card title---</h4>
-          <p class="text-card-info">
-            --- enter your text here ---
-          </p>
-        </div>
-
-          
-
+ + <div class="text-card"> + <h4 class="text-card-title">---card title---</h4> + <p class="text-card-info"> + --- enter your text here --- + </p> + </div> + +
Lorem ipsum

ADD TO CART 
-          
-        <div class="horizontal-product-container">
-          <a href="#" class="product-info hcard-product-info">
-            <img
-              class="product-img hcard-img"
-              src="https://source.unsplash.com/random/"
-              alt="product"
-          /></a>
-          <div class="second-horizontal-section">
-            <div class="hsection_info">
-              <h4 class="hcard-title">Lorem ipsum</h4>
-              <small class="hcard-title-desc"
-                >Lorem ipsum dolor sit amet.</small
-              >
-              <span class="price-tag hcard-price">Rs. 250</span>
-              <p class="hcard-product-desc">
-                Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                Explicabo, nulla. Lorem ipsum dolor sit amet.
-              </p>
-            </div>
-            <button class="primary-btn horizontal-primary-btn">
-              ADD TO CART
-            </button>
-            <button class="wish-btn hcard-wish-btn">
-              <svg
-                class="heart-svg"
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                hcard-wish-btn
-                fill="none"
-                stroke="#B9B9B9"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path
-                  d="M20.84 4.61a5.5 5.5 0 0 0-7.78 
-                  0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 
-                  7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
-                ></path>
-              </svg>
-            </button>
-          </div>
-        </div>
- 
-          
-
+ + <div class="horizontal-product-container"> + <a href="#" class="product-info hcard-product-info"> + <img + class="product-img hcard-img" + src="https://source.unsplash.com/random/" + alt="product" + /></a> + <div class="second-horizontal-section"> + <div class="hsection_info"> + <h3 class="hcard-title">Lorem ipsum</h3> + <small class="hcard-title-desc" + >Lorem ipsum dolor sit amet.</small + > + <span class="price-tag hcard-price">Rs. 250</span> + <p class="hcard-product-desc"> + Lorem ipsum dolor sit amet consectetur adipisicing elit. + Explicabo, nulla. Lorem ipsum dolor sit amet. + </p> + </div> + <button class="primary-btn horizontal-primary-btn"> + ADD TO CART + </button> + <button class="wish-btn hcard-wish-btn"> + <img src="./svgs/wish-btn.svg" alt="wish-btn" /> + </button> + </div> + </div> + +
RATING - - - - - - - - - - - - - - - + star_icon + star_icon + star_icon + star_icon + star_icon 
-          
-        <div class="shadow_card">
-          <a href="#" class="shadow_card__productimgLink">
-            <img
-              class="shadow_card--img shadow_card__productimg"
-              src="https://source.unsplash.com/random"
-              alt="product"
-            />
-          </a>
-          <div class="shadow_card__product-info">
-            <div class="shadow_card__product-header">
-              <h3 class="shadow_card__product-title">Lorem ipsum dolor sit</h3>
-              <small class="font-family"
-                >Lorem ipsum dolor sit amet consectetur adipisicing.</small
-              >
-            </div>
-            <div class="shadow_card__product-rating">
-              <span class="shadow_card__product-rating__title font-family"
-                >RATING</span
-              >
-              <svg
-                height="16"
-                viewBox="0 -10 511.98685 511"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.
-                  730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.
-                  769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.
-                  714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.
-                  417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 
-                  10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 
-                  145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 
-                  3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.
-                  882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 
-                  29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 
-                  111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0"
-                  fill="#ffc107"
-                />
-              </svg>
-              <svg
-                height="16"
-                viewBox="0 -10 511.98685 511"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0"
-                  fill="#ffc107"
-                />
-              </svg>
-              <svg
-                height="16"
-                viewBox="0 -10 511.98685 511"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0"
-                  fill="#ffc107"
-                />
-              </svg>
-              <svg
-                height="16"
-                viewBox="0 -10 511.98685 511"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0"
-                  fill="#ffc107"
-                />
-              </svg>
-              <svg
-                height="16"
-                viewBox="0 -10 511.98685 511"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0"
-                  fill="#ffc107"
-                />
-              </svg>
-            </div>
-            <button class="primary-btn shadow_card--btn">ADD TO CART</button>
-            <button class="shadow_card--wishbtn">
-              <svg
-                class="heart-svg"
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="#B9B9B9"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path
-                  d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
-                ></path>
-              </svg>
-            </button>
-          </div>
-        </div>
-          
-
+ + <div class="shadow_card__product-info"> + <div class="shadow_card__product-header"> + <h3 class="shadow_card__product-title"> + Lorem ipsum dolor sit + </h3> + <small class="font-family" + >Lorem ipsum dolor sit amet consectetur + adipisicing.</small + > + </div> + <div class="shadow_card__product-rating"> + <span class="shadow_card__product-rating__title font-family" + >RATING</span + > + <img src="./svgs/star.svg" alt="star_icon" /> + <img src="./svgs/star.svg" alt="star_icon" /> + <img src="./svgs/star.svg" alt="star_icon" /> + <img src="./svgs/star.svg" alt="star_icon" /> + <img src="./svgs/star.svg" alt="star_icon" /> + </div> + <button class="primary-btn shadow_card--btn"> + ADD TO CART + </button> + <button class="shadow_card--wishbtn"> + <img src="./svgs/wish-btn.svg" alt="wish_btn" /> + </button> + </div> + + diff --git a/svgs/black-bell.svg b/svgs/black-bell.svg new file mode 100644 index 0000000..d3950d3 --- /dev/null +++ b/svgs/black-bell.svg @@ -0,0 +1,4 @@ + + + + diff --git a/svgs/black-cart.svg b/svgs/black-cart.svg new file mode 100644 index 0000000..f1b07c7 --- /dev/null +++ b/svgs/black-cart.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/svgs/black-heart.svg b/svgs/black-heart.svg new file mode 100644 index 0000000..c53229d --- /dev/null +++ b/svgs/black-heart.svg @@ -0,0 +1,3 @@ + + + diff --git a/svgs/close-btn.svg b/svgs/close-btn.svg new file mode 100644 index 0000000..e12face --- /dev/null +++ b/svgs/close-btn.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/svgs/error-alert.svg b/svgs/error-alert.svg new file mode 100644 index 0000000..2d9cfa8 --- /dev/null +++ b/svgs/error-alert.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/svgs/facebook.svg b/svgs/facebook.svg new file mode 100644 index 0000000..cc2fe3e --- /dev/null +++ b/svgs/facebook.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/svgs/github.svg b/svgs/github.svg new file mode 100644 index 0000000..c7798b2 --- /dev/null +++ b/svgs/github.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/svgs/info-alert.svg b/svgs/info-alert.svg new file mode 100644 index 0000000..1841467 --- /dev/null +++ b/svgs/info-alert.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/svgs/product-wish.svg b/svgs/product-wish.svg new file mode 100644 index 0000000..faf795f --- /dev/null +++ b/svgs/product-wish.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/svgs/rating.svg b/svgs/rating.svg new file mode 100644 index 0000000..adc8764 --- /dev/null +++ b/svgs/rating.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/svgs/star.svg b/svgs/star.svg new file mode 100644 index 0000000..34d7b7b --- /dev/null +++ b/svgs/star.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/svgs/success-alert.svg b/svgs/success-alert.svg new file mode 100644 index 0000000..f3d7583 --- /dev/null +++ b/svgs/success-alert.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/svgs/twitter.svg b/svgs/twitter.svg new file mode 100644 index 0000000..0efb028 --- /dev/null +++ b/svgs/twitter.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/svgs/warning-alert.svg b/svgs/warning-alert.svg new file mode 100644 index 0000000..33cb4e3 --- /dev/null +++ b/svgs/warning-alert.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/svgs/white-cart.svg b/svgs/white-cart.svg new file mode 100644 index 0000000..f9ed149 --- /dev/null +++ b/svgs/white-cart.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/svgs/white-heart.svg b/svgs/white-heart.svg new file mode 100644 index 0000000..6b94e40 --- /dev/null +++ b/svgs/white-heart.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/svgs/white-home.svg b/svgs/white-home.svg new file mode 100644 index 0000000..5c71fb6 --- /dev/null +++ b/svgs/white-home.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/svgs/white-profile.svg b/svgs/white-profile.svg new file mode 100644 index 0000000..d050bb4 --- /dev/null +++ b/svgs/white-profile.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/svgs/wish-btn.svg b/svgs/wish-btn.svg new file mode 100644 index 0000000..faf795f --- /dev/null +++ b/svgs/wish-btn.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file From ed50e9e70a3dc194cda46c6c44d0bd3bcf28dcfe Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Sat, 3 Apr 2021 16:56:45 +0530 Subject: [PATCH 41/83] style: add rating and text to the card --- components/cards.css | 8 ++++++++ index.html | 15 ++++++++++++--- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/components/cards.css b/components/cards.css index cd88036..de30865 100644 --- a/components/cards.css +++ b/components/cards.css @@ -189,6 +189,10 @@ body { margin-left: 0; } +.svg__rating { + margin-right: 5px; +} + .product-info__wish-btn { bottom: 7rem; right: 0.3rem; @@ -206,6 +210,10 @@ body { font-weight: 900; } +.wish-btn--fix { + bottom: 10.5rem; +} + /* product card with overlay */ .overlay-div { diff --git a/index.html b/index.html index 2168ba1..fc941d8 100644 --- a/index.html +++ b/index.html @@ -682,9 +682,18 @@

class="product-img" src="https://unsplash.it/200/300" alt="product" - />Lorem ipsum Rs. 250 + Lorem ipsum + Lorem ipsum dolor sit Lorem + + rating_icon + 4.5 + + Rs. 250 - @@ -703,7 +712,7 @@

alt="product" />Lorem ipsum <span class="price-tag">Rs. 250</span></a > - <button class="wish-btn"> + <button class="wish-btn wish-btn--fix"> <img src="./svgs/wish-btn.svg" alt="wish-btn" /> </button> <button class="primary-btn">ADD TO CART</button> From e5032cd13a08c23ed2e057b02c7b19facb4d0053 Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Sun, 4 Apr 2021 00:37:25 +0530 Subject: [PATCH 42/83] refactor: convert svgs to imgs in navbar component --- .index.html.swp | Bin 16384 -> 0 bytes components/cards.css | 24 ++- components/images.css | 2 +- index.html | 445 ++++++++++++++++++------------------------ svgs/menu-btn.svg | 5 + svgs/nav-github.svg | 3 + svgs/nav-twitter.svg | 3 + 7 files changed, 218 insertions(+), 264 deletions(-) delete mode 100644 .index.html.swp create mode 100644 svgs/menu-btn.svg create mode 100644 svgs/nav-github.svg create mode 100644 svgs/nav-twitter.svg diff --git a/.index.html.swp b/.index.html.swp deleted file mode 100644 index d8043261b76b1b1fd1711f58ce35ecc7378bf390..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 16384 zcmeHOU5p!76`s-`D5OmTZBZX6Hxo4isWbMBy|y8X)94B6bV6IfET0?0ey^wc%cYd3aCI!o3;=rO#`%)pYP5+v$n7Q zwguD@%}C#jXTEdJz4!Rsx%Zs)E~gLf+QSOEso=OuQCQje*y)SDqa3?QQ4YI}#u5H} z!qM_tniotE0(~?xm|E~wnsv{v1gUwi(ej#3Gc4_Pmwnqml5(3BXH~C-jrwGBiA3Uo z!~^T~Ks!976|Pvym`0kbY*9C}cfE6Iz1oRf;(^2ii3bu7BpygSka!^RK;nVK0~de? z!j`Ih3gdVSjpZYBy-2$Li;n&D{G$^8PvYn4`L`whAH;uvp1&yZuM$5?&kgE8+>gH# zKTW(R@vjhHB>sfNzfAl#;-8lIzY(7!{=MXoxc$EppCx`t;{QUtPW(L*f1dc;i9adv zFA-lN{;G?`hq(Q7#8-*;B>qL>ZzldxiT^Y4w-A5*CH?kaAbuzDHHrTd@v;BECGmeG zemm)(k@&O3e~|e1U)taPABf*ad?@k1Cq9mk(-QwY@p1nzxvby*bHv|9_HU8+XNf;R z{8uIZ4DoTsd|u+8A%1sk|E>M)KTZ5*;_sLE-w_|j-${voiufpbhmErm|0MA@kp1_( zt-t->5`PEr+a>-t#K-gZD-uuPq{Q+6q{Nfi!r*o2?P|8#;TS!)VOO0|jqc*) z80E6^PC)`yxa~$uQ^hEyP(Gzuq&gxzMYd}lhn0>kUt+wAH=EgWhoo?NTWk7B0>z zy1BHtuw&=0#T^Us*m}Fxr@7YoVeQEs;4;#D=8u9-wYQsMy3bmvmL1jx3C1c#b&r{0 z8QVzf(=0lrS(+JIMmMs|(5Esit7i-1#F?~~*9$q8=@@g6&gHlc&XE#>aG+(`G@D`u zOd5I)HlnjInrCL2lP144(;B!bJF8E@{8VHjt?B84rWZ1Ec|C8k=)`3qjZWUJ_PxLO z;4D5c>FMA&>9u&sfw1EU-^GWvpD;ZcP$f zaVuf1sG6hf;0W8tXU8=S)6tOMT$|!zl8Fa+>$dmY<78 z7@b7l&_Y2sG6&5eLH8fct*RT=+RJi$ym3>j-1dF^pmg4=dqXDtg+IUO`{eXyu>lZz?mc7am{(W1inqybQ zH_s#PPUbsUU4!sQ-3e-r6RMO@>GZSna)3>9iWH(v-t2-`ZX+nLUl#Y#qGvUn(8gY} z;S^Qw`j+Rz7Tr%5bK{7l(9K48hX0hP-KiRy_$1Z+wBz9 z4{J+v8vkiLGOlIppSzZK?I=1?UJ!RO(k<6)KXB0S(t({C=3qoxV(b?GDLt#(&1z9~ zxPPq83w!4e+WR-d0+*o0Q-R(fNOy>$k9&#_X3{)JYX4^1v0?9foCwLUjckH3r2NDll zz#hP&hs8>~+oSCqEr$3Ulzq1qvcNAFRXyc9f!FrSPLOK(ZqU#V2YlxwWM~OQ@ua7A z!WY=J%1K|LM6R-|6=K%Jc~AN(D^kKI*G_nEdkRWxI{`c&tb&T2MybS?c#XCl;-YCH zp%>#}I0m~)|AD5hb-G&|8tC<)zS!49D|A$P>Qx@1KJW+?8-HMX%%#d+Wytfb^>Bt) zthQFenP@A*$J9L{8h#!@GsXpa9J}?dwinKbF~9-wKjZZlxP%BdxK`+jTH#hkG{gCB z$!=^LUF%AB6!E8ZjfRKSh<|g^ zy+3&6qaRX+>k3ZripaS{Gb2iL6Z_DUW!Ztx6MD%5PA)X|L>pLI z41}F6;zF6CxEXx6MU@Y^94Umy#P1va9!UzDyb3$6uqnPnr5hmfr~l>qOO)LvcHzzU G`uaER4uW3* diff --git a/components/cards.css b/components/cards.css index de30865..7dbe643 100644 --- a/components/cards.css +++ b/components/cards.css @@ -123,7 +123,7 @@ body { /* product card */ .product-container { - display: flex; + display: inline-flex; flex-direction: column; max-width: 15rem; @@ -246,7 +246,7 @@ body { /* text card */ .text-card { - display: flex; + display: inline-flex; flex-direction: column; padding: 1rem; @@ -256,9 +256,13 @@ body { color: var(--secondary-color); - max-width: 20rem; /* max-height: 9rem; */ + width: fit-content; + max-width: 20rem; + + margin: 1rem; + background-color: var(--primary-color); } @@ -281,7 +285,7 @@ body { /* horizontal card */ .horizontal-product-container { - display: flex; + display: inline-flex; font-family: var(--primary-font); font-weight: bolder; @@ -290,11 +294,13 @@ body { height: 20rem; - width: 80%; + width: fit-content; + + margin: 1rem; box-shadow: var(--shadow); - padding: 2rem; + padding: 1rem; border: 1px solid var(--primary-color); } @@ -360,11 +366,13 @@ body { /* shadow card */ .shadow_card { - display: flex; + display: inline-flex; flex-direction: column; height: 30rem; + margin: 1rem; + border-radius: 1rem; /* box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), @@ -384,7 +392,7 @@ body { .shadow_card__productimg { display: block; - /* height: 100%; */ + height: 100%; } .shadow_card--img { diff --git a/components/images.css b/components/images.css index d95f0e6..23de4f8 100644 --- a/components/images.css +++ b/components/images.css @@ -34,7 +34,7 @@ body { } .img-round { - border-radius: 50%; + border-radius: 65%; } .img-container--border { diff --git a/index.html b/index.html index fc941d8..9891402 100644 --- a/index.html +++ b/index.html @@ -624,25 +624,27 @@

-
- - productLorem ipsum - Lorem ipsum dolor sit Lorem - - rating_icon - 4.5 - - ₹ 2500 - - +
+
+ + productLorem ipsum + Lorem ipsum dolor sit Lorem + + rating_icon + 4.5 + + ₹ 2500 + + +
@@ -673,30 +675,32 @@

-
- - - product - Lorem ipsum - Lorem ipsum dolor sit Lorem +
+ + + product + Lorem ipsum + Lorem ipsum dolor sit Lorem + + rating_icon + 4.5 + + Rs. 250 - - rating_icon - 4.5 - - Rs. 250 - - + + + 
@@ -724,23 +728,25 @@ 

             

-              

-                
-                  productLorem ipsum Rs. 250
-                
-                
-                

-                  
-                   OUT OF STOCK 
+                  
+                  

+                    
+                     OUT OF STOCK 
+                  

                 

               

               
@@ -772,13 +778,15 @@ 

             

-              

-                
CARD TITLE

-                

-                  I am a very simple card. I am good at containing small bits of
-                  information. I am convenient because I require little markup
-                  to use effectively.
-                

+              

+                

+                  
CARD TITLE

+                  

+                    I am a very simple card. I am good at containing small bits
+                    of information. I am convenient because I require little
+                    markup to use effectively.
+                  

+                

               

               
               
@@ -796,31 +804,33 @@ 
CARD TITLE

             

-              

-                
-                  product
-                

-                  

-                    
Lorem ipsum

-                    Lorem ipsum dolor sit amet.
-                    Rs. 250
-                    

-                      Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                      Explicabo, nulla. Lorem ipsum dolor sit amet.
-                    

+              

+                

+                  
+                    product
+                  

+                    

+                      
Lorem ipsum

+                      Lorem ipsum dolor sit amet.
+                      Rs. 250
+                      

+                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                        Explicabo, nulla. Lorem ipsum dolor sit amet.
+                      

+                    

+                    
+                    
                   

-                  
-                  
                 

               

               
@@ -860,72 +870,85 @@ 
Lorem ipsum

             

-              

-                
-                  product
-                
-                

-                  

-                    

-                      Lorem ipsum dolor sit
-                    

-                    Lorem ipsum dolor sit amet consectetur
-                      adipisicing.
-                  

-                  

-                    RATING
-                    star_icon
-                    star_icon
-                    star_icon
-                    star_icon
-                    star_icon
+              

+                

+                  
+                    product
+                  
+                  

+                    

+                      

+                        Lorem ipsum dolor sit
+                      

+                      Lorem ipsum dolor sit amet consectetur
+                        adipisicing.
+                    

+                    

+                      RATING
+                      star_icon
+                      star_icon
+                      star_icon
+                      star_icon
+                      star_icon
+                    

+                    
+                    
                   

-                  
-                  
                 

               

               
               
                 
-                  <div class="shadow_card__product-info">
-                    <div class="shadow_card__product-header">
-                      <h3 class="shadow_card__product-title">
-                        Lorem ipsum dolor sit
-                      </h3>
-                      <small class="font-family"
-                        >Lorem ipsum dolor sit amet consectetur
-                        adipisicing.</small
-                      >
-                    </div>
-                    <div class="shadow_card__product-rating">
-                      <span class="shadow_card__product-rating__title font-family"
-                        >RATING</span
-                      >
-                      <img src="./svgs/star.svg" alt="star_icon" />
-                      <img src="./svgs/star.svg" alt="star_icon" />
-                      <img src="./svgs/star.svg" alt="star_icon" />
-                      <img src="./svgs/star.svg" alt="star_icon" />
-                      <img src="./svgs/star.svg" alt="star_icon" />
+                  <div class="shadow_card">
+                    <a href="#" class="shadow_card__productimgLink">
+                      <img
+                        class="product-img shadow_card__productimg"
+                        src="https://source.unsplash.com/random"
+                        alt="product"
+                      />
+                    </a>
+                    <div class="shadow_card__product-info">
+                      <div class="shadow_card__product-header">
+                        <h3 class="shadow_card__product-title">
+                          Lorem ipsum dolor sit
+                        </h3>
+                        <small class="font-family"
+                          >Lorem ipsum dolor sit amet consectetur
+                          adipisicing.</small
+                        >
+                      </div>
+                      <div class="shadow_card__product-rating">
+                        <span
+                          class="shadow_card__product-rating__title font-family"
+                          >RATING</span
+                        >
+                        <img src="./svgs/star.svg" alt="star_icon" />
+                        <img src="./svgs/star.svg" alt="star_icon" />
+                        <img src="./svgs/star.svg" alt="star_icon" />
+                        <img src="./svgs/star.svg" alt="star_icon" />
+                        <img src="./svgs/star.svg" alt="star_icon" />
+                      </div>
+                      <button class="primary-btn shadow_card--btn">
+                        ADD TO CART
+                      </button>
+                      <button class="shadow_card--wishbtn">
+                        <img src="./svgs/wish-btn.svg" alt="wish_btn" />
+                      </button>
                     </div>
-                    <button class="primary-btn shadow_card--btn">
-                      ADD TO CART
-                    </button>
-                    <button class="shadow_card--wishbtn">
-                      <img src="./svgs/wish-btn.svg" alt="wish_btn" />
-                    </button>
-                  </div>
+                </div>
                 
               

             

@@ -986,59 +1009,14 @@ 

               

             

           

           
diff --git a/svgs/menu-btn.svg b/svgs/menu-btn.svg
new file mode 100644
index 0000000..13d0c63
--- /dev/null
+++ b/svgs/menu-btn.svg
@@ -0,0 +1,5 @@
+
+    
+    
+    
+
diff --git a/svgs/nav-github.svg b/svgs/nav-github.svg
new file mode 100644
index 0000000..a86821d
--- /dev/null
+++ b/svgs/nav-github.svg
@@ -0,0 +1,3 @@
+
+    
+
diff --git a/svgs/nav-twitter.svg b/svgs/nav-twitter.svg
new file mode 100644
index 0000000..c47558f
--- /dev/null
+++ b/svgs/nav-twitter.svg
@@ -0,0 +1,3 @@
+
+    
+

From 9482f69840ce1b2e60af1078eb5ed9a23233f303 Mon Sep 17 00:00:00 2001
From: jugalkpatel 
Date: Sun, 4 Apr 2021 02:03:14 +0530
Subject: [PATCH 43/83] feat: added two column grid

---
 components/navbar.css        |  2 +-
 components/rating.css        |  0
 components/rating.html       |  0
 components/twoItemsGrid.css  |  8 ++++++
 components/twoItemsGrid.html | 35 ++++++++++++++++++++++
 components/utils.css         |  2 +-
 index.css                    |  1 +
 index.html                   | 56 +++++++++++++++++++++++++++++++++++-
 8 files changed, 101 insertions(+), 3 deletions(-)
 create mode 100644 components/rating.css
 create mode 100644 components/rating.html
 create mode 100644 components/twoItemsGrid.css
 create mode 100644 components/twoItemsGrid.html

diff --git a/components/navbar.css b/components/navbar.css
index e052c0c..1516f11 100644
--- a/components/navbar.css
+++ b/components/navbar.css
@@ -15,7 +15,7 @@ body {
 }
 
 /* .navbar-container {
-  margin: 1rem;
+  width: 100%;
 } */
 
 .navbar-component {
diff --git a/components/rating.css b/components/rating.css
new file mode 100644
index 0000000..e69de29
diff --git a/components/rating.html b/components/rating.html
new file mode 100644
index 0000000..e69de29
diff --git a/components/twoItemsGrid.css b/components/twoItemsGrid.css
new file mode 100644
index 0000000..9ace8aa
--- /dev/null
+++ b/components/twoItemsGrid.css
@@ -0,0 +1,8 @@
+@import url("./cards.css");
+@import url("./utils.css");
+@import url("../resources/prism.css");
+.two-col-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  justify-items: center;
+}
diff --git a/components/twoItemsGrid.html b/components/twoItemsGrid.html
new file mode 100644
index 0000000..f9c9caf
--- /dev/null
+++ b/components/twoItemsGrid.html
@@ -0,0 +1,35 @@
+
+
+  
+    
+    
+    
+    Two-Items - Grid
+    
+  
+  
+    

+      

+       round_img    
+        round_img
+      

+      

+      
+        
+          <div class="two-col-grid">
+          --- Enter your elements here ---
+          </div> 
+        
+      

+    

+    
+  
+
diff --git a/components/utils.css b/components/utils.css
index 65830c9..4f100fb 100644
--- a/components/utils.css
+++ b/components/utils.css
@@ -3,7 +3,7 @@
 }
 .container--border {
   border: 1px solid var(--border-color);
-  padding: 1rem 0 0rem 0;
+  padding: 1rem 0 0 0;
 }
 
 .container--margin {
diff --git a/index.css b/index.css
index ffb3d0d..e10df10 100644
--- a/index.css
+++ b/index.css
@@ -8,6 +8,7 @@
 @import url("./components/cards.css");
 @import url("./components/alerts.css");
 @import url("./components/navbar.css");
+@import url("./components/twoItemsGrid.css");
 
 * {
   box-sizing: border-box;
diff --git a/index.html b/index.html
index 9891402..ba1d6c9 100644
--- a/index.html
+++ b/index.html
@@ -1024,7 +1024,7 @@ 

                   UNDEFINED
- 
+              
                 
                   <nav class="navbar-component">
                     <div class="navbar-component__menu">
@@ -1049,6 +1049,60 @@

+

+ Two Column Grid +

+
+
+
+ + productLorem ipsum + Lorem ipsum dolor sit Lorem + + rating_icon + 4.5 + + ₹ 2500 + + +
+
+ + productLorem ipsum + Lorem ipsum dolor sit Lorem + + rating_icon + 4.5 + + ₹ 2500 + + +
+
+ 
+              
+                <div class="two-col-grid">
+                --- Enter your element here ---
+                </div> 
+              
+
+
From a8ba217bb48cf78f2f0194a708352dec5f85e176 Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Sun, 4 Apr 2021 23:35:01 +0530 Subject: [PATCH 44/83] feat: added grid containers --- components/cards.css | 25 +++-- components/images.css | 2 +- components/threeItemsGrid.css | 13 +++ components/threeItemsGrid.html | 78 +++++++++++++ components/toast-notify-snackbar.css | 0 components/toast-notify-snackbar.html | 0 index.css | 2 +- index.html | 155 ++++++++++++++++++++++---- 8 files changed, 243 insertions(+), 32 deletions(-) create mode 100644 components/threeItemsGrid.css create mode 100644 components/threeItemsGrid.html create mode 100644 components/toast-notify-snackbar.css create mode 100644 components/toast-notify-snackbar.html diff --git a/components/cards.css b/components/cards.css index 7dbe643..3c28513 100644 --- a/components/cards.css +++ b/components/cards.css @@ -29,6 +29,7 @@ body { width: 100%; object-fit: cover; object-position: center; + height: 20rem; } .distance-margin { @@ -53,7 +54,7 @@ body { outline: 0; position: absolute; - bottom: 7.7rem; + bottom: 10.5rem; right: 1.2rem; z-index: var(--zindex-one); @@ -76,7 +77,7 @@ body { outline: 0; position: absolute; - top: 1.4rem; + top: 1.6rem; left: 1rem; z-index: var(--zindex-one); @@ -137,6 +138,10 @@ body { margin: 1rem; + min-height: 32rem; + + height: 32rem; + /* padding: 1rem; */ /* border: 1px solid black; */ @@ -153,8 +158,6 @@ body { font-size: 1.2rem; margin: 5px 0; - - position: relative; } .product-info__img { @@ -194,8 +197,8 @@ body { } .product-info__wish-btn { - bottom: 7rem; - right: 0.3rem; + bottom: 10.5rem; + right: 1.3rem; z-index: var(--zindex-one); cursor: pointer; } @@ -211,7 +214,11 @@ body { } .wish-btn--fix { - bottom: 10.5rem; + bottom: 10.7rem; +} + +.wish-btn:hover { + color: red; } /* product card with overlay */ @@ -393,13 +400,9 @@ body { .shadow_card__productimg { display: block; height: 100%; -} - -.shadow_card--img { width: 100%; object-fit: cover; object-position: center; - height: 100%; } .shadow_card__product-info { diff --git a/components/images.css b/components/images.css index 23de4f8..d95f0e6 100644 --- a/components/images.css +++ b/components/images.css @@ -34,7 +34,7 @@ body { } .img-round { - border-radius: 65%; + border-radius: 50%; } .img-container--border { diff --git a/components/threeItemsGrid.css b/components/threeItemsGrid.css new file mode 100644 index 0000000..90ce98d --- /dev/null +++ b/components/threeItemsGrid.css @@ -0,0 +1,13 @@ +@import url("../resources/prism.css"); +@import url("./cards.css"); +.three-col-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + justify-items: center; +} + +@media screen and (min-width: 820px) { + .three-col-grid { + grid-template-columns: repeat(3, 1fr); + } +} diff --git a/components/threeItemsGrid.html b/components/threeItemsGrid.html new file mode 100644 index 0000000..e6c7aed --- /dev/null +++ b/components/threeItemsGrid.html @@ -0,0 +1,78 @@ + + + + + + + Three Items Grid + + + +
+
+
+ + productLorem ipsum + Lorem ipsum dolor sit Lorem + + rating_icon + 4.5 + + ₹ 2500 + + +
+
+ + productLorem ipsum + Lorem ipsum dolor sit Lorem + + rating_icon + 4.5 + + ₹ 2500 + + +
+
+ + productLorem ipsum + Lorem ipsum dolor sit Lorem + + rating_icon + 4.5 + + ₹ 2500 + + +
+
+ 
+          
+            <div class="three-col-grid">
+                --- enter your elements here ---
+            </div> 
+          
+
+
+ + + diff --git a/components/toast-notify-snackbar.css b/components/toast-notify-snackbar.css new file mode 100644 index 0000000..e69de29 diff --git a/components/toast-notify-snackbar.html b/components/toast-notify-snackbar.html new file mode 100644 index 0000000..e69de29 diff --git a/index.css b/index.css index e10df10..3387fc2 100644 --- a/index.css +++ b/index.css @@ -9,7 +9,7 @@ @import url("./components/alerts.css"); @import url("./components/navbar.css"); @import url("./components/twoItemsGrid.css"); - +@import url("./components/threeItemsGrid.css"); * { box-sizing: border-box; margin: 0; diff --git a/index.html b/index.html index ba1d6c9..010e6f1 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,7 @@
+ +
+
    COMPONENTS @@ -97,8 +100,11 @@
+

Avatar

+ +
Avatar

+

Alerts

+ +
Badge

+
@@ -296,6 +306,8 @@

+ +
@@ -396,12 +408,15 @@

- +

Buttons

+ +
+
@@ -433,7 +448,9 @@

<button class="button__secondary button--round">ADD TO CART</button>

- + + +
+ +
+ +
+ +
+
+ + productLorem ipsum + Lorem ipsum dolor sit Lorem + + rating_icon + 4.5 + + ₹ 2500 + + +
+
+ + productLorem ipsum + Lorem ipsum dolor sit Lorem + + rating_icon + 4.5 + + ₹ 2500 + + +
+
+ 
+          
+            <div class="three-col-grid">
+                --- enter your elements here ---
+            </div> 
+          
+
+
+
From c433b22b7e2881547b5044b429119c6d552dac9a Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Mon, 5 Apr 2021 01:46:01 +0530 Subject: [PATCH 45/83] feat: added lists component --- components/lists.css | 114 ++++++++++++++++++++++++++++++++++++ components/lists.html | 131 ++++++++++++++++++++++++++++++++++++++++++ index.css | 1 + index.html | 128 +++++++++++++++++++++++++++++++++++++++++ svgs/exclamation.svg | 25 ++++++++ 5 files changed, 399 insertions(+) create mode 100644 components/lists.css create mode 100644 components/lists.html create mode 100644 svgs/exclamation.svg diff --git a/components/lists.css b/components/lists.css new file mode 100644 index 0000000..82ad98d --- /dev/null +++ b/components/lists.css @@ -0,0 +1,114 @@ +@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"); +@import url("../resources/prism.css"); +@import url("./utils.css"); + +* { + box-sizing: border-box; +} + +body { + margin: 0; + padding: 0; +} + +:root { + --primary-color: #111827; + --secondary-color: white; + --border-color: #e5e5e5; + --primary-font: Lato; + --hover-color: #d1d5db; + --red-list-color: red; + --blue-list-color: blue; + --green-list-color: #4eb23a; + --yellow-list-color: #f7bd3b; +} + +/* spaced-list */ + +.spaced-list { + list-style-type: none; + + margin: 1rem; + + padding: 1rem; + + border: 1px solid var(--border-color); +} + +.spaced-list__item { + padding: 0.5rem; + + margin: 0.5rem; + + font-family: var(--primary-font); + font-size: 1rem; + + color: var(--primary-color); +} + +/* stacked-list */ + +.stacked-list { + list-style-type: none; + + margin: 1rem; + + padding: 1rem; + + border: 1px solid var(--border-color); +} + +.stacked-list__item { + display: flex; + padding: 1rem; + + font-family: var(--primary-font); + + color: var(--primary-color); + + /* border: 1px solid var(--primary-color); */ + + margin: 1rem; +} + +.stacked-list__title { + margin: 0; +} + +.stacked-list__right { + display: inline-block; + margin-left: 1rem; +} + +.info--item { + border-left: 5px solid var(--blue-list-color); +} + +.error--item { + border-left: 5px solid var(--red-list-color); +} + +.warning--item { + border-left: 5px solid var(--yellow-list-color); +} + +.success--item { + border-left: 5px solid var(--green-list-color); +} + +.list--container .language-markup { + height: 10rem; +} + +/* .container--margin { + margin: 1rem; +} */ + +@media screen and (min-width: 576px) { + .spaced-list__item:hover { + background-color: var(--hover-color); + } + .stacked-list__item:hover { + background-color: var(--hover-color); + } +} diff --git a/components/lists.html b/components/lists.html new file mode 100644 index 0000000..d04f65b --- /dev/null +++ b/components/lists.html @@ -0,0 +1,131 @@ + + + + + + + + Document + + + +
+
+
    +
  • List Item 1
    • +
  • List Item 2
    • +
  • List Item 3
    • +
  • List Item 4
    • +
  • List Item 5
    • +
  • List Item 6
    • +
+ 
+          
+              <ul class="spaced-list">
+                <li class="spaced-list__item">List Item 1</li>
+                <li class="spaced-list__item">List Item 2</li>
+                <li class="spaced-list__item">List Item 3</li>
+                <li class="spaced-list__item">List Item 4</li>
+                <li class="spaced-list__item">List Item 5</li>
+                <li class="spaced-list__item">List Item 6</li>
+              </ul>
+          
+
+
+
+
+
    +
  • + info_icon + +

    Lorem ipsum dolor sit amet.

    + Lorem, ipsum dolor sit amet consectetur adipisicing + elit. +     +
    • +
  • + info_icon + +

    Lorem ipsum dolor sit amet.

    + Lorem, ipsum dolor sit amet consectetur adipisicing + elit. +     +
    • +
  • + info_icon + +

    Lorem ipsum dolor sit amet.

    + Lorem, ipsum dolor sit amet consectetur adipisicing + elit. +     +
    • +
  • + info_icon + +

    Lorem ipsum dolor sit amet.

    + Lorem, ipsum dolor sit amet consectetur adipisicing + elit. +     +
    • +
+
+ 
+          
+             <ul class="stacked-list">
+                <li class="stacked-list__item info--item">
+                    <img src="../svgs/info-alert.svg" alt="info_icon" />
+                    <span class="stacked-list__right">
+                    <h3 class="stacked-list__title">Lorem ipsum dolor sit amet.</h3>
+                    <small
+                        >Lorem, ipsum dolor sit amet consectetur adipisicing
+                        elit.</small
+                    >
+                    </span>
+                </li>
+                <li class="stacked-list__item error--item">
+                    <img src="../svgs/error-alert.svg" alt="info_icon" />
+                    <span class="stacked-list__right">
+                    <h3 class="stacked-list__title">Lorem ipsum dolor sit amet.</h3>
+                    <small
+                        >Lorem, ipsum dolor sit amet consectetur adipisicing
+                        elit.</small
+                    >
+                    </span>
+                </li>
+                <li class="stacked-list__item warning--item">
+                    <img src="../svgs/exclamation.svg" alt="info_icon" />
+                    <span class="stacked-list__right">
+                    <h3 class="stacked-list__title">Lorem ipsum dolor sit amet.</h3>
+                    <small
+                        >Lorem, ipsum dolor sit amet consectetur adipisicing
+                        elit.</small
+                    >
+                    </span>
+                </li>
+                <li class="stacked-list__item success--item">
+                    <img src="../svgs/success-alert.svg" alt="info_icon" />
+                    <span class="stacked-list__right">
+                    <h3 class="stacked-list__title">Lorem ipsum dolor sit amet.</h3>
+                    <small
+                        >Lorem, ipsum dolor sit amet consectetur adipisicing
+                        elit.</small
+                    >
+                    </span>
+                </li>
+            </ul>
+          
+
+
+
+ + + + diff --git a/index.css b/index.css index 3387fc2..59e1259 100644 --- a/index.css +++ b/index.css @@ -10,6 +10,7 @@ @import url("./components/navbar.css"); @import url("./components/twoItemsGrid.css"); @import url("./components/threeItemsGrid.css"); +@import url("./components/lists.css"); * { box-sizing: border-box; margin: 0; diff --git a/index.html b/index.html index 010e6f1..3bdc29e 100644 --- a/index.html +++ b/index.html @@ -1033,6 +1033,134 @@

+

Lists

+ +
+
+
    +
  • List Item 1
    • +
  • List Item 2
    • +
  • List Item 3
    • +
  • List Item 4
    • +
  • List Item 5
    • +
  • List Item 6
    • +
+ 
+          
+              <ul class="spaced-list">
+                <li class="spaced-list__item">List Item 1</li>
+                <li class="spaced-list__item">List Item 2</li>
+                <li class="spaced-list__item">List Item 3</li>
+                <li class="spaced-list__item">List Item 4</li>
+                <li class="spaced-list__item">List Item 5</li>
+                <li class="spaced-list__item">List Item 6</li>
+              </ul>
+          
+
+
+
+
+
    +
  • + info_icon + +

    + Lorem ipsum dolor sit amet. +

    + Lorem, ipsum dolor sit amet consectetur adipisicing + elit. +     +
    • +
  • + info_icon + +

    + Lorem ipsum dolor sit amet. +

    + Lorem, ipsum dolor sit amet consectetur adipisicing + elit. +     +
    • +
  • + info_icon + +

    + Lorem ipsum dolor sit amet. +

    + Lorem, ipsum dolor sit amet consectetur adipisicing + elit. +     +
    • +
  • + info_icon + +

    + Lorem ipsum dolor sit amet. +

    + Lorem, ipsum dolor sit amet consectetur adipisicing + elit. +     +
    • +
+
+ 
+          
+             <ul class="stacked-list">
+                <li class="stacked-list__item info--item">
+                    <img src="../svgs/info-alert.svg" alt="info_icon" />
+                    <span class="stacked-list__right">
+                    <h3 class="stacked-list__title">Lorem ipsum dolor sit amet.</h3>
+                    <small
+                        >Lorem, ipsum dolor sit amet consectetur adipisicing
+                        elit.</small
+                    >
+                    </span>
+                </li>
+                <li class="stacked-list__item error--item">
+                    <img src="../svgs/error-alert.svg" alt="info_icon" />
+                    <span class="stacked-list__right">
+                    <h3 class="stacked-list__title">Lorem ipsum dolor sit amet.</h3>
+                    <small
+                        >Lorem, ipsum dolor sit amet consectetur adipisicing
+                        elit.</small
+                    >
+                    </span>
+                </li>
+                <li class="stacked-list__item warning--item">
+                    <img src="../svgs/exclamation.svg" alt="info_icon" />
+                    <span class="stacked-list__right">
+                    <h3 class="stacked-list__title">Lorem ipsum dolor sit amet.</h3>
+                    <small
+                        >Lorem, ipsum dolor sit amet consectetur adipisicing
+                        elit.</small
+                    >
+                    </span>
+                </li>
+                <li class="stacked-list__item success--item">
+                    <img src="../svgs/success-alert.svg" alt="info_icon" />
+                    <span class="stacked-list__right">
+                    <h3 class="stacked-list__title">Lorem ipsum dolor sit amet.</h3>
+                    <small
+                        >Lorem, ipsum dolor sit amet consectetur adipisicing
+                        elit.</small
+                    >
+                    </span>
+                </li>
+            </ul>
+          
+
+
+
+ +

Navigation

diff --git a/svgs/exclamation.svg b/svgs/exclamation.svg new file mode 100644 index 0000000..b2a481e --- /dev/null +++ b/svgs/exclamation.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + From d27485dfed6fa904fd34730dfc4cd1dfbb7d309f Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Mon, 5 Apr 2021 09:51:03 +0530 Subject: [PATCH 46/83] feat: added text-utilities component --- components/Text-Utilities.css | 48 ++++++++++++++++++++++++++++++ components/Text-Utilities.html | 51 ++++++++++++++++++++++++++++++++ components/inputs.css | 4 +-- index.css | 5 ++++ index.html | 54 +++++++++++++++++++++++++++++----- 5 files changed, 153 insertions(+), 9 deletions(-) create mode 100644 components/Text-Utilities.css create mode 100644 components/Text-Utilities.html diff --git a/components/Text-Utilities.css b/components/Text-Utilities.css new file mode 100644 index 0000000..89b135d --- /dev/null +++ b/components/Text-Utilities.css @@ -0,0 +1,48 @@ +@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"); +@import url("./resources/prism.css"); +@import url("./utils.css"); +@import url("./lists.css"); + +:root { + --primary-font: Lato; + --primary-color: #111827; + --border-color: #e5e5e5; + --gray-text: #6b7280; +} + +.spaced-list { + margin: 1rem; +} + +/* Heading */ +.heading { + color: var(--primary-color); + + font-family: var(--primary-font); + + max-width: fit-content; +} + +/* Small Text */ +.small-text { + color: var(--primary-color); + + font-family: var(--primary-font); + + font-size: 0.75rem; + + max-width: fit-content; +} + +/* Gray Text */ +.gray-text { + color: var(--gray-text); + + font-family: var(--primary-font); + + width: fit-content; +} + +.spaced-list__item--center { + text-align: center; +} diff --git a/components/Text-Utilities.html b/components/Text-Utilities.html new file mode 100644 index 0000000..fa71ed6 --- /dev/null +++ b/components/Text-Utilities.html @@ -0,0 +1,51 @@ + + + + + + + Text Utilites + + + + +
+
    +
  • +

    I'm Heading

    +
    • +
  • +

    I'm Small

    +
    • +
  • +

    I'm Gray

    +
    • +
  • +

    I'm Center

    +
    • +
+ 
+        
+          <h1 class="heading">I'm Heading</h1>
+        
+
+ 
+        
+          <p class="small-text">I'm Small</p>
+        
+
+ 
+        
+          <p class="gray-text">I'm Gray</p>
+        
+
+ 
+        
+          <p class="center-text">I'm Center</p>
+        
+
+
+ + + + diff --git a/components/inputs.css b/components/inputs.css index 927f409..755a11e 100644 --- a/components/inputs.css +++ b/components/inputs.css @@ -19,5 +19,5 @@ body { border: 1px solid black; } -.input__primary { -} +/* .input__primary { +} */ diff --git a/index.css b/index.css index 59e1259..4ec9678 100644 --- a/index.css +++ b/index.css @@ -11,9 +11,13 @@ @import url("./components/twoItemsGrid.css"); @import url("./components/threeItemsGrid.css"); @import url("./components/lists.css"); +@import url("./components/Text-Utilities.css"); + * { box-sizing: border-box; + margin: 0; + scrollbar-width: thin; } @@ -33,6 +37,7 @@ position: fixed; bottom: 0; right: 0; + border-radius: 50%; } diff --git a/index.html b/index.html index 3bdc29e..7b33daf 100644 --- a/index.html +++ b/index.html @@ -1340,14 +1340,55 @@ 

-          
-            <div class="three-col-grid">
-                --- enter your elements here ---
-            </div> 
-          
-
+ + <div class="three-col-grid"> + --- enter your elements here --- + </div> + +
+

+ Text Utilites +

+ +
+
    +
  • +

    I'm Heading

    +
    • +
  • +

    I'm Small

    +
    • +
  • +

    I'm Gray

    +
    • +
  • +

    I'm Center

    +
    • +
+ 
+              
+                <h1 class="heading">I'm Heading</h1>
+              
+
+ 
+              
+                <p class="small-text">I'm Small</p>
+              
+
+ 
+              
+                <p class="gray-text">I'm Gray</p>
+              
+
+ 
+              
+                <p class="center-text">I'm Center</p>
+              
+
+
+ @@ -1374,7 +1415,6 @@

d="m391.968 146.624a341.723 341.723 0 0 1 -27.011 131.284 342.818 342.818 0 0 1 -73.712 109.337 343 343 0 0 1 -243.245 100.755 24 24 0 0 1 0-48 294.062 294.062 0 0 0 209.3-86.7 294 294 0 0 0 86.667-206.59l24.033-32.044zm86.432 48.576a24 24 0 0 0 4.8-33.6l-96-128a24 24 0 0 0 -38.4 0l-96 128a24 24 0 1 0 38.4 28.8l76.8-102.4 76.8 102.4a24 24 0 0 0 33.6 4.8z" fill="#ffffff" data-original="#000000" - style="" class="" /> From 4a7e81fe1483c9dae118b3caf2f0d5d058c08741 Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Mon, 5 Apr 2021 12:02:33 +0530 Subject: [PATCH 47/83] feat: added snackbar component --- components/showSnackbar.js | 17 ++++++ components/toast-notify-snackbar.css | 87 +++++++++++++++++++++++++++ components/toast-notify-snackbar.html | 61 +++++++++++++++++++ index.css | 1 + index.html | 69 +++++++++++++++++++-- 5 files changed, 229 insertions(+), 6 deletions(-) create mode 100644 components/showSnackbar.js diff --git a/components/showSnackbar.js b/components/showSnackbar.js new file mode 100644 index 0000000..d48693a --- /dev/null +++ b/components/showSnackbar.js @@ -0,0 +1,17 @@ +function showSnackbar() { + let snackbar = document.getElementById("snackbar-item"); + + snackbar.classList.remove("snackbar--hide"); + snackbar.classList.add("snackbar--show"); + setTimeout(() => { + snackbar.classList.remove("snackbar--show"); + snackbar.classList.add("snackbar--hide"); + }, 3000) +} + +function closeSnackbar() { + + let snackbar = document.getElementById("snackbar-item"); + snackbar.classList.add("snackbar--hide"); +} + diff --git a/components/toast-notify-snackbar.css b/components/toast-notify-snackbar.css index e69de29..355c2b5 100644 --- a/components/toast-notify-snackbar.css +++ b/components/toast-notify-snackbar.css @@ -0,0 +1,87 @@ +@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"); +@import url("../resources/prism.css"); +@import url("./utils.css"); +@import url("./button.css"); +@import url("./lists.css"); +* { + box-sizing: border-box; +} +body { + margin: 0; + padding: 0; +} +:root { + --primary-font: Lato; + --primary-color: #111827; + --secondary-color: #fff; + --border-color: #e5e5e5; + --zindex-one: 1; + --zindex-two: 2; + --zindex-three: 3; + --snackbar-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), + 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); +} + +/* snackbar */ + +.snackbar { + display: flex; + justify-content: center; + align-items: center; + + position: fixed; + bottom: 0; + + box-shadow: var(--snackbar-shadow); + + padding-right: 1rem; + + margin: 0.5rem; + + visibility: hidden; + + background-color: var(--secondary-color); + + z-index: var(--zindex-two); +} + +.snackbar .stacked-list__item { + margin: 0; +} + +.snackbar--show { + visibility: visible; +} + +.snackbar--hide { + visibility: hidden; +} + +.snackbar__close-btn { + display: inline-block; + + width: fit-content; + + padding: 0; + + background-color: transparent; + border: 0; + outline: 0; + + z-index: var(--zindex-three); + + /* cursor: progress; */ +} + +/* fix codeblock height */ +.snackbar__container .language-markup { + height: 10rem; +} + +@media screen and (min-width: 576px) { + .snackbar { + max-width: 30rem; + bottom: 0; + right: 0; + } +} diff --git a/components/toast-notify-snackbar.html b/components/toast-notify-snackbar.html index e69de29..62c1224 100644 --- a/components/toast-notify-snackbar.html +++ b/components/toast-notify-snackbar.html @@ -0,0 +1,61 @@ + + + + + + + + Toast + + + +
+
+
+ +
+
+
  • + info_icon + +

    Lorem ipsum dolor sit amet.

    + Lorem, ipsum dolor sit amet consectetur adipisicing + elit. +     +
    • + +
    + 
    +            
+                <div id="snackbar-item" class="snackbar">
+                    <li class="stacked-list__item info--item">
+                    <img src="../svgs/info-alert.svg" alt="info_icon" />
+                    <span class="stacked-list__right">
+                        <h3 class="stacked-list__title">Lorem ipsum dolor sit amet.</h3>
+                        <small
+                        >Lorem, ipsum dolor sit amet consectetur adipisicing elit.</small
+                        >
+                    </span>
+                    </li>
+                    <button class="snackbar__close-btn" onclick="closeSnackbar()">
+                    <img src="../svgs/close-btn.svg" alt="close_btn" />
+                    </button>
+                </div> 
+            
+
    +
    +
    + + + + + diff --git a/index.css b/index.css index 4ec9678..09eb9ce 100644 --- a/index.css +++ b/index.css @@ -12,6 +12,7 @@ @import url("./components/threeItemsGrid.css"); @import url("./components/lists.css"); @import url("./components/Text-Utilities.css"); +@import url("./components/toast-notify-snackbar.css"); * { box-sizing: border-box; diff --git a/index.html b/index.html index 7b33daf..c1d5470 100644 --- a/index.html +++ b/index.html @@ -88,14 +88,14 @@ Cards Image Input - Lists + Lists Navigation Modal Rating Slider - Simplified Grid - Text Utilities - Toast Notify Snackbar + Simplified Grid + Text Utilities + Toast Notify Snackbar @@ -1348,8 +1348,11 @@

    -

    - Text Utilites +

    + Text Utilities

    @@ -1389,6 +1392,59 @@

    I'm Heading

    + +

    + Snackbar +

    + +
    +
    +
    + +
    +
    +
  • + info_icon + +

    + Lorem ipsum dolor sit amet. +

    + Lorem, ipsum dolor sit amet consectetur adipisicing + elit. +     +
    • + +
    + 
    +                  
+                      <div id="snackbar-item" class="snackbar">
+                          <li class="stacked-list__item info--item">
+                          <img src="../svgs/info-alert.svg" alt="info_icon" />
+                          <span class="stacked-list__right">
+                              <h3 class="stacked-list__title">Lorem ipsum dolor sit amet.</h3>
+                              <small
+                              >Lorem, ipsum dolor sit amet consectetur adipisicing elit.</small
+                              >
+                          </span>
+                          </li>
+                          <button class="snackbar__close-btn" onclick="closeSnackbar()">
+                          <img src="../svgs/close-btn.svg" alt="close_btn" />
+                          </button>
+                      </div> 
+                  
+
    +
    +
    + @@ -1423,6 +1479,7 @@

    I'm Heading

    + From 5fa79d9a1e3cd31abdb4a4326ca8b787fd8fff1b Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Mon, 5 Apr 2021 13:07:17 +0530 Subject: [PATCH 48/83] feat: added rating component --- components/rating.css | 44 ++++++++++++++++++++++++++++++++++++++++++ components/rating.html | 41 +++++++++++++++++++++++++++++++++++++++ index.css | 1 + index.html | 39 +++++++++++++++++++++++++++++++++++-- 4 files changed, 123 insertions(+), 2 deletions(-) diff --git a/components/rating.css b/components/rating.css index e69de29..d4c94a0 100644 --- a/components/rating.css +++ b/components/rating.css @@ -0,0 +1,44 @@ +@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"); +@import url("../resources/prism.css"); +@import url("./utils.css"); + +* { + box-sizing: border-box; +} + +body { + margin: 0; + padding: 0; +} +:root { + --primary-color: #111827; + --secondary-color: white; + --border-color: #e5e5e5; + --primary-font: Lato; +} + +.rating { + display: flex; + justify-content: center; + align-items: center; + + max-width: max-content; + + background-color: var(--primary-color); + color: var(--secondary-color); + + font-size: var(--small-text); + text-align: center; + + font-family: var(--primary-font); + + padding: 0.3rem; + + border-radius: 0.2rem; + + margin: 0.5rem; +} + +.rating__icon { + margin-right: 5px; +} diff --git a/components/rating.html b/components/rating.html index e69de29..8003ade 100644 --- a/components/rating.html +++ b/components/rating.html @@ -0,0 +1,41 @@ + + + + + + + Rating + + + + +
    +
    +
    + + rating_icon + 4.5 + +
    + 
    +          
+            <span class="rating">
+                <img
+                    src="../svgs/rating.svg"
+                    class="rating__icon"
+                    alt="rating_icon"
+                />
+                4.5
+            </span>
+          
+
    +
    +
    + + + + diff --git a/index.css b/index.css index 09eb9ce..ac832e6 100644 --- a/index.css +++ b/index.css @@ -13,6 +13,7 @@ @import url("./components/lists.css"); @import url("./components/Text-Utilities.css"); @import url("./components/toast-notify-snackbar.css"); +@import url("./components/rating.css"); * { box-sizing: border-box; diff --git a/index.html b/index.html index c1d5470..5337c50 100644 --- a/index.html +++ b/index.html @@ -91,7 +91,7 @@ Lists Navigation Modal - Rating + Rating Slider Simplified Grid Text Utilities @@ -1214,7 +1214,42 @@

    -

    +

    + Rating +

    + +
    +
    +
    + + rating_icon + 4.5 + +
    + 
    +                  
+                    <span class="rating">
+                        <img
+                            src="../svgs/rating.svg"
+                            class="rating__icon"
+                            alt="rating_icon"
+                        />
+                        4.5
+                    </span>
+                  
+
    +
    +
    + + +

    Two Column Grid

    From 6f2a120eb1a47e8086e46640e08d8c896f852317 Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Mon, 5 Apr 2021 13:43:59 +0530 Subject: [PATCH 49/83] feat: added slider component --- components/rating.css | 4 +++- components/slider.css | 9 +++++++++ components/slider.html | 27 +++++++++++++++++++++++++++ index.html | 19 ++++++++++++++++++- 4 files changed, 57 insertions(+), 2 deletions(-) create mode 100644 components/slider.css create mode 100644 components/slider.html diff --git a/components/rating.css b/components/rating.css index d4c94a0..0b1e429 100644 --- a/components/rating.css +++ b/components/rating.css @@ -37,8 +37,10 @@ body { border-radius: 0.2rem; margin: 0.5rem; + + font-weight: 900; } .rating__icon { - margin-right: 5px; + margin-right: 3px; } diff --git a/components/slider.css b/components/slider.css new file mode 100644 index 0000000..b34ea74 --- /dev/null +++ b/components/slider.css @@ -0,0 +1,9 @@ +@import url("../resources/prism.css"); +@import url("./utils.css"); +/* .slider { + padding: 0; +} + +input[type="range"] { + background-color: red; +} */ diff --git a/components/slider.html b/components/slider.html new file mode 100644 index 0000000..d11cd64 --- /dev/null +++ b/components/slider.html @@ -0,0 +1,27 @@ + + + + + + + Slider + + + + +
    +
    +
    + +
    + 
    +          
+            <input type="range" class="slider" />
+          
+
    +
    +
    + + + + diff --git a/index.html b/index.html index 5337c50..e0f0049 100644 --- a/index.html +++ b/index.html @@ -92,7 +92,7 @@ Navigation Modal Rating - Slider + Slider Simplified Grid Text Utilities Toast Notify Snackbar @@ -1246,6 +1246,23 @@

    +

    + Slider +

    + +
    +
    +
    + +
    + 
    +                  
+                    <input type="range" class="slider" />
+                  
+
    +
    +
    +

    Date: Mon, 5 Apr 2021 16:14:29 +0530 Subject: [PATCH 50/83] feat: added modal component --- components/modal.css | 108 ++++++++++++++++++++++++++++++++++++++++++ components/modal.html | 87 ++++++++++++++++++++++++++++++++++ components/modal.js | 8 ++++ index.css | 1 + index.html | 90 +++++++++++++++++++++++++++++++++-- 5 files changed, 291 insertions(+), 3 deletions(-) create mode 100644 components/modal.css create mode 100644 components/modal.html create mode 100644 components/modal.js diff --git a/components/modal.css b/components/modal.css new file mode 100644 index 0000000..9232190 --- /dev/null +++ b/components/modal.css @@ -0,0 +1,108 @@ +@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"); +@import url("../resources/prism.css"); +@import url("./utils.css"); +@import url("./button.css"); +* { + box-sizing: border-box; +} +body { + margin: 0; + padding: 0; +} +:root { + --primary-font: Lato; + --font-weight: 600; + --primary-color: #111827; + --secondary-color: #fff; + --border-color: #e5e5e5; + --modal-background: rgba(17, 24, 39, 0.3); +} + +/* Modal */ + +.modal { + display: flex; + justify-content: space-around; + align-items: center; + + width: 100vw; + height: 100vh; + + position: fixed; + top: 0; + left: 0; + + visibility: hidden; + + background: var(--modal-background); +} + +.modal--show { + visibility: visible; +} + +/* Modal Article */ + +.modal__article { + display: inline-flex; + flex-direction: column; + padding: 1.5rem; + background-color: var(--primary-color); + margin: 2rem; + width: fit-content; + max-width: 25rem; + border-radius: 0.5rem; +} + +.modal__article__header { + color: var(--secondary-color); + font-family: var(--primary-font); + + display: flex; + justify-content: space-between; + + margin-bottom: 1rem; +} + +.modal__close-btn { + display: inline-block; + + width: fit-content; + + padding: 0; + + background-color: transparent; + border: 0; + outline: 0; +} + +.modal__article__header__text { + margin: 0; +} + +.modal__article__info { + color: var(--secondary-color); + + font-family: var(--primary-font); + + text-align: justify; +} + +.modal__article__footer { + display: flex; + margin-top: 1rem; + justify-content: flex-end; +} + +/* codeblock length fix */ +.modal__container .language-markup { + height: 10rem; + overflow-x: scroll; +} + +@media screen and (min-width: 576px) { + .modal__container .language-markup { + height: 10rem; + overflow-x: hidden; + } +} diff --git a/components/modal.html b/components/modal.html new file mode 100644 index 0000000..270e5f4 --- /dev/null +++ b/components/modal.html @@ -0,0 +1,87 @@ + + + + + + + Modal + + + + +
    +
    +
    + +
    + 
    +             
+                <div id="modal" class="modal">
+                    <section class="modal__article">
+                    <header class="modal__article__header">
+                        <h2 class="modal__article__header__text">Modal Title</h2>
+                        <button class="modal__close-btn" onclick="{}">
+                            <img src="../svgs/close-btn.svg" alt="close_btn" />
+                        </button>
+
+                    </header>
+                    <div class="modal__article__info">
+                        <p>
+                            --- enter you modal text ---
+                        </p>
+                    </div>
+                    <footer class="modal__article__footer">
+                        <button id="close-modal"class="button__primary button--round" onclick="{}">Close</button>
+                    <button class="button__primary button--round">
+                        Secondary Action
+                    </button>
+  
+                    </footer>
+                    </section>
+                </div>
+             
+
    +
    + +
    + + + + + diff --git a/components/modal.js b/components/modal.js new file mode 100644 index 0000000..fbdb2e9 --- /dev/null +++ b/components/modal.js @@ -0,0 +1,8 @@ +function showModal() { + let modal = document.getElementById("modal"); + modal.classList.toggle('modal--show'); +} + +function closeModal() { + modal.classList.remove("modal--show"); +} \ No newline at end of file diff --git a/index.css b/index.css index ac832e6..c3f8730 100644 --- a/index.css +++ b/index.css @@ -14,6 +14,7 @@ @import url("./components/Text-Utilities.css"); @import url("./components/toast-notify-snackbar.css"); @import url("./components/rating.css"); +@import url("./components/modal.css"); * { box-sizing: border-box; diff --git a/index.html b/index.html index e0f0049..1c253cb 100644 --- a/index.html +++ b/index.html @@ -87,10 +87,10 @@ Buttons Cards Image - Input + Input Lists Navigation - Modal + Modal Rating Slider Simplified Grid @@ -709,7 +709,8 @@

    src="https://source.unsplash.com/random/" alt="product" /> - Lorem ipsum + Lorem ipsum .modal__container .language-markup { height: + 10rem; overflow-x: scroll; } Lorem ipsum dolor sit Lorem @@ -1214,6 +1215,88 @@

    +

    + Modal +

    + +
    +
    +
    + +
    + 
    +             
+                <div id="modal" class="modal">
+                    <section class="modal__article">
+                    <header class="modal__article__header">
+                        <h2 class="modal__article__header__text">Modal Title</h2>
+                        <button class="modal__close-btn" onclick="{}">
+                            <img src="../svgs/close-btn.svg" alt="close_btn" />
+                        </button>
+
+                    </header>
+                    <div class="modal__article__info">
+                        <p>
+                            --- enter you modal text ---
+                        </p>
+                    </div>
+                    <footer class="modal__article__footer">
+                        <button id="close-modal"class="button__primary button--round" onclick="{}">Close</button>
+                    <button class="button__primary button--round">
+                        Secondary Action
+                    </button>
+  
+                    </footer>
+                    </section>
+                </div>
+             
+
    +
    + +
    + +

    Rating

    @@ -1532,6 +1615,7 @@

    + From f8f453f95602851523ed05188847a3b93f002310 Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Mon, 5 Apr 2021 19:37:03 +0530 Subject: [PATCH 51/83] feat: added input component --- components/inputs.css | 56 +++++++++++++++++++++--- components/inputs.html | 64 ++++++++++++++++++++++++++-- components/modal.css | 3 ++ index.css | 1 + index.html | 97 ++++++++++++++++++++++++++++++++++++------ 5 files changed, 197 insertions(+), 24 deletions(-) diff --git a/components/inputs.css b/components/inputs.css index 755a11e..89db9ae 100644 --- a/components/inputs.css +++ b/components/inputs.css @@ -1,23 +1,65 @@ +@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"); +@import url("../resources/prism.css"); +@import url("./utils.css"); * { box-sizing: border-box; } body { - padding: 0; margin: 0; + padding: 0; } - :root { - --primary-font: Lato; --primary-color: #111827; + --secondary-color: white; --border-color: #e5e5e5; + --primary-font: Lato; + --input-font-size: 1.3rem; + --input-back-color: #ededed; + --valid-text-color: #3bb54a; + --invalid-text-color: #d1403f; } .input { - margin: 1rem; + display: flex; + flex-direction: column; padding: 1rem; - border: 1px solid black; + width: 100%; +} + +.input--common { + font-size: var(--input-font-size); + font-family: var(--primary-font); + color: var(--primary-color); + + border: 0; + + background-color: var(--input-back-color); + + padding: 0.75rem 1rem; + + outline-color: var(--primary-color); + + margin: 1rem; + + outline: 0px; +} + +.input--common:valid { + border: 2px solid var(--valid-text-color); + outline-color: var(--valid-text-color); } -/* .input__primary { -} */ +.input--common:invalid { + border: 2px solid var(--invalid-text-color); +} + +.input__container .language-markup { + height: 10rem; +} + +@media screen and (min-width: 576px) { + .input { + width: 80%; + } +} diff --git a/components/inputs.html b/components/inputs.html index 023111b..6db282c 100644 --- a/components/inputs.html +++ b/components/inputs.html @@ -8,10 +8,68 @@ inputs -
    -
    - + +
    +
    +
    +
    + + + +
    +
    + 
    +        
+          <input
+            type="text"
+            class="input__text input--common"
+            placeholder="Enter Your Name"
+            value="hello,world"
+            required
+          />
+        
+
    + 
    +        
+           <input
+            type="email"
+            class="input__email input--common"
+            placeholder="Enter Email"
+            required
+          />
+        
+
    + 
    +        
+          <input
+            type="password"
+            class="input_password input--common"
+            placeholder="Enter Password(must be 8 chars long)"
+            pattern=".{8,}"
+            required
+          />
+        
+
    + + diff --git a/components/modal.css b/components/modal.css index 9232190..948574d 100644 --- a/components/modal.css +++ b/components/modal.css @@ -16,6 +16,7 @@ body { --secondary-color: #fff; --border-color: #e5e5e5; --modal-background: rgba(17, 24, 39, 0.3); + --zindex-five: 5; } /* Modal */ @@ -35,6 +36,8 @@ body { visibility: hidden; background: var(--modal-background); + + z-index: var(--zindex-five); } .modal--show { diff --git a/index.css b/index.css index c3f8730..13f57c8 100644 --- a/index.css +++ b/index.css @@ -15,6 +15,7 @@ @import url("./components/toast-notify-snackbar.css"); @import url("./components/rating.css"); @import url("./components/modal.css"); +@import url("./components/inputs.css"); * { box-sizing: border-box; diff --git a/index.html b/index.html index 1c253cb..206a6eb 100644 --- a/index.html +++ b/index.html @@ -709,8 +709,7 @@

    src="https://source.unsplash.com/random/" alt="product" /> - Lorem ipsum .modal__container .language-markup { height: - 10rem; overflow-x: scroll; } + Lorem ipsum Lorem ipsum dolor sit Lorem @@ -1034,6 +1033,73 @@

    +

    + Inputs +

    + + +
    +
    +
    +
    + + + +
    +
    + 
    +        
+          <input
+            type="text"
+            class="input__text input--common"
+            placeholder="Enter Your Name"
+            value="hello,world"
+            required
+          />
+        
+
    + 
    +        
+           <input
+            type="email"
+            class="input__email input--common"
+            placeholder="Enter Email"
+            required
+          />
+        
+
    + 
    +                
+                  <input
+                    type="password"
+                    class="input_password input--common"
+                    placeholder="Enter Password(must be 8 chars long)"
+                    pattern=".{8,}"
+                    required
+                  />
+                
+
    +
    +
    + +

    Lists

    @@ -1047,17 +1113,17 @@

    Lists

  • List Item 6
    • -          
-              <ul class="spaced-list">
-                <li class="spaced-list__item">List Item 1</li>
-                <li class="spaced-list__item">List Item 2</li>
-                <li class="spaced-list__item">List Item 3</li>
-                <li class="spaced-list__item">List Item 4</li>
-                <li class="spaced-list__item">List Item 5</li>
-                <li class="spaced-list__item">List Item 6</li>
-              </ul>
-          
-
    + + <ul class="spaced-list"> + <li class="spaced-list__item">List Item 1</li> + <li class="spaced-list__item">List Item 2</li> + <li class="spaced-list__item">List Item 3</li> + <li class="spaced-list__item">List Item 4</li> + <li class="spaced-list__item">List Item 5</li> + <li class="spaced-list__item">List Item 6</li> + </ul> + +
    @@ -1162,7 +1228,10 @@

    -

    +

    Navigation

    From 8c4b8478db3e2addb8f6a5d1fefbdaeb4c0a290a Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Mon, 5 Apr 2021 21:53:03 +0530 Subject: [PATCH 52/83] style: added favicon and changed title --- index.css | 1 + index.html | 57 +++++---------------------------------- svgs/menu.svg | 5 ++++ svgs/zen-brush-symbol.svg | 25 +++++++++++++++++ svgs/zen.svg | 1 + 5 files changed, 39 insertions(+), 50 deletions(-) create mode 100644 svgs/menu.svg create mode 100644 svgs/zen-brush-symbol.svg create mode 100644 svgs/zen.svg diff --git a/index.css b/index.css index 13f57c8..34c5866 100644 --- a/index.css +++ b/index.css @@ -109,6 +109,7 @@ } .navbar__title__text { + margin-left: 0.7rem; cursor: pointer; } diff --git a/index.html b/index.html index 206a6eb..6cacef8 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,8 @@ - Document + Satori + @@ -13,64 +14,20 @@ diff --git a/svgs/menu.svg b/svgs/menu.svg new file mode 100644 index 0000000..5b39076 --- /dev/null +++ b/svgs/menu.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/svgs/zen-brush-symbol.svg b/svgs/zen-brush-symbol.svg new file mode 100644 index 0000000..1804030 --- /dev/null +++ b/svgs/zen-brush-symbol.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/svgs/zen.svg b/svgs/zen.svg new file mode 100644 index 0000000..1f07ad2 --- /dev/null +++ b/svgs/zen.svg @@ -0,0 +1 @@ + \ No newline at end of file From 66f980c786303e36c23bd2c13e34add6af87aba6 Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Mon, 5 Apr 2021 22:01:23 +0530 Subject: [PATCH 53/83] refactor: change svgs to images --- index.html | 105 +++-------------------------------------------- svgs/correct.svg | 5 +++ svgs/plus.svg | 5 +++ svgs/top.svg | 5 +++ 4 files changed, 20 insertions(+), 100 deletions(-) create mode 100644 svgs/correct.svg create mode 100644 svgs/plus.svg create mode 100644 svgs/top.svg diff --git a/index.html b/index.html index 6cacef8..8de5e53 100644 --- a/index.html +++ b/index.html @@ -502,85 +502,13 @@ 

    @@ -1611,31 +1539,8 @@
    - - - - - - + + top_icon

    diff --git a/svgs/correct.svg b/svgs/correct.svg new file mode 100644 index 0000000..bb43207 --- /dev/null +++ b/svgs/correct.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/svgs/plus.svg b/svgs/plus.svg new file mode 100644 index 0000000..71af535 --- /dev/null +++ b/svgs/plus.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/svgs/top.svg b/svgs/top.svg new file mode 100644 index 0000000..6c5b9b8 --- /dev/null +++ b/svgs/top.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file From 87392227b3c48c2925318217efa34ad1e6885b36 Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Mon, 5 Apr 2021 22:28:04 +0530 Subject: [PATCH 54/83] refactor: untracked some file and added gitignore --- components/Text-Utilities.html | 51 --- components/alerts.html | 534 ---------------------- components/avatar.html | 67 --- components/button.html | 408 ----------------- components/cards.html | 616 -------------------------- components/images.html | 58 --- components/inputs.html | 75 ---- components/lists.html | 131 ------ components/modal.html | 87 ---- components/navbar.html | 148 ------- components/rating.html | 41 -- components/slider.html | 27 -- components/threeItemsGrid.html | 78 ---- components/toast-notify-snackbar.html | 61 --- components/twoItemsGrid.html | 35 -- 15 files changed, 2417 deletions(-) delete mode 100644 components/Text-Utilities.html delete mode 100644 components/alerts.html delete mode 100644 components/avatar.html delete mode 100644 components/button.html delete mode 100644 components/cards.html delete mode 100644 components/images.html delete mode 100644 components/inputs.html delete mode 100644 components/lists.html delete mode 100644 components/modal.html delete mode 100644 components/navbar.html delete mode 100644 components/rating.html delete mode 100644 components/slider.html delete mode 100644 components/threeItemsGrid.html delete mode 100644 components/toast-notify-snackbar.html delete mode 100644 components/twoItemsGrid.html diff --git a/components/Text-Utilities.html b/components/Text-Utilities.html deleted file mode 100644 index fa71ed6..0000000 --- a/components/Text-Utilities.html +++ /dev/null @@ -1,51 +0,0 @@ - - - - - - - Text Utilites - - - - -
    -
      -
    • -

      I'm Heading

      -
      • -
    • -

      I'm Small

      -
      • -
    • -

      I'm Gray

      -
      • -
    • -

      I'm Center

      -
      • -
    - 
    -        
-          <h1 class="heading">I'm Heading</h1>
-        
-
    - 
    -        
-          <p class="small-text">I'm Small</p>
-        
-
    - 
    -        
-          <p class="gray-text">I'm Gray</p>
-        
-
    - 
    -        
-          <p class="center-text">I'm Center</p>
-        
-
    -
    - - - - diff --git a/components/alerts.html b/components/alerts.html deleted file mode 100644 index 701e970..0000000 --- a/components/alerts.html +++ /dev/null @@ -1,534 +0,0 @@ - - - - - - - Alerts - - - -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - This is an success alert - check it out! -
    - 
    -            
-                <div class="alerts__success alerts--common">
-          <span class="alerts--margin--common">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              xmlns:xlink="http://www.w3.org/1999/xlink"
-              xmlns:svgjs="http://svgjs.com/svgjs"
-              version="1.1"
-              width="24"
-              height="24"
-              x="0"
-              y="0"
-              viewBox="0 0 367.805 367.805"
-              style="enable-background: new 0 0 512 512"
-              xml:space="preserve"
-              class=""
-            >
-              <g>
-                <g xmlns="http://www.w3.org/2000/svg">
-                  <path
-                    style=""
-                    d="M183.903,0.001c101.566,0,183.902,82.336,183.902,183.902s-82.336,183.902-183.902,183.902   S0.001,285.469,0.001,183.903l0,0C-0.288,82.625,81.579,0.29,182.856,0.001C183.205,0,183.554,0,183.903,0.001z"
-                    fill="#3bb54a"
-                    data-original="#3bb54a"
-                    class=""
-                  />
-                  <polygon
-                    style=""
-                    points="285.78,133.225 155.168,263.837 82.025,191.217 111.805,161.96 155.168,204.801    256.001,103.968  "
-                    fill="#ffffff"
-                    data-original="#d4e1f4"
-                    class=""
-                  />
-                </g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-              </g>
-            </svg>
-          </span>
-          This is an success alert - check it out!
-        </div>
-            
-
    -
    - -
    -
    - - - - - - - - - - - - - This is an error alert - check it out! -
    - 
    -            
-              <div
-                class="alerts__error alerts--common alert--reduce-width center--margin"
-              >
-                <span class="alerts--margin--common">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                    xmlns:svgjs="http://svgjs.com/svgjs"
-                    version="1.1"
-                    width="24"
-                    height="24"
-                    x="0"
-                    y="0"
-                    viewBox="0 0 511.82388 511"
-                    style="enable-background: new 0 0 512 512"
-                    xml:space="preserve"
-                    class=""
-                  >
-                    <g>
-                      <path
-                        xmlns="http://www.w3.org/2000/svg"
-                        d="m439.210938 459.449219h-366.609376c-25.160156 0-48.53125-13.027344-61.757812-34.433594-13.230469-21.402344-14.433594-48.128906-3.179688-70.636719l183.304688-313.832031c12.300781-24.59375 37.4375-40.132813 64.9375-40.132813s52.636719 15.539063 64.9375 40.132813l183.304688 313.832031c11.253906 22.507813 10.050781 49.234375-3.179688 70.636719-13.226562 21.40625-36.59375 34.433594-61.757812 34.433594zm0 0"
-                        fill="#d1403f"
-                        data-original="#d1403f"
-                        style=""
-                        class=""
-                      />
-                      <path
-                        xmlns="http://www.w3.org/2000/svg"
-                        d="m439.253906 459.449219h-183.347656v-459.035157c27.566406-.171874 52.804688 15.429688 64.972656 40.167969l183.257813 313.820313c11.269531 22.492187 10.082031 49.21875-3.136719 70.621094-13.222656 21.40625-36.585938 34.433593-61.746094 34.425781zm0 0"
-                        fill="#d1403f"
-                        data-original="#f29c1f"
-                        style=""
-                        class=""
-                      />
-                      <path
-                        xmlns="http://www.w3.org/2000/svg"
-                        d="m291.21875 380c0 19.503906-15.8125 35.3125-35.3125 35.3125s-35.308594-15.808594-35.308594-35.3125c0-19.5 15.808594-35.308594 35.308594-35.308594s35.3125 15.808594 35.3125 35.308594zm0 0"
-                        fill="#ffffff"
-                        data-original="#35495e"
-                        style=""
-                        class=""
-                      />
-                      <path
-                        xmlns="http://www.w3.org/2000/svg"
-                        d="m291.21875 380c0 9.367188-3.71875 18.347656-10.339844 24.972656-6.625 6.621094-15.605468 10.339844-24.972656 10.339844v-70.621094c9.367188-.003906 18.347656 3.714844 24.972656 10.339844 6.621094 6.621094 10.339844 15.605469 10.339844 24.96875zm0 0"
-                        fill="#ffffff"
-                        data-original="#2c3e50"
-                        style=""
-                        class=""
-                      />
-                      <path
-                        xmlns="http://www.w3.org/2000/svg"
-                        d="m255.90625 71.035156c19.5 0 35.3125 15.808594 35.3125 35.3125v167.722656c0 19.5-15.8125 35.308594-35.3125 35.308594s-35.308594-15.808594-35.308594-35.308594v-167.722656c0-19.503906 15.808594-35.3125 35.308594-35.3125zm0 0"
-                        fill="#ffffff"
-                        data-original="#35495e"
-                        style=""
-                        class=""
-                      />
-                      <path
-                        xmlns="http://www.w3.org/2000/svg"
-                        d="m291.21875 106.347656v167.722656c0 9.367188-3.71875 18.347657-10.339844 24.96875-6.625 6.625-15.605468 10.34375-24.972656 10.339844v-238.34375c9.367188-.011718 18.359375 3.703125 24.984375 10.328125 6.621094 6.625 10.339844 15.613281 10.328125 24.984375zm0 0"
-                        fill="#ffffff"
-                        data-original="#2c3e50"
-                        style=""
-                        class=""
-                      />
-                    </g>
-                  </svg>
-                </span>
-                This is an error alert - check it out!
-              </div>
-            
-
    -
    - -
    -
    - - - - - - - - - - - - - This is an warning alert - check it out! -
    - 
    -            
-                <div class="alerts__warning alerts--common">
-          <span class="alerts--margin--common">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              xmlns:xlink="http://www.w3.org/1999/xlink"
-              xmlns:svgjs="http://svgjs.com/svgjs"
-              version="1.1"
-              width="24"
-              height="24"
-              x="0"
-              y="0"
-              viewBox="0 0 511.82388 511"
-              style="enable-background: new 0 0 512 512"
-              xml:space="preserve"
-              class=""
-            >
-              <g>
-                <path
-                  xmlns="http://www.w3.org/2000/svg"
-                  d="m439.210938 459.449219h-366.609376c-25.160156 0-48.53125-13.027344-61.757812-34.433594-13.230469-21.402344-14.433594-48.128906-3.179688-70.636719l183.304688-313.832031c12.300781-24.59375 37.4375-40.132813 64.9375-40.132813s52.636719 15.539063 64.9375 40.132813l183.304688 313.832031c11.253906 22.507813 10.050781 49.234375-3.179688 70.636719-13.226562 21.40625-36.59375 34.433594-61.757812 34.433594zm0 0"
-                  fill="#f0c419"
-                  data-original="#f0c419"
-                  style=""
-                  class=""
-                />
-                <path
-                  xmlns="http://www.w3.org/2000/svg"
-                  d="m439.253906 459.449219h-183.347656v-459.035157c27.566406-.171874 52.804688 15.429688 64.972656 40.167969l183.257813 313.820313c11.269531 22.492187 10.082031 49.21875-3.136719 70.621094-13.222656 21.40625-36.585938 34.433593-61.746094 34.425781zm0 0"
-                  fill="#f0c419"
-                  data-original="#f29c1f"
-                  style=""
-                  class=""
-                />
-                <path
-                  xmlns="http://www.w3.org/2000/svg"
-                  d="m291.21875 380c0 19.503906-15.8125 35.3125-35.3125 35.3125s-35.308594-15.808594-35.308594-35.3125c0-19.5 15.808594-35.308594 35.308594-35.308594s35.3125 15.808594 35.3125 35.308594zm0 0"
-                  fill="#ffffff"
-                  data-original="#35495e"
-                  style=""
-                  class=""
-                />
-                <path
-                  xmlns="http://www.w3.org/2000/svg"
-                  d="m291.21875 380c0 9.367188-3.71875 18.347656-10.339844 24.972656-6.625 6.621094-15.605468 10.339844-24.972656 10.339844v-70.621094c9.367188-.003906 18.347656 3.714844 24.972656 10.339844 6.621094 6.621094 10.339844 15.605469 10.339844 24.96875zm0 0"
-                  fill="#ffffff"
-                  data-original="#2c3e50"
-                  style=""
-                  class=""
-                />
-                <path
-                  xmlns="http://www.w3.org/2000/svg"
-                  d="m255.90625 71.035156c19.5 0 35.3125 15.808594 35.3125 35.3125v167.722656c0 19.5-15.8125 35.308594-35.3125 35.308594s-35.308594-15.808594-35.308594-35.308594v-167.722656c0-19.503906 15.808594-35.3125 35.308594-35.3125zm0 0"
-                  fill="#ffffff"
-                  data-original="#35495e"
-                  style=""
-                  class=""
-                />
-                <path
-                  xmlns="http://www.w3.org/2000/svg"
-                  d="m291.21875 106.347656v167.722656c0 9.367188-3.71875 18.347657-10.339844 24.96875-6.625 6.625-15.605468 10.34375-24.972656 10.339844v-238.34375c9.367188-.011718 18.359375 3.703125 24.984375 10.328125 6.621094 6.625 10.339844 15.613281 10.328125 24.984375zm0 0"
-                  fill="#ffffff"
-                  data-original="#2c3e50"
-                  style=""
-                  class=""
-                />
-              </g>
-            </svg>
-          </span>
-          This is an warning alert - check it out!
-        </div>
-            
-
    -
    - -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - This is an info alert - check it out! -
    - 
    -            
-                <div class="alerts__info alerts--common">
-          <span class="alerts--margin--common">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              xmlns:xlink="http://www.w3.org/1999/xlink"
-              xmlns:svgjs="http://svgjs.com/svgjs"
-              version="1.1"
-              width="24"
-              height="24"
-              x="0"
-              y="0"
-              viewBox="0 0 438.533 438.533"
-              style="enable-background: new 0 0 512 512"
-              xml:space="preserve"
-              class=""
-            >
-              <g>
-                <g xmlns="http://www.w3.org/2000/svg">
-                  <path
-                    d="M409.133,109.203c-19.608-33.592-46.205-60.189-79.798-79.796C295.736,9.801,259.058,0,219.273,0   c-39.781,0-76.47,9.801-110.063,29.407c-33.595,19.604-60.192,46.201-79.8,79.796C9.801,142.8,0,179.489,0,219.267   c0,39.78,9.804,76.463,29.407,110.062c19.607,33.592,46.204,60.189,79.799,79.798c33.597,19.605,70.283,29.407,110.063,29.407   s76.47-9.802,110.065-29.407c33.593-19.602,60.189-46.206,79.795-79.798c19.603-33.596,29.403-70.284,29.403-110.062   C438.533,179.485,428.732,142.795,409.133,109.203z M182.727,54.813c0-2.666,0.855-4.853,2.57-6.565   c1.712-1.711,3.903-2.57,6.567-2.57h54.82c2.662,0,4.853,0.859,6.561,2.57c1.711,1.712,2.573,3.899,2.573,6.565v45.682   c0,2.664-0.862,4.854-2.573,6.564c-1.708,1.712-3.898,2.568-6.561,2.568h-54.82c-2.664,0-4.854-0.856-6.567-2.568   c-1.715-1.709-2.57-3.9-2.57-6.564V54.813z M292.359,356.309c0,2.662-0.863,4.853-2.57,6.561c-1.704,1.714-3.895,2.57-6.563,2.57   H155.317c-2.667,0-4.854-0.856-6.567-2.57c-1.712-1.708-2.568-3.898-2.568-6.564v-45.682c0-2.67,0.856-4.853,2.568-6.567   c1.713-1.708,3.903-2.57,6.567-2.57h27.41v-91.358h-27.41c-2.667,0-4.853-0.855-6.567-2.568c-1.712-1.711-2.568-3.901-2.568-6.567   v-45.679c0-2.666,0.856-4.853,2.568-6.567c1.715-1.713,3.905-2.568,6.567-2.568h91.367c2.662,0,4.853,0.855,6.561,2.568   c1.711,1.714,2.573,3.901,2.573,6.567v146.179h27.401c2.669,0,4.859,0.855,6.57,2.566c1.704,1.712,2.566,3.901,2.566,6.567v45.683   H292.359z"
-                    fill="#447eae"
-                    data-original="#000000"
-                    style=""
-                    class=""
-                  />
-                </g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-                <g xmlns="http://www.w3.org/2000/svg"></g>
-              </g>
-            </svg>
-          </span>
-          This is an info alert - check it out!
-        </div>
-            
-
    -
    - -
    - - - - diff --git a/components/avatar.html b/components/avatar.html deleted file mode 100644 index c869da3..0000000 --- a/components/avatar.html +++ /dev/null @@ -1,67 +0,0 @@ - - - - - - - Document - - - - - -
    -
    - avatar-small - avatar-medium - avatar-medium - avatar-extra-small -
    - 
    -         
-          <img class="img-big img-utils" alt="avatar-big" src="--enter--your--source" width="128" height="128" />
-        
-
    - 
    -        
-          <img class="img-medium img-utils" alt="avatar-medium" src="--enter--your--source" width="96" height="96"/>
-        
-
    - 
    -       
-        <img class="img-small img-utils" alt="avatar-small" src="--enter--your--source" width="64" height="64 "/>
-       
-
    - 
    -        
-          <img class="img-ex-small img-utils" alt="avatar-extra-small" src="--enter--your--source" width="32" height="32" /> 
-        
-
    -
    - - - diff --git a/components/button.html b/components/button.html deleted file mode 100644 index 5d4eb51..0000000 --- a/components/button.html +++ /dev/null @@ -1,408 +0,0 @@ - - - - - - - - Button Component - - -
    -
    -
    - - - - -
    - 
    -          
-            <button class="button__primary">ADD TO CART</button> 
-          
-
    - 
    -          
-            <button class="button__secondary">ADD TO CART</button>
-          
-
    - 
    -          
-            <button class="button__primary button--round">ADD TO CART</button>      
-          
-
    - 
    -          
-            <button class="button__secondary button--round">ADD TO CART</button>
-
    -
    - -
    -
    - - - - - - - - - - - - - Github - -
    - 
    -          
-            <a href="#" class="button__link-button button--round">
-              <span class="svg--right-margin">
-                <!-- put your choice of svg here -->
-              </span>
-                <!-- put your text -->
-            </a>
-          
-
    -
    - -
    -
    - - - - -
    - 
    -          
-            <button class="icon__button">
-              <!-- put your choice of svg here -->
-            </button>
-          
-
    -
    - -
    -
    - - - -
    - 
    -          
-            <button class="floating__button">
-              <!-- put your choice of svg here -->
-            </button>
-          
-
    -
    - -
    - - - diff --git a/components/cards.html b/components/cards.html deleted file mode 100644 index bddaa5e..0000000 --- a/components/cards.html +++ /dev/null @@ -1,616 +0,0 @@ - - - - - - - Document - - - - -
    -
    -
    - - productLorem ipsum Rs. 250 - - -
    - - - 
    -        
-          <a href="#" class="badge-icon">
-          <svg
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <circle
-              cx="8"
-              cy="21"
-              fill="none"
-              r="2"
-              stroke="#000"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-            />
-            <circle
-              cx="20"
-              cy="21"
-              fill="none"
-              r="2"
-              stroke="#000"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-            />
-            <path
-              d="M5.67,6H23l-1.68,8.39a2,2,0,0,1-2,1.61H8.75a2,2,0,0,1-2-1.74L5.23,2.74A2,2,0,0,0,3.25,1H1"
-              fill="none"
-              stroke="#000"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-            />
-          </svg>
-          <span class="num-badge cart-badge">10</span>
-        </a>
-        
-
    -
    - -
    -
    - - - productLorem ipsum Rs. 250 - - -
    - - 
    -          
-        <div class="product-container">
-          <button class="close-btn">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="#B9B9B9"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              class="svg-close"
-            >
-              <line x1="18" y1="6" x2="6" y2="18"></line>
-              <line x1="6" y1="6" x2="18" y2="18"></line>
-            </svg>
-          </button>
-          <a href="#" class="product-info">
-            <img
-              class="product-img"
-              src="https://unsplash.it/200/300"
-              alt="product"
-            />Lorem ipsum <span class="price-tag">Rs. 250</span></a
-          >
-          <button class="wish-btn">
-            <svg
-              class="heart-svg"
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="#B9B9B9"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path
-                d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
-              ></path>
-            </svg>
-          </button>
-          <button class="primary-btn">ADD TO CART</button>
-        </div>
-
-          
-
    -
    - -
    -
    - - productLorem ipsum Rs. 250 - - -
    - - OUT OF STOCK -
    -
    - 
    -          
-        <div class="product-container">
-          <a href="#" class="product-info">
-            <img
-              class="product-img"
-              src="https://unsplash.it/200/300"
-              alt="product"
-            />Lorem ipsum <span class="price-tag">Rs. 250</span></a
-          >
-          <button class="wish-btn">
-            <svg
-              class="heart-svg"
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="#B9B9B9"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path
-                d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
-              ></path>
-            </svg>
-          </button>
-          <button class="primary-btn">ADD TO CART</button>
-          <div class="overlay-div">
-            <button class="close-btn">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="#B9B9B9"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="svg-close"
-              >
-                <line x1="18" y1="6" x2="6" y2="18"></line>
-                <line x1="6" y1="6" x2="18" y2="18"></line>
-              </svg>
-            </button>
-            <span class="overlay-text"> OUT OF STOCK </span>
-          </div>
-        </div>
-          
-
    - -
    - -
    -
    -

    CARD TITLE

    -

    - I am a very simple card. I am good at containing small bits of - information. I am convenient because I require little markup to use - effectively. -

    -
    - - 
    -          
-        <div class="text-card">
-          <h4 class="text-card-title">---card title---</h4>
-          <p class="text-card-info">
-            --- enter your text here ---
-          </p>
-        </div>
-
-          
-
    -
    - -
    -
    - - product -
    -
    -

    Lorem ipsum

    - Lorem ipsum dolor sit amet. - Rs. 250 -

    - Lorem ipsum dolor sit amet consectetur adipisicing elit. - Explicabo, nulla. Lorem ipsum dolor sit amet. -

    -
    - - -
    -
    - - 
    -          
-        <div class="horizontal-product-container">
-          <a href="#" class="product-info hcard-product-info">
-            <img
-              class="product-img hcard-img"
-              src="https://source.unsplash.com/random/"
-              alt="product"
-          /></a>
-          <div class="second-horizontal-section">
-            <div class="hsection_info">
-              <h4 class="hcard-title">Lorem ipsum</h4>
-              <small class="hcard-title-desc"
-                >Lorem ipsum dolor sit amet.</small
-              >
-              <span class="price-tag hcard-price">Rs. 250</span>
-              <p class="hcard-product-desc">
-                Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                Explicabo, nulla. Lorem ipsum dolor sit amet.
-              </p>
-            </div>
-            <button class="primary-btn horizontal-primary-btn">
-              ADD TO CART
-            </button>
-            <button class="wish-btn hcard-wish-btn">
-              <svg
-                class="heart-svg"
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                hcard-wish-btn
-                fill="none"
-                stroke="#B9B9B9"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path
-                  d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
-                ></path>
-              </svg>
-            </button>
-          </div>
-        </div>
- 
-          
-
    -
    - -
    -
    - - product - -
    -
    -

    Lorem ipsum dolor sit

    - Lorem ipsum dolor sit amet consectetur adipisicing. -
    -
    - RATING - - - - - - - - - - - - - - - -
    - - -
    -
    - - 
    -          
-        <div class="shadow_card">
-          <a href="#" class="shadow_card__productimgLink">
-            <img
-              class="shadow_card--img shadow_card__productimg"
-              src="https://source.unsplash.com/random"
-              alt="product"
-            />
-          </a>
-          <div class="shadow_card__product-info">
-            <div class="shadow_card__product-header">
-              <h3 class="shadow_card__product-title">Lorem ipsum dolor sit</h3>
-              <small class="font-family"
-                >Lorem ipsum dolor sit amet consectetur adipisicing.</small
-              >
-            </div>
-            <div class="shadow_card__product-rating">
-              <span class="shadow_card__product-rating__title font-family"
-                >RATING</span
-              >
-              <svg
-                height="16"
-                viewBox="0 -10 511.98685 511"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0"
-                  fill="#ffc107"
-                />
-              </svg>
-              <svg
-                height="16"
-                viewBox="0 -10 511.98685 511"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0"
-                  fill="#ffc107"
-                />
-              </svg>
-              <svg
-                height="16"
-                viewBox="0 -10 511.98685 511"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0"
-                  fill="#ffc107"
-                />
-              </svg>
-              <svg
-                height="16"
-                viewBox="0 -10 511.98685 511"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0"
-                  fill="#ffc107"
-                />
-              </svg>
-              <svg
-                height="16"
-                viewBox="0 -10 511.98685 511"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0"
-                  fill="#ffc107"
-                />
-              </svg>
-            </div>
-            <button class="primary-btn shadow_card--btn">ADD TO CART</button>
-            <button class="shadow_card--wishbtn">
-              <svg
-                class="heart-svg"
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="#B9B9B9"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path
-                  d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
-                ></path>
-              </svg>
-            </button>
-          </div>
-        </div>
-          
-
    -
    - -
    - - - - diff --git a/components/images.html b/components/images.html deleted file mode 100644 index a599198..0000000 --- a/components/images.html +++ /dev/null @@ -1,58 +0,0 @@ - - - - - - - Images - - - - - -
    -
    -
    - round_img -
    - 
    -        
-          <div class="img-container__simple-img">
-        <img
-          class="responsive-img"
-          src="https://source.unsplash.com/random"
-          alt="round_img"
-        />
-      </div>
-
-        
-
    -
    -
    -
    - round_img -
    - 
    -      
-        <div class="img-container__round-img round">
-      <img
-        class="responsive-img img-round"
-        src="https://source.unsplash.com/random"
-        alt="round_img"
-      />
-    </div>
-      
-
    -
    -
    - - - diff --git a/components/inputs.html b/components/inputs.html deleted file mode 100644 index 6db282c..0000000 --- a/components/inputs.html +++ /dev/null @@ -1,75 +0,0 @@ - - - - - - - - inputs - - - -
    -
    -
    -
    - - - -
    -
    - 
    -        
-          <input
-            type="text"
-            class="input__text input--common"
-            placeholder="Enter Your Name"
-            value="hello,world"
-            required
-          />
-        
-
    - 
    -        
-           <input
-            type="email"
-            class="input__email input--common"
-            placeholder="Enter Email"
-            required
-          />
-        
-
    - 
    -        
-          <input
-            type="password"
-            class="input_password input--common"
-            placeholder="Enter Password(must be 8 chars long)"
-            pattern=".{8,}"
-            required
-          />
-        
-
    -
    -
    - - - - diff --git a/components/lists.html b/components/lists.html deleted file mode 100644 index d04f65b..0000000 --- a/components/lists.html +++ /dev/null @@ -1,131 +0,0 @@ - - - - - - - - Document - - - -
    -
    -
      -
    • List Item 1
      • -
    • List Item 2
      • -
    • List Item 3
      • -
    • List Item 4
      • -
    • List Item 5
      • -
    • List Item 6
      • -
    - 
    -          
-              <ul class="spaced-list">
-                <li class="spaced-list__item">List Item 1</li>
-                <li class="spaced-list__item">List Item 2</li>
-                <li class="spaced-list__item">List Item 3</li>
-                <li class="spaced-list__item">List Item 4</li>
-                <li class="spaced-list__item">List Item 5</li>
-                <li class="spaced-list__item">List Item 6</li>
-              </ul>
-          
-
    -
    -
    -
    -
      -
    • - info_icon - -

      Lorem ipsum dolor sit amet.

      - Lorem, ipsum dolor sit amet consectetur adipisicing - elit. -       -
      • -
    • - info_icon - -

      Lorem ipsum dolor sit amet.

      - Lorem, ipsum dolor sit amet consectetur adipisicing - elit. -       -
      • -
    • - info_icon - -

      Lorem ipsum dolor sit amet.

      - Lorem, ipsum dolor sit amet consectetur adipisicing - elit. -       -
      • -
    • - info_icon - -

      Lorem ipsum dolor sit amet.

      - Lorem, ipsum dolor sit amet consectetur adipisicing - elit. -       -
      • -
    -
    - 
    -          
-             <ul class="stacked-list">
-                <li class="stacked-list__item info--item">
-                    <img src="../svgs/info-alert.svg" alt="info_icon" />
-                    <span class="stacked-list__right">
-                    <h3 class="stacked-list__title">Lorem ipsum dolor sit amet.</h3>
-                    <small
-                        >Lorem, ipsum dolor sit amet consectetur adipisicing
-                        elit.</small
-                    >
-                    </span>
-                </li>
-                <li class="stacked-list__item error--item">
-                    <img src="../svgs/error-alert.svg" alt="info_icon" />
-                    <span class="stacked-list__right">
-                    <h3 class="stacked-list__title">Lorem ipsum dolor sit amet.</h3>
-                    <small
-                        >Lorem, ipsum dolor sit amet consectetur adipisicing
-                        elit.</small
-                    >
-                    </span>
-                </li>
-                <li class="stacked-list__item warning--item">
-                    <img src="../svgs/exclamation.svg" alt="info_icon" />
-                    <span class="stacked-list__right">
-                    <h3 class="stacked-list__title">Lorem ipsum dolor sit amet.</h3>
-                    <small
-                        >Lorem, ipsum dolor sit amet consectetur adipisicing
-                        elit.</small
-                    >
-                    </span>
-                </li>
-                <li class="stacked-list__item success--item">
-                    <img src="../svgs/success-alert.svg" alt="info_icon" />
-                    <span class="stacked-list__right">
-                    <h3 class="stacked-list__title">Lorem ipsum dolor sit amet.</h3>
-                    <small
-                        >Lorem, ipsum dolor sit amet consectetur adipisicing
-                        elit.</small
-                    >
-                    </span>
-                </li>
-            </ul>
-          
-
    -
    -
    - - - - diff --git a/components/modal.html b/components/modal.html deleted file mode 100644 index 270e5f4..0000000 --- a/components/modal.html +++ /dev/null @@ -1,87 +0,0 @@ - - - - - - - Modal - - - - -
    -
    -
    - -
    - 
    -             
-                <div id="modal" class="modal">
-                    <section class="modal__article">
-                    <header class="modal__article__header">
-                        <h2 class="modal__article__header__text">Modal Title</h2>
-                        <button class="modal__close-btn" onclick="{}">
-                            <img src="../svgs/close-btn.svg" alt="close_btn" />
-                        </button>
-
-                    </header>
-                    <div class="modal__article__info">
-                        <p>
-                            --- enter you modal text ---
-                        </p>
-                    </div>
-                    <footer class="modal__article__footer">
-                        <button id="close-modal"class="button__primary button--round" onclick="{}">Close</button>
-                    <button class="button__primary button--round">
-                        Secondary Action
-                    </button>
-  
-                    </footer>
-                    </section>
-                </div>
-             
-
    -
    - -
    - - - - - diff --git a/components/navbar.html b/components/navbar.html deleted file mode 100644 index 366b71a..0000000 --- a/components/navbar.html +++ /dev/null @@ -1,148 +0,0 @@ - - - - - - - Navbar - - - -
    -
    - - 
    -          
-              <nav class="navbar-component">
-        <div class="navbar-component__menu">
-          <button class="navbar-component__menu__btn">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="#111827"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              class="feather feather-menu"
-            >
-              <line x1="3" y1="12" x2="21" y2="12"></line>
-              <line x1="3" y1="6" x2="21" y2="6"></line>
-              <line x1="3" y1="18" x2="21" y2="18"></line>
-            </svg>
-          </button>
-          <div class="navbar-component__menu_social">
-            <a href="#" class="navbar-component__menu__social__github">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="feather feather-github"
-              >
-                <path
-                  d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
-                ></path>
-              </svg>
-            </a>
-            <a href="#" class="navbar-component__menu__social__twitter">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="#1DA1F2"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="feather feather-twitter"
-              >
-                <path
-                  d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"
-                ></path>
-              </svg>
-            </a>
-          </div>
-        </div>
-        <div class="navbar-component__title">
-          <span class="navbar-component__title__text">UNDEFINED</span>
-        </div>
-      </nav>
-          
-
    -
    -
    - - - - diff --git a/components/rating.html b/components/rating.html deleted file mode 100644 index 8003ade..0000000 --- a/components/rating.html +++ /dev/null @@ -1,41 +0,0 @@ - - - - - - - Rating - - - - -
    -
    -
    - - rating_icon - 4.5 - -
    - 
    -          
-            <span class="rating">
-                <img
-                    src="../svgs/rating.svg"
-                    class="rating__icon"
-                    alt="rating_icon"
-                />
-                4.5
-            </span>
-          
-
    -
    -
    - - - - diff --git a/components/slider.html b/components/slider.html deleted file mode 100644 index d11cd64..0000000 --- a/components/slider.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - Slider - - - - -
    -
    -
    - -
    - 
    -          
-            <input type="range" class="slider" />
-          
-
    -
    -
    - - - - diff --git a/components/threeItemsGrid.html b/components/threeItemsGrid.html deleted file mode 100644 index e6c7aed..0000000 --- a/components/threeItemsGrid.html +++ /dev/null @@ -1,78 +0,0 @@ - - - - - - - Three Items Grid - - - -
    -
    -
    - - productLorem ipsum - Lorem ipsum dolor sit Lorem - - rating_icon - 4.5 - - ₹ 2500 - - -
    -
    - - productLorem ipsum - Lorem ipsum dolor sit Lorem - - rating_icon - 4.5 - - ₹ 2500 - - -
    -
    - - productLorem ipsum - Lorem ipsum dolor sit Lorem - - rating_icon - 4.5 - - ₹ 2500 - - -
    -
    - 
    -          
-            <div class="three-col-grid">
-                --- enter your elements here ---
-            </div> 
-          
-
    -
    - - - diff --git a/components/toast-notify-snackbar.html b/components/toast-notify-snackbar.html deleted file mode 100644 index 62c1224..0000000 --- a/components/toast-notify-snackbar.html +++ /dev/null @@ -1,61 +0,0 @@ - - - - - - - - Toast - - - -
    -
    -
    - -
    -
    -
  • - info_icon - -

    Lorem ipsum dolor sit amet.

    - Lorem, ipsum dolor sit amet consectetur adipisicing - elit. -     -
    • - -
    - 
    -            
-                <div id="snackbar-item" class="snackbar">
-                    <li class="stacked-list__item info--item">
-                    <img src="../svgs/info-alert.svg" alt="info_icon" />
-                    <span class="stacked-list__right">
-                        <h3 class="stacked-list__title">Lorem ipsum dolor sit amet.</h3>
-                        <small
-                        >Lorem, ipsum dolor sit amet consectetur adipisicing elit.</small
-                        >
-                    </span>
-                    </li>
-                    <button class="snackbar__close-btn" onclick="closeSnackbar()">
-                    <img src="../svgs/close-btn.svg" alt="close_btn" />
-                    </button>
-                </div> 
-            
-
    -
    -
    - - - - - diff --git a/components/twoItemsGrid.html b/components/twoItemsGrid.html deleted file mode 100644 index f9c9caf..0000000 --- a/components/twoItemsGrid.html +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - - Two-Items - Grid - - - -
    -
    - round_img - round_img -
    -
    - 
    -        
-          <div class="two-col-grid">
-          --- Enter your elements here ---
-          </div> 
-        
-
    -
    - - - From 0da86ad83e4106a7ef6288036e1d19ff653597a6 Mon Sep 17 00:00:00 2001 From: jugalkpatel Date: Mon, 5 Apr 2021 22:29:28 +0530 Subject: [PATCH 55/83] refactor: added gitigore --- components/.gitignore | 1 + index.html | 7 +++++-- 2 files changed, 6 insertions(+), 2 deletions(-) create mode 100644 components/.gitignore diff --git a/components/.gitignore b/components/.gitignore new file mode 100644 index 0000000..a450812 --- /dev/null +++ b/components/.gitignore @@ -0,0 +1 @@ +/*.html \ No newline at end of file diff --git a/index.html b/index.html index 8de5e53..1ce1c46 100644 --- a/index.html +++ b/index.html @@ -511,7 +511,7 @@

    plus_icon - 
    +              
                     
                 
                   <button class="floating__button">
                     <!-- put your choice of svg here -->
@@ -1360,7 +1360,10 @@ 
    
           
           
 
-          
    
+          
    
             Three Column Grid
           
    
 

From 3173fa8a47840ba2da440c434870aef3020826cb Mon Sep 17 00:00:00 2001
From: jugalkpatel 
Date: Mon, 5 Apr 2021 22:31:29 +0530
Subject: [PATCH 56/83] refactor: removed unnecessary files

---
 components/forUser.css | 49 ------------------------------------------
 postnotes.txt          |  1 -
 2 files changed, 50 deletions(-)
 delete mode 100644 components/forUser.css
 delete mode 100644 postnotes.txt

diff --git a/components/forUser.css b/components/forUser.css
deleted file mode 100644
index 790e365..0000000
--- a/components/forUser.css
+++ /dev/null
@@ -1,49 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-}
-
-:root {
-  --primary-font: Lato;
-  --font-weight: 600;
-  --primary-color: #111827;
-  --secondary-color: #fff;
-  --border-color: #e5e5e5;
-  --button-radius: 0.3rem;
-  --twitter-color: #1da1f2;
-  --facebook-color: #385898;
-  --github-color: #24292e;
-  --button-margin: 0.5rem;
-  --button-padding: 0.6rem;
-  --button-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
-    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-  --success-alert-backcolor: #c6f4d5;
-  --success-alert-fontcolor: #3bb54a;
-  --error-alert-backcolor: #fdd7d7;
-  --error-alert-fontcolor: #d1403f;
-  --warning-alert-backcolor: #feebc8;
-  --warning-alert-fontcolor: #f0c419;
-  --info-alert-backcolor: #bee3f8;
-  --info-alert-fontcolor: #447eae;
-  --alert-font-size: 1.3rem;
-  --alert-icon-margin-right: 1rem;
-  --alert-padding: 1rem;
-  --presence-color: #3aa169;
-  --badge-border-color: #fff;
-  --wish-svg-stroke: #f16565;
-  --close-svg-stroke: #e84545;
-}
-
-@import url("https://raw.githubusercontent.com/jugalkpatel/Component_Library/development/components/utils.css");
-@import url("https://raw.githubusercontent.com/jugalkpatel/Component_Library/development/components/avatar.css");
-@import url("https://raw.githubusercontent.com/jugalkpatel/Component_Library/development/components/alerts.css");
-@import url("https://raw.githubusercontent.com/jugalkpatel/Component_Library/development/components/badge.css");
-@import url("https://raw.githubusercontent.com/jugalkpatel/Component_Library/development/components/button.css");
-@import url("https://raw.githubusercontent.com/jugalkpatel/Component_Library/development/components/cards.css");
-@import url("https://raw.githubusercontent.com/jugalkpatel/Component_Library/development/components/images.css");
-@import url("https://raw.githubusercontent.com/jugalkpatel/Component_Library/development/components/navbar.css");
diff --git a/postnotes.txt b/postnotes.txt
deleted file mode 100644
index 7a8ed6f..0000000
--- a/postnotes.txt
+++ /dev/null
@@ -1 +0,0 @@
-- remove margin: auto in product-container in cards css.
\ No newline at end of file

From 7ca11311868c415e1e220367378838c898cff69c Mon Sep 17 00:00:00 2001
From: jugalkpatel 
Date: Mon, 5 Apr 2021 22:37:51 +0530
Subject: [PATCH 57/83] style: added links to nav

---
 index.html | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 1ce1c46..20cc204 100644
--- a/index.html
+++ b/index.html
@@ -17,10 +17,16 @@
             menu_icon
           
           
    
-            
-            
           
    

From da5a5e209e4fac7d73da9e30aa193b960707a0b0 Mon Sep 17 00:00:00 2001
From: jugalkpatel 
Date: Mon, 5 Apr 2021 22:39:41 +0530
Subject: [PATCH 58/83] style: added target to nav links

---
 index.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/index.html b/index.html
index 20cc204..759a4e5 100644
--- a/index.html
+++ b/index.html
@@ -20,12 +20,14 @@
             
             

From 8e0ac258a39ca297b64bed7023f4e9899123da09 Mon Sep 17 00:00:00 2001
From: jugalkpatel 
Date: Mon, 5 Apr 2021 22:47:39 +0530
Subject: [PATCH 59/83] style: center badges

---
 index.html | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 759a4e5..03e8414 100644
--- a/index.html
+++ b/index.html
@@ -231,19 +231,21 @@ 
    
 
           
           
    
-            
    
-              
-                cart
-                10
-              
-              
-                heart
-                10
-              
-              
-                bell
-                10
-              
+            
    
+              
    
+                
+                  cart
+                  10
+                
+                
+                  heart
+                  10
+                
+                
+                  bell
+                  10
+                
+              
    
             
    
             
                   

From c860b5f128b54feb06947ada40c10c5a3f13ee80 Mon Sep 17 00:00:00 2001
From: jugalkpatel 
Date: Mon, 5 Apr 2021 23:01:47 +0530
Subject: [PATCH 60/83] refactor: removed unnecessary file

---
 .vscode/settings.json | 3 ---
 1 file changed, 3 deletions(-)
 delete mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 6f3a291..0000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-    "liveServer.settings.port": 5501
-}
\ No newline at end of file

From 8dd82d8a0d26f6f71b176b5d41267c8ce5f8d18f Mon Sep 17 00:00:00 2001
From: jugalkpatel 
Date: Mon, 5 Apr 2021 23:02:35 +0530
Subject: [PATCH 61/83] refactor: removed settings.json

---
 .vscode/settings.json | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file

From 26f048ba0914d5fc1c7bfb12e43e79eafbc00be6 Mon Sep 17 00:00:00 2001
From: jugalkpatel 
Date: Mon, 5 Apr 2021 23:09:40 +0530
Subject: [PATCH 62/83] refactor: added gitignore

---
 .gitignore | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..1c9fedf
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,35 @@
+# File created using '.gitignore Generator' for Visual Studio Code: https://bit.ly/vscode-gig
+
+# Created by https://www.toptal.com/developers/gitignore/api/visualstudiocode,linux
+# Edit at https://www.toptal.com/developers/gitignore?templates=visualstudiocode,linux
+
+### Linux ###
+*~
+
+# temporary files which can be created if a process still has a handle open of a deleted file
+.fuse_hidden*
+
+# KDE directory preferences
+.directory
+
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+
+# .nfs files are created when an open file is removed but is still being accessed
+.nfs*
+
+### VisualStudioCode ###
+.vscode/*
+!.vscode/tasks.json
+!.vscode/launch.json
+*.code-workspace
+
+### VisualStudioCode Patch ###
+# Ignore all local history of files
+.history
+.ionide
+
+# End of https://www.toptal.com/developers/gitignore/api/visualstudiocode,linux
+
+# Custom rules (everything added below won't be overriden by 'Generate .gitignore File' if you use 'Update' option)
+

From 5b4f4a8d4f6535672a6324a18bea50410b771f18 Mon Sep 17 00:00:00 2001
From: jugalkpatel 
Date: Tue, 6 Apr 2021 14:39:33 +0530
Subject: [PATCH 63/83] fix: overflow of text in cards

---
 components/cards.css | 25 +++++++++++++++++++++++++
 index.html           | 10 ++++++++--
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/components/cards.css b/components/cards.css
index 3c28513..c72f0a9 100644
--- a/components/cards.css
+++ b/components/cards.css
@@ -151,6 +151,20 @@ body {
   box-shadow: var(--shadow);
 }
 
+.product-info__text {
+  display: block;
+
+  text-overflow: ellipsis;
+
+  overflow: hidden;
+
+  width: 13rem;
+
+  white-space: nowrap;
+
+  max-height: 1.5rem;
+}
+
 .product-info {
   text-decoration: none;
 
@@ -166,9 +180,20 @@ body {
 
 .product-info__small {
   display: block;
+
   font-size: var(--small-text);
+
   color: var(--small-text-color);
+
   font-weight: 500;
+
+  width: 10rem;
+
+  text-overflow: ellipsis;
+
+  overflow: hidden;
+
+  white-space: nowrap;
 }
 
 .product-info__rating {
diff --git a/index.html b/index.html
index 03e8414..94bd24f 100644
--- a/index.html
+++ b/index.html
@@ -590,6 +590,7 @@ 
    
               
    
             
    
             
+
             
    
@@ -604,9 +605,13 @@ 
    
                       src="https://source.unsplash.com/random/"
                       alt="product"
                     />
-                    Lorem ipsum
+                    lorem ipsum Lorem ipsum dolor sit amet consectetur
+                      adipisicing elit. Distinctio, veniam!
                     Lorem ipsum dolor sit LoremLorem ipsum dolor sit Lorem Lorem, ipsum dolor sit amet
+                      consectetur adipisicing elit. Quisquam, ipsa.
                     
                       rating_icon
@@ -652,6 +657,7 @@ 
    
             
    
             
             
+
             
    

From b4c37442646b1a83acfdd09ab6ec55d1d128a38b Mon Sep 17 00:00:00 2001
From: jugalkpatel 
Date: Mon, 12 Apr 2021 09:13:44 +0530
Subject: [PATCH 64/83] feat: added styles to compiled css

---
 index.css | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/index.css b/index.css
index 34c5866..1fec6ea 100644
--- a/index.css
+++ b/index.css
@@ -177,7 +177,8 @@
   display: flex;
 
   flex-direction: column;
-  margin: 1rem 0;
+  margin: 0 auto;
+  /* margin: 1rem 0; */
   /* height: 100vh; */
   /* border: 1px solid black; */
 }
@@ -204,6 +205,7 @@ div.code-toolbar {
 @media screen and (min-width: 576px) {
   .container {
     display: flex;
+    justify-content: space-between;
   }
   .sidebar {
     width: 15%;
@@ -221,7 +223,7 @@ div.code-toolbar {
     left: 19.5%;
   }
   .main {
-    padding: 1rem 3rem;
+    padding: 1rem 2rem;
   }
   .sidebar {
     display: inline-block;
@@ -237,3 +239,9 @@ div.code-toolbar {
     z-index: 2;
   }
 }
+
+@media screen and (min-width: 576px) and (max-width: ) @media screen and (min-width: 1276px) {
+  .main {
+    padding: 1rem 3rem;
+  }
+}

From 66321370f7cd512f58a97ac85eae7ee2ff107d89 Mon Sep 17 00:00:00 2001
From: jugalkpatel 
Date: Wed, 14 Apr 2021 00:11:58 +0530
Subject: [PATCH 65/83] fix: stop scroll on modal open

---
 components/badge.css           |   22 +-
 components/button.css          |    2 +-
 components/cards.css           |   60 +-
 components/compiled.css        | 1247 ++++++++++++++++++++++++++++++--
 components/modal.css           |   17 +-
 components/modal.js            |    6 +-
 index.html                     |    6 +-
 landing-page.css               |   89 +++
 landing-page.html              |   52 ++
 resources/github-landing.svg   |   32 +
 resources/landing-page-img.svg |    1 +
 resources/right-arrow.svg      |   25 +
 12 files changed, 1468 insertions(+), 91 deletions(-)
 create mode 100644 landing-page.css
 create mode 100644 landing-page.html
 create mode 100644 resources/github-landing.svg
 create mode 100644 resources/landing-page-img.svg
 create mode 100644 resources/right-arrow.svg

diff --git a/components/badge.css b/components/badge.css
index 47713d7..9e5fa95 100644
--- a/components/badge.css
+++ b/components/badge.css
@@ -7,8 +7,8 @@
   --primary-font: Lato;
   --primary-color: #111827;
   --border-color: #e5e5e5;
-  --badge-color-pink: #f16565;
   --secondary-color: #fff;
+  --badge-color-pink: #f16565;
   --badge-color-blue: #2a77f0;
 }
 
@@ -27,8 +27,9 @@
 
 .badge-div {
   display: flex;
+  padding-top: 1rem;
 
-  border-bottom: 1px solid var(--border-color);
+  /* border-bottom: 1px solid var(--border-color); */
 }
 
 .badge-icon {
@@ -38,7 +39,8 @@
 
   display: inline-block;
 
-  padding: 2rem;
+  /* padding: 1rem; */
+  margin: 1rem;
 
   border-radius: 50%;
 
@@ -46,6 +48,12 @@
 }
 
 .num-badge {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  min-width: 1.5rem;
+
   position: absolute;
 
   background-color: var(--badge-color-pink);
@@ -61,12 +69,14 @@
   font-size: 0.8rem;
   font-weight: 600;
 
-  bottom: 2.8rem;
-  right: 1rem;
+  top: -0.5rem;
+  left: 1rem;
+
+  text-align: center;
 }
 
 .cart-badge {
-  background-color: var(--badge-color-pink);
+  background-color: var(--badge-color-blue);
   color: var(--secondary-color);
 }
 
diff --git a/components/button.css b/components/button.css
index 31e2a5e..8c1e681 100644
--- a/components/button.css
+++ b/components/button.css
@@ -10,10 +10,10 @@ body {
 }
 :root {
   --primary-font: Lato;
-  --font-weight: 600;
   --primary-color: #111827;
   --secondary-color: #fff;
   --border-color: #e5e5e5;
+  --font-weight: 600;
   --button-radius: 0.3rem;
   --twitter-color: #1da1f2;
   --facebook-color: #385898;
diff --git a/components/cards.css b/components/cards.css
index c72f0a9..8915157 100644
--- a/components/cards.css
+++ b/components/cards.css
@@ -21,6 +21,7 @@ body {
   --small-text: 0.8rem;
   --small-text-color: #878787;
   --zindex-one: 1;
+  --rating-color: #388e3c;
 }
 
 /* utility */
@@ -54,7 +55,7 @@ body {
   outline: 0;
 
   position: absolute;
-  bottom: 10.5rem;
+  bottom: 11.5rem;
   right: 1.2rem;
 
   z-index: var(--zindex-one);
@@ -127,7 +128,7 @@ body {
   display: inline-flex;
   flex-direction: column;
 
-  max-width: 15rem;
+  max-width: 20rem;
 
   font-family: var(--primary-font);
   font-weight: bolder;
@@ -138,9 +139,9 @@ body {
 
   margin: 1rem;
 
-  min-height: 32rem;
+  min-height: 33rem;
 
-  height: 32rem;
+  /* height: 32rem; */
 
   /* padding: 1rem; */
 
@@ -152,17 +153,19 @@ body {
 }
 
 .product-info__text {
-  display: block;
-
-  text-overflow: ellipsis;
+  display: -webkit-box;
 
   overflow: hidden;
 
-  width: 13rem;
-
-  white-space: nowrap;
+  -webkit-box-orient: vertical;
 
-  max-height: 1.5rem;
+  -webkit-line-clamp: 2;
+  /* text-overflow: ellipsis; */
+  /* max-width: 13rem; */
+  /* width: 100%; */
+  /* white-space: nowrap; */
+  /* line-height: 1rem; */
+  /* max-height: 3rem; */
 }
 
 .product-info {
@@ -203,7 +206,7 @@ body {
 
   max-width: max-content;
 
-  background-color: var(--primary-color);
+  background-color: var(--rating-color);
   color: var(--secondary-color);
 
   font-size: var(--small-text);
@@ -222,7 +225,7 @@ body {
 }
 
 .product-info__wish-btn {
-  bottom: 10.5rem;
+  bottom: 11.5rem;
   right: 1.3rem;
   z-index: var(--zindex-one);
   cursor: pointer;
@@ -239,11 +242,7 @@ body {
 }
 
 .wish-btn--fix {
-  bottom: 10.7rem;
-}
-
-.wish-btn:hover {
-  color: red;
+  bottom: 12rem;
 }
 
 /* product card with overlay */
@@ -324,9 +323,9 @@ body {
 
   position: relative;
 
-  height: 20rem;
+  height: 15rem;
 
-  width: fit-content;
+  width: 40rem;
 
   margin: 1rem;
 
@@ -339,7 +338,7 @@ body {
 .hcard-product-info {
   display: block;
   /* height: 100%; */
-  width: 40%;
+  width: 30%;
   margin: 0;
 }
 
@@ -348,11 +347,11 @@ body {
   flex-direction: column;
   justify-content: space-evenly;
 
-  padding: 0 0 0 2rem;
+  padding: 0 0 0 1rem;
   flex-shrink: 2;
 
   border-left: 0;
-  width: 60%;
+  width: 70%;
 }
 
 .hcard-title {
@@ -406,10 +405,6 @@ body {
   margin: 1rem;
 
   border-radius: 1rem;
-  /* box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034),
-    0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06),
-    0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086),
-    0 100px 80px rgba(0, 0, 0, 0.12); */
 
   width: 20rem;
 
@@ -522,8 +517,8 @@ body {
   }
 
   .primary-btn:hover {
-    background-color: var(--secondary-color);
-    color: var(--primary-color);
+    background-color: var(--primary-color);
+    color: var(--secondary-color);
   }
 
   .heart-svg {
@@ -534,3 +529,10 @@ body {
     stroke: var(--close-svg-stroke);
   }
 }
+
+@media screen and (max-width: 720px) {
+  .primary-btn:hover {
+    background-color: var(--secondary-color);
+    color: var(--primary-color);
+  }
+}
diff --git a/components/compiled.css b/components/compiled.css
index 680282d..f8b3d55 100644
--- a/components/compiled.css
+++ b/components/compiled.css
@@ -1,4 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");
+
 * {
   box-sizing: border-box;
 }
@@ -9,12 +10,12 @@ body {
 }
 
 :root {
+  /* Common */
+  --border-color: #e5e5e5;
   --primary-font: Lato;
-  --font-weight: 600;
   --primary-color: #111827;
-  --secondary-color: #fff;
-  --border-color: #e5e5e5;
 
+  /* Alert */
   --success-alert-backcolor: #c6f4d5;
   --success-alert-fontcolor: #3bb54a;
   --error-alert-backcolor: #fdd7d7;
@@ -27,41 +28,52 @@ body {
   --alert-icon-margin-right: 1rem;
   --alert-padding: 1rem;
 
+  /* badges */
   --presence-color: #3aa169;
   --badge-border-color: #fff;
   --badge-color-pink: #f16565;
-  --secondary-color: #fff;
   --badge-color-blue: #2a77f0;
-}
-
-/* utility */
-
-.container--border {
-  border: 1px solid var(--border-color);
-  padding: 1rem 0 0rem 0;
-}
-
-.container--margin {
-  margin-bottom: 1rem;
-}
-
-.flex--container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-
-.responsive--container {
-  width: 100%;
-}
 
-.center--margin {
-  margin: 0 auto;
+  /* buttons */
+  --font-weight: 600;
+  --button-radius: 0.3rem;
+  --twitter-color: #1da1f2;
+  --facebook-color: #385898;
+  --github-color: #24292e;
+  --button-margin: 0.5rem;
+  --button-padding: 0.6rem;
+  --button-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+
+  /* cards */
+  --wish-svg-stroke: #f16565;
+  --close-svg-stroke: #e84545;
+  --shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  --small-text: 0.8rem;
+  --small-text-color: #878787;
+  --zindex-one: 1;
+  --rating-color: #388e3c;
+
+  /* lists */
+  --hover-color: #d1d5db;
+  --red-list-color: red;
+  --blue-list-color: blue;
+  --green-list-color: #4eb23a;
+  --yellow-list-color: #f7bd3b;
+
+  /* text-utilites */
+  --gray-text: #6b7280;
+
+  /* Snackbar */
+  --zindex-one: 1;
+  --zindex-two: 2;
+  --zindex-three: 3;
+  --snackbar-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+    0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
 }
 
 /* Avatar */
-
 .avatar {
   display: flex;
   flex-direction: column;
@@ -96,7 +108,7 @@ body {
   max-width: 32px;
 }
 
-/* avatar - utils */
+/* Avatar utils */
 
 .img-utils {
   margin: 1.7rem;
@@ -104,7 +116,7 @@ body {
   border-radius: 50%;
 }
 
-/* Alerts */
+/* Alert */
 
 .alerts {
   width: 100%;
@@ -145,7 +157,8 @@ body {
   color: var(--info-alert-fontcolor);
 }
 
-/* Badges */
+/* badges */
+
 .badge-icon-container,
 .avatar-container {
   display: flex;
@@ -161,8 +174,9 @@ body {
 
 .badge-div {
   display: flex;
+  padding-top: 1rem;
 
-  border-bottom: 1px solid var(--border-color);
+  /* border-bottom: 1px solid var(--border-color); */
 }
 
 .badge-icon {
@@ -172,7 +186,8 @@ body {
 
   display: inline-block;
 
-  padding: 2rem;
+  /* padding: 1rem; */
+  margin: 1rem;
 
   border-radius: 50%;
 
@@ -180,6 +195,12 @@ body {
 }
 
 .num-badge {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  min-width: 1.5rem;
+
   position: absolute;
 
   background-color: var(--badge-color-pink);
@@ -195,12 +216,14 @@ body {
   font-size: 0.8rem;
   font-weight: 600;
 
-  bottom: 2.8rem;
-  right: 1rem;
+  top: -0.5rem;
+  left: 1rem;
+
+  text-align: center;
 }
 
 .cart-badge {
-  background-color: var(--badge-color-pink);
+  background-color: var(--badge-color-blue);
   color: var(--secondary-color);
 }
 
@@ -213,7 +236,7 @@ body {
   align-items: center;
 }
 
-/* avatar component with Badge */
+/* avatar with badges component */
 
 .avatar-comp {
   position: relative;
@@ -279,16 +302,1146 @@ body {
   border-radius: 50%;
 }
 
-/* Alerts Media Queries */
+/* Buttons */
+/* primary button */
+.button__primary {
+  display: inline-block;
+  background-color: var(--secondary-color);
 
-@media screen and (max-width: 620px) {
-  .alerts--common {
-    margin: 0 1rem 0 1rem;
-  }
+  color: var(--primary-color);
+
+  border: 1.8px solid var(--primary-color);
+
+  padding: var(--button-padding);
+
+  margin: var(--button-margin);
+
+  font-family: var(--primary-font);
+  font-weight: var(--font-weight);
+
+  outline: var(--primary-color);
+
+  cursor: pointer;
 }
+/* secondary button */
+.button__secondary {
+  display: inline-block;
 
-@media screen and (min-width: 620px) {
-  .alert--reduce-width {
-    width: 50%;
+  background-color: var(--primary-color);
+
+  color: var(--secondary-color);
+
+  border: 1.8px solid var(--primary-color);
+
+  padding: var(--button-padding);
+
+  margin: var(--button-margin);
+
+  font-family: var(--primary-font);
+  font-weight: var(--font-weight);
+
+  cursor: pointer;
+
+  outline: var(--primary-color);
+  box-shadow: var(--button-shadow);
+}
+
+/* round button utility */
+
+.button--round {
+  border-radius: var(--button-radius);
+}
+
+/* Link Button */
+
+.button__link-button {
+  text-decoration: none;
+
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
+  /* display: inline-block; */
+
+  text-align: center;
+
+  padding: var(--button-padding);
+
+  margin: var(--button-margin);
+
+  background-color: var(--primary-color);
+
+  color: var(--secondary-color);
+
+  border: 1px solid var(--primary-color);
+
+  font-family: var(--primary-font);
+  font-weight: var(--font-weight);
+
+  max-width: max-content;
+
+  height: max-content;
+
+  box-shadow: var(--button-shadow);
+}
+
+.svg--right-margin {
+  margin-right: 0.3rem;
+}
+
+/* icon button */
+.icon__button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
+  outline: var(--primary-color);
+
+  /* border: 1px solid var(--primary-color); */
+
+  background-color: var(--primary-color);
+
+  border: 0;
+
+  color: white;
+
+  box-shadow: var(--button-shadow);
+
+  /* color: var(--secondary-color); */
+
+  padding: var(--button-padding);
+
+  margin: var(--button-margin);
+
+  border-radius: 0.3rem;
+
+  cursor: pointer;
+}
+
+/* floating button */
+.floating__button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
+  outline: var(--primary-color);
+
+  background-color: var(--primary-color);
+
+  border: 0;
+
+  padding: var(--button-padding);
+
+  display: flex;
+  justify-content: center;
+
+  box-shadow: var(--button-shadow);
+
+  margin: var(--button-margin);
+
+  border-radius: 50%;
+
+  cursor: pointer;
+}
+
+/* utilities for twitter, facebook and github buttons */
+.twitter--btn {
+  background-color: var(--twitter-color);
+  color: var(--secondary-color);
+
+  border: 1px solid var(--twitter-color);
+}
+
+.facebook--btn {
+  background-color: var(--facebook-color);
+  color: var(--secondary-color);
+
+  border: 1px solid var(--facebook-color);
+}
+
+.github--btn {
+  background-color: var(--github-color);
+  color: var(--secondary-color);
+
+  border: 1px solid var(--github-color);
+}
+
+/* Cards */
+/* utility */
+
+.product-img {
+  width: 100%;
+  object-fit: cover;
+  object-position: center;
+  height: 20rem;
+}
+
+.distance-margin {
+  margin: 2rem;
+}
+
+.font-family {
+  font-family: var(--primary-font);
+}
+
+.wish-btn {
+  display: inline-block;
+
+  align-self: flex-end;
+
+  width: fit-content;
+
+  padding: 0;
+
+  background-color: transparent;
+  border: 0;
+  outline: 0;
+
+  position: absolute;
+  bottom: 11.5rem;
+  right: 1.2rem;
+
+  z-index: var(--zindex-one);
+  /* cursor: progress; */
+}
+
+.heart-svg:hover {
+  stroke: var(--wish-svg-stroke);
+}
+
+.close-btn {
+  display: inline-block;
+
+  width: fit-content;
+
+  padding: 0;
+
+  background-color: transparent;
+  border: 0;
+  outline: 0;
+
+  position: absolute;
+  top: 1.6rem;
+  left: 1rem;
+
+  z-index: var(--zindex-one);
+
+  /* cursor: progress; */
+}
+
+.svg-close:hover {
+  stroke: var(--close-svg-stroke);
+}
+
+.primary-btn {
+  background-color: var(--secondary-color);
+
+  border: 1.8px solid var(--primary-color);
+
+  padding: 0.6rem;
+
+  font-family: var(--primary-font);
+  font-weight: 900;
+
+  border-radius: 0.1rem;
+
+  outline: var(--primary-color);
+
+  cursor: pointer;
+}
+
+.primary-btn:hover {
+  background-color: var(--primary-color);
+  color: var(--secondary-color);
+}
+
+/* cards-container */
+
+.cards-container {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  /* align-items: center; */
+  width: 100%;
+  /* justify-content: space-evenly; */
+}
+
+/* product card */
+.product-container {
+  display: inline-flex;
+  flex-direction: column;
+
+  max-width: 20rem;
+
+  font-family: var(--primary-font);
+  font-weight: bolder;
+
+  position: relative;
+
+  padding: 1rem;
+
+  margin: 1rem;
+
+  min-height: 33rem;
+
+  /* height: 32rem; */
+
+  /* padding: 1rem; */
+
+  /* border: 1px solid black; */
+}
+
+.product-container:hover {
+  box-shadow: var(--shadow);
+}
+
+.product-info__text {
+  display: -webkit-box;
+
+  overflow: hidden;
+
+  -webkit-box-orient: vertical;
+
+  -webkit-line-clamp: 2;
+  /* text-overflow: ellipsis; */
+  /* max-width: 13rem; */
+  /* width: 100%; */
+  /* white-space: nowrap; */
+  /* line-height: 1rem; */
+  /* max-height: 3rem; */
+}
+
+.product-info {
+  text-decoration: none;
+
+  color: var(--primary-color);
+  font-size: 1.2rem;
+
+  margin: 5px 0;
+}
+
+.product-info__img {
+  height: 20rem;
+}
+
+.product-info__small {
+  display: block;
+
+  font-size: var(--small-text);
+
+  color: var(--small-text-color);
+
+  font-weight: 500;
+
+  width: 10rem;
+
+  text-overflow: ellipsis;
+
+  overflow: hidden;
+
+  white-space: nowrap;
+}
+
+.product-info__rating {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  max-width: max-content;
+
+  background-color: var(--rating-color);
+  color: var(--secondary-color);
+
+  font-size: var(--small-text);
+  text-align: center;
+
+  padding: 0.15rem 0.3rem;
+
+  border-radius: 0.2rem;
+
+  margin: 0.5rem;
+  margin-left: 0;
+}
+
+.svg__rating {
+  margin-right: 5px;
+}
+
+.product-info__wish-btn {
+  bottom: 11.5rem;
+  right: 1.3rem;
+  z-index: var(--zindex-one);
+  cursor: pointer;
+}
+
+.price-tag {
+  display: block;
+
+  margin: 3px 0;
+
+  font-size: 1.1rem;
+
+  font-weight: 900;
+}
+
+.wish-btn--fix {
+  bottom: 12rem;
+}
+
+/* product card with overlay */
+
+.overlay-div {
+  background: rgba(255, 255, 255, 0.5);
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  padding: 1rem;
+
+  width: 100%;
+  height: 100%;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.overlay-text {
+  position: absolute;
+
+  height: fit-content;
+
+  color: var(--primary-color);
+
+  top: 8rem;
+}
+
+/* text card */
+
+.text-card {
+  display: inline-flex;
+  flex-direction: column;
+
+  padding: 1rem;
+
+  border: 1px solid var(--primary-color);
+  border-radius: 0.3rem;
+
+  color: var(--secondary-color);
+
+  /* max-height: 9rem; */
+
+  width: fit-content;
+  max-width: 20rem;
+
+  margin: 1rem;
+
+  background-color: var(--primary-color);
+}
+
+.text-card-title {
+  font-family: var(--primary-font);
+
+  margin: 0;
+
+  padding: 0.5rem 0;
+
+  border-bottom: 1px solid var(--primary-color);
+}
+
+.text-card-info {
+  margin: 0.5rem 0;
+
+  font-family: var(--primary-font);
+}
+
+/* horizontal card  */
+
+.horizontal-product-container {
+  display: inline-flex;
+
+  font-family: var(--primary-font);
+  font-weight: bolder;
+
+  position: relative;
+
+  height: 15rem;
+
+  width: 40rem;
+
+  margin: 1rem;
+
+  box-shadow: var(--shadow);
+
+  padding: 1rem;
+  border: 1px solid var(--primary-color);
+}
+
+.hcard-product-info {
+  display: block;
+  /* height: 100%; */
+  width: 30%;
+  margin: 0;
+}
+
+.second-horizontal-section {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+
+  padding: 0 0 0 1rem;
+  flex-shrink: 2;
+
+  border-left: 0;
+  width: 70%;
+}
+
+.hcard-title {
+  margin: 0;
+}
+
+.hcard-img {
+  height: 100%;
+  object-fit: cover !important;
+}
+
+.hcard-title-desc {
+  font-weight: 100;
+}
+
+.hcard-price {
+  margin: 0.5rem 0;
+}
+
+.horizontal-primary-btn {
+  display: inline-block;
+
+  font-size: 0.7rem;
+
+  width: 10rem;
+}
+
+.hcard-product-desc {
+  margin: 0.3rem 0;
+
+  font-weight: 200;
+  font-size: 1rem;
+}
+
+.hcard-wish-btn {
+  position: absolute;
+  top: 2rem;
+  right: 2rem;
+  width: fit-content;
+  height: 1.5rem;
+}
+
+/* shadow card */
+
+.shadow_card {
+  display: inline-flex;
+  flex-direction: column;
+
+  height: 30rem;
+
+  margin: 1rem;
+
+  border-radius: 1rem;
+
+  width: 20rem;
+
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+.shadow_card__productimgLink {
+  /* display: block; */
+  margin: 0;
+  height: 50%;
+}
+
+.shadow_card__productimg {
+  display: block;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+.shadow_card__product-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  background-color: var(--secondary-color);
+  color: var(--primary-color);
+
+  padding: 1rem;
+
+  height: 50%;
+
+  position: relative;
+}
+
+.shadow_card__product-title {
+  margin: 0;
+
+  font-family: var(--primary-font);
+}
+
+.shadow_card__product-rating__title {
+  display: block;
+
+  font-weight: 700;
+}
+
+.shadow_card--wishbtn {
+  display: inline-block;
+
+  align-self: flex-end;
+
+  width: fit-content;
+
+  padding: 0;
+
+  background-color: transparent;
+  border: 0;
+  outline: 0;
+
+  position: absolute;
+
+  top: 1rem;
+  right: 1rem;
+}
+
+/* images */
+
+.img-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  /* padding: 1rem; */
+}
+
+.img-container__simple-img,
+.img-container__round-img {
+  width: 100%;
+  height: 25rem;
+  margin: auto;
+}
+
+.responsive-img {
+  width: 100%;
+  object-fit: cover;
+  object-position: center;
+  height: 100%;
+}
+
+.img-round {
+  border-radius: 50%;
+}
+
+.img-container--border {
+  border: 1px solid var(--border-color);
+  padding: 1rem 0 0 0;
+}
+
+.img-container--margin {
+  margin-bottom: 1rem;
+}
+
+/* lists */
+/* spaced-list */
+
+.spaced-list {
+  list-style-type: none;
+
+  margin: 1rem;
+
+  padding: 1rem;
+
+  border: 1px solid var(--border-color);
+}
+
+.spaced-list__item {
+  padding: 0.5rem;
+
+  margin: 0.5rem;
+
+  font-family: var(--primary-font);
+  font-size: 1rem;
+
+  color: var(--primary-color);
+}
+
+/* stacked-list */
+
+.stacked-list {
+  list-style-type: none;
+
+  margin: 1rem;
+
+  padding: 1rem;
+
+  border: 1px solid var(--border-color);
+}
+
+.stacked-list__item {
+  display: flex;
+  padding: 1rem;
+
+  font-family: var(--primary-font);
+
+  color: var(--primary-color);
+
+  /* border: 1px solid var(--primary-color); */
+
+  margin: 1rem;
+}
+
+.stacked-list__title {
+  margin: 0;
+}
+
+.stacked-list__right {
+  display: inline-block;
+  margin-left: 1rem;
+}
+
+.info--item {
+  border-left: 5px solid var(--blue-list-color);
+}
+
+.error--item {
+  border-left: 5px solid var(--red-list-color);
+}
+
+.warning--item {
+  border-left: 5px solid var(--yellow-list-color);
+}
+
+.success--item {
+  border-left: 5px solid var(--green-list-color);
+}
+
+/* Navbar */
+.navbar-component {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  position: relative;
+  padding: 0 1rem 0 1rem;
+}
+
+.navbar-component__title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+
+  padding: 1rem;
+  padding-top: 0;
+
+  border-bottom: 3px solid var(--primary-color);
+
+  color: var(--primary-color);
+
+  font-family: var(--primary-font);
+  font-size: 1.3rem;
+  font-weight: 700;
+}
+
+.navbar-component__menu {
+  display: flex;
+  justify-content: space-between;
+
+  width: 100%;
+
+  padding: 1rem;
+}
+
+.navbar-component__menu__btn {
+  display: inline-block;
+  width: fit-content;
+
+  padding: 0;
+
+  background-color: transparent;
+
+  border: 0;
+
+  outline: 0;
+
+  cursor: pointer;
+}
+
+.navbar-component__menu__social__twitter,
+.navbar-component__menu__social__github {
+  display: inline-block;
+  margin: 0 0.1rem;
+}
+
+.navbar-component__title__text {
+  cursor: pointer;
+}
+
+/* Modal */
+.modal {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+
+  width: 100vw;
+  height: 100vh;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  visibility: hidden;
+
+  background: var(--modal-background);
+
+  z-index: var(--zindex-five);
+}
+
+.modal--show {
+  visibility: visible;
+}
+
+/* Modal Article */
+
+.modal__article {
+  display: inline-flex;
+  flex-direction: column;
+  padding: 1.5rem;
+  background-color: var(--primary-color);
+  margin: 2rem;
+  width: fit-content;
+  max-width: 25rem;
+  border-radius: 0.5rem;
+}
+
+.modal__article__header {
+  color: var(--secondary-color);
+  font-family: var(--primary-font);
+
+  display: flex;
+  justify-content: space-between;
+
+  margin-bottom: 1rem;
+}
+
+.modal__close-btn {
+  display: inline-block;
+
+  width: fit-content;
+
+  padding: 0;
+
+  background-color: transparent;
+  border: 0;
+  outline: 0;
+}
+
+.modal__article__header__text {
+  margin: 0;
+}
+
+.modal__article__info {
+  color: var(--secondary-color);
+
+  font-family: var(--primary-font);
+
+  text-align: justify;
+}
+
+.modal__article__footer {
+  display: flex;
+  margin-top: 1rem;
+  justify-content: flex-end;
+}
+
+/* Rating */
+
+.rating {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  max-width: max-content;
+
+  background-color: var(--primary-color);
+  color: var(--secondary-color);
+
+  font-size: var(--small-text);
+  text-align: center;
+
+  font-family: var(--primary-font);
+
+  padding: 0.3rem;
+
+  border-radius: 0.2rem;
+
+  margin: 0.5rem;
+
+  font-weight: 900;
+}
+
+.rating__icon {
+  margin-right: 3px;
+}
+
+/* Three-col Grid */
+.three-col-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  justify-items: center;
+}
+
+/* Two-col Grid */
+.two-col-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  justify-items: center;
+}
+
+/* Text Utilites */
+/* Heading */
+.heading {
+  color: var(--primary-color);
+
+  font-family: var(--primary-font);
+
+  max-width: fit-content;
+}
+
+/* Small Text */
+.small-text {
+  color: var(--primary-color);
+
+  font-family: var(--primary-font);
+
+  font-size: 0.75rem;
+
+  max-width: fit-content;
+}
+
+/* Gray Text */
+.gray-text {
+  color: var(--gray-text);
+
+  font-family: var(--primary-font);
+
+  width: fit-content;
+}
+
+.spaced-list__item--center {
+  text-align: center;
+}
+
+/* Snackbar */
+
+.snackbar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  position: fixed;
+  bottom: 0;
+
+  box-shadow: var(--snackbar-shadow);
+
+  padding-right: 1rem;
+
+  margin: 0.5rem;
+
+  visibility: hidden;
+
+  background-color: var(--secondary-color);
+
+  z-index: var(--zindex-two);
+}
+
+.snackbar .stacked-list__item {
+  margin: 0;
+}
+
+.snackbar--show {
+  visibility: visible;
+}
+
+.snackbar--hide {
+  visibility: hidden;
+}
+
+.snackbar__close-btn {
+  display: inline-block;
+
+  width: fit-content;
+
+  padding: 0;
+
+  background-color: transparent;
+  border: 0;
+  outline: 0;
+
+  z-index: var(--zindex-three);
+
+  /* cursor: progress; */
+}
+
+/* Media Queries */
+
+/* Alerts */
+@media screen and (max-width: 620px) {
+  .alerts--common {
+    margin: 0 1rem 0 1rem;
+  }
+}
+
+@media screen and (min-width: 620px) {
+  .alert--reduce-width {
+    width: 50%;
+  }
+}
+
+/* buttons */
+
+@media screen and (min-width: 576px) {
+  .button__primary:hover {
+    background-color: var(--primary-color);
+    color: var(--secondary-color);
+  }
+}
+
+/* cards */
+@media screen and (max-width: 780px) {
+  .distance-margin {
+    margin: 0.5rem;
+  }
+  /* horizontal card */
+  .horizontal-product-container {
+    margin: 0.5rem;
+
+    width: 90%;
+
+    height: 11rem;
+
+    padding: 1rem;
+  }
+
+  .hcard-product-desc {
+    display: none;
+  }
+
+  .hcard-product-info {
+    width: 35%;
+  }
+
+  .horizontal-primary-btn {
+    width: 80%;
+    height: 25%;
+  }
+
+  .second-horizontal-section {
+    justify-content: space-around;
+    padding-left: 1rem;
+  }
+
+  .hcard-wish-btn {
+    top: 1rem;
+    right: 1rem;
+  }
+
+  .primary-btn:hover {
+    background-color: var(--primary-color);
+    color: var(--secondary-color);
+  }
+
+  .heart-svg {
+    stroke: var(--wish-svg-stroke);
+  }
+
+  .svg-close {
+    stroke: var(--close-svg-stroke);
+  }
+}
+
+@media screen and (max-width: 720px) {
+  .primary-btn:hover {
+    background-color: var(--secondary-color);
+    color: var(--primary-color);
+  }
+}
+
+/* Images */
+
+@media screen and (min-width: 450px) {
+  .img-container__simple-img,
+  .img-container__round-img {
+    width: 25rem;
+  }
+}
+
+/* lists */
+@media screen and (min-width: 576px) {
+  .spaced-list__item:hover {
+    background-color: var(--hover-color);
+  }
+  .stacked-list__item:hover {
+    background-color: var(--hover-color);
+  }
+}
+
+/* navbar */
+@media screen and (min-width: 576px) {
+  .navbar-component {
+    padding: 0 2rem 0 2rem;
+  }
+  .navbar-component__title {
+    position: absolute;
+    top: 1rem;
+    width: 90%;
+    border: 0;
+    padding-bottom: 0;
+  }
+
+  .navbar-component__menu {
+    padding-left: 0;
+    padding-right: 0;
+    z-index: 1;
+    border-bottom: 3px solid var(--primary-color);
+  }
+  .navbar-component__title__text {
+    z-index: 2;
+  }
+}
+
+/* Modal */
+@media screen and (min-width: 576px) {
+  .modal__container .language-markup {
+    height: 10rem;
+    overflow-x: hidden;
+  }
+}
+
+/* Grids */
+
+/* Three-col */
+@media screen and (min-width: 820px) {
+  .three-col-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+/* SnackBar */
+@media screen and (min-width: 576px) {
+  .snackbar {
+    max-width: 30rem;
+    bottom: 0;
+    right: 0;
   }
 }
diff --git a/components/modal.css b/components/modal.css
index 948574d..6e7cb3c 100644
--- a/components/modal.css
+++ b/components/modal.css
@@ -1,7 +1,7 @@
-@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");
-@import url("../resources/prism.css");
-@import url("./utils.css");
-@import url("./button.css");
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
+@import url('../resources/prism.css');
+@import url('./utils.css');
+@import url('./button.css');
 * {
   box-sizing: border-box;
 }
@@ -32,18 +32,27 @@ body {
   position: fixed;
   top: 0;
   left: 0;
+  right: 0;
+  bottom: 0;
 
   visibility: hidden;
 
   background: var(--modal-background);
 
   z-index: var(--zindex-five);
+
+  overflow: auto;
 }
 
 .modal--show {
   visibility: visible;
 }
 
+/* stop scrolling */
+.stop--scroll {
+  overflow: hidden;
+}
+
 /* Modal Article */
 
 .modal__article {
diff --git a/components/modal.js b/components/modal.js
index fbdb2e9..4e1ce57 100644
--- a/components/modal.js
+++ b/components/modal.js
@@ -1,8 +1,12 @@
 function showModal() {
     let modal = document.getElementById("modal");
+    let body = document.getElementById("body");
+    console.log(body);
+    body.classList.add("stop--scroll");
     modal.classList.toggle('modal--show');
 }
 
 function closeModal() {
+    body.classList.remove("stop--scroll");
     modal.classList.remove("modal--show");
-}
\ No newline at end of file
+}
diff --git a/index.html b/index.html
index 94bd24f..0140f99 100644
--- a/index.html
+++ b/index.html
@@ -4,11 +4,11 @@
     
     
     
-    Satori
+    Satori UI
     
     
   
-  
+  
     
    
       
       
    
         
diff --git a/landing-page.css b/landing-page.css
new file mode 100644
index 0000000..d14c701
--- /dev/null
+++ b/landing-page.css
@@ -0,0 +1,89 @@
+@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");
+@import url("./index.css");
+@import url("./components/button.css");
+@import url("./components/images.css");
+
+* {
+  box-sizing: border-box;
+
+  margin: 0;
+
+  scrollbar-width: thin;
+}
+
+:root {
+  --primary-font: Lato;
+  --primary-color: #111827;
+  --border-color: #e5e5e5;
+  --secondary-color: #fff;
+}
+
+.landing-page {
+  padding: 0 1rem;
+}
+
+.landing-page .navbar {
+  border-bottom: 3px solid var(--primary-color);
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 0;
+}
+
+.landing-page .navbar__title {
+  justify-content: flex-start;
+  border: 0;
+  padding: 0;
+  max-width: max-content;
+}
+
+.navbar__navigation .button__link-button {
+  background-color: transparent;
+  border: 0;
+  color: var(--primary-color);
+  box-shadow: none;
+}
+
+.landing-page .navbar__navigation {
+  display: flex;
+  /* justify-content: center; */
+  align-items: center;
+  max-width: fit-content;
+}
+
+.landing-page .navbar__menu__social__github {
+  padding: 0.3rem;
+  margin: 0.4rem;
+  margin-right: 0;
+}
+
+.landing-page .responsive-img {
+  object-fit: contain;
+}
+
+.landing-page__content {
+  font-size: 1rem;
+}
+
+.landing-page__content__buttons {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.landing-page__content .button__link-button {
+  display: flex;
+  /* align-content: center; */
+  /* width: 100%; */
+  cursor: pointer;
+}
+
+.landing-page__content .svg--right-margin {
+  display: block;
+  margin-left: 0.5rem;
+}
+
+.button__github {
+  color: var(--primary-color);
+  background-color: var(--secondary-color);
+}
diff --git a/landing-page.html b/landing-page.html
new file mode 100644
index 0000000..9a9649a
--- /dev/null
+++ b/landing-page.html
@@ -0,0 +1,52 @@
+
+
+  
+    
+    
+    
+    Satori UI
+    
+    
+  
+  
+    
    
+      
+      
    
+        
    
+          landing-page__img
+        
    
+        
    
+          
+            Get Started
+            
+              right_arrow
+            
+          
+          
+            Download
+          
+        
    
+      
    
+    
    
+  
+
diff --git a/resources/github-landing.svg b/resources/github-landing.svg
new file mode 100644
index 0000000..4edc487
--- /dev/null
+++ b/resources/github-landing.svg
@@ -0,0 +1,32 @@
+
+
+	
+		
+			
+				
+				
+				
+				
+				
+				
+				
+				
+			
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+	
+
diff --git a/resources/landing-page-img.svg b/resources/landing-page-img.svg
new file mode 100644
index 0000000..7344e2f
--- /dev/null
+++ b/resources/landing-page-img.svg
@@ -0,0 +1 @@
+experience design
\ No newline at end of file
diff --git a/resources/right-arrow.svg b/resources/right-arrow.svg
new file mode 100644
index 0000000..874e4b7
--- /dev/null
+++ b/resources/right-arrow.svg
@@ -0,0 +1,25 @@
+
+
+	
+		
+			
+				
+			
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+	
+

From f1ba26e5281a4edba97feb8c022475f7db2ca420 Mon Sep 17 00:00:00 2001
From: jugalkpatel 
Date: Sun, 18 Apr 2021 16:28:03 +0530
Subject: [PATCH 66/83] refactor:  change height of the cards

---
 components/cards.css |  46 +++++++++----------
 index.html           | 107 +++++++++++++++++++++++++------------------
 2 files changed, 85 insertions(+), 68 deletions(-)

diff --git a/components/cards.css b/components/cards.css
index 8915157..96998bf 100644
--- a/components/cards.css
+++ b/components/cards.css
@@ -1,6 +1,6 @@
-@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");
-@import url("../resources/prism.css");
-@import url("./utils.css");
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
+@import url('../resources/prism.css');
+@import url('./utils.css');
 * {
   box-sizing: border-box;
 }
@@ -21,6 +21,7 @@ body {
   --small-text: 0.8rem;
   --small-text-color: #878787;
   --zindex-one: 1;
+  --zindex-two: 2;
   --rating-color: #388e3c;
 }
 
@@ -55,11 +56,11 @@ body {
   outline: 0;
 
   position: absolute;
-  bottom: 11.5rem;
-  right: 1.2rem;
+  right: 0.3rem;
+  bottom: 0.3rem;
 
-  z-index: var(--zindex-one);
-  /* cursor: progress; */
+  z-index: var(--zindex-two);
+  cursor: pointer;
 }
 
 .heart-svg:hover {
@@ -78,12 +79,12 @@ body {
   outline: 0;
 
   position: absolute;
-  top: 1.6rem;
-  left: 1rem;
+  top: 0;
+  left: 0;
 
-  z-index: var(--zindex-one);
+  z-index: var(--zindex-two);
 
-  /* cursor: progress; */
+  cursor: pointer;
 }
 
 .svg-close:hover {
@@ -139,8 +140,7 @@ body {
 
   margin: 1rem;
 
-  min-height: 33rem;
-
+  max-height: 35rem;
   /* height: 32rem; */
 
   /* padding: 1rem; */
@@ -148,6 +148,11 @@ body {
   /* border: 1px solid black; */
 }
 
+.product__img__container {
+  display: block;
+  position: relative;
+}
+
 .product-container:hover {
   box-shadow: var(--shadow);
 }
@@ -224,13 +229,6 @@ body {
   margin-right: 5px;
 }
 
-.product-info__wish-btn {
-  bottom: 11.5rem;
-  right: 1.3rem;
-  z-index: var(--zindex-one);
-  cursor: pointer;
-}
-
 .price-tag {
   display: block;
 
@@ -241,10 +239,6 @@ body {
   font-weight: 900;
 }
 
-.wish-btn--fix {
-  bottom: 12rem;
-}
-
 /* product card with overlay */
 
 .overlay-div {
@@ -469,6 +463,10 @@ body {
 
   top: 1rem;
   right: 1rem;
+
+  z-index: var(--zindex-two);
+
+  cursor: pointer;
 }
 
 /* fix overflow of the code block */
diff --git a/index.html b/index.html
index 0140f99..54bf5dc 100644
--- a/index.html
+++ b/index.html
@@ -545,11 +545,17 @@ 
    
               
    
                 
    
                   
-                    productLorem ipsum
+                    
+                      product
+                      
+                    
+                    Lorem ipsum
                     Lorem ipsum dolor sit Lorem
@@ -558,9 +564,6 @@ 
    
                       4.5
                     
                     ₹ 2500
-                    
                   
                 
    
               
    
@@ -570,20 +573,23 @@ 
    
                 
                   <div class="product-container">
                     <a href="#" class="product-info">
-                      <img
-                        class="product-img product-info__img"
-                        src="https://unsplash.it/200/300"
-                        alt="product"
-                      />Lorem ipsum
+                      <span class="product__img__container">
+                        <img
+                          class="product-img product-info__img"
+                          src="https://source.unsplash.com/random/"
+                          alt="product"
+                        />
+                        <button class="wish-btn">
+                          <img src="./svgs/product-wish.svg" alt="wish_btn" />
+                        </button>
+                      </span>
+                      Lorem ipsum
                       <span class="product-info__small">Lorem ipsum dolor sit Lorem</span>
                       <span class="product-info__rating">
                         <img src="./svgs/rating.svg" alt="rating_icon" />
                         4.5
                       </span>
                       <span class="price-tag">₹ 2500</span>
-                      <button class="wish-btn product-info__wish-btn">
-                        <img src="./svgs/product-wish.svg" alt="wish_btn" />
-                      </button>
                     </a>
                 </div>
                 
@@ -596,15 +602,21 @@ 
    
             >
               
    
                 
    
-                  
                   
-                    product
+                    
+                      
+                      product
+                      
+                    
+
                     lorem ipsum Lorem ipsum dolor sit amet consectetur
                       adipisicing elit. Distinctio, veniam!
                     
                     Rs. 250
-                  
+
                   
                 
    
               
    
@@ -629,15 +639,21 @@ 
    
               
                     
                   <div class="product-container">
-                      <button class="close-btn">
-                        <img src="./svgs/close-btn.svg" alt="close_btn" />
-                      </button>
+                      
                       <a href="#" class="product-info">
+                      <span class="product__img__container">
+                        <button class="close-btn">
+                          <img src="./svgs/close-btn.svg" alt="close_btn" />
+                        </button>
                         <img
-                          class="product-img"
-                          src="https://unsplash.it/200/300"
+                          class="product-img product-info__img"
+                          src="https://source.unsplash.com/random/"
                           alt="product"
                         />
+                        <button class="wish-btn">
+                          <img src="./svgs/product-wish.svg" alt="wish_btn" />
+                        </button>
+                      </span>
                         Lorem ipsum
                         <span class="product-info__small"
                           >Lorem ipsum dolor sit Lorem</span
@@ -648,9 +664,7 @@ 
    
                         </span>
                         <span class="price-tag">Rs. 250</span></a
                       >
-                      <button class="wish-btn wish-btn--fix">
-                        <img src="./svgs/wish-btn.svg" alt="wish-btn" />
-                      </button>
+                      
                       <button class="primary-btn">ADD TO CART</button>
                   </div> 
                 
@@ -664,15 +678,20 @@ 
    
               
    
                 
    
                   
-                    productLorem ipsum Rs. 250
-                  
+                    
+                      product
+                      
+                    
+                    Lorem ipsum
+                    Rs. 250
+                  
+
                   
                   
    
                     
    
-        
    
-          
-            Get Started
-            
-              right_arrow
-            
-          
-          
-            Download
-          
+        
    
+          
    
+            A Modern CSS Component Library for Building Good Projects.
+          
    
+          
    
+            
+              Get Started
+            
+            
+              Download
+            
+          
    
         
    
       
    
     
    
diff --git a/resources/avatar-svgrepo-com.svg b/resources/avatar-svgrepo-com.svg
deleted file mode 100644
index fcf1007..0000000
--- a/resources/avatar-svgrepo-com.svg
+++ /dev/null
@@ -1,125 +0,0 @@
-
-
-
-
-	
-	
-		
-			
-			
-			
-			
-			
-			
-			
-			
-			
-			
-			
-			
-			
-			
-			
-			
-			
-			
-			
-			
-			
-			
-		
-		
-			
-				
-					
-					
-					
-					
-					
-					
-					
-					
-					
-					
-					
-				
-			
-		
-		
-		
-	
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/resources/iconfinder_christmas_line-15_2636386.svg b/resources/iconfinder_christmas_line-15_2636386.svg
deleted file mode 100644
index 8842f02..0000000
--- a/resources/iconfinder_christmas_line-15_2636386.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
\ No newline at end of file
diff --git a/resources/resources.zip b/resources/resources.zip
new file mode 100644
index 0000000000000000000000000000000000000000..9ef26cb0c5f60b404ebe52b38a0f5a353cafc5c7
GIT binary patch
literal 61238
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
JO-sLC{TCU{#2Ekp

literal 0
HcmV?d00001

diff --git a/resources/right-arrow.svg b/resources/right-arrow.svg
deleted file mode 100644
index 874e4b7..0000000
--- a/resources/right-arrow.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-	
-		
-			
-				
-			
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-	
-
diff --git a/resources/shopping-cart.svg b/resources/shopping-cart.svg
deleted file mode 100644
index 05881ba..0000000
--- a/resources/shopping-cart.svg
+++ /dev/null
@@ -1,56 +0,0 @@
-
-
-
-
-	
-		
-			
-			
-			
-		
-	
-
-
-	
-		
-	
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

From 413dc9c30c478e15be83b7daf5f506329648cabf Mon Sep 17 00:00:00 2001
From: jugalkpatel 
Date: Sun, 18 Apr 2021 20:02:35 +0530
Subject: [PATCH 69/83] style: added cursor in lists

---
 components/lists.css | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/lists.css b/components/lists.css
index 82ad98d..728c0b2 100644
--- a/components/lists.css
+++ b/components/lists.css
@@ -1,6 +1,6 @@
-@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");
-@import url("../resources/prism.css");
-@import url("./utils.css");
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
+@import url('../resources/prism.css');
+@import url('./utils.css');
 
 * {
   box-sizing: border-box;
@@ -44,6 +44,8 @@ body {
   font-size: 1rem;
 
   color: var(--primary-color);
+
+  cursor: pointer;
 }
 
 /* stacked-list */

From 2f8ebf9728e777097f0bd4719e43dc05990fb115 Mon Sep 17 00:00:00 2001
From: jugalkpatel 
Date: Sun, 18 Apr 2021 23:03:52 +0530
Subject: [PATCH 70/83] refactor: change padding and font-size

---
 components/badge.css  | 4 ++--
 components/inputs.css | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/badge.css b/components/badge.css
index 9e5fa95..62afea8 100644
--- a/components/badge.css
+++ b/components/badge.css
@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter&family=Ubuntu&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Inter&family=Ubuntu&display=swap');
 
 :root {
   --presence-color: #3aa169;
@@ -66,7 +66,7 @@
   border-radius: 60%;
 
   font-family: var(--primary-font);
-  font-size: 0.8rem;
+  font-size: 0.7rem;
   font-weight: 600;
 
   top: -0.5rem;
diff --git a/components/inputs.css b/components/inputs.css
index 89db9ae..d7c6178 100644
--- a/components/inputs.css
+++ b/components/inputs.css
@@ -1,6 +1,6 @@
-@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");
-@import url("../resources/prism.css");
-@import url("./utils.css");
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
+@import url('../resources/prism.css');
+@import url('./utils.css');
 * {
   box-sizing: border-box;
 }
@@ -36,7 +36,7 @@ body {
 
   background-color: var(--input-back-color);
 
-  padding: 0.75rem 1rem;
+  padding: 0.5rem 0.5rem;
 
   outline-color: var(--primary-color);
 

From e3ef7f741abc2072cb381b7c3db851f81857b6c1 Mon Sep 17 00:00:00 2001
From: jugalkpatel 
Date: Sun, 18 Apr 2021 23:09:10 +0530
Subject: [PATCH 71/83] style: change cards of the grid

---
 index.html | 106 ++++++++++++++++++++++++++++++-----------------------
 1 file changed, 61 insertions(+), 45 deletions(-)

diff --git a/index.html b/index.html
index 54bf5dc..877621a 100644
--- a/index.html
+++ b/index.html
@@ -1346,42 +1346,48 @@ 
    
             
    
               
    
                 
-                  productLorem ipsum
+                  
+                    product
+                    
+                  
+                  Lorem ipsum
                   Lorem ipsum dolor sit Lorem
                   
-                    rating_icon
+                    rating_icon
                     4.5
                   
                   ₹ 2500
-                  
                 
               
    
               
    
                 
-                  productLorem ipsum
+                  
+                    product
+                    
+                  
+                  Lorem ipsum
                   Lorem ipsum dolor sit Lorem
                   
-                    rating_icon
+                    rating_icon
                     4.5
                   
                   ₹ 2500
-                  
                 
               
    
             
    
@@ -1407,62 +1413,72 @@ 
    
             
    
               
    
                 
-                  productLorem ipsum
+                  
+                    product
+                    
+                  
+                  Lorem ipsum
                   Lorem ipsum dolor sit Lorem
                   
-                    rating_icon
+                    rating_icon
                     4.5
                   
                   ₹ 2500
-                  
                 
               
    
               
    
                 
-                  productLorem ipsum
+                  
+                    product
+                    
+                  
+                  Lorem ipsum
                   Lorem ipsum dolor sit Lorem
                   
-                    rating_icon
+                    rating_icon
                     4.5
                   
                   ₹ 2500
-                  
                 
               
    
+
               
    
                 
-                  productLorem ipsum
+                  
+                    product
+                    
+                  
+                  Lorem ipsum
                   Lorem ipsum dolor sit Lorem
                   
-                    rating_icon
+                    rating_icon
                     4.5
                   
                   ₹ 2500
-                  
                 
               
    
             
    

From 01e46f377aabf38ae0095e35000edd20a5f2ff41 Mon Sep 17 00:00:00 2001
From: jugalkpatel 
Date: Mon, 19 Apr 2021 11:29:40 +0530
Subject: [PATCH 72/83] refactor: remove unneccesary comments

---
 components/cards.css | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/components/cards.css b/components/cards.css
index 96998bf..8969695 100644
--- a/components/cards.css
+++ b/components/cards.css
@@ -119,9 +119,7 @@ body {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
-  /* align-items: center; */
   width: 100%;
-  /* justify-content: space-evenly; */
 }
 
 /* product card */
@@ -141,11 +139,6 @@ body {
   margin: 1rem;
 
   max-height: 35rem;
-  /* height: 32rem; */
-
-  /* padding: 1rem; */
-
-  /* border: 1px solid black; */
 }
 
 .product__img__container {
@@ -165,12 +158,6 @@ body {
   -webkit-box-orient: vertical;
 
   -webkit-line-clamp: 2;
-  /* text-overflow: ellipsis; */
-  /* max-width: 13rem; */
-  /* width: 100%; */
-  /* white-space: nowrap; */
-  /* line-height: 1rem; */
-  /* max-height: 3rem; */
 }
 
 .product-info {
@@ -281,8 +268,6 @@ body {
 
   color: var(--secondary-color);
 
-  /* max-height: 9rem; */
-
   width: fit-content;
   max-width: 20rem;
 
@@ -331,7 +316,6 @@ body {
 
 .hcard-product-info {
   display: block;
-  /* height: 100%; */
   width: 30%;
   margin: 0;
 }

From cc851bb1086984771817bfc584554a8e287765e0 Mon Sep 17 00:00:00 2001
From: jugalkpatel 
Date: Mon, 19 Apr 2021 11:54:48 +0530
Subject: [PATCH 73/83] style: changed overlay card

---
 index.html | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 877621a..2602306 100644
--- a/index.html
+++ b/index.html
@@ -629,8 +629,8 @@ 
    
                       rating_icon
                       4.5
                     
-                    Rs. 250
+                    Rs. 250
+                  
 
                   
                 
    
@@ -688,7 +688,19 @@ 
    
                         wish_btn
                       
                     
-                    Lorem ipsum
+
+                    lorem ipsum Lorem ipsum dolor sit amet consectetur
+                      adipisicing elit. Distinctio, veniam!
+                    Lorem ipsum dolor sit Lorem Lorem, ipsum dolor sit amet
+                      consectetur adipisicing elit. Quisquam, ipsa.
+                    
+                      rating_icon
+                      4.5
+                    
                     Rs. 250
                   
 

From a58084c64fe5082ec458b3ca2a9bc62f09458f00 Mon Sep 17 00:00:00 2001
From: jugalkpatel 
Date: Mon, 19 Apr 2021 11:57:17 +0530
Subject: [PATCH 74/83] fix: z-index in overlay card

---
 components/cards.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/cards.css b/components/cards.css
index 8969695..ebddaef 100644
--- a/components/cards.css
+++ b/components/cards.css
@@ -243,6 +243,8 @@ body {
   position: absolute;
   top: 0;
   left: 0;
+
+  z-index: var(--zindex-two);
 }
 
 .overlay-text {

From 0e35ef54f92925e7cee55d5d160c5022ccc08cf8 Mon Sep 17 00:00:00 2001
From: jugalkpatel 
Date: Mon, 19 Apr 2021 12:03:14 +0530
Subject: [PATCH 75/83] docs: change code block in  overlay card

---
 index.html | 41 ++++++++++++++++++++++++++++-------------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 2602306..fc4421b 100644
--- a/index.html
+++ b/index.html
@@ -716,24 +716,39 @@ 
    
               
                     
                   <div class="product-container">
-                    <a href="#" class="product-info">
+                  <a href="#" class="product-info">
+                    <span class="product__img__container">
                       <img
-                        class="product-img"
-                        src="https://unsplash.it/200/300"
+                        class="product-img product-info__img"
+                        src="https://source.unsplash.com/random/"
                         alt="product"
-                      />Lorem ipsum <span class="price-tag">Rs. 250</span></a
+                      />
+                      <button class="wish-btn">
+                        <img src="./svgs/product-wish.svg" alt="wish_btn" />
+                      </button>
+                    </span>
+                    <span class="product-info__text"
+                      >lorem ipsum Lorem ipsum dolor sit amet consectetur
+                      adipisicing elit. Distinctio, veniam!</span
+                    >
+                    <span class="product-info__small"
+                      >Lorem ipsum dolor sit Lorem Lorem, ipsum dolor sit amet
+                      consectetur adipisicing elit. Quisquam, ipsa.</span
                     >
-                    <button class="wish-btn">
-                      <img src="./svgs/wish-btn.svg" alt="wish-btn" />
+                    <span class="product-info__rating">
+                      <img src="./svgs/rating.svg" alt="rating_icon" />
+                      4.5
+                    </span>
+                    <span class="price-tag">Rs. 250</span>
+                  </a>
+                  <button class="primary-btn">ADD TO CART</button>
+                  <div class="overlay-div">
+                    <button class="close-btn">
+                      <img src="./svgs/close-btn.svg" alt="close-btn" />
                     </button>
-                    <button class="primary-btn">ADD TO CART</button>
-                    <div class="overlay-div">
-                      <button class="close-btn">
-                        <img src="./svgs/close-btn.svg" alt="close-btn" />
-                      </button>
-                      <span class="overlay-text"> OUT OF STOCK </span>
-                    </div>
+                    <span class="overlay-text"> OUT OF STOCK </span>
                   </div>
+                </div>
                 
               
    
               

From 54ad3c47e33bade9f4e9bdcc382f5c1a966d7445 Mon Sep 17 00:00:00 2001
From: jugalkpatel 
Date: Mon, 19 Apr 2021 13:27:43 +0530
Subject: [PATCH 76/83] fix: text color in buttons

---
 components/button.css | 8 +++++---
 components/cards.css  | 2 ++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/button.css b/components/button.css
index 8c1e681..1bd3516 100644
--- a/components/button.css
+++ b/components/button.css
@@ -1,6 +1,6 @@
-@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");
-@import url("../resources/prism.css");
-@import url("./utils.css");
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
+@import url('../resources/prism.css');
+@import url('./utils.css');
 * {
   box-sizing: border-box;
 }
@@ -43,6 +43,8 @@ body {
   outline: var(--primary-color);
 
   cursor: pointer;
+
+  color: var(--primary-color);
 }
 /* secondary button */
 .button__secondary {
diff --git a/components/cards.css b/components/cards.css
index ebddaef..b7cbfc2 100644
--- a/components/cards.css
+++ b/components/cards.css
@@ -106,6 +106,8 @@ body {
   outline: var(--primary-color);
 
   cursor: pointer;
+
+  color: var(--primary-color);
 }
 
 .primary-btn:hover {

From c27ee3f3390df0170aab421ea5c6cac1c0ec8094 Mon Sep 17 00:00:00 2001
From: jugalkpatel 
Date: Mon, 17 May 2021 14:53:30 +0530
Subject: [PATCH 77/83] feat: addded landing page

---
 components/avatar.css           |    5 +
 components/button.css           |   11 +-
 components/compiled.css         |    2 +
 components/modal.css            |   14 +-
 components/threeItemsGrid.css   |    6 +
 docs.css                        |  247 +++++
 docs.html                       | 1634 ++++++++++++++++++++++++++++++
 index.css                       |  248 +----
 index.html                      | 1646 +------------------------------
 landing-page.css                |  107 --
 landing-page.html               |   58 --
 node_modules/.package-lock.json |    6 +
 package-lock.json               |    6 +
 package.json                    |    5 +
 14 files changed, 2021 insertions(+), 1974 deletions(-)
 create mode 100644 docs.css
 create mode 100644 docs.html
 delete mode 100644 landing-page.css
 delete mode 100644 landing-page.html
 create mode 100644 node_modules/.package-lock.json
 create mode 100644 package-lock.json
 create mode 100644 package.json

diff --git a/components/avatar.css b/components/avatar.css
index 44262a7..dc14adb 100644
--- a/components/avatar.css
+++ b/components/avatar.css
@@ -50,3 +50,8 @@
   width: 100%;
   border-radius: 50%;
 }
+
+.avatar .language-markup {
+  overflow-y: hidden;
+  overflow-x: scroll;
+}
diff --git a/components/button.css b/components/button.css
index 1bd3516..f907994 100644
--- a/components/button.css
+++ b/components/button.css
@@ -1,6 +1,6 @@
-@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
-@import url('../resources/prism.css');
-@import url('./utils.css');
+@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");
+@import url("../resources/prism.css");
+@import url("./utils.css");
 * {
   box-sizing: border-box;
 }
@@ -193,6 +193,11 @@ body {
   right: 1rem;
 }
 
+.button__container .language-markup {
+  overflow-y: hidden;
+  overflow-x: scroll;
+}
+
 /* .btn-codeblock--height {
   height: 10rem;
 } */
diff --git a/components/compiled.css b/components/compiled.css
index f8b3d55..704a11d 100644
--- a/components/compiled.css
+++ b/components/compiled.css
@@ -1144,6 +1144,8 @@ body {
   background-color: transparent;
   border: 0;
   outline: 0;
+
+  cursor: pointer;
 }
 
 .modal__article__header__text {
diff --git a/components/modal.css b/components/modal.css
index 6e7cb3c..e00535e 100644
--- a/components/modal.css
+++ b/components/modal.css
@@ -1,7 +1,7 @@
-@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
-@import url('../resources/prism.css');
-@import url('./utils.css');
-@import url('./button.css');
+@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");
+@import url("../resources/prism.css");
+@import url("./utils.css");
+@import url("./button.css");
 * {
   box-sizing: border-box;
 }
@@ -16,6 +16,7 @@ body {
   --secondary-color: #fff;
   --border-color: #e5e5e5;
   --modal-background: rgba(17, 24, 39, 0.3);
+  --modal__button_hover: rgba(255, 255, 255, 0.8);
   --zindex-five: 5;
 }
 
@@ -106,6 +107,11 @@ body {
   justify-content: flex-end;
 }
 
+.modal__article__footer .button__primary:hover {
+  background-color: var(--modal__button_hover);
+  color: var(--primary-color);
+}
+
 /* codeblock length fix */
 .modal__container .language-markup {
   height: 10rem;
diff --git a/components/threeItemsGrid.css b/components/threeItemsGrid.css
index 90ce98d..4d3f5b7 100644
--- a/components/threeItemsGrid.css
+++ b/components/threeItemsGrid.css
@@ -6,6 +6,12 @@
   justify-items: center;
 }
 
+.fix--width {
+  width: 10rem;
+  padding: 0;
+  margin: 0;
+}
+
 @media screen and (min-width: 820px) {
   .three-col-grid {
     grid-template-columns: repeat(3, 1fr);
diff --git a/docs.css b/docs.css
new file mode 100644
index 0000000..1c6559e
--- /dev/null
+++ b/docs.css
@@ -0,0 +1,247 @@
+@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");
+@import url("./resources/prism.css");
+@import url("./components/utils.css");
+@import url("./components/images.css");
+@import url("./components/avatar.css");
+@import url("./components/badge.css");
+@import url("./components/button.css");
+@import url("./components/cards.css");
+@import url("./components/alerts.css");
+@import url("./components/navbar.css");
+@import url("./components/twoItemsGrid.css");
+@import url("./components/threeItemsGrid.css");
+@import url("./components/lists.css");
+@import url("./components/Text-Utilities.css");
+@import url("./components/toast-notify-snackbar.css");
+@import url("./components/rating.css");
+@import url("./components/modal.css");
+@import url("./components/inputs.css");
+
+* {
+  box-sizing: border-box;
+
+  margin: 0;
+
+  scrollbar-width: thin;
+}
+
+:root {
+  --primary-font: Lato;
+  --primary-color: #111827;
+  --border-color: #e5e5e5;
+}
+
+.main {
+  padding: 1rem 0.5rem;
+
+  position: relative;
+}
+
+.main__top-btn {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+
+  border-radius: 50%;
+}
+
+/* utils */
+.space-comp {
+  margin-bottom: 2rem;
+}
+
+/* navbar */
+
+.navbar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  position: relative;
+}
+
+.navbar__title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+
+  padding-bottom: 1rem;
+
+  border-bottom: 3px solid var(--primary-color);
+
+  color: var(--primary-color);
+
+  font-family: var(--primary-font);
+  font-size: 1.3rem;
+  font-weight: 700;
+}
+
+.navbar__menu {
+  display: flex;
+  justify-content: space-between;
+
+  width: 100%;
+
+  padding-bottom: 1rem;
+}
+
+.navbar__menu__btn {
+  display: inline-block;
+  width: fit-content;
+
+  padding: 0;
+
+  background-color: transparent;
+
+  border: 0;
+
+  outline: 0;
+
+  cursor: pointer;
+}
+
+.navbar__menu__social__twitter,
+.navbar__menu__social__github {
+  display: inline-block;
+  margin: 0 0.1rem;
+}
+
+.navbar__title__text {
+  margin-left: 0.7rem;
+  cursor: pointer;
+}
+
+/* container */
+
+.container {
+  display: flex;
+  margin: 1rem 0;
+  height: 100vh;
+  position: relative;
+}
+
+/* sidebar */
+.sidebar {
+  background-color: var(--backgroud-color);
+  border-right: 3px solid var(--primary-color);
+  display: none;
+  position: fixed;
+  /* top: 3rem; */
+}
+
+.sidebar__title {
+  font-size: 10px;
+
+  letter-spacing: 0.5px;
+
+  font-family: var(--primary-font);
+
+  color: var(--primary-color);
+}
+
+.sidebar__list {
+  position: sticky;
+  top: 0;
+  list-style-type: none;
+
+  margin: 0;
+  padding: 0;
+  padding-top: 2rem;
+  padding-right: 2rem;
+  padding-bottom: 2rem;
+}
+
+.sidebar__item {
+  display: block;
+
+  text-decoration: none;
+
+  padding: 0.3rem 0;
+
+  font-size: 1.1rem;
+  color: var(--primary-color);
+  font-family: var(--primary-font);
+  font-weight: 600;
+
+  width: 100%;
+
+  flex-shrink: 1;
+}
+
+/* component container */
+
+.component-container {
+  width: 100%;
+  display: flex;
+
+  flex-direction: column;
+  margin: 0 auto;
+  /* margin: 1rem 0; */
+  /* height: 100vh; */
+  /* border: 1px solid black; */
+}
+
+.component--mod {
+  padding: 1rem 0;
+
+  font-family: var(--primary-font);
+}
+
+.ex-img {
+  max-width: 100%;
+}
+.img {
+  width: 100%;
+}
+
+div.code-toolbar {
+  right: 0;
+}
+
+/* media queries for larger screens */
+
+@media screen and (min-width: 576px) {
+  .container {
+    display: flex;
+    justify-content: space-between;
+  }
+  .sidebar {
+    width: 15%;
+  }
+
+  .component-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 80%;
+    /* padding-left: 0.5rem; */
+    /* margin: 2rem; */
+    position: absolute;
+    /* top: 0; */
+    left: 19.5%;
+  }
+  .main {
+    padding: 1rem 2rem;
+  }
+  .sidebar {
+    display: inline-block;
+    flex-shrink: 1;
+  }
+  .navbar__title {
+    position: absolute;
+  }
+  .navbar__menu {
+    z-index: 1;
+  }
+  .navbar__title__text {
+    z-index: 2;
+  }
+}
+
+/* @media screen and (min-width: 1276px) { */
+/*   .main { */
+/*     padding: 1rem 3rem; */
+/*   } */
+/* } */
diff --git a/docs.html b/docs.html
new file mode 100644
index 0000000..4c9732b
--- /dev/null
+++ b/docs.html
@@ -0,0 +1,1634 @@
+
+
+  
+    
+    
+    
+    Satori UI
+    
+    
+  
+  
+    
    
+      
+      
+      
+
+      
+      
    
+        
+        
    
+          
+        
    
+        
+
+        
+        
    
+          
    Avatar
    
+
+          
+          
    
+            
    
+              avatar-small
+              avatar-medium
+              avatar-medium
+              avatar-extra-small
+            
    
+            
    +                 
+                  <img class="img-big img-utils" alt="avatar-big" src="--enter--your--source" width="128" height="128" />
+                
+            
    
+            
    +                
+                  <img class="img-medium img-utils" alt="avatar-medium" src="--enter--your--source" width="96" height="96"/>
+                
+            
    
+            
    +              
+                <img class="img-small img-utils" alt="avatar-small" src="--enter--your--source" width="64" height="64 "/>
+              
+            
    
+            
    +              
+                <img class="img-ex-small img-utils" alt="avatar-extra-small" src="--enter--your--source" width="32" height="32" /> 
+              
+            
    
+          
    
+          
+
+          
    
+            Alerts
+          
    
+
+          
+          
    
+            
    
+              
    
+                
+                  success_icon
+                
+                This is an success alert - check it out!
+              
    
+              
    +                  
+                    <div class="alerts__success alerts--common center--margin alert--reduce-width">
+                      <span class="alerts--margin--common">
+                        <img src="./svgs/success-alert.svg" alt="success_icon" />
+                      </span>
+                      This is an success alert - check it out!
+                    </div>  
+                  
+              
    
+            
    
+            
+            
    
+              
    
+                
+                  error_icon
+                
+                This is an error alert - check it out!
+              
    
+              
    +                  
+                    <div class="alerts__error alerts--common alert--reduce-width center--margin">
+                      <span class="alerts--margin--common">
+                        <img src="./svgs/error-alert.svg" alt="error_icon" />
+                      </span>
+                      This is an error alert - check it out!
+                    </div>
+                  
+              
    
+            
    
+            
+            
    
+              
    
+                
+                  warning_icon
+                
+                This is an warning alert - check it out!
+              
    
+              
    +                  
+                    <div class="alerts__warning alerts--common alert--reduce-width" >
+                      <span class="alerts--margin--common">
+                        <img src="./svgs/warning-alert.svg" alt="warning_icon" />
+                      </span>
+                      This is an warning alert - check it out!
+                    </div>
+                  
+              
    
+            
    
+            
+            
    
+              
    
+                
+                  info_icon
+                
+                This is an info alert - check it out!
+              
    
+              
    +                  
+                    <div class="alerts__info alerts--common alert--reduce-width">
+                      <span class="alerts--margin--common">
+                      <img src="./svgs/info-alert.svg" alt="info_icon" />
+                      </span>
+                      This is an info alert - check it out!
+                    </div> 
+                  
+              
    
+            
    
+            
+          
    
+          
+
+          
    
+            Badge
+          
    
+
+          
+          
    
+            
    
+              
    
+                
+                  cart
+                  10
+                
+                
+                  heart
+                  10
+                
+                
+                  bell
+                  10
+                
+              
    
+            
    
+            
    +              
+              <a href="#" class="badge-icon">
+                <img src="./svgs/black-cart.svg" alt="cart" />
+                <span class="num-badge cart-badge">10</span>
+              </a>
+              
+            
    
+            
    +              
+              <a href="#" class="badge-icon">
+                <img src="./svgs/black-heart.svg" alt="heart" />
+                <span class="num-badge wishlist-badge">10</span>
+              </a> 
+              
+            
    
+            
    +              
+              <a href="#" class="badge-icon">
+                <img src="./svgs/black-bell.svg" alt="bell" />
+                <span class="num-badge notif-badge">10</span>
+              </a>
+              
+            
    
+          
    
+          
+
+          
+          
    
+            
    
+              
    
+                avatar-large
+                
+              
    
+              
    
+                avatar-medium
+                
+              
    
+              
    
+                avatar-medium
+                
+              
    
+              
    
+                avatar-extra-small
+                
+              
    
+            
    
+            
    +           
+        <div class="avatar-comp">
+          <img
+            class="img-big badge-utils"
+            alt="avatar-large"
+            src="../resources/man.svg"
+            width="96"
+            height="96"
+          />
+          <span class="avatar-badge avatar-badge-large"></span>
+        </div>
+          
+      
    
+            
    +          
+        <div class="avatar-comp">
+          <img
+            class="img-medium badge-utils"
+            alt="avatar-medium"
+            src="../resources/man.svg"
+            width="64"
+            height="64"
+          />
+          <span class="avatar-badge avatar-badge-medium"></span>
+        </div>
+        
+      
    
+            
    +          
+        <div class="avatar-comp">
+          <img
+            class="img-small badge-utils"
+            alt="avatar-medium"
+            src="../resources/man.svg"
+            width="48"
+            height="48"
+          />
+          <span class="avatar-badge avatar-badge-small"></span>
+        </div>
+          
+      
    
+            
    +          
+        <div class="avatar-comp">
+          <img
+            class="img-ex-small badge-utils"
+            alt="avatar-extra-small"
+            src="../resources/man.svg"
+            width="32"
+            height="32"
+          />
+          <span class="avatar-badge avatar-badge-ex-small"></span>
+        </div>
+          
+      
    
+          
    
+          
+
+          
    
+            Buttons
+          
    
+
+          
+          
    
+            
+            
    
+              
    
+                
+                
+                
+                
+              
    
+              
    +                
+                  <button class="button__primary">ADD TO CART</button> 
+                
+              
    
+              
    +                
+                  <button class="button__secondary">ADD TO CART</button>
+                
+              
    
+              
    +                
+                  <button class="button__primary button--round">ADD TO CART</button>      
+                
+              
    
+              
    +                
+                  <button class="button__secondary button--round">ADD TO CART</button>
+                
    
+            
    
+            
+
+            
+            
    
+              
    
+                
+                
+                
+                  
+                    githuv_icon
+                  
+                  Github
+                
+              
    
+              
    +                
+                  <a href="#" class="button__link-button button--round">
+                    <span class="svg--right-margin">
+                      <!-- put your choice of svg here -->
+                    </span>
+                      <!-- put your text -->
+                  </a>
+                
+              
    
+            
    
+            
+
+            
+            
    
+              
    
+                
+                
+                
+                
+              
    
+              
    +                
+                  <button class="icon__button icon__cart">
+                    <img src="./svgs/white-cart.svg" alt="cart_icon" />
+                  </button>
+                
+              
    
+              
    +                
+                  <button class="icon__button icon__heart">
+                    <img src="./svgs/white-heart.svg" alt="heart_icon" />
+                  </button> 
+                
+              
    
+              
    +                
+                  <button class="icon__button icon__home">
+                    <img src="./svgs/white-home.svg" alt="home_icon" />
+                  </button> 
+                
+              
    
+              
    +                
+                  <button class="icon__button icon__profile">
+                    <img src="./svgs/white-profile.svg" alt="profile_icon" />
+                  </button>
+                
+              
    
+            
    
+            
+
+            
+            
    
+              
    
+                
+                
+                
+              
    
+              
                     
+                
+                  <button class="floating__button">
+                    <!-- put your choice of svg here -->
+                  </button>
+                
+              
    
+            
    
+            
+          
    
+          
+
+          
    
+            Cards
+          
    
+
+          
+          
    
+            
    
+              
    
+                
    
+                  
+                    
+                      product
+                      
+                    
+                    Lorem ipsum
+                    
+                      Lorem ipsum dolor sit Lorem
+                    
+                    
+                      rating_icon
+                      4.5
+                    
+                    ₹ 2500
+                  
+                
    
+              
    
+              
+
+              
    +                
+                  <div class="product-container">
+                    <a href="#" class="product-info">
+                      <span class="product__img__container">
+                        <img
+                          class="product-img product-info__img"
+                          src="https://source.unsplash.com/random/"
+                          alt="product"
+                        />
+                        <button class="wish-btn">
+                          <img src="./svgs/product-wish.svg" alt="wish_btn" />
+                        </button>
+                      </span>
+                      Lorem ipsum
+                      <span class="product-info__small">Lorem ipsum dolor sit Lorem</span>
+                      <span class="product-info__rating">
+                        <img src="./svgs/rating.svg" alt="rating_icon" />
+                        4.5
+                      </span>
+                      <span class="price-tag">₹ 2500</span>
+                    </a>
+                </div>
+                
+              
    
+            
    
+            
+
+            
    
+              
    
+                
    
+                  
+                    
+                      
+                      product
+                      
+                    
+
+                    lorem ipsum Lorem ipsum dolor sit amet consectetur
+                      adipisicing elit. Distinctio, veniam!
+                    Lorem ipsum dolor sit Lorem Lorem, ipsum dolor sit amet
+                      consectetur adipisicing elit. Quisquam, ipsa.
+                    
+                      rating_icon
+                      4.5
+                    
+                    Rs. 250
+                  
+
+                  
+                
    
+              
    
+              
+              
    +                
+                  <div class="product-container">
+                      
+                      <a href="#" class="product-info">
+                      <span class="product__img__container">
+                        <button class="close-btn">
+                          <img src="./svgs/close-btn.svg" alt="close_btn" />
+                        </button>
+                        <img
+                          class="product-img product-info__img"
+                          src="https://source.unsplash.com/random/"
+                          alt="product"
+                        />
+                        <button class="wish-btn">
+                          <img src="./svgs/product-wish.svg" alt="wish_btn" />
+                        </button>
+                      </span>
+                        Lorem ipsum
+                        <span class="product-info__small"
+                          >Lorem ipsum dolor sit Lorem</span
+                        >
+                        <span class="product-info__rating">
+                          <img src="./svgs/rating.svg" alt="rating_icon" />
+                          4.5
+                        </span>
+                        <span class="price-tag">Rs. 250</span></a
+                      >
+                      
+                      <button class="primary-btn">ADD TO CART</button>
+                  </div> 
+                
+            
    
+            
    
+            
+
+            
    
+              
    
+                
    
+                  
+                    
+                      product
+                      
+                    
+
+                    lorem ipsum Lorem ipsum dolor sit amet consectetur
+                      adipisicing elit. Distinctio, veniam!
+                    Lorem ipsum dolor sit Lorem Lorem, ipsum dolor sit amet
+                      consectetur adipisicing elit. Quisquam, ipsa.
+                    
+                      rating_icon
+                      4.5
+                    
+                    Rs. 250
+                  
+
+                  
+                  
    
+                    
+                     OUT OF STOCK 
+                  
    
+                
    
+              
    
+              
    +                
+                  <div class="product-container">
+                  <a href="#" class="product-info">
+                    <span class="product__img__container">
+                      <img
+                        class="product-img product-info__img"
+                        src="https://source.unsplash.com/random/"
+                        alt="product"
+                      />
+                      <button class="wish-btn">
+                        <img src="./svgs/product-wish.svg" alt="wish_btn" />
+                      </button>
+                    </span>
+                    <span class="product-info__text"
+                      >lorem ipsum Lorem ipsum dolor sit amet consectetur
+                      adipisicing elit. Distinctio, veniam!</span
+                    >
+                    <span class="product-info__small"
+                      >Lorem ipsum dolor sit Lorem Lorem, ipsum dolor sit amet
+                      consectetur adipisicing elit. Quisquam, ipsa.</span
+                    >
+                    <span class="product-info__rating">
+                      <img src="./svgs/rating.svg" alt="rating_icon" />
+                      4.5
+                    </span>
+                    <span class="price-tag">Rs. 250</span>
+                  </a>
+                  <button class="primary-btn">ADD TO CART</button>
+                  <div class="overlay-div">
+                    <button class="close-btn">
+                      <img src="./svgs/close-btn.svg" alt="close-btn" />
+                    </button>
+                    <span class="overlay-text"> OUT OF STOCK </span>
+                  </div>
+                </div>
+                
+              
    
+              
+            
    
+            
+            
    
+              
    
+                
    
+                  
    CARD TITLE
    
+                  
    
+                    I am a very simple card. I am good at containing small bits
+                    of information. I am convenient because I require little
+                    markup to use effectively.
+                  
    
+                
    
+              
    
+              
+              
    +                
+                  <div class="text-card">
+                    <h4 class="text-card-title">---card title---</h4>
+                    <p class="text-card-info">
+                      --- enter your text here ---
+                    </p>
+                  </div>
+              
+            
    
+            
    
+            
+            
    
+              
    
+                
    
+                  
+                    product
+                  
    
+                    
    
+                      
    Lorem ipsum
    
+                      Lorem ipsum dolor sit amet.
+                      Rs. 250
+                      
    
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                        Explicabo, nulla. Lorem ipsum dolor sit amet.
+                      
    
+                    
    
+                    
+                    
+                  
    
+                
    
+              
    
+              
+              
    +                  
+                    <div class="horizontal-product-container">
+                      <a href="#" class="product-info hcard-product-info">
+                        <img
+                          class="product-img hcard-img"
+                          src="https://source.unsplash.com/random/"
+                          alt="product"
+                      /></a>
+                      <div class="second-horizontal-section">
+                        <div class="hsection_info">
+                          <h3 class="hcard-title">Lorem ipsum</h3>
+                          <small class="hcard-title-desc"
+                            >Lorem ipsum dolor sit amet.</small
+                          >
+                          <span class="price-tag hcard-price">Rs. 250</span>
+                          <p class="hcard-product-desc">
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                            Explicabo, nulla. Lorem ipsum dolor sit amet.
+                          </p>
+                        </div>
+                        <button class="primary-btn horizontal-primary-btn">
+                          ADD TO CART
+                        </button>
+                        <button class="wish-btn hcard-wish-btn">
+                          <img src="./svgs/wish-btn.svg" alt="wish-btn" />
+                        </button>
+                      </div>
+                    </div>
+                  
+              
    
+            
    
+            
+            
    
+              
    
+                
    
+                  
+                    product
+                  
+                  
    
+                    
    
+                      
    
+                        Lorem ipsum dolor sit
+                      
    
+                      Lorem ipsum dolor sit amet consectetur
+                        adipisicing.
+                    
    
+                    
    
+                      RATING
+                      star_icon
+                      star_icon
+                      star_icon
+                      star_icon
+                      star_icon
+                    
    
+                    
+                    
+                  
    
+                
    
+              
    
+              
+              
    +                
+                  <div class="shadow_card">
+                    <a href="#" class="shadow_card__productimgLink">
+                      <img
+                        class="product-img shadow_card__productimg"
+                        src="https://source.unsplash.com/random"
+                        alt="product"
+                      />
+                    </a>
+                    <div class="shadow_card__product-info">
+                      <div class="shadow_card__product-header">
+                        <h3 class="shadow_card__product-title">
+                          Lorem ipsum dolor sit
+                        </h3>
+                        <small class="font-family"
+                          >Lorem ipsum dolor sit amet consectetur
+                          adipisicing.</small
+                        >
+                      </div>
+                      <div class="shadow_card__product-rating">
+                        <span
+                          class="shadow_card__product-rating__title font-family"
+                          >RATING</span
+                        >
+                        <img src="./svgs/star.svg" alt="star_icon" />
+                        <img src="./svgs/star.svg" alt="star_icon" />
+                        <img src="./svgs/star.svg" alt="star_icon" />
+                        <img src="./svgs/star.svg" alt="star_icon" />
+                        <img src="./svgs/star.svg" alt="star_icon" />
+                      </div>
+                      <button class="primary-btn shadow_card--btn">
+                        ADD TO CART
+                      </button>
+                      <button class="shadow_card--wishbtn">
+                        <img src="./svgs/wish-btn.svg" alt="wish_btn" />
+                      </button>
+                    </div>
+                </div>
+                
+              
    
+            
    
+            
+          
    
+          
+
+          
    
+            Image
+          
    
+
+          
+          
    
+            
    
+              
    
+                round_img
+              
    
+              
    +                  
+                  <img
+                    class="responsive-img"
+                    src="https://source.unsplash.com/random"
+                    alt="round_img"
+                  />
+                  
+              
    
+            
    
+            
    
+              
    
+                round_img
+              
    
+              
    +                  
+                    <img
+                      class="responsive-img img-round"
+                      src="https://source.unsplash.com/random"
+                      alt="round_img"
+                    />
+                  
+                
    
+            
    
+          
    
+          
+
+          
    
+            Inputs
+          
    
+
+          
+          
    
+            
    
+              
    
+                
    
+                  
+                  
+                  
+                
    
+              
    
+              
    +        
+          <input
+            type="text"
+            class="input__text input--common"
+            placeholder="Enter Your Name"
+            value="hello,world"
+            required
+          />
+        
+      
    
+              
    +        
+           <input
+            type="email"
+            class="input__email input--common"
+            placeholder="Enter Email"
+            required
+          />
+        
+      
    
+              
    +                
+                  <input
+                    type="password"
+                    class="input_password input--common"
+                    placeholder="Enter Password(must be 8 chars long)"
+                    pattern=".{8,}"
+                    required
+                  />
+                
+              
    
+            
    
+          
    
+          
+
+          
    Lists
    
+          
+          
    
+            
    
+              
      
+                
    • List Item 1
      • 
+                
    • List Item 2
      • 
+                
    • List Item 3
      • 
+                
    • List Item 4
      • 
+                
    • List Item 5
      • 
+                
    • List Item 6
      • 
+              
    
+              
    +                  
+                      <ul class="spaced-list">
+                        <li class="spaced-list__item">List Item 1</li>
+                        <li class="spaced-list__item">List Item 2</li>
+                        <li class="spaced-list__item">List Item 3</li>
+                        <li class="spaced-list__item">List Item 4</li>
+                        <li class="spaced-list__item">List Item 5</li>
+                        <li class="spaced-list__item">List Item 6</li>
+                      </ul>
+                  
+              
    
+            
    
+            
    
+              
    
+                
      
+                  
    • 
+                    info_icon
+                    
+                      
      
+                        Lorem ipsum dolor sit amet.
+                      
      
+                      Lorem, ipsum dolor sit amet consectetur adipisicing
+                        elit.
+                          
+                  
      • 
+                  
    • 
+                    info_icon
+                    
+                      
      
+                        Lorem ipsum dolor sit amet.
+                      
      
+                      Lorem, ipsum dolor sit amet consectetur adipisicing
+                        elit.
+                          
+                  
      • 
+                  
    • 
+                    info_icon
+                    
+                      
      
+                        Lorem ipsum dolor sit amet.
+                      
      
+                      Lorem, ipsum dolor sit amet consectetur adipisicing
+                        elit.
+                          
+                  
      • 
+                  
    • 
+                    info_icon
+                    
+                      
      
+                        Lorem ipsum dolor sit amet.
+                      
      
+                      Lorem, ipsum dolor sit amet consectetur adipisicing
+                        elit.
+                          
+                  
      • 
+                
    
+              
    
+              
    +          
+             <ul class="stacked-list">
+                <li class="stacked-list__item info--item">
+                    <img src="../svgs/info-alert.svg" alt="info_icon" />
+                    <span class="stacked-list__right">
+                    <h3 class="stacked-list__title">Lorem ipsum dolor sit amet.</h3>
+                    <small
+                        >Lorem, ipsum dolor sit amet consectetur adipisicing
+                        elit.</small
+                    >
+                    </span>
+                </li>
+                <li class="stacked-list__item error--item">
+                    <img src="../svgs/error-alert.svg" alt="info_icon" />
+                    <span class="stacked-list__right">
+                    <h3 class="stacked-list__title">Lorem ipsum dolor sit amet.</h3>
+                    <small
+                        >Lorem, ipsum dolor sit amet consectetur adipisicing
+                        elit.</small
+                    >
+                    </span>
+                </li>
+                <li class="stacked-list__item warning--item">
+                    <img src="../svgs/exclamation.svg" alt="info_icon" />
+                    <span class="stacked-list__right">
+                    <h3 class="stacked-list__title">Lorem ipsum dolor sit amet.</h3>
+                    <small
+                        >Lorem, ipsum dolor sit amet consectetur adipisicing
+                        elit.</small
+                    >
+                    </span>
+                </li>
+                <li class="stacked-list__item success--item">
+                    <img src="../svgs/success-alert.svg" alt="info_icon" />
+                    <span class="stacked-list__right">
+                    <h3 class="stacked-list__title">Lorem ipsum dolor sit amet.</h3>
+                    <small
+                        >Lorem, ipsum dolor sit amet consectetur adipisicing
+                        elit.</small
+                    >
+                    </span>
+                </li>
+            </ul>
+          
+      
    
+            
    
+          
    
+          
+
+          
    
+            Navigation
+          
    
+
+          
+          
    
+            
    
+              
+              
    +                
+                  <nav class="navbar-component">
+                    <div class="navbar-component__menu">
+                      <button class="navbar-component__menu__btn">
+                        <img src="./svgs/menu-btn.svg" alt="menu-btn" />
+                      </button>
+                      <div class="navbar-component__menu_social">
+                        <a href="#" class="navbar-component__menu__social__github">
+                          <img src="./svgs/nav-github.svg" alt="nav-github-icon" />
+                        </a>
+                        <a href="#" class="navbar-component__menu__social__twitter">
+                          <img src="./svgs/nav-twitter.svg" alt="nav-github-icon" />
+                        </a>
+                      </div>
+                    </div>
+                    <div class="navbar-component__title">
+                      <span class="navbar-component__title__text">UNDEFINED</span>
+                    </div>
+                </nav>
+                
+              
    
+            
    
+          
    
+          
+
+          
    
+            Modal
+          
    
+          
+          
    
+            
    
+              
    
+                
+              
    
+              
    +             
+                <div id="modal" class="modal">
+                    <section class="modal__article">
+                    <header class="modal__article__header">
+                        <h2 class="modal__article__header__text">Modal Title</h2>
+                        <button class="modal__close-btn" onclick="{}">
+                            <img src="../svgs/close-btn.svg" alt="close_btn" />
+                        </button>
+
+                    </header>
+                    <div class="modal__article__info">
+                        <p>
+                            --- enter you modal text ---
+                        </p>
+                    </div>
+                    <footer class="modal__article__footer">
+                        <button id="close-modal"class="button__primary button--round" onclick="{}">Close</button>
+                    <button class="button__primary button--round">
+                        Secondary Action
+                    </button>
+  
+                    </footer>
+                    </section>
+                </div>
+             
+          
    
+            
    
+            
+          
    
+          
+
+          
    
+            Rating
+          
    
+          
+          
    
+            
    
+              
    
+                
+                  rating_icon
+                  4.5
+                
+              
    
+              
    +                  
+                    <span class="rating">
+                        <img
+                            src="../svgs/rating.svg"
+                            class="rating__icon"
+                            alt="rating_icon"
+                        />
+                        4.5
+                    </span>
+                  
+              
    
+            
    
+          
    
+          
+
+          
    
+            Slider
+          
    
+          
+          
    
+            
    
+              
    
+                
+              
    
+              
    +                  
+                    <input type="range" class="slider" />
+                  
+              
    
+            
    
+          
    
+          
+          
    
+            Two Column Grid
+          
    
+          
+          
    
+            
    
+              
    
+                
+                  
+                    product
+                    
+                  
+                  Lorem ipsum
+                  Lorem ipsum dolor sit Lorem
+                  
+                    rating_icon
+                    4.5
+                  
+                  ₹ 2500
+                
+              
    
+              
    
+                
+                  
+                    product
+                    
+                  
+                  Lorem ipsum
+                  Lorem ipsum dolor sit Lorem
+                  
+                    rating_icon
+                    4.5
+                  
+                  ₹ 2500
+                
+              
    
+            
    
+            
    +              
+                <div class="two-col-grid">
+                --- Enter your element here ---
+                </div> 
+              
+            
    
+          
    
+          
+
+          
    
+            Three Column Grid
+          
    
+
+          
+          
    
+            
    
+              
    
+                
+                  
+                    product
+                    
+                  
+                  Lorem ipsum
+                  Lorem ipsum dolor sit Lorem
+                  
+                    rating_icon
+                    4.5
+                  
+                  ₹ 2500
+                
+              
    
+
+              
    
+                
+                  
+                    product
+                    
+                  
+                  Lorem ipsum
+                  Lorem ipsum dolor sit Lorem
+                  
+                    rating_icon
+                    4.5
+                  
+                  ₹ 2500
+                
+              
    
+
+              
    
+                
+                  
+                    product
+                    
+                  
+                  Lorem ipsum
+                  Lorem ipsum dolor sit Lorem
+                  
+                    rating_icon
+                    4.5
+                  
+                  ₹ 2500
+                
+              
    
+            
    
+            
    +              
+                <div class="three-col-grid">
+                    --- enter your elements here ---
+                </div> 
+              
+            
    
+          
    
+          
+          
    
+            Text Utilities
+          
    
+          
+          
    
+            
      
+              
    • 
+                
      I'm Heading
      
+              
      • 
+              
    • 
+                
      I'm Small
      
+              
      • 
+              
    • 
+                
      I'm Gray
      
+              
      • 
+              
    • 
+                
      I'm Center
      
+              
      • 
+            
    
+            
    +              
+                <h1 class="heading">I'm Heading</h1>
+              
+            
    
+            
    +              
+                <p class="small-text">I'm Small</p>
+              
+            
    
+            
    +              
+                <p class="gray-text">I'm Gray</p>
+              
+            
    
+            
    +              
+                <p class="center-text">I'm Center</p>
+              
+            
    
+          
    
+          
+
+          
    
+            Snackbar
+          
    
+          
+          
    
+            
    
+              
    
+                
+              
    
+              
    
+                
  • 
+                  info_icon
+                  
+                    
    
+                      Lorem ipsum dolor sit amet.
+                    
    
+                    Lorem, ipsum dolor sit amet consectetur adipisicing
+                      elit.
+                      
+                
    • 
+                
+              
    
+              
    +                  
+                      <div id="snackbar-item" class="snackbar">
+                          <li class="stacked-list__item info--item">
+                          <img src="../svgs/info-alert.svg" alt="info_icon" />
+                          <span class="stacked-list__right">
+                              <h3 class="stacked-list__title">Lorem ipsum dolor sit amet.</h3>
+                              <small
+                              >Lorem, ipsum dolor sit amet consectetur adipisicing elit.</small
+                              >
+                          </span>
+                          </li>
+                          <button class="snackbar__close-btn" onclick="closeSnackbar()">
+                          <img src="../svgs/close-btn.svg" alt="close_btn" />
+                          </button>
+                      </div> 
+                  
+              
    
+            
    
+          
    
+          
+        
    
+        
+      
    
+      
+      
+        
+          top_icon
+        
+      
+    
    
+    
+    
+    
+    
+  
+
diff --git a/index.css b/index.css
index 1fec6ea..0ef9537 100644
--- a/index.css
+++ b/index.css
@@ -1,21 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");
-@import url("./resources/prism.css");
-@import url("./components/utils.css");
-@import url("./components/images.css");
-@import url("./components/avatar.css");
-@import url("./components/badge.css");
+@import url("./docs.css");
 @import url("./components/button.css");
-@import url("./components/cards.css");
-@import url("./components/alerts.css");
-@import url("./components/navbar.css");
-@import url("./components/twoItemsGrid.css");
-@import url("./components/threeItemsGrid.css");
-@import url("./components/lists.css");
-@import url("./components/Text-Utilities.css");
-@import url("./components/toast-notify-snackbar.css");
-@import url("./components/rating.css");
-@import url("./components/modal.css");
-@import url("./components/inputs.css");
+@import url("./components/images.css");
 
 * {
   box-sizing: border-box;
@@ -29,219 +15,93 @@
   --primary-font: Lato;
   --primary-color: #111827;
   --border-color: #e5e5e5;
+  --secondary-color: #fff;
 }
 
-.main {
-  padding: 1rem 0.5rem;
-
-  position: relative;
-}
-
-.main__top-btn {
-  position: fixed;
-  bottom: 0;
-  right: 0;
-
-  border-radius: 50%;
-}
-
-/* utils */
-.space-comp {
-  margin-bottom: 2rem;
+.landing-page {
+  padding: 0 1rem;
 }
 
-/* navbar */
-
-.navbar {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  position: relative;
-}
-
-.navbar__title {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  width: 100%;
-
-  padding-bottom: 1rem;
-
+.landing-page .navbar {
   border-bottom: 3px solid var(--primary-color);
-
-  color: var(--primary-color);
-
-  font-family: var(--primary-font);
-  font-size: 1.3rem;
-  font-weight: 700;
-}
-
-.navbar__menu {
-  display: flex;
+  flex-direction: row;
   justify-content: space-between;
-
-  width: 100%;
-
-  padding-bottom: 1rem;
+  align-items: center;
+  padding: 0.5rem 0;
 }
 
-.navbar__menu__btn {
-  display: inline-block;
-  width: fit-content;
-
+.landing-page .navbar__title {
+  justify-content: flex-start;
+  border: 0;
   padding: 0;
+  max-width: max-content;
+}
 
+.navbar__navigation .button__link-button {
   background-color: transparent;
-
   border: 0;
-
-  outline: 0;
-
-  cursor: pointer;
-}
-
-.navbar__menu__social__twitter,
-.navbar__menu__social__github {
-  display: inline-block;
-  margin: 0 0.1rem;
+  color: var(--primary-color);
+  box-shadow: none;
 }
 
-.navbar__title__text {
-  margin-left: 0.7rem;
-  cursor: pointer;
+.landing-page .navbar__navigation {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr) auto;
+  /* justify-content: center; */
+  justify-items: center;
 }
 
-/* container */
-
-.container {
-  display: flex;
-  margin: 1rem 0;
-  height: 100vh;
-  position: relative;
+.landing-page .navbar__menu__social__github {
+  padding: 0.3rem;
+  margin: 0.4rem;
+  margin-right: 0;
+  width: max-content;
 }
 
-/* sidebar */
-.sidebar {
-  background-color: var(--backgroud-color);
-  border-right: 3px solid var(--primary-color);
-  display: none;
-  position: fixed;
-  /* top: 3rem; */
+.landing-page .responsive-img {
+  object-fit: contain;
 }
 
-.sidebar__title {
-  font-size: 10px;
-
-  letter-spacing: 0.5px;
-
-  font-family: var(--primary-font);
-
-  color: var(--primary-color);
-}
-
-.sidebar__list {
-  position: sticky;
-  top: 0;
-  list-style-type: none;
-
-  margin: 0;
-  padding: 0;
-  padding-top: 2rem;
-  padding-right: 2rem;
-  padding-bottom: 2rem;
+.landing-page__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
 }
 
-.sidebar__item {
-  display: block;
-
-  text-decoration: none;
-
-  padding: 0.3rem 0;
-
-  font-size: 1.1rem;
-  color: var(--primary-color);
-  font-family: var(--primary-font);
-  font-weight: 600;
-
-  width: 100%;
-
-  flex-shrink: 1;
+.landing-page__content__buttons {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 1rem;
 }
 
-/* component container */
-
-.component-container {
-  width: 100%;
+.landing-page__content .button__link-button {
   display: flex;
-
-  flex-direction: column;
-  margin: 0 auto;
-  /* margin: 1rem 0; */
-  /* height: 100vh; */
-  /* border: 1px solid black; */
+  cursor: pointer;
+  min-width: 10rem;
 }
 
-.component--mod {
-  padding: 1rem 0;
-
+.landing-page__hero-line {
   font-family: var(--primary-font);
+  text-align: center;
+  font-weight: 900;
+  max-width: 100vw;
 }
 
-.ex-img {
-  max-width: 100%;
-}
-.img {
-  width: 100%;
+.landing-page__content .svg--right-margin {
+  display: block;
+  margin-left: 0.5rem;
 }
 
-div.code-toolbar {
-  right: 0;
+.button__github {
+  color: var(--primary-color);
+  background-color: var(--secondary-color);
 }
 
-/* media queries for larger screens */
-
 @media screen and (min-width: 576px) {
-  .container {
-    display: flex;
-    justify-content: space-between;
-  }
-  .sidebar {
-    width: 15%;
-  }
-
-  .component-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    width: 80%;
-    /* padding-left: 0.5rem; */
-    /* margin: 2rem; */
-    position: absolute;
-    /* top: 0; */
-    left: 19.5%;
-  }
-  .main {
-    padding: 1rem 2rem;
-  }
-  .sidebar {
-    display: inline-block;
-    flex-shrink: 1;
-  }
   .navbar__title {
-    position: absolute;
-  }
-  .navbar__menu {
-    z-index: 1;
-  }
-  .navbar__title__text {
-    z-index: 2;
-  }
-}
-
-@media screen and (min-width: 576px) and (max-width: ) @media screen and (min-width: 1276px) {
-  .main {
-    padding: 1rem 3rem;
+    position: relative;
   }
 }
diff --git a/index.html b/index.html
index fc4421b..e27ead6 100644
--- a/index.html
+++ b/index.html
@@ -8,1626 +8,56 @@
     
     
   
-  
-    
    
-      
+  
+    
    
       
-      
-
-      
-      
    
-        
-        
    
-          
+      
    
+        
    
+          landing-page__img
         
    
-        
-
-        
-        
    
-          
    Avatar
    
-
-          
-          
    
-            
    
-              avatar-small
-              avatar-medium
-              avatar-medium
-              avatar-extra-small
-            
    
-            
    -                 
-                  <img class="img-big img-utils" alt="avatar-big" src="--enter--your--source" width="128" height="128" />
-                
-            
    
-            
    -                
-                  <img class="img-medium img-utils" alt="avatar-medium" src="--enter--your--source" width="96" height="96"/>
-                
-            
    
-            
    -              
-                <img class="img-small img-utils" alt="avatar-small" src="--enter--your--source" width="64" height="64 "/>
-              
-            
    
-            
    -              
-                <img class="img-ex-small img-utils" alt="avatar-extra-small" src="--enter--your--source" width="32" height="32" /> 
-              
-            
    
-          
    
-          
-
-          
    
-            Alerts
+        
    
+          
    
+            A Modern CSS Component Library for Building Good Projects.
           
    
-
-          
-          
    
-            
    
-              
    
-                
-                  success_icon
-                
-                This is an success alert - check it out!
-              
    
-              
    -                  
-                    <div class="alerts__success alerts--common center--margin alert--reduce-width">
-                      <span class="alerts--margin--common">
-                        <img src="./svgs/success-alert.svg" alt="success_icon" />
-                      </span>
-                      This is an success alert - check it out!
-                    </div>  
-                  
-              
    
-            
    
-            
-            
    
-              
    
-                
-                  error_icon
-                
-                This is an error alert - check it out!
-              
    
-              
    -                  
-                    <div class="alerts__error alerts--common alert--reduce-width center--margin">
-                      <span class="alerts--margin--common">
-                        <img src="./svgs/error-alert.svg" alt="error_icon" />
-                      </span>
-                      This is an error alert - check it out!
-                    </div>
-                  
-              
    
-            
    
-            
-            
    
-              
    
-                
-                  warning_icon
-                
-                This is an warning alert - check it out!
-              
    
-              
    -                  
-                    <div class="alerts__warning alerts--common alert--reduce-width" >
-                      <span class="alerts--margin--common">
-                        <img src="./svgs/warning-alert.svg" alt="warning_icon" />
-                      </span>
-                      This is an warning alert - check it out!
-                    </div>
-                  
-              
    
-            
    
-            
-            
    
-              
    
-                
-                  info_icon
-                
-                This is an info alert - check it out!
-              
    
-              
    -                  
-                    <div class="alerts__info alerts--common alert--reduce-width">
-                      <span class="alerts--margin--common">
-                      <img src="./svgs/info-alert.svg" alt="info_icon" />
-                      </span>
-                      This is an info alert - check it out!
-                    </div> 
-                  
-              
    
-            
    
-            
-          
    
-          
-
-          
    
-            Badge
-          
    
-
-          
-          
    
-            
    
-              
    
-                
-                  cart
-                  10
-                
-                
-                  heart
-                  10
-                
-                
-                  bell
-                  10
-                
-              
    
-            
    
-            
    -              
-              <a href="#" class="badge-icon">
-                <img src="./svgs/black-cart.svg" alt="cart" />
-                <span class="num-badge cart-badge">10</span>
-              </a>
-              
-            
    
-            
    -              
-              <a href="#" class="badge-icon">
-                <img src="./svgs/black-heart.svg" alt="heart" />
-                <span class="num-badge wishlist-badge">10</span>
-              </a> 
-              
-            
    
-            
    -              
-              <a href="#" class="badge-icon">
-                <img src="./svgs/black-bell.svg" alt="bell" />
-                <span class="num-badge notif-badge">10</span>
-              </a>
-              
-            
    
-          
    
-          
-
-          
-          
    
-            
    
-              
    
-                avatar-large
-                
-              
    
-              
    
-                avatar-medium
-                
-              
    
-              
    
-                avatar-medium
-                
-              
    
-              
    
-                avatar-extra-small
-                
-              
    
-            
    
-            
    -           
-        <div class="avatar-comp">
-          <img
-            class="img-big badge-utils"
-            alt="avatar-large"
-            src="../resources/man.svg"
-            width="96"
-            height="96"
-          />
-          <span class="avatar-badge avatar-badge-large"></span>
-        </div>
-          
-      
    
-            
    -          
-        <div class="avatar-comp">
-          <img
-            class="img-medium badge-utils"
-            alt="avatar-medium"
-            src="../resources/man.svg"
-            width="64"
-            height="64"
-          />
-          <span class="avatar-badge avatar-badge-medium"></span>
-        </div>
-        
-      
    
-            
    -          
-        <div class="avatar-comp">
-          <img
-            class="img-small badge-utils"
-            alt="avatar-medium"
-            src="../resources/man.svg"
-            width="48"
-            height="48"
-          />
-          <span class="avatar-badge avatar-badge-small"></span>
-        </div>
-          
-      
    
-            
    -          
-        <div class="avatar-comp">
-          <img
-            class="img-ex-small badge-utils"
-            alt="avatar-extra-small"
-            src="../resources/man.svg"
-            width="32"
-            height="32"
-          />
-          <span class="avatar-badge avatar-badge-ex-small"></span>
-        </div>
-          
-      
    
-          
    
-          
-
-          
    
-            Buttons
-          
    
-
-          
-          
    
-            
-            
    
-              
    
-                
-                
-                
-                
-              
    
-              
    -                
-                  <button class="button__primary">ADD TO CART</button> 
-                
-              
    
-              
    -                
-                  <button class="button__secondary">ADD TO CART</button>
-                
-              
    
-              
    -                
-                  <button class="button__primary button--round">ADD TO CART</button>      
-                
-              
    
-              
    -                
-                  <button class="button__secondary button--round">ADD TO CART</button>
-                
    
-            
    
-            
-
-            
-            
    
-              
    
-                
-                
-                
-                  
-                    githuv_icon
-                  
-                  Github
-                
-              
    
-              
    -                
-                  <a href="#" class="button__link-button button--round">
-                    <span class="svg--right-margin">
-                      <!-- put your choice of svg here -->
-                    </span>
-                      <!-- put your text -->
-                  </a>
-                
-              
    
-            
    
-            
-
-            
-            
    
-              
    
-                
-                
-                
-                
-              
    
-              
    -                
-                  <button class="icon__button icon__cart">
-                    <img src="./svgs/white-cart.svg" alt="cart_icon" />
-                  </button>
-                
-              
    
-              
    -                
-                  <button class="icon__button icon__heart">
-                    <img src="./svgs/white-heart.svg" alt="heart_icon" />
-                  </button> 
-                
-              
    
-              
    -                
-                  <button class="icon__button icon__home">
-                    <img src="./svgs/white-home.svg" alt="home_icon" />
-                  </button> 
-                
-              
    
-              
    -                
-                  <button class="icon__button icon__profile">
-                    <img src="./svgs/white-profile.svg" alt="profile_icon" />
-                  </button>
-                
-              
    
-            
    
-            
-
-            
-            
    
-              
    
-                
-                
-                
-              
    
-              
                     
-                
-                  <button class="floating__button">
-                    <!-- put your choice of svg here -->
-                  </button>
-                
-              
    
-            
    
-            
-          
    
-          
-
-          
    
-            Cards
-          
    
-
-          
-          
    
-            
    
-              
    
-                
    
-                  
-                    
-                      product
-                      
-                    
-                    Lorem ipsum
-                    Lorem ipsum dolor sit Lorem
-                    
-                      rating_icon
-                      4.5
-                    
-                    ₹ 2500
-                  
-                
    
-              
    
-              
-
-              
    -                
-                  <div class="product-container">
-                    <a href="#" class="product-info">
-                      <span class="product__img__container">
-                        <img
-                          class="product-img product-info__img"
-                          src="https://source.unsplash.com/random/"
-                          alt="product"
-                        />
-                        <button class="wish-btn">
-                          <img src="./svgs/product-wish.svg" alt="wish_btn" />
-                        </button>
-                      </span>
-                      Lorem ipsum
-                      <span class="product-info__small">Lorem ipsum dolor sit Lorem</span>
-                      <span class="product-info__rating">
-                        <img src="./svgs/rating.svg" alt="rating_icon" />
-                        4.5
-                      </span>
-                      <span class="price-tag">₹ 2500</span>
-                    </a>
-                </div>
-                
-              
    
-            
    
-            
-
-            
    
-              
    
-                
    
-                  
-                    
-                      
-                      product
-                      
-                    
-
-                    lorem ipsum Lorem ipsum dolor sit amet consectetur
-                      adipisicing elit. Distinctio, veniam!
-                    Lorem ipsum dolor sit Lorem Lorem, ipsum dolor sit amet
-                      consectetur adipisicing elit. Quisquam, ipsa.
-                    
-                      rating_icon
-                      4.5
-                    
-                    Rs. 250
-                  
-
-                  
-                
    
-              
    
-              
-              
    -                
-                  <div class="product-container">
-                      
-                      <a href="#" class="product-info">
-                      <span class="product__img__container">
-                        <button class="close-btn">
-                          <img src="./svgs/close-btn.svg" alt="close_btn" />
-                        </button>
-                        <img
-                          class="product-img product-info__img"
-                          src="https://source.unsplash.com/random/"
-                          alt="product"
-                        />
-                        <button class="wish-btn">
-                          <img src="./svgs/product-wish.svg" alt="wish_btn" />
-                        </button>
-                      </span>
-                        Lorem ipsum
-                        <span class="product-info__small"
-                          >Lorem ipsum dolor sit Lorem</span
-                        >
-                        <span class="product-info__rating">
-                          <img src="./svgs/rating.svg" alt="rating_icon" />
-                          4.5
-                        </span>
-                        <span class="price-tag">Rs. 250</span></a
-                      >
-                      
-                      <button class="primary-btn">ADD TO CART</button>
-                  </div> 
-                
-            
    
-            
    
-            
-
-            
    
-              
    
-                
    
-                  
-                    
-                      product
-                      
-                    
-
-                    lorem ipsum Lorem ipsum dolor sit amet consectetur
-                      adipisicing elit. Distinctio, veniam!
-                    Lorem ipsum dolor sit Lorem Lorem, ipsum dolor sit amet
-                      consectetur adipisicing elit. Quisquam, ipsa.
-                    
-                      rating_icon
-                      4.5
-                    
-                    Rs. 250
-                  
-
-                  
-                  
    
-                    
-                     OUT OF STOCK 
-                  
    
-                
    
-              
    
-              
    -                
-                  <div class="product-container">
-                  <a href="#" class="product-info">
-                    <span class="product__img__container">
-                      <img
-                        class="product-img product-info__img"
-                        src="https://source.unsplash.com/random/"
-                        alt="product"
-                      />
-                      <button class="wish-btn">
-                        <img src="./svgs/product-wish.svg" alt="wish_btn" />
-                      </button>
-                    </span>
-                    <span class="product-info__text"
-                      >lorem ipsum Lorem ipsum dolor sit amet consectetur
-                      adipisicing elit. Distinctio, veniam!</span
-                    >
-                    <span class="product-info__small"
-                      >Lorem ipsum dolor sit Lorem Lorem, ipsum dolor sit amet
-                      consectetur adipisicing elit. Quisquam, ipsa.</span
-                    >
-                    <span class="product-info__rating">
-                      <img src="./svgs/rating.svg" alt="rating_icon" />
-                      4.5
-                    </span>
-                    <span class="price-tag">Rs. 250</span>
-                  </a>
-                  <button class="primary-btn">ADD TO CART</button>
-                  <div class="overlay-div">
-                    <button class="close-btn">
-                      <img src="./svgs/close-btn.svg" alt="close-btn" />
-                    </button>
-                    <span class="overlay-text"> OUT OF STOCK </span>
-                  </div>
-                </div>
-                
-              
    
-              
-            
    
-            
-            
    
-              
    
-                
    
-                  
    CARD TITLE
    
-                  
    
-                    I am a very simple card. I am good at containing small bits
-                    of information. I am convenient because I require little
-                    markup to use effectively.
-                  
    
-                
    
-              
    
-              
-              
    -                
-                  <div class="text-card">
-                    <h4 class="text-card-title">---card title---</h4>
-                    <p class="text-card-info">
-                      --- enter your text here ---
-                    </p>
-                  </div>
-              
-            
    
-            
    
-            
-            
    
-              
    
-                
    
-                  
-                    product
-                  
    
-                    
    
-                      
    Lorem ipsum
    
-                      Lorem ipsum dolor sit amet.
-                      Rs. 250
-                      
    
-                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                        Explicabo, nulla. Lorem ipsum dolor sit amet.
-                      
    
-                    
    
-                    
-                    
-                  
    
-                
    
-              
    
-              
-              
    -                  
-                    <div class="horizontal-product-container">
-                      <a href="#" class="product-info hcard-product-info">
-                        <img
-                          class="product-img hcard-img"
-                          src="https://source.unsplash.com/random/"
-                          alt="product"
-                      /></a>
-                      <div class="second-horizontal-section">
-                        <div class="hsection_info">
-                          <h3 class="hcard-title">Lorem ipsum</h3>
-                          <small class="hcard-title-desc"
-                            >Lorem ipsum dolor sit amet.</small
-                          >
-                          <span class="price-tag hcard-price">Rs. 250</span>
-                          <p class="hcard-product-desc">
-                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                            Explicabo, nulla. Lorem ipsum dolor sit amet.
-                          </p>
-                        </div>
-                        <button class="primary-btn horizontal-primary-btn">
-                          ADD TO CART
-                        </button>
-                        <button class="wish-btn hcard-wish-btn">
-                          <img src="./svgs/wish-btn.svg" alt="wish-btn" />
-                        </button>
-                      </div>
-                    </div>
-                  
-              
    
-            
    
-            
-            
    
-              
    
-                
    
-                  
-                    product
-                  
-                  
    
-                    
    
-                      
    
-                        Lorem ipsum dolor sit
-                      
    
-                      Lorem ipsum dolor sit amet consectetur
-                        adipisicing.
-                    
    
-                    
    
-                      RATING
-                      star_icon
-                      star_icon
-                      star_icon
-                      star_icon
-                      star_icon
-                    
    
-                    
-                    
-                  
    
-                
    
-              
    
-              
-              
    -                
-                  <div class="shadow_card">
-                    <a href="#" class="shadow_card__productimgLink">
-                      <img
-                        class="product-img shadow_card__productimg"
-                        src="https://source.unsplash.com/random"
-                        alt="product"
-                      />
-                    </a>
-                    <div class="shadow_card__product-info">
-                      <div class="shadow_card__product-header">
-                        <h3 class="shadow_card__product-title">
-                          Lorem ipsum dolor sit
-                        </h3>
-                        <small class="font-family"
-                          >Lorem ipsum dolor sit amet consectetur
-                          adipisicing.</small
-                        >
-                      </div>
-                      <div class="shadow_card__product-rating">
-                        <span
-                          class="shadow_card__product-rating__title font-family"
-                          >RATING</span
-                        >
-                        <img src="./svgs/star.svg" alt="star_icon" />
-                        <img src="./svgs/star.svg" alt="star_icon" />
-                        <img src="./svgs/star.svg" alt="star_icon" />
-                        <img src="./svgs/star.svg" alt="star_icon" />
-                        <img src="./svgs/star.svg" alt="star_icon" />
-                      </div>
-                      <button class="primary-btn shadow_card--btn">
-                        ADD TO CART
-                      </button>
-                      <button class="shadow_card--wishbtn">
-                        <img src="./svgs/wish-btn.svg" alt="wish_btn" />
-                      </button>
-                    </div>
-                </div>
-                
-              
    
-            
    
-            
-          
    
-          
-
-          
    
-            Image
-          
    
-
-          
-          
    
-            
    
-              
    
-                round_img
-              
    
-              
    -                  
-                  <img
-                    class="responsive-img"
-                    src="https://source.unsplash.com/random"
-                    alt="round_img"
-                  />
-                  
-              
    
-            
    
-            
    
-              
    
-                round_img
-              
    
-              
    -                  
-                    <img
-                      class="responsive-img img-round"
-                      src="https://source.unsplash.com/random"
-                      alt="round_img"
-                    />
-                  
-                
    
-            
    
-          
    
-          
-
-          
    
-            Inputs
-          
    
-
-          
-          
    
-            
    
-              
    
-                
    
-                  
-                  
-                  
-                
    
-              
    
-              
    -        
-          <input
-            type="text"
-            class="input__text input--common"
-            placeholder="Enter Your Name"
-            value="hello,world"
-            required
-          />
-        
-      
    
-              
    -        
-           <input
-            type="email"
-            class="input__email input--common"
-            placeholder="Enter Email"
-            required
-          />
-        
-      
    
-              
    -                
-                  <input
-                    type="password"
-                    class="input_password input--common"
-                    placeholder="Enter Password(must be 8 chars long)"
-                    pattern=".{8,}"
-                    required
-                  />
-                
-              
    
-            
    
-          
    
-          
-
-          
    Lists
    
-          
-          
    
-            
    
-              
      
-                
    • List Item 1
      • 
-                
    • List Item 2
      • 
-                
    • List Item 3
      • 
-                
    • List Item 4
      • 
-                
    • List Item 5
      • 
-                
    • List Item 6
      • 
-              
    
-              
    -                  
-                      <ul class="spaced-list">
-                        <li class="spaced-list__item">List Item 1</li>
-                        <li class="spaced-list__item">List Item 2</li>
-                        <li class="spaced-list__item">List Item 3</li>
-                        <li class="spaced-list__item">List Item 4</li>
-                        <li class="spaced-list__item">List Item 5</li>
-                        <li class="spaced-list__item">List Item 6</li>
-                      </ul>
-                  
-              
    
-            
    
-            
    
-              
    
-                
      
-                  
    • 
-                    info_icon
-                    
-                      
      
-                        Lorem ipsum dolor sit amet.
-                      
      
-                      Lorem, ipsum dolor sit amet consectetur adipisicing
-                        elit.
-                          
-                  
      • 
-                  
    • 
-                    info_icon
-                    
-                      
      
-                        Lorem ipsum dolor sit amet.
-                      
      
-                      Lorem, ipsum dolor sit amet consectetur adipisicing
-                        elit.
-                          
-                  
      • 
-                  
    • 
-                    info_icon
-                    
-                      
      
-                        Lorem ipsum dolor sit amet.
-                      
      
-                      Lorem, ipsum dolor sit amet consectetur adipisicing
-                        elit.
-                          
-                  
      • 
-                  
    • 
-                    info_icon
-                    
-                      
      
-                        Lorem ipsum dolor sit amet.
-                      
      
-                      Lorem, ipsum dolor sit amet consectetur adipisicing
-                        elit.
-                          
-                  
      • 
-                
    
-              
    
-              
    -          
-             <ul class="stacked-list">
-                <li class="stacked-list__item info--item">
-                    <img src="../svgs/info-alert.svg" alt="info_icon" />
-                    <span class="stacked-list__right">
-                    <h3 class="stacked-list__title">Lorem ipsum dolor sit amet.</h3>
-                    <small
-                        >Lorem, ipsum dolor sit amet consectetur adipisicing
-                        elit.</small
-                    >
-                    </span>
-                </li>
-                <li class="stacked-list__item error--item">
-                    <img src="../svgs/error-alert.svg" alt="info_icon" />
-                    <span class="stacked-list__right">
-                    <h3 class="stacked-list__title">Lorem ipsum dolor sit amet.</h3>
-                    <small
-                        >Lorem, ipsum dolor sit amet consectetur adipisicing
-                        elit.</small
-                    >
-                    </span>
-                </li>
-                <li class="stacked-list__item warning--item">
-                    <img src="../svgs/exclamation.svg" alt="info_icon" />
-                    <span class="stacked-list__right">
-                    <h3 class="stacked-list__title">Lorem ipsum dolor sit amet.</h3>
-                    <small
-                        >Lorem, ipsum dolor sit amet consectetur adipisicing
-                        elit.</small
-                    >
-                    </span>
-                </li>
-                <li class="stacked-list__item success--item">
-                    <img src="../svgs/success-alert.svg" alt="info_icon" />
-                    <span class="stacked-list__right">
-                    <h3 class="stacked-list__title">Lorem ipsum dolor sit amet.</h3>
-                    <small
-                        >Lorem, ipsum dolor sit amet consectetur adipisicing
-                        elit.</small
-                    >
-                    </span>
-                </li>
-            </ul>
-          
-      
    
-            
    
-          
    
-          
-
-          
    
-            Navigation
-          
    
-
-          
-          
    
-            
    
+            
+              Get Started
+            
+            
-              
-              
    -                
-                  <nav class="navbar-component">
-                    <div class="navbar-component__menu">
-                      <button class="navbar-component__menu__btn">
-                        <img src="./svgs/menu-btn.svg" alt="menu-btn" />
-                      </button>
-                      <div class="navbar-component__menu_social">
-                        <a href="#" class="navbar-component__menu__social__github">
-                          <img src="./svgs/nav-github.svg" alt="nav-github-icon" />
-                        </a>
-                        <a href="#" class="navbar-component__menu__social__twitter">
-                          <img src="./svgs/nav-twitter.svg" alt="nav-github-icon" />
-                        </a>
-                      </div>
-                    </div>
-                    <div class="navbar-component__title">
-                      <span class="navbar-component__title__text">UNDEFINED</span>
-                    </div>
-                </nav>
-                
-              
    
-            
    
-          
    
-          
-
-          
    
-            Modal
-          
    
-          
-          
    
-            
    
-              
    
-                
-              
    
-              
    -             
-                <div id="modal" class="modal">
-                    <section class="modal__article">
-                    <header class="modal__article__header">
-                        <h2 class="modal__article__header__text">Modal Title</h2>
-                        <button class="modal__close-btn" onclick="{}">
-                            <img src="../svgs/close-btn.svg" alt="close_btn" />
-                        </button>
-
-                    </header>
-                    <div class="modal__article__info">
-                        <p>
-                            --- enter you modal text ---
-                        </p>
-                    </div>
-                    <footer class="modal__article__footer">
-                        <button id="close-modal"class="button__primary button--round" onclick="{}">Close</button>
-                    <button class="button__primary button--round">
-                        Secondary Action
-                    </button>
-  
-                    </footer>
-                    </section>
-                </div>
-             
-          
    
-            
    
-            
-          
    
-          
-
-          
    
-            Rating
-          
    
-          
-          
    
-            
    
-              
    
-                
-                  rating_icon
-                  4.5
-                
-              
    
-              
    -                  
-                    <span class="rating">
-                        <img
-                            src="../svgs/rating.svg"
-                            class="rating__icon"
-                            alt="rating_icon"
-                        />
-                        4.5
-                    </span>
-                  
-              
    
-            
    
-          
    
-          
-
-          
    
-            Slider
-          
    
-          
-          
    
-            
    
-              
    
-                
-              
    
-              
    -                  
-                    <input type="range" class="slider" />
-                  
-              
    
-            
    
-          
    
-          
-          
    
-            Two Column Grid
-          
    
-          
-          
    
-            
    
-              
    
-                
-                  
-                    product
-                    
-                  
-                  Lorem ipsum
-                  Lorem ipsum dolor sit Lorem
-                  
-                    rating_icon
-                    4.5
-                  
-                  ₹ 2500
-                
-              
    
-              
    
-                
-                  
-                    product
-                    
-                  
-                  Lorem ipsum
-                  Lorem ipsum dolor sit Lorem
-                  
-                    rating_icon
-                    4.5
-                  
-                  ₹ 2500
-                
-              
    
-            
    
-            
    -              
-                <div class="two-col-grid">
-                --- Enter your element here ---
-                </div> 
-              
-            
    
-          
    
-          
-
-          
    
-            Three Column Grid
-          
    
-
-          
-          
    
-            
    
-              
    
-                
-                  
-                    product
-                    
-                  
-                  Lorem ipsum
-                  Lorem ipsum dolor sit Lorem
-                  
-                    rating_icon
-                    4.5
-                  
-                  ₹ 2500
-                
-              
    
-              
    
-                
-                  
-                    product
-                    
-                  
-                  Lorem ipsum
-                  Lorem ipsum dolor sit Lorem
-                  
-                    rating_icon
-                    4.5
-                  
-                  ₹ 2500
-                
-              
    
-
-              
    
-                
-                  
-                    product
-                    
-                  
-                  Lorem ipsum
-                  Lorem ipsum dolor sit Lorem
-                  
-                    rating_icon
-                    4.5
-                  
-                  ₹ 2500
-                
-              
    
-            
    
-            
    -              
-                <div class="three-col-grid">
-                    --- enter your elements here ---
-                </div> 
-              
-            
    
-          
    
-          
-          
    
-            Text Utilities
-          
    
-          
-          
    
-            
      
-              
    • 
-                
      I'm Heading
      
-              
      • 
-              
    • 
-                
      I'm Small
      
-              
      • 
-              
    • 
-                
      I'm Gray
      
-              
      • 
-              
    • 
-                
      I'm Center
      
-              
      • 
-            
    
-            
    -              
-                <h1 class="heading">I'm Heading</h1>
-              
-            
    
-            
    -              
-                <p class="small-text">I'm Small</p>
-              
-            
    
-            
    -              
-                <p class="gray-text">I'm Gray</p>
-              
-            
    
-            
    -              
-                <p class="center-text">I'm Center</p>
-              
-            
    
-          
    
-          
-
-          
    
-            Snackbar
-          
    
-          
-          
    
-            
    
-              
    
-                
-              
    
-              
    
-                
  • 
-                  info_icon
-                  
-                    
    
-                      Lorem ipsum dolor sit amet.
-                    
    
-                    Lorem, ipsum dolor sit amet consectetur adipisicing
-                      elit.
-                      
-                
    • 
-                
-              
    
-              
    -                  
-                      <div id="snackbar-item" class="snackbar">
-                          <li class="stacked-list__item info--item">
-                          <img src="../svgs/info-alert.svg" alt="info_icon" />
-                          <span class="stacked-list__right">
-                              <h3 class="stacked-list__title">Lorem ipsum dolor sit amet.</h3>
-                              <small
-                              >Lorem, ipsum dolor sit amet consectetur adipisicing elit.</small
-                              >
-                          </span>
-                          </li>
-                          <button class="snackbar__close-btn" onclick="closeSnackbar()">
-                          <img src="../svgs/close-btn.svg" alt="close_btn" />
-                          </button>
-                      </div> 
-                  
-              
    
-            
    
+              Download
+            
           
    
-          
         
    
-        
       
    
-      
-      
-        
-          top_icon
-        
-      
     
    
-    
-    
-    
-    
   
 
diff --git a/landing-page.css b/landing-page.css
deleted file mode 100644
index 6dc304c..0000000
--- a/landing-page.css
+++ /dev/null
@@ -1,107 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
-@import url('./index.css');
-@import url('./components/button.css');
-@import url('./components/images.css');
-
-* {
-  box-sizing: border-box;
-
-  margin: 0;
-
-  scrollbar-width: thin;
-}
-
-:root {
-  --primary-font: Lato;
-  --primary-color: #111827;
-  --border-color: #e5e5e5;
-  --secondary-color: #fff;
-}
-
-.landing-page {
-  padding: 0 1rem;
-}
-
-.landing-page .navbar {
-  border-bottom: 3px solid var(--primary-color);
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.5rem 0;
-}
-
-.landing-page .navbar__title {
-  justify-content: flex-start;
-  border: 0;
-  padding: 0;
-  max-width: max-content;
-}
-
-.navbar__navigation .button__link-button {
-  background-color: transparent;
-  border: 0;
-  color: var(--primary-color);
-  box-shadow: none;
-}
-
-.landing-page .navbar__navigation {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr) auto;
-  /* justify-content: center; */
-  justify-items: center;
-}
-
-.landing-page .navbar__menu__social__github {
-  padding: 0.3rem;
-  margin: 0.4rem;
-  margin-right: 0;
-  width: max-content;
-}
-
-.landing-page .responsive-img {
-  object-fit: contain;
-}
-
-.landing-page__content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: 1rem;
-}
-
-.landing-page__content__buttons {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 1rem;
-}
-
-.landing-page__content .button__link-button {
-  display: flex;
-  cursor: pointer;
-  min-width: 10rem;
-}
-
-.landing-page__hero-line {
-  font-family: var(--primary-font);
-  text-align: center;
-  font-weight: 900;
-  max-width: 100vw;
-}
-
-.landing-page__content .svg--right-margin {
-  display: block;
-  margin-left: 0.5rem;
-}
-
-.button__github {
-  color: var(--primary-color);
-  background-color: var(--secondary-color);
-}
-
-@media screen and (min-width: 576px) {
-  .navbar__title {
-    position: relative;
-  }
-}
diff --git a/landing-page.html b/landing-page.html
deleted file mode 100644
index 9c242a2..0000000
--- a/landing-page.html
+++ /dev/null
@@ -1,58 +0,0 @@
-
-
-  
-    
-    
-    
-    Satori UI
-    
-    
-  
-  
-    
    
-      
-      
    
-        
    
-          landing-page__img
-        
    
-        
    
-          
    
-            A Modern CSS Component Library for Building Good Projects.
-          
    
-          
    
-            
-              Get Started
-            
-            
-              Download
-            
-          
    
-        
    
-      
    
-    
    
-  
-
diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json
new file mode 100644
index 0000000..1837ea4
--- /dev/null
+++ b/node_modules/.package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "Component_Library",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {}
+}
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..1837ea4
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "Component_Library",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {}
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..1c80324
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "live-server": "^1.2.1"
+  }
+}

From 408ec457320cdb8e7ce8a342079d63d55341aa1c Mon Sep 17 00:00:00 2001
From: jugalkpatel 
Date: Mon, 14 Jun 2021 19:36:09 +0530
Subject: [PATCH 78/83] fix: fix scrollbars overflow

---
 .gitignore                                          |   0
 .vscode/settings.json                               |   0
 README.md                                           |   0
 components/.gitignore                               |   0
 components/Text-Utilities.css                       |   0
 components/alerts.css                               |   0
 components/avatar.css                               |   0
 components/badge.css                                |   6 ++++++
 components/badge.html                               |   0
 components/button.css                               |   0
 components/cards.css                                |   0
 components/compiled.css                             |   0
 components/images.css                               |   0
 components/inputs.css                               |   0
 components/lists.css                                |   0
 components/modal.css                                |   0
 components/modal.js                                 |   0
 components/navbar.css                               |   0
 components/rating.css                               |   0
 components/showSnackbar.js                          |   0
 components/slider.css                               |   0
 components/threeItemsGrid.css                       |   0
 components/toast-notify-snackbar.css                |   0
 components/twoItemsGrid.css                         |   0
 components/utils.css                                |   0
 docs.css                                            |   0
 docs.html                                           |   0
 index.css                                           |   0
 index.html                                          |   9 +++------
 node_modules/.package-lock.json                     |   0
 package-lock.json                                   |   0
 package.json                                        |   0
 resources/bell.svg                                  |   0
 resources/github-landing.svg                        |   0
 resources/github.svg                                |   0
 resources/heart.svg                                 |   0
 resources/heart1.svg                                |   0
 .../iconfinder_1_Twitter_colored_svg_5296514.svg    |   0
 resources/iconfinder_GitHub_4745725.svg             |   0
 resources/iconfinder_heart_2561448.svg              |   0
 resources/iconfinder_shopping-cart_2561279.svg      |   0
 resources/landing-page-img.svg                      |   0
 resources/man.svg                                   |   0
 resources/menu.svg                                  |   0
 resources/prism.css                                 |   0
 resources/prism.js                                  |   0
 resources/resources.zip                             | Bin
 resources/twitter.svg                               |   0
 resources/x.svg                                     |   0
 svgs/black-bell.svg                                 |   0
 svgs/black-cart.svg                                 |   0
 svgs/black-heart.svg                                |   0
 svgs/close-btn.svg                                  |   0
 svgs/correct.svg                                    |   0
 svgs/error-alert.svg                                |   0
 svgs/exclamation.svg                                |   0
 svgs/facebook.svg                                   |   0
 svgs/github.svg                                     |   0
 svgs/info-alert.svg                                 |   0
 svgs/menu-btn.svg                                   |   0
 svgs/menu.svg                                       |   0
 svgs/nav-github.svg                                 |   0
 svgs/nav-twitter.svg                                |   0
 svgs/plus.svg                                       |   0
 svgs/product-wish.svg                               |   0
 svgs/rating.svg                                     |   0
 svgs/star.svg                                       |   0
 svgs/success-alert.svg                              |   0
 svgs/top.svg                                        |   0
 svgs/twitter.svg                                    |   0
 svgs/warning-alert.svg                              |   0
 svgs/white-cart.svg                                 |   0
 svgs/white-heart.svg                                |   0
 svgs/white-home.svg                                 |   0
 svgs/white-profile.svg                              |   0
 svgs/wish-btn.svg                                   |   0
 svgs/zen-brush-symbol.svg                           |   0
 svgs/zen.svg                                        |   0
 78 files changed, 9 insertions(+), 6 deletions(-)
 mode change 100644 => 100755 .gitignore
 mode change 100644 => 100755 .vscode/settings.json
 mode change 100644 => 100755 README.md
 mode change 100644 => 100755 components/.gitignore
 mode change 100644 => 100755 components/Text-Utilities.css
 mode change 100644 => 100755 components/alerts.css
 mode change 100644 => 100755 components/avatar.css
 mode change 100644 => 100755 components/badge.css
 mode change 100644 => 100755 components/badge.html
 mode change 100644 => 100755 components/button.css
 mode change 100644 => 100755 components/cards.css
 mode change 100644 => 100755 components/compiled.css
 mode change 100644 => 100755 components/images.css
 mode change 100644 => 100755 components/inputs.css
 mode change 100644 => 100755 components/lists.css
 mode change 100644 => 100755 components/modal.css
 mode change 100644 => 100755 components/modal.js
 mode change 100644 => 100755 components/navbar.css
 mode change 100644 => 100755 components/rating.css
 mode change 100644 => 100755 components/showSnackbar.js
 mode change 100644 => 100755 components/slider.css
 mode change 100644 => 100755 components/threeItemsGrid.css
 mode change 100644 => 100755 components/toast-notify-snackbar.css
 mode change 100644 => 100755 components/twoItemsGrid.css
 mode change 100644 => 100755 components/utils.css
 mode change 100644 => 100755 docs.css
 mode change 100644 => 100755 docs.html
 mode change 100644 => 100755 index.css
 mode change 100644 => 100755 index.html
 mode change 100644 => 100755 node_modules/.package-lock.json
 mode change 100644 => 100755 package-lock.json
 mode change 100644 => 100755 package.json
 mode change 100644 => 100755 resources/bell.svg
 mode change 100644 => 100755 resources/github-landing.svg
 mode change 100644 => 100755 resources/github.svg
 mode change 100644 => 100755 resources/heart.svg
 mode change 100644 => 100755 resources/heart1.svg
 mode change 100644 => 100755 resources/iconfinder_1_Twitter_colored_svg_5296514.svg
 mode change 100644 => 100755 resources/iconfinder_GitHub_4745725.svg
 mode change 100644 => 100755 resources/iconfinder_heart_2561448.svg
 mode change 100644 => 100755 resources/iconfinder_shopping-cart_2561279.svg
 mode change 100644 => 100755 resources/landing-page-img.svg
 mode change 100644 => 100755 resources/man.svg
 mode change 100644 => 100755 resources/menu.svg
 mode change 100644 => 100755 resources/prism.css
 mode change 100644 => 100755 resources/prism.js
 mode change 100644 => 100755 resources/resources.zip
 mode change 100644 => 100755 resources/twitter.svg
 mode change 100644 => 100755 resources/x.svg
 mode change 100644 => 100755 svgs/black-bell.svg
 mode change 100644 => 100755 svgs/black-cart.svg
 mode change 100644 => 100755 svgs/black-heart.svg
 mode change 100644 => 100755 svgs/close-btn.svg
 mode change 100644 => 100755 svgs/correct.svg
 mode change 100644 => 100755 svgs/error-alert.svg
 mode change 100644 => 100755 svgs/exclamation.svg
 mode change 100644 => 100755 svgs/facebook.svg
 mode change 100644 => 100755 svgs/github.svg
 mode change 100644 => 100755 svgs/info-alert.svg
 mode change 100644 => 100755 svgs/menu-btn.svg
 mode change 100644 => 100755 svgs/menu.svg
 mode change 100644 => 100755 svgs/nav-github.svg
 mode change 100644 => 100755 svgs/nav-twitter.svg
 mode change 100644 => 100755 svgs/plus.svg
 mode change 100644 => 100755 svgs/product-wish.svg
 mode change 100644 => 100755 svgs/rating.svg
 mode change 100644 => 100755 svgs/star.svg
 mode change 100644 => 100755 svgs/success-alert.svg
 mode change 100644 => 100755 svgs/top.svg
 mode change 100644 => 100755 svgs/twitter.svg
 mode change 100644 => 100755 svgs/warning-alert.svg
 mode change 100644 => 100755 svgs/white-cart.svg
 mode change 100644 => 100755 svgs/white-heart.svg
 mode change 100644 => 100755 svgs/white-home.svg
 mode change 100644 => 100755 svgs/white-profile.svg
 mode change 100644 => 100755 svgs/wish-btn.svg
 mode change 100644 => 100755 svgs/zen-brush-symbol.svg
 mode change 100644 => 100755 svgs/zen.svg

diff --git a/.gitignore b/.gitignore
old mode 100644
new mode 100755
diff --git a/.vscode/settings.json b/.vscode/settings.json
old mode 100644
new mode 100755
diff --git a/README.md b/README.md
old mode 100644
new mode 100755
diff --git a/components/.gitignore b/components/.gitignore
old mode 100644
new mode 100755
diff --git a/components/Text-Utilities.css b/components/Text-Utilities.css
old mode 100644
new mode 100755
diff --git a/components/alerts.css b/components/alerts.css
old mode 100644
new mode 100755
diff --git a/components/avatar.css b/components/avatar.css
old mode 100644
new mode 100755
diff --git a/components/badge.css b/components/badge.css
old mode 100644
new mode 100755
index 62afea8..191a04f
--- a/components/badge.css
+++ b/components/badge.css
@@ -160,3 +160,9 @@
 .avatar-container .language-markup {
   height: 10rem;
 }
+
+
+.badge-div .language-markup {
+  overflow-y: hidden;
+  overflow-x: scroll;
+}
diff --git a/components/badge.html b/components/badge.html
old mode 100644
new mode 100755
diff --git a/components/button.css b/components/button.css
old mode 100644
new mode 100755
diff --git a/components/cards.css b/components/cards.css
old mode 100644
new mode 100755
diff --git a/components/compiled.css b/components/compiled.css
old mode 100644
new mode 100755
diff --git a/components/images.css b/components/images.css
old mode 100644
new mode 100755
diff --git a/components/inputs.css b/components/inputs.css
old mode 100644
new mode 100755
diff --git a/components/lists.css b/components/lists.css
old mode 100644
new mode 100755
diff --git a/components/modal.css b/components/modal.css
old mode 100644
new mode 100755
diff --git a/components/modal.js b/components/modal.js
old mode 100644
new mode 100755
diff --git a/components/navbar.css b/components/navbar.css
old mode 100644
new mode 100755
diff --git a/components/rating.css b/components/rating.css
old mode 100644
new mode 100755
diff --git a/components/showSnackbar.js b/components/showSnackbar.js
old mode 100644
new mode 100755
diff --git a/components/slider.css b/components/slider.css
old mode 100644
new mode 100755
diff --git a/components/threeItemsGrid.css b/components/threeItemsGrid.css
old mode 100644
new mode 100755
diff --git a/components/toast-notify-snackbar.css b/components/toast-notify-snackbar.css
old mode 100644
new mode 100755
diff --git a/components/twoItemsGrid.css b/components/twoItemsGrid.css
old mode 100644
new mode 100755
diff --git a/components/utils.css b/components/utils.css
old mode 100644
new mode 100755
diff --git a/docs.css b/docs.css
old mode 100644
new mode 100755
diff --git a/docs.html b/docs.html
old mode 100644
new mode 100755
diff --git a/index.css b/index.css
old mode 100644
new mode 100755
diff --git a/index.html b/index.html
old mode 100644
new mode 100755
index e27ead6..2643df9
--- a/index.html
+++ b/index.html
@@ -17,12 +17,9 @@
         
    
         
    
           Docs
-          About
+          
+            About
+