-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyle.css
118 lines (99 loc) · 5.67 KB
/
style.css
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
/* FONTS */
@font-face
{font-family: Hyper; src: url(https://GrandioseBehavior.github.io/folio/Reality-Hyper-Regular.ttf);}
@font-face {
font-family: Samba;
src: url(https://GrandioseBehavior.github.io/folio/SambaIsDead.ttf);
}
/* RESET */
*, html
{margin:0;padding:0;overflow: hidden;}
/* PAGE STRUCTURE */
body
{background: url(https://github.com/GrandioseBehavior/folio/blob/main/Texturelabs_Metal_199M.jpg?raw=true);background-repeat:no-repeat;font-family:Samba;}
/* SECTIONS */
.holder
{display:flex; justify-content:center;align-items:center;flex-direction:column;height:90%;width:90%;margin:auto;position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;}
.container
{background-color:rgb(0,0,0,.5);height:80%;width:70%;margin-left:auto;margin-right:auto;border:5px solid rgb(13, 255, 0);position:relative;border-radius:15px;}
.title
{width:70%;margin-left:auto;margin-right:auto;white-space: nowrap;}
.marquee {position:absolute;height:10%;top:85%;bottom:0;left:0;right:0;}
@media screen and(max-device-height:480px) {.container{height:60%}}
/* MENU */
.menu
{width:100%;overflow:hidden;white-space: nowrap;background-color: rgb(0,0,0,.8);display:flex;flex-direction:row;align-items:center;}
.menu a
{font-family:Samba;float: left;padding-top: 10px; padding-bottom:10px;color: white;text-decoration: none;font-size: 2vw;width: 25%;text-align: center;word-spacing:-3px;overflow:hidden;white-space: nowrap;}
.menu a:hover
{color:rgb(165, 30, 255);}
/* BOTTOM MENU */
.social
{background-color: rgb(0,0,0,.8);width:100%;position:absolute;bottom:0;overflow:hidden;display:flex;flex-direction:row;align-items:center;}
.icon
{width:14.287%;float:left;text-align: center;padding-top:10px;padding-bottom:10px;}
.icon:hover
{background-color:rgb(165, 30, 255);}
.homepage
{height:65%;width:95%;margin-left:auto;margin-right:auto;overflow:hidden;margin-top:30px;margin-bottom:30px;}
/* TEXT STYLING */
h1
{margin-bottom:-3.2px;padding-left:10px;color: black;font-size:6vw;
font-style:italic;font-weight:100;position:relative;font-family:Hyper;-webkit-text-stroke-color: rgb(13, 255, 0);-webkit-text-stroke-width:3px; -webkit-animation: h1 2s ease-in-out infinite alternate;-moz-animation: h1 2s ease-in-out infinite alternate;animation: h1 2s ease-in-out infinite alternate;}
h3
{font-family:Samba;font-size:2.5rem;font-weight:100px;color:rgb(165, 30, 255);text-shadow:.5px .5px white;padding-left:30px;padding-top:10px;}
p
{letter-spacing:6px;color:rgb(165, 30, 255);font-size:2vw;font-weight:100;font-family:Samba;white-space: nowrap;position:absolute; margin: 0;height:100%;text-align: center;text-shadow: .5px .5px white;-moz-transform: translateX(100%);-webkit-transform: translateX(100%);transform: translateX(100%);-moz-animation: scroll-left 1s linear infinite;-webkit-animation: scroll-left 1s linear infinite;animation: scroll-left 15s linear infinite;}
p > b
{color: rgb(13, 255, 0);font-weight:100;font-size:2vw;}
.text
{font-family:Samba;font-size:2.5vw;color:white; padding-left:40px;padding-right:40px;text-align:justify;padding-top:10px;
overflow:hidden;letter-spacing:.1rem;}
a {font-family:Samba;}
/* IMAGE SCROLLBAR HORIZONTAL */
.imagecontainer
{height:90%;width:100%;overflow:auto;position:absolute;display: flex;
flex-wrap: nowrap;
overflow-x: auto;}
div.scroll-container
{flex: 0 0 auto;padding-left:5px;padding-right:5px;}
.imagecontainer::-webkit-scrollbar {
display: none;
}
/* IMAGE CARD */
.card{margin-left:5px;margin-right:5px;height:80%;float:left;max-width:200px;background-color:rgb(165, 30, 255,.2);display:flex;flex-direction:column;position:relative;border-radius:15px;border: 3px solid rgb(165, 30, 255);position:relative;margin-top:5px;}
.cardimage{width:100%;height:80%;margin:0;padding:0;}
.wrapper{height:35%;display:grid;width:100%;position:absolute;bottom:0;margin:0;}
.cardtitle{padding-left:15px;font-size:1.7rem;width:100%;height:100%;color:white;background-color: rgb(165, 30, 255);display:flex;align-items:center;}
.cardlink{font-size:2.2rem;margin-left:auto;margin-right:auto; width:85%;height:100%;display:flex;align-items:center;justify-content:right;}
.svg{padding-right:7px;padding-top:5px;}
.cardlink > a {color:white;text-decoration:none}
.cardlink > a:hover {color:rgb(13, 255, 0);font-weight:bold;}
/* TITLE ANIMATION */
@-webkit-keyframes h1
{from
{text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px rgb(13, 255, 0), 0 0 10px rgb(13, 255, 0), 0 0 10px rgb(13, 255, 0), 0 0 10px rgb(13, 255, 0), 0 0 10px rgb(13, 255, 0);}
to
{-webkit-text-stroke-color: rgb(165, 30, 255);-webkit-text-stroke-width:3px; text-shadow: 0 0 10px rgb(218, 172, 248), 0 0 10px rgb(218, 172, 248), 0 0 10px rgb(218, 172, 248), 0 0 10px rgb(218, 172, 248), 0 0 10px rgb(218, 172, 248), 0 0 10px rgb(218, 172, 248);}}
/* MARQUEE ANIMATION */
@-moz-keyframes
scroll-left
{0%
{-moz-transform: translateX(100%);}
100%
{-moz-transform: translateX(-100%);}}
@-webkit-keyframes scroll-left
{0%
{-webkit-transform: translateX(100%);}
100%
{-webkit-transform: translateX(-100%);}}
@keyframes
scroll-left
{0%
{-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);}
100%
{-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);}}