| <!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> |
|
|
