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

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

FrontBoxDown

பல்லூடக நூலகம்
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=647030" இருந்து மீள்விக்கப்பட்டது
  • Powered by MediaWiki