{"id":339,"date":"2025-12-08T20:30:57","date_gmt":"2025-12-08T20:30:57","guid":{"rendered":"https:\/\/brave-solomon.64-23-132-27.plesk.page\/?page_id=339"},"modified":"2026-06-17T19:38:55","modified_gmt":"2026-06-17T19:38:55","slug":"get-involved","status":"publish","type":"page","link":"https:\/\/brave-solomon.64-23-132-27.plesk.page\/index.php\/get-involved\/","title":{"rendered":"Get Involved"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"339\" class=\"elementor elementor-339\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-41d5b6f e-con-full e-flex e-con e-parent\" data-id=\"41d5b6f\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2a1eb76 elementor-widget elementor-widget-html\" data-id=\"2a1eb76\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\tHere is the updated code. To force all four boxes onto the same line, I updated the grid layout to `grid-template-columns: repeat(4, 1fr);`, slightly increased the container's maximum width, and adjusted the internal padding and button font sizes so the content fits beautifully without getting cramped.\n\nI also included responsive media queries so they will automatically snap to a 2x2 grid on tablets and a single column on phones so it doesn't break on smaller screens.\n\n```html\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap\" rel=\"stylesheet\">\n    \n<style>\n    \/* 1. BRAND COLORS & VARIABLES *\/\n    :root {\n        --elp-orange: #F68B36;\n        --elp-orange-glow: rgba(246, 139, 54, 0.4);\n        --elp-teal: #31C0C8;\n        --elp-teal-glow: rgba(49, 192, 200, 0.4);\n        --elp-navy: #0b1a69; \/* Exact brand Navy *\/\n        --elp-bg-light: #EFF3F8;\n        --elp-white: #ffffff;\n        \n        \/* Font Variables *\/\n        --font-primary: 'Montserrat', sans-serif;\n        --font-secondary: 'Arimo', sans-serif;\n        --font-display: 'Lovelo', 'Montserrat', sans-serif;\n    }\n\n    \/* Reset & Base Styles - Bulletproof Breakout applied *\/\n    .elp-involved-wrapper {\n        font-family: var(--font-secondary);\n        color: var(--elp-navy);\n        line-height: 1.6;\n        \n        \/* BULLETPROOF FULL-WIDTH BREAKOUT *\/\n        width: 100vw !important;\n        max-width: 100vw !important;\n        position: relative !important;\n        left: 50% !important;\n        transform: translateX(-50%) !important;\n        \n        \/* SWALLOW VERTICAL GAPS *\/\n        margin-top: -50px !important;\n        padding-top: 50px !important;\n        \n        background-color: var(--elp-bg-light) !important;\n        overflow-x: hidden;\n        box-sizing: border-box;\n    }\n\n    .elp-involved-wrapper *, .elp-involved-wrapper *::before, .elp-involved-wrapper *::after {\n        box-sizing: inherit;\n    }\n\n    .elp-involved-wrapper h1, \n    .elp-involved-wrapper h2, \n    .elp-involved-wrapper h3 {\n        font-family: var(--font-primary);\n        margin-bottom: 1rem;\n        color: var(--elp-navy);\n        line-height: 1.2;\n    }\n\n    \/* Entrance Animation *\/\n    @keyframes elpFadeUp {\n        from { opacity: 0; transform: translateY(30px); }\n        to { opacity: 1; transform: translateY(0); }\n    }\n\n    .elp-animate-up {\n        animation: elpFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n    }\n\n    \/* --- HERO SECTION --- *\/\n    .elp-inv-hero {\n        text-align: center;\n        padding: 120px 5% 160px;\n        background: linear-gradient(180deg, var(--elp-bg-light) 0%, var(--elp-white) 100%);\n        position: relative;\n        width: 100%;\n    }\n\n    \/* Glowing Orbs *\/\n    .elp-inv-orb-1 {\n        position: absolute;\n        width: 40vw; max-width: 500px;\n        height: 40vw; max-height: 500px;\n        background: radial-gradient(circle, var(--elp-teal-glow) 0%, rgba(255,255,255,0) 70%);\n        top: -10%; left: 0%;\n        border-radius: 50%; z-index: 0; pointer-events: none;\n    }\n    .elp-inv-orb-2 {\n        position: absolute;\n        width: 50vw; max-width: 600px;\n        height: 50vw; max-height: 600px;\n        background: radial-gradient(circle, var(--elp-orange-glow) 0%, rgba(255,255,255,0) 70%);\n        bottom: -20%; right: -10%;\n        border-radius: 50%; z-index: 0; pointer-events: none;\n    }\n    \n    .elp-inv-hero-content {\n        position: relative;\n        z-index: 2;\n        max-width: 900px;\n        margin: 0 auto;\n    }\n\n    .elp-inv-hero h1 {\n        font-family: var(--font-display);\n        font-size: clamp(3.5rem, 6vw, 5rem);\n        font-weight: 800;\n        color: var(--elp-navy);\n        margin-bottom: 20px;\n        letter-spacing: -1px;\n        text-transform: uppercase;\n    }\n\n    .elp-inv-hero h1 span {\n        color: var(--elp-teal);\n    }\n\n    .elp-inv-hero p.subtitle {\n        font-size: 1.5rem;\n        font-weight: 700;\n        color: var(--elp-orange);\n        margin-bottom: 25px;\n        letter-spacing: 1px;\n    }\n\n    .elp-inv-hero p.desc {\n        font-size: 1.15rem;\n        color: var(--elp-navy);\n        max-width: 800px;\n        margin: 0 auto;\n        font-weight: 400;\n        line-height: 1.7;\n    }\n\n    \/* --- VOLUNTEER ACTION CARDS --- *\/\n    .elp-actions-grid {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr); \/* Forces exactly 4 columns *\/\n        gap: 20px; \/* Slightly tighter gap to allow room for 4 cards *\/\n        padding: 0 5% 100px 5%;\n        max-width: 1450px; \/* Increased width for breathing room *\/\n        margin: 0 auto;\n        margin-top: -80px; \/* Overlaps the Hero section elegantly *\/\n        position: relative;\n        z-index: 5;\n    }\n\n    .elp-action-card {\n        background: var(--elp-white);\n        border-radius: 24px;\n        padding: 40px 25px; \/* Reduced padding to fit 4 across cleanly *\/\n        text-align: center;\n        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n        box-shadow: 0 15px 35px rgba(11, 26, 105, 0.06);\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n        height: 100%;\n        border: 1px solid rgba(11, 26, 105, 0.03);\n        position: relative;\n        overflow: hidden;\n    }\n\n    \/* Vibrant top border lines *\/\n    .elp-action-card::before {\n        content: '';\n        position: absolute;\n        top: 0; left: 0; right: 0;\n        height: 6px;\n    }\n    .card-volunteer::before { background: var(--elp-teal); }\n    .card-intern::before { background: var(--elp-orange); }\n    .card-mentor::before { background: var(--elp-navy); }\n    .card-donate::before { background: var(--elp-teal); }\n\n    .elp-action-card:hover {\n        transform: translateY(-12px);\n        box-shadow: 0 25px 50px rgba(11, 26, 105, 0.1);\n    }\n\n    .elp-action-icon {\n        width: 75px; \/* Slightly scaled down icon to save space *\/\n        height: 75px;\n        margin: 0 auto 25px auto;\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: transform 0.4s ease;\n    }\n\n    .card-volunteer .elp-action-icon { background: rgba(49, 192, 200, 0.1); color: var(--elp-teal); }\n    .card-intern .elp-action-icon { background: rgba(246, 139, 54, 0.1); color: var(--elp-orange); }\n    .card-mentor .elp-action-icon { background: rgba(11, 26, 105, 0.08); color: var(--elp-navy); }\n    .card-donate .elp-action-icon { background: rgba(49, 192, 200, 0.1); color: var(--elp-teal); }\n\n    .elp-action-card:hover .elp-action-icon {\n        transform: scale(1.1) rotate(-5deg);\n    }\n\n    .elp-action-icon svg {\n        width: 34px;\n        height: 34px;\n        fill: none;\n        stroke: currentColor;\n        stroke-width: 1.5;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n    }\n\n    .elp-action-title {\n        font-size: 1.35rem; \/* Adjusted text size to prevent wrapping *\/\n        font-weight: 800;\n        color: var(--elp-navy);\n        margin-bottom: 15px;\n    }\n    \n    .elp-action-card p {\n        color: var(--elp-navy);\n        font-size: 1rem;\n        margin-bottom: 30px;\n    }\n\n    \/* Action Buttons *\/\n    .elp-action-btn {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        padding: 14px 15px; \/* Tighter side padding so buttons fit inside columns *\/\n        color: white !important;\n        text-decoration: none !important;\n        border-radius: 50px;\n        font-family: var(--font-primary);\n        font-weight: 700;\n        font-size: 0.85rem; \/* Adjusted for neat fitting *\/\n        transition: all 0.3s ease;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n        width: 100%;\n    }\n\n    .btn-teal { background: var(--elp-teal); box-shadow: 0 8px 20px rgba(49, 192, 200, 0.3); }\n    .btn-teal:hover { background: #28a9b0; box-shadow: 0 12px 25px rgba(49, 192, 200, 0.4); transform: translateY(-3px); }\n    \n    .btn-orange { background: var(--elp-orange); box-shadow: 0 8px 20px rgba(246, 139, 54, 0.3); }\n    .btn-orange:hover { background: #e07722; box-shadow: 0 12px 25px rgba(246, 139, 54, 0.4); transform: translateY(-3px); }\n    \n    .btn-blue { background: var(--elp-navy); box-shadow: 0 8px 20px rgba(11, 26, 105, 0.3); }\n    .btn-blue:hover { background: #050c33; box-shadow: 0 12px 25px rgba(11, 26, 105, 0.4); transform: translateY(-3px); }\n\n    \/* --- CORPORATE PARTNERS SECTION (Navy Glow) --- *\/\n    .elp-corporate-section {\n        background-color: var(--elp-navy);\n        color: var(--elp-white);\n        padding: 120px 5%;\n        text-align: center;\n        position: relative;\n        overflow: hidden;\n    }\n\n    .elp-corporate-section::before {\n        content: '';\n        position: absolute;\n        top: 50%; left: 50%;\n        transform: translate(-50%, -50%);\n        width: 800px; height: 800px;\n        background: radial-gradient(circle, rgba(246,139,54,0.15) 0%, rgba(11,26,105,0) 70%); \/* Glow matches new navy *\/\n        border-radius: 50%;\n        pointer-events: none;\n    }\n\n    .elp-corp-content {\n        position: relative;\n        z-index: 2;\n        max-width: 850px;\n        margin: 0 auto;\n    }\n\n    .elp-corp-content h2 {\n        font-size: clamp(2.5rem, 5vw, 3.8rem);\n        margin-bottom: 30px;\n        font-weight: 800;\n        background: linear-gradient(135deg, var(--elp-orange), var(--elp-teal));\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        line-height: 1.2;\n    }\n\n    .elp-corp-content p {\n        font-size: 1.2rem;\n        color: #A9B8C7;\n        line-height: 1.8;\n        margin-bottom: 40px;\n    }\n\n    \/* Responsive Tweaks *\/\n    @media (max-width: 1200px) {\n        .elp-actions-grid {\n            grid-template-columns: repeat(2, 1fr); \/* Snaps to 2x2 grid on tablets\/small laptops *\/\n        }\n    }\n    \n    @media (max-width: 768px) {\n        .elp-inv-hero { padding: 100px 5% 120px; }\n        .elp-actions-grid { margin-top: -40px; grid-template-columns: 1fr; \/* 1 column on phones *\/ }\n    }\n<\/style>\n\n<div class=\"elp-involved-wrapper\">\n    \n    <div class=\"elp-inv-hero elp-animate-up\">\n        <div class=\"elp-inv-orb-1\"><\/div>\n        <div class=\"elp-inv-orb-2\"><\/div>\n        <div class=\"elp-inv-hero-content\">\n            <h1 class=\"elp-highlight-text\">Get <span>Involved<\/span><\/h1>\n            <p class=\"subtitle\">A Network of Supporters Fuels our Work<\/p>\n            <p class=\"desc\">\n                The Emerging Leaders Program Bx relies on the support and engagement of professionals, funders, institutions, and companies. The investment of our supporters is critical for scholars as they gain the skills and experience needed to be the leaders of tomorrow.\n            <\/p>\n        <\/div>\n    <\/div>\n\n    <section class=\"elp-actions-grid elp-animate-up\" style=\"animation-delay: 0.2s;\">\n        \n        <div class=\"elp-action-card card-volunteer\">\n            <div>\n                <div class=\"elp-action-icon\">\n                    <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"\/>\n                        <circle cx=\"12\" cy=\"7\" r=\"4\"\/>\n                        <path d=\"M19 8h-2M18 7v2\"\/>\n                    <\/svg>\n                <\/div>\n                <h3 class=\"elp-action-title\">Volunteer with our Scholars<\/h3>\n                <p>Join our Core Program and work directly with students to build professional skills.<\/p>\n            <\/div>\n            <a href=\"https:\/\/forms.gle\/yyh7ajmBf2ZoCSdR6\" target=\"_blank\" class=\"elp-action-btn btn-teal\">Sign Up to Volunteer<\/a>\n        <\/div>\n\n        <div class=\"elp-action-card card-intern\">\n            <div>\n                <div class=\"elp-action-icon\">\n                    <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <rect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\" ry=\"2\"\/>\n                        <path d=\"M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\"\/>\n                    <\/svg>\n                <\/div>\n                <h3 class=\"elp-action-title\">Host & Manage an Intern<\/h3>\n                <p>Provide real-world experience at your company for an ambitious Bronx scholar.<\/p>\n            <\/div>\n            <a href=\"https:\/\/forms.gle\/yyh7ajmBf2ZoCSdR6\" target=\"_blank\" class=\"elp-action-btn btn-orange\">Host an Intern<\/a>\n        <\/div>\n\n        <div class=\"elp-action-card card-mentor\">\n            <div>\n                <div class=\"elp-action-icon\">\n                    <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/>\n                        <circle cx=\"9\" cy=\"7\" r=\"4\"\/>\n                        <path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"\/>\n                        <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/>\n                    <\/svg>\n                <\/div>\n                <h3 class=\"elp-action-title\">Mentor Students<\/h3>\n                <p>Bring a \"Pod\" to your workplace and offer long-term career guidance.<\/p>\n            <\/div>\n            <a href=\"https:\/\/forms.gle\/yyh7ajmBf2ZoCSdR6\" target=\"_blank\" class=\"elp-action-btn btn-blue\">Become a Mentor<\/a>\n        <\/div>\n\n        <div class=\"elp-action-card card-donate\">\n            <div>\n                <div class=\"elp-action-icon\">\n                    <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <path d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\"\/>\n                    <\/svg>\n                <\/div>\n                <h3 class=\"elp-action-title\">Donate<\/h3>\n                <p>Support our programs and invest in the future of Bronx scholars with a contribution.<\/p>\n            <\/div>\n            <a href=\"https:\/\/brave-solomon.64-23-132-27.plesk.page\/index.php\/donate\/\" target=\"_blank\" class=\"elp-action-btn btn-teal\">Donate Now<\/a>\n        <\/div>\n\n    <\/section>\n\n    <section class=\"elp-corporate-section\">\n        <div class=\"elp-corp-content\">\n            <h2>Corporate Partners<\/h2>\n            <p>\n                Our corporate partners are the backbone of the ELP Bx experience. Serving as committed volunteers and mentors, they help our scholars gain the understanding and confidence they need to succeed in future workplaces. They provide real-world work experiences, sponsor events, mentor scholars, host interns, and partner with us closely as we consider how to best equip scholars for their future careers.\n            <\/p>\n            <div style=\"margin-top: 50px;\">\n                <a href=\"https:\/\/brave-solomon.64-23-132-27.plesk.page\/index.php\/contact\/\" class=\"elp-action-btn btn-orange\" style=\"padding: 16px 40px; font-size: 1.1rem; width: auto;\">Become a Corporate Partner<\/a>\n            <\/div>\n        <\/div>\n    <\/section>\n\n<\/div>\n\n```\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>Here is the updated code. To force all four boxes onto the same line, I updated the grid layout to `grid-template-columns: repeat(4, 1fr);`, slightly increased the container&#8217;s maximum width, and adjusted the internal padding and button font sizes so the content fits beautifully without getting cramped. I also included responsive media queries so they will [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-339","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/brave-solomon.64-23-132-27.plesk.page\/index.php\/wp-json\/wp\/v2\/pages\/339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brave-solomon.64-23-132-27.plesk.page\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/brave-solomon.64-23-132-27.plesk.page\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/brave-solomon.64-23-132-27.plesk.page\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/brave-solomon.64-23-132-27.plesk.page\/index.php\/wp-json\/wp\/v2\/comments?post=339"}],"version-history":[{"count":28,"href":"https:\/\/brave-solomon.64-23-132-27.plesk.page\/index.php\/wp-json\/wp\/v2\/pages\/339\/revisions"}],"predecessor-version":[{"id":927,"href":"https:\/\/brave-solomon.64-23-132-27.plesk.page\/index.php\/wp-json\/wp\/v2\/pages\/339\/revisions\/927"}],"wp:attachment":[{"href":"https:\/\/brave-solomon.64-23-132-27.plesk.page\/index.php\/wp-json\/wp\/v2\/media?parent=339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}