-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
75 lines (66 loc) · 3.54 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Portfolio Website</title>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body class="bg-gradient-to-br from-purple-800 to-blue-500 bg-fixed">
<!-- Header section -->
<header class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center py-4 text-white">
<div>
<h1 class="text-2xl font-bold">Logo</h1>
</div>
<nav class="flex items-center space-x-4">
<a href="/" class=" hover:text-gray-900 font-medium">Home</a>
<a href="/project.html" class=" hover:text-gray-900 font-medium">Projects</a>
<a href="#" class=" hover:text-gray-900 font-medium">Contact</a>
<a href="#" class=" hover:text-gray-900 font-medium">Blog</a>
</nav>
</header>
<div class="container">
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
</div>
<main>
<div class="h-4 w-4 bg-gray-400 transform rotate-45 absolute left-[2rem] top-20"></div>
<section
class="max-w-7xl mt-20 mx-auto px-4 sm:px-6 lg:px-8 py-20 border-white border-2 border-x-[2rem] border-y-[1rem] rounded-xl">
<div class=" text-center">
<h1
class="bg-white p-4 rounded-lg w-auto inline-block mb-5 px-10 text-black text-6xl font-bold uppercase ">
SAKIB Ahmed</h1>
<p class="text- text-lg">Frontend Developer | WordPress expert</p>
</div>
</section>
<div class="h-4 w-4 bg-gray-400 transform rotate-45 absolute right-[2rem] top-20"></div>
<div class="w-0 h-0 border-t-8 border-r-4 border-b-8 border-l-4 border-blue-400 transform rotate-45 absolute right-10 top-40 right-[50%]"></div>
<div class="w-0 h-0 border-t-8 border-r-4 border-b-8 border-l-4 border-blue-700 transform rotate-45 absolute right-10 top-60 right-[20%]"></div>
<div class="w-0 h-0 border-t-8 border-r-4 border-b-8 border-l-4 border-blue-400 transform rotate-45 absolute right-10 top-40 right-[50%]"></div>
<div class="h-8 bottom-10 left-20 w-8 bg-gray-400 rounded-full absolute"></div>
<div class="w-2 h-12 border-t-4 border-r-4 border-b-0 border-l-4 border-gray-400 transform rotate-45 absolute right-10"></div>
<div class="h-4 w-4 bg-gray-400 transform rotate-45 absolute"></div>
<div class="h-4 w-4 bg-gray-400 transform -rotate-45 absolute"></div>
<div class="h-1 w-6 left-[49.6%] top-[51%] bg-violet-900 absolute"></div>
<div class="h-6 w-1 left-[50%] top-[50%] bg-violet-900 absolute"></div>
<div class="h-4 top-10 left-[30%] w-4 absolute">
<div class="h-full w-full transform rotate-45">
<div class="h-full w-full transform -rotate-90 skew-45 bg-purple-100"></div>
<div class="h-full w-full transform rotate-90 skew-45 bg-purple-100"></div>
</div>
</div>
<div id="shapes-container" class="relative w-full h-screen overflow-hidden">
<div class="shape shape-1"></div>
<div class="shape shape-2"></div>
<div class="shape shape-3"></div>
<div class="shape shape-4"></div>
</div>
</main>
<!-- Banner section -->
<!-- Your content here -->
</body>
</html>