"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;
 
−
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
 
−
      gap: 20px;
 
−
      padding: 20px;
 
−
    }
 
−
 
−
    .card {
 
−
      display: flex;
 
−
      align-items: flex-start;
 
 
       background-color: #dfedff;
 
       background-color: #dfedff;
 +
      padding: 1%;
 
       border: 1px solid #009de0;
 
       border: 1px solid #009de0;
−
      border-radius: 12px;
 
−
      padding: 20px;
 
 
     }
 
     }
  
−
     .card-left {
+
    /* Styles for the outer container */
−
       width: 150px;
+
     .outer-container {
−
       text-align: center;
+
       display: flex;
−
       margin-right: 20px;
+
       flex-wrap: wrap; /* Allow boxes to wrap to the next line on smaller screens */
 +
       justify-content: space-between;
 
     }
 
     }
  
−
     .card-left img {
+
    /* Styles for each box container */
−
       width: 100px;
+
     .box-container {
−
       height: auto;
+
       width: 48%; /* Adjust the width of each container as needed */
 +
      margin-bottom: 20px;
 +
       position: relative;
 
     }
 
     }
  
−
     .title-ta {
+
    /* Styles for each inner box */
−
       font-weight: bold;
+
     .inner-box {
−
       font-size: 16px;
+
      width: 100%;
−
       margin: 10px 0 0 0;
+
      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;
 
     }
 
     }
  
−
     .title-en {
+
    /* Styles for the box below each inner box */
−
       font-size: 14px;
+
     .additional-box {
−
       margin: 2px 0 0 0;
+
       position: absolute;
−
       color: #333;
+
      width: 90%;
 +
      height: 130px;
 +
      text-align: center;
 +
      background-color: #dfedff;
 +
      margin-top: 5px;
 +
       margin-bottom: 5px;
 +
      border-radius: 5px;
 +
      bottom: 0;
 +
       left: 5%; /* Adjust the left position */
 
     }
 
     }
−
 
+
      .responsive-image{
−
    .card-text {
+
        width: auto;
−
      flex: 1;
+
        height:100px;
 
     }
 
     }
 +
    @media screen and (max-width: 768px) {
 +
      /* Adjustments for mobile devices */
  
−
    .description {
+
      .box-container {
−
      font-size: 14px;
+
        width: 100%;
−
      line-height: 1.5;
+
        height: 200px;
−
       color: #111;
+
       
−
    }
+
       }
 +
  
−
    @media screen and (max-width: 600px) {
+
      .inner-box {
−
       .card {
+
      width: 100%;
−
         flex-direction: column;
+
      height: 200px;
−
         text-align: center;
+
      font-size: 10px;
 +
      font-weight: bold;
 +
    }
 +
       .additional-box {
 +
         width: 90%;
 +
        height:auto;
 +
        left: 5%;
 +
         font-size: 10px;
 
       }
 
       }
−
 
+
       .responsive-image{
−
       .card-left {
+
         width: auto;
−
         margin: 0 0 10px 0;
+
         height:40px;
−
         width: 100%;
+
    }
 
       }
 
       }
 +
    }
  
−
       .card-text {
+
       .responsive-image{
−
         text-align: center;
+
         width: auto;
−
      }
+
        height:100px;
 
     }
 
     }
 
   </style>
 
   </style>
வரிசை 77: வரிசை 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">
−
     <div class="card-left">
+
    <!-- Left inner box with additional box -->
−
       <img src="https://noolaham.org/wiki/images/6/6c/NOOLAHAM-LOGO-PALOODAKAM-JAN2024_01%281%29.png" alt="Noolaham Multimedia">
+
     <div class="box-container">
−
      <p class="title-ta">பல்லூடக நூலகம்</p>
+
       <div class="inner-box" onclick="openLink()">
−
       <p class="title-en">Noolaham Multimedia</p>
+
        <img src="https://noolaham.org/wiki/images/6/6c/NOOLAHAM-LOGO-PALOODAKAM-JAN2024_01%281%29.png" class="responsive-image" >
 +
        <p >பல்லூடக நூலகம் <br/> Noolaham Multimedia</p>
 +
       </div>
 +
      <div class="additional-box"> <br/>
 +
        <p> புகைப்படங்கள், ஒலி-நிகழ்பட ஆவணங்கள் (Audio-Visual materials), அலுவலக ஆவணங்கள் (சொற்செயலி, அட்டவணை, நிகழ்த்தல்), வலைத்தளங்கள் போன்ற பல்லூடகங்களை பாதுகாத்துப் பகிர்வதற்கான தளம்.
 +
      </p>
 +
      </div>
 
     </div>
 
     </div>
−
     <div class="card-text">
+
 
−
       <p class="description">புகைப்படங்கள், ஒலி-நிகழ்பட ஆவணங்கள் (Audio-Visual materials), அலுவலக ஆவணங்கள் (சொற்செயலி, அட்டவணை, நிகழ்த்தல்), வலைத்தளங்கள் போன்ற பல்லூடகங்களை பாதுகாத்துப் பகிர்வதற்கான தளம்.</p>
+
    <!-- Right inner box with additional box -->
 +
     <div class="box-container">
 +
       <div class="inner-box" onclick="openLink2()">
 +
        <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">
 +
        <p >பள்ளிக்கூட நூலகம் <br/>  Noolaham School</p>
 +
      </div>
 +
      <div class="additional-box"> <br/>
 +
 
 +
        <p> கல்வி சார் முயற்சிகளுக்கு உறுதுணையாக, கற்றல் கற்பித்தற் செயன்முறைகளுடன் தொடர்பான‌ ஆவணங்களைச் சேகரித்து, ஆவணப்படுத்தி இணையம் வழியாக அனைவருக்கும் பயன்தரும் வகையில் வெளியிடும் இணையத் தளம்.  
 +
      </p>
 +
      </div>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 +
  
−
   <!-- Box 2 -->
+
   <br>
−
   <div class="card">
+
 
−
     <div class="card-left">
+
<!-- Second set of boxes -->
−
       <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">
+
   <div class="outer-container">
−
      <p class="title-ta">பள்ளிக்கூட நூலகம்</p>
+
    <!-- Left inner box with additional box -->
−
       <p class="title-en">Noolaham School</p>
+
     <div class="box-container">
 +
       <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 class="additional-box"> <br/>
 +
        <p> இலங்கைத் தமிழ் பேசும் சமூகங்கள் தொடர்பான ஆவணங்களை எண்ணிமப்படுத்தி ஆவணப்படுத்தி, இலவச மற்றும் திறந்த அணுகல் மூலம் தமிழ் பேசும் சமூகங்கள் தொடர்பான கல்வி, ஆராய்ச்சி மற்றும் மேம்பாட்டு முயற்சிகளை ஆதரிக்கும் நிறுவனம்.
 +
</p>
 +
      </div>
 
     </div>
 
     </div>
−
    <div class="card-text">
 
−
      <p class="description">கல்வி சார் முயற்சிகளுக்கு உறுதுணையாக, கற்றல் கற்பித்தற் செயன்முறைகளுடன் தொடர்பான‌ ஆவணங்களைச் சேகரித்து, ஆவணப்படுத்தி இணையம் வழியாக அனைவருக்கும் பயன்தரும் வகையில் வெளியிடும் இணையத் தளம்.</p>
 
−
    </div>
 
−
  </div>
 
  
−
  <!-- Box 3 -->
 
−
  <div class="card">
 
−
    <div class="card-left">
 
−
      <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">
 
−
      <p class="title-ta">நூலக நிறுவனம்</p>
 
−
      <p class="title-en">Noolaham Foundation</p>
 
−
    </div>
 
−
    <div class="card-text">
 
−
      <p class="description">இலங்கைத் தமிழ் பேசும் சமூகங்கள் தொடர்பான ஆவணங்களை எண்ணிமப்படுத்தி ஆவணப்படுத்தி, இலவச மற்றும் திறந்த அணுகல் மூலம் தமிழ் பேசும் சமூகங்கள் தொடர்பான கல்வி, ஆராய்ச்சி மற்றும் மேம்பாட்டு முயற்சிகளை ஆதரிக்கும் நிறுவனம்.</p>
 
−
    </div>
 
−
  </div>
 
  
−
  <!-- Box 4 -->
+
 
−
  <div class="card">
+
 
−
    <div class="card-left">
+
    <!-- Right inner box with additional box -->
−
      <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">
+
    <div class="box-container">
−
      <p class="title-ta">நூலக நுட்பம்</p>
+
      <div class="inner-box" onclick="openLink4()">
−
      <p class="title-en">Noolaham Tech</p>
+
        <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">
−
    </div>
+
        <p >நூலக நுட்பம் <br/> Noolaham Tech</p>
−
    <div class="card-text">
+
      </div>
−
      <p class="description">தமிழ் மொழியின் நீண்ட ஆயுளுக்கும் முழுமைக்கும் தொழில்நுட்ப மேம்பாடுகளைப் பின்பற்றி இயற்கை மொழி செயலாக்கம் (Natural Language Processing) மற்றும் செயற்கை நுண்ணறிவு (Artificial Intelligence) சார்ந்த ஆய்வுகளை மேற்கொள்ளுதல்.</p>
+
      <div class="additional-box"> <br/>
 +
        <p> தமிழ் மொழியின் நீண்ட ஆயுளுக்கும் முழுமைக்கும் தொழில்நுட்ப மேம்பாடுகளைப் பின்பற்றி இயற்கை மொழி செயலாக்கம் (Natural Language Processing) மற்றும் செயற்கை நுண்ணறிவு (Artificial Intelligence) சார்ந்த ஆய்வுகளை மேற்கொள்ளுதல். </p>
 +
      </div>
 
     </div>
 
     </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>

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

FrontBoxDown

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


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

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


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


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


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

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


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


நூல்கள் [22,054] இதழ்கள் [18,114] பத்திரிகைகள் [72,845] பிரசுரங்கள் [1,523] நினைவு மலர்கள் [2,991] சிறப்பு மலர்கள் [7,576] எழுத்தாளர்கள் [9,680] பதிப்பாளர்கள் [7,799] வெளியீட்டு ஆண்டு [239] குறிச்சொற்கள் [123] வலைவாசல்கள் [25] சுவடியகம் [24] நிறுவனங்கள் [1,968] வாழ்க்கை வரலாறுகள் [3,440]

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