API tools faq
paste
AdamBB

Auction template

AdamBB
Dec 7th, 2020 (edited)
105
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 6.62 KB | None | 0 0
raw download clone embed print report
  1. <head>
  2.   <style>
  3.     * {
  4.         box-sizing: border-box;
  5.       }
  6.       .main-content {
  7.         background-color: #AA0000;
  8.         font-family: Arial, Helvetica, sans-serif;
  9.       }
  10.  
  11.       .logo {
  12.         padding: 8px;
  13.       }
  14.  
  15.       .logo__gasker {
  16.         max-width: 100%;
  17.         max-height: 100%;
  18.         background-color: #fff;
  19.       }
  20.  
  21.       .main-header {
  22.         text-align: center;
  23.         padding: 20px;
  24.       }
  25.  
  26.       .main-header .title {
  27.         color: #fff;
  28.         margin-bottom: 15px;
  29.       }
  30.  
  31.       .main-header .description {
  32.         font-weight: 600;
  33.       }
  34.  
  35.       .big {
  36.         font-size: 40px;
  37.         font-weight: 600;
  38.       }
  39.  
  40.       table {
  41.         width: 100%;
  42.         border-spacing: 6px 0;
  43.       }
  44.  
  45.       th {
  46.         color: #fff;
  47.         background-color: #65171A;
  48.         padding: 6px 8px
  49.       }
  50.  
  51.       th.v-type {
  52.         width: 20%;
  53.       }
  54.  
  55.       th.engine {
  56.         width: 20%;
  57.       }
  58.  
  59.       th.power {
  60.         width: 10%;
  61.       }
  62.  
  63.       th.oe {
  64.         width: 50%;
  65.       }
  66.  
  67.       td {
  68.         background-color: #9D8382;
  69.         padding: 18px;
  70.       }
  71.  
  72.       .v-type__header {
  73.         text-decoration: underline;
  74.         font-weight: 600;
  75.       }
  76.  
  77.       .v-type__list {
  78.         padding-inline-start: 20px;
  79.       }
  80.  
  81.       .engine__header {
  82.         text-align: center;
  83.         font-weight: 600;
  84.       }
  85.  
  86.       .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.       .engine__list li:before {
  96.         content: "[";
  97.       }
  98.  
  99.       .engine__list li:after {
  100.         content: "]";
  101.       }
  102.  
  103.       .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.       .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.       .oe__numbers li {
  121.         color: #333;
  122.       }
  123.  
  124.       .oe__numbers li:after {
  125.         content: ","
  126.       }
  127.  
  128.       .social-media {
  129.         color: #fff;
  130.         padding: 18px 6px;
  131.         background-color: #AA0000;
  132.         display: flex;
  133.         align-items: center;
  134.       }
  135.  
  136.       .social-media__label {
  137.         font-size: 24px;
  138.       }
  139.  
  140.       .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.       .social-media__item img {
  153.         max-width: 100%;
  154.         max-height: 100%;
  155.       }
  156.  
  157.       .social-media__item.--small img {
  158.         max-width: 80%;
  159.         max-height: 80%;
  160.       }
  161.  
  162.       .footer {
  163.         text-align: center;
  164.         background-color: #262424;
  165.         color: #8D9292;
  166.         padding: 4px;
  167.       }
  168.  
  169.       .footer a {
  170.         color: #8D9292;
  171.         transition: all .2s;
  172.       }
  173.  
  174.       .footer a:hover {
  175.         color: #AAAAAA;
  176.       }
  177.   </style>
  178. </head>
  179. <div class="main-content">
  180.   <div class="logo">
  181.     <img src="https://redlif.e-kei.pl/assets/photos/gasker.png" class="logo__gasker">
  182.   </div>
  183.   <div class="main-header">
  184.     <div class="title big">Turbocharger Gasket Kits</div>
  185.     <div class="title">CR/ /K FOR FORD, VOLO - 2.0</div>
  186.     <div class="description">All our gaskets can be sold as kits or individually. ASK for more details</div>
  187.   </div>
  188.   <table>
  189.     <tr>
  190.       <th class="v-type">Make/Vehicle type</th>
  191.       <th class="engine">Engine</th>
  192.       <th class="power">Power</th>
  193.       <th class="oe">OE/OEM reference no./Turbocharger</th>
  194.     </tr>
  195.     <tr>
  196.       <td>
  197.         <div class="v-type__header">Ford:</div>
  198.         <ul class="v-type__list">
  199.           <li>C-Max</li>
  200.           <li>Focus II</li>
  201.         </ul>
  202.       </td>
  203.  
  204.       <td>
  205.         <div class="engine__header">2.0 TDCI & D</div>
  206.        <ul class="engine__list">
  207.          <li>G6DA</li>
  208.          <li>G6DA</li>
  209.          <li>G6DA</li>
  210.          <li>G6DA</li>
  211.          <li>G6DA</li>
  212.          <li>G6DA</li>
  213.          <li>G6DA</li>
  214.          <li>G6DA</li>
  215.          <li>G6DA</li>
  216.        </ul>
  217.      </td>
  218.  
  219.      <td>
  220.        <ul class="power__list">
  221.          <li>110hp</li>
  222.          <li>110hp</li>
  223.        </ul>
  224.      </td>
  225.  
  226.      <td>
  227.        <ul class="oe__numbers">
  228.          <li>760774-0003</li>
  229.          <li>760774-0003</li>
  230.          <li>760774-0003</li>
  231.          <li>760774-0003</li>
  232.          <li>760774-0003</li>
  233.          <li>760774-0003</li>
  234.          <li>760774-0003</li>
  235.          <li>760774-0003</li>
  236.          <li>760774-0003</li>
  237.          <li>760774-0003</li>
  238.          <li>760774-0003</li>
  239.          <li>760774-0003</li>
  240.          <li>760774-0003</li>
  241.          <li>760774-0003</li>
  242.          <li>760774-0003</li>
  243.          <li>760774-0003</li>
  244.          <li>760774-0003</li>
  245.          <li>760774-0003</li>
  246.          <li>760774-0003</li>
  247.          <li>760774-0003</li>
  248.          <li>760774-0003</li>
  249.          <li>760774-0003</li>
  250.          <li>760774-0003</li>
  251.          <li>760774-0003</li>
  252.          <li>760774-0003</li>
  253.          <li>760774-0003</li>
  254.          <li>760774-0003</li>
  255.          <li>760774-0003</li>
  256.          <li>760774-0003</li>
  257.          <li>760774-0003</li>
  258.          <li>760774-0003</li>
  259.          <li>760774-0003</li>
  260.          <li>760774-0003</li>
  261.          <li>760774-0003</li>
  262.          <li>760774-0003</li>
  263.          <li>760774-0003</li>
  264.          <li>760774-0003</li>
  265.        </ul>
  266.      </td>
  267.    </tr>
  268.  </table>
  269.    
  270.  <div class="social-media">
  271.    <span class="social-media__label">find us:</span>
  272.    <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>
  273.    <a href="https://www.google.com" class="social-media__item"><img src="https://redlif.e-kei.pl/assets/photos/ebay_logo.png"></a>
  274.    <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>
  275.    <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>
  276.  </div>
  277. </div>
  278.  
  279. <div class="footer">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>
  280. </div>
  281.  
Add Comment
Please, Sign In to add comment
Public Pastes
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!