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

நூலகம் இல் இருந்து
தாவிச் செல்ல:வழிசெலுத்தல், தேடுக
வரிசை 3: வரிசை 3:
 
   <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>FrontBoxDown</title>
+
   <title>Noolaham Boxes</title>
 
   <style>
 
   <style>
−
     /* Styles for the outermost container */
+
     body {
 +
      background-color: #dfedff;
 +
      font-family: Arial, sans-serif;
 +
    }
 +
 
 
     .outermost-container {
 
     .outermost-container {
 
       background-color: #dfedff;
 
       background-color: #dfedff;
−
       padding: 1%;
+
       padding: 30px;
−
       border: 1px solid #009de0;
+
       border: 2px solid #009de0;  /* ✅ Outer border */
 +
      border-radius: 20px;        /* ✅ Rounded corners */
 +
      max-width: 1200px;
 +
      margin: 20px auto;
 
     }
 
     }
  
−
    /* Styles for the outer container */
 
 
     .outer-container {
 
     .outer-container {
 
       display: flex;
 
       display: flex;
−
       flex-wrap: wrap; /* Allow boxes to wrap to the next line on smaller screens */
+
       flex-wrap: wrap;
 
       justify-content: space-between;
 
       justify-content: space-between;
 +
      gap: 20px;
 
     }
 
     }
  
−
    /* Styles for each box container */
 
 
     .box-container {
 
     .box-container {
−
       width: 48%; /* Adjust the width of each container as needed */
+
       flex: 1 1 45%;
−
       margin-bottom: 20px;
+
      background-color: #dfedff;
−
       position: relative;
+
      border: 1px solid #009de0;
 +
      border-radius: 15px;
 +
      padding: 20px;
 +
      display: flex;
 +
      gap: 15px;
 +
      align-items: flex-start;
 +
      min-height: 200px;
 +
      cursor: pointer;
 +
      transition: transform 0.2s ease, box-shadow 0.2s ease;
 +
    }
 +
 
 +
    .box-container:hover {
 +
       transform: translateY(-5px);
 +
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
 +
    }
 +
 
 +
    .box-container img {
 +
      width: auto;
 +
       height: 100px;
 
     }
 
     }
  
−
     /* Styles for each inner box */
+
     .box-left {
−
    .inner-box {
 
−
      width: 100%;
 
−
      height: 320px;
 
−
      font-size: 30px;
 
−
      background-color: #dfedff;
 
−
      padding: 1%;
 
 
       text-align: center;
 
       text-align: center;
−
       border-radius: 5px;
+
       min-width: 150px;
−
      box-sizing: border-box;
 
−
      cursor: pointer;
 
−
      border: 1px solid #009de0;
 
 
     }
 
     }
  
−
     /* Styles for the box below each inner box */
+
     .box-left p {
−
    .additional-box {
+
       margin-top: 10px;
−
      position: absolute;
+
       font-weight: bold;
−
      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{
+
 
−
        width: auto;
+
    .box-right {
−
        height:100px;
+
      flex: 1;
 +
      text-align: justify;          /* ✅ keep justified */
 +
      text-justify: inter-word;     /* ✅ better spacing */
 +
      font-size: 14px;
 +
      line-height: 1.5em;          /* ✅ improved readability */
 +
      word-spacing: normal;
 
     }
 
     }
 +
 
     @media screen and (max-width: 768px) {
 
     @media screen and (max-width: 768px) {
−
      /* Adjustments for mobile devices */
 
−
 
 
       .box-container {
 
       .box-container {
−
         width: 100%;
+
         flex-direction: column;
−
         height: 200px;
+
         align-items: center;
−
          
+
         text-align: center;
 
       }
 
       }
−
 
  
−
       .inner-box {
+
       .box-left {
−
      width: 100%;
+
         min-width: auto;
−
      height: 200px;
 
−
      font-size: 10px;
 
−
      font-weight: bold;
 
−
    }
 
−
      .additional-box {
 
−
         width: 90%;
 
−
        height:auto;
 
−
        left: 5%;
 
−
        font-size: 10px;
 
 
       }
 
       }
−
       .responsive-image{
+
 
−
         width: auto;
+
       .box-right {
−
         height:40px;
+
         text-align: justify;
−
    }
+
        text-justify: inter-word;
 +
        font-size: 12px;
 +
         line-height: 1.4em;
 
       }
 
       }
−
    }
 
−
 
−
      .responsive-image{
 
−
        width: auto;
 
−
        height:100px;
 
 
     }
 
     }
 
   </style>
 
   </style>
 
</head>
 
</head>
 
<body>
 
<body>
 +
  <div class="outermost-container">
 +
    <div class="outer-container">
  
−
<!-- Outermost container -->
+
      <!-- Box 1 -->
−
<div class="outermost-container">
+
      <div class="box-container" onclick="openLink()">
−
 
+
        <div class="box-left">
−
  <!-- First set of boxes -->
+
          <img src="https://noolaham.org/wiki/images/6/6c/NOOLAHAM-LOGO-PALOODAKAM-JAN2024_01%281%29.png">
−
  <div class="outer-container">
+
          <p>பல்லூடக நூலகம் <br/> Noolaham Multimedia</p>
−
    <!-- Left inner box with additional box -->
+
        </div>
−
    <div class="box-container">
+
        <div class="box-right">
−
      <div class="inner-box" onclick="openLink()">
+
          புகைப்படங்கள், ஒலி-நிகழ்பட ஆவணங்கள் (Audio-Visual materials), அலுவலக ஆவணங்கள் (சொற்செயலி, அட்டவணை, நிகழ்த்தல்),
−
        <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>
 
       </div>
−
      <div class="additional-box"> <br/>
 
−
        <p> புகைப்படங்கள், ஒலி-நிகழ்பட ஆவணங்கள் (Audio-Visual materials), அலுவலக ஆவணங்கள் (சொற்செயலி, அட்டவணை, நிகழ்த்தல்), வலைத்தளங்கள் போன்ற பல்லூடகங்களை பாதுகாத்துப் பகிர்வதற்கான தளம்.
 
−
      </p>
 
−
      </div>
 
−
    </div>
 
  
−
    <!-- Right inner box with additional box -->
+
      <!-- Box 2 -->
−
    <div class="box-container">
+
      <div class="box-container" onclick="openLink2()">
−
      <div class="inner-box" onclick="openLink2()">
+
        <div class="box-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">
−
        <p >பள்ளிக்கூட நூலகம் <br/> Noolaham School</p>
+
          <p>பள்ளிக்கூட நூலகம் <br/> Noolaham School</p>
 +
        </div>
 +
        <div class="box-right">
 +
          கல்வி சார் முயற்சிகளுக்கு உறுதுணையாக, கற்றல் கற்பித்தற் செயன்முறைகளுடன் தொடர்பான‌
 +
          ஆவணங்களைச் சேகரித்து, ஆவணப்படுத்தி இணையம் வழியாக அனைவருக்கும் பயன்தரும் வகையில் வெளியிடும் இணையத் தளம்.
 +
        </div>
 
       </div>
 
       </div>
−
      <div class="additional-box"> <br/>
 
  
−
         <p> கல்வி சார் முயற்சிகளுக்கு உறுதுணையாக, கற்றல் கற்பித்தற் செயன்முறைகளுடன் தொடர்பான‌ ஆவணங்களைச் சேகரித்து, ஆவணப்படுத்தி இணையம் வழியாக அனைவருக்கும் பயன்தரும் வகையில் வெளியிடும் இணையத் தளம்.  
+
      <!-- Box 3 -->
−
      </p>
+
      <div class="box-container" onclick="openLink3()">
 +
         <div class="box-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">
 +
          <p>நூலக நிறுவனம் <br/> Noolaham Foundation</p>
 +
        </div>
 +
        <div class="box-right">
 +
          இலங்கைத் தமிழ் பேசும் சமூகங்கள் தொடர்பான ஆவணங்களை எண்ணிமப்படுத்தி ஆவணப்படுத்தி,
 +
          இலவச மற்றும் திறந்த அணுகல் மூலம் தமிழ் பேசும் சமூகங்கள் தொடர்பான கல்வி, ஆராய்ச்சி மற்றும்
 +
          மேம்பாட்டு முயற்சிகளை ஆதரிக்கும் நிறுவனம்.
 +
        </div>
 
       </div>
 
       </div>
−
    </div>
 
−
  </div>
 
−
 
−
 
−
  <br>
 
  
−
<!-- Second set of boxes -->
+
      <!-- Box 4 -->
−
  <div class="outer-container">
+
      <div class="box-container" onclick="openLink4()">
−
    <!-- Left inner box with additional box -->
+
        <div class="box-left">
−
    <div class="box-container">
+
          <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">
−
      <div class="inner-box" onclick="openLink3()">
+
          <p>நூலக நுட்பம் <br/> Noolaham Tech</p>
−
        <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" >
+
        </div>
−
        <p >நூலக நிறுவனம் <br/> Noolaham Foundation </p>
+
        <div class="box-right">
−
      </div>
+
          தமிழ் மொழியின் நீண்ட ஆயுளுக்கும் முழுமைக்கும் தொழில்நுட்ப மேம்பாடுகளைப் பின்பற்றி
−
      <div class="additional-box"> <br/>
+
          இயற்கை மொழி செயலாக்கம் (Natural Language Processing) மற்றும் செயற்கை நுண்ணறிவு (Artificial Intelligence)
−
        <p> இலங்கைத் தமிழ் பேசும் சமூகங்கள் தொடர்பான ஆவணங்களை எண்ணிமப்படுத்தி ஆவணப்படுத்தி, இலவச மற்றும் திறந்த அணுகல் மூலம் தமிழ் பேசும் சமூகங்கள் தொடர்பான கல்வி, ஆராய்ச்சி மற்றும் மேம்பாட்டு முயற்சிகளை ஆதரிக்கும் நிறுவனம்.  
+
          சார்ந்த ஆய்வுகளை மேற்கொள்ளுதல்.
−
</p>
+
        </div>
 
       </div>
 
       </div>
−
    </div>
 
−
 
−
 
  
−
 
−
    <!-- Right inner box with additional box -->
 
−
    <div class="box-container">
 
−
      <div class="inner-box" onclick="openLink4()">
 
−
        <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">
 
−
        <p >நூலக நுட்பம் <br/> Noolaham Tech</p>
 
−
      </div>
 
−
      <div class="additional-box"> <br/>
 
−
        <p> தமிழ் மொழியின் நீண்ட ஆயுளுக்கும் முழுமைக்கும் தொழில்நுட்ப மேம்பாடுகளைப் பின்பற்றி இயற்கை மொழி செயலாக்கம் (Natural Language Processing) மற்றும் செயற்கை நுண்ணறிவு (Artificial Intelligence) சார்ந்த ஆய்வுகளை மேற்கொள்ளுதல். </p>
 
−
      </div>
 
 
     </div>
 
     </div>
 
   </div>
 
   </div>
  
−
</div>
+
  <script>
−
 
+
     function openLink() { window.location.href = "http://noolaham.media"; }
−
<!-- JavaScript to handle the click event and open the link -->
+
     function openLink2() { window.location.href = "http://noolaham.school"; }
−
<script>
+
     function openLink3() { window.location.href = "https://noolaham.foundation"; }
−
     function openLink() {
+
     function openLink4() { window.location.href = "https://www.noolaham.tech"; }
−
        window.location.href = "http://noolaham.media";
+
  </script>
−
    }
 
−
 
 
−
     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>

23:37, 3 செப்டம்பர் 2025 இல் நிலவும் திருத்தம்

Noolaham Boxes

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

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

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

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

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

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

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

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


நூல்கள் [21,778] இதழ்கள் [18,042] பத்திரிகைகள் [72,130] பிரசுரங்கள் [1,502] நினைவு மலர்கள் [2,939] சிறப்பு மலர்கள் [7,553] எழுத்தாளர்கள் [9,600] பதிப்பாளர்கள் [7,715] வெளியீட்டு ஆண்டு [239] குறிச்சொற்கள் [123] வலைவாசல்கள் [25] சுவடியகம் [24] நிறுவனங்கள் [1,939] வாழ்க்கை வரலாறுகள் [3,436]

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