Skip to content

Commit ade6bf7

Browse files
w3schools-testw3schools-test
authored
Merge branch 'master' into master
2 parents aee807f + 8a0b524 commit ade6bf7

File tree

1 file changed

+252
-0
lines changed

1 file changed

+252
-0
lines changed

‎index.html

Lines changed: 252 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,13 +101,121 @@ <h3>Contribute</h3>
101101

102102

103103
<!-- Insert your message below here -->
104+
<h1>Thank you!</h1>
105+
<p>Hello from ZA.</p>
104106

105107
<!--Start of REFRAZ1's message-->
106108
<div class="matrix" style="font-size: x-large; border: 0.4px solid #ccc; padding: 3%; margin: 5%;box-shadow: 2px 1px 6px #1e1f32; border-radius: 10px;">
107109
<h3 style="color: rgba(32, 105, 173, 0.933);">I want to thank our mothers for taking care of us. <br>And also W3S for allowing us to learn new skills for free. <br> <br> Remember that the road called “tomorrow” leads to a city called “never” <p style="color: white;">.-. . ..-. .-. .- --.. .----</p> </h3>
108110
<h6 style="font-style: italic;"> Hello from Ukraine </h6>
109111
</div>
110112
<!--End of REFRAZ1's message-->
113+
<!--Amadou Habou Gremah Mahamadou : Farkon ayki(start) -->
114+
<div class="container-DLL">
115+
<div class="flip-card-DLL">
116+
<div class="flip-card-inner-DLL" style="width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; position: relative;">
117+
<div class="flip-card-front-DLL">
118+
<h1 class="flip-card-front-DLL-h1">
119+
A big thank you to W3Schools for the invaluable resources,
120+
and to the creator of this brilliant card flip idea!
121+
from <b>Niger</b>, "Mun gode" !
122+
123+
</h1>
124+
<p style="font-size: small;">Survoler pour retourner</p>
125+
</div>
126+
<div class="flip-card-back-DLL">
127+
<h1 class="flip-card-back-DLL-h1">
128+
GREMAH &#128076;
129+
</h1>
130+
<p>Gremah Mahamadou</p>
131+
<p style="font-size: medium;">vive le Niger/AES</p>
132+
<img src="../Drapeaux_pays_AES.jpg" alt="Aliance des Etats du Sahel" width="50%" height="100px">
133+
<p style="font-size: medium;">Monastir, le 01-31-2025</p>
134+
</div>
135+
</div>
136+
</div>
137+
</div>
138+
139+
<style>
140+
.flip-card-DLL:hover .flip-card-inner-DLL {
141+
transform: rotateX(-180deg);
142+
}
143+
144+
.flip-card-DLL {
145+
font-family: 'Roboto', sans-serif;
146+
width: 350px;
147+
height: 400px;
148+
perspective: 1100px;
149+
}
150+
151+
.flip-card-back-DLL {
152+
position: absolute;
153+
width: 100%;
154+
height: 100%;
155+
display: flex;
156+
flex-direction: column;
157+
justify-content: center;
158+
align-items: center;
159+
border:ridge 2px #f3431c;
160+
border-radius: 2rem;
161+
background: #fff;
162+
color: blue;
163+
box-shadow: 2px 10px 50px 10px blue;
164+
backface-visibility: hidden;
165+
transform: rotateX(-180deg);
166+
}
167+
168+
.flip-card-back-DLL-h1 {
169+
font-family: 'Roboto', sans-serif;
170+
font-size: 22px;
171+
background-color: black;
172+
color: lightblue;
173+
padding: 0.5rem 1rem;
174+
border: 0.25rem solid blue;
175+
box-shadow: 5px 5px 50px 10px blue;
176+
border-radius: 8px;
177+
margin: 0 0 0.5rem 0;
178+
}
179+
180+
.flip-card-front-DLL {
181+
position: absolute;
182+
width: 100%;
183+
height: 100%;
184+
display: flex;
185+
flex-direction: column;
186+
justify-content: center;
187+
align-items: center;
188+
border: 1px solid black;
189+
border-radius: 1rem;
190+
background: linear-gradient(to bottom,rgb(255, 94, 0),white, green) !important ;
191+
color: #000000;
192+
box-shadow: -2px 10px 50px 10px black;
193+
backface-visibility: hidden;
194+
}
195+
196+
.flip-card-front-DLL-h1 {
197+
font-family: 'Roboto', sans-serif;
198+
font-size: 22px;
199+
background-color: rgba(255, 94, 0, 0.785);
200+
color: black;
201+
padding: 0.5rem 1rem;
202+
margin: 40px;
203+
border: 0.25rem double black;
204+
box-shadow: 15px 10px 40px 10px white;
205+
border-radius: 100px;
206+
}
207+
208+
.container-DLL {
209+
display: flex;
210+
margin: 2rem 0.5rem;
211+
justify-content: center;
212+
gap: 1rem;
213+
flex-wrap: wrap;
214+
}
215+
216+
</style>
217+
<!--Amadou Habou Gremah Mahamadou : karshen ayki(end) -->
218+
111219

112220
<!-- Logan Swain's Start -->
113221
<div class="container-DL">
@@ -311,17 +419,147 @@ <h1 class="flip-card-back-DL-h1">
311419

312420
</style>
313421
<!-- Dariusz Larsen's End -->
422+
<!-- Earl message-->
423+
<div class="container-DL">
424+
<div class="flip-card-DL">
425+
<div class="flip-card-inner-DL" style="width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; position: relative;">
426+
<div class="flip-card-front-DL">
427+
<h1 class="flip-card-front-DL-h1">
428+
Thank you W3 schools for the great resources just started learning yesterday
429+
im kinda getting it now,
430+
and also whoever came up with this card flip idea!!!
431+
</h1>
432+
<p style="font-size: small;">Hover to flip</p>
433+
</div>
434+
<div class="flip-card-back-DL">
435+
<h1 class="flip-card-back-DL-h1">
436+
Logan &#128076;
437+
</h1>
438+
<p style="font-size: medium;">Philippines</p>
439+
<p style="font-size: medium;">01-30-2025</p>
440+
</div>
441+
</div>
442+
</div>
443+
</div>
444+
445+
<style>
446+
.flip-card-DL:hover .flip-card-inner-DL {
447+
transform: rotateY(180deg);
448+
}
449+
450+
.flip-card-DL {
451+
font-family: 'Roboto', sans-serif;
452+
width: 350px;
453+
height: 400px;
454+
perspective: 1100px;
455+
}
456+
457+
.flip-card-back-DL {
458+
position: absolute;
459+
width: 100%;
460+
height: 100%;
461+
display: flex;
462+
flex-direction: column;
463+
justify-content: center;
464+
align-items: center;
465+
border: 1px #f3431c;
466+
border-radius: 1rem;
467+
background: #000000;
468+
color: blue;
469+
box-shadow: 2px 10px 50px 10px blue;
470+
backface-visibility: hidden;
471+
transform: rotateY(180deg);
472+
}
473+
474+
.flip-card-back-DL-h1 {
475+
font-family: 'Roboto', sans-serif;
476+
font-size: 22px;
477+
background-color: black;
478+
color: lightblue;
479+
padding: 0.5rem 1rem;
480+
border: 0.25rem solid blue;
481+
box-shadow: 5px 5px 50px 10px blue;
482+
border-radius: 8px;
483+
margin: 0 0 0.5rem 0;
484+
}
485+
486+
.flip-card-front-DL {
487+
position: absolute;
488+
width: 100%;
489+
height: 100%;
490+
display: flex;
491+
flex-direction: column;
492+
justify-content: center;
493+
align-items: center;
494+
border: 1px solid #f3431c;
495+
border-radius: 1rem;
496+
background: #f3431c;
497+
color: #000000;
498+
box-shadow: -2px 10px 50px 10px black;
499+
backface-visibility: hidden;
500+
}
501+
502+
.flip-card-front-DL-h1 {
503+
font-family: 'Roboto', sans-serif;
504+
font-size: 22px;
505+
background-color: #000000;
506+
color: #5c9ef5;
507+
padding: 0.5rem 1rem;
508+
margin: 40px;
509+
border: 0.25rem solid #5c9ef5;
510+
box-shadow: 10px 10px 50px 10px blue;
511+
border-radius: 8px;
512+
}
513+
514+
.container-DL {
515+
display: flex;
516+
margin: 2rem 0.5rem;
517+
justify-content: center;
518+
gap: 1rem;
519+
flex-wrap: wrap;
520+
}
521+
522+
</style>
523+
<!-- End message -->
314524

315525
<h1>Thank you!</h1>
316526
<p>Hello from Lithuania 2025-Jan-22<p>
317527

318528
<h1>Thank you!</h1>
319529
<p>Hello from NYC where congestion pricing is now in effect!<p>
320530
<!--End of Message-->
531+
<!-- Insert your message below here -->
532+
<h1 id="main-header">Thank you, W3Schools</h1>
533+
<p class="location-text">Hello from Nairobi, Kenya</p>
534+
535+
536+
<style>
537+
#main-header {
538+
color: #007bff;
539+
font-size: 2.5em;
540+
text-transform: uppercase;
541+
font-weight: bold;
542+
margin-bottom: 20px;
543+
}
544+
.location-text {
545+
color: #333;
546+
font-size: 1.2em;
547+
font-style: italic;
548+
background-color: #fff;
549+
display: inline-block;
550+
padding: 10px 20px;
551+
border-radius: 8px;
552+
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
553+
}
554+
555+
</style>
556+
557+
<!-- End user messages -->
321558

322559
<!-- Start message -->
323560
<h1>Thank you!</h1>
324561
<p>Hello from LV.</p>
562+
325563
<!--End of Message-->
326564

327565
<!-- Start message -->
@@ -15270,6 +15508,20 @@ <h4>Hello from Clarksville Indiana, USA.</h4>
1527015508
<p>I appreciate W3Schools!</p>
1527115509
</div>
1527215510

15511+
<!-- Message from Matteo -->
15512+
<p>Hello, i'm Matteo from Italy. Thank's a lot !</p>
15513+
<!-- ^^^ -->
15514+
15515+
<div style="background: linear-gradient(180deg, green, yellow, blue, white); padding: 15px 10px; border: 1px solid black; border-radius: 10px; color: #fff; box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.5);">
15516+
<h3>Hello. I'm Marcelo Hüning from Santa Catarina, Brazil.</h3>
15517+
<p>Thank you W3Schools.</p>
15518+
</div>
15519+
15520+
<!-- Thodoris message starts here -->
15521+
<h1>W3, thanks a lot for this great course.</h1>
15522+
<p>Athens, Greece</p>
15523+
<!--End of Message-->
15524+
1527315525

1527415526
<!-- End user messages -->
1527515527

0 commit comments

Comments
 (0)