"FrontDownBox" பக்கத்தின் திருத்தங்களுக்கிடையேயான வேறுபாடு

நூலகம் இல் இருந்து
தாவிச் செல்ல:வழிசெலுத்தல், தேடுக
 
வரிசை 1: வரிசை 1:
−
<html lang="ta">
+
<html>
 
<head>
 
<head>
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
−
   <title>Noolaham Layout</title>
+
   <title>FrontBoxDown</title>
 
   <style>
 
   <style>
−
     body {
+
     /* Styles for the outermost container */
−
      font-family: Arial, sans-serif;
 
−
    }
 
−
 
 
 
     .outermost-container {
 
     .outermost-container {
−
       display: grid;
+
       background-color: #dfedff;
−
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+
       padding: 1%;
−
       gap: 20px;
+
       border: 1px solid #009de0;
−
       padding: 20px;
 
 
     }
 
     }
  
−
     .card {
+
    /* Styles for the outer container */
 +
     .outer-container {
 
       display: flex;
 
       display: flex;
−
       align-items: flex-start;
+
       flex-wrap: wrap; /* Allow boxes to wrap to the next line on smaller screens */
−
       background-color: #dfedff;
+
       justify-content: space-between;
−
      border: 1px solid #009de0;
 
−
      border-radius: 12px;
 
−
      padding: 20px;
 
−
      transition: 0.3s;
 
 
     }
 
     }
  
−
     .card:hover {
+
    /* Styles for each box container */
−
       background-color: #e8f5ff;
+
     .box-container {
−
       box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+
      width: 48%; /* Adjust the width of each container as needed */
 +
       margin-bottom: 20px;
 +
       position: relative;
 
     }
 
     }
  
−
     .card a {
+
    /* Styles for each inner box */
−
      text-decoration: none;
+
     .inner-box {
−
      color: inherit;
 
−
      display: flex;
 
 
       width: 100%;
 
       width: 100%;
 +
      height: 320px;
 +
      font-size: 30px;
 +
      background-color: #dfedff;
 +
      padding: 1%;
 +
      text-align: center;
 +
      border-radius: 5px;
 +
      box-sizing: border-box;
 +
      cursor: pointer;
 +
      border: 1px solid #009de0;
 
     }
 
     }
  
−
     .card-left {
+
    /* Styles for the box below each inner box */
−
       width: 150px;
+
     .additional-box {
 +
      position: absolute;
 +
       width: 90%;
 +
      height: 130px;
 
       text-align: center;
 
       text-align: center;
−
       margin-right: 20px;
+
      background-color: #dfedff;
 +
      margin-top: 5px;
 +
       margin-bottom: 5px;
 +
      border-radius: 5px;
 +
      bottom: 0;
 +
      left: 5%; /* Adjust the left position */
 
     }
 
     }
−
 
+
      .responsive-image{
−
    .card-left img {
+
        width: auto;
−
      width: 100px;
+
        height:100px;
−
      height: auto;
 
 
     }
 
     }
 +
    @media screen and (max-width: 768px) {
 +
      /* Adjustments for mobile devices */
  
−
    .title-ta {
+
      .box-container {
−
      font-weight: bold;
+
        width: 100%;
−
      font-size: 16px;
+
        height: 200px;
−
       margin: 10px 0 0 0;
+
       
−
    }
+
       }
 +
  
−
    .title-en {
+
      .inner-box {
−
       font-size: 14px;
+
      width: 100%;
−
       margin: 2px 0 0 0;
+
      height: 200px;
−
      color: #333;
+
      font-size: 10px;
 +
      font-weight: bold;
 +
    }
 +
       .additional-box {
 +
        width: 90%;
 +
        height:auto;
 +
        left: 5%;
 +
        font-size: 10px;
 +
       }
 +
      .responsive-image{
 +
        width: auto;
 +
        height:40px;
 
     }
 
     }
−
 
+
       }
−
    .card-text {
 
−
       flex: 1;
 
 
     }
 
     }
  
−
    .description {
+
       .responsive-image{
−
      font-size: 14px;
+
         width: auto;
−
       line-height: 1.5;
+
         height:100px;
−
      color: #111;
 
−
    }
 
−
 
 
−
    @media screen and (max-width: 600px) {
 
−
      .card a {
 
−
        flex-direction: column;
 
−
        text-align: center;
 
−
      }
 
−
 
 
−
      .card-left {
 
−
        margin: 0 0 10px 0;
 
−
         width: 100%;
 
−
      }
 
−
 
 
−
      .card-text {
 
−
         text-align: center;
 
−
      }
 
 
     }
 
     }
 
   </style>
 
   </style>
வரிசை 90: வரிசை 94:
 
<body>
 
<body>
  
 +
<!-- Outermost container -->
 
<div class="outermost-container">
 
<div class="outermost-container">
  
−
   <!-- Box 1 -->
+
   <!-- First set of boxes -->
−
   <div class="card">
+
   <div class="outer-container">
−
     <a href="http://noolaham.media" target="_blank">
+
     <!-- Left inner box with additional box -->
−
       <div class="card-left">
+
    <div class="box-container">
−
         <img src="https://noolaham.org/wiki/images/6/6c/NOOLAHAM-LOGO-PALOODAKAM-JAN2024_01%281%29.png" alt="Noolaham Multimedia">
+
       <div class="inner-box" onclick="openLink()">
−
         <p class="title-ta">பல்லூடக நூலகம்</p>
+
         <img src="https://noolaham.org/wiki/images/6/6c/NOOLAHAM-LOGO-PALOODAKAM-JAN2024_01%281%29.png" class="responsive-image" >
−
        <p class="title-en">Noolaham Multimedia</p>
+
         <p >பல்லூடக நூலகம் <br/> Noolaham Multimedia</p>
 
       </div>
 
       </div>
−
       <div class="card-text">
+
       <div class="additional-box"> <br/>
−
         <p class="description">புகைப்படங்கள், ஒலி-நிகழ்பட ஆவணங்கள் (Audio-Visual materials), அலுவலக ஆவணங்கள் (சொற்செயலி, அட்டவணை, நிகழ்த்தல்), வலைத்தளங்கள் போன்ற பல்லூடகங்களை பாதுகாத்துப் பகிர்வதற்கான தளம்.</p>
+
         <p> புகைப்படங்கள், ஒலி-நிகழ்பட ஆவணங்கள் (Audio-Visual materials), அலுவலக ஆவணங்கள் (சொற்செயலி, அட்டவணை, நிகழ்த்தல்), வலைத்தளங்கள் போன்ற பல்லூடகங்களை பாதுகாத்துப் பகிர்வதற்கான தளம்.
 +
      </p>
 
       </div>
 
       </div>
−
     </a>
+
     </div>
−
  </div>
 
  
−
  <!-- Box 2 -->
+
    <!-- Right inner box with additional box -->
−
  <div class="card">
+
    <div class="box-container">
−
    <a href="http://noolaham.school" target="_blank">
+
       <div class="inner-box" onclick="openLink2()">
−
       <div class="card-left">
+
         <img src="https://noolaham.org/wiki/images/thumb/2/24/NOOLAHAM-NEW_LOGO-PALLIKOODAM-JAN2024-01_%281%29.png/900px-NOOLAHAM-NEW_LOGO-PALLIKOODAM-JAN2024-01_%281%29.png" class="responsive-image">
−
         <img src="https://noolaham.org/wiki/images/thumb/2/24/NOOLAHAM-NEW_LOGO-PALLIKOODAM-JAN2024-01_%281%29.png/900px-NOOLAHAM-NEW_LOGO-PALLIKOODAM-JAN2024-01_%281%29.png" alt="Noolaham School">
+
         <p >பள்ளிக்கூட நூலகம் <br/> Noolaham School</p>
−
         <p class="title-ta">பள்ளிக்கூட நூலகம்</p>
 
−
        <p class="title-en">Noolaham School</p>
 
 
       </div>
 
       </div>
−
       <div class="card-text">
+
       <div class="additional-box"> <br/>
−
         <p class="description">கல்வி சார் முயற்சிகளுக்கு உறுதுணையாக, கற்றல் கற்பித்தற் செயன்முறைகளுடன் தொடர்பான‌ ஆவணங்களைச் சேகரித்து, ஆவணப்படுத்தி இணையம் வழியாக அனைவருக்கும் பயன்தரும் வகையில் வெளியிடும் இணையத் தளம்.</p>
+
 
 +
         <p> கல்வி சார் முயற்சிகளுக்கு உறுதுணையாக, கற்றல் கற்பித்தற் செயன்முறைகளுடன் தொடர்பான‌ ஆவணங்களைச் சேகரித்து, ஆவணப்படுத்தி இணையம் வழியாக அனைவருக்கும் பயன்தரும் வகையில் வெளியிடும் இணையத் தளம்.  
 +
      </p>
 
       </div>
 
       </div>
−
     </a>
+
     </div>
 
   </div>
 
   </div>
 +
  
−
   <!-- Box 3 -->
+
   <br>
−
   <div class="card">
+
 
−
     <a href="https://noolaham.foundation" target="_blank">
+
<!-- Second set of boxes -->
−
       <div class="card-left">
+
   <div class="outer-container">
−
         <img src="https://noolaham.org/wiki/images/thumb/e/e9/NOOLAHAM_FOUNDATION-NEW_LOGO-JAN2024-01_%281%29.png/900px-NOOLAHAM_FOUNDATION-NEW_LOGO-JAN2024-01_%281%29.png" alt="Noolaham Foundation">
+
     <!-- Left inner box with additional box -->
−
         <p class="title-ta">நூலக நிறுவனம்</p>
+
    <div class="box-container">
−
        <p class="title-en">Noolaham Foundation</p>
+
       <div class="inner-box" onclick="openLink3()">
 +
         <img src="https://noolaham.org/wiki/images/thumb/e/e9/NOOLAHAM_FOUNDATION-NEW_LOGO-JAN2024-01_%281%29.png/900px-NOOLAHAM_FOUNDATION-NEW_LOGO-JAN2024-01_%281%29.png" class="responsive-image" >
 +
         <p >நூலக நிறுவனம் <br/> Noolaham Foundation </p>
 
       </div>
 
       </div>
−
       <div class="card-text">
+
       <div class="additional-box"> <br/>
−
         <p class="description">இலங்கைத் தமிழ் பேசும் சமூகங்கள் தொடர்பான ஆவணங்களை எண்ணிமப்படுத்தி ஆவணப்படுத்தி, இலவச மற்றும் திறந்த அணுகல் மூலம் தமிழ் பேசும் சமூகங்கள் தொடர்பான கல்வி, ஆராய்ச்சி மற்றும் மேம்பாட்டு முயற்சிகளை ஆதரிக்கும் நிறுவனம்.</p>
+
         <p> இலங்கைத் தமிழ் பேசும் சமூகங்கள் தொடர்பான ஆவணங்களை எண்ணிமப்படுத்தி ஆவணப்படுத்தி, இலவச மற்றும் திறந்த அணுகல் மூலம் தமிழ் பேசும் சமூகங்கள் தொடர்பான கல்வி, ஆராய்ச்சி மற்றும் மேம்பாட்டு முயற்சிகளை ஆதரிக்கும் நிறுவனம்.  
 +
</p>
 
       </div>
 
       </div>
−
     </a>
+
     </div>
−
  </div>
+
 
 +
 
 +
 
  
−
  <!-- Box 4 -->
+
    <!-- Right inner box with additional box -->
−
  <div class="card">
+
    <div class="box-container">
−
    <a href="https://www.noolaham.tech" target="_blank">
+
       <div class="inner-box" onclick="openLink4()">
−
       <div class="card-left">
+
         <img src="https://noolaham.org/wiki/images/thumb/f/fa/NOOLAHAM-NEW_LOGO-CTNLPR-JAN2024-01_%281%29.png/900px-NOOLAHAM-NEW_LOGO-CTNLPR-JAN2024-01_%281%29.png" class="responsive-image">
−
         <img src="https://noolaham.org/wiki/images/thumb/f/fa/NOOLAHAM-NEW_LOGO-CTNLPR-JAN2024-01_%281%29.png/900px-NOOLAHAM-NEW_LOGO-CTNLPR-JAN2024-01_%281%29.png" alt="Noolaham Tech">
+
         <p >நூலக நுட்பம் <br/> Noolaham Tech</p>
−
         <p class="title-ta">நூலக நுட்பம்</p>
 
−
        <p class="title-en">Noolaham Tech</p>
 
 
       </div>
 
       </div>
−
       <div class="card-text">
+
       <div class="additional-box"> <br/>
−
         <p class="description">தமிழ் மொழியின் நீண்ட ஆயுளுக்கும் முழுமைக்கும் தொழில்நுட்ப மேம்பாடுகளைப் பின்பற்றி இயற்கை மொழி செயலாக்கம் (Natural Language Processing) மற்றும் செயற்கை நுண்ணறிவு (Artificial Intelligence) சார்ந்த ஆய்வுகளை மேற்கொள்ளுதல்.</p>
+
         <p> தமிழ் மொழியின் நீண்ட ஆயுளுக்கும் முழுமைக்கும் தொழில்நுட்ப மேம்பாடுகளைப் பின்பற்றி இயற்கை மொழி செயலாக்கம் (Natural Language Processing) மற்றும் செயற்கை நுண்ணறிவு (Artificial Intelligence) சார்ந்த ஆய்வுகளை மேற்கொள்ளுதல். </p>
 
       </div>
 
       </div>
−
     </a>
+
     </div>
 
   </div>
 
   </div>
  
 
</div>
 
</div>
 +
 +
<!-- JavaScript to handle the click event and open the link -->
 +
<script>
 +
    function openLink() {
 +
        window.location.href = "http://noolaham.media";
 +
    }
 +
 +
    function openLink2() {
 +
        window.location.href = "http://noolaham.school";
 +
    }
 +
 +
    function openLink3() {
 +
        window.location.href = "https://noolaham.foundation";
 +
    }
 +
 +
    function openLink4() {
 +
        window.location.href = "https://www.noolaham.tech";
 +
    }
 +
 +
</script>
  
 
</body>
 
</body>
 
</html>
 
</html>

01:50, 4 செப்டம்பர் 2025 இல் கடைசித் திருத்தம்

FrontBoxDown

பல்லூடக நூலகம்
Noolaham Multimedia


புகைப்படங்கள், ஒலி-நிகழ்பட ஆவணங்கள் (Audio-Visual materials), அலுவலக ஆவணங்கள் (சொற்செயலி, அட்டவணை, நிகழ்த்தல்), வலைத்தளங்கள் போன்ற பல்லூடகங்களை பாதுகாத்துப் பகிர்வதற்கான தளம்.

பள்ளிக்கூட நூலகம்
Noolaham School


கல்வி சார் முயற்சிகளுக்கு உறுதுணையாக, கற்றல் கற்பித்தற் செயன்முறைகளுடன் தொடர்பான‌ ஆவணங்களைச் சேகரித்து, ஆவணப்படுத்தி இணையம் வழியாக அனைவருக்கும் பயன்தரும் வகையில் வெளியிடும் இணையத் தளம்.


நூலக நிறுவனம்
Noolaham Foundation


இலங்கைத் தமிழ் பேசும் சமூகங்கள் தொடர்பான ஆவணங்களை எண்ணிமப்படுத்தி ஆவணப்படுத்தி, இலவச மற்றும் திறந்த அணுகல் மூலம் தமிழ் பேசும் சமூகங்கள் தொடர்பான கல்வி, ஆராய்ச்சி மற்றும் மேம்பாட்டு முயற்சிகளை ஆதரிக்கும் நிறுவனம்.

நூலக நுட்பம்
Noolaham Tech


தமிழ் மொழியின் நீண்ட ஆயுளுக்கும் முழுமைக்கும் தொழில்நுட்ப மேம்பாடுகளைப் பின்பற்றி இயற்கை மொழி செயலாக்கம் (Natural Language Processing) மற்றும் செயற்கை நுண்ணறிவு (Artificial Intelligence) சார்ந்த ஆய்வுகளை மேற்கொள்ளுதல்.


நூல்கள் [21,773] இதழ்கள் [18,039] பத்திரிகைகள் [72,101] பிரசுரங்கள் [1,501] நினைவு மலர்கள் [2,935] சிறப்பு மலர்கள் [7,552] எழுத்தாளர்கள் [9,600] பதிப்பாளர்கள் [7,713] வெளியீட்டு ஆண்டு [239] குறிச்சொற்கள் [123] வலைவாசல்கள் [25] சுவடியகம் [24] நிறுவனங்கள் [1,939] வாழ்க்கை வரலாறுகள் [3,436]

உங்கள் பங்களிப்புகளுக்கு
"https://noolaham.org/wiki/index.php?title=FrontDownBox&oldid=647074" இருந்து மீள்விக்கப்பட்டது
  • Powered by MediaWiki