made a proper file structure

maitrakhatri · Feb 1, 2022 · 137ed08 · 137ed08
1 parent 836bca7
commit 137ed08
Show file tree

Hide file tree

Showing 28 changed files with 49 additions and 143 deletions.
diff --git a/alert/alert.css → CSS/Components/alert/alert.css b/alert/alert.css → CSS/Components/alert/alert.css
@@ -1,4 +1,4 @@
-@import url(../style.css);
+@import url(../../style.css);
 
 .alert {
     border-radius: 0.188rem;

diff --git a/alert/alert.html → CSS/Components/alert/alert.html b/alert/alert.html → CSS/Components/alert/alert.html
diff --git a/avatar/avatar.css → CSS/Components/avatar/avatar.css b/avatar/avatar.css → CSS/Components/avatar/avatar.css
@@ -1,4 +1,4 @@
-@import url(../style.css);
+@import url(../../style.css);
 
 .avatar {
     height: 2rem;

diff --git a/CSS/Components/avatar/avatar.html b/CSS/Components/avatar/avatar.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>avatar</title>
+    <link rel="stylesheet" href="avatar.css">
+</head>
+<body>
+
+    <img class="avatar avatar-round" src="../../../assets/avatar.svg" alt="avatar">
+    <img class="avatar-xl avatar-round" src="../../../assets/avatar.svg" alt="avatar">
+    <img class="avatar-xxl avatar-round" src="../../../assets/avatar.svg" alt="avatar">
+
+    <div><br></div> <div><br></div>
+
+    <img class="avatar avatar-square" src="../../../assets/avatar.svg" alt="avatar">
+    <img class="avatar-xl avatar-square" src="../../../assets/avatar.svg" alt="avatar">
+    <img class="avatar-xxl avatar-square" src="../../../assets/avatar.svg" alt="avatar">
+
+
+</body>
+</html>
diff --git a/badge/badge.css → CSS/Components/badge/badge.css b/badge/badge.css → CSS/Components/badge/badge.css
@@ -1,4 +1,4 @@
-@import url(../style.css);
+@import url(../../style.css);
 @import url(../avatar/avatar.css);
 
 .icon-with-badge {

diff --git a/badge/badge.html → CSS/Components/badge/badge.html b/badge/badge.html → CSS/Components/badge/badge.html
@@ -23,27 +23,27 @@
     <div class="badge-on-icon">
 
         <div class="icon-with-badge">
-            <img src="chat_black_48dp.svg" alt="chat icon with badge">
+            <img src="../../../assets/chat_black_48dp.svg" alt="chat icon with badge">
             <span class="badge bg-red">5</span>
         </div>
 
         <div class="icon-with-badge">
-            <img src="chat_black_48dp.svg" alt="chat icon with badge">
+            <img src="../../../assets/chat_black_48dp.svg" alt="chat icon with badge">
             <div class="badge bg-lightblue">13</div>
         </div>
 
         <div class="icon-with-badge">
-            <img src="chat_black_48dp.svg" alt="chat icon with badge">
+            <img src="../../../assets/chat_black_48dp.svg" alt="chat icon with badge">
             <div class="badge bg-blue">2</div>
         </div>
 
         <div class="icon-with-badge">
-            <img src="chat_black_48dp.svg" alt="chat icon with badge">
+            <img src="../../../assets/chat_black_48dp.svg" alt="chat icon with badge">
             <div class="badge bg-yellow">13</div>
         </div>
 
         <div class="icon-with-badge">
-            <img src="chat_black_48dp.svg" alt="chat icon with badge">
+            <img src="../../../assets/chat_black_48dp.svg" alt="chat icon with badge">
             <div class="badge bg-green">56</div>
         </div>
 
@@ -52,17 +52,17 @@
     <div class="badge-on-avatar">
 
         <div class="avatar-with-badge">
-            <img class="avatar avatar-round" src="avatar.svg" alt="avatar">
+            <img class="avatar avatar-round" src="../../../assets/avatar.svg" alt="avatar">
             <div class="badge-avatar bg-green"> </div>
         </div>
 
         <div class="avatar-with-badge">
-            <img class="avatar avatar-round" src="avatar.svg" alt="avatar">
+            <img class="avatar avatar-round" src="../../../assets/avatar.svg" alt="avatar">
             <div class="badge-avatar bg-red"> </div>
         </div>
 
         <div class="avatar-with-badge">
-            <img class="avatar avatar-round" src="avatar.svg" alt="avatar">
+            <img class="avatar avatar-round" src="../../../assets/avatar.svg" alt="avatar">
             <div class="badge-avatar bg-yellow"> </div>
         </div>
 

diff --git a/button/arrow_upward_white_24dp.svg → ...onents/button/arrow_upward_white_24dp.svg b/button/arrow_upward_white_24dp.svg → ...onents/button/arrow_upward_white_24dp.svg
diff --git a/button/button.css → CSS/Components/button/button.css b/button/button.css → CSS/Components/button/button.css
@@ -1,4 +1,4 @@
-@import url(../style.css);
+@import url(../../style.css);
 
 .btn {
     border: none;

diff --git a/button/button.html → CSS/Components/button/button.html b/button/button.html → CSS/Components/button/button.html
diff --git a/button/download_white_24dp.svg → ...Components/button/download_white_24dp.svg b/button/download_white_24dp.svg → ...Components/button/download_white_24dp.svg
diff --git a/card/card.css → CSS/Components/card/card.css b/card/card.css → CSS/Components/card/card.css
@@ -1,4 +1,4 @@
-@import url(../style.css);
+@import url(../../style.css);
 @import url(../badge/badge.css);
 
 .card {

diff --git a/card/card.html → CSS/Components/card/card.html b/card/card.html → CSS/Components/card/card.html
@@ -50,7 +50,7 @@
             </p>
         </div>
 
-        <span class="badge blue">5</span>
+        <span class="badge bg-lightblue">5</span>
 
     </div>
 

diff --git a/card/close_black_24dp.svg → CSS/Components/card/close_black_24dp.svg b/card/close_black_24dp.svg → CSS/Components/card/close_black_24dp.svg
diff --git a/image/image.css → CSS/Components/image/image.css b/image/image.css → CSS/Components/image/image.css
@@ -1,4 +1,4 @@
-@import url(../style.css);
+@import url(../../style.css);
 
 .img-res {
     width: 100%;

diff --git a/image/image.html → CSS/Components/image/image.html b/image/image.html → CSS/Components/image/image.html
diff --git a/input/input.css → CSS/Components/input/input.css b/input/input.css → CSS/Components/input/input.css
@@ -1,4 +1,4 @@
-@import url(../style.css);
+@import url(../../style.css);
 
 .input-group {
     display: flex;

diff --git a/input/input.html → CSS/Components/input/input.html b/input/input.html → CSS/Components/input/input.html
diff --git a/reset.css → CSS/reset.css b/reset.css → CSS/reset.css
diff --git a/style.css → CSS/style.css b/style.css → CSS/style.css
@@ -20,4 +20,12 @@
     --red: #F24236; 
     --yellow: #FCA311;
     --gray: #FAFAFA;
-}
+}
+
+@import url(./Components/alert/alert.css);
+@import url(./Components/avatar/avatar.css);
+@import url(./Components/badge/badge.css);
+@import url(./Components/button/button.css);
+@import url(./Components/card/card.css);
+@import url(./Components/image/image.css);
+@import url(./Components/input/input.css);
diff --git a/utils.css → CSS/utils.css b/utils.css → CSS/utils.css
diff --git a/avatar/avatar.svg → assets/avatar.svg b/avatar/avatar.svg → assets/avatar.svg
diff --git a/badge/chat_black_48dp.svg → assets/chat_black_48dp.svg b/badge/chat_black_48dp.svg → assets/chat_black_48dp.svg
diff --git a/avatar/avatar.html b/avatar/avatar.html
diff --git a/badge/avatar.svg b/badge/avatar.svg
diff --git a/docs/components.html b/docs/components.html
diff --git a/docs/designSystem.html b/docs/designSystem.html
diff --git a/docs/docs.css b/docs/docs.css
diff --git a/docs/gettingStarted.html b/docs/gettingStarted.html