Untitled

<!DOCTYPE html>
<html lang="it">
    <head>
        <title>Subscribe</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="Subscribe.css">
        <link rel="stylesheet" href="Swup.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@500&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
    </head>

    <body>
        <div id="swup" class="transition-fade">
            <div class="container">
                <nav>
                    <div id="myTopnav" class="nav-bar">
                        <div class="home">
                            <a href="/Home.html">
                                <i class="bi bi-house-fill"></i>
                                Home
                            </a>
                        </div>
                        <div class="subscribe">
                            <a href="/Form-subscribe.html">
                                <i class="bi bi-person-plus-fill"></i>
                                Subscribe
                            </a>
                        </div>
                        <div class="login">
                            <a href="/">
                                <i class="bi bi-person-fill"></i>
                                Login
                            </a>
                        </div>
                        <div class="info">
                            <a href="/">
                                <i class="bi bi-info-square-fill"></i>
                                <span>Info</span>
                            </a>
                        </div>
                        <div class="search">
                            <form class="research" action="/index.html" method="get">
                                <input type="search" name="cerca" placeholder="Cerca nel sito">
                                <button class="button-search" type="submit" name="ricerca"><i class="bi bi-search"></i></button>
                            </form>
                        </div>
                        <div class="resp-nav">
                            <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                                <i id="resp-button" class="bi bi-list"></i>
                            </a>
                        </div>
                    </div>
                    <div id="close-nav" class="for-close-responsive-nav-hidden">
                    </div>
                </nav>

                <main>
                    <div class="contenuto-page">
                        <div class="layover">
                            <form class="form" action="access-page.php">
                                <div class="nome" style="margin-top: 60px;">
                                    <label for="nome">Nome</label>
                                    <input id="nome" type="text" name="nome" placeholder="Mario">
                                </div>

                                <div class="cognome">
                                    <label for="cognome">Cognome</label>
                                    <input id="cognome" type="text" name="cognome" placeholder="Rossi">
                                </div>


                                <div class="indirizzo">
                                    <label for="indirizzo">Indirizzo</label>
                                    <input id="indirizzo" type="text" name="indirizzo" placeholder="Via frosinone 45">
                                </div>

                                <div class="CAP">
                                    <label for="CAP">CAP</label>
                                    <input id="CAP" type="text" name="CAP" placeholder="41254">
                                </div>

                                <div class="email">
                                    <label for="email">Email</label>
                                    <input id="email" type="email" name="email" placeholder="Example@mail.com">
                                </div>

                                <div class="password">
                                    <label for="password">Password</label>
                                    <input id="password" type="password" name="password">
                                </div>

                                <div class="privacy-policy">
                                    <input id="PP" type="checkbox" name="condizioni-uso">
                                    <label for="PP"><a href="#">Accetto le condizioni d'uso</a></label>
                                </div>

                                <div class="Bottoni">
                                    <div class="Accedi">
                                        <input type="submit" name="accedi" value="Accedi">
                                    </div>

                                    <div class="Annulla">
                                        <input type="reset" name="annulla" value="Annulla">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </main>
            </div>
        </div>

        <script src="https://unpkg.com/swup@latest/dist/swup.min.js"></script>
        <script src="SwupHeadPlugin.min.js"></script>
        <script>
            const swup = new Swup
            (
                {
                    plugins: [new SwupHeadPlugin({persistAssets: false})]
                }
            );
        </script>

        <script>
            function myFunction()
            {
                let forCloseNav = document.getElementById("close-nav");
                if(forCloseNav.className == "for-close-responsive-nav-hidden for-close-responsive-nav")
                {
                    forCloseNav.className = "for-close-responsive-nav-hidden";
                }

                var x = document.getElementById("myTopnav");

                if (x.className === "nav-bar")
                {
                    x.className = "nav-bar responsive";
                }
                else
                {
                if(forCloseNav.className === "for-close-responsive-nav-hidden")
                {
                    forCloseNav.className += " for-close-responsive-nav";
                }
                x.className = "nav-bar";
                }


                var a = document.getElementById("resp-button");

                if(a.className === "bi bi-list")
                {
                    a.className = "bi bi-x";
                }
                else
                {
                    a.className = "bi bi-list";
                }
            }
        </script>

    </body>
</html>