feat: Text Utilities

maitrakhatri · Feb 2, 2022 · 0f643f9 · 0f643f9
1 parent 0612bdd
commit 0f643f9
Show file tree

Hide file tree

Showing 4 changed files with 133 additions and 2 deletions.
diff --git a/CSS/Components/text-utilities/text-utilities.css b/CSS/Components/text-utilities/text-utilities.css
@@ -0,0 +1,74 @@
+@import url(../../style.css);
+
+h1 {
+    font-size: 4rem;
+    line-height: 5rem;
+    font-weight: 900;
+}
+
+h2 {
+    font-size: 3.5rem;
+    line-height: 4.5rem;
+    font-weight: 700;
+}
+
+h3 {
+    font-size: 3rem;
+    line-height: 4rem;
+    font-weight: 600;
+}
+
+h4 {
+    font-size: 2.5rem;
+    line-height: 3.5rem;
+    font-weight: 500;
+}
+
+h5 {
+    font-size: 2rem;
+    line-height: 3rem;
+    font-weight: 400;
+}
+
+h6 {
+    font-size: 1.5rem;
+    line-height: 2.5rem;
+    font-weight: 300;
+}
+
+p {
+    font-size: 1rem;
+    line-height: 1.5rem;
+}
+
+.text-xl {
+    font-size: 3rem;
+    line-height: 4rem;
+}
+
+.text-l {
+    font-size: 2rem;
+    line-height: 3rem;
+}
+
+.text-m {
+    font-size: 1rem;
+    line-height: 1.5rem;
+}
+
+.text-s {
+    font-size: 0.813rem;
+    line-height: 1rem;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.text-left {
+    text-align: left;
+}
+
+.text-right {
+    text-align: right;
+}
diff --git a/CSS/Components/text-utilities/text-utilities.html b/CSS/Components/text-utilities/text-utilities.html
@@ -0,0 +1,55 @@
+<!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>text utilities</title>
+    <link rel="stylesheet" href="text-utilities.css">
+</head>
+<body>
+
+    <h1> H1 Heading1 </h1>
+    <h2> H2 Heading2 </h2>
+    <h3> H3 Heading3 </h3>
+    <h4> H4 Heading4 </h4>
+    <h5> H5 Heading5 </h5>
+    <h6> H6 Heading6 </h6> 
+
+    <br> <br>
+
+    <p>Text inside normal p tag</p>
+    <p>Text inside normal p tag</p>
+
+    <br><br>
+
+    <p class="text-xl">Text-XL</p>
+    <p class="text-l">Text-L</p>
+    <p class="text-m">Text-M</p>
+    <p class="text-s">Text-S</p>
+
+    <br><br>
+    <h1 class="text-gray">Gray Text</h1>
+    <p class="text-xl text-gray">Gray Text</p>
+    <p class="text-gray">Gray Text Lorem ipsum dolor sit amet.</p>
+
+    <br><br>
+
+    <h1 class="text-center">Center Text</h1>
+    <p class="text-center text-xl">Center Text</p>
+    <p class="text-center">Center Text Lorem ipsum dolor sit amet.</p>
+
+    <br><br>
+
+    <h1 class="text-left">left Text</h1>
+    <p class="text-left text-xl">left Text</p>
+    <p class="text-left">left Text Lorem ipsum dolor sit amet.</p>
+
+    <br><br>
+
+    <h1 class="text-right">right Text</h1>
+    <p class="text-right text-xl">right Text</p>
+    <p class="text-right">right Text Lorem ipsum dolor sit amet.</p>
+
+</body>
+</html>
diff --git a/CSS/style.css b/CSS/style.css
@@ -20,6 +20,7 @@
     --red: #F24236; 
     --yellow: #FCA311;
     --gray: #FAFAFA;
+    --text-gray: #333333;
 }
 
 @import url(./Components/alert/alert.css);
@@ -28,4 +29,5 @@
 @import url(./Components/button/button.css);
 @import url(./Components/card/card.css);
 @import url(./Components/image/image.css);
-@import url(./Components/input/input.css);
+@import url(./Components/input/input.css);
+@import url(./Components/text-utilities/text-utilities.css);
diff --git a/CSS/utils.css b/CSS/utils.css
@@ -85,5 +85,5 @@
 }
 
 .text-gray {
-    color: var(--gray);
+    color: var(--text-gray);
 }