adding css body to mdx file

FrontendFreaks · Nov 1, 2023 · 622606b · 622606b
1 parent fa456a7
commit 622606b
Showing 1 changed file with 41 additions and 16 deletions.
diff --git a/content/batch/index.mdx b/content/batch/index.mdx
@@ -20,6 +20,17 @@ This course is focused on making you a frontend developer from a beginner to an
 
 Select a Batch below to learn more about it.
 
+const joinButtonStyle = {
+    textAlign: 'center',
+    color: 'black',
+    backgroundColor: 'white',
+    borderRadius: '18px',
+    fontSize: '16px',
+    width: 'fit-content',
+    margin: '0 auto',
+    padding: '8px 16px'
+};
+
 <div className="flex md:flex-row flex-col gap-4 mt-6 ">
     <Card href="/batch/learn/html/basic">
         <Image
@@ -29,46 +40,60 @@ Select a Batch below to learn more about it.
         alt="Image"
         className="bg-white"
         />
-
-        #### Learn
-       Learn HTML, CSS, JS and Git & Github
+        <h4>Learn</h4>
+        <p>Learn HTML, CSS, JS and Git & Github</p>
+        <div className="flex-grow"></div>
+        <div className="text-center mt-4">
+          <a href="/join/learn" className="rounded-full px-4 py-2" style={joinButtonStyle}>Join</a>
+        </div>
     </Card>
-     <Card href="/batch/dsa/loops">
+
+    <Card href="/batch/dsa/loops">
         <Image
         src="/dsa_in_javascript.svg"
         width="350"
         height="200"
         alt="Image"
         className="bg-white"
         />
-
-        #### DSA in Javascript
-       Learn data structures and algorithms in JavaScript
+        <h4>DSA in Javascript</h4>
+        <p>Learn data structures and algorithms in JavaScript</p>
+        <div className="flex-grow"></div>
+        <div className="text-center mt-4">
+          <a href="/join/dsa" className="rounded-full px-4 py-2" style={joinButtonStyle}>Join</a>
+        </div>
     </Card>
 
-    <Card href= "/batch/build/react/fundamentals">
-    <Image
+    <Card href="/batch/build/react/fundamentals">
+        <Image
         src="/build_img.svg"
         width="350"
         height="200"
         alt="Image"
         className="bg-white"
         />
-
-        #### Build
-        Master React, Redux and Next Js
+        <h4>Build</h4>
+        <p>Master React, Redux and Next Js</p>
+        <div className="flex-grow"></div>
+        <div className="text-center mt-4">
+          <a href="/join/build" className="rounded-full px-4 py-2" style={joinButtonStyle}>Join</a>
+        </div>
     </Card>
 
-     <Card href= "/batch/hire/hire">
+    <Card href="/batch/hire/hire">
         <Image
         src="/hire_img.svg"
         width="350"
         height="200"
         alt="Image"
         className="bg-white"
         />
-
-        #### Hire
-        Get Interview Tips and Tricks
+        <h4>Hire</h4>
+        <p>Get Interview Tips and Tricks from Experts</p>
+        <div className="flex-grow"></div>
+        <div className="text-center mt-4">
+          <a href="/join/hire" className="rounded-full px-4 py-2" style={joinButtonStyle}>Join</a>
+        </div>
     </Card>
 </div>
+```