Become a Teacher - CSS Adda<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n :root {\n --primary-blue: #1a4b8c;\n --primary-blue-dark: #0d2d5a;\n --primary-blue-light: #2d6bc4;\n --accent-orange: #f59e0b;\n --accent-orange-dark: #d97706;\n --accent-orange-light: #fbbf24;\n --accent-orange-fade: #FFF0C5;\n --white: #ffffff;\n --gray-50: #f8fafc;\n --gray-100: #f1f5f9;\n --gray-200: #e2e8f0;\n --gray-300: #d1d5db;\n --gray-400: #9ca3af;\n --gray-500: #64748b;\n --gray-600: #475569;\n --gray-700: #334155;\n --gray-800: #1e293b;\n --success: #10b981;\n --gradient-primary: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-light) 100%);\n --gradient-secondary: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-light) 100%);\n --gradient-hero: linear-gradient(135deg, var(--primary-blue-dark) 0%, var(--primary-blue) 50%, var(--accent-orange-light) 100%);\n --gradient-dark: linear-gradient(135deg, var(--primary-blue-dark) 0%, var(--primary-blue) 60%, #b45309 100%);\n --shadow-sm: 0 1px 2px 0 rgb(0 0 0 \/ 0.05);\n --shadow: 0 1px 3px 0 rgb(0 0 0 \/ 0.1);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 \/ 0.1);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 \/ 0.1);\n --radius: 8px;\n --radius-md: 12px;\n --radius-lg: 16px;\n --transition: all 0.3s ease;\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n body { font-family: 'Poppins', sans-serif; background: var(--gray-50); color: var(--gray-800); line-height: 1.6; }\n\n @keyframes fadeIn { \n from { opacity: 0; transform: translateY(15px); } \n to { opacity: 1; transform: translateY(0); } \n }\n\n \/* Hero *\/\n .hero { \n background: var(--gradient-hero); \n padding: 60px 20px 80px; \n position: relative; \n overflow: hidden; \n border-radius: 0 0 30px 30px; \n }\n .hero::before { \n content: ''; \n position: absolute; \n inset: 0; \n background: url(\"data:image\/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E\"); \n opacity: 0.5; \n }\n .hero-container { \n max-width: 1200px; \n margin: 0 auto; \n position: relative; \n z-index: 1; \n text-align: center; \n }\n .hero-badge { \n display: inline-flex; \n align-items: center; \n gap: 8px; \n background: rgba(249, 115, 22, 0.2); \n border: 1px solid rgba(249, 115, 22, 0.3); \n color: var(--accent-orange-light); \n padding: 8px 20px; \n border-radius: 50px; \n font-size: 0.85rem; \n font-weight: 600; \n margin-bottom: 20px; \n text-transform: uppercase; \n letter-spacing: 1px; \n }\n .hero-title { \n font-family: 'Plus Jakarta Sans', sans-serif; \n font-size: clamp(2rem, 5vw, 3.5rem); \n font-weight: 800; \n color: var(--white); \n margin-bottom: 16px; \n line-height: 1.2; \n }\n .hero-title span { color: var(--accent-orange); }\n .hero-description { \n font-size: 1.1rem; \n color: rgba(255, 255, 255, 0.9); \n max-width: 800px; \n margin: 0 auto; \n }\n\n \/* Container *\/\n .main-container { \n max-width: 1200px; \n margin: -40px auto 60px; \n padding: 0 20px; \n position: relative; \n z-index: 10; \n }\n\n \/* Content Card *\/\n .content-card { \n background: var(--white); \n border-radius: var(--radius-lg); \n box-shadow: var(--shadow-lg); \n overflow: hidden; \n margin-bottom: 25px; \n }\n\n \/* Benefits Section *\/\n .benefits-section { \n padding: 40px; \n border-bottom: 1px solid var(--gray-200); \n }\n .benefits-section h2 { \n font-family: 'Plus Jakarta Sans', sans-serif; \n font-size: 1.8rem; \n font-weight: 700; \n color: var(--primary-blue-dark); \n margin-bottom: 30px; \n text-align: center; \n }\n .benefits-grid { \n display: grid; \n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); \n gap: 25px; \n }\n .benefit-card { \n background: linear-gradient(135deg, #eef2ff 0%, #fef3c7 100%); \n border-radius: var(--radius-md); \n padding: 30px; \n border-left: 4px solid var(--accent-orange); \n transition: var(--transition); \n }\n .benefit-card:hover { \n transform: translateY(-5px); \n box-shadow: var(--shadow-lg); \n }\n .benefit-card h3 { \n color: var(--primary-blue); \n font-size: 1.2rem; \n font-weight: 700; \n margin-bottom: 12px; \n display: flex; \n align-items: center; \n gap: 10px; \n }\n .benefit-card h3 i { \n color: var(--accent-orange); \n font-size: 1.3rem; \n }\n .benefit-card p { \n color: var(--gray-600); \n font-size: 0.95rem; \n line-height: 1.6; \n }\n\n \/* Requirements Section *\/\n .requirements-section { \n background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); \n padding: 40px; \n border-bottom: 1px solid var(--gray-200); \n }\n .requirements-section h2 { \n font-family: 'Plus Jakarta Sans', sans-serif; \n font-size: 1.6rem; \n font-weight: 700; \n color: var(--primary-blue-dark); \n margin-bottom: 25px; \n display: flex; \n align-items: center; \n gap: 12px; \n }\n .requirements-section h2 i { \n color: var(--accent-orange); \n font-size: 1.5rem; \n }\n .requirements-list { \n list-style: none; \n display: grid; \n gap: 12px; \n }\n .requirements-list li { \n display: flex; \n align-items: flex-start; \n gap: 12px; \n padding: 12px 0; \n font-size: 0.95rem; \n color: var(--gray-700); \n }\n .requirements-list li::before { \n content: \"\u2713\"; \n color: var(--accent-orange); \n font-weight: 800; \n font-size: 1.3rem; \n flex-shrink: 0; \n }\n\n \/* Application Form *\/\n .application-section { \n padding: 40px; \n }\n .application-section h2 { \n font-family: 'Plus Jakarta Sans', sans-serif; \n font-size: 1.8rem; \n font-weight: 700; \n color: var(--primary-blue-dark); \n margin-bottom: 10px; \n text-align: center; \n }\n .application-section .subtitle { \n text-align: center; \n color: var(--gray-600); \n font-size: 0.95rem; \n margin-bottom: 30px; \n }\n .form-group { \n margin-bottom: 25px; \n }\n .form-group label { \n display: block; \n margin-bottom: 8px; \n font-weight: 600; \n color: var(--gray-700); \n font-size: 0.9rem; \n }\n .form-group label .required { \n color: var(--accent-orange); \n }\n .form-group input,\n .form-group textarea,\n .form-group select { \n width: 100%; \n padding: 12px 16px; \n border: 2px solid var(--gray-200); \n border-radius: var(--radius); \n font-size: 0.95rem; \n font-family: 'Poppins', sans-serif; \n transition: var(--transition); \n background: var(--white); \n }\n .form-group input:focus,\n .form-group textarea:focus,\n .form-group select:focus { \n outline: none; \n border-color: var(--primary-blue); \n box-shadow: 0 0 0 3px rgba(26, 75, 140, 0.1); \n }\n .form-group textarea { \n min-height: 120px; \n resize: vertical; \n }\n .submit-btn { \n background: var(--gradient-secondary); \n color: var(--white); \n padding: 16px 40px; \n border: none; \n border-radius: var(--radius-md); \n font-size: 1rem; \n font-weight: 700; \n font-family: 'Poppins', sans-serif; \n cursor: pointer; \n transition: var(--transition); \n width: 100%; \n box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); \n display: flex; \n align-items: center; \n justify-content: center; \n gap: 10px; \n }\n .submit-btn:hover { \n transform: translateY(-2px); \n box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4); \n }\n .submit-btn i { \n font-size: 1.1rem; \n }\n\n \/* Success Message *\/\n .success-message { \n display: none; \n background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); \n border: 2px solid var(--success); \n border-radius: var(--radius-md); \n padding: 20px; \n margin-bottom: 20px; \n text-align: center; \n }\n .success-message.show { \n display: block; \n animation: fadeIn 0.4s ease; \n }\n .success-message i { \n color: var(--success); \n font-size: 3rem; \n margin-bottom: 10px; \n }\n .success-message h3 { \n color: var(--success); \n font-size: 1.3rem; \n font-weight: 700; \n margin-bottom: 8px; \n }\n .success-message p { \n color: var(--gray-700); \n font-size: 0.95rem; \n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .hero { padding: 40px 15px 60px; }\n .benefits-section, .requirements-section, .application-section { padding: 25px 20px; }\n .benefits-grid { grid-template-columns: 1fr; }\n }\n <\/style>\n<\/head>\n<body>\n \n <section class=\"hero\">\n <div class=\"hero-container\">\n <div class=\"hero-badge\">\n <i class=\"fas fa-chalkboard-teacher\"><\/i> Join Our Teaching Team\n <\/div>\n <h1 class=\"hero-title\">\n Become a <span>Teacher<\/span> at CSS Adda\n <\/h1>\n <p class=\"hero-description\">\n Share your knowledge, inspire learners, and make a meaningful impact in the world of web development and government exam preparation\n <\/p>\n <\/div>\n <\/section>\n\n \n <div class=\"main-container\">\n \n <div class=\"content-card\">\n <div class=\"benefits-section\">\n <h2>Why Teach with CSS Adda?<\/h2>\n <div class=\"benefits-grid\">\n <div class=\"benefit-card\">\n <h3><i class=\"fas fa-clock\"><\/i> Flexible Schedule<\/h3>\n <p>Create and teach courses on your own time. Work from anywhere with complete flexibility to match your lifestyle.<\/p>\n <\/div>\n <div class=\"benefit-card\">\n <h3><i class=\"fas fa-rupee-sign\"><\/i> Competitive Earnings<\/h3>\n <p>Earn competitive rates for your expertise. Your income grows as your student base expands.<\/p>\n <\/div>\n <div class=\"benefit-card\">\n <h3><i class=\"fas fa-globe\"><\/i> Global Reach<\/h3>\n <p>Connect with thousands of motivated students across India preparing for government examinations.<\/p>\n <\/div>\n <div class=\"benefit-card\">\n <h3><i class=\"fas fa-hands-helping\"><\/i> Support & Resources<\/h3>\n <p>Access comprehensive teaching resources and get dedicated support from our experienced team.<\/p>\n <\/div>\n <div class=\"benefit-card\">\n <h3><i class=\"fas fa-award\"><\/i> Build Your Brand<\/h3>\n <p>Establish yourself as an expert and grow your professional reputation in the education sector.<\/p>\n <\/div>\n <div class=\"benefit-card\">\n <h3><i class=\"fas fa-users\"><\/i> Vibrant Community<\/h3>\n <p>Join a supportive community of educators and collaborate with fellow instructors nationwide.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"requirements-section\">\n <h2><i class=\"fas fa-clipboard-check\"><\/i> Requirements<\/h2>\n <ul class=\"requirements-list\">\n <li>Strong expertise in CSS, HTML, JavaScript, or government exam preparation subjects<\/li>\n <li>Passion for teaching and helping students achieve their goals<\/li>\n <li>Excellent communication skills in Hindi and\/or English<\/li>\n <li>Prior teaching or mentoring experience (preferred but not mandatory)<\/li>\n <li>Ability to create engaging and structured course content<\/li>\n <li>Reliable internet connection for online teaching sessions<\/li>\n <li>Commitment to student success and continuous improvement<\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"application-section\">\n <div class=\"success-message\" id=\"successMessage\">\n <i class=\"fas fa-check-circle\"><\/i>\n <h3>Application Submitted Successfully!<\/h3>\n <p>Thank you for your interest. We will review your application and contact you within 5-7 business days.<\/p>\n <\/div>\n\n <h2>Application Form<\/h2>\n <p class=\"subtitle\">Fill out the form below to apply as a teacher at CSS Adda<\/p>\n \n <form id=\"teacherForm\">\n <div class=\"form-group\">\n <label for=\"fullName\">Full Name <span class=\"required\">*<\/span><\/label>\n <input type=\"text\" id=\"fullName\" name=\"fullName\" placeholder=\"Enter your full name\" required>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"email\">Email Address <span class=\"required\">*<\/span><\/label>\n <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"your.email@example.com\" required>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"phone\">Phone Number <span class=\"required\">*<\/span><\/label>\n <input type=\"tel\" id=\"phone\" name=\"phone\" placeholder=\"+91 XXXXX XXXXX\" required>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"expertise\">Area of Expertise <span class=\"required\">*<\/span><\/label>\n <select id=\"expertise\" name=\"expertise\" required>\n <option value=\"\">Select your primary expertise<\/option>\n <option value=\"css\">CSS & Web Styling<\/option>\n <option value=\"html\">HTML & Web Structure<\/option>\n <option value=\"javascript\">JavaScript Programming<\/option>\n <option value=\"govt-accounts\">Government Accounts<\/option>\n <option value=\"service-rules\">Service Rules & Regulations<\/option>\n <option value=\"financial-control\">Parliamentary Financial Control<\/option>\n <option value=\"procurement\">Procurement & Audit<\/option>\n <option value=\"other\">Other<\/option>\n <\/select>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"experience\">Teaching & Professional Experience <span class=\"required\">*<\/span><\/label>\n <textarea id=\"experience\" name=\"experience\" placeholder=\"Share your teaching experience, professional background, and qualifications...\" required><\/textarea>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"motivation\">Why do you want to teach at CSS Adda? <span class=\"required\">*<\/span><\/label>\n <textarea id=\"motivation\" name=\"motivation\" placeholder=\"Tell us what motivates you to join our teaching community...\" required><\/textarea>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"portfolio\">Portfolio \/ LinkedIn \/ Website URL<\/label>\n <input type=\"url\" id=\"portfolio\" name=\"portfolio\" placeholder=\"https:\/\/yourportfolio.com\">\n <\/div>\n\n <button type=\"submit\" class=\"submit-btn\">\n <i class=\"fas fa-paper-plane\"><\/i> Submit Application\n <\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n document.getElementById('teacherForm').addEventListener('submit', function(e) {\n e.preventDefault();\n \n \/\/ Show success message\n const successMsg = document.getElementById('successMessage');\n successMsg.classList.add('show');\n \n \/\/ Scroll to success message\n successMsg.scrollIntoView({ behavior: 'smooth', block: 'center' });\n \n \/\/ Reset form\n this.reset();\n \n \/\/ Hide success message after 8 seconds\n setTimeout(() => {\n successMsg.classList.remove('show');\n }, 8000);\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Become a Teacher – CSS Adda Join Our Teaching Team Become a Teacher at CSS Adda Share your knowledge, inspire […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"disabled","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"disabled","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[53],"tags":[],"class_list":["post-7763","page","type-page","status-publish","hentry","category-website-main-pages-header"],"_links":{"self":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/pages\/7763","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7763"}],"version-history":[{"count":7,"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/pages\/7763\/revisions"}],"predecessor-version":[{"id":9119,"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/pages\/7763\/revisions\/9119"}],"wp:attachment":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7763"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Become a Teacher - CSS Adda<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n :root {\n --primary-blue: #1a4b8c;\n --primary-blue-dark: #0d2d5a;\n --primary-blue-light: #2d6bc4;\n --accent-orange: #f59e0b;\n --accent-orange-dark: #d97706;\n --accent-orange-light: #fbbf24;\n --accent-orange-fade: #FFF0C5;\n --white: #ffffff;\n --gray-50: #f8fafc;\n --gray-100: #f1f5f9;\n --gray-200: #e2e8f0;\n --gray-300: #d1d5db;\n --gray-400: #9ca3af;\n --gray-500: #64748b;\n --gray-600: #475569;\n --gray-700: #334155;\n --gray-800: #1e293b;\n --success: #10b981;\n --gradient-primary: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-light) 100%);\n --gradient-secondary: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-light) 100%);\n --gradient-hero: linear-gradient(135deg, var(--primary-blue-dark) 0%, var(--primary-blue) 50%, var(--accent-orange-light) 100%);\n --gradient-dark: linear-gradient(135deg, var(--primary-blue-dark) 0%, var(--primary-blue) 60%, #b45309 100%);\n --shadow-sm: 0 1px 2px 0 rgb(0 0 0 \/ 0.05);\n --shadow: 0 1px 3px 0 rgb(0 0 0 \/ 0.1);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 \/ 0.1);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 \/ 0.1);\n --radius: 8px;\n --radius-md: 12px;\n --radius-lg: 16px;\n --transition: all 0.3s ease;\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n body { font-family: 'Poppins', sans-serif; background: var(--gray-50); color: var(--gray-800); line-height: 1.6; }\n\n @keyframes fadeIn { \n from { opacity: 0; transform: translateY(15px); } \n to { opacity: 1; transform: translateY(0); } \n }\n\n \/* Hero *\/\n .hero { \n background: var(--gradient-hero); \n padding: 60px 20px 80px; \n position: relative; \n overflow: hidden; \n border-radius: 0 0 30px 30px; \n }\n .hero::before { \n content: ''; \n position: absolute; \n inset: 0; \n background: url(\"data:image\/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E\"); \n opacity: 0.5; \n }\n .hero-container { \n max-width: 1200px; \n margin: 0 auto; \n position: relative; \n z-index: 1; \n text-align: center; \n }\n .hero-badge { \n display: inline-flex; \n align-items: center; \n gap: 8px; \n background: rgba(249, 115, 22, 0.2); \n border: 1px solid rgba(249, 115, 22, 0.3); \n color: var(--accent-orange-light); \n padding: 8px 20px; \n border-radius: 50px; \n font-size: 0.85rem; \n font-weight: 600; \n margin-bottom: 20px; \n text-transform: uppercase; \n letter-spacing: 1px; \n }\n .hero-title { \n font-family: 'Plus Jakarta Sans', sans-serif; \n font-size: clamp(2rem, 5vw, 3.5rem); \n font-weight: 800; \n color: var(--white); \n margin-bottom: 16px; \n line-height: 1.2; \n }\n .hero-title span { color: var(--accent-orange); }\n .hero-description { \n font-size: 1.1rem; \n color: rgba(255, 255, 255, 0.9); \n max-width: 800px; \n margin: 0 auto; \n }\n\n \/* Container *\/\n .main-container { \n max-width: 1200px; \n margin: -40px auto 60px; \n padding: 0 20px; \n position: relative; \n z-index: 10; \n }\n\n \/* Content Card *\/\n .content-card { \n background: var(--white); \n border-radius: var(--radius-lg); \n box-shadow: var(--shadow-lg); \n overflow: hidden; \n margin-bottom: 25px; \n }\n\n \/* Benefits Section *\/\n .benefits-section { \n padding: 40px; \n border-bottom: 1px solid var(--gray-200); \n }\n .benefits-section h2 { \n font-family: 'Plus Jakarta Sans', sans-serif; \n font-size: 1.8rem; \n font-weight: 700; \n color: var(--primary-blue-dark); \n margin-bottom: 30px; \n text-align: center; \n }\n .benefits-grid { \n display: grid; \n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); \n gap: 25px; \n }\n .benefit-card { \n background: linear-gradient(135deg, #eef2ff 0%, #fef3c7 100%); \n border-radius: var(--radius-md); \n padding: 30px; \n border-left: 4px solid var(--accent-orange); \n transition: var(--transition); \n }\n .benefit-card:hover { \n transform: translateY(-5px); \n box-shadow: var(--shadow-lg); \n }\n .benefit-card h3 { \n color: var(--primary-blue); \n font-size: 1.2rem; \n font-weight: 700; \n margin-bottom: 12px; \n display: flex; \n align-items: center; \n gap: 10px; \n }\n .benefit-card h3 i { \n color: var(--accent-orange); \n font-size: 1.3rem; \n }\n .benefit-card p { \n color: var(--gray-600); \n font-size: 0.95rem; \n line-height: 1.6; \n }\n\n \/* Requirements Section *\/\n .requirements-section { \n background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); \n padding: 40px; \n border-bottom: 1px solid var(--gray-200); \n }\n .requirements-section h2 { \n font-family: 'Plus Jakarta Sans', sans-serif; \n font-size: 1.6rem; \n font-weight: 700; \n color: var(--primary-blue-dark); \n margin-bottom: 25px; \n display: flex; \n align-items: center; \n gap: 12px; \n }\n .requirements-section h2 i { \n color: var(--accent-orange); \n font-size: 1.5rem; \n }\n .requirements-list { \n list-style: none; \n display: grid; \n gap: 12px; \n }\n .requirements-list li { \n display: flex; \n align-items: flex-start; \n gap: 12px; \n padding: 12px 0; \n font-size: 0.95rem; \n color: var(--gray-700); \n }\n .requirements-list li::before { \n content: \"\u2713\"; \n color: var(--accent-orange); \n font-weight: 800; \n font-size: 1.3rem; \n flex-shrink: 0; \n }\n\n \/* Application Form *\/\n .application-section { \n padding: 40px; \n }\n .application-section h2 { \n font-family: 'Plus Jakarta Sans', sans-serif; \n font-size: 1.8rem; \n font-weight: 700; \n color: var(--primary-blue-dark); \n margin-bottom: 10px; \n text-align: center; \n }\n .application-section .subtitle { \n text-align: center; \n color: var(--gray-600); \n font-size: 0.95rem; \n margin-bottom: 30px; \n }\n .form-group { \n margin-bottom: 25px; \n }\n .form-group label { \n display: block; \n margin-bottom: 8px; \n font-weight: 600; \n color: var(--gray-700); \n font-size: 0.9rem; \n }\n .form-group label .required { \n color: var(--accent-orange); \n }\n .form-group input,\n .form-group textarea,\n .form-group select { \n width: 100%; \n padding: 12px 16px; \n border: 2px solid var(--gray-200); \n border-radius: var(--radius); \n font-size: 0.95rem; \n font-family: 'Poppins', sans-serif; \n transition: var(--transition); \n background: var(--white); \n }\n .form-group input:focus,\n .form-group textarea:focus,\n .form-group select:focus { \n outline: none; \n border-color: var(--primary-blue); \n box-shadow: 0 0 0 3px rgba(26, 75, 140, 0.1); \n }\n .form-group textarea { \n min-height: 120px; \n resize: vertical; \n }\n .submit-btn { \n background: var(--gradient-secondary); \n color: var(--white); \n padding: 16px 40px; \n border: none; \n border-radius: var(--radius-md); \n font-size: 1rem; \n font-weight: 700; \n font-family: 'Poppins', sans-serif; \n cursor: pointer; \n transition: var(--transition); \n width: 100%; \n box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); \n display: flex; \n align-items: center; \n justify-content: center; \n gap: 10px; \n }\n .submit-btn:hover { \n transform: translateY(-2px); \n box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4); \n }\n .submit-btn i { \n font-size: 1.1rem; \n }\n\n \/* Success Message *\/\n .success-message { \n display: none; \n background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); \n border: 2px solid var(--success); \n border-radius: var(--radius-md); \n padding: 20px; \n margin-bottom: 20px; \n text-align: center; \n }\n .success-message.show { \n display: block; \n animation: fadeIn 0.4s ease; \n }\n .success-message i { \n color: var(--success); \n font-size: 3rem; \n margin-bottom: 10px; \n }\n .success-message h3 { \n color: var(--success); \n font-size: 1.3rem; \n font-weight: 700; \n margin-bottom: 8px; \n }\n .success-message p { \n color: var(--gray-700); \n font-size: 0.95rem; \n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .hero { padding: 40px 15px 60px; }\n .benefits-section, .requirements-section, .application-section { padding: 25px 20px; }\n .benefits-grid { grid-template-columns: 1fr; }\n }\n <\/style>\n<\/head>\n<body>\n \n <section class=\"hero\">\n <div class=\"hero-container\">\n <div class=\"hero-badge\">\n <i class=\"fas fa-chalkboard-teacher\"><\/i> Join Our Teaching Team\n <\/div>\n <h1 class=\"hero-title\">\n Become a <span>Teacher<\/span> at CSS Adda\n <\/h1>\n <p class=\"hero-description\">\n Share your knowledge, inspire learners, and make a meaningful impact in the world of web development and government exam preparation\n <\/p>\n <\/div>\n <\/section>\n\n \n <div class=\"main-container\">\n \n <div class=\"content-card\">\n <div class=\"benefits-section\">\n <h2>Why Teach with CSS Adda?<\/h2>\n <div class=\"benefits-grid\">\n <div class=\"benefit-card\">\n <h3><i class=\"fas fa-clock\"><\/i> Flexible Schedule<\/h3>\n <p>Create and teach courses on your own time. Work from anywhere with complete flexibility to match your lifestyle.<\/p>\n <\/div>\n <div class=\"benefit-card\">\n <h3><i class=\"fas fa-rupee-sign\"><\/i> Competitive Earnings<\/h3>\n <p>Earn competitive rates for your expertise. Your income grows as your student base expands.<\/p>\n <\/div>\n <div class=\"benefit-card\">\n <h3><i class=\"fas fa-globe\"><\/i> Global Reach<\/h3>\n <p>Connect with thousands of motivated students across India preparing for government examinations.<\/p>\n <\/div>\n <div class=\"benefit-card\">\n <h3><i class=\"fas fa-hands-helping\"><\/i> Support & Resources<\/h3>\n <p>Access comprehensive teaching resources and get dedicated support from our experienced team.<\/p>\n <\/div>\n <div class=\"benefit-card\">\n <h3><i class=\"fas fa-award\"><\/i> Build Your Brand<\/h3>\n <p>Establish yourself as an expert and grow your professional reputation in the education sector.<\/p>\n <\/div>\n <div class=\"benefit-card\">\n <h3><i class=\"fas fa-users\"><\/i> Vibrant Community<\/h3>\n <p>Join a supportive community of educators and collaborate with fellow instructors nationwide.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"requirements-section\">\n <h2><i class=\"fas fa-clipboard-check\"><\/i> Requirements<\/h2>\n <ul class=\"requirements-list\">\n <li>Strong expertise in CSS, HTML, JavaScript, or government exam preparation subjects<\/li>\n <li>Passion for teaching and helping students achieve their goals<\/li>\n <li>Excellent communication skills in Hindi and\/or English<\/li>\n <li>Prior teaching or mentoring experience (preferred but not mandatory)<\/li>\n <li>Ability to create engaging and structured course content<\/li>\n <li>Reliable internet connection for online teaching sessions<\/li>\n <li>Commitment to student success and continuous improvement<\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"application-section\">\n <div class=\"success-message\" id=\"successMessage\">\n <i class=\"fas fa-check-circle\"><\/i>\n <h3>Application Submitted Successfully!<\/h3>\n <p>Thank you for your interest. We will review your application and contact you within 5-7 business days.<\/p>\n <\/div>\n\n <h2>Application Form<\/h2>\n <p class=\"subtitle\">Fill out the form below to apply as a teacher at CSS Adda<\/p>\n \n <form id=\"teacherForm\">\n <div class=\"form-group\">\n <label for=\"fullName\">Full Name <span class=\"required\">*<\/span><\/label>\n <input type=\"text\" id=\"fullName\" name=\"fullName\" placeholder=\"Enter your full name\" required>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"email\">Email Address <span class=\"required\">*<\/span><\/label>\n <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"your.email@example.com\" required>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"phone\">Phone Number <span class=\"required\">*<\/span><\/label>\n <input type=\"tel\" id=\"phone\" name=\"phone\" placeholder=\"+91 XXXXX XXXXX\" required>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"expertise\">Area of Expertise <span class=\"required\">*<\/span><\/label>\n <select id=\"expertise\" name=\"expertise\" required>\n <option value=\"\">Select your primary expertise<\/option>\n <option value=\"css\">CSS & Web Styling<\/option>\n <option value=\"html\">HTML & Web Structure<\/option>\n <option value=\"javascript\">JavaScript Programming<\/option>\n <option value=\"govt-accounts\">Government Accounts<\/option>\n <option value=\"service-rules\">Service Rules & Regulations<\/option>\n <option value=\"financial-control\">Parliamentary Financial Control<\/option>\n <option value=\"procurement\">Procurement & Audit<\/option>\n <option value=\"other\">Other<\/option>\n <\/select>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"experience\">Teaching & Professional Experience <span class=\"required\">*<\/span><\/label>\n <textarea id=\"experience\" name=\"experience\" placeholder=\"Share your teaching experience, professional background, and qualifications...\" required><\/textarea>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"motivation\">Why do you want to teach at CSS Adda? <span class=\"required\">*<\/span><\/label>\n <textarea id=\"motivation\" name=\"motivation\" placeholder=\"Tell us what motivates you to join our teaching community...\" required><\/textarea>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"portfolio\">Portfolio \/ LinkedIn \/ Website URL<\/label>\n <input type=\"url\" id=\"portfolio\" name=\"portfolio\" placeholder=\"https:\/\/yourportfolio.com\">\n <\/div>\n\n <button type=\"submit\" class=\"submit-btn\">\n <i class=\"fas fa-paper-plane\"><\/i> Submit Application\n <\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n document.getElementById('teacherForm').addEventListener('submit', function(e) {\n e.preventDefault();\n \n \/\/ Show success message\n const successMsg = document.getElementById('successMessage');\n successMsg.classList.add('show');\n \n \/\/ Scroll to success message\n successMsg.scrollIntoView({ behavior: 'smooth', block: 'center' });\n \n \/\/ Reset form\n this.reset();\n \n \/\/ Hide success message after 8 seconds\n setTimeout(() => {\n successMsg.classList.remove('show');\n }, 8000);\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Become a Teacher – CSS Adda Join Our Teaching Team Become a Teacher at CSS Adda Share your knowledge, inspire […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"disabled","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"disabled","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[53],"tags":[],"class_list":["post-7763","page","type-page","status-publish","hentry","category-website-main-pages-header"],"_links":{"self":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/pages\/7763","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7763"}],"version-history":[{"count":7,"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/pages\/7763\/revisions"}],"predecessor-version":[{"id":9119,"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/pages\/7763\/revisions\/9119"}],"wp:attachment":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7763"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}