-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
161 lines (161 loc) · 6.37 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
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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="en">
<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" />
<title>My Portfolio</title>
<link rel="stylesheet" href="./style.css" />
<link
href="https://fonts.googleapis.com/css?family=Lato"
rel="stylesheet"
/>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="icon" type="image/x-icon" href="./img/portfolio.png" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</head>
<body class="overflow-y-hidden select-none pb-0 md:pb-8 xl:pb-14 rounded-2xl">
<!-- <canvas id="bgCanvas"></canvas> -->
<div
class="container bg-black border-0 border-black rounded-t-3xl ml-auto mr-auto mt-0 md:mt-8 md:my-4 h-full md:h-[97%] sm:w-full md:w-5/6 lg:h-[97%] xl:h-[93%] lg:border lg:border-4 lg:border-b-0 lg:mb-0 sm:rounded-b-3xl rounded-b-3xl"
>
<!-- <div id="start" class="flex h-full items-center justify-center">
<i class="fa-sharp fa-solid fa-power-off text-zinc-50 text-8xl blink-2"></i>
</div> -->
<div id="start" class="flex h-full items-center justify-center">
<i class="fa-brands fa-apple text-zinc-50 text-8xl blink-2"></i>
</div>
<div
id="bg-img"
class="hidden rounded-t-2xl block sm:rounded-b-3xl sm:h-[98%] rounded-b-3xl"
>
<div
id="top-laptop"
class="text-white border-t-8 border-l-8 border-r-8 border-black flex justify-between items-start rounded-t-2xl"
>
<div id="apple" class="flex items-center justify-center">
<i class="fa-brands fa-apple text-xl pl-2 mr-1"></i>
<span class="text-lg">Maga</span>
</div>
<div id="phone-button" class="flex items-center justify-center">
<div class="phone-button">
<i class="fa-solid fa-signal text-xs ml-2 mt-2"></i>
<i class="fa-solid fa-signal text-xs ml-2 mt-2"></i>
<i class="fa-solid fa-wifi text-xs ml-2 mt-2"></i>
</div>
<div class="pc-button">
<i
onclick="closeWindow()"
class="fa-solid fa-circle-xmark text-red-600 ml-2 mt-2"
></i>
<i class="fa-solid fa-circle text-yellow-400 ml-1 mt-2"></i>
<i class="fa-solid fa-circle text-lime-400 ml-1 mt-2"></i>
</div>
</div>
<div class="w-36 lg:w-52">
<div
class="flex flex-col-reverse text-center bg-black text-black border-b-[24px] border-black rounded-b-2xl border-t-8 border-l-8 border-r-8 border-black"
></div>
</div>
<div class="flex items-center mt-1">
<i class="fa-solid fa-battery-full text-xl"></i>
<h1 id="timeNow" class="text-end ml-2 mr-2 font-bold">date</h1>
</div>
</div>
<div
class="border-l-8 border-r-8 border-black min-h-[96%] sm:rounded-b-3xl rounded-b-3xl"
>
<div class="flex h-[94vh] w-full md:h-[82vh]">
<div
class="block h-full text-white text-3xl text-center w-full px-0"
>
<!-- <iframe src="https://github.com/iammaga" title="Github" frameborder="0" class="w-full h-[99%] rounded-b-xl"></iframe> -->
<div class="about h-full flex items-center justify-center">
<span
class="text-white text-lg font-bold mb-2 text-gray-500 px-8 hidden"
>
<span id="myAge"></span>
</span>
</div>
</div>
</div>
<div
id="icon"
class="flex absolute top-20 md:top-24 xl:inset-0 items-end xl:mb-[110px] justify-around xl:justify-center mb-2 w-auto px-9"
>
<div
id="menu"
class="grid grid-cols-4 gap-1 xl:flex xl:border-2 xl:rounded-lg xl:mb-2"
>
<a href="https://github.com/iammaga" class="flex">
<div class="px-1 items-center flex my-1">
<img
src="./img/github-5221066.png"
alt=""
width="50"
height="50"
class="rounded-2xl"
/>
</div>
</a>
<a href="./vscode.html" class="flex">
<div class="px-1 items-center flex my-1">
<img
src="./img/visual-studio-code.png"
alt=""
width="40"
height="40"
class="rounded-2xl"
/>
</div>
</a>
<a href="https://t.me/Magaa11111" class="flex">
<div class="px-1 items-center flex my-1">
<img
src="./img/telegram1.png"
alt=""
width="44"
height="50"
class="rounded-2xl"
/>
</div>
</a>
<!-- <a href="/terminal.html" class="flex">
<div class="px-1 items-center flex my-1">
<img
src="./img/terminal.png"
alt=""
width="50"
height="50"
class="rounded-2xl"
/>
</div>
</a>
<a href="" class="flex">
<div class="px-1 items-center flex my-1">
<img
src="./img/macos_big_sur_download_folder_icon_186042.png"
alt=""
width="50"
height="50"
class="rounded-2xl"
/>
</div>
</a> -->
</div>
</div>
</div>
</div>
</div>
<div
class="hidden bg-[#5E5F63] bg-gradient-to-b from-[#5E5F63] to-gray-900 border-[#5E5F63] w-100 mx-16 h-full rounded-b-3xl md:mx-16 sm:mx-16 xl:h-14 xl:block"
></div>
<script src="./main.js"></script>
</body>
</html>