web のバックアップ(No.1)

[ トップ ]   [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• web へ行く。
  • 1 (2025-02-25 (火) 05:54:01)

---

!DOCTYPE html>

html lang="tr">

head>

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Tablo Örneği</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
   <style>
       body {
           display: flex;
           flex-direction: column; /* Dikey hizalama */
           align-items: center; /* Ortalamak için */
           font-family: 'Century Gothic', sans-serif; /* Yazı karakteri Century Gothic */
           margin: 20px; /* Kenar boşluğu */
       }
       .container {
           display: flex; /* Yan yana düzen için */
           flex-direction: column; /* Dikey hizalama */
           align-items: center; /* Ortala */
           width: 100%; /* Genişlik ayarı */
       }
       .row {
           display: flex; /* Tablo ve resimlerin yan yana düzenlenmesi için */
           align-items: flex-start; /* Üst kısımdan hizala */
           margin-bottom: 20px; /* Satırlar arasında boşluk */
       }
       .image-container {
           width: 165px; /* Resim alanının genişliği */
           height: 165px; /* Resim alanının yüksekliği */
           margin-right: 20px; /* Tablolar ile resim arasında boşluk */
           overflow: hidden; /* Taşan kısmı gizle */
           border: 1px solid #656567; /* Çerçeve rengi */
           display: flex;
           justify-content: center;
           align-items: center; /* Resmi ortala */
       }
       .image-container img {
           width: 100%;
           height: 100%;
           object-fit: cover; /* Resmin kutuya sığmasını sağlar */
       }
       .table-container {
           display: flex;
           flex-direction: column; /* Tablolar dikey hizalı */
           width: 100%; /* Tabloların genişliği */
       }
       table {
           width: 100%;
           border-collapse: collapse;
       }
       th {
           border: 1px solid #656567; /* Ara çizgi rengi */
           padding: 8px; /* Başlık yüksekliği */
           text-align: center; /* Başlık merkezi hizalı */
       }
       td {
           border: 1px solid #656567; /* Ara çizgi rengi */
           padding: 4px; /* Yükseklik daraltıldı */
           text-align: center; /* Veri hücreleri merkezi hizalı */
       }
       .white {
           background-color: #ffffff; /* Beyaz */
       }
       .light-grey {
           background-color: #EAEAEC; /* Açık gri */
       }
       .lighter-grey {
           background-color: #F3F2F7; /* Daha açık gri */
       }
       .icon {
           font-size: 24px; /* İkon boyutu */
       }

       /* Mobil uyumlu ayarlar */
       @media (max-width: 600px) {
           .image-container {
               width: 100%; /* Resim alanı tam genişlik */
               height: auto; /* Yükseklik otomatik */
               margin-bottom: 10px; /* Alt boşluk */
           }
           table {
               font-size: 14px; /* Yazı boyutunu küçült */
               width: auto; /* Tablo genişliği otomatik */
           }
       }
   </style>

/head>

body>

div class="container">

   <div class="row">
       <div class="image-container">
           <center><img src="http://zet-teker.com/foto/6000serisi/6000MEB100F4.jpg" alt="Temsili Resim Üst Tablo"></center>
       </div>

       <div class="table-container">
           <!-- İlk tablo -->
           <table>
               <tr class="white">
                   <th>KOD</th>
                   <th><i class="fas fa-user icon"></i></th>
                   <th><i class="fas fa-cog icon"></i></th>
                   <th><i class="fas fa-envelope icon"></i></th>
                   <th><i class="fas fa-bell icon"></i></th>
                   <th><i class="fas fa-star icon"></i></th>
                   <th><i class="fas fa-chart-line icon"></i></th>
                   <th><i class="fas fa-check icon"></i></th>
                   <th><i class="fas fa-times icon"></i></th>
                   <th><i class="fas fa-info-circle icon"></i></th>
                   <th>KOLİ ADETİ</th>
               </tr>
               <tr class="light-grey">
                   <td><a href="#" style="color: black; text-decoration: none;"><b>600 MEB 100</b></a></td>
                   <td>100</td>
                   <td>30</td>
                   <td>-</td>
                   <td>-</td>
                   <td>12</td>
                   <td>-</td>
                   <td>128</td>
                   <td>0,570</td>
                   <td>80</td>
                   <td><b>30</b></td>
               </tr>
               <tr class="lighter-grey">
                   <td><b><a href="#" style="color: black; text-decoration: none;">600 MEB 125</b></a></td>
                   <td>125</td>
                   <td>30</td>
                   <td>-</td>
                   <td>-</td>
                   <td>12</td>
                   <td>-</td>
                   <td>128</td>
                   <td>0,570</td>
                   <td>80</td>
                   <td><b>30</b></td>
               </tr>
               <tr class="light-grey">
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
               </tr>
               <tr class="lighter-grey">
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
               </tr>
           </table>
       </div>
   </div>

   <div class="row">
       <div class="image-container">
           <center><img src="http://zet-teker.com/foto/6000serisi/6000MHB100.jpg" alt="Temsili Resim Üst Tablo"></center>
       </div>

       <div class="table-container">
           <!-- İkinci tablo -->
           <table>
               <tr class="white">
                   <th>KOD</th>
                   <th><i class="fas fa-user icon"></i></th>
                   <th><i class="fas fa-cog icon"></i></th>
                   <th><i class="fas fa-envelope icon"></i></th>
                   <th><i class="fas fa-bell icon"></i></th>
                   <th><i class="fas fa-star icon"></i></th>
                   <th><i class="fas fa-chart-line icon"></i></th>
                   <th><i class="fas fa-check icon"></i></th>
                   <th><i class="fas fa-times icon"></i></th>
                   <th><i class="fas fa-info-circle icon"></i></th>
                   <th>KOLİ ADETİ</th>
               </tr>
               <tr class="light-grey">
                   <td><a href="#" style="color: black; text-decoration: none;"><b>600 MEB 100</b></a></td>
                   <td>100</td>
                   <td>30</td>
                   <td>-</td>
                   <td>-</td>
                   <td>12</td>
                   <td>-</td>
                   <td>128</td>
                   <td>0,570</td>
                   <td>80</td>
                   <td><b>30</b></td>
               </tr>
               <tr class="lighter-grey">
                   <td><b><a href="#" style="color: black; text-decoration: none;">600 MEB 125</b></a></td>
                   <td>125</td>
                   <td>30</td>
                   <td>-</td>
                   <td>-</td>
                   <td>12</td>
                   <td>-</td>
                   <td>128</td>
                   <td>0,570</td>
                   <td>80</td>
                   <td><b>30</b></td>
               </tr>
               <tr class="light-grey">
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
               </tr>
               <tr class="lighter-grey">
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
               </tr>
           </table>
       </div>
   </div>
	
	<div class="row">
       <div class="image-container">
           <center><img src="http://zet-teker.com/foto/6000serisi/6000MMLB100F4.jpg" alt="Temsili Resim Üst Tablo"></center>
       </div>

       <div class="table-container">
           <!-- üçüncü tablo -->
           <table>
               <tr class="white">
                   <th>KOD</th>
                   <th><i class="fas fa-user icon"></i></th>
                   <th><i class="fas fa-cog icon"></i></th>
                   <th><i class="fas fa-envelope icon"></i></th>
                   <th><i class="fas fa-bell icon"></i></th>
                   <th><i class="fas fa-star icon"></i></th>
                   <th><i class="fas fa-chart-line icon"></i></th>
                   <th><i class="fas fa-check icon"></i></th>
                   <th><i class="fas fa-times icon"></i></th>
                   <th><i class="fas fa-info-circle icon"></i></th>
                   <th>KOLİ ADETİ</th>
               </tr>
               <tr class="light-grey">
                   <td><a href="#" style="color: black; text-decoration: none;"><b>600 MEB 100</b></a></td>
                   <td>100</td>
                   <td>30</td>
                   <td>-</td>
                   <td>-</td>
                   <td>12</td>
                   <td>-</td>
                   <td>128</td>
                   <td>0,570</td>
                   <td>80</td>
                   <td><b>30</b></td>
               </tr>
               <tr class="lighter-grey">
                   <td><b><a href="#" style="color: black; text-decoration: none;">600 MEB 125</b></a></td>
                   <td>125</td>
                   <td>30</td>
                   <td>-</td>
                   <td>-</td>
                   <td>12</td>
                   <td>-</td>
                   <td>128</td>
                   <td>0,570</td>
                   <td>80</td>
                   <td><b>30</b></td>
               </tr>
               <tr class="light-grey">
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
               </tr>
               <tr class="lighter-grey">
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
               </tr>
           </table>
       </div>
   </div>
	
	<div class="row">
       <div class="image-container">
           <center><img src="http://zet-teker.com/foto/6000serisi/6000PUB100.jpg" alt="Temsili Resim Üst Tablo"></center>
       </div>

       <div class="table-container">
           <!-- dördüncü tablo -->
           <table>
               <tr class="white">
                   <th>KOD</th>
                   <th><i class="fas fa-user icon"></i></th>
                   <th><i class="fas fa-cog icon"></i></th>
                   <th><i class="fas fa-envelope icon"></i></th>
                   <th><i class="fas fa-bell icon"></i></th>
                   <th><i class="fas fa-star icon"></i></th>
                   <th><i class="fas fa-chart-line icon"></i></th>
                   <th><i class="fas fa-check icon"></i></th>
                   <th><i class="fas fa-times icon"></i></th>
                   <th><i class="fas fa-info-circle icon"></i></th>
                   <th>KOLİ ADETİ</th>
               </tr>
               <tr class="light-grey">
                   <td><a href="#" style="color: black; text-decoration: none;"><b>600 MEB 100</b></a></td>
                   <td>100</td>
                   <td>30</td>
                   <td>-</td>
                   <td>-</td>
                   <td>12</td>
                   <td>-</td>
                   <td>128</td>
                   <td>0,570</td>
                   <td>80</td>
                   <td><b>30</b></td>
               </tr>
               <tr class="lighter-grey">
                   <td><b><a href="#" style="color: black; text-decoration: none;">600 MEB 125</b></a></td>
                   <td>125</td>
                   <td>30</td>
                   <td>-</td>
                   <td>-</td>
                   <td>12</td>
                   <td>-</td>
                   <td>128</td>
                   <td>0,570</td>
                   <td>80</td>
                   <td><b>30</b></td>
               </tr>
               <tr class="light-grey">
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
               </tr>
               <tr class="lighter-grey">
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
               </tr>
           </table>
       </div>
   </div>
	
	<div class="row">
       <div class="image-container">
           <center><img src="http://zet-teker.com/foto/6000serisi/6002MEB100F4.jpg" alt="Temsili Resim Üst Tablo"></center>
       </div>

       <div class="table-container">
           <!-- beşinci tablo -->
           <table>
               <tr class="white">
                   <th>KOD</th>
                   <th><i class="fas fa-user icon"></i></th>
                   <th><i class="fas fa-cog icon"></i></th>
                   <th><i class="fas fa-envelope icon"></i></th>
                   <th><i class="fas fa-bell icon"></i></th>
                   <th><i class="fas fa-star icon"></i></th>
                   <th><i class="fas fa-chart-line icon"></i></th>
                   <th><i class="fas fa-check icon"></i></th>
                   <th><i class="fas fa-times icon"></i></th>
                   <th><i class="fas fa-info-circle icon"></i></th>
                   <th>KOLİ ADETİ</th>
               </tr>
               <tr class="light-grey">
                   <td><a href="#" style="color: black; text-decoration: none;"><b>600 MEB 100</b></a></td>
                   <td>100</td>
                   <td>30</td>
                   <td>-</td>
                   <td>-</td>
                   <td>12</td>
                   <td>-</td>
                   <td>128</td>
                   <td>0,570</td>
                   <td>80</td>
                   <td><b>30</b></td>
               </tr>
               <tr class="lighter-grey">
                   <td><b><a href="#" style="color: black; text-decoration: none;">600 MEB 125</b></a></td>
                   <td>125</td>
                   <td>30</td>
                   <td>-</td>
                   <td>-</td>
                   <td>12</td>
                   <td>-</td>
                   <td>128</td>
                   <td>0,570</td>
                   <td>80</td>
                   <td><b>30</b></td>
               </tr>
               <tr class="light-grey">
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
               </tr>
               <tr class="lighter-grey">
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
                   <td>-</td>
               </tr>
           </table>
       </div>
   </div>

/div>

/body>

/html>

     

Site admin: anonymous

PukiWiki 1.5.1 © 2001-2016 PukiWiki Development Team. Powered by PHP 7.3.33. HTML convert time: 0.010 sec.