recodehive · sanjay-kv · Apr 30, 2026 · Apr 29, 2026 · Apr 30, 2026
@@ -0,0 +1,37 @@
+---
+title: Introduction to HTML
+sidebar_label: Introduction
+---
+
+# Introduction to HTML
+
+HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).
+
+## What is HTML?
+
+HTML is not a programming language; it is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way.
+
+## Basic HTML Structure
+
+Every HTML document has a basic structure:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Page Title</title>
+  </head>
+  <body>
+    <h1>My First Heading</h1>
+    <p>My first paragraph.</p>
+  </body>
+</html>
+```
+
+- `<!DOCTYPE html>`: The declaration defines that this document is an HTML5 document.
+- `<html>`: The root element of an HTML page.
+- `<head>`: Contains meta information about the HTML page.
+- `<title>`: Specifies a title for the HTML page.
+- `<body>`: Defines the document's body, and is a container for all the visible contents.
+- `<h1>`: Defines a large heading.
+- `<p>`: Defines a paragraph.
@@ -188,7 +188,7 @@ const config: Config = {
             },
             {
               label: "🗺️ Roadmap",
-              to: "https://github.com/orgs/recodehive/projects/9",
+              to: "/roadmaps",
             },
             {
               label: "🤝 Community",

@@ -0,0 +1,65 @@
+.blog-post-share-section {
+  margin: 3rem 0;
+  padding: 2rem;
+  background: rgba(var(--ifm-color-primary-rgb), 0.05);
+  border-radius: 16px;
+  text-align: center;
+  border: 1px solid rgba(var(--ifm-color-primary-rgb), 0.1);
+}
+
+.share-title {
+  margin-bottom: 1.5rem;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--ifm-font-color-base);
+}
+
+.share-buttons-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: center;
+}
+
+.share-btn-large {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.8rem 1.5rem;
+  border-radius: 50px;
+  color: white !important;
+  font-weight: 600;
+  text-decoration: none !important;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  font-size: 0.95rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.share-btn-large:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+  filter: brightness(1.1);
+}
+
+.share-btn-large.twitter {
+  background-color: #000000;
+}
+
+.share-btn-large.linkedin {
+  background-color: #0077b5;
+}
+
+.share-btn-large.facebook {
+  background-color: #1877f2;
+}
+
+@media (max-width: 576px) {
+  .share-buttons-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .share-btn-large {
+    justify-content: center;
+  }
+}
@@ -0,0 +1,58 @@
+import React from 'react';
+import { useBlogPost } from '@docusaurus/plugin-content-blog/client';
+import { FaTwitter, FaLinkedin, FaFacebook } from 'react-icons/fa';
+import './SocialShare.css';
+
+const SocialShare = () => {
+  // Safe hook call
+  let blogPost;
+  try {
+    blogPost = useBlogPost();
+  } catch (e) {
+    return null;
+  }
+
+  if (!blogPost) return null;
+
+  const { metadata } = blogPost;
+  const { permalink, title } = metadata;
+  const blogUrl = `https://www.recodehive.com${permalink}`;
+  const shareText = encodeURIComponent(`Check out this article: ${title}`);
+
+  return (
+    <div className="blog-post-share-section">
+      <h3 className="share-title">Enjoyed the article? Share it!</h3>
+      <div className="share-buttons-row">
+        <a
+          href={`https://twitter.com/intent/tweet?text=${shareText}&url=${encodeURIComponent(blogUrl)}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="share-btn-large twitter"
+          title="Share on X (Twitter)"
+        >
+          <FaTwitter /> <span>Share on X</span>
+        </a>
+        <a
+          href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(blogUrl)}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="share-btn-large linkedin"
+          title="Share on LinkedIn"
+        >
+          <FaLinkedin /> <span>Share on LinkedIn</span>
+        </a>
+        <a
+          href={`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(blogUrl)}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="share-btn-large facebook"
+          title="Share on Facebook"
+        >
+          <FaFacebook /> <span>Share on Facebook</span>
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default SocialShare;
@@ -743,32 +743,30 @@ const GiveawayPage: React.FC = () => {
 
           {/* Giveaway Stats Grid */}
           <motion.section
-            className="dashboard-stats-section"
+            className="dashboard-stats-section grid grid-cols-1 md:grid-cols-3 gap-4 flex-wrap"
             initial={{ opacity: 0, y: 10 }}
             whileInView={{ opacity: 1 }}
             transition={{ duration: 0.6 }}
             viewport={{ once: true }}
           >
-            <div className="">
-              <StatCard
-                icon="⏳"
-                title="Next Giveaway"
-                valueText="5 Days"
-                description="Time remaining"
-              />
-              <StatCard
-                icon="🎫"
-                title="Entries"
-                valueText={leaderboard.length.toString()}
-                description="Total participants"
-              />
-              <StatCard
-                icon="🏅"
-                title="Total Winners"
-                valueText="3"
-                description="Winners per giveaway"
-              />
-            </div>
+            <StatCard
+              icon="⏳"
+              title="Next Giveaway"
+              valueText="5 Days"
+              description="Time remaining"
+            />
+            <StatCard
+              icon="🎫"
+              title="Entries"
+              valueText={leaderboard.length.toString()}
+              description="Total participants"
+            />
+            <StatCard
+              icon="🏅"
+              title="Total Winners"
+              valueText="3"
+              description="Winners per giveaway"
+            />
           </motion.section>
 
           {/* Giveaway Leaderboard */}

@@ -0,0 +1,90 @@
+import React from "react";
+import Layout from "@theme-original/Layout";
+import Link from "@docusaurus/Link";
+import { roadmaps } from "../../data/roadmaps/index";
+import Head from "@docusaurus/Head";
+import "./roadmaps.css";
+
+export default function CSSRoadmap(): React.JSX.Element {
+  const cssRoadmap = roadmaps.find(r => r.id === 'css');
+
+  if (!cssRoadmap) {
+    return (
+      <Layout title="Roadmap Not Found">
+        <div className="container" style={{ padding: '5rem 0', textAlign: 'center' }}>
+          <h1>Roadmap Not Found</h1>
+          <Link to="/roadmaps">Back to All Roadmaps</Link>
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout
+      title="CSS Learning Roadmap"
+      description="Master the art of styling web pages with CSS, from fundamentals to advanced layouts."
+    >
+      <Head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link
+          rel="preconnect"
+          href="https://fonts.gstatic.com"
+          crossOrigin="anonymous"
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
+          rel="stylesheet"
+        />
+      </Head>
+
+      <div className="roadmap-page">
+        {/* Back Link */}
+        <div className="container" style={{ paddingTop: '2rem' }}>
+          <Link to="/roadmaps" className="back-link">
+            ← Back to All Roadmaps
+          </Link>
+        </div>
+
+        {/* Hero Section */}
+        <section className="roadmap-hero" style={{ padding: '3rem 0' }}>
+          <div className="container">
+            <h1 className="hero-title">
+              <span className="gradient-text">CSS</span> Roadmap
+            </h1>
+            <p className="hero-subtitle">
+              {cssRoadmap.description}
+            </p>
+          </div>
+        </section>
+
+        {/* Timeline Section */}
+        <div className="roadmap-timeline">
+          <div className="timeline-section">
+            <div className="section-dot"></div>
+            <h2 className="section-title">Core Concepts</h2>
+            <div className="timeline-items">
+              {cssRoadmap.lessons.map((lesson, idx) => (
+                <a 
+                  key={idx} 
+                  href={lesson.link}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="timeline-item"
+                >
+                  <div className="item-content">
+                    <span className="item-status-icon">⭕</span>
+                    <div>
+                      <div className="item-text">{lesson.title}</div>
+                      <div className="item-subtext" style={{ fontSize: '0.85rem', opacity: 0.6 }}>Duration: {lesson.duration}</div>
+                    </div>
+                  </div>
+                  <span className="item-arrow">↗</span>
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}
@@ -0,0 +1,78 @@
+import React from "react";
+import Layout from "@theme-original/Layout";
+import Link from "@docusaurus/Link";
+import { htmlRoadmapData } from "../../data/roadmaps/html";
+import Head from "@docusaurus/Head";
+import "./roadmaps.css";
+
+export default function HTMLRoadmap(): React.JSX.Element {
+  return (
+    <Layout
+      title="HTML Learning Roadmap"
+      description="A comprehensive step-by-step guide to mastering HTML, from basics to SEO and accessibility."
+    >
+      <Head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link
+          rel="preconnect"
+          href="https://fonts.gstatic.com"
+          crossOrigin="anonymous"
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
+          rel="stylesheet"
+        />
+      </Head>
+
+      <div className="roadmap-page">
+        {/* Back Link */}
+        <div className="container" style={{ paddingTop: '2rem' }}>
+          <Link to="/roadmaps" className="back-link">
+            ← Back to All Roadmaps
+          </Link>
+        </div>
+
+        {/* Hero Section */}
+        <section className="roadmap-hero" style={{ padding: '3rem 0' }}>
+          <div className="container">
+            <h1 className="hero-title">
+              <span className="gradient-text">HTML</span> Roadmap
+            </h1>
+            <p className="hero-subtitle">
+              The foundation of the web. Follow this path to learn how to 
+              structure your web pages correctly and optimize them for 
+              search engines.
+            </p>
+          </div>
+        </section>
+
+        {/* Timeline Section */}
+        <div className="roadmap-timeline">
+          {htmlRoadmapData.map((section, idx) => (
+            <div key={idx} className="timeline-section">
+              <div className="section-dot"></div>
+              <h2 className="section-title">{section.title}</h2>
+              <div className="timeline-items">
+                {section.items.map((item, itemIdx) => (
+                  <Link 
+                    key={itemIdx} 
+                    to={item.link !== '#' ? item.link : undefined}
+                    className={`timeline-item ${item.link === '#' ? 'inactive' : ''}`}
+                  >
+                    <div className="item-content">
+                      <span className="item-status-icon">
+                        {item.status === 'completed' ? '✅' : '⭕'}
+                      </span>
+                      <span className="item-text">{item.text}</span>
+                    </div>
+                    {item.link !== '#' && <span className="item-arrow">→</span>}
+                  </Link>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </Layout>
+  );
+}