1.  
2. <link href="https://fonts.googleapis.com/css?family=Poppins:700&display=swap" rel="stylesheet">
3. <style type="text/css">
4.     .close {
5.         position: absolute;
6.         right: 18px;
7.         top: 0px;
8.         width: 18px;
9.         height: 18px;
10.     }
11.     .close:before, .close:after {
12.         position: absolute;
13.         left: 15px;
14.         content: ' ';
15.         height: 18px;
16.         width: 2px;
17.         background-color: rgb(218, 218, 218);
18.     }
19.     .close:hover {
20.         cursor: pointer;
21.     }
22.     .close:before {
23.         transform: rotate(45deg);
24.     }
25.     .close:after {
26.         transform: rotate(-45deg);
27.     }
28.  
29.     #yl-popup-popupOknoPixel_2{
30.         top: 50%;
31.         transform: translateY(-50%);
32.     }
33.     #popup-form@(popupName){
34.         margin-bottom: 1em;
35.     }
36.    
37.     #popup-container{
38.         background-image: url('https://oknoplast.user.com/media/uploads/kj7d8v-oknoplast/pop-up-pixel-8a832526d698.jpg');
39.         box-sizing: border-box;
40.         -webkit-box-sizing: border-box;
41.         max-width: 1000px;
42.         margin: 0 auto;
43.         background-size: cover;
44.         background-position: center center;
45.         height: 500px;
46.         position: absolute;
47.         top: 50%;
48.         left: 50%;
49.         transform: translate(-50%, -50%);
50.     }
51.  
52.     #qpContent, #qpContent *{
53.         box-sizing: border-box;
54.         -webkit-box-sizing: border-box;
55.     }
56.     #qpContent{
57.         display: flex;
58.         align-items: center;
59.         padding: 40px;
60.         text-align: center;
61.         font-family: Calibri, Arial, sans-serif;
62.         background: black;
63.         background: rgba(0, 0, 0, 0.8);
64.         color: white;
65.         width: 50%;
66.         float: right;
67.         height: 500px;
68.         letter-spacing: 0.05em;
69.         overflow: hidden;
70.  
71.     }
72.     #qpThankYou{
73.         margin-top: 50%;
74.         transform: translateY(-50%);
75.     }
76.    
77.     #qpContent input[type=email]{
78.         background: #4F5C6C;
79.         border: none;
80.         width: 100%;
81.         height: 54px;
82.         line-height: 54px;
83.         margin: 10px 0 40px;
84.         padding: 0 15px;
85.         color: white;
86.         outline:none !important;
87.     }
88.     .ue_form>form {
89.         height: 100vh;
90.     display: flex;
91.     }
92.     #popup-container{
93.     align-self: center;
94.     }
95.     .qpButton{
96.         font-family: Poppins, Arial, sans-serif;
97.         font-weight: bold;
98.         width: 171px;
99.         font-size: 15px;
100.         height: 42px;
101.         line-height: 42px;
102.         text-align: center;
103.         background: #00B2EC;
104.         border-radius: 42px;
105.         border: none;
106.         color: white;
107.         text-transform: uppercase;
108.         margin-bottom: 40px;
109.         text-decoration: none;
110.         display: inline-block;
111.     }
112.     .qpButton:last-child{
113.         margin-bottom: 0;
114.     }
115.     .qpP, .qpH{
116.         font-size: 17px;
117.         line-height: 17px;
118.     }
119.     .qpH{
120.         font-weight: bold;
121.         margin-bottom: 20px;    
122.         text-transform: uppercase;
123.     }
124.     .qpP{
125.         margin-bottom: 40px;    
126.  
127.     }
128.     .qpInfoSmall{
129.         font-size: 13px;
130.         color: #979797;
131.         text-align: left;
132.         letter-spacing: 0;
133.     }
134.     .qpInfo{
135.         font-size: 14px;
136.         color: #979797;
137.         text-align: left;
138.         line-height: 15px;
139.         letter-spacing: -0.2px;
140.         padding-bottom: 30px;
141.     }
142.     .qpInfo a{
143.         text-decoration: underline;
144.         color: #00c0ff;
145.     }
146.  
147.     ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
148.     color: #ffffff;
149.     }
150.     ::-moz-placeholder { /* Firefox 19+ */
151.     color: #ffffff;
152.     }
153.     :-ms-input-placeholder { /* IE 10+ */
154.     color: #ffffff;
155.     }
156.     :-moz-placeholder { /* Firefox 18- */
157.     color: #ffffff;
158.     }
159.     @@media screen and (max-width: 1099px){
160.         .qpH, .qpP{
161.             font-size: 16px;
162.         }
163.     }
164.     @@media screen and (max-width: 749px){
165.         #popup-container{
166.             height: auto;
167.         }
168.         #qpContent{
169.             height: auto;
170.             width: auto;
171.             float: none;
172.         }
173.     }
174.    
175. </style>
176.  
177.     <div id="popup-container">
178.         <p id="hide-popup" class="close"></p>
179.     <div id="qpContent">
180.         <div id="qpForm">
181.             <div class="qpH">
182.                 Dowiedz się więcej o oknach Pixel
183.             </div>
184.             <div class="qpP">
185.                 Okna Pixel to nie tylko wyjątkowy design. To także technologia, która zapewnia więcej światła w pomieszczeniu.<br />
186.                 Jeśli chcesz dowiedzieć się o nich więcej pozostaw swój adres e-mail.
187.             </div>
188.             <div id="qpForm">
189.                 <form id="popup-form@(popupName)">
190.                     [:email class="ue_input"]
191.                     <button id="submitButton" type="submit" class="qpButton">Chcę!</button>
192.                 </form>
193.                 <div class='qpInfo'>
194.                     Administratorem podanych danych osobowych jest Oknoplast Sp. z o.o. z siedzibą w Ochmanowie, Ochmanów 117, 32-003 Podłęże. Więcej informacji
195.                     o przetwarzaniu danych osobowych i przysługujących Państwu prawach można znaleźć w <a href="https://oknoplast.com.pl/polityka-prywatnosci/" target="_blank">Polityce Prywatności</a>
196.                 </div>
197.             </div>
198.         </div>
199.         <div id="qpThankYou" style="display: none;">
200.             <div class="qpH">
201.                 POTWIERDŹ SWÓJ ADRES E-MAIL
202.             </div>
203.             <div class="qpP">
204.                 Wejdź teraz na swoją skrzynkę mailową
205.                 i kliknij w link, który wysłaliśmy Ci
206.                 w wiadomości, aby potwierdzić zapis do newslettera. Jeśli nie widzisz wiadomości, sprawdź inne zakładki.
207.                 <br />
208.                 <br />
209.                 Jeśli masz inne pytania, skontaktuj
210.                 się z najbliższym salonem OKNOPLAST.
211.             </div>
212.             <a class="qpButton" href="https://oknoplast.com.pl/znajdz-salon/" target="_blank">Znajdź salon</a>
213.         </div>
214.     </div>
215. </div>
216.    
217.     <script type="text/javascript">
218.     let hideCross = document.querySelector('#hide-popup');
219.     let popup = document.querySelector('#popup-container');
220.    
221.     hideCross.addEventListener('click', () => {
222.         popup.style.display = 'none'
223.     })
224.  
225.     (function () {
226.         $('#popup-form@(popupName)').submit(function (e) {
227.             e.preventDefault();
228.             var validationPassed = true;
229.             var email = $('#popup-container .yl-email').val();
230.             if (!email)
231.                 validationPassed = false;
232.             if (validationPassed)
233.             {
234.                 Monitor.TrackForm("popup-form@(popupName)", 2);
235.                 $('#qpForm').hide();
236.                 $('#qpThankYou').show();
237.             }
238.         });
239.  
240.     })();
241.  
242.     var isIE = /*@@cc_on!@@*/ false || !!document.documentMode;
243.     if(isIE){
244.         setTimeout(function(){
245.             var w = window.outerWidth;
246.             var h = window.outerHeight;
247.             window.resizeTo(w, h);
248.         }, 200);
249.     }
250. </script>
251.  
252.