Skip to content

Commit 230d985

Browse files
jofftiquezjofftiquez
authored
Merge pull request #116 from UjjawalGu/main
fix: Added transition on hover
2 parents 470ca5e + aff0d70 commit 230d985

File tree

1 file changed

+225
-115
lines changed

1 file changed

+225
-115
lines changed

‎index.html

+225-115
Original file line numberDiff line numberDiff line change
@@ -1,129 +1,239 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
4-
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<meta property="og:title" content="OSSPH Freefolio" />
8-
<meta property="og:description" content="100% FREE Professional Portfolio Templates" />
9-
<meta property="og:type" content="website" />
10-
<meta property="og:image" content="https://i.postimg.cc/85rXg2LD/oss-ph-og.png" />
11-
<meta property="og:image:type" content="image/png" />
12-
<meta property="og:image:width" content="1200" />
13-
<meta property="og:image:height" content="630" />
14-
<meta name="twitter:card" content="summary_large_image" />
15-
<meta name="twitter:image:alt" content="OSSPH Freefolio">
16-
<meta name="twitter:title" content="OSSPH Freefolio" />
17-
<meta name="twitter:description" content="100% FREE Professional Portfolio Templates" />
18-
<title>Freefolio by OSSPH</title>
19-
<link rel="shortcut icon" href="./clean/img/logo.svg" type="image/x-icon">
20-
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
21-
<link href="./index.css" rel="stylesheet">
22-
</head>
23-
24-
<body class="bg-violet-200 text-violet-800">
25-
26-
27-
<header class="bg-violet-500">
28-
<div class="container mx-auto px-5 py-8 flex flex-row flex-wrap gap-4 justify-between items-center">
29-
<a href="https://ossph.org/" target="_blank" rel="noopener"><img class="h-14" src="./images/osslogo-text-white.png"
30-
alt="OSSPH logo"></a>
31-
<div class="flex items-center gap-4">
32-
<h1 class="text-violet-900 text-3xl lg:text-5xl font-black">
33-
Freefolio
34-
</h1>
35-
<div class="bg-red-100 h-[10px] w-[10px] rounded-full"></div>
36-
<a href="https://github.com/OSSPhilippines/freefolio" class="text-violet-900 text-3xl lg:text-5xl font-black">
37-
GitHub
38-
</a>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta property="og:title" content="OSSPH Freefolio" />
8+
<meta
9+
property="og:description"
10+
content="100% FREE Professional Portfolio Templates"
11+
/>
12+
<meta property="og:type" content="website" />
13+
<meta
14+
property="og:image"
15+
content="https://i.postimg.cc/85rXg2LD/oss-ph-og.png"
16+
/>
17+
<meta property="og:image:type" content="image/png" />
18+
<meta property="og:image:width" content="1200" />
19+
<meta property="og:image:height" content="630" />
20+
<meta name="twitter:card" content="summary_large_image" />
21+
<meta name="twitter:image:alt" content="OSSPH Freefolio" />
22+
<meta name="twitter:title" content="OSSPH Freefolio" />
23+
<meta
24+
name="twitter:description"
25+
content="100% FREE Professional Portfolio Templates"
26+
/>
27+
<title>Freefolio by OSSPH</title>
28+
<link rel="shortcut icon" href="./clean/img/logo.svg" type="image/x-icon" />
29+
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet" />
30+
<script src="https://cdn.tailwindcss.com"></script>
31+
</head>
32+
33+
<body class="bg-violet-200 text-violet-800">
34+
<header class="bg-violet-500">
35+
<div
36+
class="container mx-auto px-5 py-8 flex flex-row flex-wrap gap-4 justify-between items-center"
37+
>
38+
<a href="https://ossph.org/" target="_blank"
39+
><img
40+
class="h-14"
41+
src="./images/osslogo-text-white.png"
42+
alt="OSSPH logo"
43+
/></a>
44+
<div class="flex items-center gap-4">
45+
<h1 class="text-violet-900 text-3xl lg:text-5xl font-black">
46+
Freefolio
47+
</h1>
48+
<div class="bg-red-100 h-[10px] w-[10px] rounded-full"></div>
49+
<a
50+
href="https://github.com/OSSPhilippines/freefolio"
51+
class="text-violet-900 text-3xl lg:text-5xl font-black"
52+
>
53+
GitHub
54+
</a>
55+
</div>
3956
</div>
40-
</div>
41-
</header>
42-
43-
<main>
44-
<div class="container mx-auto px-5 py-24 grid md:grid-cols-2 gap-12">
45-
46-
47-
48-
<a href="hacker" class="relative bottom-0 hover:bottom-2 transition-all" target="_blank" data-aos="fade-up">
49-
<img src="./images/hacker.png" alt="Hacker folio" class="rounded-md shadow object-cover aspect-video">
50-
<h2 class="text-3xl font-bold mt-2">Hacker</h2>
51-
</a>
52-
53-
<a href="indify" class="relative bottom-0 hover:bottom-2 transition-all" target="_blank" data-aos="fade-up">
54-
<img src="./images/indify.png" alt="Indify folio" class="rounded-md shadow object-cover w-full aspect-video">
55-
<h2 class="text-3xl font-bold mt-2">Indify</h2>
56-
</a>
57-
58-
<a href="plain" class="relative bottom-0 hover:bottom-2 transition-all" target="_blank" data-aos="fade-up">
59-
<img src="./images/plain.png" alt="Plain folio" class="rounded-md shadow object-cover w-full aspect-video">
60-
<h2 class="text-3xl font-bold mt-2">Plain</h2>
61-
</a>
62-
63-
<a href="clean" class="relative bottom-0 hover:bottom-2 transition-all" target="_blank" data-aos="fade-up">
64-
<img src="./images/clean.png" alt="Clean folio" class="rounded-md shadow object-cover w-full aspect-video">
65-
<h2 class="text-3xl font-bold mt-2">Clean</h2>
66-
</a>
67-
68-
<a href="beginner" class="relative bottom-0 hover:bottom-2 transition-all" target="_blank" data-aos="fade-up">
69-
<img src="./images/beginner.png" alt="Beginner folio"
70-
class="rounded-md shadow object-cover w-full aspect-video">
71-
<h2 class="text-3xl font-bold mt-2">Beginner</h2>
72-
</a>
73-
74-
<a href="outlines" class="relative bottom-0 hover:bottom-2 transition-all" target="_blank" data-aos="fade-up">
75-
<img src="./images/outlines.png" alt="Outlines folio"
76-
class="rounded-md shadow object-cover w-full aspect-video">
77-
<h2 class="text-3xl font-bold mt-2">Outlines</h2>
78-
</a>
57+
</header>
58+
59+
<main>
60+
<div class="container mx-auto px-5 py-24 grid md:grid-cols-2 gap-12">
61+
<a
62+
href="hacker"
63+
class="relative bottom-0 hover:bottom-2 hover:transition-all"
64+
target="_blank"
65+
data-aos="fade-up"
66+
>
67+
<img
68+
src="./images/hacker.png"
69+
alt="Hacker folio"
70+
class="rounded-md shadow object-cover aspect-video"
71+
/>
72+
<h2 class="text-3xl font-bold mt-2">Hacker</h2>
73+
</a>
7974

80-
<a href="simple" class="relative bottom-0 hover:bottom-2 transition-all" target="_blank" data-aos="fade-up">
81-
<img src="./images/simple.PNG" alt="Simple folio" class="rounded-md shadow object-cover w-full aspect-video">
82-
<h2 class="text-3xl font-bold mt-2">Simple</h2>
83-
</a>
75+
<a
76+
href="indify"
77+
class="relative bottom-0 hover:bottom-2 hover:transition-all"
78+
target="_blank"
79+
data-aos="fade-up"
80+
>
81+
<img
82+
src="./images/indify.png"
83+
alt="Indify folio img"
84+
class="rounded-md shadow object-cover w-full aspect-video"
85+
/>
86+
<h2 class="text-3xl font-bold mt-2">Indify</h2>
87+
</a>
8488

85-
<a href="deepsea" class="relative bottom-0 hover:bottom-2 transition-all" target="_blank" data-aos="fade-up">
86-
<img src="./images/deepsea.png" alt="Deepsea folio" class="rounded-md shadow object-cover w-full aspect-video">
87-
<h2 class="text-3xl font-bold mt-2">Deep Sea</h2>
88-
</a>
89+
<a
90+
href="plain"
91+
class="relative bottom-0 hover:bottom-2 hover:transition-all"
92+
target="_blank"
93+
data-aos="fade-up"
94+
>
95+
<img
96+
src="./images/plain.png"
97+
alt="Plain folio"
98+
class="rounded-md shadow object-cover w-full aspect-video"
99+
/>
100+
<h2 class="text-3xl font-bold mt-2">Plain</h2>
101+
</a>
89102

90-
<a href="dark-hack" class="relative bottom-0 hover:bottom-2 transition-all" target="_blank" data-aos="fade-up">
91-
<img src="./images/dark-hack.png" alt="Dark Hack folio"
92-
class="rounded-md shadow object-cover w-full aspect-video">
93-
<h2 class="text-3xl font-bold mt-2">Dark Hack</h2>
94-
</a>
103+
<a
104+
href="clean"
105+
class="relative bottom-0 hover:bottom-2 hover:transition-all"
106+
target="_blank"
107+
data-aos="fade-up"
108+
>
109+
<img
110+
src="./images/clean.png"
111+
alt="Clean folio"
112+
class="rounded-md shadow object-cover w-full aspect-video"
113+
/>
114+
<h2 class="text-3xl font-bold mt-2">Clean</h2>
115+
</a>
95116

96-
<a href="ingolfur" class="relative bottom-0 hover:bottom-2 transition-all" target="_blank" data-aos="fade-up">
97-
<img src="./images/ingolfur.png" alt="Ingólfur" class="rounded-md shadow object-cover w-full aspect-video">
98-
<h2 class="text-3xl font-bold mt-2">Ingólfur</h2>
99-
</a>
117+
<a
118+
href="beginner"
119+
class="relative bottom-0 hover:bottom-2 hover:transition-all"
120+
target="_blank"
121+
data-aos="fade-up"
122+
>
123+
<img
124+
src="./images/beginner.png"
125+
alt="Beginner folio"
126+
class="rounded-md shadow object-cover w-full aspect-video"
127+
/>
128+
<h2 class="text-3xl font-bold mt-2">Beginner</h2>
129+
</a>
100130

101-
<a href="anime" class="relative bottom-0 hover:bottom-2 transition-all" target="_blank" data-aos="fade-up">
102-
<img src="./images/anime.png" alt="Anime" class="rounded-md shadow object-cover w-full aspect-video">
103-
<h2 class="text-3xl font-bold mt-2">Anime</h2>
104-
</a>
131+
<a
132+
href="outlines"
133+
class="relative bottom-0 hover:bottom-2 hover:transition-all"
134+
target="_blank"
135+
data-aos="fade-up"
136+
>
137+
<img
138+
src="./images/outlines.png"
139+
alt="Outlines folio"
140+
class="rounded-md shadow object-cover w-full aspect-video"
141+
/>
142+
<h2 class="text-3xl font-bold mt-2">Outlines</h2>
143+
</a>
105144

106-
<a href="easy" class="relative bottom-0 hover:bottom-2 transition-all" target="_blank" data-aos="fade-up">
107-
<img src="./images/easy.png" alt="Anime" class="rounded-md shadow object-cover w-full aspect-video">
108-
<h2 class="text-3xl font-bold mt-2">easy</h2>
109-
</a>
145+
<a
146+
href="simple"
147+
class="relative bottom-0 hover:bottom-2 hover:transition-all"
148+
target="_blank"
149+
data-aos="fade-up"
150+
>
151+
<img
152+
src="./images/simple.PNG"
153+
alt="Simple folio"
154+
class="rounded-md shadow object-cover w-full aspect-video"
155+
/>
156+
<h2 class="text-3xl font-bold mt-2">Simple</h2>
157+
</a>
110158

111-
<a href="classic" class="relative bottom-0 hover:bottom-2 transition-all" target="_blank" data-aos="fade-up">
112-
<img src="./images/classic.png" alt="Classic" class="rounded-md shadow object-cover w-full aspect-video">
113-
<h2 class="text-3xl font-bold mt-2">Classic</h2>
114-
</a>
159+
<a
160+
href="deepsea"
161+
class="relative bottom-0 hover:bottom-2 hover:transition-all"
162+
target="_blank"
163+
data-aos="fade-up"
164+
>
165+
<img
166+
src="./images/deepsea.png"
167+
alt="Deepsea folio"
168+
class="rounded-md shadow object-cover w-full aspect-video"
169+
/>
170+
<h2 class="text-3xl font-bold mt-2">Deep Sea</h2>
171+
</a>
115172

116-
</div>
117-
</main>
173+
<a
174+
href="dark-hack"
175+
class="relative bottom-0 hover:bottom-2 hover:transition-all"
176+
target="_blank"
177+
data-aos="fade-up"
178+
>
179+
<img
180+
src="./images/dark-hack.png"
181+
alt="Dark Hack folio"
182+
class="rounded-md shadow object-cover w-full aspect-video"
183+
/>
184+
<h2 class="text-3xl font-bold mt-2">Dark Hack</h2>
185+
</a>
118186

187+
<a
188+
href="ingolfur"
189+
class="relative bottom-0 hover:bottom-2 hover:transition-all"
190+
target="_blank"
191+
data-aos="fade-up"
192+
>
193+
<img
194+
src="./images/ingolfur.png"
195+
alt="Ingólfur"
196+
class="rounded-md shadow object-cover w-full aspect-video"
197+
/>
198+
<h2 class="text-3xl font-bold mt-2">Ingólfur</h2>
199+
</a>
119200

120-
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
121-
<script>
122-
AOS.init({
123-
once: true,
124-
delay: 0
125-
});
126-
</script>
127-
</body>
201+
<a
202+
href="anime"
203+
class="relative bottom-0 hover:bottom-2 hover:transition-all"
204+
target="_blank"
205+
data-aos="fade-up"
206+
>
207+
<img
208+
src="./images/anime.png"
209+
alt="Anime"
210+
class="rounded-md shadow object-cover w-full aspect-video"
211+
/>
212+
<h2 class="text-3xl font-bold mt-2">Anime</h2>
213+
</a>
128214

129-
</html>
215+
<a
216+
href="easy"
217+
class="relative bottom-0 hover:bottom-2 hover:transition-all"
218+
target="_blank"
219+
data-aos="fade-up"
220+
>
221+
<img
222+
src="./images/easy.png"
223+
alt="Anime"
224+
class="rounded-md shadow object-cover w-full aspect-video"
225+
/>
226+
<h2 class="text-3xl font-bold mt-2">easy</h2>
227+
</a>
228+
</div>
229+
</main>
230+
231+
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
232+
<script>
233+
AOS.init({
234+
once: true,
235+
delay: 0,
236+
});
237+
</script>
238+
</body>
239+
</html>

0 commit comments

Comments
 (0)