Merge pull request #14 from Mohasin-Haque/rating-typography

Feat - added rating and typography component
Mohasin-Haque · Feb 7, 2022 · 4fd834d · 4fd834d
2 parents 98a56fa + 255d5a1
commit 4fd834d
Show file tree

Hide file tree

Showing 15 changed files with 321 additions and 73 deletions.
diff --git a/pages/alert.html b/pages/alert.html
@@ -38,9 +38,11 @@
             <a href="./card.html" class="item">Card</a>
             <a href="./dialogue.html" class="item">Dialogue</a>
             <a href="./image.html" class="item">Image</a>
-            <a href="./input.html" class="item">Input</a>       
+            <a href="./input.html" class="item">Input</a>
             <a href="./navbar.html" class="item">Navbar</a>
+            <a href="./rating.html" class="item">Ratings</a>
             <a href="./toast.html" class="item">Snackbar</a>
+            <a href="./typography.html" class="item">Typography</a>
         </div>
     </div>
     <div class="main-container-components">

diff --git a/pages/avatar.html b/pages/avatar.html
@@ -40,7 +40,9 @@
             <a href="./image.html" class="item">Image</a>
             <a href="./input.html" class="item">Input</a>
             <a href="./navbar.html" class="item">Navbar</a>
+            <a href="./rating.html" class="item">Ratings</a>
             <a href="./toast.html" class="item">Snackbar</a>
+            <a href="./typography.html" class="item">Typography</a>
         </div>
     </div>
     <div class="main-container-components">

diff --git a/pages/badge.html b/pages/badge.html
@@ -40,7 +40,9 @@
             <a href="./image.html" class="item">Image</a>
             <a href="./input.html" class="item">Input</a>
             <a href="./navbar.html" class="item">Navbar</a>
+            <a href="./rating.html" class="item">Ratings</a>
             <a href="./toast.html" class="item">Snackbar</a>
+            <a href="./typography.html" class="item">Typography</a>
         </div>
     </div>
     <div class="main-container-components">

diff --git a/pages/button.html b/pages/button.html
@@ -40,7 +40,9 @@
             <a href="./image.html" class="item">Image</a>
             <a href="./input.html" class="item">Input</a>
             <a href="./navbar.html" class="item">Navbar</a>
+            <a href="./rating.html" class="item">Ratings</a>
             <a href="./toast.html" class="item">Snackbar</a>
+            <a href="./typography.html" class="item">Typography</a>
         </div>
     </div>
     <div class="main-container-components">

diff --git a/pages/card.html b/pages/card.html
@@ -39,7 +39,9 @@
             <a href="./dialogue.html" class="item">Dialogue</a>
             <a href="./image.html" class="item">Image</a>
             <a href="./input.html" class="item">Input</a>
+            <a href="./rating.html" class="item">Ratings</a>
             <a href="./toast.html" class="item">Snackbar</a>
+            <a href="./typography.html" class="item">Typography</a>
         </div>
     </div>
 
@@ -73,13 +75,13 @@ <h2 class="card-heading">Techie Tessie T-shirt</h2>
                             Give yourself a cool look by this cool t-shirt. Made with pure cotton fabrics.
                         </p>
                     </div>
-                        <div class="card-actions">
-                            <button class="card-btn">Buy</button>
-                            <button class="card-btn">Add To Cart</button>
-                            <i class="fas fa-heart"></i>
-                            <i class="fas fa-share-alt"></i>
-                            <i class="fas fa-ellipsis-v"></i>
-                        </div>
+                    <div class="card-actions">
+                        <button class="card-btn">Buy</button>
+                        <button class="card-btn">Add To Cart</button>
+                        <i class="fas fa-heart"></i>
+                        <i class="fas fa-share-alt"></i>
+                        <i class="fas fa-ellipsis-v"></i>
+                    </div>
                 </div>
         </div>
         </section>
@@ -94,10 +96,10 @@ <h3 class="heading heading-avatar">Basic Card (Horizontal)</h3>
             for components use <span class="colored-text"> card-image,
                 card-author, card-content</span> etc. classes as
             shown below. </p>
-            <iframe class="code-snippet-display"
+        <iframe class="code-snippet-display"
             src="https://carbon.now.sh/embed?bg=rgba%28255%2C59%2C48%2C1%29&t=base16-light&wt=none&l=htmlmixed&width=680&ds=false&dsyoff=82px&dsblur=100px&wc=true&wa=true&pv=27px&ph=22px&ln=false&fl=1&fm=IBM+Plex+Mono&fs=14px&lh=143%25&si=false&es=2x&wm=false&code=%253C%21--%2520Horizontal%2520Card%2520--%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522card-container%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522card-horizontal%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522image-div%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522overlay-image%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cimg%2520class%253D%2522card-image%2520image-horizontal%2522%2520src%253D%2522..%252Fimages%252Fcard1.jpg%2522%2520alt%253D%2522error%2522%2520%252F%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522card-badge%2522%253ENew%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522card-content%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ch2%2520class%253D%2522card-heading%2522%253ETechie%2520Tessie%2520T-shirt%253C%252Fh2%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cp%2520class%253D%2522card-author%2522%253Eby%2520Techie%2520Tessie%253C%252Fp%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cp%2520class%253D%2522card-content%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520Give%2520yourself%2520a%2520cool%2520look%2520by%2520this%2520cool%2520t-shirt.%2520Made%2520with%2520pure%2520cotton%2520fabrics.%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fp%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522card-actions%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cbutton%2520class%253D%2522card-btn%2522%253EBuy%253C%252Fbutton%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cbutton%2520class%253D%2522card-btn%2522%253EAdd%2520To%2520Cart%253C%252Fbutton%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ci%2520class%253D%2522fas%2520fa-heart%2522%253E%253C%252Fi%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ci%2520class%253D%2522fas%2520fa-share-alt%2522%253E%253C%252Fi%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ci%2520class%253D%2522fas%2520fa-ellipsis-v%2522%253E%253C%252Fi%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E"
             sandbox="allow-scripts allow-same-origin">
-          </iframe>
+        </iframe>
         <div class="badge_container-main flex-center">
             <section>
                 <div class="card-container">
@@ -116,13 +118,13 @@ <h2 class="card-heading">Techie Tessie T-shirt</h2>
                             </p>
                         </div>
                     </div>
-                        <div class="card-actions">
-                            <button class="card-btn">Buy</button>
-                            <button class="card-btn">Add To Cart</button>
-                            <i class="fas fa-heart"></i>
-                            <i class="fas fa-share-alt"></i>
-                            <i class="fas fa-ellipsis-v"></i>
-                        </div>
+                    <div class="card-actions">
+                        <button class="card-btn">Buy</button>
+                        <button class="card-btn">Add To Cart</button>
+                        <i class="fas fa-heart"></i>
+                        <i class="fas fa-share-alt"></i>
+                        <i class="fas fa-ellipsis-v"></i>
+                    </div>
                 </div>
         </div>
         </section>
@@ -150,10 +152,10 @@ <h2 class="card-heading">Techie Tessie T-shirt</h2>
                             Give yourself a cool look by this cool t-shirt. Made with pure cotton fabrics.
                         </p>
                     </div>
-                        <div class="card-actions">
-                            <button class="card-btn">Buy</button>
-                            <button class="card-btn">Add To Cart</button>
-                        </div>
+                    <div class="card-actions">
+                        <button class="card-btn">Buy</button>
+                        <button class="card-btn">Add To Cart</button>
+                    </div>
                 </div>
         </div>
         </section>
@@ -182,11 +184,11 @@ <h2 class="card-heading">Techie Tessie T-shirt</h2>
                             Give yourself a cool look by this cool t-shirt. Made with pure cotton fabrics.
                         </p>
                     </div>
-                        <div class="card-actions">
-                            <i class="fas fa-heart"></i>
-                            <i class="fas fa-share-alt"></i>
-                            <i class="fas fa-ellipsis-v"></i>
-                        </div>
+                    <div class="card-actions">
+                        <i class="fas fa-heart"></i>
+                        <i class="fas fa-share-alt"></i>
+                        <i class="fas fa-ellipsis-v"></i>
+                    </div>
                 </div>
         </div>
         </section>
@@ -217,13 +219,13 @@ <h3 class="heading heading-avatar">Basic Card w/ text overlay</h3>
                             Give yourself a cool look by this cool t-shirt. Made with pure cotton fabrics.
                         </p>
                     </div>
-                        <div class="card-actions">
-                            <button class="card-btn">Buy</button>
-                            <button class="card-btn">Add To Cart</button>
-                            <i class="fas fa-heart"></i>
-                            <i class="fas fa-share-alt"></i>
-                            <i class="fas fa-ellipsis-v"></i>
-                        </div>
+                    <div class="card-actions">
+                        <button class="card-btn">Buy</button>
+                        <button class="card-btn">Add To Cart</button>
+                        <i class="fas fa-heart"></i>
+                        <i class="fas fa-share-alt"></i>
+                        <i class="fas fa-ellipsis-v"></i>
+                    </div>
                 </div>
         </div>
         </section>
@@ -257,13 +259,13 @@ <h2 class="card-heading">Techie Tessie T-shirt</h2>
                             Give yourself a cool look by this cool t-shirt. Made with pure cotton fabrics.
                         </p>
                     </div>
-                        <div class="card-actions">
-                            <button class="card-btn">Buy</button>
-                            <button class="card-btn">Add To Cart</button>
-                            <i class="fas fa-heart"></i>
-                            <i class="fas fa-share-alt"></i>
-                            <i class="fas fa-ellipsis-v"></i>
-                        </div>
+                    <div class="card-actions">
+                        <button class="card-btn">Buy</button>
+                        <button class="card-btn">Add To Cart</button>
+                        <i class="fas fa-heart"></i>
+                        <i class="fas fa-share-alt"></i>
+                        <i class="fas fa-ellipsis-v"></i>
+                    </div>
                 </div>
         </div>
         </section>
@@ -298,13 +300,13 @@ <h2 class="card-heading">Techie Tessie T-shirt</h2>
                             Give yourself a cool look by this cool t-shirt. Made with pure cotton fabrics.
                         </p>
                     </div>
-                        <div class="card-actions">
-                            <button class="card-btn">Buy</button>
-                            <button class="card-btn">Add To Cart</button>
-                            <i class="fas fa-heart"></i>
-                            <i class="fas fa-share-alt"></i>
-                            <i class="fas fa-ellipsis-v"></i>
-                        </div>
+                    <div class="card-actions">
+                        <button class="card-btn">Buy</button>
+                        <button class="card-btn">Add To Cart</button>
+                        <i class="fas fa-heart"></i>
+                        <i class="fas fa-share-alt"></i>
+                        <i class="fas fa-ellipsis-v"></i>
+                    </div>
                 </div>
         </div>
         </section>

diff --git a/pages/dialogue.html b/pages/dialogue.html
@@ -40,7 +40,9 @@
             <a href="./image.html" class="item">Image</a>
             <a href="./input.html" class="item">Input</a>
             <a href="./navbar.html" class="item">Navbar</a>
+            <a href="./rating.html" class="item">Ratings</a>
             <a href="./toast.html" class="item">Snackbar</a>
+            <a href="./typography.html" class="item">Typography</a>
         </div>
     </div>
     <div class="main-container-components">

diff --git a/pages/documentation.html b/pages/documentation.html
@@ -40,7 +40,9 @@
             <a href="./image.html" class="item">Image</a>
             <a href="./input.html" class="item">Input</a>
             <a href="./navbar.html" class="item">Navbar</a>
+            <a href="./rating.html" class="item">Ratings</a>
             <a href="./toast.html" class="item">Snackbar</a>
+            <a href="./typography.html" class="item">Typography</a>
         </div>
     </div>
 </body>

diff --git a/pages/image.html b/pages/image.html
@@ -40,7 +40,9 @@
             <a href="./image.html" class="item">Image</a>
             <a href="./input.html" class="item">Input</a>
             <a href="./navbar.html" class="item">Navbar</a>
+            <a href="./rating.html" class="item">Ratings</a>
             <a href="./toast.html" class="item">Snackbar</a>
+            <a href="./typography.html" class="item">Typography</a>
         </div>
     </div>
     <div class="main-container-components">

diff --git a/pages/input.html b/pages/input.html
@@ -40,7 +40,9 @@
             <a href="./image.html" class="item">Image</a>
             <a href="./input.html" class="item">Input</a>
             <a href="./navbar.html" class="item">Navbar</a>
+            <a href="./rating.html" class="item">Ratings</a>
             <a href="./toast.html" class="item">Snackbar</a>
+            <a href="./typography.html" class="item">Typography</a>
         </div>
     </div>
     <div class="main-container-components">