Spaces:
Running
Running
File size: 5,666 Bytes
38ea9f6 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sherlock - Expert Front-End Developer</title>
<meta name="description" content="Sherlock by Trailblazer Labs - Production-ready websites built with HTML, CSS, and vanilla JavaScript">
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<div class="container">
<div class="header-content">
<h1 class="logo">🔍 Sherlock</h1>
<nav class="nav" aria-label="Main navigation">
<button class="menu-toggle" aria-expanded="false" aria-controls="nav-menu">
<span></span>
<span></span>
<span></span>
</button>
<ul class="nav-menu" id="nav-menu">
<li><a href="#home" class="nav-link">Home</a></li>
<li><a href="#services" class="nav-link">Services</a></li>
<li><a href="#portfolio" class="nav-link">Portfolio</a></li>
<li><a href="#contact" class="nav-link">Contact</a></li>
</ul>
</nav>
</div>
<div class="header-credits">
<a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer">Built with anycoder</a>
</div>
</div>
</header>
<main>
<section id="home" class="hero">
<div class="container">
<div class="hero-content">
<h2 class="hero-title">Expert Front-End Developer</h2>
<p class="hero-subtitle">Production-ready websites crafted with precision using HTML, CSS, and vanilla JavaScript. No frameworks. Pure code excellence.</p>
<div class="hero-buttons">
<a href="#contact" class="btn btn-primary">Start Project</a>
<a href="#portfolio" class="btn btn-secondary">View Work</a>
</div>
</div>
</div>
</section>
<section id="services" class="services">
<div class="container">
<h2 class="section-title">What I Build</h2>
<div class="services-grid">
<div class="service-card">
<div class="service-icon">🎨</div>
<h3>Responsive Design</h3>
<p>Mobile-first approach with flawless cross-device compatibility.</p>
</div>
<div class="service-card">
<div class="service-icon">⚡</div>
<h3>Vanilla JavaScript</h3>
<p>Fast, lightweight interactivity without framework bloat.</p>
</div>
<div class="service-card">
<div class="service-icon">🚀</div>
<h3>Production Ready</h3>
<p>SEO optimized, accessible, and deployment-ready code.</p>
</div>
<div class="service-card">
<div class="service-icon">🔍</div>
<h3>Semantic HTML</h3>
<p>Clean, standards-compliant markup that search engines love.</p>
</div>
</div>
</div>
</section>
<section id="portfolio" class="portfolio">
<div class="container">
<h2 class="section-title">Portfolio</h2>
<div class="portfolio-grid">
<div class="portfolio-item">
<div class="portfolio-image"></div>
<div class="portfolio-info">
<h3>E-Commerce Site</h3>
<p>Fully responsive shopping experience</p>
</div>
</div>
<div class="portfolio-item">
<div class="portfolio-image"></div>
<div class="portfolio-info">
<h3>Dashboard App</h3>
<p>Data visualization with vanilla JS</p>
</div>
</div>
<div class="portfolio-item">
<div class="portfolio-image"></div>
<div class="portfolio-info">
<h3>Landing Page</h3>
<p>High-conversion marketing page</p>
</div>
</div>
</div>
</div>
</section>
<section id="contact" class="contact">
<div class="container">
<h2 class="section-title">Ready to Build?</h2>
<p class="section-subtitle">Describe your project and I'll create a production-ready solution.</p>
<form class="contact-form" novalidate>
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
<span class="error-message">Please enter your name</span>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<span class="error-message">Please enter a valid email</span>
</div>
<div class="form-group">
<label for="project">Project Description</label>
<textarea id="project" name="project" rows="5" required></textarea>
<span class="error-message">Please describe your project</span>
</div>
<button type="submit" class="btn btn-primary">Send Request</button>
</form>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<p>© 2024 Sherlock by Trailblazer Labs. Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer">anycoder</a>.</p>
</div>
</footer>
<script src="assets |