diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..6d604af --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,84 @@ + +:root { + --primary-color: #4A90E2; + --secondary-color: #50E3C2; + --background-color: #F8F9FA; + --surface-color: #FFFFFF; + --text-color: #212529; + --heading-font: 'Poppins', sans-serif; + --body-font: 'Lato', sans-serif; + --border-radius: 0.3rem; +} + +body { + font-family: var(--body-font); + background-color: var(--background-color); + color: var(--text-color); +} + +h1, h2, h3, h4, h5, h6 { + font-family: var(--heading-font); + font-weight: 700; +} + +.navbar { + transition: background-color 0.3s ease-in-out, padding 0.3s ease-in-out; +} + +.navbar-scrolled { + background-color: var(--surface-color); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +.hero { + background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); + color: white; +} + +.btn-primary { + background-color: var(--primary-color); + border-color: var(--primary-color); +} + +.btn-primary:hover { + opacity: 0.9; + background-color: var(--primary-color); + border-color: var(--primary-color); +} + +.btn-secondary { + background-color: transparent; + border-color: white; + color: white; +} + +.btn-secondary:hover { + background-color: white; + border-color: white; + color: var(--primary-color); +} + +section { + padding: 5rem 0; +} + +.card { + border: none; + border-radius: var(--border-radius); + box-shadow: 0 4px 15px rgba(0,0,0,0.05); + transition: transform 0.2s ease-in-out; +} + +.card:hover { + transform: translateY(-5px); +} + +.form-control:focus { + box-shadow: 0 0 0 0.25rem rgba(74, 144, 226, 0.25); + border-color: var(--primary-color); +} + +.footer { + background-color: var(--text-color); + color: var(--background-color); +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..251dfb6 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,32 @@ + +document.addEventListener('DOMContentLoaded', function () { + // Navbar scroll effect + const navbar = document.querySelector('.navbar'); + window.addEventListener('scroll', () => { + if (window.scrollY > 50) { + navbar.classList.add('navbar-scrolled'); + } else { + navbar.classList.remove('navbar-scrolled'); + } + }); + + // Smooth scroll for anchor links + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + document.querySelector(this.getAttribute('href')).scrollIntoView({ + behavior: 'smooth' + }); + }); + }); + + // Contact form validation + const form = document.querySelector('.contact-form'); + form.addEventListener('submit', function (e) { + if (!form.checkValidity()) { + e.preventDefault(); + e.stopPropagation(); + } + form.classList.add('was-validated'); + }); +}); diff --git a/index.php b/index.php index e13ae95..569647f 100644 --- a/index.php +++ b/index.php @@ -1,131 +1,234 @@ - + - - - New Style - - - - + + + Ava Reed | Creative Developer & Designer + + + + + + + + + + + -
-
-

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

-
-
- + + + + + +
+
+

Ava Reed: Creative Developer & Designer

+

Building beautiful, functional websites and applications from scratch.

+ View My Work + Get In Touch +
+
+ +
+ +
+
+

What I Do

+
+
+
+ +

Web Design

+

Creating stunning, modern web designs that are intuitive and user-friendly.

+
+
+
+
+ +

Web Development

+

Bringing designs to life with clean, efficient code and the latest technologies.

+
+
+
+
+ +

UI/UX Consulting

+

Improving user satisfaction by enhancing the usability and accessibility of products.

+
+
+
+
+
+ + +
+
+

My Work

+
+
Thumbnail for Project One
Project One
+
Thumbnail for Project Two
Project Two
+
Thumbnail for Project Three
Project Three
+
Thumbnail for Project Four
Project Four
+
Thumbnail for Project Five
Project Five
+
Thumbnail for Project Six
Project Six
+
+
+
+ + +
+
+

What Clients Say

+
+
+
+ Avatar for first testimonial client +

"Ava is a brilliant developer. The final product exceeded all our expectations."

+
Jane Doe, CEO of TechCorp
+
+
+
+
+ Avatar for second testimonial client +

"The design was fresh, modern, and exactly what we were looking for."

+
John Smith, Founder of InnovateCo
+
+
+
+
+ Avatar for third testimonial client +

"A true professional. Delivered on time and on budget. Highly recommended."

+
Sam Wilson, Marketing Director
+
+
+
+
+
+ + +
+
+
+
+ Professional headshot of Ava Reed +
+
+

About Me

+

I'm Ava Reed, a passionate developer and designer with a knack for creating engaging user experiences. With over 5 years of experience in the industry, I specialize in building responsive, high-performance websites from the ground up.

+

My approach combines clean design, robust development, and a focus on the user. I love tackling new challenges and collaborating with clients to bring their vision to life.

+
+
+
+
+ + +
+
+
+
+

Let's Build Something Great

+ + + + + +
+
+ +
Please enter your name.
+
+
+ +
Please enter a valid email address.
+
+
+ +
Please enter your message.
+
+
+ +
+
+
+
+
+
+
+ + + + + + + + + + +