hrshmistry · hrshmistry · Mar 28, 2021 · Mar 28, 2021 · Mar 28, 2021 · Mar 29, 2021
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/Assets/Compact-CSS_banner.png b/Assets/Compact-CSS_banner.png
diff --git a/Assets/Compact-CSS_favicon.png b/Assets/Compact-CSS_favicon.png
diff --git a/Assets/banner.png b/Assets/banner.png
diff --git a/Assets/final_v1_gif.gif b/Assets/final_v1_gif.gif
diff --git a/Components/Alert/alert.css b/Components/Alert/alert.css
@@ -0,0 +1,59 @@
+@import url("/Util/util.css");
+
+/* Alert */
+.alert {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    border-radius: 0.2rem;
+    margin: 0.5rem 0;
+    padding: 1rem;
+}
+
+.alert>p {
+    padding-left: 1rem;
+}
+
+.alert-info {
+    background-color: #DBEAFE;
+    color: #1E3A8A;
+}
+
+.alert-success {
+    background-color: #D1FAE5;
+    color: #064E3B;
+}
+
+.alert-warning {
+    background-color: #FEF3C7;
+    color: #78350F;
+}
+
+.alert-danger {
+    background-color: #FEE2E2;
+    color: #7F1D1D;
+}
+
+.outline-alert-info {
+    background-color: #DBEAFE;
+    color: #1E3A8A;
+    border: solid 1px #1E3A8A;
+}
+
+.outline-alert-success {
+    background-color: #D1FAE5;
+    color: #064E3B;
+    border: solid 1px #064E3B;
+}
+
+.outline-alert-warning {
+    background-color: #FEF3C7;
+    color: #78350F;
+    border: solid 1px #78350F;
+}
+
+.outline-alert-danger {
+    background-color: #FEE2E2;
+    color: #7F1D1D;
+    border: solid 1px #7F1D1D;
+}
diff --git a/Components/Alert/alert.html b/Components/Alert/alert.html
@@ -0,0 +1,72 @@
+<!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>Alert</title>
+    <script src="https://kit.fontawesome.com/4dbfd910d5.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="/Alert/alert.css">
+    <link rel="stylesheet" href="/Components/Util/util.css">
+</head>
+
+<body style="display: flex; flex-direction: column; align-items: center;">
+    <div class="outer-div">
+        <h1>Alert</h1>
+        <div>Alerts are used to communicate a state that affects a system, feature or
+            page.</div>
+        <hr>
+    </div>
+    <h2>Simple Alert</h2>
+
+    <div class="outer-div cover">
+        <div class="alert alert-danger">
+            <i class="fas fa-exclamation-circle"></i>
+            <p>There was an error processing your request.</p>
+        </div>
+        <div class="alert alert-success">
+            <i class="fas fa-check-circle"></i>
+            <p>Data uploaded to the server. Fire on!</p>
+        </div>
+        <div class="alert alert-warning">
+            <i class="fas fa-exclamation-triangle"></i>
+            <p>Seems your account is about to expire.</p>
+        </div>
+        <div class="alert alert-info">
+            <i class="fas fa-info-circle"></i>
+            <p>Event is going live on July 30th. Get ready!</p>
+        </div>
+    </div>
+
+    <div class="outer-div">
+        <script src="https://gist.github.com/hrshmistry/33ade28c0651aedf63b33c22b85eb333.js"></script>
+    </div>
+
+    <h2>Outline Alert</h2>
+
+    <div class="outer-div cover">
+        <div class="alert outline-alert-danger">
+            <i class="fas fa-exclamation-circle"></i>
+            <p>There was an error processing your request.</p>
+        </div>
+        <div class="alert outline-alert-success">
+            <i class="fas fa-check-circle"></i>
+            <p>Data uploaded to the server. Fire on!</p>
+        </div>
+        <div class="alert outline-alert-warning">
+            <i class="fas fa-exclamation-triangle"></i>
+            <p>Seems your account is about to expire.</p>
+        </div>
+        <div class="alert outline-alert-info">
+            <i class="fas fa-info-circle"></i>
+            <p>Event is going live on July 30th. Get ready!</p>
+        </div>
+    </div>
+
+    <div class="outer-div">
+        <script src="https://gist.github.com/hrshmistry/6e2db63f5a209be952b51acc1085e0ff.js"></script>
+    </div>
+</body>
+
+</html>
diff --git a/Components/Avatar/avatar.css b/Components/Avatar/avatar.css
@@ -0,0 +1,75 @@
+@import url("/Util/util.css");
+
+.avatar {
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    margin: 0 0.5rem;
+}
+
+.sm {
+    width: 30px;
+    height: 30px;
+}
+
+.md {
+    width: 50px;
+    height: 50px;
+}
+
+.lg {
+    width: 70px;
+    height: 70px;
+}
+
+.xl {
+    width: 90px;
+    height: 90px;
+}
+
+.xxl {
+    width: 110px;
+    height: 110px;
+}
+
+.avatar-badge {
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    margin: 0 0.5rem;
+    position: relative;
+}
+
+.badge-online {
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    border: solid 2px var(--badge-border);
+    background-color: var(--badge-online);
+    position: absolute;
+    bottom: 0rem;
+    left: 2.7rem;
+}
+
+.badge-dnd {
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    border: solid 2px var(--badge-border);
+    background-color: var(--badge-dnd);
+    position: absolute;
+    bottom: 0rem;
+    left: 2.7rem;
+}
+
+.badge-idle {
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    border: solid 2px var(--badge-border);
+    background-color: var(--badge-idle);
+    position: absolute;
+    bottom: 0rem;
+    left: 2.7rem;
+}
+
diff --git a/Components/Avatar/avatar.html b/Components/Avatar/avatar.html
@@ -0,0 +1,76 @@
+https://bit.ly/2VTubQf<!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>
+    <script src="https://kit.fontawesome.com/4dbfd910d5.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="/Button/button.css">
+    <link rel="stylesheet" href="/Avatar/avatar.css">
+</head>
+
+<body style="display: flex; flex-direction: column;">
+
+    <div id="avatar">
+        <h1>Avatar</h1>
+        <div class="sub-head">The Avatar component is used to represent a user, and displays the profile picture,
+            initials or fallback icon.
+        </div>
+        <hr>
+
+        <div class="pl-4">
+            <h2 class="mb-2">Usage</h2>
+
+            <div class="outer-div">
+                <img src="https://bit.ly/3yP5V06" alt="Tanay-Pratap" class="avatar">
+                <img src="https://bit.ly/dan-abramov" alt="dan-abramov" class="avatar">
+                <img src="https://bit.ly/kent-c-dodds" alt="kent-c-dodds" class="avatar">
+                <img src="https://bit.ly/code-beast" alt="code-beasto" class="avatar">
+            </div>
+
+            <div class="outer-div">
+                <script src="https://gist.github.com/hrshmistry/5a781a67ba94f66a03335005edba2906.js"></script>
+            </div>
+
+            <h2 class="mt-3 mb-2">Avatar Sizes</h2>
+
+            <div class="outer-div">
+                <img src="https://bit.ly/3yP5V06" alt="Tanay-Pratap" class="avatar sm">
+                <img src="https://bit.ly/3yP5V06" alt="Tanay-Pratap" class="avatar md">
+                <img src="https://bit.ly/3yP5V06" alt="Tanay-Pratap" class="avatar lg">
+                <img src="https://bit.ly/3yP5V06" alt="Tanay-Pratap" class="avatar xl">
+                <img src="https://bit.ly/3yP5V06" alt="Tanay-Pratap" class="avatar xxl">
+            </div>
+
+            <div class="outer-div">
+                <script src="https://gist.github.com/hrshmistry/b39369c63eb242f8e43ebeb17bb61c53.js"></script>
+            </div>
+
+            <h2 class="mt-3 mb-2">Avatar with badge</h2>
+
+            <div class="outer-div flex">
+                <div class="avatar-badge">
+                    <img src="https://bit.ly/3yP5V06" alt="Tanay-Pratap" class="avatar">
+                    <div class="badge-online"></div>
+                </div>
+                <div class="avatar-badge">
+                    <img src="https://bit.ly/kent-c-dodds" alt="kent-c-dodds" class="avatar">
+                    <div class="badge-dnd"></div>
+                </div>
+                <div class="avatar-badge">
+                    <img src="https://bit.ly/code-beast" alt="code-beasto" class="avatar">
+                    <div class="badge-idle"></div>
+                </div>
+            </div>
+
+            <div class="outer-div">
+                <script src="https://gist.github.com/hrshmistry/470a6ef8a26e23ee9b3a03f43360a061.js"></script>
+            </div>
+        </div>
+
+    </div>
+</body>
+
+</html>
diff --git a/Components/Badge/badge.css b/Components/Badge/badge.css
@@ -0,0 +1,51 @@
+@import url("/Util/util.css");
+
+.badge {
+    border-radius: 0.2rem;
+    background-color: #EDF2F7;
+    padding: 0.1rem 0.3rem;
+    font-weight: bold;
+}
+
+.badge-success {
+    background-color: #D1FAE5;
+    color: #064E3B;
+}
+
+.badge-removed {
+    background-color: #FEE2E2;
+    color: #7F1D1D;
+}
+
+.badge-new {
+    background-color: #DDD6FE;
+    color: #6D28D9 ;
+}
+
+.outline-badge {
+    border: solid 1px #A78BFA;
+    color: #A78BFA;
+}
+
+.solid-badge {
+    background-color: #A78BFA;
+    border: solid 1px #A78BFA;
+    color: white;
+}
+
+.subtle-badge {
+    background-color: #DDD6FE;
+    color: #6D28D9 ;
+}
+
+.sm-badge {
+    font-size: small;
+}
+
+.md-badge {
+    font-size: medium;
+}
+
+.lg-badge {
+    font-size: large;
+}