added custom styles to hero section (#84)

subhadipbhowmik · Jun 1, 2024 · 986787c · 986787c
1 parent a0611b8
commit 986787c
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -12,10 +12,10 @@ function HomepageHeader() {
   return (
     <header className={clsx("hero hero--primary", styles.heroBanner)}>
       <div className="container">
-        <Heading as="h1" className="hero__title">
+        <Heading as="h1" className={clsx("hero__title", styles.main_title)}>
           {siteConfig.title}
         </Heading>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <p className={clsx("hero__subtitle",styles.sub_title)}>{siteConfig.tagline}</p>
         <div className={styles.buttons}>
           <Link
             className="button button--secondary button--lg"

diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -8,15 +8,41 @@
   text-align: center;
   position: relative;
   overflow: hidden;
+  height: 35rem;
+}
+.main_title{
+  font-size: 4rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  background: linear-gradient(45deg, #240750, #01204E);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.sub_title{
+  margin: 0 auto;
+  font-size: 1.5rem;
+  font-weight: 400;
+  margin-bottom: 1rem;
+  width: 50%;
+
 }
 
 @media screen and (max-width: 996px) {
   .heroBanner {
     padding: 2rem;
   }
+  .main_title{
+    font-size: 2.5rem;
+  }
+  .sub_title{
+    font-size: 1.2rem;
+    width: 80%;
+  }
 }
 
 .buttons {
+  margin-top: 2rem;
   display: flex;
   align-items: center;
   justify-content: center;