-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
167 lines (144 loc) · 12 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
162
163
164
165
166
167
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-black">
<div
class="lg:grid lg:grid-cols-3 bg-gradient-to-r from-blue-500 to-red-500 lg:h-[595px] h-[995px] hover:bg-gradient-to-r hover:from-red-500 hover:to-blue-500"
>
<div class="p-[50px]">
<img class="lg:ml-[50px] hover:shadow-2xl hover:shadow-cyan-500 hover:h-[500px] hover:w-[500px] duration-700 rounded-full lg:h-[450px] lg:relative lg:w-[450px] h-[500px] w-[500px] relative ml-[150px] lg:ml-[0px] outline outline-4 outline-offset-4 outline-blue-500/50" src="./1vlad.png" alt="">
</div>
<div
class="lg:relative lg:h-[450px] lg:w-[450px] drop-shadow-[0_35px_35px_rgba(0.5,0.5,0.5,0.5)] text-neutral-50"
>
<p class="lg:mt-[60px] ml-[250px] lg:ml-[0px] text-[70px] hover:text-[85px] lg:ml-[45px] hover:drop-shadow-[0_35px_35px_rgba(255,255,155,104.50)] duration-700">Serik Abdez</p>
<p class="lg:mt-[30px] ml-[50px] p-[50px] lg:p-[0px] lg:w-[900px] text-[30px] hover:text-[32px] lg:hover:text-[35px] hover:drop-shadow-[0_35px_35px_rgba(232,241,255,255.50)] duration-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae itaque
nostrum facilis consequuntur cupiditate nobis rerum delectus illum non
fuga cum sit repudiandae, facere id repellendus odit eius, tenetur
consectetur.
</p>
</div>
</div>
/**
*! Main
*/
<div class="lg:grid lg:grid-cols-2 flex">
<div class="lg:grid lg:grid-rows-2 bg-[#202020] text-white lg:h-[1800px] w-full mt-[-22px] lg:w-[500px]">
<div class="flex justify-center flex-col items-center lg:flex-none lg:justify-stretch lg:items-stretch">
<p class="ml-[50px] text-[45px] lg:text-[32px] pt-[50px] lg text-[#5096F1] border-b-2 lg:w-[420px] w-[620px] border-[#5096F1] hover:text-[50px] lg:hover:text-[45px] duration-700">
Lorem Ipsum1
</p>
<p class=" text-[#FFFFF] lg:w-[420px] w-[620px] ml-[50px] mt-[20px] lg:text-[24px] text-[32px] mb-[100px] hover:text-[36px] lg:hover:text-[32px] duration-700">
Lorem Ipsum is simply dummy text of <br />
the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,
</p>
<p class="border-b-2 ml-[50px] lg:w-[420px] w-[620px] border-[#5096F1] text-[45px] lg:text-[32px] text-[#5096F1] hover:text-[50px] lg:hover:text-[45px] hover:drop-shadow-xl duration-700">
Lorem Ipsumri
</p>
<p class="text-[#FFFFF] ml-[50px] lg:w-[420px] w-[620px] mt-[20px] text-[32px] lg:text-[24px] hover:text-[32px] hover:drop-shadow-xl hover:underline hover:decoration-sky-500 hover:rounded-lg duration-500">
Lorem Ipsum is simply dummy text of <br />
the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,
</p>
</div>
<div class="lg:absolute lg:left-[800px] ml-[120px] mt-[100px] lg:mt-[50px] ">
<div class="ml-[55px] h-[450px] lg:ml-[0px] w-[700px] bg-[#151515] lg:h-[500px] lg:w-[900px] border-b-4 border-[#202020]">
<p
class="border-b-2 ml-[50px] pt-[20px] lg:w-[800px] w-[620px] border-[#5096F1] text-[45px] text-[#5096F1]"
>
Lorem Ipsum
</p>
<div class="border-b-2 border-[#5096F1]/50 ml-[50px] pb-[10px] lg:w-[800px] w-[620px]">
<p class="text-white text-[30px] pt-[15px] hover:underline hover:decoration-cyan-500 duration-1" >National university Chernihiv Collegium <br>
from T.G. Shevchenko</p>
<p class="text-white lg:absolute lg:inline lg:left-[650px] lg:bottom-[320px] text-[30px] hover:text-red-500 duration-500 ">2014 - 2018</p>
</div>
<div class="border-b-2 border-[#5096F1]/50 ml-[50px] pb-[10px] lg:w-[800px] w-[620px]">
<p class="text-white text-[30px] pt-[10px]" >National university Chernihiv Collegium <br>
from T.G. Shevchenko</p>
<p class="text-white lg:absolute lg:inline lg:left-[650px] lg:bottom-[200px] hover:text-cyan-500 duration-500 text-[30px] ">2014 - 2018</p>
</div>
</div>
</div>
<div class="mt-[100px] ml-[170px] pb-[50px] lg:pb-[0px] lg:ml-[0px] lg:mt-[0px] lg:absolute lg:left-[920px] lg:bottom-[-950px]">
<div class="bg-[#151515] h-[450px] w-[700px] lg:h-[500px] lg:w-[900px] border-b-4 border-[#202020]">
<p class="border-b-2 ml-[50px] pt-[20px] lg:w-[800px] w-[620px] border-[#5096F1] text-[45px] text-[#5096F1]">
Lorem Ipsum
</p>
</div>
<img class="w-[20px] h-[20px] absolute mt-[-300px] ml-[50px] lg:mt-[-350px] lg:ml-[100px]" src="./Ellipse.png" alt="">
<img class="w-[3px] h-[250px] ml-[58px] mt-[-300px] lg:ml-[108px] lg:mt-[-350px] absolute" src="./Vector.png" alt="">
<p class="text-white lg:pl-[100px] absolute left-[270px] bottom-[-1670px] lg:relative lg:left-[70px] lg:bottom-[350px] hover:text-[32px] duration-700 text-[24px]">Lorem Ipsum <br> Lorem</p>
<img class="w-[20px] h-[20px] absolute mt-[-170px] ml-[50px] lg:mt-[-290px] lg:ml-[100px]" src="./Ellipse.png" alt="">
<p class="text-white lg:pl-[100px] absolute left-[270px] bottom-[-1800px] lg:relative lg:left-[70px] lg:bottom-[390px] hover:text-[32px] duration-700 pt-[100px] text-[24px]">Lorem Ipsum <br> Lorem</p>
</div>
<div class="mt-[50px] ml-[170px] pb-[50px] lg:pb-[0px] lg:ml-[0px] lg:mt-[0px] lg:absolute lg:left-[920px] lg:bottom-[-1250px]">
<div class="bg-[#151515] h-[1050px] w-[700px] lg:h-[500px] lg:w-[900px] border-b-4 border-[#202020]">
<p class="border-b-2 ml-[50px] pt-[20px] w-[620px] lg:w-[800px] border-[#5096F1] text-[45px] text-[#5096F1]">
Lorem Ipsum
</p>
<div class="flex lg:flex lg:flex-row text-white ">
<div class="lg:flex-col absolute lg:static lg:bottom-[0px] bottom-[-2500px] lg:flex-row lg:ml-[150px] lg:mt-[30px] leading-[60px] text-[32px] ">
<p class="absolute lg:static left-[150px] w-[200px] lg:left-[0px] bottom-[280px] lg:bottom-[0px] hover:underline hover:decoration-green-500 duration-100">Lorem Ipsum</p>
<img class="lg:absolute lg:left-[120px] lg:bottom-[335px] relative left-[100px] bottom-[215px] w-[20px] h-[20px]" src="./Ellipse.png" alt="">
<p class="absolute lg:static left-[150px] w-[200px] lg:left-[0px] bottom-[200px] lg:bottom-[0px] hover:underline hover:decoration-red-500 duration-100">Lorem Ipsum</p>
<img class="lg:absolute lg:left-[120px] lg:bottom-[275px] relative left-[100px] bottom-[155px] w-[20px] h-[20px]" src="./Ellipse.png" alt="">
<p class="absolute lg:static left-[150px] w-[200px] lg:left-[0px] bottom-[120px] lg:bottom-[0px] hover:underline hover:decoration-orange-500 duration-100">Lorem Ipsum</p>
<img class="lg:absolute lg:left-[120px] lg:bottom-[215px] relative left-[100px] bottom-[95px] w-[20px] h-[20px]" src="./Ellipse.png" alt="">
<p class="absolute lg:static left-[150px] w-[200px] lg:left-[0px] bottom-[40px] lg:bottom-[0px] hover:underline hover:decoration-indigo-500 duration-100">Lorem Ipsum</p>
<img class="lg:absolute lg:left-[120px] lg:bottom-[155px] relative left-[100px] bottom-[35px] w-[20px] h-[20px]" src="./Ellipse.png" alt="">
<p class="absolute lg:static left-[150px] w-[200px] lg:left-[0px] bottom-[-40px] lg:bottom-[0px] hover:underline hover:decoration-cyan-500 duration-100">Lorem Ipsum</p>
<img class="lg:absolute lg:left-[120px] lg:bottom-[95px] relative left-[100px] bottom-[-25px] w-[20px] h-[20px]" src="./Ellipse.png" alt="">
</div>
<div class="lg:flex-col absolute lg:static lg:bottom-[0px] bottom-[-3000px] lg:flex-row lg:ml-[200px] leading-[60px] lg:mt-[30px] text-[32px]">
<p class="absolute lg:static left-[150px] w-[200px] lg:left-[0px] bottom-[280px] lg:bottom-[0px] hover:underline hover:decoration-sky-500 duration-100">Lorem Ipsum</p>
<img class="lg:absolute lg:left-[505px] lg:bottom-[335px] relative left-[100px] bottom-[215px] w-[20px] h-[20px]" src="./Ellipse.png" alt="">
<p class="absolute lg:static left-[150px] w-[200px] lg:left-[0px] bottom-[200px] lg:bottom-[0px] hover:underline hover:decoration-sky-500 duration-100">Lorem Ipsum</p>
<img class="lg:absolute lg:left-[505px] lg:bottom-[275px] relative left-[100px] bottom-[155px] w-[20px] h-[20px" src="./Ellipse.png" alt="">
<p class="absolute lg:static left-[150px] w-[200px] lg:left-[0px] bottom-[120px] lg:bottom-[0px] hover:underline hover:decoration-sky-500 duration-100">Lorem Ipsum</p>
<img class="lg:absolute lg:left-[505px] lg:bottom-[215px] relative left-[100px] bottom-[95px] w-[20px] h-[20px" src="./Ellipse.png" alt="">
<p class="absolute lg:static left-[150px] w-[200px] lg:left-[0px] bottom-[40px] lg:bottom-[0px] hover:underline hover:decoration-sky-500 duration-100">Lorem Ipsum</p>
<img class="lg:absolute lg:left-[505px] lg:bottom-[155px] relative left-[100px] bottom-[35px] w-[20px] h-[20px" src="./Ellipse.png" alt="">
<p class="absolute lg:static left-[150px] w-[200px] lg:left-[0px] bottom-[-40px] lg:bottom-[0px] hover:underline hover:decoration-sky-500 duration-100">Lorem Ipsum</p>
<img class="lg:absolute lg:left-[505px] lg:bottom-[95px] relative left-[100px] bottom-[-25px] w-[20px] h-[20px" src="./Ellipse.png" alt="">
</div>
</div>
</div>
</div>
<div class="h-[600px] lg:h-[0px] lg:ml-[50px] ml-[170px] w-[620px] lg:w-[400px] lg:mt-[50px] mt-[450px] text-white">
<p class="text-[32px] border-b-2 border-[#5096F1] text-[#5096F1]">
Contact me
<p/>
<img class="w-[50px] h-[50px] mt-[50px] hover:w-[60px] hover:h-[60px] duration-500" src="/gmail.png" alt="" />
<a href="#" class="lg:inline absolute bottom-[-3690px] left-[250px] lg:bottom-[-710px] lg:left-[130px] text-[20px]">
Your URL here
<a/>
<img class="w-[50px] h-[50px] mt-[50px] hover:w-[60px] hover:h-[60px] duration-500" src="/tg.png" alt="" />
<a href="#" class="lg:inline absolute bottom-[-3790px] left-[250px] lg:bottom-[-810px] lg:left-[130px] text-[20px]">
Your URL here
</a>
<img class="w-[50px] h-[50px] mt-[50px] hover:w-[60px] hover:h-[60px] duration-500" src="/in.png" alt="" />
<a href="#" class="lg:inline absolute bottom-[-3890px] left-[250px] lg:bottom-[-910px] lg:left-[130px] text-[20px]">
Your URL here
<a/>
<img class="w-[50px] h-[50px] mt-[50px] hover:w-[60px] hover:h-[60px] duration-500" src="/git.png" alt="" />
<a href="#" class="lg:inline absolute bottom-[-3990px] left-[250px] lg:bottom-[-1010px] lg:left-[130px] text-[20px]">
Your URL here
<a/>
<img class="w-[50px] h-[50px] mt-[50px] hover:w-[60px] hover:h-[60px] duration-500" src="/phone.png" alt="" />
<a href="#" class="lg:inline absolute bottom-[-4090px] left-[250px] lg:bottom-[-1110px] lg:left-[130px] text-[20px] hover:text-[px] duration-700">
Your URL here
</a>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>