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

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

FrontBox

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

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

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

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

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

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

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

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

நூல்கள் [20,133] இதழ்கள் [17,442] பத்திரிகைகள் [69,513] பிரசுரங்கள் [1,365] நினைவு மலர்கள் [2,582] சிறப்பு மலர்கள் [7,241] எழுத்தாளர்கள் [8,977] பதிப்பாளர்கள் [7,189] வெளியீட்டு ஆண்டு [238] குறிச்சொற்கள் [127] வலைவாசல்கள் [25] சுவடியகம் [24] நிறுவனங்கள் [1,926] வாழ்க்கை வரலாறுகள் [3,398]

உங்கள் பங்களிப்புகளுக்கு

@@ வரிசை 1: / வரிசை 1: @@
 <html>
 <head>
+   <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FrontBox</title>
    <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 {
-       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;
      }
-     /* Style for the outer container */
+     /* Styles for the outer container */
      .outer-container {
        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 {
-      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 {
-       width: 100%; /* Adjust the width of each inner box as needed */
+       width: 100%;
-       height: 300px;
+       height: auto;
        font-size: 20px;
        background-color: #dfedff;
-       padding: 1%; /* Adjust padding for inner box content */
+       padding: 1%;
-      align-items: 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;
      }
+     /* Styles for the box below each inner box */
-     /* Style for the box below each inner box */
      .additional-box {
-       position: absolute; /* Added for positioning */
+       position: absolute;
-       width: 90̥%;
+       width: 90%;
        height: 110px;
        text-align: center;
        background-color: #dfedff;
-       margin-top: 5px; /* Add margin for spacing */
+       margin-top: 5px;
        margin-bottom: 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>