1
+ <style>
2
+ body {
3
+ font- family: Arial, Helvetica, sans- serif;
4
+ font- weight: 100;
5
+ background: # e9ebeb ;
6
+ margin- left: 130px;
7
+ margin- to p: 50px;
8
+ - webkit- transfor m: translate3D(0, 0, 0);
9
+ }
10
+
11
+ # start {
12
+ position : absolute;
13
+ border : 10px solid transparent;
14
+ box-shadow : 2px 2px 10px # 000000 ;
15
+ width : 105% ;
16
+ height : 110% ;
17
+ margin : 0 ;
18
+ padding : 0 ;
19
+ opacity : 1 ;
20
+ left : 75px ;
21
+ font-size : 75px ;
22
+ background : -webkit-linear-gradient (# 00aff9, # 0086c3 );
23
+ background : linear-gradient (# 00aff9, # 0086c3 );
24
+ color : # 342c2a ;
25
+ -webkit-animation : slide 1.5s ease-in-out forwards;
26
+ animation : slide 1.5s ease-in-out forwards;
27
+
28
+ }
29
+ # start2 {
30
+ position : absolute;
31
+ border : 10px solid transparent;
32
+ box-shadow : 2px 2px 10px # 000000 ;
33
+ width : 105% ;
34
+ height : 110% ;
35
+ margin : 0 ;
36
+ padding : 0 ;
37
+ opacity : 1 ;
38
+ left : 75px ;
39
+ font-size : 75px ;
40
+ background : -webkit-linear-gradient (# 00aff9, # 0086c3 );
41
+ background : linear-gradient (# 00aff9, # 0086c3 );
42
+ color : # 342c2a ;
43
+ -webkit-animation : slide 1.5s ease-in-out forwards;
44
+ animation : slide 1.5s ease-in-out forwards;
45
+
46
+ }
47
+ # start3 {
48
+ position : absolute;
49
+ border : 10px solid transparent;
50
+ box-shadow : 2px 2px 10px # 000000 ;
51
+ width : 105% ;
52
+ height : 110% ;
53
+ margin : 0 ;
54
+ padding : 0 ;
55
+ opacity : 1 ;
56
+ left : 75px ;
57
+ font-size : 75px ;
58
+ background : -webkit-linear-gradient (# 00aff9, # 0086c3 );
59
+ background : linear-gradient (# 00aff9, # 0086c3 );
60
+ color : # 342c2a ;
61
+ -webkit-animation : slide 1.5s ease-in-out forwards;
62
+ animation : slide 1.5s ease-in-out forwards;
63
+
64
+ }
65
+
66
+
67
+ # slide1 , # slide2 , # slide3 , # slide4 {
68
+ object-fit : cover;
69
+ position : absolute;
70
+ width : 100% ;
71
+ height : 100% ;
72
+ margin : 0 ;
73
+ padding : 0 ;
74
+ opacity : 0 ;
75
+ left : 80px ;
76
+ background : -webkit-linear-gradient (# 00aff9, # 0086c3 );
77
+ background : linear-gradient (# 00aff9, # 0086c3 );
78
+ color : # 342c2a ;
79
+ font-size : 75px ;
80
+ border : 10px solid transparent;
81
+ }
82
+
83
+ # slide5 , # slide6 , # slide7 , # slide8 , # slide9 {
84
+ object-fit : cover;
85
+ position : absolute;
86
+ width : 100% ;
87
+ height : 100% ;
88
+ margin : 0 ;
89
+ padding : 0 ;
90
+ opacity : 0 ;
91
+ left : 80px ;
92
+ background : -webkit-linear-gradient (# 00aff9, # 0086c3 );
93
+ background : linear-gradient (# 00aff9, # 0086c3 );
94
+ color : # 342c2a ;
95
+ font-size : 75px ;
96
+ border : 10px solid transparent;
97
+ }
98
+ # slide95 , # slide96 , # slide97 , # slide98 , # slide99 {
99
+ object-fit : cover;
100
+ position : absolute;
101
+ width : 100% ;
102
+ height : 100% ;
103
+ margin : 0 ;
104
+ padding : 0 ;
105
+ opacity : 0 ;
106
+ left : 80px ;
107
+ background : -webkit-linear-gradient (# 00aff9, # 0086c3 );
108
+ background : linear-gradient (# 00aff9, # 0086c3 );
109
+ color : # 342c2a ;
110
+ font-size : 75px ;
111
+ border : 10px solid transparent;
112
+ }
113
+
114
+ img {
115
+ text-align : center;
116
+ margin : 0 ;
117
+ height : 300px ;
118
+ width : 500px ;
119
+ }
120
+
121
+ .wrapper {
122
+ width : 500px ;
123
+ margin : 0 auto;
124
+ }
125
+ .wrapper2 {
126
+ width : 500px ;
127
+ margin : 0 auto;
128
+ }
129
+ .wrapper3 {
130
+ width : 500px ;
131
+ margin : 0 auto;
132
+ }
133
+ .container {
134
+ position : relative;
135
+ top : 0 ;
136
+ left : 0 ;
137
+ width : 500px ;
138
+ height : 300px ;
139
+ margin : 0 ;
140
+ padding : 0 ;
141
+
142
+
143
+
144
+ }
145
+
146
+ .container2 {
147
+ position : relative;
148
+ top : 50px ;
149
+ left : 0 ;
150
+ width : 500px ;
151
+ height : 300px ;
152
+ margin : 0 ;
153
+ padding : 0 ;
154
+
155
+ }
156
+ .container3 {
157
+ position : relative;
158
+ top : 50px ;
159
+ left : 0 ;
160
+ width : 500px ;
161
+ height : 300px ;
162
+ margin : 0 ;
163
+ padding : 0 ;
164
+
165
+ }
166
+
167
+ .navigation {
168
+ position : absolute;
169
+ bottom : 0px ;
170
+ left : -140px ;
171
+ margin : 0 ;
172
+
173
+ padding : 0 ;
174
+ }
175
+
176
+ .navigation2 {
177
+ position : absolute;
178
+ bottom : 0px ;
179
+ left : -140px ;
180
+ margin : 0 ;
181
+
182
+ padding : 0 ;
183
+ }
184
+
185
+ .navigation3 {
186
+ position : absolute;
187
+ bottom : 0px ;
188
+ left : -140px ;
189
+ margin : 0 ;
190
+
191
+ padding : 0 ;
192
+ }
193
+ li {
194
+ color : transparent;
195
+ }
196
+ .btn {
197
+ float : left;
198
+ margin : 6px ;
199
+ width : 120px ;
200
+ height : 63px ;
201
+ text-align : center;
202
+ border : 1px solid # fff ;
203
+ box-shadow : 0px 0px 10px rgba (0 , 0 , 0 , 0.3 );
204
+ -webkit-transition : 0.1s ease-in;
205
+ transition : 0.1s ease-in;
206
+ }
207
+
208
+ .btn a img {
209
+ display : block;
210
+ text-decoration : none;
211
+ height : 63px ;
212
+ width : 120px ;
213
+ letter-spacing : 2px ;
214
+ font-size : 12px ;
215
+ }
216
+
217
+ .btn : hover {
218
+ -webkit-transition : 0.1s ease-in;
219
+ transition : 0.1s ease-in;
220
+ -webkit-transform : scale (1.2 );
221
+ transform : scale (1.2 );
222
+ background : # 00aff9 ;
223
+
224
+ }
225
+
226
+
227
+ # slide1 : target , # slide2 : target , # slide3 : target , # slide4 : target {
228
+ font-size : 75px ; opacity : 1 ;
229
+ }
230
+ # slide5 : target , # slide6 : target , # slide7 : target , # slide8 : target , # slide9 : target {
231
+ font-size : 75px ; opacity : 1 ;
232
+ }
233
+ # slide95 : target , # slide96 : target , # slide97 : target , # slide98 : target , # slide99 : target {
234
+ font-size : 75px ; opacity : 1 ;
235
+ }
236
+
237
+ </ style>
0 commit comments