Spaces:
Running
Running
Create a modern, responsive personal portfolio website with a clean and minimal design. Use a light color scheme with white backgrounds, navy blue accents, and soft gray text. The homepage should include a header with my name and a short bio, a navigation menu linking to About, Projects, Blog, and Contact sections. Showcase 3 featured projects with images and descriptions in a grid layout. Include smooth scrolling navigation and subtle hover animations on links and project cards. Add a contact form with name, email, and message fields. The footer should have social media icons and copyright info. Provide the full HTML, CSS, and JavaScript code with clear comments.
Browse files- README.md +8 -5
- index.html +325 -18
README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: PixelPort Profolio 🎨
|
| 3 |
+
colorFrom: purple
|
| 4 |
+
colorTo: purple
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://deepsite.hf.co).
|
index.html
CHANGED
|
@@ -1,19 +1,326 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
</html>
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>PixelPort Profolio</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 11 |
+
<style>
|
| 12 |
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
| 13 |
+
|
| 14 |
+
body {
|
| 15 |
+
font-family: 'Inter', sans-serif;
|
| 16 |
+
scroll-behavior: smooth;
|
| 17 |
+
}
|
| 18 |
+
|
| 19 |
+
.project-card:hover {
|
| 20 |
+
transform: translateY(-5px);
|
| 21 |
+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
| 22 |
+
}
|
| 23 |
+
|
| 24 |
+
.nav-link {
|
| 25 |
+
position: relative;
|
| 26 |
+
}
|
| 27 |
+
|
| 28 |
+
.nav-link::after {
|
| 29 |
+
content: '';
|
| 30 |
+
position: absolute;
|
| 31 |
+
width: 0;
|
| 32 |
+
height: 2px;
|
| 33 |
+
bottom: -2px;
|
| 34 |
+
left: 0;
|
| 35 |
+
background-color: #1e40af;
|
| 36 |
+
transition: width 0.3s ease;
|
| 37 |
+
}
|
| 38 |
+
|
| 39 |
+
.nav-link:hover::after {
|
| 40 |
+
width: 100%;
|
| 41 |
+
}
|
| 42 |
+
|
| 43 |
+
input:focus, textarea:focus {
|
| 44 |
+
outline: none;
|
| 45 |
+
border-color: #1e40af;
|
| 46 |
+
box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.2);
|
| 47 |
+
}
|
| 48 |
+
</style>
|
| 49 |
+
</head>
|
| 50 |
+
<body class="bg-white text-gray-700">
|
| 51 |
+
<!-- Navigation -->
|
| 52 |
+
<header class="sticky top-0 bg-white shadow-sm z-50">
|
| 53 |
+
<nav class="container mx-auto px-6 py-4">
|
| 54 |
+
<div class="flex justify-between items-center">
|
| 55 |
+
<a href="#" class="text-2xl font-bold text-navy-800">PixelPort</a>
|
| 56 |
+
<div class="hidden md:flex space-x-8">
|
| 57 |
+
<a href="#home" class="nav-link text-gray-700 hover:text-navy-800">Home</a>
|
| 58 |
+
<a href="#about" class="nav-link text-gray-700 hover:text-navy-800">About</a>
|
| 59 |
+
<a href="#projects" class="nav-link text-gray-700 hover:text-navy-800">Projects</a>
|
| 60 |
+
<a href="#blog" class="nav-link text-gray-700 hover:text-navy-800">Blog</a>
|
| 61 |
+
<a href="#contact" class="nav-link text-gray-700 hover:text-navy-800">Contact</a>
|
| 62 |
+
</div>
|
| 63 |
+
<button class="md:hidden focus:outline-none">
|
| 64 |
+
<i data-feather="menu"></i>
|
| 65 |
+
</button>
|
| 66 |
+
</div>
|
| 67 |
+
</nav>
|
| 68 |
+
</header>
|
| 69 |
+
|
| 70 |
+
<!-- Hero Section -->
|
| 71 |
+
<section id="home" class="container mx-auto px-6 py-20 md:py-32">
|
| 72 |
+
<div class="flex flex-col md:flex-row items-center">
|
| 73 |
+
<div class="md:w-1/2 mb-12 md:mb-0">
|
| 74 |
+
<h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Hi, I'm Alex <span class="text-blue-600">👋</span></h1>
|
| 75 |
+
<h2 class="text-2xl md:text-3xl font-semibold text-gray-600 mb-6">UI/UX Designer & Frontend Developer</h2>
|
| 76 |
+
<p class="text-gray-600 mb-8 max-w-lg">I create beautiful, functional digital experiences that users love. Specializing in clean interfaces and intuitive interactions.</p>
|
| 77 |
+
<div class="flex space-x-4">
|
| 78 |
+
<a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg transition duration-300">Get in touch</a>
|
| 79 |
+
<a href="#projects" class="border border-blue-600 text-blue-600 hover:bg-blue-50 px-6 py-3 rounded-lg transition duration-300">View work</a>
|
| 80 |
+
</div>
|
| 81 |
+
</div>
|
| 82 |
+
<div class="md:w-1/2 flex justify-center">
|
| 83 |
+
<div class="relative w-64 h-64 md:w-80 md:h-80 bg-gradient-to-br from-blue-50 to-blue-100 rounded-full overflow-hidden">
|
| 84 |
+
<img src="http://static.photos/people/640x360/42" alt="Profile" class="w-full h-full object-cover">
|
| 85 |
+
</div>
|
| 86 |
+
</div>
|
| 87 |
+
</div>
|
| 88 |
+
</section>
|
| 89 |
+
|
| 90 |
+
<!-- About Section -->
|
| 91 |
+
<section id="about" class="bg-gray-50 py-20">
|
| 92 |
+
<div class="container mx-auto px-6">
|
| 93 |
+
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">About Me</h2>
|
| 94 |
+
<div class="flex flex-col md:flex-row items-center">
|
| 95 |
+
<div class="md:w-1/3 mb-8 md:mb-0 flex justify-center">
|
| 96 |
+
<div class="w-48 h-48 bg-gradient-to-br from-blue-100 to-blue-200 rounded-full overflow-hidden shadow-lg">
|
| 97 |
+
<img src="http://static.photos/people/640x360/42" alt="Profile" class="w-full h-full object-cover">
|
| 98 |
+
</div>
|
| 99 |
+
</div>
|
| 100 |
+
<div class="md:w-2/3 md:pl-12">
|
| 101 |
+
<p class="text-gray-600 mb-6">
|
| 102 |
+
I'm a passionate designer and developer with 5+ years of experience creating digital products that users love. I combine aesthetic sensibility with technical skills to build interfaces that are both beautiful and functional.
|
| 103 |
+
</p>
|
| 104 |
+
<p class="text-gray-600 mb-6">
|
| 105 |
+
My approach is user-centered, data-informed, and detail-oriented. I believe great design solves problems while creating delightful experiences.
|
| 106 |
+
</p>
|
| 107 |
+
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
|
| 108 |
+
<div class="bg-white p-4 rounded-lg shadow-sm">
|
| 109 |
+
<h3 class="font-semibold text-blue-600 mb-2">UI/UX Design</h3>
|
| 110 |
+
<p class="text-sm text-gray-600">Wireframing, prototyping, user research</p>
|
| 111 |
+
</div>
|
| 112 |
+
<div class="bg-white p-4 rounded-lg shadow-sm">
|
| 113 |
+
<h3 class="font-semibold text-blue-600 mb-2">Frontend Dev</h3>
|
| 114 |
+
<p class="text-sm text-gray-600">HTML, CSS, JavaScript, React</p>
|
| 115 |
+
</div>
|
| 116 |
+
<div class="bg-white p-4 rounded-lg shadow-sm">
|
| 117 |
+
<h3 class="font-semibold text-blue-600 mb-2">Interaction Design</h3>
|
| 118 |
+
<p class="text-sm text-gray-600">Micro-interactions, animations</p>
|
| 119 |
+
</div>
|
| 120 |
+
</div>
|
| 121 |
+
</div>
|
| 122 |
+
</div>
|
| 123 |
+
</div>
|
| 124 |
+
</section>
|
| 125 |
+
|
| 126 |
+
<!-- Projects Section -->
|
| 127 |
+
<section id="projects" class="py-20">
|
| 128 |
+
<div class="container mx-auto px-6">
|
| 129 |
+
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Featured Projects</h2>
|
| 130 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
| 131 |
+
<!-- Project 1 -->
|
| 132 |
+
<div class="project-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
|
| 133 |
+
<div class="h-48 overflow-hidden">
|
| 134 |
+
<img src="http://static.photos/technology/640x360/101" alt="Project 1" class="w-full h-full object-cover">
|
| 135 |
+
</div>
|
| 136 |
+
<div class="p-6">
|
| 137 |
+
<h3 class="text-xl font-semibold text-gray-800 mb-2">E-commerce Platform</h3>
|
| 138 |
+
<p class="text-gray-600 mb-4">A modern online shopping experience with intuitive navigation and seamless checkout.</p>
|
| 139 |
+
<div class="flex flex-wrap gap-2">
|
| 140 |
+
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">UI Design</span>
|
| 141 |
+
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">React</span>
|
| 142 |
+
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">Node.js</span>
|
| 143 |
+
</div>
|
| 144 |
+
</div>
|
| 145 |
+
</div>
|
| 146 |
+
|
| 147 |
+
<!-- Project 2 -->
|
| 148 |
+
<div class="project-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
|
| 149 |
+
<div class="h-48 overflow-hidden">
|
| 150 |
+
<img src="http://static.photos/finance/640x360/201" alt="Project 2" class="w-full h-full object-cover">
|
| 151 |
+
</div>
|
| 152 |
+
<div class="p-6">
|
| 153 |
+
<h3 class="text-xl font-semibold text-gray-800 mb-2">Finance Dashboard</h3>
|
| 154 |
+
<p class="text-gray-600 mb-4">Data visualization tool for personal finance tracking with interactive charts.</p>
|
| 155 |
+
<div class="flex flex-wrap gap-2">
|
| 156 |
+
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">UX Research</span>
|
| 157 |
+
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">JavaScript</span>
|
| 158 |
+
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">D3.js</span>
|
| 159 |
+
</div>
|
| 160 |
+
</div>
|
| 161 |
+
</div>
|
| 162 |
+
|
| 163 |
+
<!-- Project 3 -->
|
| 164 |
+
<div class="project-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
|
| 165 |
+
<div class="h-48 overflow-hidden">
|
| 166 |
+
<img src="http://static.photos/workspace/640x360/301" alt="Project 3" class="w-full h-full object-cover">
|
| 167 |
+
</div>
|
| 168 |
+
<div class="p-6">
|
| 169 |
+
<h3 class="text-xl font-semibold text-gray-800 mb-2">Task Management App</h3>
|
| 170 |
+
<p class="text-gray-600 mb-4">Collaborative tool for teams to organize, track, and manage projects.</p>
|
| 171 |
+
<div class="flex flex-wrap gap-2">
|
| 172 |
+
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">Mobile First</span>
|
| 173 |
+
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">Vue.js</span>
|
| 174 |
+
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">Firebase</span>
|
| 175 |
+
</div>
|
| 176 |
+
</div>
|
| 177 |
+
</div>
|
| 178 |
+
</div>
|
| 179 |
+
<div class="text-center mt-12">
|
| 180 |
+
<a href="#" class="inline-block border border-blue-600 text-blue-600 hover:bg-blue-50 px-6 py-3 rounded-lg transition duration-300">View all projects</a>
|
| 181 |
+
</div>
|
| 182 |
+
</div>
|
| 183 |
+
</section>
|
| 184 |
+
|
| 185 |
+
<!-- Blog Section -->
|
| 186 |
+
<section id="blog" class="bg-gray-50 py-20">
|
| 187 |
+
<div class="container mx-auto px-6">
|
| 188 |
+
<h2 class="text-3xl font-bold text-center text-gray-800 mb-6">Latest Articles</h2>
|
| 189 |
+
<p class="text-gray-600 text-center max-w-2xl mx-auto mb-12">Sharing insights on design, development, and the creative process.</p>
|
| 190 |
+
|
| 191 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
| 192 |
+
<!-- Article 1 -->
|
| 193 |
+
<div class="bg-white rounded-xl shadow-md overflow-hidden">
|
| 194 |
+
<div class="h-48 overflow-hidden">
|
| 195 |
+
<img src="http://static.photos/technology/640x360/401" alt="Article 1" class="w-full h-full object-cover">
|
| 196 |
+
</div>
|
| 197 |
+
<div class="p-6">
|
| 198 |
+
<span class="text-xs text-blue-600 font-medium">DESIGN • May 12, 2023</span>
|
| 199 |
+
<h3 class="text-xl font-semibold text-gray-800 my-3">Designing for Accessibility</h3>
|
| 200 |
+
<p class="text-gray-600 mb-4">How to create inclusive digital experiences that work for everyone.</p>
|
| 201 |
+
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">
|
| 202 |
+
Read more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
|
| 203 |
+
</a>
|
| 204 |
+
</div>
|
| 205 |
+
</div>
|
| 206 |
+
|
| 207 |
+
<!-- Article 2 -->
|
| 208 |
+
<div class="bg-white rounded-xl shadow-md overflow-hidden">
|
| 209 |
+
<div class="h-48 overflow-hidden">
|
| 210 |
+
<img src="http://static.photos/workspace/640x360/501" alt="Article 2" class="w-full h-full object-cover">
|
| 211 |
+
</div>
|
| 212 |
+
<div class="p-6">
|
| 213 |
+
<span class="text-xs text-blue-600 font-medium">DEVELOPMENT • April 28, 2023</span>
|
| 214 |
+
<h3 class="text-xl font-semibold text-gray-800 my-3">CSS Grid vs Flexbox</h3>
|
| 215 |
+
<p class="text-gray-600 mb-4">When to use each layout technique for optimal results.</p>
|
| 216 |
+
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">
|
| 217 |
+
Read more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
|
| 218 |
+
</a>
|
| 219 |
+
</div>
|
| 220 |
+
</div>
|
| 221 |
+
|
| 222 |
+
<!-- Article 3 -->
|
| 223 |
+
<div class="bg-white rounded-xl shadow-md overflow-hidden">
|
| 224 |
+
<div class="h-48 overflow-hidden">
|
| 225 |
+
<img src="http://static.photos/minimal/640x360/601" alt="Article 3" class="w-full h-full object-cover">
|
| 226 |
+
</div>
|
| 227 |
+
<div class="p-6">
|
| 228 |
+
<span class="text-xs text-blue-600 font-medium">PROCESS • April 15, 2023</span>
|
| 229 |
+
<h3 class="text-xl font-semibold text-gray-800 my-3">My Design Workflow</h3>
|
| 230 |
+
<p class="text-gray-600 mb-4">The tools and methods I use to go from concept to production.</p>
|
| 231 |
+
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">
|
| 232 |
+
Read more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
|
| 233 |
+
</a>
|
| 234 |
+
</div>
|
| 235 |
+
</div>
|
| 236 |
+
</div>
|
| 237 |
+
</div>
|
| 238 |
+
</section>
|
| 239 |
+
|
| 240 |
+
<!-- Contact Section -->
|
| 241 |
+
<section id="contact" class="py-20">
|
| 242 |
+
<div class="container mx-auto px-6 max-w-4xl">
|
| 243 |
+
<h2 class="text-3xl font-bold text-center text-gray-800 mb-6">Get In Touch</h2>
|
| 244 |
+
<p class="text-gray-600 text-center mb-12">Have a project in mind or want to collaborate? I'd love to hear from you.</p>
|
| 245 |
+
|
| 246 |
+
<form class="bg-white p-8 rounded-xl shadow-md">
|
| 247 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
| 248 |
+
<div>
|
| 249 |
+
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
|
| 250 |
+
<input type="text" id="name" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition">
|
| 251 |
+
</div>
|
| 252 |
+
<div>
|
| 253 |
+
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
|
| 254 |
+
<input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition">
|
| 255 |
+
</div>
|
| 256 |
+
</div>
|
| 257 |
+
<div class="mt-6">
|
| 258 |
+
<label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label>
|
| 259 |
+
<input type="text" id="subject" name="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition">
|
| 260 |
+
</div>
|
| 261 |
+
<div class="mt-6">
|
| 262 |
+
<label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
|
| 263 |
+
<textarea id="message" name="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition"></textarea>
|
| 264 |
+
</div>
|
| 265 |
+
<div class="mt-8">
|
| 266 |
+
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition duration-300">Send Message</button>
|
| 267 |
+
</div>
|
| 268 |
+
</form>
|
| 269 |
+
</div>
|
| 270 |
+
</section>
|
| 271 |
+
|
| 272 |
+
<!-- Footer -->
|
| 273 |
+
<footer class="bg-gray-800 text-white py-12">
|
| 274 |
+
<div class="container mx-auto px-6">
|
| 275 |
+
<div class="flex flex-col md:flex-row justify-between items-center">
|
| 276 |
+
<div class="mb-6 md:mb-0">
|
| 277 |
+
<h3 class="text-2xl font-bold mb-2">PixelPort</h3>
|
| 278 |
+
<p class="text-gray-400">Creating digital experiences that matter.</p>
|
| 279 |
+
</div>
|
| 280 |
+
<div class="flex space-x-6">
|
| 281 |
+
<a href="#" class="text-gray-400 hover:text-white transition duration-300">
|
| 282 |
+
<i data-feather="github"></i>
|
| 283 |
+
</a>
|
| 284 |
+
<a href="#" class="text-gray-400 hover:text-white transition duration-300">
|
| 285 |
+
<i data-feather="twitter"></i>
|
| 286 |
+
</a>
|
| 287 |
+
<a href="#" class="text-gray-400 hover:text-white transition duration-300">
|
| 288 |
+
<i data-feather="linkedin"></i>
|
| 289 |
+
</a>
|
| 290 |
+
<a href="#" class="text-gray-400 hover:text-white transition duration-300">
|
| 291 |
+
<i data-feather="dribbble"></i>
|
| 292 |
+
</a>
|
| 293 |
+
</div>
|
| 294 |
+
</div>
|
| 295 |
+
<div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
|
| 296 |
+
<p class="text-gray-400 mb-4 md:mb-0">© 2023 PixelPort. All rights reserved.</p>
|
| 297 |
+
<div class="flex space-x-6">
|
| 298 |
+
<a href="#" class="text-gray-400 hover:text-white transition duration-300">Privacy Policy</a>
|
| 299 |
+
<a href="#" class="text-gray-400 hover:text-white transition duration-300">Terms of Service</a>
|
| 300 |
+
</div>
|
| 301 |
+
</div>
|
| 302 |
+
</div>
|
| 303 |
+
</footer>
|
| 304 |
+
|
| 305 |
+
<script>
|
| 306 |
+
// Initialize Feather Icons
|
| 307 |
+
feather.replace();
|
| 308 |
+
|
| 309 |
+
// Mobile menu toggle
|
| 310 |
+
document.querySelector('button[aria-label="Mobile menu"]').addEventListener('click', function() {
|
| 311 |
+
const menu = document.querySelector('.mobile-menu');
|
| 312 |
+
menu.classList.toggle('hidden');
|
| 313 |
+
});
|
| 314 |
+
|
| 315 |
+
// Smooth scrolling for anchor links
|
| 316 |
+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
| 317 |
+
anchor.addEventListener('click', function(e) {
|
| 318 |
+
e.preventDefault();
|
| 319 |
+
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
| 320 |
+
behavior: 'smooth'
|
| 321 |
+
});
|
| 322 |
+
});
|
| 323 |
+
});
|
| 324 |
+
</script>
|
| 325 |
+
</body>
|
| 326 |
</html>
|