OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	03/13/2025 05:29:39 AM	rwxr-xr-x
📁 images3	-	03/13/2025 08:47:02 AM	rwxr-xr-x
📄 index.html	25.47 KB	03/13/2025 08:45:50 AM	rw-r--r--

Editing: index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Creative Agency</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
    />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

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

body {
        font-family: "Poppins", sans-serif;
        line-height: 1.6;
        color: var(--dark-color);
        background-color: var(--light-color);
      }

a {
        text-decoration: none;
        color: inherit;
        transition: all 0.3s ease;
      }

ul {
        list-style: none;
      }

.container {
        width: 90%;
        max-width: 1200px;
        margin: 0 auto;
      }

.btn {
        display: inline-block;
        padding: 12px 28px;
        background-color: var(--primary-color);
        color: white;
        border-radius: 30px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
      }

.btn:hover {
        background-color: var(--secondary-color);
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      }

/* Header */
      .header {
        width: 100%;
        z-index: 1000;
        background-color: rgba(255, 255, 255, 0.95);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }

.navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;
      }

.logo {
        font-size: 1.8rem;
        font-weight: 700;
        color: var(--primary-color);
      }

.nav-menu {
        display: flex;
      }

.nav-item {
        margin-left: 30px;
      }

.nav-link {
        font-weight: 500;
        padding: 8px 0;
        position: relative;
      }

.nav-link::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background-color: var(--primary-color);
        transition: width 0.3s ease;
      }

.nav-link:hover::after {
        width: 100%;
      }

.hamburger {
        display: none;
        cursor: pointer;
      }

/* Hero Section */
      .hero {
        height: 100vh;
        display: flex;
        align-items: center;
        background-color: white;
      }

.hero-content {
        display: flex;
        align-items: center;
      }

.hero-text {
        flex: 1;
        padding-right: 50px;
      }

.hero-text h1 {
        font-size: 3.5rem;
        font-weight: 700;
        margin-bottom: 20px;
        line-height: 1.2;
      }

.hero-text h1 span {
        color: var(--primary-color);
      }

.hero-text p {
        font-size: 1.1rem;
        margin-bottom: 30px;
        color: #666;
      }

.hero-image {
        flex: 1;
      }

.hero-image img {
        width: 100%;
        height: auto;
        border-radius: 10px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      }

/* Services Section */
      .services {
        padding: 100px 0;
        background-color: white;
      }

.section-title {
        text-align: center;
        margin-bottom: 60px;
      }

.section-title h2 {
        font-size: 2.5rem;
        margin-bottom: 15px;
        position: relative;
        display: inline-block;
      }

.section-title h2::after {
        content: "";
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 50px;
        height: 3px;
        background-color: var(--primary-color);
      }

.section-title p {
        color: #666;
        max-width: 600px;
        margin: 0 auto;
      }

.services-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
      }

.service-card {
        background-color: white;
        border-radius: 10px;
        padding: 30px;
        text-align: center;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
      }

.service-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
      }

.service-icon {
        width: 70px;
        height: 70px;
        margin: 0 auto 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--light-color);
        border-radius: 50%;
        color: var(--primary-color);
        font-size: 1.5rem;
      }

.service-card h3 {
        margin-bottom: 15px;
      }

.service-card p {
        color: #666;
      }

/* Portfolio Section */
      .portfolio {
        padding: 100px 0;
        background-color: var(--light-color);
      }

.portfolio-filter {
        display: flex;
        justify-content: center;
        margin-bottom: 40px;
      }

.filter-item {
        margin: 0 10px;
        padding: 8px 20px;
        background-color: white;
        border-radius: 30px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
      }

.filter-item.active,
      .filter-item:hover {
        background-color: var(--primary-color);
        color: white;
      }

.portfolio-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
      }

.portfolio-item {
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        background-color: white;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      }

.portfolio-image {
        width: 100%;
        height: 250px;
        background-color: #ddd;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #aaa;
        font-size: 1.2rem;
      }

.portfolio-info {
        padding: 20px;
        text-align: center;
      }

.portfolio-info h3 {
        margin-bottom: 5px;
      }

.portfolio-info span {
        color: #666;
        font-size: 0.9rem;
      }

/* Contact Form Section */
      .contact {
        padding: 100px 0;
        background-color: white;
      }

.contact-container {
        display: flex;
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
        overflow: hidden;
      }

.contact-info {
        flex: 2;
        padding: 50px;
        background-color: var(--primary-color);
        color: white;
      }

.contact-info h3 {
        margin-bottom: 30px;
        font-size: 1.8rem;
      }

.contact-method {
        display: flex;
        align-items: flex-start;
        margin-bottom: 30px;
      }

.contact-icon {
        width: 50px;
        height: 50px;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        margin-right: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

.contact-text h4 {
        margin-bottom: 5px;
      }

.contact-form {
        flex: 3;
        padding: 50px;
      }

.form-group {
        margin-bottom: 20px;
      }

.form-group label {
        display: block;
        margin-bottom: 5px;
        font-weight: 500;
      }

.form-control {
        width: 100%;
        padding: 12px 15px;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-family: "Poppins", sans-serif;
        transition: all 0.3s ease;
      }

.form-control:focus {
        border-color: var(--primary-color);
        outline: none;
        box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1);
      }

.checkbox-group {
        margin-top: 30px;
      }

.checkbox-title {
        margin-bottom: 15px;
        font-weight: 500;
      }

.checkbox-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
      }

.checkbox-item {
        display: flex;
        align-items: center;
      }

.checkbox-item input {
        margin-right: 8px;
      }

/* Footer */
      .footer {
        background-color: var(--dark-color);
        color: white;
        padding: 80px 0 30px;
      }

.footer-content {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 40px;
        margin-bottom: 60px;
      }

.footer-column h3 {
        margin-bottom: 25px;
        font-size: 1.3rem;
        position: relative;
        padding-bottom: 10px;
      }

.footer-column h3::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 30px;
        height: 2px;
        background-color: var(--primary-color);
      }

.footer-column p,
      .footer-column a {
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 10px;
        display: block;
      }

.footer-column a:hover {
        color: white;
        padding-left: 5px;
      }

.social-links {
        display: flex;
        margin-top: 20px;
      }

.social-link {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
        transition: all 0.3s ease;
      }

.social-link:hover {
        background-color: var(--primary-color);
        transform: translateY(-5px);
      }

.copyright {
        text-align: center;
        padding-top: 30px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.5);
      }

/* Responsive */
      @media (max-width: 992px) {
        .services-grid,
        .portfolio-grid {
          grid-template-columns: repeat(2, 1fr);
        }

.footer-content {
          grid-template-columns: repeat(2, 1fr);
        }

.hero-content {
          flex-direction: column;
        }

.hero-text {
          margin-bottom: 50px;
          padding-right: 0;
          text-align: center;
        }

.contact-container {
          flex-direction: column;
        }

.checkbox-container {
          grid-template-columns: repeat(2, 1fr);
        }
      }

@media (max-width: 768px) {
        .navbar {
          position: relative;
        }

.hamburger {
          display: block;
          font-size: 1.5rem;
        }

.nav-menu {
          position: absolute;
          top: 100%;
          right: -100%;
          width: 70%;
          background-color: white;
          flex-direction: column;
          padding: 30px;
          border-radius: 10px;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
          transition: all 0.4s ease;
        }

.nav-menu.active {
          right: 0;
        }

.nav-item {
          margin: 15px 0;
        }

.service-card,
        .portfolio-item {
          transform: translateY(0) !important;
        }
      }

@media (max-width: 576px) {
        .services-grid,
        .portfolio-grid {
          grid-template-columns: 1fr;
        }

.footer-content {
          grid-template-columns: 1fr;
        }

.checkbox-container {
          grid-template-columns: 1fr;
        }

.hero-text h1 {
          font-size: 2.5rem;
        }
      }
    </style>
  </head>

<body>
    <header class="header">
      <div class="container">
        <nav class="navbar">
          <a href="#" class="logo">CreativeX</a>
          <ul class="nav-menu">
            <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Services</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Portfolio</a></li>
            <li class="nav-item"><a href="#" class="nav-link">About</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
          </ul>
          <div class="hamburger">
            <i class="fas fa-bars"></i>
          </div>
        </nav>
      </div>
    </header>

<section class="hero">
      <div class="container">
        <div class="hero-content">
          <div class="hero-text">
            <h1>
              We Create <span>Digital</span> Experiences That
              <span>Matter</span>
            </h1>
            <p>
              Our creative team delivers cutting-edge solutions for brands
              looking to stand out in today's competitive digital landscape.
            </p>
            <a href="#" class="btn">Our Work</a>
          </div>
          <div class="hero-image">
            <img
              src="images3/bg_1.jpg"
              alt="Hero Image"
              style="
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 10px;
              "
            />
          </div>
        </div>
      </div>
    </section>

<section class="services">
      <div class="container">
        <div class="section-title">
          <h2>Our Services</h2>
          <p>
            We provide comprehensive digital solutions tailored to meet your
            business needs and help you achieve your goals.
          </p>
        </div>

<div class="services-grid">
          <div class="service-card">
            <div class="service-icon">
              <i class="fas fa-paint-brush"></i>
            </div>
            <h3>Web Design</h3>
            <p>
              We create visually appealing and user-friendly websites that
              reflect your brand identity and engage your audience.
            </p>
          </div>

<div class="service-card">
            <div class="service-icon">
              <i class="fas fa-code"></i>
            </div>
            <h3>Web Development</h3>
            <p>
              Our development team builds robust, scalable, and secure websites
              and applications using the latest technologies.
            </p>
          </div>

<div class="service-card">
            <div class="service-icon">
              <i class="fas fa-mobile-alt"></i>
            </div>
            <h3>Mobile Apps</h3>
            <p>
              We develop intuitive and feature-rich mobile applications for iOS
              and Android platforms.
            </p>
          </div>

<div class="service-card">
            <div class="service-icon">
              <i class="fas fa-chart-line"></i>
            </div>
            <h3>Digital Marketing</h3>
            <p>
              Our digital marketing strategies help you reach your target
              audience and drive measurable results.
            </p>
          </div>

<div class="service-card">
            <div class="service-icon">
              <i class="fas fa-palette"></i>
            </div>
            <h3>Branding</h3>
            <p>
              We craft compelling brand identities that connect with your
              audience and stand out in the market.
            </p>
          </div>

<div class="service-card">
            <div class="service-icon">
              <i class="fas fa-search"></i>
            </div>
            <h3>SEO</h3>
            <p>
              Our SEO strategies improve your online visibility and drive
              organic traffic to your website.
            </p>
          </div>
        </div>
      </div>
    </section>

<section class="portfolio">
      <div class="container">
        <div class="section-title">
          <h2>Our Portfolio</h2>
          <p>
            Check out some of our recent projects and see how we've helped
            businesses transform their digital presence.
          </p>
        </div>

<div class="portfolio-filter">
          <div class="filter-item active">All</div>
          <div class="filter-item">Web Design</div>
          <div class="filter-item">Development</div>
          <div class="filter-item">Branding</div>
          <div class="filter-item">Marketing</div>
        </div>

<div class="portfolio-grid">
          <div class="portfolio-item">
            <div class="portfolio-image">
              <img src="images3/work-1.jpg" alt="Project Image 1" />
            </div>
            <div class="portfolio-info">
              <h3>Project Name</h3>
              <span>Web Design</span>
            </div>
          </div>

<div class="portfolio-item">
            <div class="portfolio-image">
              <img src="images3/work-2.jpg" alt="Project Image 2" />
            </div>
            <div class="portfolio-info">
              <h3>Project Name</h3>
              <span>Development</span>
            </div>
          </div>

<div class="portfolio-item">
            <div class="portfolio-image">
              <img src="images3/work-3.jpg" alt="Project Image 3" />
            </div>
            <div class="portfolio-info">
              <h3>Project Name</h3>
              <span>Branding</span>
            </div>
          </div>

<div class="portfolio-item">
            <div class="portfolio-image">
              <img src="images3/work-4.jpg" alt="Project Image 4" />
            </div>
            <div class="portfolio-info">
              <h3>Project Name</h3>
              <span>Marketing</span>
            </div>
          </div>

<div class="portfolio-item">
            <div class="portfolio-image">
              <img src="images3/work-5.jpg" alt="Project Image 5" />
            </div>
            <div class="portfolio-info">
              <h3>Project Name</h3>
              <span>Web Design</span>
            </div>
          </div>

<div class="portfolio-item">
            <div class="portfolio-image">
              <img src="images3/work-6.jpg" alt="Project Image 6" />
            </div>
            <div class="portfolio-info">
              <h3>Project Name</h3>
              <span>Development</span>
            </div>
          </div>
        </div>
      </div>
    </section>

<section class="contact">
      <div class="container">
        <div class="section-title">
          <h2>Contact Us</h2>
          <p>
            Get in touch with our team to discuss your project requirements and
            how we can help you achieve your goals.
          </p>
        </div>

<div class="contact-container">
          <div class="contact-info">
            <h3>Get In Touch</h3>

<div class="contact-method">
              <div class="contact-icon">
                <i class="fas fa-map-marker-alt"></i>
              </div>
              <div class="contact-text">
                <h4>Address</h4>
                <p>123 Creative Street, Design City, 10001</p>
              </div>
            </div>

<div class="contact-method">
              <div class="contact-icon">
                <i class="fas fa-phone"></i>
              </div>
              <div class="contact-text">
                <h4>Phone</h4>
                <p>+1 (555) 123-4567</p>
              </div>
            </div>

<div class="contact-method">
              <div class="contact-icon">
                <i class="fas fa-envelope"></i>
              </div>
              <div class="contact-text">
                <h4>Email</h4>
                <p>info@creativex.com</p>
              </div>
            </div>
          </div>

<div class="contact-form">
            <h3>Contact Form</h3>
            <form id="frmLead" class="contact-form" onsubmit="return chkLead()">
              <div id="formFields">
                <div
                  class="form-group form-control form-field visible"
                  data-field="name"
                >
                  <label for="Name">Name *</label>
                  <input
                    type="text"
                    id="Name"
                    name="Name"
                    class="form-control"
                    required=""
                  />
                </div>

<div
                  class="form-group form-control form-field visible"
                  data-field="email"
                >
                  <label for="Email">Email *</label>
                  <input
                    type="email"
                    id="Email"
                    name="Email"
                    class="form-control"
                    required=""
                  />
                </div>

<div
                  class="form-group form-control form-field visible"
                  data-field="subject"
                >
                  <label for="Subject">Subject *</label>
                  <input
                    type="text"
                    id="Subject"
                    name="Subject"
                    class="form-control"
                    required=""
                  />
                </div>

<div
                  class="form-group form-control form-field visible"
                  data-field="query"
                >
                  <label for="Query">Message *</label>
                  <textarea
                    id="Query"
                    name="Query"
                    class="form-control"
                    rows="5"
                    required=""
                  ></textarea>
                </div>
              </div>

<div class="submit-section">
                <button
                  type="submit"
                  id="btnSubmit"
                  class="submit-button btn"
                  style="margin-top: 20px"
                >
                  Send Message
                </button>
                <div id="contentLoader" class="loader" style="display: none">
                  Processing...
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>

<footer class="footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-column">
            <h3>About Us</h3>
            <p>
              CreativeX is a leading digital agency specializing in web design,
              development, and digital marketing services for businesses of all
              sizes.
            </p>
            <div class="social-links">
              <a href="#" class="social-link"
                ><i class="fab fa-facebook-f"></i
              ></a>
              <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
              <a href="#" class="social-link"
                ><i class="fab fa-instagram"></i
              ></a>
              <a href="#" class="social-link"
                ><i class="fab fa-linkedin-in"></i
              ></a>
            </div>
          </div>

<div class="footer-column">
            <h3>Services</h3>
            <a href="#">Web Design</a>
            <a href="#">Web Development</a>
            <a href="#">Mobile Apps</a>
            <a href="#">Digital Marketing</a>
            <a href="#">Branding</a>
            <a href="#">SEO</a>
          </div>

<div class="footer-column">
            <h3>Quick Links</h3>
            <a href="#">Home</a>
            <a href="#">About Us</a>
            <a href="#">Services</a>
            <a href="#">Portfolio</a>
            <a href="#">Contact Us</a>
            <a href="#">Privacy Policy</a>
          </div>
        </div>

// Portfolio Filter
      const filterItems = document.querySelectorAll(".filter-item");
      filterItems.forEach((item) => {
        item.addEventListener("click", function () {
          filterItems.forEach((btn) => btn.classList.remove("active"));
          this.classList.add("active");
        });
      });
    </script>
  </body>
  <script src="script.js"></script>
</html>