Skip to content

Commit 4ab2bfd

Browse files
committed
Upload Certificates pages w/ css and its and followed pic
as topic
1 parent 8e5c227 commit 4ab2bfd

20 files changed

+680
-0
lines changed

CertificateShowcasePage2023.html

+443
Large diffs are not rendered by default.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
<style>
2+
body {
3+
font-family: Arial, Helvetica, sans-serif;
4+
font-weight: 100;
5+
background: #e9ebeb;
6+
margin-left: 130px;
7+
margin-top: 50px;
8+
-webkit-transform: 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>
Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading

0 commit comments

Comments
 (0)