HTML ALL CODE SCRIPT

0

 HTML ALL CODE SCRIPT



<!DOCTYPE html>

<html>

<head>

    <title>Sample Form</title>

    <script>

        function handleSubmit() {

            // Get the value entered in the input field with id "username"

            var username = document.getElementById("username").value;

            

            // Display an alert with the entered username

            alert("Hello, " + username + "! Form submitted successfully.");

        }

    </script>

</head>

<body>

    <h1>Sample Form</h1>

    <form>

        <label for="username">Username:</label>

        <input type="text" id="username" name="username" required>

        

        <br><br>

        

        <button type="button" onclick="handleSubmit()">Submit</button>

    </form>

</body>

</html>

HTML MENU DEGIE

1111111111111111111111111111111111111111111111111111111111111111111111111
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Menu</title>
    <style>
        /* Basic CSS for the navigation menu */
        ul.menu {
            list-style-type: none;
            padding: 0;
            background-color: #333;
        }

        ul.menu li {
            display: inline-block;
            margin-right: 20px;
        }

        ul.menu li:last-child {
            margin-right: 0;
        }

        ul.menu li a {
            text-decoration: none;
            color: #fff;
            padding: 10px 20px;
            border: 1px solid #fff;
            border-radius: 5px;
            transition: background-color 0.3s, color 0.3s;
        }

        ul.menu li a:hover {
            background-color: #fff;
            color: #333;
        }
    </style>
</head>
<body>
    <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</body>
</html>

HTML IMAGE POPUPE SCRIPT

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Popup</title>
    <style>
        /* Styling for the image popup */
        #popup-container {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            text-align: center;
        }

        #popup-content {
            max-width: 80%;
            max-height: 80%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        #popup-content img {
            max-width: 100%;
            max-height: 100%;
        }
    </style>
</head>
<body>
    <!-- Thumbnail image -->
    <img src="thumbnail.jpg" alt="Thumbnail" onclick="openPopup('fullsize.jpg')">

    <!-- Image popup container -->
    <div id="popup-container">
        <div id="popup-content">
            <img id="popup-image" src="" alt="Popup Image">
        </div>
    </div>

    <script>
        // Function to open the image popup
        function openPopup(imageSrc) {
            var popupContainer = document.getElementById('popup-container');
            var popupImage = document.getElementById('popup-image');

            // Set the source of the popup image
            popupImage.src = imageSrc;

            // Display the popup container
            popupContainer.style.display = 'block';
        }

        // Function to close the image popup
        function closePopup() {
            var popupContainer = document.getElementById('popup-container');
            popupContainer.style.display = 'none';
        }
    </script>
</body>
</html>


Post a Comment

0 Comments

Please Select Embedded Mode To show the Comment System.*

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !
To Top