Следите за новостями GitVerse в нашем телеграм-канале

Portfolio3

0
/
style.css 
661 строка · 12.8 Кб
1
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
2
*{
3
    padding: 0;
4
    margin: 0;
5
    box-sizing: border-box;
6
    scroll-behavior: smooth;
7
    text-decoration: none;
8
    list-style: none;
9
    font-family: "Kanit", sans-serif;
10
}
11
:root{
12
    --bg-color: #1d1c1b;
13
    --text-color: #fff;
14
    --mein-color: #ea5445;
15
    --second-bg-color: #22211f;
16
    --other-color: #858585;
17
    --second-color: #1a1a1a;
18
    --h1-font: 5rem;
19
    --h2-font: 3.2rem;
20
    --p-font: 1.1rem;
21
}
22
header{
23
    position: fixed;
24
    width: 100%;
25
    top: 0;
26
    right: 0;
27
    z-index: 1000;
28
    padding: 32px 13%;
29
    display: flex;
30
    align-items: center;
31
    justify-content: space-between;
32
    transition: all .50s ease;
33
}
34
body{
35
    background: var(--bg-color);
36
    color: var(--text-color);
37
}
38
.logo{
39
    color: var(--text-color);
40
    font-size: 36px;
41
    font-weight: 700;
42
}
43
.navlist{
44
    display: flex;
45
}
46
.navlist a{
47
    display: inline-flex;
48
    font-size: var(--p-font);
49
    font-weight: 500;
50
    color: var(--text-color);
51
    margin: 0 30px;
52
    transition: all .6s ease;
53
}
54
.navlist a:hover{
55
    color: var(--other-color);
56
    transform: translateY(-5px);
57
}
58
.nav-right{
59
    display: flex;
60
    align-items: center;
61
}
62
.nav-btn{
63
    display: inline-block;
64
    padding: 14px 35px;
65
    background:var(--mein-color);
66
    color: var(--text-color);
67
    font-size: 15px;
68
    font-weight: 700;
69
    text-transform: uppercase;
70
    letter-spacing: .05em;
71
    border-radius: 30px;
72
    border: 2px solid transparent;
73
    transition: all .6s ease;
74
}
75
.nav-btn:hover{
76
    background: transparent;
77
    border: 2px solid var(--mein-color);
78
}
79
#menu-icon{
80
    font-size: 40px;
81
    cursor: pointer;
82
    z-index: 10001;
83
    margin-left: 22px;
84
    display: none;
85
}
86

87
section{
88
    padding: 90px 13% 80px;
89
}
90
.hero{
91
    height: 100vh;
92
    width: 100%;
93
    position: relative;
94
    display: flex;
95
    flex-wrap: nowrap;
96
    align-items: center;
97
    justify-content: space-between;
98
    gap: 3rem;
99
}
100
.hero-img img{
101
    max-width: 600px;
102
    width: 100%;
103
    height: 100%;
104
    object-fit: contain;
105
}
106
.hero-text h1{
107
    font-size: var(--h1-font);
108
    line-height: 1.1;
109
    font-weight: 700;
110
    margin: 20px 0;
111
    text-transform: uppercase;
112
    letter-spacing: 2px;
113
    text-shadow: -1px -1px 0px #000, 7px 7px 0px #000, 9px 9px 9px #00000055;
114
}
115
.hero-text h1 span{
116
    color: var(--mein-color);
117
}
118
.hero-text h6{
119
    font-size: 22px;
120
    font-weight: 600;
121
}
122
.hero-text h6 span{
123
    color: var(--mein-color);
124
}
125
.hero-text h4{
126
    font-size: 35px;
127
    font-weight: bold;
128
    margin-bottom: 30px;
129
}
130
.hero-text p{
131
    font-size: var(--p-font);
132
    color: var(--other-color);
133
    margin-bottom: 20px;
134
    line-height: 2;
135
}
136
.hero-icons i{
137
    display: inline-block;
138
    font-size: 24px;
139
    color: var(--text-color);
140
    margin-right: 20px;
141
    transition: all .6s ease;
142
    margin-bottom: 40px;
143
}
144
.hero-icons i:hover{
145
    transform: rotate3d(0, 0, 1, 360deg);
146
    color: var(--mein-color);
147
}
148
.btn{
149
    display: inline-block;
150
    padding: 15px 30px;
151
    background: transparent;
152
    color: var(--text-color);
153
    font-size: 15px;
154
    font-weight: 700;
155
    text-transform: uppercase;
156
    letter-spacing: .05em;
157
    border-radius: 30px;
158
    border: 2px solid var(--mein-color);
159
    box-shadow: 2px 2px var(--mein-color);
160
    transition: all .6s ease;
161
    margin-right: 30px;
162
}
163
.btn:hover{
164
    background: var(--mein-color);
165
    color: var(--text-color);
166
}
167
.btn2{
168
    display: inline-block;
169
    color: var(--text-color);
170
    font-size: 17px;
171
    font-weight: 700;
172
    text-transform: uppercase;
173
    border: 2px solid transparent;
174
    letter-spacing: .05em;
175
    transition: all .6s ease;
176
}
177
.btn2:hover{
178
    border-bottom: 2px solid var(--text-color);
179
}
180

181
.scroll{
182
    position: absolute;
183
    top: 90%;
184
    left: 47%;
185
    transform: translateY(-50%);
186
    display: flex;
187
    align-items: center;
188
}
189
.scroll a{
190
    font-size: 14px;
191
    font-weight: 600;
192
    text-transform: uppercase;
193
    color: var(--text-color);
194
    letter-spacing: .05em;
195
    transition: all .6s ease;
196
}
197
.scroll i{
198
    font-size: 16px;
199
    margin-right: 8px;
200
}
201
.scroll a:hover{
202
    transform: translateY(-5px);
203
    color: var(--mein-color);
204
}
205
header.sticky{
206
    padding: 8px 13%;
207
    background: transparent;
208
    backdrop-filter: blur(20px);
209
}
210
.mid-text{
211
    text-align: center;
212
}
213
.mid-text h2{
214
    font-size: var(--h2-font);
215
    font-weight: bold;
216
    margin-bottom: 8px;
217
}
218
.mid-text h5{
219
    font-size: 35px;
220
    font-weight: bold;
221
    color: var(--mein-color);
222
}
223
.services{
224
    background: var(--second-bg-color);
225
}
226
.services-content{
227
    display: grid;
228
    grid-template-columns: repeat(auto-fit, minmax(200px, auto));
229
    align-items: center;
230
    gap: 2rem;
231
    margin-top: 5rem;
232
    cursor: pointer;
233
}
234
.box{
235
    background: var(--bg-color);
236
    padding: 30px 35px;
237
    border-radius: 18px;
238
    border: 1px solid #303030;
239
    transition: all .6s ease;
240
}
241
.box h6{
242
    font-size: 13px;
243
    font-weight: 700;
244
    text-transform: uppercase;
245
    letter-spacing: .05em;
246
    margin-bottom: 30px;
247
}
248
.box h3{
249
    font-size: 25px;
250
    font-weight: 700;
251
    margin-bottom: 12px;
252
}
253
.box p{
254
    font-size: var(--p-font);
255
    color: var(--other-color);
256
    margin-bottom: 30px;
257
    line-height: 1.8;
258
}
259
.links a{
260
    font-size: 14px;
261
    color: var(--text-color);
262
}
263
.links i{
264
    margin-left: 3px;
265
    font-size: 17px;
266
    color: var(--mein-color);
267
}
268
.links a:hover{
269
    text-decoration: underline;
270
}
271
.box:hover{
272
    transform: translateY(-9px) scale(1.04);
273
}
274

275

276
.portfolio-content{
277
    display: grid;
278
    grid-template-columns: repeat(auto-fit, minmax(300px, auto));
279
    align-items: center;
280
    gap: 2rem;
281
    margin-top: 5rem;
282
}
283
.portfolio-img{
284
    overflow: hidden;
285
    border-radius: 18px;
286
    margin-bottom: 25px;
287
}
288
.portfolio-img img{
289
    display: block;
290
    width: 100%;
291
    transition: transform 0.5s;
292
    cursor: pointer;
293
}
294
.portfolio-img img:hover{
295
    transform: scale(1.07);
296
}
297
.p-flex{
298
    margin-bottom: 15px;
299
}
300
.p-flex a{
301
    padding: 6px 10px;
302
    border-radius: 10px;
303
    background: transparent;
304
    border: 1px solid #303030;
305
    font-size: 14px;
306
    color: var(--text-color);
307
    transition: all .6s ease;
308
}
309
.p-flex a:hover{
310
    background: var(--text-color);
311
    color: var(--bg-color);
312
}
313
.row h3{
314
    font-size: 26px;
315
    font-weight: 700;
316
    transition: all .6s ease;
317
}
318
.row h3:hover{
319
    color: var(--mein-color);
320
}
321
.portfolio-btn{
322
    margin-top: 4rem;
323
    text-align: center;
324
}
325
.p-btn{
326
    width: 100%;
327
    display: inline-block;
328
    padding: 15px 35px;
329
    background: var(--second-bg-color);
330
    border-radius: 18px;
331
    border: 1px solid #303033;
332
    font-size: var(--p-font);
333
    font-weight: 600;
334
    color: var(--text-color);
335
    transition: all .6s ease;
336
}
337
.p-btn:hover{
338
    background: transparent;
339
    color: var(--mein-color);
340
}
341

342

343
.skills{
344
    background: var(--second-color);
345
}
346
.skills-content{
347
    display: grid;
348
    grid-template-columns: repeat(auto-fit, minmax(100px, auto));
349
    align-items: center;
350
    gap: 2rem;
351
    margin-top: 5rem;
352
    text-align: center;
353
}
354
.col{
355
    border: 1px solid #303033;
356
    border-radius: 70px;
357
    padding: 38px;
358
    transition: all .6s ease;
359
}
360
.col img{
361
    margin-bottom: 10px;
362
}
363
.col h4{
364
    font-size: 36px;
365
    margin-bottom: 5px;
366
    -webkit-text-fill-color: transparent;
367
    -webkit-text-stroke-width: 0.5px;
368
    -webkit-text-stroke-color: #fffffe;
369
}
370
.col h6{
371
    font-size: 22px;
372
}
373
.col:hover{
374
    transform: translateY(-9px);
375
    cursor: pointer;
376
}
377

378
.middle{
379
    display: flex;
380
    align-items: center;
381
    justify-content: space-between;
382
}
383
.mid-left h2{
384
    font-size: 35px;
385
    font-weight: bold;
386
    color: var(--mein-color);
387
    margin-bottom: 15px;
388
}
389
.mid-left h5{
390
    font-size: 3rem;
391
    font-weight: 600;
392
}
393
.mid-btn{
394
    display: inline-block;
395
    padding: 15px 30px;
396
    background: var(--mein-color);
397
    color: var(--text-color);
398
    font-size: 15px;
399
    font-weight: 700;
400
    text-transform: uppercase;
401
    letter-spacing: .06em;
402
    border-radius: 18px;
403
    border: 2px solid transparent;
404
    transition: all .6s ease;
405
}
406
.mid-btn{
407
    background: transparent;
408
    box-shadow: 2px 2px var(--mein-color);
409
    border: 2px solid var(--mein-color);
410
}
411
.pricing-contnet{
412
    display: grid;
413
    grid-template-columns: repeat(auto-fit, minmax(300px, auto));
414
    align-items: center;
415
    gap: 2rem;
416
    margin-top: 5rem;
417
}
418
.card{
419
    padding: 2rem;
420
    background: var(--second-color);
421
    border-radius: 18px;
422
    transition: all .6s ease;
423
}
424
.card-top{
425
    display: flex;
426
    align-items: center;
427
    justify-content: space-between;
428
    margin-bottom: 40px;
429
}
430
.card-left h4{
431
    font-size: 25px;
432
}
433
.card-left h5{
434
    font-size: 20px;
435
    color: var(--mein-color);
436
}
437
.card-left h3{
438
    font-size: 28px;
439
    font-weight: 700;
440
}
441
.card-left h3 span{
442
    font-size: 22px;
443
    font-weight: 500;
444
}
445
.card-left a{
446
    font-size: 25px;
447
    color: var(--mein-color);
448
}
449
.card:hover{
450
    background: #212121;
451
    transform: translateY(-6px) scale(1.05);
452
    cursor: pointer;
453
}
454

455

456
.contact{
457
    background: var(--second-bg-color);
458
}
459
.contact-content{
460
    display: flex;
461
    align-items: center;
462
    justify-content: center;
463
    flex-direction: column;
464
}
465
.contact-content h5{
466
    font-size: 32px;
467
    color: var(--mein-color);
468
    margin-bottom: 10px;
469
}
470
.contact-content h3{
471
    font-size: 42px;
472
    font-weight: 700;
473
    margin-bottom: 10px;
474
}
475
.contact-content p{
476
    font-size: var(--p-font);
477
    color: var(--other-color);
478
    margin-bottom: 30px;
479
    line-height: 1.8;
480
}
481
.social-icon a{
482
    display: inline-flex;
483
    align-items: center;
484
    justify-content: center;
485
    margin: 0 8px;
486
    width: 45px;
487
    height: 45px;
488
    background: var(--mein-color);
489
    color: var(--text-color);
490
    font-size: 18px;
491
    border-radius: 50%;
492
    transition: all .6s ease;
493
}
494
.social-icon a:hover{
495
    transform: translateY(-9px);
496
    border: 1px solid #303033;
497
    background: transparent;
498
}
499
.footer{
500
    padding: 15px 13%;
501
    background: var(--second-bg-color);
502
    display: flex;
503
    align-items: center;
504
    justify-content: space-between;
505
    gap: 2rem;
506
}
507
.copyright p{
508
    font-size: var(--p-font);
509
    font-weight: 400;
510
    color: var(--other-color);
511
}
512
.scroll-top i{
513
    display: inline-flex;
514
    align-items: center;
515
    justify-content: center;
516
    background: var(--mein-color);
517
    width: 45px;
518
    height: 45px;
519
    border-radius: 50%;
520
    font-size: 25px;
521
    color: var(--text-color);
522
}
523

524
@media(max-width: 1775px) {
525
    header{
526
        padding: 20px 5%;
527
    }
528
    section{
529
        padding: 90px 5% 80px;
530
    }
531
    .footer{
532
        padding: 10px 5%;
533
    }
534
    header.sticky{
535
        padding: 13px 5%;
536
    }
537
}
538
@media(max-width: 1470px){
539
    :root{
540
        --h1-font: 4.3rem;
541
        --h2-font: 2.8rem;
542
        --p-font: 1rem;
543
    }
544
    .hero-img img{
545
        max-width: 500px;
546
        width: 100%;
547
        height: 100%;
548
        object-fit: contain;
549
    }
550
    .skills-content{
551
        grid-template-columns: repeat(auto-fit, minmax(300px, auto));
552
    }
553
}
554
@media(max-width: 1260px){
555
    header{
556
        padding: 20px 3%;
557
    }
558
    section{
559
        padding: 70px 3% 70px;
560
    }
561
    .footer{
562
        padding: 10px 3%;
563
    }
564
    .header.sticky{
565
        padding: 13px 3%;
566
    }
567
    :root{
568
        --h1-font: 3.8rem;
569
        --h2-font: 2.5rem;
570
        --p-font: 15px;
571
    }
572
    .hero-img img{
573
        max-width: 440px;
574
        width: 100%;
575
        height: 100%;
576
        object-fit: contain;
577
    }
578
    .nav-btn{
579
        padding: 10px 22px;
580
    }
581
}
582
@media(max-width: 1080px){
583
    #menu-icon{
584
        display: block;
585
    }
586
    .navlist{
587
        position: absolute;
588
        width: 100%;
589
        height: 100vh;
590
        padding: 90px 60px;
591
        top: 0;
592
        bottom: 0;
593
        left: 100%;
594
        right: 0;
595
        display: flex ;
596
        flex-direction: column;
597
        background: var(--bg-color);
598
        transition: all .50s ease;
599
    }
600
    .navlist a{
601
        display: block;
602
        color: var(--text-color);
603
        padding: 0;
604
        margin: 0px 0px 40px 0px;
605
        font-size: 2.2rem;
606
        font-weight: 400;
607
    }
608
    .navlist.open{
609
        left: 0;
610
    }
611
}
612
@media(max-width: 1070px){
613
    .hero{
614
        display: flex;
615
        flex-wrap: wrap;
616
        gap: 2rem;
617
        height: 130vh;
618
    }
619
    .scroll{
620
        display: none;
621
    }
622
    .hero-text{
623
        text-align: center;
624
        order: 2;
625
        width: 100%;
626
    }
627
    .hero-text p{
628
        width: 100%;
629
    }
630
    .hero-img{
631
        margin: auto;
632
    }
633
    .hero-btn{
634
        display: flex;
635
        align-items: center;
636
        justify-content: center;
637
    }
638
    .btn{
639
        padding: 10px 23px;
640
    }
641
}
642
@media(max-width: 820px){
643
    .services-content{
644
        grid-template-columns: repeat(auto-fit, minmax(300px, auto));
645
    }
646
    .middle{
647
        display: flex;
648
        align-items: flex-start;
649
        flex-direction: column;
650
        gap: 30px;
651
    }
652
    .contact-content p{
653
        text-align: center;
654
    }
655
}
656
@media(max-width: 570px){
657
    :root{
658
        --h1-font: 3rem;
659
        --h2-font: 2rem;
660
    }
661
}

Использование cookies

Мы используем файлы cookie в соответствии с Политикой конфиденциальности и Политикой использования cookies.

Нажимая кнопку «Принимаю», Вы даете АО «СберТех» согласие на обработку Ваших персональных данных в целях совершенствования нашего веб-сайта и Сервиса GitVerse, а также повышения удобства их использования.

Запретить использование cookies Вы можете самостоятельно в настройках Вашего браузера.