Choosing the right color palette can make or break your design. With countless combinations available, finding the perfect set of colors can be overwhelming.
In this article, we present 10 color palette examples to inspire your next project. Each palette is carefully curated to suit various design needs and aesthetics.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Subframe's drag-and-drop interface and intuitive, responsive canvas make designing your own color palette a breeze. Loved by designers and developers alike, it ensures pixel-perfect UI every time.
Start for free and elevate your design game today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Ready to elevate your design game? With Subframe, you can create stunning, pixel-perfect UIs and color palettes in minutes. Our drag-and-drop editor ensures efficiency and precision.
Don't wait! Start for free and begin designing immediately. Experience the ease and power of Subframe today!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>FinancePulse Dashboard</title> <style> :root { --primary-blue: #0a2342; --secondary-blue: #1d3557; --tertiary-blue: #2a4a73; --light-blue: #457b9d; --muted-gray: #8d99ae; --light-gray: #e0e1dd; --gold-accent: #d6ad60; --emerald-accent: #2a9d8f; --red-accent: #e63946; --white: #f8f9fa; --chart-grid: rgba(255, 255, 255, 0.1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', 'Segoe UI', sans-serif; transition: all 0.3s ease-in-out; } body { background-color: var(--primary-blue); color: var(--white); overflow-x: hidden; height: 100vh; } .dashboard-container { display: grid; grid-template-columns: 220px 1fr; grid-template-rows: 60px 1fr; grid-template-areas: "sidebar header" "sidebar main"; height: 100vh; width: 100%; max-width: 700px; max-height: 700px; margin: 0 auto; overflow: hidden; } .header { grid-area: header; background-color: var(--primary-blue); padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--tertiary-blue); } .search-bar { background-color: var(--tertiary-blue); border-radius: 8px; padding: 0.5rem 1rem; display: flex; align-items: center; width: 200px; } .search-bar input { background: transparent; border: none; outline: none; color: var(--white); width: 100%; font-size: 0.9rem; } .search-bar input::placeholder { color: var(--muted-gray); } .search-icon { color: var(--muted-gray); margin-right: 0.5rem; } .profile { display: flex; align-items: center; } .profile-img { width: 36px; height: 36px; border-radius: 50%; background-color: var(--tertiary-blue); display: flex; align-items: center; justify-content: center; font-weight: bold; margin-left: 1rem; cursor: pointer; overflow: hidden; position: relative; } .profile-img::after { content: "JS"; position: absolute; color: var(--white); } .notifications { position: relative; cursor: pointer; } .notifications::after { content: ""; position: absolute; width: 8px; height: 8px; background-color: var(--gold-accent); border-radius: 50%; top: 0; right: 0; } .sidebar { grid-area: sidebar; background-color: var(--secondary-blue); padding: 1.5rem 1rem; display: flex; flex-direction: column; } .logo { display: flex; align-items: center; margin-bottom: 2.5rem; } .logo-icon { width: 32px; height: 32px; background-color: var(--gold-accent); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 0.75rem; } .logo-text { font-weight: 700; font-size: 1.2rem; color: var(--white); } .nav-item { display: flex; align-items: center; padding: 0.75rem 0.5rem; border-radius: 8px; margin-bottom: 0.5rem; cursor: pointer; color: var(--light-gray); transition: background-color 0.2s, color 0.2s; } .nav-item:hover { background-color: rgba(255, 255, 255, 0.05); } .nav-item.active { background-color: var(--emerald-accent); color: var(--white); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .nav-item i { margin-right: 0.75rem; width: 20px; text-align: center; } .nav-divider { height: 1px; background-color: var(--tertiary-blue); margin: 1rem 0; opacity: 0.5; } .upgrade-banner { background: linear-gradient(45deg, var(--gold-accent), darken(var(--gold-accent), 15%)); padding: 1rem; border-radius: 8px; margin-top: auto; color: var(--primary-blue); text-align: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .upgrade-banner h4 { font-size: 0.9rem; margin-bottom: 0.5rem; } .upgrade-banner p { font-size: 0.75rem; opacity: 0.8; margin-bottom: 0.75rem; } .upgrade-btn { background-color: var(--primary-blue); color: var(--white); border: none; border-radius: 4px; padding: 0.35rem 0.75rem; font-size: 0.75rem; cursor: pointer; font-weight: 600; transition: background-color 0.2s; } .upgrade-btn:hover { background-color: var(--tertiary-blue); } main { grid-area: main; padding: 1.5rem; background-color: var(--primary-blue); overflow-y: auto; } .dashboard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .card { background-color: var(--tertiary-blue); border-radius: 12px; padding: 1.25rem; overflow: hidden; position: relative; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .card h3 { font-size: 1rem; font-weight: 600; color: var(--white); } .more-options { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s; } .more-options:hover { background-color: rgba(255, 255, 255, 0.1); } .key-metric { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.5rem; } .metric-change { display: flex; align-items: center; font-size: 0.8rem; font-weight: 500; } .metric-change.positive { color: var(--emerald-accent); } .metric-change.negative { color: var(--red-accent); } .time-period { font-size: 0.75rem; color: var(--muted-gray); margin-top: 0.5rem; } .chart-container { width: 100%; height: 100px; margin-top: 1rem; } .revenue-card .chart-container { height: 200px; } .revenue-card { grid-column: span 2; } .expenses-breakdown { grid-column: span 2; } .expense-bar { display: flex; align-items: center; margin-bottom: 0.75rem; } .expense-label { width: 100px; font-size: 0.8rem; color: var(--light-gray); } .expense-progress { flex-grow: 1; background-color: rgba(255, 255, 255, 0.1); border-radius: 4px; height: 8px; overflow: hidden; position: relative; } .expense-progress-fill { height: 100%; position: absolute; border-radius: 4px; transition: width 1s ease-in-out; } .expense-amount { width: 70px; text-align: right; font-size: 0.8rem; font-weight: 500; } .operations { background-color: var(--gold-accent); background: linear-gradient(90deg, var(--gold-accent), darken(var(--gold-accent), 15%)); } .marketing { background-color: var(--emerald-accent); background: linear-gradient(90deg, var(--emerald-accent), darken(var(--emerald-accent), 15%)); } .payroll { background-color: var(--light-blue); background: linear-gradient(90deg, var(--light-blue), darken(var(--light-blue), 15%)); } .research { background-color: var(--red-accent); background: linear-gradient(90deg, var(--red-accent), darken(var(--red-accent), 15%)); } .time-filters { display: flex; margin-bottom: 1.25rem; } .time-filter { padding: 0.5rem 0.75rem; font-size: 0.8rem; border-radius: 6px; background-color: transparent; color: var(--muted-gray); border: 1px solid var(--tertiary-blue); margin-right: 0.5rem; cursor: pointer; transition: all 0.2s; } .time-filter:hover { background-color: rgba(255, 255, 255, 0.05); } .time-filter.active { background-color: var(--emerald-accent); color: var(--white); border-color: var(--emerald-accent); } .summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem; } .summary-card { background-color: var(--tertiary-blue); border-radius: 12px; padding: 1rem; display: flex; flex-direction: column; } .summary-label { font-size: 0.75rem; color: var(--muted-gray); margin-bottom: 0.5rem; } .summary-value { font-size: 1.2rem; font-weight: 600; } .cta-pill { display: inline-flex; align-items: center; background-color: var(--emerald-accent); color: var(--white); border-radius: 20px; padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 600; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); position: absolute; top: 1rem; right: 1rem; } .cta-pill i { margin-right: 0.25rem; } .cta-pill:hover { background-color: darken(var(--emerald-accent), 5%); transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); } @media (max-width: 700px) { .dashboard-container { grid-template-columns: 1fr; grid-template-rows: 60px 1fr; grid-template-areas: "header" "main"; } .sidebar { display: none; } .dashboard-grid { grid-template-columns: 1fr; } .revenue-card, .expenses-breakdown { grid-column: span 1; } .summary-grid { grid-template-columns: 1fr; } } /* Animations */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-5px); } 100% { transform: translateY(0px); } } .notification-dot { animation: pulse 2s infinite; } .upgrade-banner { animation: float 4s ease-in-out infinite; } /* Sparkline chart */ .sparkline { fill: none; stroke: var(--emerald-accent); stroke-width: 2px; stroke-linecap: round; } .sparkline-area { fill: rgba(42, 157, 143, 0.1); } .sparkline-negative { stroke: var(--red-accent); } .sparkline-area-negative { fill: rgba(230, 57, 70, 0.1); } .sparkline-dot { fill: var(--white); stroke: var(--emerald-accent); stroke-width: 2px; r: 3; } .sparkline-dot-negative { stroke: var(--red-accent); } .chart-grid-line { stroke: var(--chart-grid); stroke-dasharray: 2; } .chart-axis { stroke: var(--muted-gray); stroke-width: 1px; } .chart-label { font-size: 0.65rem; fill: var(--muted-gray); } /* Enhanced tooltip styles */ .tooltip { position: absolute; background-color: var(--secondary-blue); color: var(--white); padding: 0.5rem 0.75rem; border-radius: 4px; font-size: 0.75rem; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); pointer-events: none; opacity: 0; transition: opacity 0.2s, transform 0.2s; transform: translateY(10px); z-index: 10; } .tooltip::after { content: ''; position: absolute; bottom: -5px; left: 50%; margin-left: -5px; border-width: 5px 5px 0; border-style: solid; border-color: var(--secondary-blue) transparent transparent; } .tooltip.visible { opacity: 1; transform: translateY(0); } /* Button hover effects */ .action-button { background-color: transparent; border: 1px solid var(--emerald-accent); color: var(--emerald-accent); border-radius: 4px; padding: 0.35rem 0.75rem; font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; } .action-button i { margin-right: 0.3rem; } .action-button:hover { background-color: var(--emerald-accent); color: var(--white); } /* Toggle switch for dark/light mode */ .toggle-switch { position: relative; display: inline-block; width: 45px; height: 22px; margin-left: auto; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--tertiary-blue); transition: .4s; border-radius: 22px; } .toggle-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: var(--white); transition: .4s; border-radius: 50%; } input:checked + .toggle-slider { background-color: var(--emerald-accent); } input:checked + .toggle-slider:before { transform: translateX(22px); } .loading-bar { position: absolute; top: 0; left: 0; height: 3px; background: linear-gradient(to right, var(--emerald-accent), var(--gold-accent)); width: 0%; transition: width 0.5s ease-out; z-index: 100; } </style> </head> <body> <div class="loading-bar" id="loadingBar"></div> <div class="dashboard-container"> <div class="sidebar"> <div class="logo"> <div class="logo-icon"> <i class="fas fa-chart-line"></i> </div> <div class="logo-text">FinancePulse</div> </div> <div class="nav-item active"> <i class="fas fa-home"></i> <span>Dashboard</span> </div> <div class="nav-item"> <i class="fas fa-chart-bar"></i> <span>Analytics</span> </div> <div class="nav-item"> <i class="fas fa-wallet"></i> <span>Budgeting</span> </div> <div class="nav-item"> <i class="fas fa-file-invoice-dollar"></i> <span>Forecasting</span> </div> <div class="nav-divider"></div> <div class="nav-item"> <i class="fas fa-cog"></i> <span>Settings</span> </div> <div class="nav-item"> <i class="fas fa-question-circle"></i> <span>Support</span> </div> <div class="upgrade-banner"> <h4>Unlock Pro Features</h4> <p>Access automated reports and financial insights</p> <button class="upgrade-btn">Upgrade Now</button> </div> </div> <div class="header"> <div class="search-bar"> <i class="fas fa-search search-icon"></i> <input type="text" placeholder="Search metrics, reports..."> </div> <div class="profile"> <div class="notifications"> <i class="fas fa-bell"></i> </div> <div class="profile-img"></div> </div> </div> <main> <div class="time-filters"> <button class="time-filter">Daily</button> <button class="time-filter active">Weekly</button> <button class="time-filter">Monthly</button> <button class="time-filter">Quarterly</button> </div> <div class="summary-grid"> <div class="summary-card"> <div class="summary-label">Total Revenue</div> <div class="summary-value">$1,284,500</div> <div class="metric-change positive"> <i class="fas fa-arrow-up"></i> <span>8.4%</span> </div> </div> <div class="summary-card"> <div class="summary-label">Gross Profit</div> <div class="summary-value">$724,350</div> <div class="metric-change positive"> <i class="fas fa-arrow-up"></i> <span>5.1%</span> </div> </div> <div class="summary-card"> <div class="summary-label">Net Margin</div> <div class="summary-value">32.7%</div> <div class="metric-change negative"> <i class="fas fa-arrow-down"></i> <span>1.3%</span> </div> </div> </div> <div class="dashboard-grid"> <div class="card revenue-card"> <div class="card-header"> <h3>Revenue Performance</h3> <div class="more-options"> <i class="fas fa-ellipsis-v"></i> </div> </div> <div class="cta-pill" id="downloadReport"> <i class="fas fa-download"></i> <span>Export</span> </div> <div class="chart-container" id="revenueChart"></div> </div> <div class="card"> <div class="card-header"> <h3>Cash Flow</h3> <div class="more-options"> <i class="fas fa-ellipsis-v"></i> </div> </div> <div class="key-metric">$317,800</div> <div class="metric-change positive"> <i class="fas fa-arrow-up"></i> <span>12.3% vs. Previous Period</span> </div> <div class="time-period">Last 30 days</div> <div class="chart-container" id="cashFlowChart"></div> </div> <div class="card"> <div class="card-header"> <h3>Operating Expenses</h3> <div class="more-options"> <i class="fas fa-ellipsis-v"></i> </div> </div> <div class="key-metric">$560,150</div> <div class="metric-change negative"> <i class="fas fa-arrow-up"></i> <span>4.7% vs. Previous Period</span> </div> <div class="time-period">Last 30 days</div> <div class="chart-container" id="expensesChart"></div> </div> <div class="card expenses-breakdown"> <div class="card-header"> <h3>Expense Distribution</h3> <button class="action-button"> <i class="fas fa-filter"></i> <span>Filter</span> </button> </div> <div class="expense-bar"> <div class="expense-label">Operations</div> <div class="expense-progress"> <div class="expense-progress-fill operations" style="width: 0%"></div> </div> <div class="expense-amount">$235,270</div> </div> <div class="expense-bar"> <div class="expense-label">Marketing</div> <div class="expense-progress"> <div class="expense-progress-fill marketing" style="width: 0%"></div> </div> <div class="expense-amount">$124,650</div> </div> <div class="expense-bar"> <div class="expense-label">Payroll</div> <div class="expense-progress"> <div class="expense-progress-fill payroll" style="width: 0%"></div> </div> <div class="expense-amount">$156,830</div> </div> <div class="expense-bar"> <div class="expense-label">R&D</div> <div class="expense-progress"> <div class="expense-progress-fill research" style="width: 0%"></div> </div> <div class="expense-amount">$43,400</div> </div> </div> </div> </main> </div> <div class="tooltip" id="tooltip"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { // Loading bar animation const loadingBar = document.getElementById('loadingBar'); loadingBar.style.width = '30%'; setTimeout(() => { loadingBar.style.width = '60%'; }, 200); setTimeout(() => { loadingBar.style.width = '100%'; }, 400); setTimeout(() => { loadingBar.style.opacity = '0'; }, 700); // Animate progress bars for expenses setTimeout(() => { document.querySelector('.operations').style.width = '42%'; document.querySelector('.marketing').style.width = '22%'; document.querySelector('.payroll').style.width = '28%'; document.querySelector('.research').style.width = '8%'; }, 500); // Revenue Chart const revenueData = [ { month: 'Jan', value: 840000 }, { month: 'Feb', value: 920000 }, { month: 'Mar', value: 980000 }, { month: 'Apr', value: 1120000 }, { month: 'May', value: 1050000 }, { month: 'Jun', value: 1180000 }, { month: 'Jul', value: 1250000 }, { month: 'Aug', value: 1310000 }, { month: 'Sep', value: 1240000 }, { month: 'Oct', value: 1360000 }, { month: 'Nov', value: 1284500 }, { month: 'Dec', value: null } ]; createRevenueChart(revenueData); // Cash Flow sparkline const cashFlowData = [180000, 220000, 195000, 250000, 230000, 290000, 317800]; createSparkline('cashFlowChart', cashFlowData, true); // Expenses sparkline const expensesData = [510000, 530000, 520000, 540000, 535000, 545000, 560150]; createSparkline('expensesChart', expensesData, false, true); // Tooltip functionality const tooltip = document.getElementById('tooltip'); document.querySelectorAll('.more-options').forEach(option => { option.addEventListener('mouseover', (e) => { tooltip.textContent = 'More options'; tooltip.style.left = `${e.pageX - 50}px`; tooltip.style.top = `${e.pageY - 40}px`; tooltip.classList.add('visible'); }); option.addEventListener('mouseout', () => { tooltip.classList.remove('visible'); }); }); // Download report action document.getElementById('downloadReport').addEventListener('click', function() { this.innerHTML = '<i class="fas fa-check"></i><span>Exported</span>'; setTimeout(() => { this.innerHTML = '<i class="fas fa-download"></i><span>Export</span>'; }, 2000); }); // Time filter buttons document.querySelectorAll('.time-filter').forEach(btn => { btn.addEventListener('click', function() { document.querySelector('.time-filter.active').classList.remove('active'); this.classList.add('active'); }); }); function createRevenueChart(data) { const container = document.getElementById('revenueChart'); const width = container.clientWidth; const height = container.clientHeight; const margin = { top: 30, right: 20, bottom: 30, left: 60 }; const svg = d3.select('#revenueChart') .append('svg') .attr('width', width) .attr('height', height) .append('g') .attr('transform', `translate(${margin.left},${margin.top})`); const x = d3.scaleBand() .domain(data.map(d => d.month)) .range([0, width - margin.left - margin.right]) .padding(0.3); const y = d3.scaleLinear() .domain([0, d3.max(data, d => d.value || 0) * 1.1]) .range([height - margin.top - margin.bottom, 0]); // Add grid lines svg.selectAll('line.grid-line') .data(y.ticks(5)) .enter() .append('line') .attr('class', 'chart-grid-line') .attr('x1', 0) .attr('x2', width - margin.left - margin.right) .attr('y1', d => y(d)) .attr('y2', d => y(d)); // X axis svg.append('g') .attr('transform', `translate(0,${height - margin.top - margin.bottom})`) .attr('class', 'chart-axis') .call(d3.axisBottom(x).tickSize(0)) .selectAll('text') .attr('class', 'chart-label') .attr('dy', '0.7em'); // Y axis svg.append('g') .attr('class', 'chart-axis') .call(d3.axisLeft(y) .tickSize(0) .tickFormat(d => d3.format('$,.0f')(d).replace('$', '$')) ) .selectAll('text') .attr('class', 'chart-label') .attr('dx', '-0.5em'); // Create a line const line = d3.line() .x(d => x(d.month) + x.bandwidth()/2) .y(d => y(d.value || 0)) .curve(d3.curveMonotoneX); // Filter out null values for the line const lineData = data.filter(d => d.value !== null); // Add the area svg.append('path') .datum(lineData) .attr('fill', 'rgba(42, 157, 143, 0.1)') .attr('d', d3.area() .x(d => x(d.month) + x.bandwidth()/2) .y0(height - margin.top - margin.bottom) .y1(d => y(d.value)) .curve(d3.curveMonotoneX) ); // Add the line path const path = svg.append('path') .datum(lineData) .attr('fill', 'none') .attr('stroke', '#2a9d8f') .attr('stroke-width', 2.5) .attr('d', line); // Add dots svg.selectAll('.dot') .data(lineData) .enter() .append('circle') .attr('class', 'sparkline-dot') .attr('cx', d => x(d.month) + x.bandwidth()/2) .attr('cy', d => y(d.value)) .attr('r', 4) .attr('fill', 'white') .attr('stroke', '#2a9d8f') .attr('stroke-width', 2) .on('mouseover', function(event, d) { const xPos = x(d.month) + x.bandwidth()/2 + margin.left; const yPos = y(d.value) + margin.top - 15; d3.select(this) .transition() .duration(100) .attr('r', 6); tooltip.innerHTML = `${d.month}: $${d3.format(',' )(d.value)}`; tooltip.style.left = `${xPos}px`; tooltip.style.top = `${yPos}px`; tooltip.classList.add('visible'); }) .on('mouseout', function() { d3.select(this) .transition() .duration(100) .attr('r', 4); tooltip.classList.remove('visible'); }); // Animate path on load const pathLength = path.node().getTotalLength(); path .attr('stroke-dasharray', pathLength) .attr('stroke-dashoffset', pathLength) .transition() .duration(1500) .attr('stroke-dashoffset', 0); } function createSparkline(elementId, data, isPositive = true, isExpense = false) { const container = document.getElementById(elementId); const width = container.clientWidth; const height = container.clientHeight; const margin = { top: 10, right: 10, bottom: 10, left: 10 }; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const svg = d3.select(`#${elementId}`) .append('svg') .attr('width', width) .attr('height', height) .append('g') .attr('transform', `translate(${margin.left},${margin.top})`); const x = d3.scaleLinear() .domain([0, data.length - 1]) .range([0, innerWidth]); const y = d3.scaleLinear() .domain([ d3.min(data) * 0.9, d3.max(data) * 1.1 ]) .range([innerHeight, 0]); // Create a line const line = d3.line() .x((d, i) => x(i)) .y(d => y(d)) .curve(d3.curveMon
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Chromasphere - Creative Agency Color Palette</title> <style> :root { /* Bold Primary Colors */ --primary-red: #FF3E41; --primary-blue: #1B7CED; --primary-yellow: #FFD600; /* Pastel Secondary Colors */ --secondary-mint: #A8E6CF; --secondary-lavender: #D4BBFF; --secondary-peach: #FFD6BA; /* Neutral Support Colors */ --dark: #121212; --light: #FAFAFA; --mid-gray: #636363; /* Font Families */ --font-heading: 'Montserrat', sans-serif; --font-body: 'Inter', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-body); background-color: var(--light); color: var(--dark); overflow-x: hidden; max-width: 700px; height: 700px; overflow-y: auto; scrollbar-width: thin; } body::-webkit-scrollbar { width: 8px; } body::-webkit-scrollbar-track { background: var(--light); } body::-webkit-scrollbar-thumb { background-color: var(--mid-gray); border-radius: 20px; } h1, h2, h3, h4, h5 { font-family: var(--font-heading); font-weight: 700; } h1 { font-size: 2.2rem; margin-bottom: 1.5rem; background: linear-gradient(45deg, var(--primary-red), var(--primary-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; } h2 { font-size: 1.8rem; margin-bottom: 1rem; color: var(--dark); } p { line-height: 1.6; margin-bottom: 1rem; font-size: 0.95rem; } header { padding: 2rem 2rem 0.5rem; position: relative; overflow: hidden; } header::before { content: ''; position: absolute; top: -100px; right: -100px; width: 250px; height: 250px; border-radius: 50%; background: var(--secondary-lavender); z-index: -1; opacity: 0.7; } header::after { content: ''; position: absolute; bottom: -50px; left: -50px; width: 150px; height: 150px; border-radius: 50%; background: var(--secondary-mint); z-index: -1; opacity: 0.7; } .intro { max-width: 600px; z-index: 1; position: relative; } main { padding: 1rem 2rem 2rem; } .color-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin: 2rem 0; } .color-card { border-radius: 12px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; position: relative; } .color-card:hover { transform: translateY(-8px); box-shadow: 0 12px 25px rgba(0,0,0,0.12); } .color-display { height: 120px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0); position: relative; overflow: hidden; transition: color 0.3s ease; } .color-display::before { content: 'Click to Copy'; position: absolute; color: white; background: rgba(0,0,0,0.5); padding: 5px 10px; border-radius: 20px; font-size: 0.8rem; opacity: 0; transition: opacity 0.3s ease; } .color-card:hover .color-display::before { opacity: 1; } .color-info { padding: 1rem; background: white; } .color-name { font-weight: 600; margin-bottom: 0.25rem; } .color-hex { font-family: monospace; color: var(--mid-gray); font-size: 0.9rem; } .primary .color-display { position: relative; } .primary .color-display::after { content: 'Primary'; position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.3); color: white; padding: 3px 8px; border-radius: 10px; font-size: 0.7rem; } .secondary .color-display::after { content: 'Secondary'; position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.3); color: white; padding: 3px 8px; border-radius: 10px; font-size: 0.7rem; } .neutral .color-display::after { content: 'Neutral'; position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.3); color: white; padding: 3px 8px; border-radius: 10px; font-size: 0.7rem; } .application-examples { margin-top: 3rem; } .example-box { margin-top: 1.5rem; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,0.08); margin-bottom: 2rem; } .ui-preview { padding: 1.5rem; position: relative; } .ui-design-1 { background: var(--light); height: 180px; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem; border-radius: 8px; } .menu-item { padding: 0.5rem 0.8rem; border-radius: 20px; font-weight: 600; font-size: 0.8rem; cursor: pointer; transition: all 0.3s ease; } .menu-item:hover { transform: translateY(-3px); } .menu-item.active { background-color: var(--primary-blue); color: white; } .hero-content { flex: 1; } .hero-title { font-size: 1.2rem; margin-bottom: 0.5rem; color: var(--dark); } .hero-desc { font-size: 0.8rem; color: var(--mid-gray); margin-bottom: 1rem; } .cta-button { padding: 0.5rem 1rem; background: var(--primary-red); color: white; border: none; border-radius: 20px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 10px rgba(255, 62, 65, 0.3); transition: all 0.3s ease; } .cta-button:hover { background: var(--primary-red); transform: translateY(-3px); box-shadow: 0 6px 15px rgba(255, 62, 65, 0.4); } .hero-image { width: 100px; height: 100px; background: var(--secondary-lavender); border-radius: 8px; display: flex; align-items: center; justify-content: center; } .hero-image::before { content: ''; width: 50px; height: 50px; border-radius: 50%; background: var(--primary-yellow); position: absolute; animation: pulse 3s infinite ease-in-out; } @keyframes pulse { 0% { transform: scale(0.8); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 0.8; } 100% { transform: scale(0.8); opacity: 0.5; } } .ui-design-2 { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .card { height: 120px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; position: relative; overflow: hidden; cursor: pointer; transition: transform 0.3s ease; } .card:hover { transform: scale(1.05); } .card::before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(45deg, rgba(0,0,0,0.1), rgba(0,0,0,0.4)); } .card span { position: relative; z-index: 1; } .copied-notification { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--dark); color: white; padding: 10px 20px; border-radius: 30px; font-size: 0.9rem; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; z-index: 1000; } .copied-notification.show { transform: translateX(-50%) translateY(0); opacity: 1; } /* Color Palette Visualizer */ .color-visualizer { margin: 2rem 0; position: relative; } .visualizer-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .visualizer-heading h3 { color: var(--dark); } .visualizer-controls { display: flex; gap: 0.5rem; } .control-btn { background: none; border: 1px solid var(--mid-gray); color: var(--mid-gray); border-radius: 20px; padding: 0.3rem 0.8rem; font-size: 0.8rem; cursor: pointer; transition: all 0.3s ease; } .control-btn:hover, .control-btn.active { background: var(--primary-blue); border-color: var(--primary-blue); color: white; } .visualizer-canvas { border-radius: 12px; overflow: hidden; height: 180px; position: relative; display: flex; transition: all 0.5s ease; } .canvas-item { flex: 1; height: 100%; transition: all 0.5s ease; } .canvas-item.primary-red { background-color: var(--primary-red); } .canvas-item.primary-blue { background-color: var(--primary-blue); } .canvas-item.primary-yellow { background-color: var(--primary-yellow); } .canvas-item.secondary-mint { background-color: var(--secondary-mint); } .canvas-item.secondary-lavender { background-color: var(--secondary-lavender); } .canvas-item.secondary-peach { background-color: var(--secondary-peach); } .harmony-1 .canvas-item { flex: 1; } .harmony-2 .canvas-item:nth-child(1) { flex: 2; } .harmony-2 .canvas-item:nth-child(2) { flex: 1; } .harmony-2 .canvas-item:nth-child(3) { flex: 1; } .harmony-3 .canvas-item:nth-child(1) { flex: 1; } .harmony-3 .canvas-item:nth-child(2) { flex: 3; } .harmony-3 .canvas-item:nth-child(3) { flex: 1; } .ratio-label { position: absolute; bottom: 10px; right: 10px; background: rgba(255,255,255,0.8); padding: 5px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 600; } @media (max-width: 600px) { h1 { font-size: 1.8rem; } h2 { font-size: 1.4rem; } .color-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; } .color-display { height: 100px; } .ui-design-2 { grid-template-columns: 1fr; } .ui-design-1 { flex-direction: column; height: auto; text-align: center; } .hero-image { margin: 0 auto; } } </style> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Montserrat:wght@500;700&display=swap" rel="stylesheet"> </head> <body> <header> <div class="intro"> <h1>Chromasphere</h1> <p>A vibrant color system that blends bold primary energy with soothing pastel complements, designed for creative agencies seeking visual distinction and harmonious hierarchy.</p> </div> </header> <main> <section class="color-palette"> <h2>Primary Colors</h2> <p>These bold, energetic hues create visual impact and establish brand recognition across touchpoints.</p> <div class="color-grid"> <div class="color-card primary"> <div class="color-display" style="background-color: #FF3E41;" data-color="#FF3E41"> </div> <div class="color-info"> <div class="color-name">Coral Red</div> <div class="color-hex">#FF3E41</div> </div> </div> <div class="color-card primary"> <div class="color-display" style="background-color: #1B7CED;" data-color="#1B7CED"> </div> <div class="color-info"> <div class="color-name">Azure Blue</div> <div class="color-hex">#1B7CED</div> </div> </div> <div class="color-card primary"> <div class="color-display" style="background-color: #FFD600;" data-color="#FFD600"> </div> <div class="color-info"> <div class="color-name">Sunburst Yellow</div> <div class="color-hex">#FFD600</div> </div> </div> </div> <h2>Secondary Colors</h2> <p>Soft pastel tones that complement our primary colors, creating balance and breathing space in designs.</p> <div class="color-grid"> <div class="color-card secondary"> <div class="color-display" style="background-color: #A8E6CF;" data-color="#A8E6CF"> </div> <div class="color-info"> <div class="color-name">Mint Green</div> <div class="color-hex">#A8E6CF</div> </div> </div> <div class="color-card secondary"> <div class="color-display" style="background-color: #D4BBFF;" data-color="#D4BBFF"> </div> <div class="color-info"> <div class="color-name">Lavender Dream</div> <div class="color-hex">#D4BBFF</div> </div> </div> <div class="color-card secondary"> <div class="color-display" style="background-color: #FFD6BA;" data-color="#FFD6BA"> </div> <div class="color-info"> <div class="color-name">Peach Blossom</div> <div class="color-hex">#FFD6BA</div> </div> </div> </div> <h2>Neutral Colors</h2> <p>Supporting colors that provide structure and enhance readability across the user interface.</p> <div class="color-grid"> <div class="color-card neutral"> <div class="color-display" style="background-color: #121212;" data-color="#121212"> </div> <div class="color-info"> <div class="color-name">Carbon Black</div> <div class="color-hex">#121212</div> </div> </div> <div class="color-card neutral"> <div class="color-display" style="background-color: #636363;" data-color="#636363"> </div> <div class="color-info"> <div class="color-name">Stone Gray</div> <div class="color-hex">#636363</div> </div> </div> <div class="color-card neutral"> <div class="color-display" style="background-color: #FAFAFA;" data-color="#FAFAFA"> </div> <div class="color-info"> <div class="color-name">Cloud White</div> <div class="color-hex">#FAFAFA</div> </div> </div> </div> </section> <section class="color-visualizer"> <div class="visualizer-heading"> <h2>Color Harmony Explorer</h2> <div class="visualizer-controls"> <button class="control-btn active" data-harmony="1">Equal</button> <button class="control-btn" data-harmony="2">Dominant</button> <button class="control-btn" data-harmony="3">Focal</button> </div> </div> <div class="visualizer-canvas harmony-1"> <div class="canvas-item primary-red"></div> <div class="canvas-item primary-blue"></div> <div class="canvas-item secondary-mint"></div> <div class="ratio-label">1:1:1 Ratio</div> </div> </section> <section class="application-examples"> <h2>Real-World Application</h2> <p>See how our color system brings interfaces to life with visual hierarchy and dynamic energy.</p> <div class="example-box"> <div class="ui-preview"> <div class="ui-design-1"> <div class="hero-content"> <h3 class="hero-title">Crafting Digital Experiences</h3> <p class="hero-desc">Strategic design solutions that captivate audiences and drive engagement.</p> <button class="cta-button">View Portfolio</button> </div> <div class="hero-image"></div> </div> <div class="ui-design-2"> <div class="card" style="background-color: var(--primary-blue);"> <span>Branding</span> </div> <div class="card" style="background-color: var(--primary-red);"> <span>UX/UI</span> </div> <div class="card" style="background-color: var(--primary-yellow);"> <span>Development</span> </div> </div> </div> </div> </section> </main> <div class="copied-notification" id="notification"> Color copied to clipboard! </div> <script> // Color copy functionality document.querySelectorAll('.color-display').forEach(card => { card.addEventListener('click', function() { const colorValue = this.getAttribute('data-color'); navigator.clipboard.writeText(colorValue).then(() => { showNotification(); }); }); }); function showNotification() { const notification = document.getElementById('notification'); notification.classList.add('show'); setTimeout(() => { notification.classList.remove('show'); }, 2500); } // Color Visualizer Functionality const controlButtons = document.querySelectorAll('.control-btn'); const visualizerCanvas = document.querySelector('.visualizer-canvas'); const ratioLabel = document.querySelector('.ratio-label'); controlButtons.forEach(button => { button.addEventListener('click', function() { // Remove active class from all buttons controlButtons.forEach(btn => btn.classList.remove('active')); // Add active class to clicked button this.classList.add('active'); // Update canvas class const harmony = this.getAttribute('data-harmony'); visualizerCanvas.className = 'visualizer-canvas'; visualizerCanvas.classList.add(`harmony-${harmony}`); // Update ratio label if (harmony === '1') { ratioLabel.textContent = '1:1:1 Ratio'; } else if (harmony === '2') { ratioLabel.textContent = '2:1:1 Ratio'; } else if (harmony === '3') { ratioLabel.textContent = '1:3:1 Ratio'; } }); }); // Animation for color cards const colorCards = document.querySelectorAll('.color-card'); // Initialize with a staggered entrance colorCards.forEach((card, index) => { setTimeout(() => { card.style.transform = 'translateY(0)'; card.style.opacity = '1'; }, 100 * index); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Serene - Health & Wellness App</title> <style> :root { --neutral-100: #f8f9f7; --neutral-200: #e8eae6; --neutral-300: #d0d3cc; --neutral-400: #a4a99e; --neutral-500: #787e71; --green-100: #eaf3ec; --green-200: #c5e1cb; --green-300: #9dcca7; --green-400: #75b884; --green-500: #4a9a60; --green-600: #357b49; --accent-beige: #f5f1e7; --accent-sage: #cad8c8; --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.05); --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.08); --transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } @font-face { font-family: 'CircularStd'; src: url('https://cdn.jsdelivr.net/gh/connorbbert/[email protected]/CircularStd-Book.woff2') format('woff2'); font-weight: 400; font-style: normal; } @font-face { font-family: 'CircularStd'; src: url('https://cdn.jsdelivr.net/gh/connorbbert/[email protected]/CircularStd-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; } @font-face { font-family: 'CircularStd'; src: url('https://cdn.jsdelivr.net/gh/connorbbert/[email protected]/CircularStd-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; } body { font-family: 'CircularStd', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background-color: var(--neutral-100); color: var(--neutral-500); line-height: 1.6; max-width: 700px; height: 700px; margin: 0 auto; padding: 24px; overflow-x: hidden; display: flex; flex-direction: column; } h1, h2, h3 { color: var(--neutral-500); font-weight: 500; line-height: 1.3; } h1 { font-size: 28px; margin-bottom: 16px; } h2 { font-size: 20px; margin-bottom: 12px; } p { margin-bottom: 16px; font-size: 16px; } .container { flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; } .header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; } .logo { display: flex; align-items: center; gap: 8px; } .logo-icon { width: 32px; height: 32px; background-color: var(--green-400); border-radius: 8px; position: relative; } .logo-icon::before { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background-color: var(--neutral-100); top: 8px; left: 8px; } .logo-text { font-size: 22px; font-weight: 500; color: var(--neutral-500); } .color-palette { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; } .palette-column { display: flex; flex-direction: column; gap: 12px; } .palette-section { background-color: var(--neutral-200); border-radius: 12px; padding: 16px; box-shadow: var(--shadow-light); transition: var(--transition); } .palette-section:hover { box-shadow: var(--shadow-medium); transform: translateY(-2px); } .palette-title { font-size: 16px; font-weight: 500; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; } .palette-title svg { width: 16px; height: 16px; } .colors { display: flex; flex-direction: column; gap: 8px; } .color-swatch { display: flex; align-items: center; gap: 12px; cursor: pointer; position: relative; padding: 8px 0; } .color-circle { width: 32px; height: 32px; border-radius: 50%; border: 2px solid white; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); transition: var(--transition); } .color-swatch:hover .color-circle { transform: scale(1.1); } .color-info { flex-grow: 1; } .color-name { font-size: 14px; font-weight: 500; } .color-hex { font-size: 12px; color: var(--neutral-400); } .copied-indicator { position: absolute; right: 0; background-color: var(--green-400); color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; opacity: 0; transform: translateY(-4px); transition: var(--transition); } .color-swatch.copied .copied-indicator { opacity: 1; transform: translateY(0); } .accessibility { margin-top: 20px; padding: 20px; background-color: var(--accent-beige); border-radius: 12px; transition: var(--transition); } .accessibility:hover { box-shadow: var(--shadow-medium); } .mockup { margin-top: 30px; position: relative; overflow: hidden; border-radius: 24px; box-shadow: var(--shadow-medium); transition: var(--transition); background: var(--neutral-100); flex-grow: 1; display: flex; flex-direction: column; } .mockup-header { background-color: var(--green-400); padding: 20px; color: white; position: relative; overflow: hidden; } .mockup-header h2 { color: white; margin-bottom: 8px; position: relative; z-index: 2; } .mockup-header p { color: rgba(255, 255, 255, 0.9); font-size: 14px; max-width: 90%; position: relative; z-index: 2; } .mockup-header::before { content: ''; position: absolute; width: 200px; height: 200px; border-radius: 50%; background-color: var(--green-500); opacity: 0.4; top: -100px; right: -50px; z-index: 1; } .mockup-header::after { content: ''; position: absolute; width: 100px; height: 100px; border-radius: 50%; background-color: var(--green-300); opacity: 0.3; bottom: -30px; left: 20px; z-index: 1; } .mockup-content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; gap: 16px; } .card { background-color: white; border-radius: 12px; padding: 16px; box-shadow: var(--shadow-light); transition: var(--transition); display: flex; align-items: center; gap: 16px; } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); } .card-icon { width: 40px; height: 40px; border-radius: 10px; background-color: var(--green-100); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .card-icon svg { width: 24px; height: 24px; color: var(--green-500); } .card-content { flex-grow: 1; } .card-title { font-weight: 500; margin-bottom: 3px; color: var(--neutral-500); } .card-description { font-size: 13px; color: var(--neutral-400); margin-bottom: 0; } .toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; align-self: center; } .toggle-input { display: none; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--neutral-300); border-radius: 34px; transition: var(--transition); } .toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 2px; bottom: 2px; background-color: white; border-radius: 50%; transition: var(--transition); } .toggle-input:checked + .toggle-slider { background-color: var(--green-400); } .toggle-input:checked + .toggle-slider:before { transform: translateX(18px); } .dark-mode-toggle { padding: 8px 12px; border-radius: 30px; font-size: 14px; border: none; background-color: var(--neutral-200); color: var(--neutral-500); display: flex; align-items: center; gap: 6px; cursor: pointer; transition: var(--transition); } .dark-mode-toggle:hover { background-color: var(--neutral-300); } .dark-mode-toggle svg { width: 14px; height: 14px; } body.dark-mode { background-color: #1a1c1e; color: #e8eae6; } body.dark-mode .mockup { background-color: #1a1c1e; } body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode .logo-text { color: #e8eae6; } body.dark-mode .palette-section, body.dark-mode .dark-mode-toggle { background-color: #2b2d31; } body.dark-mode .card { background-color: #2b2d31; } body.dark-mode .card-title { color: #e8eae6; } body.dark-mode .accessibility { background-color: #30352e; } body.dark-mode .color-hex { color: #a4a99e; } .mode-text-light, .mode-text-dark { display: inline; transition: var(--transition); } body.dark-mode .mode-text-light { display: none; } body:not(.dark-mode) .mode-text-dark { display: none; } @media (max-width: 600px) { .color-palette { grid-template-columns: 1fr; gap: 16px; } .header { flex-direction: column; align-items: flex-start; gap: 16px; } body { padding: 16px; } h1 { font-size: 24px; } } /* Animation for cards */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .card { animation: fadeInUp 0.5s ease forwards; opacity: 0; } .card:nth-child(1) { animation-delay: 0.1s; } .card:nth-child(2) { animation-delay: 0.2s; } .card:nth-child(3) { animation-delay: 0.3s; } .floating-dots { position: absolute; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background-color: var(--green-300); opacity: 0.2; animation: float 15s infinite ease-in-out; } @keyframes float { 0%, 100% { transform: translateY(0) translateX(0); } 25% { transform: translateY(-20px) translateX(10px); } 50% { transform: translateY(-10px) translateX(20px); } 75% { transform: translateY(-30px) translateX(-10px); } } </style> </head> <body> <div class="container"> <header class="header"> <div class="logo"> <div class="logo-icon"></div> <div class="logo-text">Serene</div> </div> <button class="dark-mode-toggle" id="darkModeToggle"> <svg class="mode-text-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path> </svg> <svg class="mode-text-dark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="5"></circle> <line x1="12" y1="1" x2="12" y2="3"></line> <line x1="12" y1="21" x2="12" y2="23"></line> <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line> <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line> <line x1="1" y1="12" x2="3" y2="12"></line> <line x1="21" y1="12" x2="23" y2="12"></line> <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line> <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line> </svg> <span class="mode-text-light">Dark</span> <span class="mode-text-dark">Light</span> </button> </header> <h1>Serene Wellness Color System</h1> <div class="color-palette"> <div class="palette-column"> <div class="palette-section"> <div class="palette-title"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"></path> </svg> Neutral Palette </div> <div class="colors"> <div class="color-swatch" data-color="#f8f9f7"> <div class="color-circle" style="background-color: #f8f9f7;"></div> <div class="color-info"> <div class="color-name">Sand White</div> <div class="color-hex">#f8f9f7</div> </div> <div class="copied-indicator">Copied!</div> </div> <div class="color-swatch" data-color="#e8eae6"> <div class="color-circle" style="background-color: #e8eae6;"></div> <div class="color-info"> <div class="color-name">Cloud Grey</div> <div class="color-hex">#e8eae6</div> </div> <div class="copied-indicator">Copied!</div> </div> <div class="color-swatch" data-color="#d0d3cc"> <div class="color-circle" style="background-color: #d0d3cc;"></div> <div class="color-info"> <div class="color-name">Stone Grey</div> <div class="color-hex">#d0d3cc</div> </div> <div class="copied-indicator">Copied!</div> </div> <div class="color-swatch" data-color="#787e71"> <div class="color-circle" style="background-color: #787e71;"></div> <div class="color-info"> <div class="color-name">Moss Grey</div> <div class="color-hex">#787e71</div> </div> <div class="copied-indicator">Copied!</div> </div> </div> </div> </div> <div class="palette-column"> <div class="palette-section"> <div class="palette-title"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M6.5 2C3.5 2 2 3.5 2 6.5S3.5 11 6.5 11h11c3 0 4.5-1.5 4.5-4.5S20.5 2 17.5 2h-11z"></path> <path d="M17.5 13c3 0 4.5 1.5 4.5 4.5S20.5 22 17.5 22h-11C3.5 22 2 20.5 2 17.5S3.5 13 6.5 13h11z"></path> </svg> Green Palette </div> <div class="colors"> <div class="color-swatch" data-color="#eaf3ec"> <div class="color-circle" style="background-color: #eaf3ec;"></div> <div class="color-info"> <div class="color-name">Frost Green</div> <div class="color-hex">#eaf3ec</div> </div> <div class="copied-indicator">Copied!</div> </div> <div class="color-swatch" data-color="#c5e1cb"> <div class="color-circle" style="background-color: #c5e1cb;"></div> <div class="color-info"> <div class="color-name">Mint Mist</div> <div class="color-hex">#c5e1cb</div> </div> <div class="copied-indicator">Copied!</div> </div> <div class="color-swatch" data-color="#75b884"> <div class="color-circle" style="background-color: #75b884;"></div> <div class="color-info"> <div class="color-name">Jade Green</div> <div class="color-hex">#75b884</div> </div> <div class="copied-indicator">Copied!</div> </div> <div class="color-swatch" data-color="#357b49"> <div class="color-circle" style="background-color: #357b49;"></div> <div class="color-info"> <div class="color-name">Forest Green</div> <div class="color-hex">#357b49</div> </div> <div class="copied-indicator">Copied!</div> </div> </div> </div> </div> </div> <div class="mockup"> <div class="floating-dots" id="floatingDots"></div> <div class="mockup-header"> <h2>Daily Wellness</h2> <p>Personalized routines built for calm and mindfulness</p> </div> <div class="mockup-content"> <div class="card"> <div class="card-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path> <path d="M13.73 21a2 2 0 0 1-3.46 0"></path> </svg> </div> <div class="card-content"> <div class="card-title">Mindfulness Reminders</div> <p class="card-description">Gentle notifications for breathing exercises</p> </div> <label class="toggle"> <input type="checkbox" class="toggle-input" checked> <span class="toggle-slider"></span> </label> </div> <div class="card"> <div class="card-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 2.5a2.5 2.5 0 0 1 2.5 2.5v2.5a2.5 2.5 0 0 1-5 0V5A2.5 2.5 0 0 1 12 2.5z"></path> <line x1="12" y1="11" x2="12" y2="13"></line> <path d="M15.2 19a2 2 0 0 0 1.4-2.4l-1-3.4a1 1 0 0 0-1.2-.6l-5.1 1.5a1 1 0 0 0-.6 1.3l1 3.4a2 2 0 0 0 2.9 1.2"></path> <circle cx="13.5" cy="14.5" r=".5"></circle> </svg> </div> <div class="card-content"> <div class="card-title">Hydration Tracking</div> <p class="card-description">Monitor daily water intake with adaptive goals</p> </div> <label class="toggle"> <input type="checkbox" class="toggle-input"> <span class="toggle-slider"></span> </label> </div> <div class="card"> <div class="card-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path> <path d="M7 12l4 4 6-6"></path> </svg> </div> <div class="card-content"> <div class="card-title">Nighttime Mode</div> <p class="card-description">Automatically adjust to eye-friendly colors</p> </div> <label class="toggle"> <input type="checkbox" class="toggle-input" checked> <span class="toggle-slider"></span> </label> </div> </div> </div> </div> <script> // Copy color code on click document.querySelectorAll('.color-swatch').forEach(swatch => { swatch.addEventListener('click', function() { const colorHex = this.getAttribute('data-color'); // Create a temporary input element to copy the text const tempInput = document.createElement('input'); tempInput.value = colorHex; document.body.appendChild(tempInput); tempInput.select(); document.execCommand('copy'); document.body.removeChild(tempInput); // Show copied indicator this.classList.add('copied'); // Hide copied indicator after a delay setTimeout(() => { this.classList.remove('copied'); }, 1500); }); }); // Dark mode toggle const darkModeToggle = document.getElementById('darkModeToggle'); darkModeToggle.addEventListener('click', () => { document.body.classList.toggle('dark-mode'); }); // Create floating dots const dotsContainer = document.getElementById('floatingDots'); const createDots = () => { dotsContainer.innerHTML = ''; const numDots = 10; for (let i = 0; i < numDots; i++) { const dot = document.createElement('div'); dot.classList.add('dot'); // Random positions const top = Math.random() * 100; const left = Math.random() * 100; dot.style.top = `${top}%`; dot.style.left = `${left}%`; dot.style.animationDelay = `${Math.random() * 5}s`; dot.style.opacity = (Math.random() * 0.2) + 0.05; dot.style.width = `${Math.random() * 8 + 4}px`; dot.style.height = dot.style.width; dotsContainer.appendChild(dot); } }; createDots(); // Toggle interaction for cards document.querySelectorAll('.toggle-input').forEach(toggle => { toggle.addEventListener('change', function() { const card = this.closest('.card'); if (this.checked) { card.style.borderLeft = '3px solid #75b884'; } else { card.style.borderLeft = 'none'; } }); // Initialize card borders based on toggle state if (toggle.checked) { toggle.closest('.card').style.borderLeft = '3px solid #75b884'; } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Learning Palette System</title> <style> :root { /* Base Muted Tones */ --slate: #4C5B5C; --sand: #D6D1C0; --moss: #8A9A7E; --clay: #AD8174; --navy: #35495E; /* Accent Colors */ --coral: #FF6B6B; --mint: #4ECDC4; --gold: #FFD166; --violet: #9B5DE5; --azure: #45AEEE; /* Background Colors */ --bg-light: #F8F9FA; --bg-dark: #263238; /* Text Colors */ --text-dark: #292f36; --text-light: #F8F9FA; /* Font Sizes */ --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-xxl: 2rem; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } body { background-color: var(--bg-light); color: var(--text-dark); max-width: 700px; height: 700px; overflow-x: hidden; margin: 0 auto; padding: 1.5rem; } h1, h2, h3 { font-weight: 700; line-height: 1.2; margin-bottom: 1rem; } h1 { font-size: var(--fs-xxl); color: var(--slate); } h2 { font-size: var(--fs-xl); color: var(--navy); } p { line-height: 1.6; margin-bottom: 1rem; font-size: var(--fs-md); } .container { display: flex; flex-direction: column; height: 100%; } .header { margin-bottom: 1.5rem; position: relative; } .header h1 { position: relative; display: inline-block; } .header h1::after { content: ''; position: absolute; bottom: -8px; left: 0; width: 50%; height: 3px; background: linear-gradient(to right, var(--coral), var(--violet)); border-radius: 2px; transition: width 0.3s ease; } .header h1:hover::after { width: 100%; } .palette-showcase { display: flex; flex-direction: column; gap: 2rem; flex: 1; } .color-section { margin-bottom: 0.5rem; } .color-section h2 { margin-bottom: 0.75rem; display: inline-block; position: relative; } .color-section h2::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; background-color: currentColor; opacity: 0.3; } .color-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .color-card { border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.3s ease; position: relative; height: 90px; } .color-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); } .color-preview { height: 70%; display: flex; align-items: center; justify-content: center; color: transparent; transition: color 0.3s ease; font-weight: 600; } .color-preview:hover { color: var(--text-light); } .color-info { background: white; padding: 0.5rem; font-size: var(--fs-xs); text-align: center; height: 30%; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease; } .color-name { font-weight: 600; margin-right: 5px; } .course-categories { margin-top: 2rem; } .category-list { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; } .category-item { padding: 0.75rem 1.25rem; border-radius: 30px; font-weight: 500; font-size: var(--fs-sm); cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06); } .category-item i { font-size: 1rem; opacity: 0.8; } .category-item:hover { transform: translateY(-2px); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); } .interactive-elements { margin-top: 2rem; } .buttons-showcase { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; } .btn { padding: 0.75rem 1.5rem; border-radius: 8px; font-weight: 600; border: none; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; font-size: var(--fs-sm); display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.2); transition: all 0.4s ease; } .btn:hover::before { left: 100%; } .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } .btn i { font-size: 1rem; } .btn-primary { background-color: var(--coral); color: white; } .btn-secondary { background-color: var(--mint); color: var(--text-dark); } .btn-tertiary { background-color: var(--gold); color: var(--text-dark); } .btn-info { background-color: var(--azure); color: white; } .btn-action { background-color: var(--violet); color: white; } .palette-notes { margin-top: 1.5rem; background-color: white; padding: 1.5rem; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); } .palette-notes h3 { color: var(--navy); margin-bottom: 1rem; } .note-item { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 0.75rem; } .note-item i { color: var(--coral); margin-top: 4px; } /* Utility classes for muted tones */ .bg-slate { background-color: var(--slate); } .bg-sand { background-color: var(--sand); } .bg-moss { background-color: var(--moss); } .bg-clay { background-color: var(--clay); } .bg-navy { background-color: var(--navy); } /* Utility classes for accent colors */ .bg-coral { background-color: var(--coral); } .bg-mint { background-color: var(--mint); } .bg-gold { background-color: var(--gold); } .bg-violet { background-color: var(--violet); } .bg-azure { background-color: var(--azure); } /* Category colors */ .bg-science { background-color: var(--mint); color: var(--text-dark); } .bg-humanities { background-color: var(--clay); color: var(--text-light); } .bg-mathematics { background-color: var(--azure); color: var(--text-light); } .bg-arts { background-color: var(--violet); color: var(--text-light); } .bg-languages { background-color: var(--gold); color: var(--text-dark); } .color-copy-notification { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(100px); background-color: var(--navy); color: white; padding: 10px 20px; border-radius: 8px; font-size: var(--fs-sm); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease; opacity: 0; z-index: 10; } .color-copy-notification.show { transform: translateX(-50%) translateY(0); opacity: 1; } @media (max-width: 600px) { body { padding: 1rem; } .color-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 0.75rem; } .color-card { height: 80px; } .buttons-showcase { gap: 0.75rem; flex-direction: column; } .btn { width: 100%; } } /* Scroll style */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg-light); } ::-webkit-scrollbar-thumb { background: var(--slate); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--navy); } </style> </head> <body> <div class="container"> <div class="header"> <h1>Learning Palette System</h1> <p>A balanced color system pairing classic muted tones with vibrant accents for an optimal learning environment.</p> </div> <div class="palette-showcase"> <div class="color-section"> <h2>Base Muted Tones</h2> <p>Providing structure and consistency across the educational platform.</p> <div class="color-grid"> <div class="color-card" data-color="#4C5B5C"> <div class="color-preview bg-slate">Click to copy</div> <div class="color-info"> <span class="color-name">Slate</span> <span class="color-hex">#4C5B5C</span> </div> </div> <div class="color-card" data-color="#D6D1C0"> <div class="color-preview bg-sand">Click to copy</div> <div class="color-info"> <span class="color-name">Sand</span> <span class="color-hex">#D6D1C0</span> </div> </div> <div class="color-card" data-color="#8A9A7E"> <div class="color-preview bg-moss">Click to copy</div> <div class="color-info"> <span class="color-name">Moss</span> <span class="color-hex">#8A9A7E</span> </div> </div> <div class="color-card" data-color="#AD8174"> <div class="color-preview bg-clay">Click to copy</div> <div class="color-info"> <span class="color-name">Clay</span> <span class="color-hex">#AD8174</span> </div> </div> <div class="color-card" data-color="#35495E"> <div class="color-preview bg-navy">Click to copy</div> <div class="color-info"> <span class="color-name">Navy</span> <span class="color-hex">#35495E</span> </div> </div> </div> </div> <div class="color-section"> <h2>Accent Colors</h2> <p>Energizing elements to highlight interactive components and increase engagement.</p> <div class="color-grid"> <div class="color-card" data-color="#FF6B6B"> <div class="color-preview bg-coral">Click to copy</div> <div class="color-info"> <span class="color-name">Coral</span> <span class="color-hex">#FF6B6B</span> </div> </div> <div class="color-card" data-color="#4ECDC4"> <div class="color-preview bg-mint">Click to copy</div> <div class="color-info"> <span class="color-name">Mint</span> <span class="color-hex">#4ECDC4</span> </div> </div> <div class="color-card" data-color="#FFD166"> <div class="color-preview bg-gold">Click to copy</div> <div class="color-info"> <span class="color-name">Gold</span> <span class="color-hex">#FFD166</span> </div> </div> <div class="color-card" data-color="#9B5DE5"> <div class="color-preview bg-violet">Click to copy</div> <div class="color-info"> <span class="color-name">Violet</span> <span class="color-hex">#9B5DE5</span> </div> </div> <div class="color-card" data-color="#45AEEE"> <div class="color-preview bg-azure">Click to copy</div> <div class="color-info"> <span class="color-name">Azure</span> <span class="color-hex">#45AEEE</span> </div> </div> </div> </div> <div class="course-categories"> <h2>Course Category Differentiation</h2> <p>Visually distinctive colors help students recognize different subject areas at a glance.</p> <div class="category-list"> <div class="category-item bg-science"> <i class="fas fa-flask"></i> <span>Science</span> </div> <div class="category-item bg-humanities"> <i class="fas fa-book"></i> <span>Humanities</span> </div> <div class="category-item bg-mathematics"> <i class="fas fa-calculator"></i> <span>Mathematics</span> </div> <div class="category-item bg-arts"> <i class="fas fa-palette"></i> <span>Arts</span> </div> <div class="category-item bg-languages"> <i class="fas fa-language"></i> <span>Languages</span> </div> </div> </div> <div class="interactive-elements"> <h2>Interactive Elements</h2> <p>Accent colors draw attention to action items and create a hierarchy of interaction.</p> <div class="buttons-showcase"> <button class="btn btn-primary"> <i class="fas fa-play"></i> <span>Start Course</span> </button> <button class="btn btn-secondary"> <i class="fas fa-save"></i> <span>Save Progress</span> </button> <button class="btn btn-tertiary"> <i class="fas fa-bookmark"></i> <span>Bookmark</span> </button> <button class="btn btn-info"> <i class="fas fa-info-circle"></i> <span>Help</span> </button> <button class="btn btn-action"> <i class="fas fa-arrow-right"></i> <span>Continue</span> </button> </div> </div> <div class="palette-notes"> <h3>Design Principles</h3> <div class="note-item"> <i class="fas fa-check-circle"></i> <p>Muted tones (Slate, Navy) establish credibility for core content areas and reduce visual fatigue.</p> </div> <div class="note-item"> <i class="fas fa-check-circle"></i> <p>Accents (Coral, Mint) are strategically applied to interactive elements to improve completion rates.</p> </div> <div class="note-item"> <i class="fas fa-check-circle"></i> <p>Category colors maintain consistent WCAG AA+ contrast ratios for optimal readability.</p> </div> </div> </div> </div> <div class="color-copy-notification" id="copyNotification">Color code copied to clipboard!</div> <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> <script> document.addEventListener('DOMContentLoaded', function() { // Color card click to copy functionality const colorCards = document.querySelectorAll('.color-card'); const copyNotification = document.getElementById('copyNotification'); colorCards.forEach(card => { card.addEventListener('click', function() { const colorHex = this.getAttribute('data-color'); // Create temporary textarea element to copy to clipboard const tempInput = document.createElement('textarea'); tempInput.value = colorHex; document.body.appendChild(tempInput); tempInput.select(); document.execCommand('copy'); document.body.removeChild(tempInput); // Show notification copyNotification.textContent = `Color ${colorHex} copied to clipboard!`; copyNotification.classList.add('show'); setTimeout(() => { copyNotification.classList.remove('show'); }, 2000); }); }); // Button interaction for demo purposes const buttons = document.querySelectorAll('.btn'); buttons.forEach(button => { button.addEventListener('click', function(e) { e.preventDefault(); // Visual feedback this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = ''; }, 150); }); }); // Category item interaction const categoryItems = document.querySelectorAll('.category-item'); categoryItems.forEach(item => { item.addEventListener('click', function() { // Visual feedback this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = ''; }, 150); // Toggle selection - for demo purposes categoryItems.forEach(otherItem => { if (otherItem !== this) { otherItem.style.opacity = '0.7'; } }); this.style.opacity = '1'; this.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)'; setTimeout(() => { categoryItems.forEach(item => { item.style.opacity = '1'; item.style.boxShadow = ''; }); }, 1500); }); }); // Fix Font Awesome loading if external CDN fails setTimeout(function() { if (!document.querySelector('i.fas').style.fontFamily.includes('Font Awesome')) { const styleSheet = document.createElement('style'); styleSheet.innerHTML = ` .fas.fa-flask:before { content: '🧪'; } .fas.fa-book:before { content: '📚'; } .fas.fa-calculator:before { content: '🧮'; } .fas.fa-palette:before { content: '🎨'; } .fas.fa-language:before { content: '🗣️'; } .fas.fa-play:before { content: '▶️'; } .fas.fa-save:before { content: '💾'; } .fas.fa-bookmark:before { content: '🔖'; } .fas.fa-info-circle:before { content: 'ℹ️'; } .fas.fa-arrow-right:before { content: '➡️'; } .fas.fa-check-circle:before { content: '✅'; } `; document.head.appendChild(styleSheet); } }, 1000); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Luxe Palette - Luxury E-commerce</title> <style> :root { --deep-sapphire: #0F2E52; --midnight-emerald: #0F4C4D; --rich-garnet: #7B273C; --royal-amethyst: #543E7A; --gold-accent: #D4AF37; --silver-accent: #C0C0C0; --cream-base: #F6F3EA; --soft-charcoal: #333333; --transition-standard: 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Cormorant Garamond', 'Playfair Display', serif; } body { background-color: var(--cream-base); color: var(--soft-charcoal); overflow-x: hidden; display: flex; flex-direction: column; height: 100vh; width: 100%; max-width: 700px; margin: 0 auto; } .container { padding: 2rem; height: 100%; display: flex; flex-direction: column; } header { margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.5rem; font-weight: 600; letter-spacing: 1px; color: var(--deep-sapphire); position: relative; } .logo::after { content: ""; position: absolute; height: 2px; width: 60%; background: linear-gradient(90deg, var(--gold-accent), transparent); bottom: -4px; left: 0; } nav ul { display: flex; list-style: none; gap: 1.5rem; } nav a { text-decoration: none; color: var(--soft-charcoal); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; position: relative; padding-bottom: 3px; transition: var(--transition-standard); } nav a::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: var(--gold-accent); transition: var(--transition-standard); } nav a:hover { color: var(--royal-amethyst); } nav a:hover::after { width: 100%; } .palette-showcase { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 15px; margin-bottom: 2rem; } .color-card { border-radius: 5px; position: relative; overflow: hidden; cursor: pointer; transition: var(--transition-standard); display: flex; flex-direction: column; justify-content: flex-end; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); } .color-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 60%); opacity: 0; transition: var(--transition-standard); } .color-card:hover::before { opacity: 1; } .color-info { padding: 1rem; color: white; transform: translateY(100%); transition: var(--transition-standard); z-index: 1; } .color-card:hover .color-info { transform: translateY(0); } .color-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); } .color-name { font-size: 1rem; font-weight: 600; margin-bottom: 4px; } .color-hex { font-size: 0.8rem; font-family: monospace; opacity: 0.8; } #sapphire { background-color: var(--deep-sapphire); grid-column: 1 / 2; grid-row: 1 / 3; } #emerald { background-color: var(--midnight-emerald); grid-column: 2 / 3; grid-row: 1 / 2; } #garnet { background-color: var(--rich-garnet); grid-column: 3 / 4; grid-row: 1 / 2; } #amethyst { background-color: var(--royal-amethyst); grid-column: 2 / 3; grid-row: 2 / 4; } #gold { background: linear-gradient(145deg, var(--gold-accent), #AA8C2C); grid-column: 3 / 4; grid-row: 2 / 3; } #silver { background: linear-gradient(145deg, var(--silver-accent), #A8A8A8); grid-column: 1 / 2; grid-row: 3 / 4; } #cream { background-color: var(--cream-base); grid-column: 3 / 4; grid-row: 3 / 4; border: 1px solid rgba(0, 0, 0, 0.1); } #cream .color-info { color: var(--soft-charcoal); } .texture-preview { display: flex; gap: 15px; margin-bottom: 2rem; } .texture-card { flex: 1; height: 80px; border-radius: 5px; cursor: pointer; transition: var(--transition-standard); position: relative; overflow: hidden; } .texture-card:hover { transform: scale(1.05); } .ribbed { background: repeating-linear-gradient( 45deg, var(--deep-sapphire), var(--deep-sapphire) 5px, rgba(15, 46, 82, 0.9) 5px, rgba(15, 46, 82, 0.9) 10px ); } .brushed { background: linear-gradient(90deg, var(--gold-accent) 0%, color-mix(in srgb, var(--gold-accent) 90%, white) 50%, var(--gold-accent) 100% ); position: relative; } .brushed::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E"); opacity: 0.3; } .velvet { background-color: var(--rich-garnet); position: relative; } .velvet::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.15'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .marble { background: linear-gradient(135deg, #f6f3ea 0%, #e6e2d7 100%); position: relative; } .marble::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23000000' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E"); } .palette-actions { display: flex; gap: 15px; margin-bottom: 1rem; } .palette-btn { flex: 1; padding: 0.8rem; border: none; background: var(--midnight-emerald); color: white; font-size: 0.9rem; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: var(--transition-standard); border-radius: 3px; position: relative; overflow: hidden; z-index: 1; } .palette-btn::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: var(--transition-standard); z-index: -1; } .palette-btn:hover::before { left: 100%; } .palette-btn:hover { background: var(--deep-sapphire); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } #download-btn { background: var(--rich-garnet); } #preview-btn { background: var(--royal-amethyst); } .gradient-showcase { margin-top: 1rem; height: 60px; border-radius: 5px; overflow: hidden; position: relative; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); } .gradient-slider { display: flex; position: absolute; top: 0; left: 0; height: 100%; transition: transform 0.5s ease-in-out; width: 300%; } .gradient-item { width: 100%; height: 100%; } .gradient-1 { background: linear-gradient(to right, var(--deep-sapphire), var(--midnight-emerald)); } .gradient-2 { background: linear-gradient(to right, var(--rich-garnet), var(--royal-amethyst)); } .gradient-3 { background: linear-gradient(to right, var(--gold-accent), var(--silver-accent)); } .gradient-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; } .gradient-dot { width: 8px; height: 8px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); cursor: pointer; transition: var(--transition-standard); } .gradient-dot.active { background-color: white; transform: scale(1.2); } footer { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; font-size: 0.8rem; color: var(--soft-charcoal); opacity: 0.7; } .tooltip { position: fixed; background: var(--soft-charcoal); color: white; padding: 0.5rem 1rem; border-radius: 3px; font-size: 0.8rem; pointer-events: none; opacity: 0; transition: opacity 0.2s; z-index: 100; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .color-copied { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.8); color: white; padding: 0.5rem 1rem; border-radius: 3px; font-size: 0.9rem; opacity: 0; transition: opacity 0.3s; z-index: 5; } .show-copied { animation: showCopied 1.5s ease-in-out; } @keyframes showCopied { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } } @media (max-width: 600px) { .container { padding: 1rem; } header { flex-direction: column; gap: 1rem; align-items: flex-start; } nav ul { gap: 1rem; } .palette-showcase { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 80px); } #sapphire { grid-column: 1 / 2; grid-row: 1 / 2; } #emerald { grid-column: 2 / 3; grid-row: 1 / 2; } #garnet { grid-column: 1 / 2; grid-row: 2 / 3; } #amethyst { grid-column: 2 / 3; grid-row: 2 / 3; } #gold { grid-column: 1 / 2; grid-row: 3 / 4; } #silver { grid-column: 2 / 3; grid-row: 3 / 4; } #cream { grid-column: 1 / 3; grid-row: 4 / 5; } } </style> </head> <body> <div class="container"> <header> <div class="logo">LUXE PALETTE</div> <nav> <ul> <li><a href="#" class="nav-link">Colors</a></li> <li><a href="#" class="nav-link">Textures</a></li> <li><a href="#" class="nav-link">Gradients</a></li> </ul> </nav> </header> <div class="palette-showcase"> <div class="color-card" id="sapphire" data-hex="#0F2E52"> <div class="color-info"> <div class="color-name">Deep Sapphire</div> <div class="color-hex">#0F2E52</div> </div> <div class="color-copied">Copied!</div> </div> <div class="color-card" id="emerald" data-hex="#0F4C4D"> <div class="color-info"> <div class="color-name">Midnight Emerald</div> <div class="color-hex">#0F4C4D</div> </div> <div class="color-copied">Copied!</div> </div> <div class="color-card" id="garnet" data-hex="#7B273C"> <div class="color-info"> <div class="color-name">Rich Garnet</div> <div class="color-hex">#7B273C</div> </div> <div class="color-copied">Copied!</div> </div> <div class="color-card" id="amethyst" data-hex="#543E7A"> <div class="color-info"> <div class="color-name">Royal Amethyst</div> <div class="color-hex">#543E7A</div> </div> <div class="color-copied">Copied!</div> </div> <div class="color-card" id="gold" data-hex="#D4AF37"> <div class="color-info"> <div class="color-name">Gold Accent</div> <div class="color-hex">#D4AF37</div> </div> <div class="color-copied">Copied!</div> </div> <div class="color-card" id="silver" data-hex="#C0C0C0"> <div class="color-info"> <div class="color-name">Silver Accent</div> <div class="color-hex">#C0C0C0</div> </div> <div class="color-copied">Copied!</div> </div> <div class="color-card" id="cream" data-hex="#F6F3EA"> <div class="color-info"> <div class="color-name">Cream Base</div> <div class="color-hex">#F6F3EA</div> </div> <div class="color-copied">Copied!</div> </div> </div> <div class="texture-preview"> <div class="texture-card ribbed" title="Ribbed Texture"> </div> <div class="texture-card brushed" title="Brushed Gold Texture"> </div> <div class="texture-card velvet" title="Velvet Texture"> </div> <div class="texture-card marble" title="Marble Texture"> </div> </div> <div class="palette-actions"> <button class="palette-btn" id="download-btn">Export Palette</button> <button class="palette-btn" id="preview-btn">Preview in Boutique</button> </div> <div class="gradient-showcase"> <div class="gradient-slider"> <div class="gradient-item gradient-1"></div> <div class="gradient-item gradient-2"></div> <div class="gradient-item gradient-3"></div> </div> <div class="gradient-dots"> <span class="gradient-dot active" data-index="0"></span> <span class="gradient-dot" data-index="1"></span> <span class="gradient-dot" data-index="2"></span> </div> </div> <footer> <div>© 2023 Luxe Palette — Premium E-commerce Styling</div> <div>Version 2.3</div> </footer> </div> <div class="tooltip"></div> <script> document.addEventListener('DOMContentLoaded', function() { // Color card click to copy const colorCards = document.querySelectorAll('.color-card'); colorCards.forEach(card => { card.addEventListener('click', function() { const hexValue = this.getAttribute('data-hex'); navigator.clipboard.writeText(hexValue).then(() => { const copiedEl = this.querySelector('.color-copied'); copiedEl.classList.add('show-copied'); setTimeout(() => { copiedEl.classList.remove('show-copied'); }, 1500); }); }); }); // Texture cards tooltip const textureCards = document.querySelectorAll('.texture-card'); const tooltip = document.querySelector('.tooltip'); textureCards.forEach(card => { card.addEventListener('mousemove', function(e) { const title = this.getAttribute('title'); tooltip.textContent = title; tooltip.style.opacity = '1'; tooltip.style.left = e.pageX + 10 + 'px'; tooltip.style.top = e.pageY + 10 + 'px'; }); card.addEventListener('mouseleave', function() { tooltip.style.opacity = '0'; }); }); // Button hover effects with ripple const buttons = document.querySelectorAll('.palette-btn'); buttons.forEach(button => { button.addEventListener('click', function() { if (this.id === 'download-btn') { simulateDownload(); } else if (this.id === 'preview-btn') { simulatePreview(); } }); }); function simulateDownload() { const button = document.getElementById('download-btn'); const originalText = button.textContent; button.textContent = 'Downloading...'; setTimeout(() => { button.textContent = 'Downloaded!'; setTimeout(() => { button.textContent = originalText; }, 1500); }, 1000); } function simulatePreview() { const button = document.getElementById('preview-btn'); const originalText = button.textContent; button.textContent = 'Loading Preview...'; setTimeout(() => { button.textContent = 'Preview Ready!'; setTimeout(() => { button.textContent = originalText; }, 1500); }, 1000); } // Gradient slider const dots = document.querySelectorAll('.gradient-dot'); const slider = document.querySelector('.gradient-slider'); dots.forEach(dot => { dot.addEventListener('click', function() { const index = this.getAttribute('data-index'); updateGradientSlider(index); }); }); function updateGradientSlider(index) { dots.forEach(dot => dot.classList.remove('active')); dots[index].classList.add('active'); slider.style.transform = `translateX(-${index * 100 / 3}%)`; } // Auto scroll gradients let currentGradient = 0; const gradientInterval = setInterval(() => { currentGradient = (currentGradient + 1) % 3; updateGradientSlider(currentGradient); }, 3000); // Clear interval when user interacts dots.forEach(dot => { dot.addEventListener('click', function() { clearInterval(gradientInterval); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>EarthHarmony Foundation</title> <style> :root { --olive-green: #606c38; --sage: #a3b18a; --cream: #fefae0; --terracotta: #bc6c25; --deep-brown: #7f5539; --soft-blue: #457b9d; --leaf-overlay: rgba(163, 177, 138, 0.1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--cream); color: var(--deep-brown); overflow-x: hidden; width: 100%; height: 100%; transition: background-color 0.5s ease; } .container { width: 100%; max-width: 700px; height: 100vh; max-height: 700px; margin: 0 auto; padding: 20px; overflow: auto; position: relative; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; position: relative; } .logo { display: flex; align-items: center; gap: 10px; } .logo-icon { width: 40px; height: 40px; background-color: var(--olive-green); border-radius: 50%; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; } .logo-icon::before { content: ""; position: absolute; width: 20px; height: 20px; background-color: var(--sage); border-radius: 50%; transform: translateY(5px); } .logo-icon::after { content: ""; position: absolute; width: 15px; height: 15px; background-color: var(--cream); border-radius: 50% 50% 0 0; transform: translateY(-8px); } .logo-text { font-weight: 700; font-size: 1.2rem; color: var(--olive-green); } .theme-toggle { background: none; border: none; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background-color: var(--sage); color: var(--cream); transition: all 0.3s ease; } .theme-toggle:hover { transform: rotate(45deg); background-color: var(--terracotta); } .hero { position: relative; border-radius: 20px; overflow: hidden; margin-bottom: 30px; background-color: var(--sage); } .hero-content { padding: 40px; position: relative; z-index: 2; } .hero h1 { font-size: 2rem; margin-bottom: 15px; color: var(--deep-brown); max-width: 80%; } .hero p { font-size: 1rem; margin-bottom: 20px; line-height: 1.6; max-width: 90%; color: var(--deep-brown); } .hero-btn { display: inline-block; padding: 12px 30px; background-color: var(--olive-green); color: var(--cream); text-decoration: none; border-radius: 30px; font-weight: 600; transition: all 0.3s ease; border: none; cursor: pointer; } .hero-btn:hover { background-color: var(--terracotta); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(127, 85, 57, 0.2); } .leaf-pattern { position: absolute; top: 0; right: 0; width: 200px; height: 100%; background-color: var(--leaf-overlay); clip-path: polygon(100% 0, 0% 0, 100% 100%); z-index: 1; } .section-title { font-size: 1.5rem; margin-bottom: 20px; position: relative; display: inline-block; color: var(--olive-green); } .section-title::after { content: ""; position: absolute; bottom: -5px; left: 0; width: 60px; height: 3px; background-color: var(--terracotta); transition: width 0.3s ease; } .section-title:hover::after { width: 100%; } .color-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 30px; } .color-card { height: 100px; border-radius: 10px; display: flex; justify-content: center; align-items: center; flex-direction: column; color: var(--cream); font-weight: 600; position: relative; overflow: hidden; cursor: pointer; transition: all 0.3s ease; } .color-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .color-card span { font-size: 0.8rem; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; } .color-card:hover span { opacity: 1; transform: translateY(0); } .color-1 { background-color: var(--olive-green); } .color-2 { background-color: var(--sage); color: var(--deep-brown); } .color-3 { background-color: var(--cream); color: var(--deep-brown); } .color-4 { background-color: var(--terracotta); } .color-5 { background-color: var(--deep-brown); } .color-6 { background-color: var(--soft-blue); } .palette-desc { margin-bottom: 30px; line-height: 1.6; } .values-section { margin-bottom: 30px; } .value-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; } .value-card { padding: 20px; border-radius: 10px; background-color: white; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; position: relative; overflow: hidden; } .value-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); } .value-card h3 { font-size: 1.1rem; margin-bottom: 10px; color: var(--olive-green); } .value-card p { font-size: 0.9rem; color: var(--deep-brown); } .value-card::before { content: ""; position: absolute; top: 0; left: 0; width: 5px; height: 0; background-color: var(--terracotta); transition: height 0.3s ease; } .value-card:hover::before { height: 100%; } .footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(127, 85, 57, 0.2); text-align: center; font-size: 0.9rem; color: var(--deep-brown); } .social-links { display: flex; justify-content: center; gap: 15px; margin-top: 15px; } .social-link { width: 35px; height: 35px; border-radius: 50%; background-color: var(--sage); display: flex; justify-content: center; align-items: center; color: var(--deep-brown); text-decoration: none; transition: all 0.3s ease; } .social-link:hover { background-color: var(--terracotta); color: var(--cream); transform: rotate(360deg); } @media (max-width: 600px) { .color-grid, .value-cards { grid-template-columns: repeat(2, 1fr); } .hero h1 { font-size: 1.5rem; } .hero-content { padding: 25px; } } .dark-theme { --cream: #2c2c2c; --deep-brown: #f8f4e1; --olive-green: #87a330; --sage: #4a4e32; --leaf-overlay: rgba(135, 163, 48, 0.1); } .copied-alert { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background-color: var(--deep-brown); color: var(--cream); padding: 10px 20px; border-radius: 30px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); opacity: 0; transition: opacity 0.3s ease; z-index: 10; } .copied-alert.show { opacity: 1; } </style> </head> <body> <div class="container"> <div class="header"> <div class="logo"> <div class="logo-icon"></div> <div class="logo-text">EarthHarmony</div> </div> <button class="theme-toggle" id="themeToggle"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path> </svg> </button> </div> <div class="hero"> <div class="leaf-pattern"></div> <div class="hero-content"> <h1>Harmonious Colors for Sustainable Impact</h1> <p>Our carefully crafted palette reflects our commitment to community, trust, and environmental stewardship. These earthy tones create a digital presence that resonates with our mission.</p> <button class="hero-btn">Explore Our Palette</button> </div> </div> <h2 class="section-title">Our Sustainable Palette</h2> <p class="palette-desc">This color system was created with accessibility and harmony in mind. Each hue represents our core values while ensuring optimal legibility across all digital platforms and devices.</p> <div class="color-grid"> <div class="color-card color-1" data-color="#606c38"> Olive Green <span>#606c38</span> </div> <div class="color-card color-2" data-color="#a3b18a"> Sage <span>#a3b18a</span> </div> <div class="color-card color-3" data-color="#fefae0"> Cream <span>#fefae0</span> </div> <div class="color-card color-4" data-color="#bc6c25"> Terracotta <span>#bc6c25</span> </div> <div class="color-card color-5" data-color="#7f5539"> Deep Brown <span>#7f5539</span> </div> <div class="color-card color-6" data-color="#457b9d"> Soft Blue <span>#457b9d</span> </div> </div> <div class="values-section"> <h2 class="section-title">Colors with Purpose</h2> <div class="value-cards"> <div class="value-card"> <h3>Trust</h3> <p>Our earthy browns and blues inspire confidence and reliability, creating a foundation of trust for all stakeholders.</p> </div> <div class="value-card"> <h3>Community</h3> <p>Warm terracotta tones reflect our commitment to fostering meaningful connections and inclusive spaces.</p> </div> <div class="value-card"> <h3>Sustainability</h3> <p>Our greens and creams evoke natural environments, reinforcing our dedication to ecological responsibility.</p> </div> </div> </div> <div class="footer"> <p>EarthHarmony Foundation © 2023 | A color palette designed for meaningful impact</p> <div class="social-links"> <a href="#" class="social-link"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path> </svg> </a> <a href="#" class="social-link"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect> <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path> <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line> </svg> </a> <a href="#" class="social-link"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path> </svg> </a> </div> </div> </div> <div class="copied-alert" id="copiedAlert">Color code copied to clipboard!</div> <script> document.addEventListener('DOMContentLoaded', function() { const themeToggle = document.getElementById('themeToggle'); const body = document.body; const colorCards = document.querySelectorAll('.color-card'); const copiedAlert = document.getElementById('copiedAlert'); const heroBtn = document.querySelector('.hero-btn'); // Theme toggle themeToggle.addEventListener('click', function() { body.classList.toggle('dark-theme'); // Change icon const icon = themeToggle.querySelector('svg'); if (body.classList.contains('dark-theme')) { icon.innerHTML = '<circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>'; } else { icon.innerHTML = '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>'; } }); // Copy color code to clipboard on click colorCards.forEach(card => { card.addEventListener('click', function() { const colorHex = this.getAttribute('data-color'); navigator.clipboard.writeText(colorHex).then(() => { copiedAlert.classList.add('show'); setTimeout(() => { copiedAlert.classList.remove('show'); }, 2000); }); // Add pulsing animation on click this.style.animation = 'pulse 0.5s'; setTimeout(() => { this.style.animation = ''; }, 500); }); }); // Animated leaf pattern on scroll window.addEventListener('scroll', function() { const leafPattern = document.querySelector('.leaf-pattern'); const scrollPosition = window.scrollY; if (leafPattern) { leafPattern.style.clipPath = `polygon(100% 0, ${scrollPosition / 10}% 0, 100% ${100 - scrollPosition / 20}%)`; } }); // Hero button animation heroBtn.addEventListener('mouseenter', function() { this.style.transition = 'all 0.3s ease'; this.style.backgroundColor = 'var(--terracotta)'; }); heroBtn.addEventListener('mouseleave', function() { this.style.backgroundColor = 'var(--olive-green)'; }); // Click to explore functionality heroBtn.addEventListener('click', function() { const colorGrid = document.querySelector('.color-grid'); colorGrid.scrollIntoView({ behavior: 'smooth' }); // Add a highlight animation to the color grid colorGrid.style.animation = 'highlight 1s'; setTimeout(() => { colorGrid.style.animation = ''; }, 1000); }); // Add CSS animation keyframes dynamically const style = document.createElement('style'); style.innerHTML = ` @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes highlight { 0% { box-shadow: 0 0 0 0 rgba(188, 108, 37, 0.5); } 70% { box-shadow: 0 0 0 10px rgba(188, 108, 37, 0); } 100% { box-shadow: 0 0 0 0 rgba(188, 108, 37, 0); } } `; document.head.appendChild(style); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ColorPlay: Educational Color Explorer</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif; } :root { --primary: #FF6B6B; --secondary: #4ECDC4; --accent1: #FFD166; --accent2: #6A67CE; --accent3: #56D88A; --neutral: #F7F9F9; --dark: #2E3A59; } body { background-color: var(--neutral); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100vh; width: 100%; overflow-x: hidden; padding: 20px; } .container { width: 100%; max-width: 660px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } header { text-align: center; margin-bottom: 20px; position: relative; } h1 { color: var(--dark); font-size: 2.4rem; margin-bottom: 10px; position: relative; display: inline-block; } h1 span { display: inline-block; } .c1 { color: var(--primary); } .c2 { color: var(--secondary); } .c3 { color: var(--accent1); } .c4 { color: var(--accent2); } .c5 { color: var(--accent3); } .subtitle { color: var(--dark); font-size: 1.1rem; opacity: 0.85; max-width: 600px; margin: 0 auto 30px auto; } .palette-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; width: 100%; margin-bottom: 30px; } .palette-card { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); transform: translateY(0); transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; } .palette-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); } .palette-header { padding: 16px; font-weight: bold; font-size: 1.1rem; color: var(--dark); text-align: center; border-bottom: 1px solid rgba(0,0,0,0.05); } .color-row { display: flex; height: 70px; } .color-swatch { flex: 1; position: relative; cursor: pointer; overflow: hidden; transition: flex 0.3s ease; } .color-swatch:hover { flex: 1.2; } .color-swatch::after { content: attr(data-color); position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,0.85); color: var(--dark); padding: 5px 8px; border-radius: 4px; font-size: 0.7rem; opacity: 0; transition: opacity 0.3s ease, bottom 0.3s ease; } .color-swatch:hover::after { opacity: 1; bottom: 5px; } .palette-info { padding: 15px; font-size: 0.9rem; color: #666; line-height: 1.4; } .color-mixer { background: white; border-radius: 16px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); padding: 20px; width: 100%; text-align: center; margin-bottom: 30px; } .mixer-title { font-size: 1.3rem; color: var(--dark); margin-bottom: 15px; } .mixer-controls { display: flex; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; } .color-control { flex: 1; min-width: 120px; display: flex; flex-direction: column; align-items: center; } .color-label { margin-bottom: 5px; font-weight: bold; color: var(--dark); } input[type="range"] { width: 100%; -webkit-appearance: none; height: 8px; border-radius: 4px; background: #eee; outline: none; margin-bottom: 8px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent2); cursor: pointer; } .color-value { font-size: 0.8rem; color: #666; } .mixer-result { width: 150px; height: 150px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-weight: bold; color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.3); box-shadow: inset 0 2px 5px rgba(0,0,0,0.1); transition: background-color 0.3s ease; position: relative; overflow: hidden; } .mixer-result::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.2), rgba(255,255,255,0)); transform: skewX(-25deg); animation: shine 3s infinite; } @keyframes shine { 0% { left: -100%; } 20% { left: 100%; } 100% { left: 100%; } } .accessibility-note { background-color: rgba(255, 255, 255, 0.7); padding: 15px; border-radius: 12px; border-left: 4px solid var(--accent2); margin-bottom: 20px; font-size: 0.9rem; color: var(--dark); width: 100%; line-height: 1.5; } .note-title { font-weight: bold; color: var(--accent2); margin-bottom: 5px; display: flex; align-items: center; gap: 5px; } .character { position: fixed; bottom: -100px; left: 20px; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent1); color: white; font-size: 2rem; box-shadow: 0 5px 15px rgba(0,0,0,0.2); cursor: pointer; transition: bottom 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); animation: bounce 2s infinite; z-index: 100; } .character.show { bottom: 20px; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .speech-bubble { position: fixed; bottom: 100px; left: 20px; background: white; padding: 15px; border-radius: 20px; max-width: 250px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); font-size: 0.9rem; color: var(--dark); opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease; z-index: 99; } .speech-bubble::after { content: ''; position: absolute; bottom: -10px; left: 30px; border: 10px solid transparent; border-top-color: white; border-bottom: 0; } .speech-bubble.show { opacity: 1; transform: translateY(0); } .color-tips-container { width: 100%; overflow: hidden; border-radius: 16px; position: relative; } .color-tips { display: flex; transition: transform 0.5s ease; } .tip-card { flex: 0 0 100%; background: white; padding: 20px; border-radius: 16px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); } .tip-header { display: flex; align-items: center; margin-bottom: 15px; } .tip-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 10px; font-size: 1.2rem; color: white; flex-shrink: 0; } .tip-title { font-size: 1.1rem; color: var(--dark); font-weight: bold; } .tip-content { color: #666; line-height: 1.5; font-size: 0.95rem; } .tip-nav { display: flex; justify-content: center; margin-top: 15px; gap: 5px; } .tip-dot { width: 10px; height: 10px; border-radius: 50%; background: #ddd; cursor: pointer; transition: background-color 0.3s ease, transform 0.3s ease; } .tip-dot.active { background: var(--accent2); transform: scale(1.2); } @media (max-width: 600px) { .palette-container { grid-template-columns: 1fr; } h1 { font-size: 2rem; } .subtitle { font-size: 1rem; } .mixer-controls { flex-direction: column; } .color-control { width: 100%; } } /* Floating elements animation */ .floating-element { position: absolute; border-radius: 50%; z-index: -1; opacity: 0.6; filter: blur(2px); animation: float 15s infinite linear; } @keyframes float { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(10px, 15px) rotate(90deg); } 50% { transform: translate(5px, -10px) rotate(180deg); } 75% { transform: translate(-10px, 5px) rotate(270deg); } 100% { transform: translate(0, 0) rotate(360deg); } } </style> </head> <body> <div class="container"> <!-- Floating decorative elements --> <div class="floating-element" style="width: 60px; height: 60px; background-color: rgba(255, 107, 107, 0.2); top: 10%; left: 5%;"></div> <div class="floating-element" style="width: 80px; height: 80px; background-color: rgba(78, 205, 196, 0.2); top: 60%; left: 80%;"></div> <div class="floating-element" style="width: 40px; height: 40px; background-color: rgba(255, 209, 102, 0.2); top: 30%; left: 70%;"></div> <div class="floating-element" style="width: 70px; height: 70px; background-color: rgba(106, 103, 206, 0.2); top: 80%; left: 20%;"></div> <header> <h1> <span class="c1">C</span><span class="c2">o</span><span class="c3">l</span><span class="c4">o</span><span class="c5">r</span><span class="c2">P</span><span class="c3">l</span><span class="c4">a</span><span class="c5">y</span> </h1> <p class="subtitle">Explore colors that spark creativity and learning in children's educational games</p> </header> <div class="palette-container"> <div class="palette-card"> <div class="palette-header">Playful Primary</div> <div class="color-row"> <div class="color-swatch" style="background-color: #FF6B6B;" data-color="#FF6B6B"></div> <div class="color-swatch" style="background-color: #4ECDC4;" data-color="#4ECDC4"></div> <div class="color-swatch" style="background-color: #FFD166;" data-color="#FFD166"></div> </div> <div class="color-row"> <div class="color-swatch" style="background-color: #6A67CE;" data-color="#6A67CE"></div> <div class="color-swatch" style="background-color: #56D88A;" data-color="#56D88A"></div> <div class="color-swatch" style="background-color: #F7F9F9;" data-color="#F7F9F9"></div> </div> <div class="palette-info"> Vibrant, energetic colors with soft complementary hues ideal for main characters and interactive elements. </div> </div> <div class="palette-card"> <div class="palette-header">Soft Learning</div> <div class="color-row"> <div class="color-swatch" style="background-color: #F9C0C0;" data-color="#F9C0C0"></div> <div class="color-swatch" style="background-color: #B8E1DD;" data-color="#B8E1DD"></div> <div class="color-swatch" style="background-color: #FFF1C5;" data-color="#FFF1C5"></div> </div> <div class="color-row"> <div class="color-swatch" style="background-color: #C2C0E8;" data-color="#C2C0E8"></div> <div class="color-swatch" style="background-color: #BAEFD1;" data-color="#BAEFD1"></div> <div class="color-swatch" style="background-color: #F0F4F7;" data-color="#F0F4F7"></div> </div> <div class="palette-info"> Pastel variations that offer reduced visual stimulation for background elements and longer reading sections. </div> </div> </div> <div class="accessibility-note"> <div class="note-title"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0ZM9 12H7V7H9V12ZM8 6C7.4 6 7 5.6 7 5C7 4.4 7.4 4 8 4C8.6 4 9 4.4 9 5C9 5.6 8.6 6 8 6Z" fill="#6A67CE"/> </svg> Accessibility Reminder </div> <p>Our palette maintains a 4.5:1 contrast ratio for text elements against backgrounds, making content readable for children with visual impairments. Colors have been tested for color-blindness compatibility.</p> </div> <div class="color-mixer"> <div class="mixer-title">Mix Your Own Colors</div> <div class="mixer-controls"> <div class="color-control"> <div class="color-label">Red</div> <input type="range" min="0" max="255" value="255" id="red"> <div class="color-value" id="red-value">255</div> </div> <div class="color-control"> <div class="color-label">Green</div> <input type="range" min="0" max="255" value="107" id="green"> <div class="color-value" id="green-value">107</div> </div> <div class="color-control"> <div class="color-label">Blue</div> <input type="range" min="0" max="255" value="107" id="blue"> <div class="color-value" id="blue-value">107</div> </div> </div> <div class="mixer-result" id="result" style="background-color: rgb(255, 107, 107);"> #FF6B6B </div> </div> <div class="color-tips-container"> <div class="color-tips" id="tips-slider"> <div class="tip-card"> <div class="tip-header"> <div class="tip-icon" style="background-color: var(--primary);">1</div> <div class="tip-title">Color Psychology for Learning</div> </div> <div class="tip-content"> Blue hues promote focus and learning, while yellow stimulates creativity and optimism. Green creates a calming effect that helps with reading comprehension and concentration on detailed tasks. </div> </div> <div class="tip-card"> <div class="tip-header"> <div class="tip-icon" style="background-color: var(--secondary);">2</div> <div class="tip-title">Color Balancing</div> </div> <div class="tip-content"> Use the 60-30-10 rule: 60% dominant color (often neutral), 30% secondary color, and 10% accent color. This creates visual harmony while preventing overstimulation that can distract young learners. </div> </div> <div class="tip-card"> <div class="tip-header"> <div class="tip-icon" style="background-color: var(--accent1);">3</div> <div class="tip-title">Inclusive Design</div> </div> <div class="tip-content"> Approximately 8% of boys have some form of color vision deficiency. Ensure educational content doesn't rely solely on color to convey meaning - add patterns, shapes or icons alongside color indicators. </div> </div> </div> <div class="tip-nav" id="tip-nav"></div> </div> </div> <div class="character" id="character">🎨</div> <div class="speech-bubble" id="speech">Click on color swatches to see their codes! Try mixing your own colors with the sliders!</div> <script> // Character and speech bubble const character = document.getElementById('character'); const speech = document.getElementById('speech'); setTimeout(() => { character.classList.add('show'); setTimeout(() => { speech.classList.add('show'); setTimeout(() => { speech.classList.remove('show'); }, 5000); }, 500); }, 1000); character.addEventListener('click', () => { speech.classList.toggle('show'); setTimeout(() => { speech.classList.remove('show'); }, 5000); }); // Color mixer functionality const redSlider = document.getElementById('red'); const greenSlider = document.getElementById('green'); const blueSlider = document.getElementById('blue'); const redValue = document.getElementById('red-value'); const greenValue = document.getElementById('green-value'); const blueValue = document.getElementById('blue-value'); const result = document.getElementById('result'); function updateColor() { const r = redSlider.value; const g = greenSlider.value; const b = blueSlider.value; redValue.textContent = r; greenValue.textContent = g; blueValue.textContent = b; const rgbColor = `rgb(${r}, ${g}, ${b})`; result.style.backgroundColor = rgbColor; // Convert to hex const hexColor = '#' + parseInt(r).toString(16).padStart(2, '0') + parseInt(g).toString(16).padStart(2, '0') + parseInt(b).toString(16).padStart(2, '0'); result.textContent = hexColor.toUpperCase(); // Set text color based on brightness const brightness = (r * 299 + g * 587 + b * 114) / 1000; result.style.color = brightness > 128 ? '#000' : '#FFF'; } redSlider.addEventListener('input', updateColor); greenSlider.addEventListener('input', updateColor); blueSlider.addEventListener('input', updateColor); // Color swatches functionality const swatches = document.querySelectorAll('.color-swatch'); swatches.forEach(swatch => { swatch.addEventListener('click', () => { const color = swatch.getAttribute('data-color'); navigator.clipboard.writeText(color) .then(() => { speech.textContent = `Copied ${color} to clipboard!`; speech.classList.add('show'); setTimeout(() => { speech.classList.remove('show'); }, 2000); }); }); }); // Tips slider functionality const tipsSlider = document.getElementById('tips-slider'); const tipNav = document.getElementById('tip-nav'); const tipCards = document.querySelectorAll('.tip-card'); let currentTip = 0; // Create navigation dots tipCards.forEach((_, index) => { const dot = document.createElement('div'); dot.classList.add('tip-dot'); if (index === 0) dot.classList.add('active'); dot.addEventListener('click', () => { goToTip(index); }); tipNav.appendChild(dot); }); function goToTip(index) { currentTip = index; tipsSlider.style.transform = `translateX(-${index * 100}%)`; // Update active dot document.querySelectorAll('.tip-dot').forEach((dot, i) => { if (i === index) { dot.classList.add('active'); } else { dot.classList.remove('active'); } }); } // Auto-rotate tips every 5 seconds setInterval(() => { currentTip = (currentTip + 1) % tipCards.length; goToTip(currentTip); }, 5000); // Rainbow effect for the title const letters = document.querySelectorAll('h1 span'); let hue = 0; function animateRainbow() { letters.forEach((letter, index) => { setTimeout(() => { letter.style.transform = 'translateY(-10px)'; setTimeout(() => { letter.style.transform = 'translateY(0)'; }, 200); }, index * 100); }); } // Trigger rainbow animation periodically setInterval(animateRainbow, 5000); </script> </body> </html>
<html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; } :root { --primary-color: #0a192f; --light-primary: #172a46; --lighter-primary: #304465; --lightest-primary: #516785; --dark-primary: #050d1a; --accent: #8892b0; --text-color: #e6f1ff; --transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } body { background-color: var(--primary-color); color: var(--text-color); overflow-x: hidden; height: 100vh; width: 100%; display: flex; flex-direction: column; } .container { max-width: 700px; height: 100%; margin: 0 auto; padding: 1.5rem; display: flex; flex-direction: column; } header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.5rem; border-bottom: 1px solid var(--lighter-primary); margin-bottom: 2rem; } .logo { font-size: 1.8rem; font-weight: 700; letter-spacing: -0.5px; position: relative; overflow: hidden; } .logo:after { content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: 0; left: 0; background-color: var(--text-color); transform-origin: bottom right; transition: transform 0.3s ease-out; } .logo:hover:after { transform: scaleX(1); transform-origin: bottom left; } nav ul { display: flex; list-style: none; gap: 1.5rem; } nav a { color: var(--accent); text-decoration: none; font-size: 0.9rem; transition: var(--transition); position: relative; padding: 0.5rem 0; } nav a:hover { color: var(--text-color); } nav a:after { content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 1px; bottom: 0; left: 0; background-color: var(--text-color); transform-origin: bottom right; transition: transform 0.3s ease-out; } nav a:hover:after { transform: scaleX(1); transform-origin: bottom left; } main { flex: 1; display: flex; flex-direction: column; } .intro { margin-bottom: 2rem; } h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; line-height: 1.1; } .subtle-text { color: var(--accent); font-size: 0.9rem; line-height: 1.6; margin-bottom: 2rem; } .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem; } .photo-card { position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 1; cursor: pointer; background-color: var(--light-primary); transition: var(--transition); } .photo-card img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); filter: grayscale(0.4); } .photo-info { position: absolute; bottom: 0; left: 0; width: 100%; padding: 1rem; background: linear-gradient(to top, rgba(10, 25, 47, 0.9), transparent); transform: translateY(100%); transition: var(--transition); } .photo-card:hover .photo-info { transform: translateY(0); } .photo-card:hover img { transform: scale(1.05); filter: grayscale(0); } .photo-title { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.25rem; } .photo-meta { font-size: 0.7rem; color: var(--accent); } .featured-section { margin-top: 1rem; } .section-title { font-size: 1.2rem; margin-bottom: 1rem; font-weight: 600; color: var(--accent); position: relative; } .section-title:after { content: ''; position: absolute; width: 2rem; height: 1px; background-color: var(--lightest-primary); bottom: -0.25rem; left: 0; } .featured-photo { position: relative; margin-top: 1rem; overflow: hidden; border-radius: 4px; aspect-ratio: 16 / 9; cursor: pointer; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .featured-photo img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .featured-details { position: absolute; bottom: 0; left: 0; width: 100%; padding: 1.5rem; background: linear-gradient(to top, rgba(5, 13, 26, 0.9), transparent); } .featured-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 0.5rem; } .featured-desc { font-size: 0.8rem; line-height: 1.6; color: var(--accent); margin-bottom: 1rem; } .view-btn { background-color: transparent; border: 1px solid var(--lightest-primary); color: var(--text-color); padding: 0.5rem 1rem; font-size: 0.8rem; cursor: pointer; transition: var(--transition); border-radius: 2px; } .view-btn:hover { background-color: var(--lighter-primary); } footer { padding-top: 1.5rem; border-top: 1px solid var(--lighter-primary); font-size: 0.8rem; color: var(--accent); text-align: center; } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(5, 13, 26, 0.95); display: flex; justify-content: center; align-items: center; z-index: 100; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .modal.active { opacity: 1; pointer-events: all; } .modal-content { position: relative; max-width: 90%; max-height: 80%; } .modal-content img { max-width: 100%; max-height: 80vh; border-radius: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } .close-modal { position: absolute; top: -2rem; right: 0; color: var(--text-color); background: none; border: none; font-size: 1.5rem; cursor: pointer; } .photo-details { margin-top: 1rem; color: var(--accent); } .photo-details h3 { color: var(--text-color); margin-bottom: 0.5rem; } .cursor { position: fixed; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--lightest-primary); pointer-events: none; transform: translate(-50%, -50%); transition: all 0.1s ease; z-index: 9999; mix-blend-mode: difference; } .cursor-dot { position: fixed; width: 8px; height: 8px; background-color: var(--text-color); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); z-index: 9999; transition: all 0.15s ease-out; } .hamburger { display: none; cursor: pointer; width: 30px; height: 20px; position: relative; z-index: 20; } .hamburger span { display: block; position: absolute; height: 2px; width: 100%; background: var(--accent); border-radius: 2px; opacity: 1; left: 0; transform: rotate(0deg); transition: var(--transition); } .hamburger span:nth-child(1) { top: 0px; } .hamburger span:nth-child(2), .hamburger span:nth-child(3) { top: 9px; } .hamburger span:nth-child(4) { top: 18px; } .hamburger.active span:nth-child(1) { top: 9px; width: 0%; left: 50%; } .hamburger.active span:nth-child(2) { transform: rotate(45deg); } .hamburger.active span:nth-child(3) { transform: rotate(-45deg); } .hamburger.active span:nth-child(4) { top: 9px; width: 0%; left: 50%; } @media (max-width: 768px) { .hamburger { display: block; } nav ul { position: fixed; top: 0; right: -100%; flex-direction: column; align-items: center; justify-content: center; background-color: var(--dark-primary); width: 70%; height: 100vh; z-index: 10; transition: var(--transition); gap: 2rem; padding: 2rem; } nav ul.active { right: 0; } nav a { font-size: 1.2rem; } .cursor, .cursor-dot { display: none; } h1 { font-size: 2rem; } .gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } } @media (max-width: 480px) { .container { padding: 1rem; } h1 { font-size: 1.8rem; } .logo { font-size: 1.5rem; } .gallery { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } } .loading-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--dark-primary); display: flex; justify-content: center; align-items: center; z-index: 9999; transition: opacity 0.5s ease, visibility 0.5s ease; } .loading-screen.hidden { opacity: 0; visibility: hidden; } .loader { width: 50px; height: 50px; border: 3px solid var(--light-primary); border-radius: 50%; border-top-color: var(--text-color); animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; } .fade-in.active { opacity: 1; transform: translateY(0); } </style> </head> <body> <div class="loading-screen"> <div class="loader"></div> </div> <div class="cursor"></div> <div class="cursor-dot"></div> <div class="container"> <header> <div class="logo">Monochrome</div> <nav> <div class="hamburger"> <span></span> <span></span> <span></span> <span></span> </div> <ul> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <main> <section class="intro fade-in"> <h1>Depth in Simplicity</h1> <p class="subtle-text">Exploring the nuances of light and shadow through minimalist photography. Our monochromatic approach reveals the intimate textures and forms that often go unnoticed in color-saturated environments.</p> </section> <section class="gallery fade-in"> <div class="photo-card"> <img src="https://images.unsplash.com/photo-1617169610675-53971e44ec19?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Abstract Architecture"> <div class="photo-info"> <div class="photo-title">Geometric Shadows</div> <div class="photo-meta">Architecture / 2023</div> </div> </div> <div class="photo-card"> <img src="https://images.unsplash.com/photo-1617803722691-b40fa39637af?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Minimalist Portrait"> <div class="photo-info"> <div class="photo-title">Silent Gaze</div> <div class="photo-meta">Portrait / 2023</div> </div> </div> <div class="photo-card"> <img src="https://images.unsplash.com/photo-1518640467707-6811f4a6ab73?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Minimal Landscape"> <div class="photo-info"> <div class="photo-title">Tranquil Waters</div> <div class="photo-meta">Landscape / 2023</div> </div> </div> <div class="photo-card"> <img src="https://images.unsplash.com/photo-1621287954715-bf22d355ba31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Abstract Forms"> <div class="photo-info"> <div class="photo-title">Material Study</div> <div class="photo-meta">Abstract / 2023</div> </div> </div> <div class="photo-card"> <img src="https://images.unsplash.com/photo-1622632169740-85c306c57aa2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Urban Minimalism"> <div class="photo-info"> <div class="photo-title">Urban Silence</div> <div class="photo-meta">Urban / 2023</div> </div> </div> <div class="photo-card"> <img src="https://images.unsplash.com/photo-1511810119369-d499bbf2a325?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Light Study"> <div class="photo-info"> <div class="photo-title">Light Gradient</div> <div class="photo-meta">Experimental / 2023</div> </div> </div> </section> <section class="featured-section fade-in"> <h2 class="section-title">Featured Work</h2> <div class="featured-photo"> <img src="https://images.unsplash.com/photo-1573603499023-1884de12426c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Architectural Minimalism"> <div class="featured-details"> <div class="featured-title">Convergence of Lines</div> <div class="featured-desc">A study of modernist architecture where linear elements create a sense of depth through subtle variations in shadow and light.</div> <button class="view-btn">View Collection</button> </div> </div> </section> </main> <footer> <p>© 2023 Monochrome Photography. All images showcase the power of single-hue visual storytelling.</p> </footer> </div> <div class="modal"> <div class="modal-content"> <button class="close-modal">×</button> <img src="" alt="Modal Image"> <div class="photo-details"> <h3></h3> <p></p> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Loading Screen setTimeout(() => { document.querySelector('.loading-screen').classList.add('hidden'); }, 1500); // Fade-in animations setTimeout(() => { const fadeElements = document.querySelectorAll('.fade-in'); fadeElements.forEach((el, index) => { setTimeout(() => { el.classList.add('active'); }, 200 * index); }); }, 1600); // Custom Cursor const cursor = document.querySelector('.cursor'); const cursorDot = document.querySelector('.cursor-dot'); document.addEventListener('mousemove', function(e) { cursor.style.left = e.clientX + 'px'; cursor.style.top = e.clientY + 'px'; cursorDot.style.left = e.clientX + 'px'; cursorDot.style.top = e.clientY + 'px'; }); document.addEventListener('mousedown', function() { cursor.style.transform = 'translate(-50%, -50%) scale(0.8)'; cursorDot.style.transform = 'translate(-50%, -50%) scale(0.5)'; }); document.addEventListener('mouseup', function() { cursor.style.transform = 'translate(-50%, -50%) scale(1)'; cursorDot.style.transform = 'translate(-50%, -50%) scale(1)'; }); // Add hover effect to all links and buttons const clickables = document.querySelectorAll('a, button, .photo-card'); clickables.forEach(item => { item.addEventListener('mouseenter', () => { cursor.style.transform = 'translate(-50%, -50%) scale(1.5)'; cursor.style.border = '1px solid var(--text-color)'; cursorDot.style.opacity = '0'; }); item.addEventListener('mouseleave', () => { cursor.style.transform = 'translate(-50%, -50%) scale(1)'; cursor.style.border = '1px solid var(--lightest-primary)'; cursorDot.style.opacity = '1'; }); }); // Modal functionality const modal = document.querySelector('.modal'); const modalImg = document.querySelector('.modal-content img'); const modalTitle = document.querySelector('.photo-details h3'); const modalDesc = document.querySelector('.photo-details p'); const closeModal = document.querySelector('.close-modal'); const photoCards = document.querySelectorAll('.photo-card'); photoCards.forEach(card => { card.addEventListener('click', function() { const img = this.querySelector('img'); const title = this.querySelector('.photo-title').textContent; const meta = this.querySelector('.photo-meta').textContent; modalImg.src = img.src; modalTitle.textContent = title; modalDesc.textContent = meta; modal.classList.add('active'); }); }); closeModal.addEventListener('click', function() { modal.classList.remove('active'); }); // Close modal when clicking outside modal.addEventListener('click', function(e) { if (e.target === modal) { modal.classList.remove('active'); } }); // Featured photo interaction const featuredPhoto = document.querySelector('.featured-photo'); featuredPhoto.addEventListener('click', function() { const img = this.querySelector('img'); const title = this.querySelector('.featured-title').textContent; const desc = this.querySelector('.featured-desc').textContent; modalImg.src = img.src; modalTitle.textContent = title; modalDesc.textContent = desc; modal.classList.add('active'); }); // Mobile navigation const hamburger = document.querySelector('.hamburger'); const navMenu = document.querySelector('nav ul'); hamburger.addEventListener('click', function() { this.classList.toggle('active'); navMenu.classList.toggle('active'); }); const navLinks = document.querySelectorAll('nav a'); navLinks.forEach(link => { link.addEventListener('click', function() { hamburger.classList.remove('active'); navMenu.classList.remove('active'); }); }); // View Collection button functionality const viewBtn = document.querySelector('.view-btn'); viewBtn.addEventListener('click', function(e) { e.stopPropagation(); // Prevent opening the modal alert('Collection view is currently in development'); }); }); </script> </body> </html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Terravida - Sustainable Color Palette</title> <style> :root { /* Primary palette */ --forest-green: #2F5233; --moss-green: #7A9A7E; --earth-brown: #8C6E4A; --sand-beige: #E5D9C1; --clay-neutral: #BFA58E; /* Accent colors */ --sunrise-orange: #E07A5F; --wild-berry: #B84A62; --river-blue: #679BB8; --autumn-leaf: #D9985F; --meadow-yellow: #E6C522; /* Typography */ --font-main: 'Poppins', sans-serif; --font-accent: 'Playfair Display', serif; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-main); background-color: #FDFBF6; max-width: 700px; height: 700px; overflow-x: hidden; color: #333; line-height: 1.6; } .container { width: 100%; max-width: 700px; margin: 0 auto; padding: 20px; position: relative; } header { text-align: center; margin-bottom: 20px; position: relative; } .logo { font-family: var(--font-accent); font-size: 2.2rem; color: var(--forest-green); margin-bottom: 5px; position: relative; display: inline-block; } .logo::after { content: ""; position: absolute; bottom: -5px; left: 25%; width: 50%; height: 3px; background-color: var(--moss-green); transform: scaleX(1); transition: transform 0.3s ease-in-out; } .logo:hover::after { transform: scaleX(1.5); } .tagline { font-size: 0.95rem; color: var(--moss-green); font-weight: 400; letter-spacing: 1px; } .palette-section { margin: 20px 0; } h2 { font-family: var(--font-accent); font-size: 1.5rem; color: var(--forest-green); margin-bottom: 15px; position: relative; display: inline-block; } h2::after { content: ""; position: absolute; bottom: -5px; left: 0; width: 60px; height: 2px; background-color: var(--autumn-leaf); } .color-row { display: flex; flex-wrap: wrap; margin-bottom: 15px; gap: 10px; } .color-swatch { height: 80px; border-radius: 8px; flex: 1 1 100px; min-width: 100px; display: flex; flex-direction: column; justify-content: flex-end; padding: 10px; color: white; transition: all 0.3s ease; cursor: pointer; position: relative; overflow: hidden; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); } .color-swatch:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); } .color-swatch::before { content: "Click to copy"; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); color: white; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .color-swatch:hover::before { opacity: 1; } .color-name { font-weight: 600; font-size: 0.9rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .color-code { font-size: 0.8rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .application-section { margin: 30px 0; } .application-examples { display: flex; flex-wrap: wrap; gap: 15px; } .example-card { flex: 1 1 130px; min-height: 170px; border-radius: 8px; overflow: hidden; position: relative; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .example-card:hover { transform: scale(1.03); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); } .card-header { height: 40px; display: flex; align-items: center; padding: 0 15px; color: white; font-weight: 600; } .card-body { padding: 15px; background-color: white; height: calc(100% - 40px); } .card-title { font-weight: 600; margin-bottom: 8px; font-size: 0.9rem; } .card-desc { font-size: 0.8rem; color: #666; } .principles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .principle { flex: 1 1 200px; background-color: white; padding: 15px; border-radius: 8px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); border-left: 4px solid var(--river-blue); transition: transform 0.3s ease; } .principle:hover { transform: translateY(-5px); } .principle h3 { font-size: 1rem; margin-bottom: 8px; color: var(--forest-green); } .principle p { font-size: 0.85rem; color: #555; } .color-tooltip { position: fixed; background: rgba(0, 0, 0, 0.8); color: white; padding: 5px 10px; border-radius: 4px; font-size: 12px; z-index: 100; pointer-events: none; opacity: 0; transition: opacity 0.2s; } .leaf-decoration { position: absolute; width: 40px; height: 40px; opacity: 0.15; z-index: -1; transform: rotate(45deg); transition: all 0.5s ease; } footer { text-align: center; margin-top: 30px; font-size: 0.8rem; color: var(--moss-green); padding: 10px 0; border-top: 1px solid #eee; } .dark-text { color: #333; } @media (max-width: 600px) { .color-row { gap: 5px; } .color-swatch { height: 70px; min-width: 80px; flex: 1 1 80px; } .principles { gap: 8px; } .principle { flex: 1 1 100%; } .example-card { flex: 1 1 100%; } } .animated-cursor { width: 20px; height: 20px; border-radius: 50%; position: fixed; pointer-events: none; z-index: 9999; mix-blend-mode: difference; transition: transform 0.2s; display: none; } @media (min-width: 768px) { .animated-cursor { display: block; } } .btn { background-color: var(--forest-green); color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-weight: 500; transition: all 0.3s ease; font-size: 0.9rem; margin-top: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .btn:hover { background-color: var(--moss-green); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .accent-description { font-size: 0.85rem; margin-bottom: 15px; line-height: 1.5; color: #555; } </style> </head> <body> <div class="container"> <header> <h1 class="logo">terravida</h1> <p class="tagline">SUSTAINABLE COLOR HARMONY</p> </header> <section class="palette-section"> <h2>Core Natural Palette</h2> <p class="accent-description">These foundational earth tones reflect our commitment to grounding sustainable design in nature's own color language.</p> <div class="color-row"> <div class="color-swatch" style="background-color: #2F5233;" data-color="#2F5233"> <span class="color-name">Forest Green</span> <span class="color-code">#2F5233</span> </div> <div class="color-swatch" style="background-color: #7A9A7E;" data-color="#7A9A7E"> <span class="color-name">Moss Green</span> <span class="color-code">#7A9A7E</span> </div> <div class="color-swatch" style="background-color: #8C6E4A;" data-color="#8C6E4A"> <span class="color-name">Earth Brown</span> <span class="color-code">#8C6E4A</span> </div> </div> <div class="color-row"> <div class="color-swatch" style="background-color: #E5D9C1;" data-color="#E5D9C1"> <span class="color-name dark-text">Sand Beige</span> <span class="color-code dark-text">#E5D9C1</span> </div> <div class="color-swatch" style="background-color: #BFA58E;" data-color="#BFA58E"> <span class="color-name dark-text">Clay Neutral</span> <span class="color-code dark-text">#BFA58E</span> </div> </div> </section> <section class="palette-section"> <h2>Vibrant Nature Accents</h2> <p class="accent-description">Strategic accent colors extracted from nature's most vibrant displays—from sunrise to wild berries—to energize our core palette.</p> <div class="color-row"> <div class="color-swatch" style="background-color: #E07A5F;" data-color="#E07A5F"> <span class="color-name">Sunrise Orange</span> <span class="color-code">#E07A5F</span> </div> <div class="color-swatch" style="background-color: #B84A62;" data-color="#B84A62"> <span class="color-name">Wild Berry</span> <span class="color-code">#B84A62</span> </div> <div class="color-swatch" style="background-color: #679BB8;" data-color="#679BB8"> <span class="color-name">River Blue</span> <span class="color-code">#679BB8</span> </div> </div> <div class="color-row"> <div class="color-swatch" style="background-color: #D9985F;" data-color="#D9985F"> <span class="color-name">Autumn Leaf</span> <span class="color-code">#D9985F</span> </div> <div class="color-swatch" style="background-color: #E6C522;" data-color="#E6C522"> <span class="color-name">Meadow Yellow</span> <span class="color-code">#E6C522</span> </div> </div> </section> <section class="application-section"> <h2>Application</h2> <div class="application-examples"> <div class="example-card"> <div class="card-header" style="background-color: #2F5233;"> Primary </div> <div class="card-body"> <h4 class="card-title">Product Packaging</h4> <p class="card-desc">Forest Green serves as our dominant container color, signifying growth and durability.</p> </div> </div> <div class="example-card"> <div class="card-header" style="background-color: #E07A5F;"> Accent </div> <div class="card-body"> <h4 class="card-title">Call-to-Action</h4> <p class="card-desc">Sunrise Orange creates focused attention on sustainability commitments and action points.</p> </div> </div> <div class="example-card"> <div class="card-header" style="background-color: #E5D9C1;"> <span class="dark-text">Background</span> </div> <div class="card-body"> <h4 class="card-title">Digital Interfaces</h4> <p class="card-desc">Sand Beige provides a warm, calming foundation for content that reduces eye strain.</p> </div> </div> </div> </section> <section class="principles-section"> <h2>Color Principles</h2> <div class="principles"> <div class="principle"> <h3>Biophilic Connection</h3> <p>Our palette directly references natural environments to create spaces that reduce stress and improve cognitive function.</p> </div> <div class="principle" style="border-left-color: var(--autumn-leaf);"> <h3>Seasonal Flexibility</h3> <p>The palette adapts seasonally, emphasizing cooler tones in summer and warmer accents in winter for energy efficiency.</p> </div> </div> <button class="btn" id="downloadBtn">Download Color Specs</button> </section> <div class="color-tooltip" id="tooltip"></div> <div class="animated-cursor" id="cursor"></div> <footer> © 2023 Terravida Sustainable Design | Colors derived from biodegradable pigments </footer> </div> <script> // Cursor animation const cursor = document.getElementById('cursor'); const tooltip = document.getElementById('tooltip'); let cursorVisible = false; let tooltipVisible = false; // Colors for cursor based on complementary colors const cursorColors = [ '#7A9A7E', '#E07A5F', '#679BB8', '#E6C522', '#B84A62' ]; // Random cursor color let currentColorIndex = 0; const updateCursorColor = () => { currentColorIndex = (currentColorIndex + 1) % cursorColors.length; cursor.style.backgroundColor = cursorColors[currentColorIndex]; }; // Update cursor position document.addEventListener('mousemove', (e) => { cursor.style.left = `${e.clientX}px`; cursor.style.top = `${e.clientY}px`; if (!cursorVisible) { cursorVisible = true; cursor.style.opacity = 1; } // Hide the cursor when it's not moving clearTimeout(window.cursorTimeout); window.cursorTimeout = setTimeout(() => { cursor.style.opacity = 0; cursorVisible = false; }, 3000); }); // Change cursor size on click document.addEventListener('mousedown', () => { cursor.style.transform = 'scale(0.7)'; updateCursorColor(); }); document.addEventListener('mouseup', () => { cursor.style.transform = 'scale(1)'; }); // Hide cursor when leaving window document.addEventListener('mouseleave', () => { cursor.style.opacity = 0; cursorVisible = false; }); // Color swatches interaction const colorSwatches = document.querySelectorAll('.color-swatch'); colorSwatches.forEach(swatch => { swatch.addEventListener('click', () => { const colorCode = swatch.getAttribute('data-color'); navigator.clipboard.writeText(colorCode) .then(() => { // Show copied message tooltip.textContent = `${colorCode} copied!`; tooltip.style.opacity = 1; tooltip.style.left = `${event.clientX + 15}px`; tooltip.style.top = `${event.clientY - 25}px`; // Hide tooltip after 2 seconds clearTimeout(window.tooltipTimeout); window.tooltipTimeout = setTimeout(() => { tooltip.style.opacity = 0; }, 2000); }); }); }); // Create animated leaves decoration function createLeaves() { const leaves = 6; const container = document.querySelector('.container'); for (let i = 0; i < leaves; i++) { const leaf = document.createElement('div'); leaf.classList.add('leaf-decoration'); // Random positions const leftPos = Math.random() * 700; const topPos = 50 + Math.random() * 600; leaf.style.left = `${leftPos}px`; leaf.style.top = `${topPos}px`; leaf.style.backgroundColor = cursorColors[Math.floor(Math.random() * cursorColors.length)]; leaf.style.transform = `rotate(${Math.random() * 360}deg)`; container.appendChild(leaf); // Animate leaves occasionally setInterval(() => { const newLeft = Math.max(0, Math.min(700, leftPos + (Math.random() - 0.5) * 30)); const newTop = Math.max(0, Math.min(700, topPos + (Math.random() - 0.5) * 30)); const newRotate = Math.random() * 360; leaf.style.left = `${newLeft}px`; leaf.style.top = `${newTop}px`; leaf.style.transform = `rotate(${newRotate}deg)`; }, 5000 + Math.random() * 10000); } } createLeaves(); // Download button functionality (simulated) document.getElementById('downloadBtn').addEventListener('click', function() { this.textContent = "Specifications Ready!"; setTimeout(() => { this.textContent = "Download Color Specs"; }, 2000); }); </script> </body> </html>
<html> <head> <title>SportsPulse App</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif; } :root { --primary: #ff3c00; --secondary: #00c2ff; --dark: #0a1128; --light: #f8f9fa; --accent-hot: #ff1e56; --accent-cool: #2176ff; --accent-vibrant: #8f00ff; --gradient-hot: linear-gradient(135deg, #ff3c00 0%, #ff1e56 100%); --gradient-cool: linear-gradient(135deg, #00c2ff 0%, #2176ff 100%); --gradient-vibrant: linear-gradient(135deg, #ff3c00 0%, #8f00ff 100%); } body { background-color: var(--dark); color: var(--light); height: 700px; width: 700px; overflow-x: hidden; position: relative; } .app-container { max-width: 700px; height: 700px; margin: 0 auto; padding: 1rem; display: flex; flex-direction: column; overflow-y: auto; position: relative; } header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; border-bottom: 2px solid rgba(255, 255, 255, 0.1); position: sticky; top: 0; background-color: var(--dark); z-index: 10; } .logo { font-size: 1.5rem; font-weight: 800; background: var(--gradient-vibrant); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; position: relative; } .logo::after { content: ""; position: absolute; height: 4px; width: 100%; bottom: -4px; left: 0; background: var(--gradient-vibrant); border-radius: 2px; } .nav-icons { display: flex; gap: 1rem; } .icon-btn { background: none; border: none; color: var(--light); font-size: 1.2rem; cursor: pointer; transition: transform 0.2s, color 0.2s; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 50%; } .icon-btn:hover { transform: scale(1.1); color: var(--primary); background-color: rgba(255, 255, 255, 0.1); } .breaking-news { margin: 1rem 0; padding: 1rem; background: var(--gradient-hot); border-radius: 8px; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; position: relative; overflow: hidden; box-shadow: 0 4px 15px rgba(255, 60, 0, 0.3); } .breaking-news:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(255, 60, 0, 0.4); } .breaking-news::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.1); transform: skewX(-20deg); transition: left 0.5s; } .breaking-news:hover::before { left: 100%; } .tag { display: inline-block; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.5rem; } .breaking-tag { background-color: var(--accent-hot); color: var(--light); animation: pulse 2s infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } } .breaking-news h3 { font-size: 1.2rem; margin-bottom: 0.5rem; } .breaking-news p { font-size: 0.9rem; opacity: 0.9; } .time-stamp { font-size: 0.8rem; opacity: 0.7; margin-top: 0.5rem; display: flex; align-items: center; gap: 0.25rem; } .category-tabs { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.5rem 0; scrollbar-width: none; -ms-overflow-style: none; margin: 0.5rem 0; } .category-tabs::-webkit-scrollbar { display: none; } .category-tab { padding: 0.5rem 1rem; background-color: rgba(255, 255, 255, 0.1); border-radius: 20px; font-size: 0.9rem; white-space: nowrap; cursor: pointer; transition: all 0.3s; border: none; color: var(--light); font-weight: 500; } .category-tab.active { background: var(--gradient-cool); color: var(--light); box-shadow: 0 4px 10px rgba(0, 194, 255, 0.3); } .category-tab:hover:not(.active) { background-color: rgba(255, 255, 255, 0.2); } .news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin: 1rem 0; } .news-card { background-color: rgba(255, 255, 255, 0.05); border-radius: 8px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; cursor: pointer; height: 100%; display: flex; flex-direction: column; } .news-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); background-color: rgba(255, 255, 255, 0.1); } .news-img { height: 120px; background-size: cover; background-position: center; position: relative; } .news-category { position: absolute; top: 10px; left: 10px; background: var(--gradient-cool); color: var(--light); font-size: 0.7rem; padding: 0.25rem 0.5rem; border-radius: 4px; font-weight: 700; } .news-content { padding: 1rem; flex: 1; display: flex; flex-direction: column; } .news-title { font-size: 1rem; margin-bottom: 0.5rem; font-weight: 600; } .news-preview { font-size: 0.8rem; opacity: 0.7; margin-bottom: 0.5rem; flex: 1; } .news-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.7rem; opacity: 0.7; } .live-scores { margin: 1rem 0; background: var(--gradient-cool); border-radius: 8px; padding: 1rem; box-shadow: 0 4px 15px rgba(0, 194, 255, 0.3); overflow: hidden; position: relative; } .section-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .section-title h2 { font-size: 1.2rem; font-weight: 700; } .view-all { font-size: 0.8rem; color: var(--light); text-decoration: none; display: flex; align-items: center; gap: 0.25rem; font-weight: 500; opacity: 0.9; transition: opacity 0.3s; cursor: pointer; } .view-all:hover { opacity: 1; } .scores-container { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; scrollbar-width: none; -ms-overflow-style: none; } .scores-container::-webkit-scrollbar { display: none; } .score-card { background-color: rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 1rem; min-width: 200px; position: relative; overflow: hidden; } .match-teams { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .team { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .team-logo { width: 30px; height: 30px; background-color: var(--light); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: 800; font-size: 0.8rem; color: var(--dark); } .team-name { font-size: 0.8rem; font-weight: 600; } .score { font-size: 1.2rem; font-weight: 800; } .match-info { text-align: center; font-size: 0.7rem; opacity: 0.8; margin-top: 0.5rem; } .live-indicator { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 0.25rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent-hot); } .live-dot { width: 8px; height: 8px; background-color: var(--accent-hot); border-radius: 50%; animation: livePulse 1.5s infinite; } @keyframes livePulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } } .bottom-nav { display: flex; justify-content: space-around; background-color: rgba(255, 255, 255, 0.05); padding: 0.75rem 0; border-radius: 12px; position: sticky; bottom: 1rem; margin-top: 1rem; backdrop-filter: blur(10px); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2); } .nav-item { display: flex; flex-direction: column; align-items: center; color: var(--light); opacity: 0.7; transition: all 0.3s; cursor: pointer; text-decoration: none; padding: 0.5rem 1rem; border-radius: 8px; } .nav-item.active { opacity: 1; background: var(--gradient-cool); color: var(--light); } .nav-item:hover:not(.active) { opacity: 1; background-color: rgba(255, 255, 255, 0.1); } .nav-icon { font-size: 1.2rem; margin-bottom: 0.25rem; } .nav-label { font-size: 0.7rem; font-weight: 500; } @media (max-width: 500px) { .news-grid { grid-template-columns: 1fr; } header { padding: 0.75rem 0; } .logo { font-size: 1.2rem; } .breaking-news h3 { font-size: 1rem; } .category-tab { padding: 0.4rem 0.8rem; font-size: 0.8rem; } .section-title h2 { font-size: 1rem; } } .notification-badge { position: absolute; top: -5px; right: -5px; background: var(--accent-hot); color: white; border-radius: 50%; width: 18px; height: 18px; font-size: 0.6rem; display: flex; justify-content: center; align-items: center; font-weight: bold; } .breaking-animation { animation: slideIn 0.5s ease-out; } @keyframes slideIn { 0% { transform: translateX(100px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } .skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%); background-size: 200% 100%; animation: loadingAnimation 1.5s infinite; border-radius: 4px; } @keyframes loadingAnimation { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .accent-circle { position: fixed; border-radius: 50%; filter: blur(80px); z-index: -1; opacity: 0.4; } .accent-circle.one { width: 300px; height: 300px; background: var(--accent-hot); top: -100px; right: -100px; } .accent-circle.two { width: 250px; height: 250px; background: var(--accent-cool); bottom: -50px; left: -50px; } </style> </head> <body> <div class="accent-circle one"></div> <div class="accent-circle two"></div> <div class="app-container"> <header> <div class="logo">SportsPulse</div> <div class="nav-icons"> <button class="icon-btn"> <i class="fas fa-search"></i> </button> <button class="icon-btn" style="position: relative;"> <i class="fas fa-bell"></i> <span class="notification-badge">3</span> </button> </div> </header> <div class="breaking-news breaking-animation" id="breakingNews"> <div class="tag breaking-tag">Breaking News</div> <h3>Lakers Acquire Tatum in Blockbuster Three-Team Trade</h3> <p>The Los Angeles Lakers have shocked the NBA with a massive deal sending Anthony Davis to Boston in exchange for Jayson Tatum and draft compensation.</p> <div class="time-stamp"> <i class="fas fa-clock"></i> 20 minutes ago </div> </div> <div class="category-tabs"> <button class="category-tab active">All</button> <button class="category-tab">NBA</button> <button class="category-tab">NFL</button> <button class="category-tab">Soccer</button> <button class="category-tab">MLB</button> <button class="category-tab">NHL</button> <button class="category-tab">UFC</button> </div> <div class="live-scores"> <div class="section-title"> <h2>Live Scores</h2> <span class="view-all">View All <i class="fas fa-chevron-right"></i></span> </div> <div class="scores-container"> <div class="score-card"> <div class="match-teams"> <div class="team"> <div class="team-logo">MIA</div> <div class="team-name">Heat</div> </div> <div class="score">92</div> <div class="score">89</div> <div class="team"> <div class="team-logo">CHI</div> <div class="team-name">Bulls</div> </div> </div> <div class="match-info">Q4 - 2:42</div> <div class="live-indicator"> <div class="live-dot"></div> LIVE </div> </div> <div class="score-card"> <div class="match-teams"> <div class="team"> <div class="team-logo">BOS</div> <div class="team-name">Celtics</div> </div> <div class="score">105</div> <div class="score">98</div> <div class="team"> <div class="team-logo">NY</div> <div class="team-name">Knicks</div> </div> </div> <div class="match-info">Q3 - 5:18</div> <div class="live-indicator"> <div class="live-dot"></div> LIVE </div> </div> <div class="score-card"> <div class="match-teams"> <div class="team"> <div class="team-logo">SF</div> <div class="team-name">49ers</div> </div> <div class="score">24</div> <div class="score">17</div> <div class="team"> <div class="team-logo">SEA</div> <div class="team-name">Seahawks</div> </div> </div> <div class="match-info">3rd Qtr - 8:22</div> <div class="live-indicator"> <div class="live-dot"></div> LIVE </div> </div> </div> </div> <div class="section-title"> <h2>Top Stories</h2> <span class="view-all">View All <i class="fas fa-chevron-right"></i></span> </div> <div class="news-grid"> <div class="news-card"> <div class="news-img" style="background-image: url('https://source.unsplash.com/random/300x200/?basketball')"> <div class="news-category">NBA</div> </div> <div class="news-content"> <h3 class="news-title">Embiid Returns with Career-High 52 Points</h3> <p class="news-preview">76ers star dominates in first game back from knee injury, surprising analysts with his mobility.</p> <div class="news-meta"> <span>4 hours ago</span> <span><i class="fas fa-comment"></i> 124</span> </div> </div> </div> <div class="news-card"> <div class="news-img" style="background-image: url('https://source.unsplash.com/random/300x200/?soccer')"> <div class="news-category">Soccer</div> </div> <div class="news-content"> <h3 class="news-title">Champions League: Bayern Stuns Madrid</h3> <p class="news-preview">Last-minute goal by Kane sends German giants to final in dramatic fashion.</p> <div class="news-meta"> <span>6 hours ago</span> <span><i class="fas fa-comment"></i> 287</span> </div> </div> </div> <div class="news-card"> <div class="news-img" style="background-image: url('https://source.unsplash.com/random/300x200/?football')"> <div class="news-category">NFL</div> </div> <div class="news-content"> <h3 class="news-title">Cowboys Sign Pro Bowl Safety to Record Deal</h3> <p class="news-preview">Five-year contract makes him highest-paid safety in NFL history after stellar season.</p> <div class="news-meta"> <span>Yesterday</span> <span><i class="fas fa-comment"></i> 93</span> </div> </div> </div> </div> <div class="bottom-nav"> <div class="nav-item active"> <div class="nav-icon"><i class="fas fa-home"></i></div> <div class="nav-label">Home</div> </div> <div class="nav-item"> <div class="nav-icon"><i class="fas fa-trophy"></i></div> <div class="nav-label">Scores</div> </div> <div class="nav-item"> <div class="nav-icon"><i class="fas fa-tv"></i></div> <div class="nav-label">Watch</div> </div> <div class="nav-item"> <div class="nav-icon"><i class="fas fa-user"></i></div> <div class="nav-label">Profile</div> </div> </div> </div> <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> <script> document.addEventListener('DOMContentLoaded', function() { // Category tabs functionality const tabs = document.querySelectorAll('.category-tab'); tabs.forEach(tab => { tab.addEventListener('click', function() { tabs.forEach(t => t.classList.remove('active')); this.classList.add('active'); // Simulate loading new content simulateContentLoading(); }); }); // Bottom navigation functionality const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(item => { item.addEventListener('click', function() { navItems.forEach(i => i.classList.remove('active')); this.classList.add('active'); }); }); // Breaking news animation and interaction const breakingNews = document.getElementById('breakingNews'); if (breakingNews) { breakingNews.addEventListener('click', function() { this.style.transform = 'scale(0.98)'; setTimeout(() => { this.style.transform = 'translateY(-5px)'; }, 150); }); } // Simulate new breaking news appearing setTimeout(() => { if (breakingNews) { breakingNews.classList.remove('breaking-animation'); void breakingNews.offsetWidth; // Trigger reflow breakingNews.classList.add('breaking-animation'); breakingNews.querySelector('h3').textContent = "Ronaldo Announces Shock Return to Premier League"; breakingNews.querySelector('p').textContent = "Cristiano Ronaldo has agreed to a 6-month deal with Manchester United following his departure from Al-Nassr. The 39-year-old will return in January."; breakingNews.querySelector('.time-stamp').innerHTML = '<i class="fas fa-clock"></i> Just now'; } }, 15000); // Simulate content loading when changing tabs function simulateContentLoading() { const newsCards = document.querySelectorAll('.news-card'); newsCards.forEach(card => { const title = card.querySelector('.news-title'); const preview = card.querySelector('.news-preview'); const img = card.querySelector('.news-img'); // Save original content const originalTitle = title.textContent; const originalPreview = preview.textContent; const originalBg = img.style.backgroundImage; // Create skeleton loading effect title.textContent = ''; title.classList.add('skeleton'); title.style.height = '1rem'; title.style.marginBottom = '0.75rem'; preview.textContent = ''; preview.classList.add('skeleton'); preview.style.height = '2.5rem'; img.style.backgroundImage = 'none'; img.classList.add('skeleton'); // Restore content after "loading" setTimeout(() => { title.textContent = originalTitle; title.classList.remove('skeleton'); title.style.height = ''; title.style.marginBottom = ''; preview.textContent = originalPreview; preview.classList.remove('skeleton'); preview.style.height = ''; img.style.backgroundImage = originalBg; img.classList.remove('skeleton'); }, 800); }); } // Score animation const scores = document.querySelectorAll('.score'); // Simulate score updates setInterval(() => { const randomScore = scores[Math.floor(Math.random() * scores.length)]; if (randomScore) { const currentScore = parseInt(randomScore.textContent); randomScore.textContent = currentScore + 2; // Add a highlight effect randomScore.style.color = 'var(--accent-hot)'; randomScore.style.transform = 'scale(1.2)'; setTimeout(() => { randomScore.style.color = ''; randomScore.style.transform = ''; }, 1000); } }, 8000); }); </script> </body> </html>
