Merge pull request #3758 from SwainStyle1/master

added my personal message to index.html

Author: w3schools-test

index.html

@@ -102,6 +102,108 @@ <h3>Contribute</h3>
 
 	        <!-- Insert your message below here -->
 
+            <!-- Logan Swain'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">
+                                Thank you W3 schools for the great resources,
+                                and also whoever came up with this card flip idea
+                            </h1>
+                            <p style="font-size: small;">Hover to flip</p>
+                        </div>
+                        <div class="flip-card-back-DL">
+                            <h1 class="flip-card-back-DL-h1">
+                                Logan &#128076;
+                            </h1>
+                            <p style="font-size: medium;">Indiana / US</p>
+                            <p style="font-size: medium;">01-22-2025</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 #f3431c;
+                    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 #f3431c;
+                    border-radius: 1rem;
+                    background: #f3431c;
+                    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: #5c9ef5;
+                    padding: 0.5rem 1rem;
+                    margin: 40px;
+                    border: 0.25rem solid #5c9ef5;
+                    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>
+            <!-- Logan Swain's End -->
+
             <!-- Dariusz Larsen's Start -->
             <div class="container-DL">
                 <div class="flip-card-DL">