Merge pull request #3793 from giuzep9/master

Change to serve as public guestbook

Author: w3schools-test

index.html

@@ -104,6 +104,107 @@ <h3>Contribute</h3>
             <h1>Thank you!</h1>
             <p>Hello from ZA.</p>
 
+            <!-- Josep Méndez's Start -->
+            <div class="container-DL">
+                <div class="flip-card-DL">
+                    <div class="flip-card-inner-DL" style="width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; position: relative;">
+                        <div class="flip-card-front-DL">
+                            <h1 class="flip-card-front-DL-h1">
+                                U talking to me?
+                            </h1>
+                            <p style="font-size: small;">hovering flips</p>
+                        </div>
+                        <div class="flip-card-back-DL">
+                            <h1 class="flip-card-back-DL-h1">
+                                Josep Méndez &#128075;
+                            </h1>
+                            <p style="font-size: medium;">Palma de Mallorca / SPAIN</p>
+                            <p style="font-size: medium;">2025-02-04</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <style>
+                .flip-card-DL:hover .flip-card-inner-DL {
+                    transform: rotateY(180deg);
+                }
+
+                .flip-card-DL {
+                    font-family: 'Roboto', sans-serif;
+                    width: 350px;
+                    height: 400px;
+                    perspective: 1100px;
+                }
+
+                .flip-card-back-DL {
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                    border: 1px solid blue;
+                    border-radius: 1rem;
+                    background: #000000;
+                    color: blue;
+                    box-shadow: 2px 10px 50px 10px blue;
+                    backface-visibility: hidden;
+                    transform: rotateY(180deg);
+                }
+
+                .flip-card-back-DL-h1 {
+                    font-family: 'Roboto', sans-serif;
+                    font-size: 22px;
+                    background-color: black;
+                    color: lightblue;
+                    padding: 0.5rem 1rem;
+                    border: 0.25rem solid blue;
+                    box-shadow: 5px 5px 50px 10px blue;
+                    border-radius: 8px;
+                    margin: 0 0 0.5rem 0;
+                }
+
+                .flip-card-front-DL {
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                    border: 1px solid yellow;
+                    border-radius: 1rem;
+                    background: yellow;
+                    color: #000000;
+                    box-shadow: -2px 10px 50px 10px black;
+                    backface-visibility: hidden;
+                }
+
+                .flip-card-front-DL-h1 {
+                    font-family: 'Roboto', sans-serif;
+                    font-size: 22px;
+                    background-color: #000000;
+                    color: #ff8c00;
+                    padding: 0.5rem 1rem;
+                    margin: 40px;
+                    border: 0.25rem solid #ff8c00;
+                    box-shadow: 10px 10px 50px 10px blue;
+                    border-radius: 8px;
+                }
+
+                .container-DL {
+                    display: flex;
+                    margin: 2rem 0.5rem;
+                    justify-content: center;
+                    gap: 1rem;
+                    flex-wrap: wrap;
+                }
+
+            </style>
+            <!-- Josep Méndez's End -->
+
             <!--Start of REFRAZ1's message-->
             <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;">
             <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>