Google Login & Responsive Menu HTML Code

Open In Editor Publish Your Code

<!DOCTYPE html>
<html>
<head>
    <title>Google Login</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <style>
        body {
            font-family: sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
        }
        #login-status {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            display: none; /* Hide until login attempt */
        }
    </style>
</head>
<body>

<div id="g_id_onload"
         data-client_id="YOUR_GOOGLE_CLIENT_ID"
         data-context="signin"
         data-ux_mode="popup"
         data-callback="handleCredentialResponse"
         data-auto_prompt="false">
    </div>

<div class="g_id_signin"
         data-type="standard"
         data-size="large"
         data-theme="outline"
         data-text="sign_in_with"
         data-shape="rectangular"
         data-logo_alignment="left">
    </div>

// IMPORTANT: In a real application, you send this JWT token 
            // to your backend server for verification and session creation.
            
            statusDiv.innerHTML = `
                <h2>Login Successful!</h2>
                <p>Token received. Check the console for the full credential.</p>
                <p><strong>Note:</strong> Replace 'YOUR_GOOGLE_CLIENT_ID' with your actual key.</p>
            `;

console.log("JWT ID Token:", response.credential);

// Optional: Decode the token (for debugging/display purposes only, 
            // server-side verification is mandatory for security)
            try {
                const payload = JSON.parse(atob(response.credential.split('.')[1]));
                console.log("User Payload:", payload);
                // statusDiv.innerHTML += `<p>Welcome, ${payload.name}!</p>`;
            } catch (e) {
                console.error("Could not decode token:", e);
            }
        }
    </script>

</body>
</html>

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu Responsive</title>
    <style>
        /* Base Styling */
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
        }

/* Navigation Bar */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #333;
            color: white;
            padding: 10px 20px;
        }

.brand-title {
            font-size: 1.5rem;
            text-decoration: none;
            color: white;
        }

/* Navigation Links (UL) */
        .nav-links {
            list-style: none;
            display: flex;
            margin: 0;
            padding: 0;
        }

.nav-links li a {
            display: block;
            text-decoration: none;
            color: white;
            padding: 10px 15px;
        }

.nav-links li a:hover {
            background-color: #575757;
        }

/* Hamburger Button (Mobile Toggle) */
        .menu-toggle {
            position: absolute;
            top: 15px;
            right: 20px;
            display: none; /* Hidden by default on desktop */
            flex-direction: column;
            justify-content: space-between;
            width: 30px;
            height: 21px;
            cursor: pointer;
        }

.menu-toggle .bar {
            height: 3px;
            width: 100%;
            background-color: white;
            border-radius: 10px;
        }

/* ====================================
           MEDIA QUERY: Mobile Layout (Max 768px)
           ==================================== */
        @media screen and (max-width: 768px) {
            
            .navbar {
                flex-direction: column;
                align-items: flex-start;
            }

.menu-toggle {
                display: flex; /* Show hamburger button */
            }

.nav-links {
                width: 100%;
                display: none; /* Hide links by default */
                flex-direction: column;
                text-align: center;
                padding: 10px 0;
            }
            
            .nav-links li {
                width: 100%;
            }

.nav-links li a {
                padding: 10px;
            }

/* Class added by JavaScript when the menu is open */
            .nav-links.active {
                display: flex;
            }
        }
    </style>
</head>
<body>

<ul class="nav-links" id="nav-links-list">
            <li><a href="#">Accueil</a></li>
            <li><a href="#">Produits</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Connexion</a></li>
        </ul>
    </nav>

<script>
        document.addEventListener('DOMContentLoaded', () => {
            const toggleButton = document.getElementById('mobile-menu');
            const navLinks = document.getElementById('nav-links-list');

toggleButton.addEventListener('click', (e) => {
                e.preventDefault();
                navLinks.classList.toggle('active');
            });
        });
    </script>

</body>
</html>

Google Login & Responsive Menu HTML Code

Recommended

Coreboot Nav Menu

Login Form with Social Login

Animated HTML Button

HTML

CSS

JS

Recommended

Coreboot Nav Menu

Login Form with Social Login

Animated HTML Button

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS