Merge pull request #3879 from Ragnaslav/patch-1

Update index.html

Author: w3schools-test

index.html

@@ -100,6 +100,107 @@ <h3>Contribute</h3>
             </div>
 
 	        <!-- Insert your message below here -->
+
+		 <!--Message from Ragnaslav, cool cards BTW -->
+            <div class="container-DLL">
+            <div class="flip-card-DLL">
+                <div class="flip-card-inner-DLL" style="width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; position: relative;">
+                    <div class="flip-card-front-DLL">
+                        <h1 class="flip-card-front-DLL-h1">
+                            From <b>Ukraine</b> with love!
+                            
+                        </h1>
+                        <p style="font-size: small;">Hope this </p>
+                    </div>
+                    <div class="flip-card-back-DLL">
+                        <h1 class="flip-card-back-DLL-h1">
+                            Odesa &#128076;
+                        </h1>
+                        <p>Peaceful sky to all of us</p>
+                    </div>
+                </div>
+            </div>
+            </div>
+
+            <style>
+            .flip-card-DLL:hover .flip-card-inner-DLL {
+                transform: rotateX(-180deg);
+            }
+
+            .flip-card-DLL {
+                font-family: 'Roboto', sans-serif;
+                width: 350px;
+                height: 400px;
+                perspective: 1100px;
+            }
+
+            .flip-card-back-DLL {
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                border:ridge 2px #f3431c;
+                border-radius: 2rem;
+                background: #fff;
+                color: blue;
+                box-shadow: 2px 10px 50px 10px blue;
+                backface-visibility: hidden;
+                transform: rotateX(-180deg);
+            }
+
+            .flip-card-back-DLL-h1 {
+                font-family: 'Roboto', sans-serif;
+                font-size: 22px;
+                background-color: yellow;
+                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-DLL {
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                border: 1px solid black;
+                border-radius: 1rem;
+                background: linear-gradient(to bottom,rgb(255, 94, 0),white, green) !important ;
+                color: #000000;
+                box-shadow: -2px 10px 50px 10px black;
+                backface-visibility: hidden;
+            }
+
+            .flip-card-front-DLL-h1 {
+                font-family: 'Roboto', sans-serif;
+                font-size: 22px;
+                background-color: rgba(255, 94, 0, 0.785);
+                color: black;
+                padding: 0.5rem 1rem;
+                margin: 40px;
+                border: 0.25rem double black;
+                box-shadow: 15px 10px 40px 10px white;
+                border-radius: 100px;
+            }
+
+            .container-DLL {
+                display: flex;
+                margin: 2rem 0.5rem;
+                justify-content: center;
+                gap: 1rem;
+                flex-wrap: wrap;
+            }
+
+            </style>
+        <!--Ragnaslav's message end-->
 
                 <!--IcyJuicyBob's message start-->
                 <div class="w3-container w3-round-large w3-card-4"