From 0f643f91e388bf314c827860a785bb54f37a2627 Mon Sep 17 00:00:00 2001 From: Maitra Khatri Date: Wed, 2 Feb 2022 10:58:01 +0530 Subject: [PATCH] feat: Text Utilities --- .../text-utilities/text-utilities.css | 74 +++++++++++++++++++ .../text-utilities/text-utilities.html | 55 ++++++++++++++ CSS/style.css | 4 +- CSS/utils.css | 2 +- 4 files changed, 133 insertions(+), 2 deletions(-) create mode 100644 CSS/Components/text-utilities/text-utilities.css create mode 100644 CSS/Components/text-utilities/text-utilities.html diff --git a/CSS/Components/text-utilities/text-utilities.css b/CSS/Components/text-utilities/text-utilities.css new file mode 100644 index 0000000..b6284f3 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/CSS/Components/text-utilities/text-utilities.html b/CSS/Components/text-utilities/text-utilities.html new file mode 100644 index 0000000..1beba58 --- /dev/null +++ b/CSS/Components/text-utilities/text-utilities.html @@ -0,0 +1,55 @@ + + + + + + + text utilities + + + + +

H1 Heading1

+

H2 Heading2

+

H3 Heading3

+

H4 Heading4

+
H5 Heading5
+
H6 Heading6
+ +

+ +

Text inside normal p tag

+

Text inside normal p tag

+ +

+ +

Text-XL

+

Text-L

+

Text-M

+

Text-S

+ +

+

Gray Text

+

Gray Text

+

Gray Text Lorem ipsum dolor sit amet.

+ +

+ +

Center Text

+

Center Text

+

Center Text Lorem ipsum dolor sit amet.

+ +

+ +

left Text

+

left Text

+

left Text Lorem ipsum dolor sit amet.

+ +

+ +

right Text

+

right Text

+

right Text Lorem ipsum dolor sit amet.

+ + + \ No newline at end of file diff --git a/CSS/style.css b/CSS/style.css index 004037f..5546692 100644 --- 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); \ No newline at end of file +@import url(./Components/input/input.css); +@import url(./Components/text-utilities/text-utilities.css); \ No newline at end of file diff --git a/CSS/utils.css b/CSS/utils.css index c4425e4..5619ca9 100644 --- a/CSS/utils.css +++ b/CSS/utils.css @@ -85,5 +85,5 @@ } .text-gray { - color: var(--gray); + color: var(--text-gray); } \ No newline at end of file