generated from harvanchik/tailwind-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhome.html
88 lines (86 loc) · 5.32 KB
/
home.html
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
<!DOCTYPE html>
<html id="home" lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>Jake Harvanchik</title>
<link rel="stylesheet" href="/assets/styles/styles.css" />
<!-- Scripts -->
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<style>
section#about-me {
background-color: #f0f0f0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='125' height='125' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23b3b3b3' fill-opacity='0.29'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
</style>
</head>
<!-- START: Page -->
<body class="min-h-screen">
<!-- START: Header -->
<section class="bg-gradient-to-br from-cyan-400/60 via-cyan-500/80 to-cyan-500 text-white">
<!-- START: Navigation -->
<div class="layout flex flex-row justify-between border-b border-gray-100/50 pt-5 pb-5">
<!-- START: Logo -->
<div class="my-auto text-3xl font-semibold tracking-tighter">JLH</div>
<!-- END: Logo -->
<!-- START: Nav Links -->
<nav class="my-auto flex flex-row gap-x-10 tracking-tight">
<a href="#" class="text-gray-100 text-opacity-70 transition-opacity duration-200 hover:text-opacity-100">About Me</a>
<a href="#" class="text-gray-100/70 transition-opacity duration-200 hover:text-gray-100">Experience</a>
<a href="#" class="text-gray-100/70 transition-opacity duration-200 hover:text-gray-100">Projects</a>
<a href="#" class="text-gray-100/70 transition-opacity duration-200 hover:text-gray-100">Contact</a>
</nav>
<!-- END: Nav Links -->
</div>
<!-- END: Navigation -->
<!-- START: Introduction -->
<div class="layout flex flex-col">
<h1 class="flex flex-col py-52 text-white">
<span class="text-3xl font-semibold tracking-tight">Hello, World! My name is</span>
<span class="text-8xl font-extrabold uppercase tracking-tighter">Jake Harvanchik</span>
</h1>
</div>
<!-- END: Introduction -->
<!-- <div class="layout"> <h1>Jake Harvanchik</h1> </div> -->
</section>
<!-- END: Header -->
<!-- START: Header -->
<section hidden id="header" class="bg-gradient-to-b from-white/80 via-white/75 px-20 py-10 text-lg font-semibold">
<div class="layout flex max-w-[92rem] flex-row justify-between">
<!-- START: Logo -->
<div class="my-auto text-4xl">JH</div>
<!-- END: Logo -->
<!-- START: Navigation -->
<nav class="my-auto flex flex-row gap-x-12 font-handwriting text-[1.7rem]">
<a href="#">About Me</a>
<a href="#">Experience</a>
<a href="#">Contact</a>
</nav>
<!-- END: Navigation -->
</div>
</section>
<!-- END: Header -->
<!-- START: Hero -->
<section hidden id="hero" class="layout mx-auto mt-[7.8rem]">
<div class="flex flex-col">
<h1
class="bg-gradient-to-r from-blue-400 to-blue-700 bg-clip-text text-8xl font-extrabold uppercase tracking-tighter text-transparent brightness-125 text-shadow-sm">
Jake Harvanchik
</h1>
<p class="font-handwriting text-4xl font-semibold uppercase text-blue-600"> welcome to my portfolio </p>
</div>
</section>
<!-- END: Hero -->
<!-- START: About Me -->
<section hidden id="about-me" class="mt-[13rem] bg-blue-600 py-10 text-xl text-white">
<div class="layout mx-auto">
<a href="#about-me">
<h2 class="font-handwriting text-5xl uppercase">About Me</h2>
</a>
<p class="mt-2"> I am a college student majoring in Computer Science at California State University, Fullerton. </p>
</div>
</section>
<!-- END: About Me -->
</body>
<!-- END: Page -->
</html>