File size: 8,214 Bytes
0fc2563 |
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 142 143 144 145 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project Title | Oskar L.K</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
</head>
<body class="bg-gray-50 text-gray-800">
<custom-navbar></custom-navbar>
<main class="pt-20 pb-16">
<!-- Project Header -->
<section class="relative bg-black text-white">
<div class="absolute inset-0 bg-gradient-to-b from-black/30 to-black/70"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32 relative z-10">
<div class="flex items-center mb-4">
<span class="bg-red-600 text-white px-3 py-1 rounded-full text-sm font-bold flex items-center">
<i data-feather="cpu" class="w-4 h-4 mr-2"></i>
Game Project
</span>
</div>
<h1 class="text-4xl md:text-6xl font-bold mb-6">Project Title</h1>
<p class="text-xl md:text-2xl max-w-3xl mb-8">A short tagline or description of the project that explains what it's about</p>
<div class="flex flex-wrap gap-4">
<div class="bg-white/20 px-4 py-2 rounded-full">
<p class="text-sm">Unity</p>
</div>
<div class="bg-white/20 px-4 py-2 rounded-full">
<p class="text-sm">C#</p>
</div>
<div class="bg-white/20 px-4 py-2 rounded-full">
<p class="text-sm">2023</p>
</div>
</div>
</div>
<img src="http://static.photos/gaming/1200x630/42" alt="Project Header" class="absolute inset-0 w-full h-full object-cover -z-10">
</section>
<!-- Project Content -->
<section class="py-16">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="prose lg:prose-xl">
<h2 class="text-3xl font-bold mb-6">About the Project</h2>
<p>This is where you can provide a detailed description of your project. Talk about the inspiration behind it, the development process, challenges you faced, and solutions you implemented.</p>
<h3 class="text-2xl font-bold mt-10 mb-4">Development Process</h3>
<p>Describe your workflow, tools used, and any interesting technical aspects. You might want to include:</p>
<ul>
<li>Game design decisions</li>
<li>Technical challenges and solutions</li>
<li>Art style choices</li>
<li>Prototyping process</li>
</ul>
<!-- Image Gallery Section -->
<div class="mt-12">
<h3 class="text-2xl font-bold mb-6">Gallery</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-gray-100 rounded-xl overflow-hidden">
<img src="http://static.photos/gaming/640x360/101" alt="Screenshot 1" class="w-full h-auto">
<p class="p-4 text-sm text-gray-600">Caption for the screenshot</p>
</div>
<div class="bg-gray-100 rounded-xl overflow-hidden">
<img src="http://static.photos/gaming/640x360/102" alt="Screenshot 2" class="w-full h-auto">
<p class="p-4 text-sm text-gray-600">Caption for the screenshot</p>
</div>
<div class="bg-gray-100 rounded-xl overflow-hidden md:col-span-2">
<img src="http://static.photos/gaming/1024x576/103" alt="Screenshot 3" class="w-full h-auto">
<p class="p-4 text-sm text-gray-600">Wide screenshot showing gameplay</p>
</div>
</div>
</div>
<!-- Video Section -->
<div class="mt-12">
<h3 class="text-2xl font-bold mb-6">Gameplay Video</h3>
<div class="aspect-w-16 aspect-h-9 bg-gray-200 rounded-xl overflow-hidden">
<iframe class="w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<!-- Features Section -->
<div class="mt-12">
<h3 class="text-2xl font-bold mb-6">Key Features</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="p-6 bg-white rounded-xl shadow-sm">
<div class="flex items-center mb-4">
<div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
<i data-feather="zap" class="text-red-600"></i>
</div>
<h4 class="text-xl font-bold ml-4">Feature 1</h4>
</div>
<p>Detailed description of this feature and its importance to the project.</p>
</div>
<div class="p-6 bg-white rounded-xl shadow-sm">
<div class="flex items-center mb-4">
<div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
<i data-feather="box" class="text-red-600"></i>
</div>
<h4 class="text-xl font-bold ml-4">Feature 2</h4>
</div>
<p>Detailed description of this feature and its importance to the project.</p>
</div>
</div>
</div>
<!-- Lessons Learned -->
<div class="mt-12">
<h3 class="text-2xl font-bold mb-6">Lessons Learned</h3>
<p>Reflect on what you learned from this project, both in terms of technical skills and project management. Discuss what you would do differently next time.</p>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<section class="py-16 bg-gradient-to-r from-red-600 to-red-800 text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl font-bold mb-6">Like What You See?</h2>
<p class="text-xl mb-8 max-w-3xl mx-auto">Check out more of my projects or get in touch to discuss potential collaborations.</p>
<div class="flex flex-wrap justify-center gap-4">
<a href="projects.html" class="px-8 py-3 bg-white text-red-600 rounded-full font-medium hover:bg-gray-100 transition">
View All Projects
</a>
<a href="index.html#contact" class="px-8 py-3 border-2 border-white text-white rounded-full font-medium hover:bg-white/10 transition">
Contact Me
</a>
</div>
</div>
</section>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script>
feather.replace();
</script>
</body>
</html> |