Scribd Logo
Upload

Welcome to Scribd!

  • Sample

    Uploaded by

    Laude Sebastian Dan
    1 views2 pages
    This document contains the code for a navigation bar with links to different pages and media. It includes CSS styling for the navigation bar to make it responsive on different screen sizes. When the screen size is small, a hamburger menu icon is displayed to open and close the navigation links. The rest of the code sets up a basic webpage with a welcome message, tables, and background images.

    Original Description:

    Original Title

    sample

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document contains the code for a navigation bar with links to different pages and media. It includes CSS styling for the navigation bar to make it responsive on different screen sizes. When the screen size is small, a hamburger menu icon is displayed to open and close the navigation links. The rest of the code sets up a basic webpage with a welcome message, tables, and background images.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    1 views2 pages

    Sample

    Uploaded by

    Laude Sebastian Dan
    This document contains the code for a navigation bar with links to different pages and media. It includes CSS styling for the navigation bar to make it responsive on different screen sizes. When the screen size is small, a hamburger menu icon is displayed to open and close the navigation links. The rest of the code sets up a basic webpage with a welcome message, tables, and background images.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    <!

    DOCTYPE html>
    <html>
    <head>
    <title>Home</title>
    <body background=lines.gif>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <style>
    .navbar {
    overflow: hidden;
    background-color: #333;
    position: relative;
    top: 0;
    width: 100%;
    transition: top 0.3s;
    }

    .navbar a {
    float: left;
    display: block;
    color: pink;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
    font-size: 17px;
    }

    .navbar a:hover {
    background-color: #ddd;
    color: black;
    }

    /* Hide the link that should open and close the navigation menu on small screens */
    .navbar .icon {
    display: none;
    }

    @media screen and (max-width: 600px) {

    .navbar a:not(:first-child) {
    display: none;
    }

    .navbar a.icon {
    float: right;
    display: block;
    }
    /* Style the navigation menu (hidden by default) */
    .navbar.responsive {
    position: relative;
    }
    .navbar.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
    }
    .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
    }
    }
    </style>
    </head>

    <!-- The navigation bar -->


    <div class="navbar" id="myNavbar">
    <a href="LOGO.PNG">Home</a>
    <a href="PAYROLL.xlsx">My Payroll</a>
    <a href="GRADESS.xlsx">Grades</a>
    <a href="photo.jpg">Photo Editing</a>
    <a href="songs">Playlist</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
    </div>

    <table border>

    <table background=night.gif>
    <a href= target="_parent">
    <img src="LOGOO.PNG" width="50%" height="100"></center>
    <table background=asd.gif border=5 bordercolor=white width=100%
    heigth=50%>
    </table border>

    <div style="padding:16px">
    <table border>

    <b><font face= "Lucida Bright" size=50 color=pink><BR>


    </U> WELCOME TO MY PAGE<br> </U>
    <marquee behavior=alternate direction=left scrollamount=3><br>
    <br>LAUDE, SHANE DANIELLE<br><br>
    </font></b>

    </table border>
    </center>

    </div>

    <script>
    // Function to toggle the navigation menu on small screens
    function myFunction() {
    var x = document.getElementById("myNavbar");
    if (x.className === "navbar") {
    x.className += " responsive";
    } else {
    x.className = "navbar";
    }
    }
    </script>

    </body>
    </html>

    You might also like