<!DOCTYPE html>

<head>

<title>Sofiiqm Nails | Professional Nail Services in Tyler, TX</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

html {

scroll-behavior: smooth;

}

body {

font-family: 'Poppins', sans-serif;

line-height: 1.6;

color: #333;

background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);

min-height: 100vh;

}

.container {

max-width: 1200px;

margin: 0 auto;

padding: 0 20px;

}

/* Header */

header {

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

backdrop-filter: blur(10px);

position: fixed;

top: 0;

left: 0;

right: 0;

z-index: 1000;

box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

}

nav {

display: flex;

justify-content: space-between;

align-items: center;

padding: 1rem 0;

}

.logo {

font-family: 'Playfair Display', serif;

font-size: 2.5rem;

font-weight: 700;

color: #ec4899;

text-decoration: none;

text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

.nav-links {

display: flex;

list-style: none;

gap: 2rem;

align-items: center;

}

.nav-links a {

color: #333;

text-decoration: none;

font-weight: 500;

transition: color 0.3s ease;

padding: 0.5rem 0;

}

.nav-links a:hover {

color: #ec4899;

}

/* Dropdown Menu */

.dropdown {

position: relative;

display: inline-block;

}

.dropdown-content {

display: none;

position: absolute;

background-color: white;

min-width: 200px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);

z-index: 1;

border-radius: 10px;

padding: 0.5rem 0;

margin-top: 0.5rem;

}

.dropdown-content a {

color: #333;

padding: 0.75rem 1.5rem;

text-decoration: none;

display: block;

}

.dropdown-content a:hover {

background-color: #fdf2f8;

color: #ec4899;

}

.dropdown:hover .dropdown-content {

display: block;

}

.dropdown .dropbtn {

font-weight: 500;

cursor: pointer;

display: flex;

align-items: center;

gap: 0.25rem;

}

.dropdown .dropbtn:hover {

color: #ec4899;

}

.social-icon {

background: linear-gradient(135deg, #f9a8d4, #ec4899);

color: white;

padding: 0.5rem;

border-radius: 50%;

text-decoration: none;

transition: transform 0.3s ease;

}

.social-icon:hover {

transform: scale(1.1);

}

/* Mobile Navigation */

.mobile-menu-toggle {

display: none;

background: none;

border: none;

font-size: 1.5rem;

color: #ec4899;

cursor: pointer;

}

.mobile-menu {

display: none;

position: absolute;

top: 100%;

left: 0;

right: 0;

background: white;

box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

padding: 1rem 0;

}

.mobile-menu.active {

display: block;

}

.mobile-menu a {

display: block;

padding: 0.75rem 2rem;

color: #333;

text-decoration: none;

font-weight: 500;

transition: background 0.3s ease;

}

.mobile-menu a:hover {

background: #fdf2f8;

color: #ec4899;

}

/* Hero Section */

.hero {

padding: 120px 0 80px;

text-align: center;

background: linear-gradient(135deg, rgba(253, 242, 248, 0.9), rgba(252, 231, 243, 0.9));

}

.hero h1 {

font-family: 'Playfair Display', serif;

font-size: 4rem;

color: #ec4899;

margin-bottom: 1rem;

text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

}

.hero p {

font-size: 1.3rem;

color: #666;

margin-bottom: 2rem;

max-width: 600px;

margin-left: auto;

margin-right: auto;

}

.cta-button {

display: inline-block;

background: linear-gradient(135deg, #f9a8d4, #ec4899);

color: white;

padding: 1rem 2.5rem;

border-radius: 50px;

text-decoration: none;

font-weight: 600;

font-size: 1.1rem;

transition: all 0.3s ease;

box-shadow: 0 8px 25px rgba(249, 168, 212, 0.3);

}

.cta-button:hover {

transform: translateY(-2px);

box-shadow: 0 12px 35px rgba(249, 168, 212, 0.4);

}

/* General Section Title */

.section-title {

font-family: 'Playfair Display', serif;

font-size: 3rem;

text-align: center;

color: #ec4899;

margin-bottom: 3rem;

}

/* Services Section */

.services {

padding: 80px 0;

background: white;

}

.services-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

gap: 2rem;

margin-bottom: 3rem;

}

.service-card {

background: linear-gradient(135deg, #fdf2f8, #fce7f3);

padding: 2rem;

border-radius: 20px;

text-align: center;

box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);

transition: transform 0.3s ease;

}

.service-card:hover {

transform: translateY(-5px);

}

.service-card h3 {

font-family: 'Playfair Display', serif;

font-size: 1.8rem;

color: #ec4899;

margin-bottom: 1rem;

}

.service-card p {

color: #666;

font-size: 1.1rem;

}

/* Pricing Menu Section */

.pricing {

padding: 80px 0;

background: white;

}

.pricing-container {

display: grid;

grid-template-columns: 1fr;

gap: 3rem;

max-width: 800px;

margin: 0 auto;

}

.pricing-category {

background: linear-gradient(135deg, #fdf2f8, #fce7f3);

padding: 2rem;

border-radius: 20px;

box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);

}

.pricing-category h3 {

font-family: 'Playfair Display', serif;

font-size: 2rem;

color: #ec4899;

margin-bottom: 1.5rem;

border-bottom: 2px solid #f9a8d4;

padding-bottom: 0.5rem;

}

.price-item {

display: flex;

justify-content: space-between;

align-items: center;

padding: 0.75rem 0;

border-bottom: 1px solid #fce7f3;

}

.price-item:last-child {

border-bottom: none;

}

.price-item-name {

color: #333;

font-weight: 500;

}

.price-item-cost {

color: #ec4899;

font-weight: 600;

background: white;

padding: 0.25rem 0.75rem;

border-radius: 20px;

}

/* Payment Methods */

.payment-methods {

text-align: center;

margin-top: 3rem;

}

.payment-methods h3 {

font-family: 'Playfair Display', serif;

font-size: 2rem;

color: #ec4899;

margin-bottom: 2rem;

}

.payment-icons {

display: flex;

justify-content: center;

gap: 1.5rem;

flex-wrap: wrap;

}

.payment-icon {

background: white;

padding: 1rem 1.5rem;

border-radius: 15px;

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

font-weight: 600;

color: #ec4899;

transition: transform 0.3s ease;

font-size: 0.9rem;

cursor: pointer;

}

.payment-icon:hover {

transform: scale(1.05);

}

/* Portfolio Section */

.portfolio {

padding: 80px 0;

background: linear-gradient(135deg, #fdf2f8, #fce7f3);

}

.portfolio-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 2rem;

}

.portfolio-item {

background: white;

border-radius: 20px;

overflow: hidden;

box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);

transition: transform 0.3s ease;

cursor: pointer;

}

.portfolio-item:hover {

transform: scale(1.05);

}

.portfolio-placeholder {

height: 300px;

background: linear-gradient(135deg, #f9a8d4, #ec4899);

display: flex;

align-items: center;

justify-content: center;

color: white;

font-size: 1.2rem;

font-weight: 600;

}

/* Policies Section */

.policies {

padding: 80px 0;

background: white;

}

.policies-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 2rem;

}

.policy-card {

background: linear-gradient(135deg, #fdf2f8, #fce7f3);

padding: 2rem;

border-radius: 20px;

box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);

}

.policy-card h3 {

font-family: 'Playfair Display', serif;

font-size: 1.5rem;

color: #ec4899;

margin-bottom: 1rem;

display: flex;

align-items: center;

gap: 0.75rem;

}

.policy-card p {

color: #666;

}

/* Deposit Notice */

.deposit-notice {

background-color: #fffbeb;

border: 1px solid #fef3c7;

color: #92400e;

padding: 1rem;

border-radius: 15px;

margin-top: 1.5rem;

font-weight: 500;

}

/* Modals */

.modal {

display: none;

position: fixed;

z-index: 2000;

left: 0;

top: 0;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.8);

backdrop-filter: blur(5px);

}

.modal-content {

display: flex;

align-items: center;

justify-content: center;

height: 100%;

padding: 2rem;

}

.modal-image {

max-width: 90%;

max-height: 90%;

border-radius: 10px;

}

.payment-modal-box {

background: white;

padding: 2rem;

border-radius: 20px;

box-shadow: 0 10px 30px rgba(0,0,0,0.2);

text-align: center;

max-width: 90%;

width: 400px;

}

.payment-modal-box h3 {

font-family: 'Playfair Display', serif;

color: #ec4899;

font-size: 1.8rem;

margin-bottom: 1rem;

}

.payment-modal-box p {

font-size: 1.2rem;

font-weight: 600;

color: #333;

background: #fdf2f8;

padding: 1rem;

border-radius: 10px;

}

.close {

position: absolute;

top: 2rem;

right: 2rem;

color: white;

font-size: 3rem;

cursor: pointer;

z-index: 2001;

}

/* Footer */

footer {

background: #333;

color: white;

text-align: center;

padding: 2rem 0;

}

.footer-content {

display: flex;

justify-content: space-between;

align-items: center;

flex-wrap: wrap;

gap: 1rem;

}

.footer-logo {

font-family: 'Playfair Display', serif;

font-size: 1.8rem;

color: #ec4899;

}

.footer-info {

text-align: center;

}

/* Responsive Design */

@media (max-width: 768px) {

.nav-links {

display: none;

}

.mobile-menu-toggle {

display: block;

}

.hero {

padding: 100px 0 60px;

}

.hero h1 {

font-size: 2.5rem;

}

.hero p {

font-size: 1.1rem;

padding: 0 1rem;

}

.cta-button {

padding: 0.8rem 2rem;

font-size: 1rem;

}

.services, .pricing, .portfolio, .policies {

padding: 60px 0;

}

.section-title {

font-size: 2.5rem;

}

.services-grid, .policies-grid {

grid-template-columns: 1fr;

gap: 1.5rem;

}

.pricing-container {

gap: 2rem;

}

.service-card, .policy-card {

padding: 1.5rem;

}

.payment-icons {

gap: 1rem;

}

.payment-icon {

padding: 0.8rem 1.2rem;

font-size: 0.85rem;

}

.portfolio-grid {

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

gap: 1.5rem;

}

.portfolio-placeholder {

height: 250px;

font-size: 1rem;

}

.footer-content {

flex-direction: column;

text-align: center;

}

.logo {

font-size: 2rem;

}

@media (max-width: 480px) {

.hero h1 {

font-size: 2rem;

}

.hero p {

font-size: 1rem;

}

.section-title {

font-size: 2rem;

}

.service-card h3, .pricing-category h3, .policy-card h3 {

font-size: 1.5rem;

}

.payment-methods h3 {

font-size: 1.5rem;

}

.portfolio-grid {

grid-template-columns: 1fr;

}

.portfolio-placeholder {

height: 200px;

}

</style>

</head>

<body>

<a href="#" class="logo">Sofiiqm Nails</a>

<a href="#pricing">Pricing</a>

<a href="#services">Services</a>

<a href="#portfolio">Portfolio</a>

<a href="#policies">Policies</a>

</div>

</li>

</ul>

</div>

<a href="#pricing" onclick="closeMobileMenu()">Pricing</a>

<a href="#services" onclick="closeMobileMenu()">Services</a>

<a href="#portfolio" onclick="closeMobileMenu()">Portfolio</a>

<a href="#policies" onclick="closeMobileMenu()">Policies</a>

</div>

</nav>

</header>

<main>

<h1>Sofiiqm Nails</h1>

<p>Professional nail artistry in Tyler, TX. Specializing in Gel X and Builder Gel techniques for stunning, long-lasting results.</p>

<a href="#book" class="cta-button">Book Your Appointment</a>

</div>

</section>

<h2 class="section-title">Book Your Appointment</h2>

<p style="font-size: 1.2rem; margin-bottom: 1rem; color: #666;">Schedule your appointment through our booking system.</p>

A mandatory $10 deposit is required at the time of booking to confirm your appointment.

</div>

</div>

</section>

<h2 class="section-title">Pricing Menu</h2>

<h3>Base Price</h3>

<span class="price-item-name">Short Nails</span>

</div>

<span class="price-item-name">Medium Nails</span>

</div>

<span class="price-item-name">Long Nails</span>

</div>

<h3>Add-Ons & Upcharges</h3>

<span class="price-item-name">1 Unique Finger Design</span>

</div>

<span class="price-item-name">2-3 Fingers Designed</span>

</div>

<span class="price-item-name">10 Fingers Designed</span>

</div>

<span class="price-item-name">1-2 Charms</span>

</div>

<span class="price-item-name">5+ Charms</span>

</div>

</div>

<span class="price-item-name">"After Hours" Appointment</span>

</div>

<h3>Payment Methods Accepted</h3>

<div class="payment-icon" onclick="showPaymentInfo('Venmo', '@your-venmo-id')">Venmo</div>

<div class="payment-icon" onclick="showPaymentInfo('Zelle', 'your-zelle-email@example.com')">Zelle</div>

<div class="payment-icon" onclick="showPaymentInfo('Apple Pay', 'Your Name / Phone Number')">Apple Pay</div>

<div class="payment-icon" onclick="showPaymentInfo('Square', 'In-person or via Invoice')">Square</div>

</div>

</section>

<h2 class="section-title">Our Services</h2>

<p>Revolutionary nail extension system that provides a natural look and feel with superior durability and flexibility.</p>

</div>

<h3>Builder Gel</h3>

<p>Strengthen and extend your natural nails with our professional builder gel application for a flawless finish.</p>

</div>

</section>

<h2 class="section-title">Portfolio</h2>

<p style="text-align: center; font-size: 1.2rem; color: #666; margin-bottom: 3rem;">Click on any image to view larger</p>

<div class="portfolio-placeholder">Gel X Design #1</div>

</div>

<div class="portfolio-placeholder">Builder Gel #1</div>

</div>

<div class="portfolio-placeholder">Gel X Design #2</div>

</div>

<div class="portfolio-placeholder">Builder Gel #2</div>

</div>

<div class="portfolio-placeholder">Gel X Design #3</div>

</div>

<div class="portfolio-placeholder">Builder Gel #3</div>

</div>

<div class="portfolio-placeholder">Gel X Design #4</div>

</div>

<div class="portfolio-placeholder">Builder Gel #4</div>

</div>

</section>

<h2 class="section-title">Our Policies</h2>

<h3><span>📅</span> Rescheduling</h3>

<p>You may reschedule your appointment for free up to 72 hours before your scheduled time. Rescheduling is not permitted less than 72 hours prior due to high demand.</p>

</div>

<h3><span>⏰</span> Grace Period</h3>

<p>There is a 10-minute grace period for all appointments. If you are more than 10 minutes late, your appointment will be cancelled and the deposit will be non-refundable.</p>

</div>

<h3><span>🚫</span> No-Shows & Cancellations</h3>

<p>The $10 deposit is non-refundable for same-day cancellations. If you do not show up to your appointment without notice, you will lose your deposit.</p>

</div>

<h3><span>👩‍👧‍👦</span> Guests</h3>

<p>As I am home-based, please provide advance notice if you plan on bringing any guests to your appointment so I can ensure a comfortable environment for everyone.</p>

</div>

<h3><span>💅</span> Nail Repairs</h3>

<p>I offer a complimentary nail repair service for any chips or breaks within 3 days of your original appointment. Please contact me to schedule a fix.</p>

</div>

<h3><span>✨</span> Foreign Fills</h3>

<p>For quality assurance, I do not work over other artists' products. New clients with existing sets must book a soak-off with their first appointment.</p>

</div>

</section>

</main>

<div class="footer-logo">Sofiiqm Nails</div>

<p>Professional Nail Services | Tyler, TX</p>

<p>Follow us on Instagram: <a href="https://instagram.com/sofiiqm_nails" style="color: #ec4899;">@sofiiqm_nails</a></p>

</div>

<div>

</div>

</footer>

</div>

</div>

// Smooth scrolling for navigation links

document.querySelectorAll('a[href^="#"]').forEach(anchor => {

anchor.addEventListener('click', function (e) {

e.preventDefault();

const target = document.querySelector(this.getAttribute('href'));

if (target) {

target.scrollIntoView({

behavior: 'smooth',

block: 'start'

});

}

});

// Modal functionality

function openImageModal(element) {

const modal = document.getElementById('imageModal');

const modalContent = document.getElementById('modalImageContent');

const placeholder = element.querySelector('.portfolio-placeholder');

modalContent.innerHTML = `

${placeholder.textContent}

<p style="margin-top: 1rem; font-size: 1rem; opacity: 0.9;">Your actual portfolio image will appear here</p>

</div>

modal.style.display = 'block';

document.body.style.overflow = 'hidden';

}

function showPaymentInfo(method, info) {

const modal = document.getElementById('paymentModal');

document.getElementById('paymentMethodTitle').textContent = method;

document.getElementById('paymentMethodInfo').textContent = info;

modal.style.display = 'block';

document.body.style.overflow = 'hidden';

}

function closeModal(modalId) {

const modal = document.getElementById(modalId);

modal.style.display = 'none';

document.body.style.overflow = 'auto';

}

// Close modal when clicking outside the content

window.onclick = function(event) {

const imageModal = document.getElementById('imageModal');

const paymentModal = document.getElementById('paymentModal');

if (event.target === imageModal) {

closeModal('imageModal');

}

if (event.target === paymentModal) {

closeModal('paymentModal');

}

// Close modal with Escape key

document.addEventListener('keydown', function(event) {

if (event.key === 'Escape') {

closeModal('imageModal');

closeModal('paymentModal');

}

});

// Add scroll effect to header

window.addEventListener('scroll', function() {

const header = document.querySelector('header');

if (window.scrollY > 100) {

header.style.background = 'rgba(255, 255, 255, 0.98)';

} else {

header.style.background = 'rgba(255, 255, 255, 0.95)';

}

});

// Mobile menu functions

function toggleMobileMenu() {

const mobileMenu = document.getElementById('mobileMenu');

mobileMenu.classList.toggle('active');

}

function closeMobileMenu() {

const mobileMenu = document.getElementById('mobileMenu');

mobileMenu.classList.remove('active');

}

// Close mobile menu when clicking outside

document.addEventListener('click', function(event) {

const mobileMenu = document.getElementById('mobileMenu');

const toggleButton = document.querySelector('.mobile-menu-toggle');

if (mobileMenu && !mobileMenu.contains(event.target) && !toggleButton.contains(event.target)) {

mobileMenu.classList.remove('active');

}

});

</script>

</body>

</html>