diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..7e0a3b0 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,184 @@ + +/*-------------------------------------------------------------- +# General +--------------------------------------------------------------*/ +:root { + --bs-primary-rgb: 13, 110, 253; + --bs-secondary-rgb: 108, 117, 125; + --background-color: #F8F9FA; + --surface-color: #FFFFFF; + --text-color: #212529; + --heading-font: 'Poppins', sans-serif; + --body-font: 'Lato', sans-serif; +} + +body { + font-family: var(--body-font); + color: var(--text-color); + background-color: var(--background-color); +} + +h1, h2, h3, h4, h5, h6 { + font-family: var(--heading-font); + font-weight: 700; +} + +.section-title { + text-align: center; + padding-bottom: 30px; +} + +.section-title h2 { + font-size: 32px; + font-weight: bold; + text-transform: uppercase; + margin-bottom: 20px; + padding-bottom: 20px; + position: relative; +} + +.section-title h2::after { + content: ''; + position: absolute; + display: block; + width: 50px; + height: 3px; + background: #0D6EFD; + bottom: 0; + left: calc(50% - 25px); +} + +/*-------------------------------------------------------------- +# Navbar +--------------------------------------------------------------*/ +.navbar { + transition: all 0.3s ease-in-out; + padding: 1.2rem 0; +} + +.navbar.scrolled { + background-color: var(--surface-color); + box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); + padding: 0.8rem 0; +} + +.navbar-brand { + font-family: var(--heading-font); + font-weight: 700; + font-size: 1.8rem; +} + +/*-------------------------------------------------------------- +# Hero Section +--------------------------------------------------------------*/ +#hero { + width: 100%; + height: 100vh; + background: linear-gradient(170deg, rgba(13, 110, 253, 0.8), rgba(13, 83, 191, 0.8)), url('https://picsum.photos/seed/hero-pf/1600/900') center center; + background-size: cover; + color: white; + display: flex; + align-items: center; + justify-content: center; + text-align: center; +} + +#hero h1 { + font-size: 3.5rem; + font-weight: 700; + line-height: 1.2; + text-shadow: 0 2px 4px rgba(0,0,0,0.3); +} + +#hero p { + font-size: 1.25rem; + max-width: 600px; + margin: 1rem auto; +} + +/*-------------------------------------------------------------- +# Sections +--------------------------------------------------------------*/ +section { + padding: 80px 0; + overflow: hidden; +} + +.card { + border: none; + border-radius: 0.375rem; + box-shadow: 0 0 30px rgba(0,0,0,0.08); + transition: transform 0.3s; +} + +.card:hover { + transform: translateY(-5px); +} + +/* Services */ +.service-item .icon { + font-size: 3rem; + color: #0D6EFD; +} + +/* Testimonials */ +.testimonial-item img { + width: 96px; + height: 96px; + border-radius: 50%; + margin-right: 1rem; +} + +/* Process */ +.process-step { + text-align: center; + position: relative; +} +.process-step .icon { + width: 80px; + height: 80px; + border: 2px solid #0D6EFD; + border-radius: 50%; + margin: 0 auto 20px auto; + display: flex; + align-items: center; + justify-content: center; + font-size: 2rem; + color: #0D6EFD; + background: #fff; + z-index: 1; + position: relative; +} +.process-step h4 { + font-weight: 600; +} +.process-step::after { + content: ''; + position: absolute; + width: 100%; + height: 1px; + background: #ddd; + top: 40px; + left: 50%; + z-index: 0; +} +.col:last-child .process-step::after { + display: none; +} + + +/*-------------------------------------------------------------- +# Footer +--------------------------------------------------------------*/ +#footer { + background: #343a40; + color: white; + padding: 40px 0; +} +#footer a { + color: #ffc107; + text-decoration: none; +} +#footer a:hover { + text-decoration: underline; +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..8e20716 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,51 @@ + +document.addEventListener('DOMContentLoaded', () => { + "use strict"; + + /** + * Navbar shrink on scroll + */ + const navbar = document.querySelector('.navbar'); + if (navbar) { + const handleScroll = () => { + if (window.scrollY > 50) { + navbar.classList.add('scrolled'); + } else { + navbar.classList.remove('scrolled'); + } + }; + window.addEventListener('scroll', handleScroll); + handleScroll(); // Initial check + } + + /** + * Smooth scroll for anchor links + */ + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const targetId = this.getAttribute('href'); + const targetElement = document.querySelector(targetId); + if(targetElement){ + targetElement.scrollIntoView({ + behavior: 'smooth' + }); + } + }); + }); + + /** + * Bootstrap form validation + */ + const forms = document.querySelectorAll('.needs-validation'); + Array.prototype.slice.call(forms).forEach(function (form) { + form.addEventListener('submit', function (event) { + if (!form.checkValidity()) { + event.preventDefault(); + event.stopPropagation(); + } + form.classList.add('was-validated'); + }, false); + }); + +}); diff --git a/index.php b/index.php index e13ae95..cc7580b 100644 --- a/index.php +++ b/index.php @@ -1,131 +1,297 @@ - - + - - - New Style - - - - + + + PixelForge - Digital Agency + + + + + + + + + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

Flatlogic AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

-
-
- + + + + + +
+
+
+
+

We Forge Pixels into Unforgettable Experiences.

+

A digital agency crafting beautiful and effective websites, apps, and brand identities.

+ Request a Quote +
+
+
+
+ +
+ + +
+
+
+

Our Services

+
+
+
+
+
+

Web Design

+

Stunning, responsive websites that capture your brand and engage your audience.

+
+
+
+
+
+

App Development

+

Intuitive and powerful mobile apps for iOS and Android that your users will love.

+
+
+
+
+
+

Branding

+

Creating memorable brand identities that tell your story and connect with customers.

+
+
+
+
+
+

SEO

+

Climb the search rankings and drive organic traffic with our proven SEO strategies.

+
+
+
+
+
+

UI/UX Design

+

User-centric designs that provide seamless and enjoyable digital experiences.

+
+
+
+
+
+

Content Strategy

+

Engaging content that builds authority and converts readers into customers.

+
+
+
+
+
+ + +
+
+
+

Our Work

+
+
+
+
+ A sleek website design for a corporate client. +
+
Corporate Website Redesign
+

A modern and professional redesign for a leading tech company.

+
+
+
+
+
+ A vibrant mobile app interface for a startup. +
+
E-commerce Mobile App
+

A feature-rich mobile app for a growing online fashion retailer.

+
+
+
+
+
+ A complete branding package with logos and mockups. +
+
Startup Branding Package
+

A complete brand identity for a new SaaS platform, from logo to launch.

+
+
+
+
+
+
+ + +
+
+
+

What Our Clients Say

+
+
+
+
+
+ Avatar of a satisfied client. +

"PixelForge transformed our online presence. Their attention to detail and creative vision is second to none."

+
Jane Doe
+ CEO, Tech Solutions +
+
+
+
+
+
+ Avatar of a happy customer. +

"The mobile app they developed exceeded all our expectations. Our users love it!"

+
John Smith
+ Founder, Fashion Forward +
+
+
+
+
+
+ Avatar of a project partner. +

"Working with PixelForge was a seamless experience. They are true professionals and masters of their craft."

+
Sam Wilson
+ Marketing Director, Innovate Co. +
+
+
+
+
+
+ + +
+
+
+

Our Process

+
+
+
+
+
+

1. Discover

+

We start by understanding your goals, audience, and challenges.

+
+
+
+
+
+

2. Design

+

We create wireframes and mockups to bring the vision to life.

+
+
+
+
+
+

3. Develop

+

Our team builds a high-quality, scalable solution using the latest tech.

+
+
+
+
+
+

4. Deploy

+

We launch your project and provide support for a seamless transition.

+
+
+
+
+
+ + +
+
+
+

Get in Touch

+

Have a project in mind? We'd love to hear from you.

+
+
+
+
+
+ + +
Please enter your name.
+
+
+ + +
Please enter a valid email.
+
+
+ + +
+
+ + +
Please leave a message.
+
+
+ +
+
+
+
+
+
+ +
+ + + + + + + + + + - + \ No newline at end of file