update

templates_user/modal/modal-al-doors.php

@@ -0,0 +1,84 @@
+<div class="modal" id="aluminiumDoorsModal" tabindex="-1" role="dialog" aria-labelledby="aluminiumDoorsModalLabel"
+     aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-lg" role="document" style="min-width: max-content;">
+        <div class="modal-content">
+            <div style="padding: 4px 16px; margin-bottom:-32px; text-align: right">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+
+            <div class="hide-box d-flex">
+                <div style="font-size:20px; padding-right:10px;color: white; width: 200px; border-top: solid 10px #aebdcd; text-align: right; text-transform: uppercase; position: absolute; margin-top: 30px; font-weight: 600">
+                    aluminium
+                </div>
+            </div>
+
+            <div style="display: flex">
+                <div class="hide-box">
+                    <img src="/images/Modal-PL-bg.png" alt="AL-IMG"/>
+                    <img src="/images/Modal-PL-doors.jpg" alt="AL-IMG"
+                         style="box-shadow: 8px 8px 15px #00000080;  margin-left: -300px; margin-top:40px"/>
+                </div>
+                <div class="grow-box">
+                    <div style="font-size: 50px; line-height:1.1">
+                        <b>drzwi <br> aluminiowe</b>
+                        <br>
+                        zewnętrzne
+                    </div>
+
+                    <div style="margin-top: 40px">
+                        <div style="background: #567393; border-radius: 8px; padding: 0 16px; color:white; border: none;text-transform: uppercase; font-size: 32px">
+                            Dostępne od ręki
+                        </div>
+                    </div>
+
+                    <div style="display: flex; justify-content: center">
+                        <div style="font-weight:700; font-size: 5rem; color: #567393; border-bottom: solid 4px red; margin-top: 10px; margin-bottom: 20px">
+                            -35%
+                        </div>
+                    </div>
+
+                    <div style="font-weight:700; font-size: 2em; color: #567393; line-height: 1.2">
+                        wyjątkowa <br> cena
+                    </div>
+
+                    <a href="/promocje">
+                        <button style="cursor:pointer; background: black; color:white; margin: 20px; font-size: 20px; border-radius: 4px; padding: 6px 20px; border:none; text-transform: uppercase">
+                            sprawdź szczegóły
+                        </button>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style type="text/css">
+    @media (max-width: 600px) {
+        .hide-box {
+            display: none !important;
+        }
+
+        .grow-box {
+            width: 100%;
+            padding: 0 20px;
+        }
+    }
+    @media (min-width: 600px) {
+        .grow-box {
+            padding: 0 80px;
+        }
+    }
+
+    .grow-box{
+        margin-top: 60px;
+        text-align: center;
+        text-transform: uppercase
+    }
+
+    .d-flex{
+        display: flex;
+    }
+</style>
+