yellow-light-book/index.html at main · mauby-San/yellow-light-book · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
 <title>Personal Project 2 !</title>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <h1 class="animate__animated animate__tada">My Second Portfolio Project</h1>
            <!--  CSS file links  -->
            <link rel="stylesheet" type="text/css" href="styles.css">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
            />
        </head>

        <body>
            <!-- Page content goes here -->
            <h2 class="h2">Welcome!</h2>
            <p style="color: #000000;">Take a look around </p>
            <div id="mySidebar" class="sidebar">
                <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
                <a href="about.html">About</a>
                <a href="sites-of-interest.html">Sites of Interest</a>
                <a href="projects.html">Projects</a>
                <a href="contacts.html">Contacts</a>
                <a href="upload.html">UPLOAD CONTENT</a>
                <a href="barcode-scanner-0.html">Barcode Scanner 0</a>
            </div>
            <div id="main">
                <button class="openbtn" onclick="openNav()">☰ Open Sidebar</button>
            </div>
            <div class="footer">
                <p>Yellow Light | JS | Personal Project</p>
            </div>

            <!--JavaScript here -->
            <script>
                            function openNav() {
                document.getElementById("mySidebar").style.width = "250px";
                document.getElementById("main").style.marginLeft = "250px";
                }

                function closeNav() {
                document.getElementById("mySidebar").style.width = "0";
                document.getElementById("main").style.marginLeft= "0";
                }
            </script>
        </body>
    </html>