Fit Men Academy Footer

Fit Men Academy

/

Here's an improved prompt that addresses your concerns and provides clear instructions for implementation:

---

**Prompt:**

"I have the free version of WPCode Lite installed on my WordPress Kadence theme. I need your help creating a simple, clean footer code that won't be complicated to implement.

**What I need:**

Please generate HTML/CSS code for a basic but nice-looking footer with these sections:

- Newsletter signup: "Sign up for our newsletter" heading, "Stay up to date on events, tips & announcements" subheading, plus an email field and subscribe button

- Logo area: Simple placeholder text for my logo with a short slogan under it

- Social media icons: Basic icons for Facebook, Twitter, Instagram (using simple HTML symbols or Font Awesome if possible)

- Policy links: Privacy Policy, Terms of Service, Cookie Policy

- Copyright: "All Rights Reserved" with a [year] placeholder

**Important requirements:**

- Keep it SIMPLE - I'm not a developer and don't have premium features

- Make it mobile-friendly

- Use basic CSS that will work with my Kadence theme

- Tell me EXACTLY where to paste the code in WordPress

**After giving me the code, please provide step-by-step instructions for:**

1. Where to go in my WordPress dashboard

2. What buttons to click in WPCode Lite

3. Exactly where to paste the code (header? footer? custom code area?)

4. How to save and activate it

5. How to view my website to see if it worked

Please assume I'm a beginner, so be very specific with your instructions. Thank you!"

---

This prompt should get you:

1. Simple, clean code that's easy to manage

2. Step-by-step instructions for implementation

3. Confirmation of exactly where to paste everything

4. Guidance on how to check if it worked

Once you get the response, you'll have both the code AND clear directions for where it goes in your WordPress admin area.

Show more

12:55 PM

Reading the frontend design skill to ensure high quality output

Now I have everything I need. Looking at your project files, I can see your brand uses a dark slate/blue theme with cyan accents. I'll create a footer that perfectly matches that aesthetic — clean, modern, and ready for WPCode Lite.

Created a file, read a file

Creating a beautiful footer HTML/CSS that matches the Fit Men Academy dark blue/cyan brand aesthetic

fitmenacademy-footer.html

Presented file

Done

Here's your footer, styled to perfectly match your existing Fit Men Academy brand (dark slate/blue theme, cyan accents, Barlow Condensed headings — same look as your Monthly Challenges and Testimonials pages).

Step-by-Step: How to Add This in WordPress

Step 1 — Install WPCode Lite (skip if already done)

Go to Plugins → Add New in your WordPress dashboard, search for WPCode, and click Install Now, then Activate.

Step 2 — Open WPCode

In your dashboard left sidebar, click Code Snippets (a new menu item WPCode added). Then click + Add Snippet.

Step 3 — Choose the right snippet type

You'll see a screen asking "How would you like to add your code?" — Click "Add Your Custom Code (New Snippet)", then on the next screen select HTML Snippet from the code type dropdown.

Step 4 — Paste the code

Give your snippet a name like Fit Men Academy Footer

Open the downloaded file above, Select All (Ctrl+A / Cmd+A), Copy (Ctrl+C)

Paste it into the code box in WPCode

Step 5 — Set the Location

Under Insertion, make sure:

Insert Method is set to Auto Insert

Location is set to Site Wide Footer (or "Before </body> tag")

Step 6 — Save & Activate

Toggle the snippet to Active (top right switch turns blue), then click Save Snippet.

Step 7 — Check your site

Open your website in a new browser tab, scroll to the bottom, and your new footer should appear. If you see your old theme footer above it, you can hide the original Kadence footer under Appearance → Customize → Footer.

A few things to customize in the code:

Replace fitmenacademy in the social media links with your actual usernames

Replace /privacy-policy, /terms-of-service, /cookie-policy with your actual page URLs

Update the nav links (Programs, Company, Support) to match your real pages

Change the brand description to your own words

Fitmenacademy footer

Code · HTML 

Want to be notified when Claude responds?

Claude is AI and can make mistakes. Please double-check responses.

Fitmenacademy footer · HTML

Copy

<!-- ============================================================

     FIT MEN ACADEMY - FOOTER CODE

     Paste this in WPCode Lite > Add New Snippet > HTML Snippet

     Location: Site Wide Footer

     ============================================================ -->

<link rel="preconnect" href="https://fonts.googleapis.com">

<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;900&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<style>

/* ==========================================

   FIT MEN ACADEMY FOOTER

   ========================================== */

#fma-footer * {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

#fma-footer {

  --cyan: #22d3ee;

  --blue: #3b82f6;

  --dark: #0a0f1e;

  --darker: #060b16;

  --card: rgba(15, 23, 42, 0.95);

  --border: rgba(30, 58, 138, 0.4);

  --text: #94a3b8;

  --white: #f1f5f9;

  font-family: 'DM Sans', sans-serif;

  background: var(--darker);

  color: var(--text);

  position: relative;

  overflow: hidden;

}

/* Decorative top border */

#fma-footer::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 2px;

  background: linear-gradient(90deg, transparent, var(--blue), var(--cyan), var(--blue), transparent);

}

/* Subtle background glow */

#fma-footer::after {

  content: '';

  position: absolute;

  top: -200px;

  left: 50%;

  transform: translateX(-50%);

  width: 800px;

  height: 400px;

  background: radial-gradient(ellipse, rgba(59,130,246,0.06) 0%, transparent 70%);

  pointer-events: none;

}

.fma-footer-inner {

  max-width: 1200px;

  margin: 0 auto;

  padding: 70px 24px 0;

  position: relative;

  z-index: 1;

}

/* ---- NEWSLETTER SECTION ---- */

.fma-newsletter {

  background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(34,211,238,0.08));

  border: 1px solid var(--border);

  border-radius: 20px;

  padding: 48px;

  text-align: center;

  margin-bottom: 64px;

  position: relative;

  overflow: hidden;

}

.fma-newsletter::before {

  content: '';

  position: absolute;

  inset: 0;

  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' fill-rule='evenodd'%3E%3Cg fill='%2322d3ee' 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");

  pointer-events: none;

}

.fma-newsletter-label {

  display: inline-block;

  font-family: 'Barlow Condensed', sans-serif;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 4px;

  text-transform: uppercase;

  color: var(--cyan);

  margin-bottom: 16px;

  background: rgba(34,211,238,0.1);

  padding: 5px 16px;

  border-radius: 100px;

  border: 1px solid rgba(34,211,238,0.2);

}

.fma-newsletter h2 {

  font-family: 'Barlow Condensed', sans-serif;

  font-size: clamp(28px, 4vw, 42px);

  font-weight: 900;

  color: var(--white);

  text-transform: uppercase;

  letter-spacing: 1px;

  line-height: 1.1;

  margin-bottom: 10px;

}

.fma-newsletter h2 span {

  background: linear-gradient(90deg, var(--blue), var(--cyan));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}

.fma-newsletter p {

  color: var(--text);

  font-size: 16px;

  font-weight: 300;

  margin-bottom: 32px;

  max-width: 400px;

  margin-left: auto;

  margin-right: auto;

}

.fma-newsletter-form {

  display: flex;

  gap: 0;

  max-width: 460px;

  margin: 0 auto;

  border-radius: 100px;

  overflow: hidden;

  border: 1px solid rgba(59,130,246,0.4);

  background: rgba(0,0,0,0.3);

  padding: 5px;

}

.fma-newsletter-form input[type="email"] {

  flex: 1;

  padding: 13px 20px;

  background: transparent;

  border: none;

  outline: none;

  color: var(--white);

  font-family: 'DM Sans', sans-serif;

  font-size: 14px;

}

.fma-newsletter-form input[type="email"]::placeholder {

  color: rgba(148,163,184,0.5);

}

.fma-newsletter-form button {

  padding: 13px 28px;

  background: linear-gradient(135deg, var(--blue), var(--cyan));

  color: white;

  border: none;

  border-radius: 100px;

  font-family: 'Barlow Condensed', sans-serif;

  font-size: 14px;

  font-weight: 700;

  letter-spacing: 1.5px;

  text-transform: uppercase;

  cursor: pointer;

  transition: all 0.25s ease;

  white-space: nowrap;

}

.fma-newsletter-form button:hover {

  opacity: 0.88;

  transform: scale(1.03);

}

/* ---- MAIN FOOTER GRID ---- */

.fma-footer-grid {

  display: grid;

  grid-template-columns: 1.6fr 1fr 1fr 1fr;

  gap: 48px;

  padding-bottom: 56px;

  border-bottom: 1px solid var(--border);

}

/* Logo column */

.fma-brand-name {

  font-family: 'Barlow Condensed', sans-serif;

  font-size: 32px;

  font-weight: 900;

  letter-spacing: 2px;

  text-transform: uppercase;

  color: var(--white);

  line-height: 1;

  margin-bottom: 4px;

}

.fma-brand-name span {

  background: linear-gradient(90deg, var(--blue), var(--cyan));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}

.fma-brand-tagline {

  font-size: 12px;

  letter-spacing: 3px;

  text-transform: uppercase;

  color: var(--cyan);

  margin-bottom: 20px;

  font-weight: 500;

}

.fma-brand-desc {

  font-size: 14px;

  line-height: 1.7;

  color: var(--text);

  font-weight: 300;

  max-width: 280px;

}

/* Social icons */

.fma-social {

  display: flex;

  gap: 10px;

  margin-top: 28px;

}

.fma-social a {

  width: 40px;

  height: 40px;

  border-radius: 10px;

  border: 1px solid var(--border);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--text);

  text-decoration: none;

  transition: all 0.25s ease;

  background: rgba(255,255,255,0.03);

  font-size: 15px;

}

.fma-social a:hover {

  background: linear-gradient(135deg, var(--blue), var(--cyan));

  border-color: transparent;

  color: white;

  transform: translateY(-2px);

}

/* Footer columns */

.fma-col-title {

  font-family: 'Barlow Condensed', sans-serif;

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 3px;

  text-transform: uppercase;

  color: var(--cyan);

  margin-bottom: 20px;

}

.fma-col-links {

  list-style: none;

}

.fma-col-links li {

  margin-bottom: 11px;

}

.fma-col-links a {

  color: var(--text);

  text-decoration: none;

  font-size: 14px;

  font-weight: 400;

  transition: all 0.2s ease;

  display: inline-flex;

  align-items: center;

  gap: 6px;

}

.fma-col-links a::before {

  content: '';

  width: 0;

  height: 1px;

  background: var(--cyan);

  transition: width 0.25s ease;

}

.fma-col-links a:hover {

  color: var(--cyan);

}

.fma-col-links a:hover::before {

  width: 10px;

}

/* ---- BOTTOM BAR ---- */

.fma-footer-bottom {

  padding: 24px 0;

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 16px;

}

.fma-copyright {

  font-size: 13px;

  color: rgba(148,163,184,0.6);

  font-weight: 300;

}

.fma-copyright strong {

  color: rgba(148,163,184,0.85);

  font-weight: 500;

}

.fma-policy-links {

  display: flex;

  gap: 24px;

  list-style: none;

  flex-wrap: wrap;

}

.fma-policy-links a {

  color: rgba(148,163,184,0.6);

  text-decoration: none;

  font-size: 12px;

  letter-spacing: 0.5px;

  transition: color 0.2s;

}

.fma-policy-links a:hover {

  color: var(--cyan);

}

/* ==========================================

   MOBILE RESPONSIVE

   ========================================== */

@media (max-width: 900px) {

  .fma-footer-grid {

    grid-template-columns: 1fr 1fr;

    gap: 36px;

  }

  .fma-footer-brand-col {

    grid-column: 1 / -1;

  }

}

@media (max-width: 600px) {

  .fma-footer-inner {

    padding: 50px 20px 0;

  }

  .fma-newsletter {

    padding: 32px 24px;

  }

  .fma-newsletter-form {

    flex-direction: column;

    border-radius: 14px;

    padding: 8px;

    gap: 8px;

  }

  .fma-newsletter-form input[type="email"] {

    text-align: center;

  }

  .fma-newsletter-form button {

    width: 100%;

    padding: 14px;

  }

  .fma-footer-grid {

    grid-template-columns: 1fr 1fr;

    gap: 32px 24px;

  }

  .fma-footer-bottom {

    flex-direction: column-reverse;

    text-align: center;

  }

  .fma-policy-links {

    justify-content: center;

    gap: 16px;

  }

}

@media (max-width: 400px) {

  .fma-footer-grid {

    grid-template-columns: 1fr;

  }

}

</style>

<footer id="fma-footer">

  <div class="fma-footer-inner">

    <!-- NEWSLETTER -->

    <div class="fma-newsletter">

      <div class="fma-newsletter-label">Newsletter</div>

      <h2>Sign Up For Our <span>Newsletter</span></h2>

      <p>Stay up to date on events, tips & announcements</p>

      <form class="fma-newsletter-form" onsubmit="return false;">

        <input type="email" placeholder="Enter your email address..." />

        <button type="submit">Subscribe</button>

      </form>

    </div>

    <!-- MAIN GRID -->

    <div class="fma-footer-grid">

      <!-- Brand / Logo Column -->

      <div class="fma-footer-brand-col">

        <div class="fma-brand-name">Fit Men <span>Academy</span></div>

        <div class="fma-brand-tagline">Train Hard. Live Better.</div>

        <p class="fma-brand-desc">

          Helping men build stronger bodies and better habits — one challenge at a time. Real programs. Real results.

        </p>

        <!-- Social Icons -->

        <div class="fma-social">

          <a href="https://facebook.com/fitmenacademy" target="_blank" rel="noopener" title="Facebook">

            <i class="fab fa-facebook-f"></i>

          </a>

          <a href="https://instagram.com/fitmenacademy" target="_blank" rel="noopener" title="Instagram">

            <i class="fab fa-instagram"></i>

          </a>

          <a href="https://youtube.com/fitmenacademy" target="_blank" rel="noopener" title="YouTube">

            <i class="fab fa-youtube"></i>

          </a>

          <a href="https://tiktok.com/@fitmenacademy" target="_blank" rel="noopener" title="TikTok">

            <i class="fab fa-tiktok"></i>

          </a>

        </div>

      </div>

      <!-- Programs -->

      <div>

        <div class="fma-col-title">Programs</div>

        <ul class="fma-col-links">

          <li><a href="#">Monthly Challenges</a></li>

          <li><a href="#">Strength Training</a></li>

          <li><a href="#">Fat Loss Programs</a></li>

          <li><a href="#">Flexibility & Mobility</a></li>

          <li><a href="#">Nutrition Plans</a></li>

        </ul>

      </div>

      <!-- Company -->

      <div>

        <div class="fma-col-title">Company</div>

        <ul class="fma-col-links">

          <li><a href="#">About Us</a></li>

          <li><a href="#">Success Stories</a></li>

          <li><a href="#">Blog</a></li>

          <li><a href="#">Contact</a></li>

          <li><a href="#">Affiliates</a></li>

        </ul>

      </div>

      <!-- Support -->