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

நூலகம் இல் இருந்து
தாவிச் செல்ல:வழிசெலுத்தல், தேடுக
வரிசை 1: வரிசை 1:
 
<html>
 
<html>
 
<head>
 
<head>
 +
  <meta charset="UTF-8">
 +
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <title>FrontBox</title>
 
   <title>FrontBox</title>
 
   <style>
 
   <style>
      /* Your existing styles remain unchanged */
+
     /* Styles for the outermost container */
 
 
@media screen and (max-width: 768px) {
 
  /* Adjustments for mobile devices */
 
 
 
  .outer-container {
 
    flex-direction: column; /* Stack inner boxes vertically on small screens */
 
  }
 
 
 
  .box-container {
 
    width: 100%; /* Full width for each container on small screens */
 
    margin-bottom: 20px; /* Add margin between box containers */
 
  }
 
 
 
  .inner-box {
 
    width: 100%; /* Full width for inner boxes on small screens */
 
    height: auto; /* Adjust height to accommodate content */
 
  }
 
 
 
  .additional-box {
 
    position: absolute;
 
    width: 100%; /* Full width for additional boxes on small screens */
 
  }
 
}
 
 
 
 
 
 
 
 
 
 
 
     /* Style for the outermost container */
 
 
     .outermost-container {
 
     .outermost-container {
       background-color: #dfedff; /* Add background color to the outermost container */
+
       background-color: #dfedff;
       padding: 1%; /* Add padding for spacing */
+
       padding: 1%;
 
       border: 1px solid blue;
 
       border: 1px solid blue;
 
     }
 
     }
  
     /* Style for the outer container */
+
     /* Styles for the outer container */
 
     .outer-container {
 
     .outer-container {
 
       display: flex;
 
       display: flex;
       justify-content: space-between; /* Space the inner boxes apart */
+
       flex-wrap: wrap; /* Allow boxes to wrap to the next line on smaller screens */
      width: 100%; /* Adjust the total width as needed */
+
       justify-content: space-between;
       margin: 0 auto; /* Center the container */
 
 
     }
 
     }
  
     /* Style for each container holding an inner box and additional box */
+
     /* Styles for each box container */
 
     .box-container {
 
     .box-container {
      position: relative; /* Added for positioning */
+
       width: 48%; /* Adjust the width of each container as needed */
       width: 49%; /* Adjust the width of each container as needed */
+
       margin-bottom: 20px;
       height: auto;
+
      position: relative;
 
     }
 
     }
  
     /* Style for each inner box */
+
     /* Styles for each inner box */
 
     .inner-box {
 
     .inner-box {
       width: 100%; /* Adjust the width of each inner box as needed */
+
       width: 100%;
       height: 300px;
+
       height: auto;
 
       font-size: 20px;
 
       font-size: 20px;
 
       background-color: #dfedff;
 
       background-color: #dfedff;
       padding: 1%; /* Adjust padding for inner box content */
+
       padding: 1%;
      align-items: center;
 
 
       text-align: center;
 
       text-align: center;
      transition: background-color 0.3s, color 0.3s; /* Add transition for a smooth effect */
+
       border-radius: 5px;
       border-radius: 0px; /* Corrected property name */
+
       box-sizing: border-box;
       box-sizing: border-box; /* Include padding and border in the box's total width and height */
+
       cursor: pointer;
       cursor: grab;
 
 
       border: 1px solid blue;
 
       border: 1px solid blue;
 
     }
 
     }
  
+
     /* Styles for the box below each inner box */
 
 
     /* Style for the box below each inner box */
 
 
     .additional-box {
 
     .additional-box {
       position: absolute; /* Added for positioning */
+
       position: absolute;
       width: 90̥%;
+
       width: 90%;
 
       height: 110px;
 
       height: 110px;
 
       text-align: center;
 
       text-align: center;
 
       background-color: #dfedff;
 
       background-color: #dfedff;
       margin-top: 5px; /* Add margin for spacing */
+
       margin-top: 5px;
 
       margin-bottom: 5px;
 
       margin-bottom: 5px;
 
       border-radius: 5px;
 
       border-radius: 5px;
       bottom: 0; /* Align the additional box at the bottom of the container */
+
       bottom: 0;
       left: 0; /* Align the additional box to the left of the container */
+
      left: 5%; /* Adjust the left position */
 +
    }
 +
 
 +
    @media screen and (max-width: 768px) {
 +
      /* Adjustments for mobile devices */
 +
 
 +
       .box-container {
 +
        width: 100%;
 +
      }
 +
 
 +
      .additional-box {
 +
        width: 90%;
 +
        left: 5%;
 +
      }
 
     }
 
     }
 
   </style>
 
   </style>

03:16, 27 நவம்பர் 2023 இல் நிலவும் திருத்தம்

FrontBox

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


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

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


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


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


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

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


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

"https://noolaham.org/wiki/index.php?title=FrontDownBox&oldid=589072" இருந்து மீள்விக்கப்பட்டது