PNG  IHDR pHYs   OiCCPPhotoshop ICC profilexڝSgTS=BKKoR RB&*! J!QEEȠQ, !{kּ> H3Q5 B.@ $pd!s#~<<+"x M0B\t8K@zB@F&S`cbP-`'{[! eDh;VEX0fK9-0IWfH  0Q){`##xFW<+*x<$9E[-qWW.(I+6aa@.y24x6_-"bbϫp@t~,/;m%h^ uf@Wp~<5j>{-]cK'Xto(hw?G%fIq^D$.Tʳ?D*A, `6B$BB dr`)B(Ͱ*`/@4Qhp.U=pa( Aa!ڈbX#!H$ ɈQ"K5H1RT UH=r9\F;2G1Q= C7F dt1r=6Ыhڏ>C03l0.B8, c˱" VcϱwE 6wB aAHXLXNH $4 7 Q'"K&b21XH,#/{C7$C2'ITFnR#,4H#dk9, +ȅ3![ b@qS(RjJ4e2AURݨT5ZBRQ4u9̓IKhhitݕNWGw Ljg(gwLӋT071oUX**| J&*/Tު UUT^S}FU3S ԖUPSSg;goT?~YYLOCQ_ cx,!k u5&|v*=9C3J3WRf?qtN (~))4L1e\kXHQG6EYAJ'\'GgSSݧ M=:.kDwn^Loy}/TmG X $ <5qo</QC]@Caaᄑ.ȽJtq]zۯ6iܟ4)Y3sCQ? 0k߬~OCOg#/c/Wװwa>>r><72Y_7ȷOo_C#dz%gA[z|!?:eAAA!h쐭!ΑiP~aa~ 'W?pX15wCsDDDޛg1O9-J5*>.j<74?.fYXXIlK9.*6nl {/]py.,:@LN8A*%w% yg"/6шC\*NH*Mz쑼5y$3,幄'L Lݛ:v m2=:1qB!Mggfvˬen/kY- BTZ(*geWf͉9+̳ې7ᒶKW-X潬j9(xoʿܔĹdff-[n ڴ VE/(ۻCɾUUMfeI?m]Nmq#׹=TR+Gw- 6 U#pDy  :v{vg/jBFS[b[O>zG499?rCd&ˮ/~јѡ򗓿m|x31^VwwO| (hSЧc3- cHRMz%u0`:o_F@8N ' p @8N@8}' p '#@8N@8N pQ9p!i~}|6-ӪG` VP.@*j>[ K^<֐Z]@8N'KQ<Q(`s" 'hgpKB`R@Dqj '  'P$a ( `D$Na L?u80e J,K˷NI'0eݷ(NI'؀ 2ipIIKp`:O'`ʤxB8Ѥx Ѥx $ $P6 :vRNb 'p,>NB 'P]-->P T+*^h& p '‰a ‰ (ĵt#u33;Nt̵'ޯ; [3W ~]0KH1q@8]O2]3*̧7# *p>us p _6]/}-4|t'|Smx= DoʾM×M_8!)6lq':l7!|4} '\ne t!=hnLn (~Dn\+‰_4k)0e@OhZ`F `.m1} 'vp{F`ON7Srx 'D˸nV`><;yMx!IS钦OM)Ե٥x 'DSD6bS8!" ODz#R >S8!7ّxEh0m$MIPHi$IvS8IN$I p$O8I,sk&I)$IN$Hi$I^Ah.p$MIN$IR8I·N "IF9Ah0m$MIN$IR8IN$I 3jIU;kO$ɳN$+ q.x* tEXtComment

Viewing File: /home/u456810272/domains/filmmakejobs.com/public_html/7index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FILM Make Jobs</title>
    <style>
        /* CSS Reset & Variables */
        :root {
            --primary-color: #00bfa5;
            --primary-hover: #00897b;
            --dark-bg: #1a1a1a;
            --light-bg: #f9f9f9;
            --text-dark: #333333;
            --text-light: #ffffff;
            --text-gray: #777777;
            --font-heading: 'Playfair Display', serif;
            --font-body: 'Open Sans', sans-serif;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-body);
            color: var(--text-dark);
            line-height: 1.6;
            background-color: var(--light-bg);
        }

        h1, h2, h3, h4 {
            font-family: var(--font-heading);
            font-weight: 700;
        }

        a {
            text-decoration: none;
            color: inherit;
            cursor: pointer;
        }

        ul {
            list-style: none;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* SPA Page Routing */
        .page-view {
            display: none;
            animation: fadeIn 0.4s ease-in-out;
        }
        
        .page-view.active {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Buttons */
        .btn-outline {
            display: inline-block;
            padding: 10px 25px;
            border: 2px solid var(--primary-color);
            color: var(--primary-color);
            text-transform: uppercase;
            font-size: 0.9rem;
            font-weight: bold;
            transition: all 0.3s;
            background: transparent;
            cursor: pointer;
        }

        .hero .btn-outline, .bottom-cta .btn-outline {
            color: var(--text-light);
        }

        .btn-outline:hover {
            background: var(--primary-color);
            color: var(--text-light);
        }

        .btn-solid {
            display: inline-block;
            padding: 10px 25px;
            background: var(--primary-color);
            color: var(--text-light);
            text-transform: uppercase;
            font-size: 0.9rem;
            font-weight: bold;
            border: none;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .btn-solid:hover {
            background: var(--primary-hover);
        }

        /* Header */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 40px;
            background: #fff;
            border-bottom: 1px solid #eaeaea;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        /* AI Generated Logo styling */
        .logo {
            font-family: var(--font-heading);
            font-size: 1.8rem;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }

        .logo span {
            color: var(--primary-color);
        }

        .ai-badge {
            font-family: var(--font-body);
            font-size: 0.5rem;
            background: #eee;
            padding: 3px 6px;
            border-radius: 4px;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: var(--text-gray);
        }

        nav ul {
            display: flex;
            align-items: center;
            gap: 30px;
        }

        nav a.nav-link {
            font-size: 0.9rem;
            font-weight: 600;
            text-transform: uppercase;
            color: var(--text-dark);
            transition: color 0.2s;
        }

        nav a.nav-link:hover, nav a.nav-link.active-link {
            color: var(--primary-color);
        }

        /* Hero Section */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('herobanner.png') center/cover no-repeat;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: var(--text-light);
        }

        .hero h1 {
            font-size: 3.5rem;
            margin-bottom: 30px;
            max-width: 800px;
        }

        .hero-buttons {
            display: flex;
            gap: 20px;
        }

        /* Why Use Section */
        .why-use { padding: 80px 0; text-align: center; background: var(--light-bg); }
        .why-use h2 { font-size: 2.5rem; margin-bottom: 30px; }
        .tabs { display: flex; justify-content: center; gap: 40px; margin-bottom: 50px; font-weight: bold; text-transform: uppercase; }
        .tabs span { cursor: pointer; padding-bottom: 5px; }
        .tabs span.active { color: var(--primary-color); border-bottom: 2px solid var(--primary-color); }
        .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: left; background: #fff; padding: 40px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
        .feature h3 { font-size: 1.2rem; margin-bottom: 15px; text-align: center; }
        .feature p { font-size: 0.95rem; color: var(--text-gray); text-align: center; }
        .feature span { color: var(--primary-color); font-weight: bold; }

        /* Stats Section */
        .stats { display: flex; justify-content: center; gap: 15vw; padding: 60px 0; text-align: center; background: #fff; }
        .stat-item h2 { font-size: 3rem; margin-bottom: 5px; }
        .stat-item p { color: var(--primary-color); font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }

        /* Find Work Section */
        .find-work { padding: 80px 0; background: #fff;}
        .find-work-container { display: flex; gap: 50px; }
        .find-work-text { flex: 1; }
        .find-work-text h2 { font-size: 3rem; line-height: 1.2; margin-bottom: 20px; }
        .find-work-text a { color: var(--primary-color); font-weight: bold; }
        .job-list { flex: 2; display: flex; flex-direction: column; gap: 15px; }
        .job-card { display: flex; justify-content: space-between; align-items: center; padding: 20px; background: #fff; border: 1px solid #eee; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
        .job-info h4 { font-family: var(--font-body); font-size: 1.1rem; }
        .job-info p { font-size: 0.85rem; color: var(--text-gray); }
        .job-meta { text-align: right; }
        .job-meta p { font-size: 0.85rem; color: var(--primary-color); margin-bottom: 10px; }
        .btn-small { padding: 5px 15px; background: #cc0000; color: white; border: none; font-weight: bold; cursor: pointer; }

        /* Articles Section */
        .articles { padding: 80px 0; background: var(--light-bg); text-align: center; }
        .articles h2 { font-size: 2.5rem; margin-bottom: 50px; }
        .articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 40px; }
        .article-card { background: #fff; text-align: left; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
        .article-img { height: 200px; background-color: #ddd; background-size: cover; background-position: center; position: relative; }
        .badge { position: absolute; top: 15px; right: 15px; background: var(--primary-color); color: white; padding: 3px 10px; font-size: 0.7rem; text-transform: uppercase; font-weight: bold; }
        .article-content { padding: 20px; }
        .article-content h3 { color: var(--primary-color); font-family: var(--font-body); font-size: 1.1rem; margin-bottom: 15px; }
        .article-content p { font-size: 0.9rem; color: var(--text-gray); margin-bottom: 15px; }
        .read-more { color: var(--primary-color); font-weight: bold; font-size: 0.85rem; }
        .top-articles-link { color: var(--primary-color); font-weight: bold; font-size: 1.1rem; }

        /* Networking Section */
        .networking { padding: 80px 0; text-align: center; background: #fff; }
        .networking h2 { font-size: 2.5rem; margin-bottom: 40px; }
        .profile-card { width: 250px; margin: 0 auto; text-align: center; }
        .profile-img { width: 100%; height: 250px; object-fit: cover; margin-bottom: 15px; }
        .profile-card h4 { font-family: var(--font-body); margin-bottom: 5px; }
        .btn-connect { display: block; width: 100%; padding: 8px; background: var(--primary-color); color: white; text-transform: uppercase; font-weight: bold; border: none; margin-bottom: 15px; cursor: pointer; }
        .profile-details p { font-size: 0.85rem; color: var(--text-gray); margin-bottom: 5px; }

        /* Resources Section */
        .resources { padding: 80px 0; background: var(--light-bg); }
        .resources-container { display: flex; gap: 50px; }
        .resources-title { flex: 1; }
        .resources-title h2 { font-size: 3rem; line-height: 1.1; margin-bottom: 20px; }
        .resources-title a { color: var(--primary-color); font-weight: bold; }
        .resources-list { flex: 2; }
        .resource-item { margin-bottom: 25px; }
        .resource-item h4 { font-family: var(--font-body); font-size: 1.1rem; margin-bottom: 5px; }
        .resource-item p { font-size: 0.9rem; color: var(--text-gray); }

        /* Bottom CTA */
        .bottom-cta {
            height: 90vh;
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('image1.png') center/cover no-repeat;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: var(--text-light);
        }
        .bottom-cta h2 { font-size: 3rem; margin-bottom: 30px; }

        /* Interior Pages Styling (For dynamic content) */
        .interior-page { padding: 100px 0; min-height: 60vh; background: #fff;}
        .interior-page h1 { font-size: 3rem; margin-bottom: 20px; color: var(--primary-color); text-align: center; }
        .interior-page p { text-align: center; max-width: 600px; margin: 0 auto 40px auto; color: var(--text-gray); }
        
        .auth-form { max-width: 400px; margin: 0 auto; background: var(--light-bg); padding: 40px; border-radius: 8px; border: 1px solid #eaeaea; }
        .form-group { margin-bottom: 20px; }
        .form-group label { display: block; margin-bottom: 8px; font-weight: bold; font-size: 0.9rem; }
        .form-group input, .form-group textarea { width: 100%; padding: 12px; border: 1px solid #ccc; font-family: var(--font-body); }
        .auth-form .btn-solid { width: 100%; text-align: center; margin-top: 10px; }

        /* Footer */
        footer { background: var(--dark-bg); color: #aaaaaa; padding: 60px 0 20px; }
        .footer-nav { display: flex; justify-content: center; gap: 30px; margin-bottom: 50px; border-bottom: 1px solid #333; padding-bottom: 30px; }
        .footer-nav a { text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px; }
        .footer-nav a:hover { color: var(--text-light); }
        .footer-content { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 40px; }
        .footer-col h4 { color: var(--text-light); font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: 20px; }
        .footer-col p { font-size: 0.9rem; margin-bottom: 15px; }
        .newsletter-form { display: flex; flex-direction: column; gap: 10px; }
        .newsletter-form input { padding: 10px; border: none; background: #fff; }
        .social-icons { display: flex; gap: 15px; margin-top: 20px; }
        .social-icons span { display: inline-block; width: 30px; height: 30px; background: #333; border-radius: 50%; }
        .copyright { text-align: center; font-size: 0.8rem; border-top: 1px solid #333; padding-top: 20px; margin-top: 20px;}

        /* Responsive */
        @media (max-width: 992px) {
            .features-grid, .articles-grid, .footer-content { grid-template-columns: 1fr; }
            .find-work-container, .resources-container { flex-direction: column; }
            .stats { gap: 50px; }
            nav ul { gap: 15px; }
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
</head>
<body>

    <!-- Header Navigation -->
    <header>
        <div class="logo" onclick="navigate('home')">
            <span>FILM</span> Make Jobs <div class="ai-badge">AI Generated Logo</div>
        </div>
        <nav>
            <ul>
                <li><a onclick="navigate('home')" class="nav-link active-link" id="nav-home">Home</a></li>
                <li><a onclick="navigate('pricing')" class="nav-link" id="nav-pricing">Pricing</a></li>
                <li><a onclick="navigate('resources')" class="nav-link" id="nav-resources">Resources</a></li>
                <li><a onclick="navigate('contact')" class="nav-link" id="nav-contact">Contact Us</a></li>
                <li><a onclick="navigate('login')" class="btn-outline" id="nav-login">LOGIN</a></li>
                <li><a onclick="navigate('register')" class="btn-solid" id="nav-register">Register</a></li>
            </ul>
        </nav>
    </header>

    <!-- MAIN CONTENT AREA FOR SPA -->
    <main id="app-root">

        <!-- ================= HOME PAGE ================= -->
        <section id="page-home" class="page-view active">
            <!-- Hero Section -->
            <section class="hero">
                <h1>Welcome To The Coolest Community In The World</h1>
                <div class="hero-buttons">
                    <button class="btn-outline">Find Projects</button>
                    <button class="btn-outline">Find Freelancers</button>
                </div>
            </section>

            <!-- Why Use Section -->
            <section class="why-use">
                <div class="container">
                    <h2>Why Use FILM Make Jobs?</h2>
                    <div class="tabs">
                        <span class="active">Cast and Crew</span>
                        <span>Employers</span>
                        <span>Production Companies</span>
                    </div>
                    
                    <div class="features-grid">
                        <div class="feature">
                            <h3>Find Jobs</h3>
                            <p>Search through thousands of <span>jobs in your area</span> and easily apply to them with your profile.</p>
                        </div>
                        <div class="feature">
                            <h3>Promote Yourself</h3>
                            <p>Create a profile and let people know <span>who you are</span> and what your skills are.</p>
                        </div>
                        <div class="feature">
                            <h3>Network</h3>
                            <p>Connect with other filmmakers in your area and build a network that will <span>help your career</span>.</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Stats Section -->
            <section class="stats">
                <div class="container" style="display: flex; justify-content: center; gap: 15vw;">
                    <div class="stat-item">
                        <h2>175,000+</h2>
                        <p>Filmmakers</p>
                    </div>
                    <div class="stat-item">
                        <h2>1</h2>
                        <p>Community</p>
                    </div>
                </div>
            </section>

            <!-- Find Work Section -->
            <section class="find-work">
                <div class="container find-work-container">
                    <div class="find-work-text">
                        <h2>Find Work<br>Local To You</h2>
                        <a onclick="navigate('register')">View All Jobs on FILM Make Jobs &rarr;</a>
                    </div>
                    <div class="job-list">
                        <div class="job-card">
                            <div class="job-info">
                                <h4>Looking for Editor for Short Film</h4>
                                <p>Production Company • Non-Union</p>
                            </div>
                            <div class="job-meta">
                                <p>Los Angeles, CA</p>
                                <button class="btn-small">Apply</button>
                            </div>
                        </div>
                        <div class="job-card">
                            <div class="job-info">
                                <h4>Sound Mixer Needed</h4>
                                <p>Independent • Union</p>
                            </div>
                            <div class="job-meta">
                                <p>New York, NY</p>
                                <button class="btn-small">Apply</button>
                            </div>
                        </div>
                        <div class="job-card">
                            <div class="job-info">
                                <h4>Camera Operator for Music Video</h4>
                                <p>Agency • Non-Union</p>
                            </div>
                            <div class="job-meta">
                                <p>Atlanta, GA</p>
                                <button class="btn-small">Apply</button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Articles Section -->
            <section class="articles">
                <div class="container">
                    <h2>Information | Films | Events</h2>
                    <div class="articles-grid">
                        <div class="article-card">
                            <div class="article-img" style="background-image: url('https://images.unsplash.com/photo-1518929458119-e5bf444c30f4?auto=format&fit=crop&w=600&q=80');">
                                <span class="badge">Acting</span>
                            </div>
                            <div class="article-content">
                                <h3>Actors & Actresses: How To Shine When The Camera Starts Rolling</h3>
                                <p>We all know the feeling of being nervous on set, but there are ways to overcome it and give your best performance...</p>
                                <a href="#" class="read-more">Read More &rarr;</a>
                            </div>
                        </div>
                        <div class="article-card">
                            <div class="article-img" style="background-image: url('https://images.unsplash.com/photo-1590845947698-8924d7409b56?auto=format&fit=crop&w=600&q=80');">
                                <span class="badge">Sound</span>
                            </div>
                            <div class="article-content">
                                <h3>Importance of Sound: Don't Let Bad Audio Ruin Your Film</h3>
                                <p>Audio is half of the viewing experience. Learn the basics of capturing clean sound on location...</p>
                                <a href="#" class="read-more">Read More &rarr;</a>
                            </div>
                        </div>
                        <div class="article-card">
                            <div class="article-img" style="background-image: url('https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=600&q=80');">
                                <span class="badge">Industry</span>
                            </div>
                            <div class="article-content">
                                <h3>Top 10 Indie Film Festivals You Should Submit To</h3>
                                <p>Getting your film seen is the hardest part. Here is a curated list of the best festivals for independent creators...</p>
                                <a href="#" class="read-more">Read More &rarr;</a>
                            </div>
                        </div>
                    </div>
                    <a href="#" class="top-articles-link">Read More: Here Are Our Top 3 Articles On FILM Make Jobs &rarr;</a>
                </div>
            </section>

            <!-- Networking Section -->
            <section class="networking">
                <div class="container">
                    <h2>Good Networking is Everywhere</h2>
                    <div class="profile-card">
                        <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=300&q=80" alt="Profile" class="profile-img">
                        <h4>Luke Skywalker</h4>
                        <button class="btn-connect">Connect</button>
                        <div class="profile-details">
                            <p><strong>Role:</strong> Director</p>
                            <p><strong>Location:</strong> Los Angeles</p>
                            <p><strong>Experience:</strong> 5 Years</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Resources Section Preview -->
            <section class="resources">
                <div class="container resources-container">
                    <div class="resources-title">
                        <h2>Filmmaking<br>Resources</h2>
                        <a onclick="navigate('resources')">See All FILM Make Jobs Resources &rarr;</a>
                    </div>
                    <div class="resources-list">
                        <div class="resource-item">
                            <h4>Gear</h4>
                            <p>Find the best equipment for your production needs, from cameras and lenses to lighting and grip.</p>
                        </div>
                        <div class="resource-item">
                            <h4>Checklists</h4>
                            <p>Ensure you have everything ready before the shoot starts with our comprehensive checklists.</p>
                        </div>
                        <div class="resource-item">
                            <h4>Billing Tools</h4>
                            <p>Keep track of your budget and invoices easily with integrated financial tools tailored for sets.</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Bottom CTA Section -->
            <section class="bottom-cta">
                <h2>What Are You Waiting For?</h2>
                <div class="hero-buttons">
                    <button class="btn-outline">Find Projects</button>
                    <button class="btn-outline">Find Freelancers</button>
                </div>
            </section>
        </section>

        <!-- ================= PRICING PAGE ================= -->
        <section id="page-pricing" class="page-view interior-page">
            <div class="container">
                <h1>Simple, Transparent Pricing</h1>
                <p>Choose the plan that fits your production scale.</p>
                <!-- Placeholder for pricing tables -->
                <div style="text-align:center; padding: 50px; background:var(--light-bg); border:1px dashed #ccc;">
                    <h3>Pricing Plans Available Soon</h3>
                </div>
            </div>
        </section>

        <!-- ================= RESOURCES PAGE ================= -->
        <section id="page-resources" class="page-view interior-page">
            <div class="container">
                <h1>Filmmaker Resource Hub</h1>
                <p>Everything you need from pre-production to post.</p>
                <div class="features-grid">
                    <div class="feature">
                        <h3>Script Breakdown</h3>
                        <p>Analyze your script to determine all necessary elements for scheduling.</p>
                    </div>
                    <div class="feature">
                        <h3>Call Sheets</h3>
                        <p>Generate industry-standard call sheets automatically.</p>
                    </div>
                    <div class="feature">
                        <h3>Casting Tools</h3>
                        <p>Streamline your audition process.</p>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- ================= CONTACT PAGE ================= -->
        <section id="page-contact" class="page-view interior-page">
            <div class="container">
                <h1>Get In Touch</h1>
                <p>Have questions about FILM Make Jobs? Send us a message.</p>
                <form class="auth-form" onsubmit="event.preventDefault();">
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" placeholder="Your Name">
                    </div>
                    <div class="form-group">
                        <label>Email</label>
                        <input type="email" placeholder="Your Email">
                    </div>
                    <div class="form-group">
                        <label>Message</label>
                        <textarea rows="4" placeholder="How can we help?"></textarea>
                    </div>
                    <button type="submit" class="btn-solid">Send Message</button>
                </form>
            </div>
        </section>

        <!-- ================= LOGIN PAGE ================= -->
        <section id="page-login" class="page-view interior-page">
            <div class="container">
                <h1>Welcome Back</h1>
                <p>Sign in to your FILM Make Jobs account.</p>
                <form class="auth-form" onsubmit="event.preventDefault(); navigate('home');">
                    <div class="form-group">
                        <label>Email Address</label>
                        <input type="email" placeholder="Enter your email" required>
                    </div>
                    <div class="form-group">
                        <label>Password</label>
                        <input type="password" placeholder="Enter your password" required>
                    </div>
                    <button type="submit" class="btn-solid">Login Securely</button>
                    <p style="margin-top: 15px; font-size: 0.85rem;">Don't have an account? <a onclick="navigate('register')" style="color:var(--primary-color);">Register here</a></p>
                </form>
            </div>
        </section>

        <!-- ================= REGISTER PAGE ================= -->
        <section id="page-register" class="page-view interior-page">
            <div class="container">
                <h1>Join the Community</h1>
                <p>Create your profile and start networking today.</p>
                <form class="auth-form" onsubmit="event.preventDefault(); navigate('home');">
                    <div class="form-group">
                        <label>Full Name</label>
                        <input type="text" placeholder="John Doe" required>
                    </div>
                    <div class="form-group">
                        <label>Account Type</label>
                        <select style="width: 100%; padding: 12px; border: 1px solid #ccc; font-family: var(--font-body);">
                            <option>Freelancer / Cast / Crew</option>
                            <option>Employer / Production Company</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Email Address</label>
                        <input type="email" placeholder="Enter your email" required>
                    </div>
                    <div class="form-group">
                        <label>Password</label>
                        <input type="password" placeholder="Create a password" required>
                    </div>
                    <button type="submit" class="btn-solid">Create Account</button>
                    <p style="margin-top: 15px; font-size: 0.85rem;">Already have an account? <a onclick="navigate('login')" style="color:var(--primary-color);">Login here</a></p>
                </form>
            </div>
        </section>

    </main>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-nav">
                <a onclick="navigate('home')">Home</a>
                <a onclick="navigate('pricing')">Pricing</a>
                <a onclick="navigate('resources')">Resources</a>
                <a onclick="navigate('login')">LOGIN</a>
                <a onclick="navigate('register')">Register</a>
                <a onclick="navigate('contact')">Contact Us</a>
            </div>
            
            <div class="footer-content">
                <div class="footer-col">
                    <h4>Get FILM Make Jobs</h4>
                    <p>Join the coolest community in the world. Sign up for our newsletter.</p>
                    <form class="newsletter-form" onsubmit="event.preventDefault();">
                        <input type="email" placeholder="Email Address" required>
                        <button type="submit" class="btn-solid">Subscribe</button>
                    </form>
                </div>
                
                <div class="footer-col">
                    <h4>Headquarters</h4>
                    <p><strong>Owner:</strong> Arthur Vance</p>
                    <p><strong>Address:</strong> 1045 Cinematic Arts Blvd, Suite 200, Los Angeles, CA 90028</p>
                    <p><strong>Phone:</strong> +1 (800) 555-0199</p>
                    <p><strong>Email:</strong> admin@filmmakejobs.com</p>
                </div>

                <div class="footer-col">
                    <h4>Connect With Us</h4>
                    <p>Follow us on social media to stay updated on the latest industry news.</p>
                    <div class="social-icons">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
            
            <div class="copyright">
                <p>&copy; 2026 FILM Make Jobs. Owned and Operated by Arthur Vance. All Rights Reserved.</p>
            </div>
        </div>
    </footer>

    <!-- Single Page Application Routing Script -->
    <script>
        function navigate(pageId) {
            // Hide all pages
            const pages = document.querySelectorAll('.page-view');
            pages.forEach(page => {
                page.classList.remove('active');
            });

            // Show target page
            const targetPage = document.getElementById('page-' + pageId);
            if (targetPage) {
                targetPage.classList.add('active');
            }

            // Update navigation active states
            const navLinks = document.querySelectorAll('.nav-link');
            navLinks.forEach(link => {
                link.classList.remove('active-link');
            });
            
            const activeNav = document.getElementById('nav-' + pageId);
            if(activeNav) {
                activeNav.classList.add('active-link');
            }

            // Scroll to top of the page smoothly
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }
    </script>
</body>
</html>
Back to Directory=ceiIENDB`