-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathportfolio.html
145 lines (145 loc) · 4.21 KB
/
portfolio.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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>
My Portfolio
</title>
<script src="https://cdn.tailwindcss.com">
</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"/>
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body class="bg-gray-900 text-white">
<header class="flex justify-between items-center p-6">
<div class="flex items-center space-x-2">
<i class="fas fa-code text-blue-500 text-2xl">
</i>
<span class="text-xl font-bold">
My Portfolio
</span>
</div>
<nav class="space-x-6 hidden md:flex">
<a class="hover:text-gray-400" href="#">
Home
</a>
<a class="hover:text-gray-400" href="#">
About
</a>
<a class="hover:text-gray-400" href="#">
Blog
</a>
<a class="hover:text-gray-400" href="#">
Portfolio
</a>
<a class="hover:text-gray-400" href="#">
Pages
</a>
</nav>
<i class="fas fa-bars text-xl cursor-pointer md:hidden" onclick="toggleMenu()">
</i>
</header>
<nav class="space-y-4 p-6 hidden" id="mobile-menu">
<a class="block hover:text-gray-400" href="#">
Home
</a>
<a class="block hover:text-gray-400" href="#">
About
</a>
<a class="block hover:text-gray-400" href="#">
Blog
</a>
<a class="block hover:text-gray-400" href="#">
Portfolio
</a>
<a class="block hover:text-gray-400" href="#">
Pages
</a>
</nav>
<main class="flex flex-col items-center text-center mt-16">
<div class="md:w-1/2 px-6">
<h1 class="text-5xl font-bold">
I'm Tanuj, a
<br/>
Web Developer
</h1>
<p class="mt-4 text-gray-400">
Lorem ipsum dolor sit amet consectetur adipiscing elit leo quis ullamcorper quis id elementum convallis lacus gravida.
</p>
<div class="mt-8">
<i class="fas fa-chevron-down text-blue-500 text-3xl">
</i>
</div>
</div>
<div class="relative md:w-1/2 px-6 mt-8">
<img alt="Portrait of John, a web developer" class="rounded-full w-64 h-64 mx-auto" height="400" src="https://storage.googleapis.com/a1aa/image/OFfky5gYOLUCYaJGSDs611ihtYIVcwrdqLmrSG6pTeQd25qTA.jpg" width="400"/>
</div>
<div class="flex flex-col md:flex-row justify-between mt-16 px-6 w-full md:w-3/4">
<div class="md:w-1/3 mb-8 md:mb-0">
<h2 class="text-xl font-bold">
ABOUT ME
</h2>
<p class="mt-4 text-gray-400">
Lorem ipsum dolor sit amet consectetur adipiscing elit leo quis ullamcorper quis id elementum convallis lacus gravida.
</p>
<button class="mt-4 text-blue-500 hover:underline">
LEARN MORE
<i class="fas fa-arrow-right">
</i>
</button>
</div>
<div class="md:w-1/3 mb-8 md:mb-0">
<h2 class="text-xl font-bold">
MY WORK
</h2>
<p class="mt-4 text-gray-400">
Purus ut faucibus pulvinar elementum integer enim neque fermentum iaculis eu non diam phasellus dolor consectetur.
</p>
<button class="mt-4 text-blue-500 hover:underline">
BROWSE PORTFOLIO
<i class="fas fa-arrow-right">
</i>
</button>
</div>
<div class="md:w-1/3">
<h2 class="text-xl font-bold">
FOLLOW ME
</h2>
<div class="mt-4 flex space-x-4">
<a class="text-gray-400 hover:text-white" href="#">
<i class="fab fa-facebook-f">
</i>
</a>
<a class="text-gray-400 hover:text-white" href="#">
<i class="fab fa-twitter">
</i>
</a>
<a class="text-gray-400 hover:text-white" href="#">
<i class="fab fa-instagram">
</i>
</a>
<a class="text-gray-400 hover:text-white" href="#">
<i class="fab fa-linkedin-in">
</i>
</a>
<a class="text-gray-400 hover:text-white" href="#">
<i class="fab fa-youtube">
</i>
</a>
</div>
</div>
</div>
</main>
<script>
function toggleMenu() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
}
</script>
</body>
</html>