Gregniuki commited on
Commit
945ef8d
·
1 Parent(s): 9a2b7d4

Upload style 2.css

Browse files
Files changed (1) hide show
  1. static/style 2.css +145 -0
static/style 2.css ADDED
@@ -0,0 +1,145 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Psychedelic Styles */
2
+ @import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
3
+
4
+ /* Reset CSS */
5
+ * {
6
+ margin: 0;
7
+ padding: 0;
8
+ box-sizing: border-box;
9
+ }
10
+
11
+ body {
12
+ font-family: 'Kaushan Script', cursive;
13
+ text-align: center;
14
+ background-color: #000;
15
+ color: #FFF;
16
+ overflow-x: hidden;
17
+ }
18
+
19
+ /* Gradient animation for backgrounds */
20
+ @keyframes gradient-animation {
21
+ 0% { background-position: 0% 50%; }
22
+ 50% { background-position: 100% 50%; }
23
+ 100% { background-position: 0% 50%; }
24
+ }
25
+
26
+ /* Header styles with a dynamic gradient */
27
+ header {
28
+ padding: 20px 0;
29
+ background-image: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00ab, #ff0000);
30
+ background-size: 300% 300%;
31
+ animation: gradient-animation 10s ease infinite;
32
+ color: white;
33
+ text-align: center;
34
+ }
35
+
36
+ /* Nav bar links with a glow effect */
37
+ nav a {
38
+ text-decoration: none;
39
+ color: #FFF;
40
+ background-color: #000;
41
+ padding: 10px;
42
+ border-radius: 5px;
43
+ transition: background-color 0.3s ease-in-out;
44
+ }
45
+
46
+ nav a:hover {
47
+ box-shadow: 0 0 10px #FFF, 0 0 40px #FFF, 0 0 80px #FFF;
48
+ }
49
+
50
+ /* Psychedelic button styles */
51
+ button {
52
+ background: #8518f2; /* Fallback for browsers that do not support gradients */
53
+ background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00ab);
54
+ border: none;
55
+ color: white;
56
+ padding: 10px 20px;
57
+ cursor: pointer;
58
+ border-radius: 5px;
59
+ animation: gradient-animation 15s ease infinite;
60
+ font-family: 'Kaushan Script', cursive;
61
+ font-size: 1.1em;
62
+ transition: transform 0.2s ease;
63
+ }
64
+
65
+ button:hover {
66
+ transform: scale(1.05);
67
+ }
68
+
69
+ /* Main content with psychedelic patterns */
70
+ .main-content {
71
+ padding: 50px;
72
+ background-image: url('/static/psychedelic-pattern.png'); /* Replace with the actual path to your psychedelic pattern image */
73
+ background-size: cover;
74
+ text-align: center;
75
+ animation: colorChange 4s infinite;
76
+ mix-blend-mode: overlay;
77
+ }
78
+
79
+
80
+ .background-container {
81
+ position: relative;
82
+ background-image: url('/static/psychedelic-pattern.png');
83
+ background-size: cover;
84
+ /* Ensure the container is large enough to display the content */
85
+ min-height: 100vh; /* Example height */
86
+ }
87
+
88
+ .color-overlay {
89
+ position: absolute;
90
+ top: 0;
91
+ left: 0;
92
+ right: 0;
93
+ bottom: 0;
94
+ animation: colorChange 10s infinite;
95
+ mix-blend-mode: overlay; /* Adjust blending mode as needed */
96
+ z-index: 1;
97
+ }
98
+ .background-container > *:not(.color-overlay) {
99
+ position: relative;
100
+ z-index: 2;
101
+ }
102
+ @keyframes colorChange {
103
+ 0% { background-color: rgba(255, 0, 0, 0.6); } /* Red with transparency */
104
+ 33% { background-color: rgba(0, 255, 0, 0.6); } /* Green with transparency */
105
+ 66% { background-color: rgba(0, 0, 255, 0.6); } /* Blue with transparency */
106
+ 100% { background-color: rgba(255, 0, 0, 0.6); } /* Back to Red */
107
+ }
108
+ /* Footer with wave-like pattern */
109
+ /*footer {
110
+ padding: 20px 0;
111
+ background-image: linear-gradient(45deg, #ff00ab, #002bff, #00ffd5, #48ff00, #fffb00, #ff7300, #ff0000);
112
+ background-size: 300% 300%;
113
+ animation: gradient-animation 15s ease infinite;
114
+ text-align: center;
115
+ color: white;
116
+ }
117
+ */
118
+ @keyframes gradient-and-color-animation {
119
+ 0% {
120
+ background-color: blue; /* Example color */
121
+ background-position: 0% 50%;
122
+ }
123
+ 50% {
124
+ background-color: green; /* Example color */
125
+ background-position: 100% 50%;
126
+ }
127
+ 100% {
128
+ background-color: red; /* Example color */
129
+ background-position: 0% 50%;
130
+ }
131
+ }
132
+
133
+ footer {
134
+ padding: 20px 0;
135
+ background-image: linear-gradient(45deg, #ff00ab, #002bff, #00ffd5, #48ff00, #fffb00, #ff7300, #ff0000);
136
+ background-size: 300% 300%;
137
+ animation: gradient-and-color-animation 15s ease infinite;
138
+ text-align: center;
139
+ color: white;
140
+ }
141
+
142
+ /* Media queries for responsiveness */
143
+ @media (max-width: 768px) {
144
+ /* Adjust styles for smaller screens */
145
+ }