Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Added transition on hover #116

Merged
merged 2 commits into from
Oct 6, 2023
Merged

fix: Added transition on hover #116

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8fdf842
fix
Ujjwal807 Oct 3, 2023
aff0d70
Merge branch 'main' into main
Ujjwal807 Oct 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
340 changes: 225 additions & 115 deletions index.html
View file
Open in desktop
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/[email protected]/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/[email protected]/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>