File size: 8,004 Bytes
67939f8 c00ec19 67939f8 3f8c0f2 67939f8 3f8c0f2 67939f8 d78267e 67939f8 d78267e 67939f8 3f8c0f2 67939f8 3f8c0f2 67939f8 3f8c0f2 67939f8 3f8c0f2 67939f8 3f8c0f2 13b6b21 3f8c0f2 67939f8 3f8c0f2 67939f8 3f8c0f2 13b6b21 3f8c0f2 67939f8 3f8c0f2 67939f8 3f8c0f2 13b6b21 3f8c0f2 67939f8 3f8c0f2 67939f8 |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All Projects | 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">
<section class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 class="text-4xl font-bold text-center mb-12">All Projects</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Game Projects -->
<div class="project-card bg-white rounded-xl overflow-hidden shadow-lg h-full relative">
<div class="absolute top-4 right-4 bg-red-500 text-white px-3 py-1 rounded-full text-xs font-bold flex items-center">
<i data-feather="cpu" class="w-3 h-3 mr-1"></i> Game
</div>
<img src="https://static.wixstatic.com/media/6588f2_d9fdecb14bfc48ac99bd5efed3e1b054~mv2.png" alt="Bap Cat" class="w-full h-48 object-cover">
<div class="p-6">
<h2 class="text-2xl font-bold mb-2">Bap Cat</h2>
<h3 class="text-xl font-semibold mb-2">A game about a cat spreading chaos</h3>
<p class="text-gray-600 mb-4">Why? Simply because it wants to spend more time with their owner.</p>
<a href="BapCatProject.html" class="text-red-600 hover:text-red-800 font-medium inline-flex items-center">
View Project
<i data-feather="arrow-right" class="ml-2"></i>
</a>
</div>
</div>
<div class="project-card bg-white rounded-xl overflow-hidden shadow-lg h-full relative">
<div class="absolute top-4 right-4 bg-red-500 text-white px-3 py-1 rounded-full text-xs font-bold flex items-center">
<i data-feather="cpu" class="w-3 h-3 mr-1"></i> Game
</div>
<img src="http://static.photos/gaming/640x360/101" alt="Mech Warrior" class="w-full h-48 object-cover">
<div class="p-6">
<h2 class="text-2xl font-bold mb-2">Mech Warrior</h2>
<h3 class="text-xl font-semibold mb-2">Epic mech battles</h3>
<p class="text-gray-600 mb-4">Strategic combat game with customizable mech units</p>
<a href="#" class="text-red-600 hover:text-red-800 font-medium inline-flex items-center">
View Project
<i data-feather="arrow-right" class="ml-2"></i>
</a>
</div>
</div>
<div class="project-card bg-white rounded-xl overflow-hidden shadow-lg h-full relative">
<div class="absolute top-4 right-4 bg-red-500 text-white px-3 py-1 rounded-full text-xs font-bold flex items-center">
<i data-feather="cpu" class="w-3 h-3 mr-1"></i> Game
</div>
<img src="http://static.photos/gaming/640x360/102" alt="Pixel Adventure" class="w-full h-48 object-cover">
<div class="p-6">
<h2 class="text-2xl font-bold mb-2">Pixel Adventure</h2>
<h3 class="text-xl font-semibold mb-2">Retro-style platformer</h3>
<p class="text-gray-600 mb-4">Explore a vibrant pixel world full of secrets</p>
<a href="#" class="text-red-600 hover:text-red-800 font-medium inline-flex items-center">
View Project
<i data-feather="arrow-right" class="ml-2"></i>
</a>
</div>
</div>
<!-- Art Projects -->
<div class="project-card bg-white rounded-xl overflow-hidden shadow-lg h-full relative">
<div class="absolute top-4 right-4 bg-red-500 text-white px-3 py-1 rounded-full text-xs font-bold flex items-center">
<i data-feather="image" class="w-3 h-3 mr-1"></i> Art
</div>
<img src="https://static.wixstatic.com/media/6588f2_24e4126d37144f21863c7c78faba9f93~mv2.jpg" alt="The Fireflies Night" class="w-full h-48 object-cover">
<div class="p-6">
<h2 class="text-2xl font-bold mb-2">The Fireflies Night</h2>
<h3 class="text-xl font-semibold mb-2">Moonlight house illustration</h3>
<p class="text-gray-600 mb-4">Where fireflies lead weary travelers to its doors.</p>
<a href="#" class="text-red-600 hover:text-red-800 font-medium inline-flex items-center">
View Project
<i data-feather="arrow-right" class="ml-2"></i>
</a>
</div>
</div>
<div class="project-card bg-white rounded-xl overflow-hidden shadow-lg h-full relative">
<div class="absolute top-4 right-4 bg-red-500 text-white px-3 py-1 rounded-full text-xs font-bold flex items-center">
<i data-feather="image" class="w-3 h-3 mr-1"></i> Art
</div>
<img src="http://static.photos/art/640x360/42" alt="Concept Art Collection" class="w-full h-48 object-cover">
<div class="p-6">
<h2 class="text-2xl font-bold mb-2">Concept Art</h2>
<h3 class="text-xl font-semibold mb-2">Stylized characters</h3>
<p class="text-gray-600 mb-4">Character concepts for fantasy RPG</p>
<a href="#" class="text-red-600 hover:text-red-800 font-medium inline-flex items-center">
View Project
<i data-feather="arrow-right" class="ml-2"></i>
</a>
</div>
</div>
<div class="project-card bg-white rounded-xl overflow-hidden shadow-lg h-full relative">
<div class="absolute top-4 right-4 bg-red-500 text-white px-3 py-1 rounded-full text-xs font-bold flex items-center">
<i data-feather="image" class="w-3 h-3 mr-1"></i> Art
</div>
<img src="http://static.photos/art/640x360/43" alt="Environment Art" class="w-full h-48 object-cover">
<div class="p-6">
<h2 class="text-2xl font-bold mb-2">Environment Art</h2>
<h3 class="text-xl font-semibold mb-2">Fantasy landscapes</h3>
<p class="text-gray-600 mb-4">Magical environments and world-building</p>
<a href="#" class="text-red-600 hover:text-red-800 font-medium inline-flex items-center">
View Project
<i data-feather="arrow-right" class="ml-2"></i>
</a>
</div>
</div>
</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> |