Scribd Logo
Upload

Welcome to Scribd!

  • 8 views

    table-content

    Uploaded by

    xhcnkh

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd

    table-content

    Uploaded by

    xhcnkh
    8 views3 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    8 views3 pages

    table-content

    Uploaded by

    xhcnkh

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    You are on page 1of 3

    <!

    DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Layout with Sections</title>
    <style>
    body {
    /*margin: 0; /* Remove default margin */
    /*padding: 0; /* Remove default padding */
    font-family: Arial, sans-serif; /* Set a default font */
    font-size: 16px; /* Set base font size */
    line-height: 1.5; /* Improve readability */
    background-color: #fff; /* Set background color */
    color: #333; /* Set default text color */
    text-rendering: optimizeLegibility; /* Improve text rendering for
    better legibility */
    -webkit-font-smoothing: antialiased; /* Improve text rendering on
    webkit browsers */
    -moz-osx-font-smoothing: grayscale; /* Improve text rendering on macOS
    */
    word-wrap: break-word; /* Ensure long words break correctly */
    box-sizing: border-box; /* Include padding and border in element's
    total width and height */
    min-height: 100vh; /* Ensure body takes full height of viewport */
    /* Enable flexbox for better layout control */
    flex-direction: column; /* Set default flexbox layout direction */
    overflow-x: hidden; /* Prevent horizontal overflow */
    }

    .TableContent{
    width:21%;
    }

    .vertical-line {
    width: 1px;
    background-color: black;
    height: 100vh; /* Set the height of the line */
    }

    .OtherContent{
    margin-left: 50px;
    display: flex;
    }

    .MainElm{
    MARGIN: 20PX;

    }
    .MainElm IMG{
    WIDTH: 20px; HEIGHT:AUTO;
    margin-right: 10px;
    }

    .UserLogo{
    display:flex;
    }
    .UserLogo1 {
    width: 40%;
    }
    .UserLogo1 img{
    width: 70px; Height: auto;
    }
    .UserAcc{
    width: 65%;
    }
    .Logout{

    }
    .Logout img{
    margin-top: 10px;
    width: 25px; Height: auto;
    }

    </style>
    </head>
    <body>
    <div style="display:flex">
    <div class="TableContent">
    <header class="LOGO_HEADER">
    <img width="40" height="auto"
    src="https://cdn-icons-png.freepik.com/256/11860/11860449.png?
    semt=ais_hybrid">
    <span style="font-size: 120%;">
    <b style="font-size: 1.4em;">Smart</b>
    <i style="color:orange">printing service</i>
    </span>
    </header>

    <div class="Dashboard" style="margin:20px">


    <img width="20" height="auto"
    src="https://cdn-icons-png.freepik.com/256/17740/17740838.png?
    semt=ais_hybrid">

    <span style="margin-left:10px">
    Dashboard
    </span>
    </div>

    <div class="PrinterList" style="margin:20px">


    <img style="width:20px; height:auto;"
    src="https://cdn-icons-png.freepik.com/256/5337/5337035.png?
    semt=ais_hybrid">

    <span style="margin:10px">
    Printer List
    </span>
    </div>

    <div class="MainElm">
    <img src="https://cdn-icons-png.freepik.com/256/16762/16762938.png?
    semt=ais_hybrid">
    <span>User List</span>
    </div>

    <div class="MainElm">
    <img src="https://cdn-icons-png.freepik.com/256/4340/4340067.png">
    <span>View History</span>
    </div>

    <div class="MainElm">
    <img src="https://cdn-icons-png.freepik.com/256/2912/2912773.png?
    semt=ais_hybrid">
    <span>Report</span>
    </div>

    <div style="margin-top: 60%;"> </div>

    <div class="UserLogo">

    <div class="UserLogo1">
    <img src="https://cdn-icons-png.freepik.com/256/8599/8599062.png?
    semt=ais_hybrid">
    </div>

    <div class="UserAcc">
    <span>
    Nguyen Viet Hoang
    </span>
    <span style="font-size: 13px;">
    [email protected]
    </span>
    </div>

    <div class="Logout">
    <img src="https://img.icons8.com/?size=100&id=2445&format=png">
    </div>

    </div>

    </div>

    <div class="vertical-line"></div>

    <div class="OtherContent">

    <div class="col1" style="width:500px">


    col1
    </div>

    <div class="col2">
    col2
    </div>
    </div>
    </div>
    </body>
    </html>

    You might also like