templates/themes/ottcomputer/includes/modal-confirm-offer.html.twig line 1

Open in your IDE?
  1. <style>
  2.     /* The Modal (background) */
  3.     .modal {
  4.         display: none; /* Hidden by default */
  5.         position: fixed; /* Stay in place */
  6.         z-index: 1010; /* Sit on top */
  7.         padding-top: 150px; /* Location of the box */
  8.         left: 0;
  9.         top: 0;
  10.         width: 100%; /* Full width */
  11.         height: 100%; /* Full height */
  12.         background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
  13.     }
  15.     /* Modal Content */
  16.     .modal-content {
  17.         position: relative;
  18.         background-color: #4F3175;
  19.         margin: auto;
  20.         padding: 0;
  21.         width: 50%;
  22.         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  23.         animation-name: animatetop;
  24.         animation-duration: 0.4s
  25.     }
  27.     /* Modal Header */
  28.     .modal-header {
  29.         padding: 2px 16px;
  30.         color: white;
  31.     }
  33.     /* Modal Body */
  34.     .modal-body {
  35.         padding: 6%;
  36.     }
  38.     /* The Close Button */
  39.     .close {
  40.         color: #aaaaaa;
  41.         float: right;
  42.         font-size: 28px;
  43.         font-weight: bold;
  44.     }
  46.     .close:hover,
  47.     .close:focus {
  48.         color: #000;
  49.         text-decoration: none;
  50.         cursor: pointer;
  51.     }
  53.     #myModalConfirmOffer a {
  54.         color: #ffffff;
  55.         text-decoration: underline;
  56.     }
  58.     @media only screen and (max-width: 600px) {
  59.         /*!* The Modal (background) *!*/
  60.         .modal {
  61.             padding-top: 0;
  62.         }
  63.         /*!* The Modal (background) *!*/
  64.         .modal-content {
  65.             width: 100%; /* Full width */
  66.             height: 100%; /* Full width */
  67.         }
  68.     }
  70.     @media only screen and (max-width: 1000px) and (max-height: 450px) {
  71.         /* The Modal (background) */
  72.         .modal {
  73.             padding-top: 5%;
  74.         }
  75.         /* The Modal (background) */
  76.         .modal-content {
  77.             width: 75%; /* Full width */
  78.         }
  79.     }
  81.     /* Add Animation */
  82.     @keyframes animatetop {
  83.         from {
  84.             top: -300px;
  85.             opacity: 0
  86.         }
  87.         to {
  88.             top: 0;
  89.             opacity: 1
  90.         }
  91.     }
  92. </style>
  93.     <div id="myModalConfirmOffer" class="modal">
  94.     <div class="modal-content">
  95.         <div class="modal-header">
  96.             <span id="btnCloseModalConfirmOffer" class="close">&times;</span>
  97.         </div>
  98.         <div class="grid-x grid-margin-x modal-body">
  99.             <div class="cell medium-12">
  100.                 <div class="grid-x grid-margin-y">
  101.                     <div class="cell small-12 large-11 large-offset-1">
  102.                         <h1 class="text-center" style="color: #FFFFFF;">
  103.                             {{ "BESTELLUNG AUFGEBEN"|trans }}
  104.                         </h1>
  105.                     </div>
  106.                 </div>
  107.                 <div class="grid-margin-y">
  108.                     <p class="text-center" style="color: #FFFFFF; font-size: 18px;">
  109.                         {{ "Indem Sie auf"|trans }} <b>{{ "JETZT KAUFEN"|trans }}</b>
  110.                         {{ "klicken geben Sie Ihre Bestellung bei CAD2CUT verbindlich auf und stimmen den"|trans }}
  111.                         <b><a href="{{ startSite ~ 'agb' }}"
  112.                               target="_blank">{{ "Allgemeinen Geschäftsbedingungen"|trans }}</a></b> {{ "sowie den"|trans }}
  113.                         <b><a href="{{ startSite ~ 'datenschutz' }}"
  114.                               target="_blank">{{ "Datenschutzbestimmungen"|trans }}</a></b> {{ "zu."|trans }}
  115.                     </p>
  116.                 </div>
  117.                 <br>
  118.                 <div class="grid-x grid-margin-x">
  119.                     <div class="cell small-6 large-5 large-offset-1">
  120.                         <button id="btnCancelModalConfirmOffer" class="button expanded"
  121.                                 style="background: #FFFFFF; color: #4F3175">{{ "BESTELLUNG ÄNDERN"|trans }}</button>
  122.                     </div>
  123.                     <div class="cell small-6 large-5">
  124.                         <button id="btnConfirModalConfirmOffer"
  125.                                 class="button expanded secondary">{{ "JETZT KAUFEN"|trans }}</button>
  126.                     </div>
  127.                 </div>
  128.             </div>
  129.         </div>
  130.     </div>
  131. </div>