Skip to content

Commit aea45a6

Browse files
LazpalLazpal
authored
Add files via upload
1 parent 3f06805 commit aea45a6

File tree

13 files changed

+2356
-11
lines changed

13 files changed

+2356
-11
lines changed

‎app/app.js‎

Lines changed: 402 additions & 0 deletions
Large diffs are not rendered by default.

‎app/contact.css‎

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
:root {
2+
--primary-color: #0d6efd;
3+
--secondary-color: #6c757d;
4+
--success-color: #198754;
5+
--info-color: #0dcaf0;
6+
--warning-color: #ffc107;
7+
--danger-color: #dc3545;
8+
--dark-color: #212529;
9+
--light-color: #f8f9fa;
10+
}
11+
12+
body {
13+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
14+
min-height: 100vh;
15+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16+
}
17+
18+
.hero-section {
19+
background: rgba(255, 255, 255, 0.95);
20+
backdrop-filter: blur(10px);
21+
border-radius: 20px;
22+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
23+
margin: 2rem 0;
24+
}
25+
26+
.contact-card {
27+
background: white;
28+
border-radius: 15px;
29+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
30+
transition: transform 0.3s ease, box-shadow 0.3s ease;
31+
border: none;
32+
}
33+
34+
.contact-card:hover {
35+
transform: translateY(-5px);
36+
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
37+
}
38+
39+
.contact-icon {
40+
font-size: 3rem;
41+
margin-bottom: 1rem;
42+
}
43+
44+
.btn-contact {
45+
border-radius: 25px;
46+
padding: 10px 25px;
47+
font-weight: 600;
48+
text-decoration: none;
49+
display: inline-block;
50+
transition: all 0.3s ease;
51+
border: none;
52+
}
53+
54+
.btn-contact:hover {
55+
transform: translateY(-2px);
56+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
57+
}
58+
59+
.btn-email {
60+
background: linear-gradient(45deg, #667eea, #764ba2);
61+
color: white;
62+
}
63+
64+
.btn-telegram {
65+
background: linear-gradient(45deg, #0088cc, #00aaff);
66+
color: white;
67+
}
68+
69+
.btn-github {
70+
background: linear-gradient(45deg, #24292e, #586069);
71+
color: white;
72+
}
73+
74+
.btn-instagram {
75+
background: linear-gradient(45deg, #e95950, #f27121, #fccc63, #8a3ab9);
76+
color: white;
77+
}
78+
79+
.btn-portfolio {
80+
background: linear-gradient(45deg, #11998e, #38ef7d);
81+
color: white;
82+
}
83+
84+
.btn-paypal {
85+
background: linear-gradient(45deg, #003087, #0070ba);
86+
color: white;
87+
}
88+
89+
.stats-card {
90+
background: rgba(255, 255, 255, 0.9);
91+
border-radius: 15px;
92+
padding: 2rem;
93+
text-align: center;
94+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
95+
}
96+
97+
.feature-icon {
98+
font-size: 2.5rem;
99+
color: var(--primary-color);
100+
margin-bottom: 1rem;
101+
}
102+
103+
.animated-bg {
104+
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
105+
background-size: 400% 400%;
106+
animation: gradient 15s ease infinite;
107+
}
108+
109+
@keyframes gradient {
110+
0% { background-position: 0% 50%; }
111+
50% { background-position: 100% 50%; }
112+
100% { background-position: 0% 50%; }
113+
}
114+
115+
.pulse {
116+
animation: pulse 2s infinite;
117+
}
118+
119+
@keyframes pulse {
120+
0% { transform: scale(1); }
121+
50% { transform: scale(1.05); }
122+
100% { transform: scale(1); }
123+
}
124+
125+
.fade-in {
126+
animation: fadeIn 1s ease-in;
127+
}
128+
129+
@keyframes fadeIn {
130+
from { opacity: 0; transform: translateY(30px); }
131+
to { opacity: 1; transform: translateY(0); }
132+
}
133+
134+
.timeline {
135+
position: relative;
136+
padding-left: 30px;
137+
}
138+
139+
.timeline::before {
140+
content: '';
141+
position: absolute;
142+
left: 15px;
143+
top: 0;
144+
bottom: 0;
145+
width: 2px;
146+
background: var(--primary-color);
147+
}
148+
149+
.timeline-item {
150+
position: relative;
151+
margin-bottom: 2rem;
152+
padding-left: 30px;
153+
}
154+
155+
.timeline-item::before {
156+
content: '';
157+
position: absolute;
158+
left: -23px;
159+
top: 5px;
160+
width: 12px;
161+
height: 12px;
162+
border-radius: 50%;
163+
background: var(--primary-color);
164+
border: 3px solid white;
165+
box-shadow: 0 0 0 3px var(--primary-color);
166+
}
167+
168+
.navbar-custom {
169+
background: rgba(255, 255, 255, 0.95) !important;
170+
backdrop-filter: blur(10px);
171+
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
172+
}
173+
174+
.footer-custom {
175+
background: rgba(33, 37, 41, 0.95);
176+
backdrop-filter: blur(10px);
177+
}
178+
179+
.social-links a {
180+
display: inline-block;
181+
margin: 0 10px;
182+
font-size: 1.5rem;
183+
transition: transform 0.3s ease;
184+
}
185+
186+
.social-links a:hover {
187+
transform: scale(1.2);
188+
}
189+
190+
@media (max-width: 768px) {
191+
.hero-section {
192+
margin: 1rem 0;
193+
border-radius: 15px;
194+
}
195+
196+
.contact-card {
197+
margin-bottom: 1rem;
198+
}
199+
}

0 commit comments

Comments
 (0)