VERSION-9

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic HTML Structure</title>
      <style>
        body {
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          padding: 5px;                    
          overflow-y: auto;         
        } 
        .section-main{
          flex-direction: column;
          padding: 5px;    
        } 
        .section-title {   }
        .div-title {
          font-family: "Roboto", sans-serif;
          font-size: 25px;
          font-weight: bold;      
        }
        .div-version {          
          font-size: 15px;
          font-weight: bold;
        }
        .section-header {   }
        .section-body {
          flex-direction: column;
          padding: 10px 0px 10px 0px;         
          max-width: auto;
        }    
        
                
        #tableContainer {
            backdrop-filter: blur(15px); /* Frosted glass effect */
            border-radius: 15px; /* Rounded corners */
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.9); /* Shadow effect */
            overflow: hidden; /* Hide overflow for rounded corners */
        }

        table {
            border-collapse: collapse; /* Collapsed borders */
            width: 80%; /* Table width */
            background: rgba(0, 0, 0, 0.3); /* Semi-transparent dark background */
            font-size: 1em;
        }

        th, td {
            padding: 12px; /* Padding */
            text-align: center; /* Centered text */
            border: 1px solid rgba(255, 255, 255, 0.3); /* Light borders */
        }

        th {
            background: rgba(0, 102, 204, 0.7); /* Blue header background */
            color: #ffffff; /* White text */
            font-size: 1.2em; /* Font size for headers */
            position: relative; /* Position for pseudo-element */
            backdrop-filter:...

CSS

body {
    background: linear-gradient(135deg, #0d1b2a, #1b2631); /* Deep blue gradient background */
    color: #ffffff; /* White text */
    font-family: 'Arial', sans-serif; /* Font family */
    display: flex; /* Centering */
    justify-content: center; /* Centering */
    align-items: center; /* Centering */
    height: 100vh; /* Full height */
    margin: 0; /* Remove margin */
}

#tableContainer {
    backdrop-filter: blur(15px); /* Frosted glass effect */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); /* Shadow effect */
    overflow: hidden; /* Hide overflow for rounded corners */
}

table {
    border-collapse: collapse; /* Collapsed borders */
    width: 80%; /* Table width */
    background: rgba(0, 0, 0, 0.3); /* Semi-transparent dark background */
}

th, td {
    padding: 12px; /* Padding */
    text-align: center; /* Centered text */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Light borders */
}

th {
    background: rgba(0, 102, 204, 0.7); /* Blue header background */
    color: #ffffff; /* White text */
    font-size: 1.2em; /* Font size for headers */
    position: relative; /* Position for pseudo-element */
    backdrop-filter: blur(5px); /* Frosted glass effect on header */
}

td {
    background: rgba(0, 51, 102, 0.3); /* Blue-tinted cell background */
    transition: background 0.3s; /* Transition for hover effect */
    backdrop-filter: blur(5px); /* Frosted glass effect on cells */
}

td:hover {
    background: rgba(0, 153, 255, 0.5); /* Light blue hover effect */
}

input[type="text"],
input[type="number"] {
    width: 100%; /* Full width */
    padding: 8px; /* Padding */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    background: rgba(255, 255, 255, 0.2); /* Semi-transparent input */
    color: #ffffff; /* White text */
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); /* Inner shadow */
    transition: background 0.3s; /* Transition for input...