Skip to content

Commit

Permalink
Merge pull request #116 from UjjawalGu/main
Browse files Browse the repository at this point in the history 
fix: Added transition on hover
  • Loading branch information
@jofftiquez
jofftiquez authored Oct 6, 2023
2 parents 470ca5e + aff0d70 commit 230d985
Showing 1 changed file with 225 additions and 115 deletions.
340 changes: 225 additions & 115 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,129 +1,239 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="OSSPH Freefolio" />
<meta property="og:description" content="100% FREE Professional Portfolio Templates" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://i.postimg.cc/85rXg2LD/oss-ph-og.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image:alt" content="OSSPH Freefolio">
<meta name="twitter:title" content="OSSPH Freefolio" />
<meta name="twitter:description" content="100% FREE Professional Portfolio Templates" />
<title>Freefolio by OSSPH</title>
<link rel="shortcut icon" href="./clean/img/logo.svg" type="image/x-icon">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link href="./index.css" rel="stylesheet">
</head>

<body class="bg-violet-200 text-violet-800">


<header class="bg-violet-500">
<div class="container mx-auto px-5 py-8 flex flex-row flex-wrap gap-4 justify-between items-center">
<a href="https://ossph.org/" target="_blank" rel="noopener"><img class="h-14" src="./images/osslogo-text-white.png"
alt="OSSPH logo"></a>
<div class="flex items-center gap-4">
<h1 class="text-violet-900 text-3xl lg:text-5xl font-black">
Freefolio
</h1>
<div class="bg-red-100 h-[10px] w-[10px] rounded-full"></div>
<a href="https://github.com/OSSPhilippines/freefolio" class="text-violet-900 text-3xl lg:text-5xl font-black">
GitHub
</a>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:title" content="OSSPH Freefolio" />
<meta
property="og:description"
content="100% FREE Professional Portfolio Templates"
/>
<meta property="og:type" content="website" />
<meta
property="og:image"
content="https://i.postimg.cc/85rXg2LD/oss-ph-og.png"
/>
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image:alt" content="OSSPH Freefolio" />
<meta name="twitter:title" content="OSSPH Freefolio" />
<meta
name="twitter:description"
content="100% FREE Professional Portfolio Templates"
/>
<title>Freefolio by OSSPH</title>
<link rel="shortcut icon" href="./clean/img/logo.svg" type="image/x-icon" />
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
<script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-violet-200 text-violet-800">
<header class="bg-violet-500">
<div
class="container mx-auto px-5 py-8 flex flex-row flex-wrap gap-4 justify-between items-center"
>
<a href="https://ossph.org/" target="_blank"
><img
class="h-14"
src="./images/osslogo-text-white.png"
alt="OSSPH logo"
/></a>
<div class="flex items-center gap-4">
<h1 class="text-violet-900 text-3xl lg:text-5xl font-black">
Freefolio
</h1>
<div class="bg-red-100 h-[10px] w-[10px] rounded-full"></div>
<a
href="https://github.com/OSSPhilippines/freefolio"
class="text-violet-900 text-3xl lg:text-5xl font-black"
>
GitHub
</a>
</div>
</div>
</div>
</header>

<main>
<div class="container mx-auto px-5 py-24 grid md:grid-cols-2 gap-12">



<a href="hacker" class="relative bottom-0 hover:bottom-2 transition-all" target="_blank" data-aos="fade-up">
<img src="./images/hacker.png" alt="Hacker folio" class="rounded-md shadow object-cover aspect-video">
<h2 class="text-3xl font-bold mt-2">Hacker</h2>
</a>

<a href="indify" class="relative bottom-0 hover:bottom-2 transition-all" target="_blank" data-aos="fade-up">
<img src="./images/indify.png" alt="Indify folio" class="rounded-md shadow object-cover w-full aspect-video">
<h2 class="text-3xl font-bold mt-2">Indify</h2>
</a>

<a href="plain" class="relative bottom-0 hover:bottom-2 transition-all" target="_blank" data-aos="fade-up">
<img src="./images/plain.png" alt="Plain folio" class="rounded-md shadow object-cover w-full aspect-video">
<h2 class="text-3xl font-bold mt-2">Plain</h2>
</a>

<a href="clean" class="relative bottom-0 hover:bottom-2 transition-all" target="_blank" data-aos="fade-up">
<img src="./images/clean.png" alt="Clean folio" class="rounded-md shadow object-cover w-full aspect-video">
<h2 class="text-3xl font-bold mt-2">Clean</h2>
</a>

<a href="beginner" class="relative bottom-0 hover:bottom-2 transition-all" target="_blank" data-aos="fade-up">
<img src="./images/beginner.png" alt="Beginner folio"
class="rounded-md shadow object-cover w-full aspect-video">
<h2 class="text-3xl font-bold mt-2">Beginner</h2>
</a>

<a href="outlines" class="relative bottom-0 hover:bottom-2 transition-all" target="_blank" data-aos="fade-up">
<img src="./images/outlines.png" alt="Outlines folio"
class="rounded-md shadow object-cover w-full aspect-video">
<h2 class="text-3xl font-bold mt-2">Outlines</h2>
</a>
</header>

<main>
<div class="container mx-auto px-5 py-24 grid md:grid-cols-2 gap-12">
<a
href="hacker"
class="relative bottom-0 hover:bottom-2 hover:transition-all"
target="_blank"
data-aos="fade-up"
>
<img
src="./images/hacker.png"
alt="Hacker folio"
class="rounded-md shadow object-cover aspect-video"
/>
<h2 class="text-3xl font-bold mt-2">Hacker</h2>
</a>

<a href="simple" class="relative bottom-0 hover:bottom-2 transition-all" target="_blank" data-aos="fade-up">
<img src="./images/simple.PNG" alt="Simple folio" class="rounded-md shadow object-cover w-full aspect-video">
<h2 class="text-3xl font-bold mt-2">Simple</h2>
</a>
<a
href="indify"
class="relative bottom-0 hover:bottom-2 hover:transition-all"
target="_blank"
data-aos="fade-up"
>
<img
src="./images/indify.png"
alt="Indify folio img"
class="rounded-md shadow object-cover w-full aspect-video"
/>
<h2 class="text-3xl font-bold mt-2">Indify</h2>
</a>

<a href="deepsea" class="relative bottom-0 hover:bottom-2 transition-all" target="_blank" data-aos="fade-up">
<img src="./images/deepsea.png" alt="Deepsea folio" class="rounded-md shadow object-cover w-full aspect-video">
<h2 class="text-3xl font-bold mt-2">Deep Sea</h2>
</a>
<a
href="plain"
class="relative bottom-0 hover:bottom-2 hover:transition-all"
target="_blank"
data-aos="fade-up"
>
<img
src="./images/plain.png"
alt="Plain folio"
class="rounded-md shadow object-cover w-full aspect-video"
/>
<h2 class="text-3xl font-bold mt-2">Plain</h2>
</a>

<a href="dark-hack" class="relative bottom-0 hover:bottom-2 transition-all" target="_blank" data-aos="fade-up">
<img src="./images/dark-hack.png" alt="Dark Hack folio"
class="rounded-md shadow object-cover w-full aspect-video">
<h2 class="text-3xl font-bold mt-2">Dark Hack</h2>
</a>
<a
href="clean"
class="relative bottom-0 hover:bottom-2 hover:transition-all"
target="_blank"
data-aos="fade-up"
>
<img
src="./images/clean.png"
alt="Clean folio"
class="rounded-md shadow object-cover w-full aspect-video"
/>
<h2 class="text-3xl font-bold mt-2">Clean</h2>
</a>

<a href="ingolfur" class="relative bottom-0 hover:bottom-2 transition-all" target="_blank" data-aos="fade-up">
<img src="./images/ingolfur.png" alt="Ingólfur" class="rounded-md shadow object-cover w-full aspect-video">
<h2 class="text-3xl font-bold mt-2">Ingólfur</h2>
</a>
<a
href="beginner"
class="relative bottom-0 hover:bottom-2 hover:transition-all"
target="_blank"
data-aos="fade-up"
>
<img
src="./images/beginner.png"
alt="Beginner folio"
class="rounded-md shadow object-cover w-full aspect-video"
/>
<h2 class="text-3xl font-bold mt-2">Beginner</h2>
</a>

<a href="anime" class="relative bottom-0 hover:bottom-2 transition-all" target="_blank" data-aos="fade-up">
<img src="./images/anime.png" alt="Anime" class="rounded-md shadow object-cover w-full aspect-video">
<h2 class="text-3xl font-bold mt-2">Anime</h2>
</a>
<a
href="outlines"
class="relative bottom-0 hover:bottom-2 hover:transition-all"
target="_blank"
data-aos="fade-up"
>
<img
src="./images/outlines.png"
alt="Outlines folio"
class="rounded-md shadow object-cover w-full aspect-video"
/>
<h2 class="text-3xl font-bold mt-2">Outlines</h2>
</a>

<a href="easy" class="relative bottom-0 hover:bottom-2 transition-all" target="_blank" data-aos="fade-up">
<img src="./images/easy.png" alt="Anime" class="rounded-md shadow object-cover w-full aspect-video">
<h2 class="text-3xl font-bold mt-2">easy</h2>
</a>
<a
href="simple"
class="relative bottom-0 hover:bottom-2 hover:transition-all"
target="_blank"
data-aos="fade-up"
>
<img
src="./images/simple.PNG"
alt="Simple folio"
class="rounded-md shadow object-cover w-full aspect-video"
/>
<h2 class="text-3xl font-bold mt-2">Simple</h2>
</a>

<a href="classic" class="relative bottom-0 hover:bottom-2 transition-all" target="_blank" data-aos="fade-up">
<img src="./images/classic.png" alt="Classic" class="rounded-md shadow object-cover w-full aspect-video">
<h2 class="text-3xl font-bold mt-2">Classic</h2>
</a>
<a
href="deepsea"
class="relative bottom-0 hover:bottom-2 hover:transition-all"
target="_blank"
data-aos="fade-up"
>
<img
src="./images/deepsea.png"
alt="Deepsea folio"
class="rounded-md shadow object-cover w-full aspect-video"
/>
<h2 class="text-3xl font-bold mt-2">Deep Sea</h2>
</a>

</div>
</main>
<a
href="dark-hack"
class="relative bottom-0 hover:bottom-2 hover:transition-all"
target="_blank"
data-aos="fade-up"
>
<img
src="./images/dark-hack.png"
alt="Dark Hack folio"
class="rounded-md shadow object-cover w-full aspect-video"
/>
<h2 class="text-3xl font-bold mt-2">Dark Hack</h2>
</a>

<a
href="ingolfur"
class="relative bottom-0 hover:bottom-2 hover:transition-all"
target="_blank"
data-aos="fade-up"
>
<img
src="./images/ingolfur.png"
alt="Ingólfur"
class="rounded-md shadow object-cover w-full aspect-video"
/>
<h2 class="text-3xl font-bold mt-2">Ingólfur</h2>
</a>

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init({
once: true,
delay: 0
});
</script>
</body>
<a
href="anime"
class="relative bottom-0 hover:bottom-2 hover:transition-all"
target="_blank"
data-aos="fade-up"
>
<img
src="./images/anime.png"
alt="Anime"
class="rounded-md shadow object-cover w-full aspect-video"
/>
<h2 class="text-3xl font-bold mt-2">Anime</h2>
</a>

</html>
<a
href="easy"
class="relative bottom-0 hover:bottom-2 hover:transition-all"
target="_blank"
data-aos="fade-up"
>
<img
src="./images/easy.png"
alt="Anime"
class="rounded-md shadow object-cover w-full aspect-video"
/>
<h2 class="text-3xl font-bold mt-2">easy</h2>
</a>
</div>
</main>

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init({
once: true,
delay: 0,
});
</script>
</body>
</html>

0 comments on commit 230d985

Please sign in to comment.