API tools faq
paste
Advertisement
AdamBB

Merge templates

AdamBB
Dec 9th, 2020
1,592
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 11.71 KB | None | 0 0
raw download clone embed print report
  1. <head>
  2.   <style>
  3.     * {
  4.         box-sizing: border-box;
  5.       }
  6.       .main-content-t1 {
  7.         background-color: #AA0000;
  8.         font-family: Arial, Helvetica, sans-serif;
  9.       }
  10.  
  11.       .main-content-t1 .logo {
  12.         padding: 8px;
  13.       }
  14.  
  15.       .main-content-t1 .logo__gasker {
  16.         max-width: 100%;
  17.         max-height: 100%;
  18.         background-color: #fff;
  19.       }
  20.  
  21.       .main-content-t1 .main-header {
  22.         text-align: center;
  23.         padding: 20px;
  24.       }
  25.  
  26.       .main-content-t1 .main-header .title {
  27.         color: #fff;
  28.         margin-bottom: 15px;
  29.       }
  30.  
  31.       .main-content-t1 .main-header .description {
  32.         font-weight: 600;
  33.       }
  34.  
  35.       .main-content-t1 .big {
  36.         font-size: 40px;
  37.         font-weight: 600;
  38.       }
  39.  
  40.       .main-content-t1 table {
  41.         width: 100%;
  42.         border-spacing: 6px 0;
  43.       }
  44.  
  45.       .main-content-t1 th {
  46.         color: #fff;
  47.         background-color: #65171A;
  48.         padding: 6px 8px
  49.       }
  50.  
  51.       .main-content-t1 th.v-type {
  52.         width: 20%;
  53.       }
  54.  
  55.       .main-content-t1 th.engine {
  56.         width: 20%;
  57.       }
  58.  
  59.       .main-content-t1 th.power {
  60.         width: 10%;
  61.       }
  62.  
  63.       .main-content-t1 th.oe {
  64.         width: 50%;
  65.       }
  66.  
  67.       .main-content-t1 td {
  68.         background-color: #9D8382;
  69.         padding: 18px;
  70.       }
  71.  
  72.       .main-content-t1 .v-type__header {
  73.         text-decoration: underline;
  74.         font-weight: 600;
  75.       }
  76.  
  77.       .main-content-t1 .v-type__list {
  78.         padding-inline-start: 20px;
  79.       }
  80.  
  81.       .main-content-t1 .engine__header {
  82.         text-align: center;
  83.         font-weight: 600;
  84.       }
  85.  
  86.       .main-content-t1 .engine__list {
  87.         list-style-type: none;
  88.         padding: 0;
  89.         color: #333;
  90.         display: flex;
  91.         flex-wrap: wrap;
  92.         justify-content: space-between;
  93.       }
  94.  
  95.       .main-content-t1 .engine__list li:before {
  96.         content: "[";
  97.       }
  98.  
  99.       .main-content-t1 .engine__list li:after {
  100.         content: "]";
  101.       }
  102.  
  103.       .main-content-t1 .power__list {
  104.         list-style-type: none;
  105.         padding: 0;
  106.         text-align: center;
  107.         margin-block-start: 0;
  108.         margin-block-end: 0;
  109.         font-weight: 600;
  110.       }
  111.  
  112.       .main-content-t1 .oe__numbers {
  113.         list-style-type: none;
  114.         padding: 0;
  115.         display: flex;
  116.         flex-wrap: wrap;
  117.         justify-content: space-between;
  118.       }
  119.  
  120.       .main-content-t1 .oe__numbers li {
  121.         color: #333;
  122.       }
  123.  
  124.       .main-content-t1 .oe__numbers li:after {
  125.         content: ","
  126.       }
  127.  
  128.       .main-content-t1 .social-media {
  129.         color: #fff;
  130.         padding: 18px 6px;
  131.         background-color: #AA0000;
  132.         display: flex;
  133.         align-items: center;
  134.       }
  135.  
  136.       .main-content-t1 .social-media__label {
  137.         font-size: 24px;
  138.       }
  139.  
  140.       .main-content-t1 .social-media__item {
  141.         border-radius: 50%;
  142.         background-color: #fff;
  143.         width: 50px;
  144.         height: 50px;
  145.         margin: 0 8px;
  146.         display: flex;
  147.         align-items: center;
  148.         justify-content: center;
  149.         overflow: hidden;
  150.       }
  151.  
  152.       .main-content-t1 .social-media__item img {
  153.         max-width: 100%;
  154.         max-height: 100%;
  155.       }
  156.  
  157.       .main-content-t1 .social-media__item.--small img {
  158.         max-width: 80%;
  159.         max-height: 80%;
  160.       }
  161.  
  162.       .footer-t1 {
  163.         text-align: center;
  164.         background-color: #262424;
  165.         color: #8D9292;
  166.         padding: 4px;
  167.       }
  168.  
  169.       .footer-t1 a {
  170.         color: #8D9292;
  171.         transition: all .2s;
  172.       }
  173.  
  174.       .footer-t1 a:hover {
  175.         color: #AAAAAA;
  176.       }
  177.  
  178.  /* Styles for second template */
  179.  
  180.     .main-content-t2 {
  181.       background-color: #F70000;
  182.       font-family: Arial, Helvetica, sans-serif;
  183.       display: flex;
  184.       flex-wrap: wrap;
  185.       color: #670200;
  186.       width: 700px;
  187.       margin: 0 auto;
  188.     }
  189.  
  190.     .main-content-t2 .tile {
  191.       flex: 1 0 auto;
  192.       height: auto;
  193.       width: 50%;
  194.       text-align: center;
  195.       padding: 20px;
  196.       overflow: hidden;
  197.       position: relative;
  198.     }
  199.  
  200.     .main-content-t2 .tile:before {
  201.       content: '';
  202.       float: left;
  203.       padding-top: 100%;
  204.     }
  205.  
  206.     .main-content-t2 .p-0 {
  207.       padding: 0 !important;
  208.     }
  209.  
  210.     .main-content-t2 .h1 {
  211.       color: #fff;
  212.       font-weight: 600;
  213.       font-size: 30px;
  214.     }
  215.  
  216.     .main-content-t2 .bold {
  217.       font-weight: 600;
  218.     }
  219.  
  220.     .main-content-t2 .white {
  221.       color: #fff;
  222.     }
  223.  
  224.     .main-content-t2 .bg-white {
  225.       background-color: #fff;
  226.     }
  227.  
  228.     .main-content-t2 .flex {
  229.       display: flex;
  230.       align-items: center;
  231.     }
  232.  
  233.     .main-content-t2 .circle {
  234.       border-radius: 50%;
  235.       width: 50px;
  236.       height: 50px;
  237.     }
  238.  
  239.     .main-content-t2 .full-size {
  240.       width: 100%;
  241.       overflow: hidden;
  242.       background-color: #fff;
  243.     }
  244.  
  245.     .main-content-t2 .inpost-car {
  246.       position: absolute;
  247.       right: 15px;
  248.       top: 25px;
  249.       width: 60px;
  250.     }
  251.  
  252.     .main-content-t2 .payment {
  253.       background-color: #9B120F;
  254.       padding: 12px 0;
  255.       position: absolute;
  256.       left: 0;
  257.       bottom: 0;
  258.       width: 100%;
  259.     }
  260.  
  261.     .main-content-t2 .payment img {
  262.       border-radius: 50%;
  263.       width: 50px;
  264.       height: 50px;
  265.       margin: 0 4px;
  266.     }
  267.  
  268.     .main-content-t2 .post {
  269.       position: absolute;
  270.       transform: rotate(20deg);
  271.       width: 50px;
  272.       top: 15px;
  273.       right: 30px
  274.     }
  275.  
  276.     .main-content-t2 .mt-2 {
  277.       margin-top: 20px;
  278.     }
  279.  
  280.     .main-content-t2 .mt-5 {
  281.       margin-top: 50px;
  282.     }
  283.  
  284.     .footer-t2 {
  285.       text-align: center;
  286.       background-color: #262424;
  287.       color: #8D9292;
  288.       padding: 4px;
  289.       width: 700px;
  290.       margin: 0 auto;
  291.     }
  292.   </style>
  293. </head>
  294. <div class="main-content-t1">
  295.   <div class="logo">
  296.     <img src="https://redlif.e-kei.pl/assets/photos/gasker.png" class="logo__gasker">
  297.   </div>
  298.   <div class="main-header">
  299.     <div class="title big">Turbocharger Gasket Kits</div>
  300.     <div class="title">CR/ /K FOR FORD, VOLO - 2.0</div>
  301.     <div class="description">All our gaskets can be sold as kits or individually. ASK for more details</div>
  302.   </div>
  303.   <table>
  304.     <tr>
  305.       <th class="v-type">Make/Vehicle type</th>
  306.       <th class="engine">Engine</th>
  307.       <th class="power">Power</th>
  308.       <th class="oe">OE/OEM reference no./Turbocharger</th>
  309.     </tr>
  310.     <tr>
  311.       <td>
  312.         <div class="v-type__header">Ford:</div>
  313.         <ul class="v-type__list">
  314.           <li>C-Max</li>
  315.           <li>Focus II</li>
  316.         </ul>
  317.       </td>
  318.  
  319.       <td>
  320.         <div class="engine__header">2.0 TDCI & D</div>
  321.        <ul class="engine__list">
  322.          <li>G6DA</li>
  323.          <li>G6DA</li>
  324.          <li>G6DA</li>
  325.          <li>G6DA</li>
  326.          <li>G6DA</li>
  327.          <li>G6DA</li>
  328.          <li>G6DA</li>
  329.          <li>G6DA</li>
  330.          <li>G6DA</li>
  331.        </ul>
  332.      </td>
  333.  
  334.      <td>
  335.        <ul class="power__list">
  336.          <li>110hp</li>
  337.          <li>110hp</li>
  338.        </ul>
  339.      </td>
  340.  
  341.      <td>
  342.        <ul class="oe__numbers">
  343.          <li>760774-0003</li>
  344.          <li>760774-0003</li>
  345.          <li>760774-0003</li>
  346.          <li>760774-0003</li>
  347.          <li>760774-0003</li>
  348.          <li>760774-0003</li>
  349.          <li>760774-0003</li>
  350.          <li>760774-0003</li>
  351.          <li>760774-0003</li>
  352.          <li>760774-0003</li>
  353.          <li>760774-0003</li>
  354.          <li>760774-0003</li>
  355.          <li>760774-0003</li>
  356.          <li>760774-0003</li>
  357.          <li>760774-0003</li>
  358.          <li>760774-0003</li>
  359.          <li>760774-0003</li>
  360.          <li>760774-0003</li>
  361.          <li>760774-0003</li>
  362.          <li>760774-0003</li>
  363.          <li>760774-0003</li>
  364.          <li>760774-0003</li>
  365.          <li>760774-0003</li>
  366.          <li>760774-0003</li>
  367.          <li>760774-0003</li>
  368.          <li>760774-0003</li>
  369.          <li>760774-0003</li>
  370.          <li>760774-0003</li>
  371.          <li>760774-0003</li>
  372.          <li>760774-0003</li>
  373.          <li>760774-0003</li>
  374.          <li>760774-0003</li>
  375.          <li>760774-0003</li>
  376.          <li>760774-0003</li>
  377.          <li>760774-0003</li>
  378.          <li>760774-0003</li>
  379.          <li>760774-0003</li>
  380.        </ul>
  381.      </td>
  382.    </tr>
  383.  </table>
  384.    
  385.  <div class="social-media">
  386.    <span class="social-media__label">find us:</span>
  387.    <a href="https://goo.gl/maps/zx5W6utSEQpRyDPv9" class="social-media__item --small"><img src="https://redlif.e-kei.pl/assets/photos/gmaps_logo.svg"></a>
  388.    <a href="https://www.google.com" class="social-media__item"><img src="https://redlif.e-kei.pl/assets/photos/ebay_logo.png"></a>
  389.    <a href="mailto:gasker.shop@gmail.com" class="social-media__item --small"><img src="https://redlif.e-kei.pl/assets/photos/gmail_logo.png"></a>
  390.    <a href="https://www.facebook.com/Redlifcom-SlimShield-131226311671291" class="social-media__item"><img src="https://redlif.e-kei.pl/assets/photos/facebook_logo.png"></a>
  391.  </div>
  392. </div>
  393.  
  394. <div class="footer-t1">All our gaskets can be sold as kits or individually. ASK for more details: <a href="mailto:gasker.shop@gmail.com">gasker.shop@gmail.com</a>
  395. </div>
  396.  
  397. <div class="main-content-t2">
  398.  <div class="tile">
  399.    <div class="h1">does it fit my turbocharger?</div>
  400.    <p>Please check your <strong>Part number</strong> and <strong>OEM number</strong> which are located on your turbocharger aluminium housing to make sure that they match the ones which you can find in our part description</p>
  401.    <p>If you are unsure or can't find your part number please don't hesitate to <strong>contact us</strong></p>
  402.    <p>
  403.      <div class="flex">
  404.        <img src="https://redlif.e-kei.pl/assets/photos/icons/finder.png" class="circle">
  405.        <div>You can also use our <strong>FINDER</strong> to match it with your car</div>
  406.      </div>
  407.    </p>
  408.  </div>
  409.  <div class="tile p-0 bg-white flex">
  410.    <img src="https://redlif.e-kei.pl/assets/photos/gaskets/KT100005E.jpg" class="full-size">
  411.  </div>
  412.  
  413.  <div class="tile p-0 bg-white flex">
  414.    <img src="https://redlif.e-kei.pl/assets/photos/icons/car.png" class="full-size">
  415.  </div>
  416.  <div class="tile">
  417.    <div class="h1">
  418.      <span>worldwide<br>delivery</span>
  419.      <img src="https://redlif.e-kei.pl/assets/photos/icons/inpostcar.png" class="inpost-car">
  420.    </div>
  421.    <p>
  422.      <div class="bold white">Dispatched on the same day</div>
  423.      <div>We dispatch your products on the same day and delivery lasts 1-3 working days. Prices depend on destination you are ordering to</div>
  424.    </p>
  425.    <p>
  426.      <div class="bold white">Patment method</div>
  427.      <div>We accept credit and debit cards. PayPal, Bank transfers</div>
  428.    </p>
  429.    <div class="payment">
  430.      <img src="https://redlif.e-kei.pl/assets/photos/icons/visa.png">
  431.      <img src="https://redlif.e-kei.pl/assets/photos/icons/mastercard.png">
  432.      <img src="https://redlif.e-kei.pl/assets/photos/icons/maestro.png">
  433.      <img src="https://redlif.e-kei.pl/assets/photos/icons/paypal.png">
  434.      <img src="https://redlif.e-kei.pl/assets/photos/icons/cash.png">
  435.    </div>
  436.  </div>
  437.  
  438.  <div class="tile">
  439.    <div class="h1 mt-2">contact details<img src="./icons/post.png" class="post"></div>
  440.    <p>
  441.      <div class="bold white mt-5">Phone</div>
  442.      <div>+48 531 883 003</div>
  443.    </p>
  444.    
  445.    <p>
  446.      <div class="bold white mt-5">Email</div>
  447.      <div>gasker.shop@gmail.com</div>
  448.    </p>
  449.  </div>
  450.  <div class="tile p-0 bg-white flex">
  451.    <img src="https://redlif.e-kei.pl/assets/photos/gasker_logo2.png" class="full-size">
  452.  </div>
  453. </div>
  454.  
  455. <div class="footer-t2">+48 531 883 003 gasker.shop@gmail.com ebay @gasker
  456.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!