|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>My Creative Workspace</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
|
|
} |
|
|
.workspace-card { |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
.workspace-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.tool-icon { |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
border-radius: 16px; |
|
|
font-size: 24px; |
|
|
color: white; |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
.inspiration-item { |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
height: 200px; |
|
|
border-radius: 12px; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
.inspiration-overlay { |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
background: rgba(0, 0, 0, 0.6); |
|
|
color: white; |
|
|
padding: 15px; |
|
|
transform: translateY(100%); |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
.inspiration-item:hover .inspiration-overlay { |
|
|
transform: translateY(0); |
|
|
} |
|
|
.animate-float { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
@keyframes float { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-20px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="gradient-bg min-h-screen font-sans"> |
|
|
<header class="bg-white bg-opacity-90 shadow-sm"> |
|
|
<div class="container mx-auto px-6 py-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-laptop-code text-3xl text-indigo-600 mr-3"></i> |
|
|
<h1 class="text-2xl font-bold text-gray-800">Creative Workspace</h1> |
|
|
</div> |
|
|
<nav class="hidden md:flex space-x-8"> |
|
|
<a href="#" class="text-indigo-600 font-medium">Home</a> |
|
|
<a href="#" class="text-gray-600 hover:text-indigo-600 transition">Tools</a> |
|
|
<a href="#" class="text-gray-600 hover:text-indigo-600 transition">Inspiration</a> |
|
|
<a href="#" class="text-gray-600 hover:text-indigo-600 transition">Collaboration</a> |
|
|
</nav> |
|
|
<button class="md:hidden text-gray-600"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main class="container mx-auto px-6 py-12"> |
|
|
|
|
|
<section class="flex flex-col md:flex-row items-center mb-20"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold text-gray-800 leading-tight mb-6"> |
|
|
My <span class="text-indigo-600">Creative</span> Workspace |
|
|
</h1> |
|
|
<p class="text-lg text-gray-600 mb-8"> |
|
|
A meticulously designed environment that enhances creativity, optimizes workflow, and fosters innovation. Every element is thoughtfully curated to propel both individual and collaborative success. |
|
|
</p> |
|
|
<div class="flex space-x-4"> |
|
|
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition shadow-md"> |
|
|
Explore Tools |
|
|
</button> |
|
|
<button class="border border-indigo-600 text-indigo-600 hover:bg-indigo-50 px-6 py-3 rounded-lg font-medium transition"> |
|
|
Virtual Tour |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<div class="relative w-full max-w-md"> |
|
|
<img src="https://images.unsplash.com/photo-1517502884422-41eaead166d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
|
|
alt="Workspace" |
|
|
class="rounded-xl shadow-2xl w-full h-auto animate-float"> |
|
|
<div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-lg shadow-lg"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-indigo-100 p-3 rounded-full mr-3"> |
|
|
<i class="fas fa-lightbulb text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">Daily Inspiration</p> |
|
|
<p class="font-medium">Creative Flow</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-20"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-4">Digital Toolkit</h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto"> |
|
|
State-of-the-art platforms and software that streamline my creative process and enhance productivity. |
|
|
</p> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
|
|
|
<div class="bg-white rounded-xl p-6 workspace-card"> |
|
|
<div class="tool-icon bg-gradient-to-r from-blue-500 to-blue-400"> |
|
|
<i class="fas fa-comments"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-3">Communication</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
Seamless collaboration with colleagues through advanced communication platforms. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Slack</span> |
|
|
<span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Zoom</span> |
|
|
<span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Teams</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl p-6 workspace-card"> |
|
|
<div class="tool-icon bg-gradient-to-r from-purple-500 to-purple-400"> |
|
|
<i class="fas fa-project-diagram"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-3">Project Management</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
Sophisticated systems to organize, track, and manage all creative projects. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">Trello</span> |
|
|
<span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">Asana</span> |
|
|
<span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">Jira</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl p-6 workspace-card"> |
|
|
<div class="tool-icon bg-gradient-to-r from-green-500 to-green-400"> |
|
|
<i class="fas fa-paint-brush"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-3">Design Suite</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
Professional creative software for visual design, prototyping, and asset creation. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">Figma</span> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">Adobe CC</span> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">Sketch</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl p-6 workspace-card"> |
|
|
<div class="tool-icon bg-gradient-to-r from-red-500 to-red-400"> |
|
|
<i class="fas fa-code"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-3">Development</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
Powerful coding environments and version control for technical implementation. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="bg-red-100 text-red-800 text-xs px-3 py-1 rounded-full">VS Code</span> |
|
|
<span class="bg-red-100 text-red-800 text-xs px-3 py-1 rounded-full">GitHub</span> |
|
|
<span class="bg-red-100 text-red-800 text-xs px-3 py-1 rounded-full">Docker</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-20"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-4">Creative Inspiration</h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto"> |
|
|
Elements in my workspace that ignite creativity and foster innovative thinking. |
|
|
</p> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="inspiration-item" style="background-image: url('https://images.unsplash.com/photo-1454165804606-3cfe5a5a570a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')"> |
|
|
<div class="inspiration-overlay"> |
|
|
<h3 class="font-bold text-lg">Minimalist Design</h3> |
|
|
<p class="text-sm">Clean, distraction-free environment for focused creativity</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="inspiration-item" style="background-image: url('https://images.unsplash.com/photo-1513542789411-b6a5d4f31634?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80')"> |
|
|
<div class="inspiration-overlay"> |
|
|
<h3 class="font-bold text-lg">Natural Elements</h3> |
|
|
<p class="text-sm">Plants and natural light to boost mood and creativity</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="inspiration-item" style="background-image: url('https://images.unsplash.com/photo-1452421822248-d4c2b47f0c81?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80')"> |
|
|
<div class="inspiration-overlay"> |
|
|
<h3 class="font-bold text-lg">Inspiration Board</h3> |
|
|
<p class="text-sm">Visual collection of ideas, colors, and concepts</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="flex flex-col md:flex-row"> |
|
|
<div class="md:w-1/2 p-10"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-6">Collaborative Synergy</h2> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
My workspace is designed to cultivate meaningful collaborations with colleagues and industry experts, creating a dynamic environment that drives forward-thinking advancements. |
|
|
</p> |
|
|
<ul class="space-y-4 mb-8"> |
|
|
<li class="flex items-start"> |
|
|
<div class="bg-indigo-100 p-2 rounded-full mr-4"> |
|
|
<i class="fas fa-users text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Brainstorming Sessions</h4> |
|
|
<p class="text-gray-600 text-sm">Interactive whiteboards for collective ideation</p> |
|
|
</div> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<div class="bg-indigo-100 p-2 rounded-full mr-4"> |
|
|
<i class="fas fa-share-alt text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Seamless Sharing</h4> |
|
|
<p class="text-gray-600 text-sm">Instant access to resources and files</p> |
|
|
</div> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<div class="bg-indigo-100 p-2 rounded-full mr-4"> |
|
|
<i class="fas fa-comment-dots text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Real-time Feedback</h4> |
|
|
<p class="text-gray-600 text-sm">Quick iterations with immediate input</p> |
|
|
</div> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition shadow-md"> |
|
|
Connect With Me |
|
|
</button> |
|
|
</div> |
|
|
<div class="md:w-1/2 bg-indigo-50 flex items-center justify-center p-10"> |
|
|
<img src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
|
|
alt="Collaboration" |
|
|
class="rounded-lg shadow-md w-full h-auto"> |
|
|
|
|
|
</html> |
|
|
|
