Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="row">
<div class="col-xs-12 col-md-4  post">
​
<div class="table-title">
<h3>Rabat na odbitki</h3>
<p style="color:gray;"> cena dotyczy 1 odbitki przy określonym zamówieniu</p>
</div>
<table class="table-fill">
<thead>
<tr>
<th class="text-left">rozmiar odbitki</th>
<th class="text-left">Cena  1szt. 100% </th>
  <th class="text-left">rabat 5% 50 odbitek </th>
  <th class="text-left">rabat 10% 100 odbitek</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td class="text-left"> 9 x 13</td>
<td class="text-left">0,55</td>
  <td class="text-left">0,52</td>
  <td class="text-left">0,49</td>
</tr>
<tr>
<td class="text-left">10 x 15</td>
<td class="text-left">0,65</td>
  <td class="text-left">0,62</td>
  <td class="text-left">0,58</td>
</tr>
<tr>
<td class="text-left">13 x 18</td>
<td class="text-left">0,85</td>
  <td class="text-left">0,80</td>
  <td class="text-left">0,77</td>
</tr>
<tr>
<td class="text-left">15 x 21</td>
 <td class="text-left">1,10</td>
  <td class="text-left">1,05</td>
  <td class="text-left">1,00</td>
</tr>
<tr>
<td class="text-left">25 x 18</td>
 <td class="text-left">2,00</td>
  <td class="text-left">1,95</td>
  <td class="text-left">1,90</td>
</tr>
  
 
 <tr>
 <td class="text-left">20 x 25</td>
 <td class="text-left">2,50</td>
  <td class="text-left">2,45</td>
  <td class="text-left">2,40</td>
</tr> 
 
 
 
 
 
 
 
 
 <tr>
 <td class="text-left">25 x 30</td>
 <td class="text-left">3,50</td>
  <td class="text-left">3,45</td>
  <td class="text-left">3,40</td>
</tr> 
  <tr>
    <td class="text-left">25 x 38</td>
 <td class="text-left">7,00</td>
  <td class="text-left">6,95</td>
  <td class="text-left">6,90</td>
    </tr>
</tbody>
</table>
 </div>
​
 
 <div class="col-xs-12 col-md-4  post2" style="padding-top:-5px;"> 
​
<div class="table-title">
<h3>Rabat na odbitki</h3>
<p style="color:gray;">cena dotyczy 1 odbitki przy określonym zamówieniu</p>
</div>
<table class="table-fill">
<thead>
<tr>
<th class="text-left">rozmiar odbitki</th>
<th class="text-left">15% 150 odbitek</th>
  <th class="text-left">20% 200 odbitek</th>
<th class="text-left">30% 300 odbitek</th>
​
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td class="text-left">9x 13</td>
<td class="text-left">0,46</td>
  <td class="text-left">0,44</td>
  <td class="text-left">0,38</td>
</tr>
<tr>
   <td class="text-left">10 x 15</td>
  <td class="text-left">0,55</td>
  <td class="text-left">0,52</td>
  <td class="text-left">0,46</td>
</tr>
<tr>
<td class="text-left">13 x 18</td>
​
  
  <td class="text-left">0,73</td>
  <td class="text-left">0,68</td>
  <td class="text-left">0,60</td>
</tr>
<tr>
<td class="text-left">15 x 21</td>
 <td class="text-left">0,95</td>
  <td class="text-left">0,90</td>
  <td class="text-left">0,80</td>
</tr>
<tr>
<td class="text-left">25 x 18</td>
<td class="text-left">1,85</td>
  <td class="text-left">1,80</td>
  <td class="text-left">1,70</td>
</tr>
​
​
​
<tr>
 <td class="text-left">20 x 25</td>
 <td class="text-left">2,35</td>
  <td class="text-left">2,30</td>
  <td class="text-left">2,20</td>
</tr> 
​
​
​
​
​
​
​
​
    <tr>
    <td class="text-left">25 x 30</td>
<td class="text-left">3,35</td>
  <td class="text-left">3,30</td>
  <td class="text-left">3,20</td>
</tr>
    
     <tr>
    <td class="text-left">25 x 38</td>
 <td class="text-left">6,85</td>
  <td class="text-left">6,80</td>
  <td class="text-left">6,70</td>
</tr>
    
</tbody>
</table>
  </div>
  
 
 <div class="col-xs-12 col-md-4 post ">
​
  <div class="table-title">
<h3>Rabat na odbitki</h3>
<p style="color:gray;">cena dotyczy 1 odbitki przy określonym zamówieniu</p>
</div>
<table class="table-fill">
<thead>
<tr>
<th class="text-left">rozmiar odbitki</th>
<th class="text-left">40% 400 odbitek</th>
  <th class="text-left">50% 500 odbitek</th>
​
​
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td class="text-left">9x 13</td>
 <td class="text-left">0,33</td>
  <td class="text-left">0,27</td>
</tr>
<tr>
   <td class="text-left">10 x 15</td>
<td class="text-left">0,39</td>
  <td class="text-left">0,33</td>
</tr>
<tr>
<td class="text-left">13 x 18</td>
​
  
  <td class="text-left">0,60</td>
  <td class="text-left">0,43</td>
</tr>
<tr>
<td class="text-left">15 x 21</td>
 <td class="text-left">0,70</td>
  <td class="text-left">0,60</td>
</tr>
<tr>
<td class="text-left">25 x 18</td>
 <td class="text-left">1,60</td>
  <td class="text-left">1,50</td>
</tr>
​
​
​
<tr>
 <td class="text-left">20 x 25</td>
 <td class="text-left">2,10</td>
  <td class="text-left">2,0</td>
  
</tr> 
​
​
​
​
​
​
​
​
​
​
​
​
​
    <tr>
    <td class="text-left">25 x 30</td>
 <td class="text-left">3,10</td>
  <td class="text-left">3,00</td>
</tr>
    
     <tr>
    <td class="text-left">25 x 38</td>
<td class="text-left">6,60</td>
  <td class="text-left">6,50</td>
</tr>
    
</tbody>
</table>
  
 
  
  
  
  
  
  
  
  
  
  
  
 </div> 
 </div>
 
 
    </div>
</body>
</html>
 
div.table-title {
   display: block;
  margin: auto;
  max-width: 600px;
  padding:5px;
  width: 100%;
}
​
.table-title h3 {
   color: #6c6c6c;
   font-size: 25px;
   font-weight: 500;
   font-style:normal;
   font-family: "LATO", helvetica, arial, sans-serif;
   text-transform:uppercase;
   text-align:center;
}
​
.table-title h4 {
   color: #6c6c6c;
   font-size: 15px;
   font-weight: 500;
   font-style:normal;
   font-family: "LATO", helvetica, arial, sans-serif;
   text-align:center;
   text-transform:uppercase;
}
​
/*** Table Styles **/
​
.table-fill {
   border:1px solid #9ea7af;
  border-radius:3px;
  border-collapse: collapse;
  height: 320px;
  margin: auto;
  max-width: 300px;
  padding:5px;
  width: 75%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
 
​
​
​
}
  
  
 
th {
  color:#6c6c6c;
  
    
  border-bottom:1px solid #9ea7af;
   font-size:20px;
   
  font-weight: 400;
  padding:24px;
  text-align:left;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align:middle;
}
​
​
​
th:first-child {
  border-top-left-radius:3px;
}
 
th:last-child {
  border-top-right-radius:1px;
  border-right:none;
}
 
tr {
  border-top: 1px solid #C1C3D1;
  border-bottom-: 1px solid #C1C3D1;
  color:#6c6c6c;
  font-size:16px;
  font-weight:bold;
  
}
 
tr:hover td {
 
  color:#FFFFFF;
  font-weight: 800;
  font-size:1.3em;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-right:  1px solid #fff;
  border-left:  1px solid #fff;
  background:#ca1075;
  border-color:#fff;
  -webkit-transition: 20;
  -webkit-transition: all 0.25s, color 0s !important;
  -moz-transition: all 0.25s, color 0s !important;
  -o-transition: all 0.25s, color 0s !important;
  transition: all 0.25s, color 0s !important;
   
}
​
tr:first-child {
 border-top:1px solid #9ea7af;
}
​
tr:last-child {
  border-bottom:none;
}
 
tr:nth-child(odd) td {
 
}
 
tr:nth-child(odd):hover td {
  
}
​
tr:last-child td:first-child {
  border-bottom-left-radius:3px;
}
 
tr:last-child td:last-child {
  border-bottom-right-radius:3px;
}
 
td {
 
  padding:20px;
  text-align:left;
  vertical-align:middle;
  font-weight:400;
  font-size:18px;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #C1C3D1;
 
}
​
td:last-child {
  border-right: 0px;
}
​
th.text-left {
  text-align: left;
}
​
th.text-center {
  text-align: center;
}
​
th.text-right {
  text-align: right;
}
​
td.text-left {
  text-align: left;
}
​
td.text-center {
  text-align: center;
}
​
td.text-right {
  text-align: right;
}
​
text-centered {
  text-align: center!important;
  margin:0!important;
}   
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers