Html codes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Translate Element</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f1f1f1;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        translate-box {
            display: block;
            font-size: 18px;
            color: #333;
            padding: 10px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 300px;
            text-align: center;
        }

        p {
            margin: 0;
            font-weight: bold;
        }

        .loading {
            font-style: italic;
            color: #999;
        }
    </style>
</head>
<body>

    <!-- Custom Translate Element -->
    <translate-box to="en">Salom</translate-box>

    <script>
        class TranslateBox extends HTMLElement {
            constructor() {
                super();
                this.attachShadow({ mode: "open" });
                this.translateText = this.innerText;
                this.targetLanguage = this.getAttribute("to") || "en";
                this.render();
            }

            static get observedAttributes() {
                return ["to"];
            }

            // Re-render when the "to" attribute changes
            attributeChangedCallback(name, oldValue, newValue) {
                if (name === "to" && oldValue !== newValue) {
                    this.targetLanguage = newValue;
                    this.render();
                }
            }

            async render() {
                this.shadowRoot.innerHTML = `
                    <p class="loading">Translating...</p>
                `;
                const translatedText = await this.fetchTranslation(this.translateText, this.targetLanguage);
                this.shadowRoot.innerHTML = `
                    <p>${translatedText}</p>
                `;
            }

            async fetchTranslation(text, targetLanguage) {
                const API_URL = "https://translate.googleapis.com/translate_a/single";
                const payload = {
                    client: "gtx",
                    dt: "t",
                    sl: "auto",  // Detects the source language automatically
                    tl: targetLanguage,
                    q: text
                };
                try {
                    const response = await fetch(`${API_URL}?client=${payload.client}&dt=${payload.dt}&sl=${payload.sl}&tl=${payload.tl}&q=${encodeURIComponent(payload.q)}`, {
                        method: "GET"
                    });
                    const result = await response.json();
                    return result[0][0][0];  // Returns the translated text
                } catch (error) {
                    console.error("Translation failed:", error);
                    return "Translation error.";
                }
            }
        }

        // Register the custom element
        customElements.define("translate-box", TranslateBox);
    </script>

</body>
</html>

78 views13:33

Html codes via @pic

77 views14:20

Html codes

78 views04:03

Html codes

<div class="chat chat-start">
  <div class="chat-image avatar">
    <div class="w-10 rounded-full">
      <img
        alt="Tailwind CSS chat bubble component"
        src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
    </div>
  </div>
  <div class="chat-header">
    Obi-Wan Kenobi
    <time class="text-xs opacity-50">12:45</time>
  </div>
  <div class="chat-bubble">You were the Chosen One!</div>
  <div class="chat-footer opacity-50">Delivered</div>
</div>
<div class="chat chat-end">
  <div class="chat-image avatar">
    <div class="w-10 rounded-full">
      <img
        alt="Tailwind CSS chat bubble component"
        src="https://img.daisyuimages/stock/photo-1534528741775-53994a69daeb.webp" />
    </div>
  </div>
  <div class="chat-header">
    Anakin
    <time class="text-xs opacity-50">12:46</time>
  </div>
  <div class="chat-bubble">I hate you!</div>
  <div class="chat-footer opacity-50">Seen at 12:46</div>
</div>

84 viewsedited 13:47

Html codes

<script src="https://cdn.lordicon.com/lordicon.js"></script>
<lord-icon
    src="https://cdn.lordicon.com/kgwqxfas.json"
    trigger="hover"
    style="width:250px;height:250px">
</lord-icon>

74 views13:19

Html codes

Very important ❗ https://t.me/boost/html_codee 🙏🙏🙏

Thank you so much

62 views08:03

Html codes

Becoming a website developer involves learning key skills, technologies, and best practices in web development. Here are steps you can take to become a proficient website developer:

1. Learn the Basics of Web Development:
- Start by understanding the basics of HTML, CSS, and JavaScript, which form the foundation of web development.
- HTML (HyperText Markup Language) is used for creating the structure and content of web pages.
- CSS (Cascading Style Sheets) is used for styling and designing web pages.
- JavaScript is a programming language that adds interactivity and functionality to websites.

2. Choose a Specialization:
- Decide whether you want to focus on front-end development (client-side), back-end development (server-side), or full-stack development (both front-end and back-end).
- Front-end developers focus on the user interface and user experience, while back-end developers work on the server-side logic and database interactions.

3. Learn Frameworks and Libraries:
- Familiarize yourself with popular front-end frameworks like React, Angular, or Vue.js for building dynamic and responsive user interfaces.
- For back-end development, learn server-side frameworks like Node.js, Django, Ruby on Rails, or Laravel.

4. Practice and Build Projects:
- Practice your skills by building projects and websites. This hands-on experience will help you apply what you've learned and improve your problem-solving abilities.
- Create a portfolio showcasing your projects to demonstrate your skills to potential employers or clients.

5. Stay Updated and Continue Learning:
- The field of web development evolves rapidly, so stay updated with the latest trends, technologies, and best practices.
- Engage with the developer community, attend web development conferences, and participate in online coding forums to expand your knowledge.

6. Consider Formal Education or Online Courses:
- While formal education is not always necessary, consider enrolling in web development courses, bootcamps, or online tutorials to enhance your skills and knowledge.
- Platforms like Coursera, Udemy, and freeCodeCamp offer a wide range of web development courses for beginners and advanced learners.

7. Seek Internships or Freelance Opportunities:
- Gain practical experience by working as an intern at a web development company or taking on freelance projects.
- Collaborating with others in the industry will help you learn new techniques and improve your skills.

By following these steps and continuously refining your skills, you can become a proficient website developer and build a successful career in web development. Remember that practice, persistence, and a willingness to learn are key factors in becoming a successful website developer.

74 views09:02

67 views09:41

Rise_of_the_Half_Moon_Doodle_-_Google_Doodles.html

98.9 KB

Share my html file

61 views13:38

Html codes

In JavaScript, you can perform various types of calculations using arithmetic operators. Here are some common arithmetic operators and examples of how to perform calculations in JavaScript:

1. Addition (+):

   let sum = 5 + 3; // sum will be 8

2. Subtraction (-):

   let difference = 10 - 4; // difference will be 6

3. Multiplication (*):

   let product = 6 * 4; // product will be 24

4. Division (/):

   let quotient = 20 / 5; // quotient will be 4

5. Modulus (%) (returns the remainder of a division):

   let remainder = 13 % 5; // remainder will be 3

6. Exponentiation () (raises a number to the power of another):

   let result = 2 ** 3; // result will be 8 (2 to the power of 3)

7. Order of Operations:
- JavaScript follows the standard order of operations: parentheses first, then exponentiation, multiplication and division, and finally addition and subtraction.

8. Using Variables:

   let num1 = 10;
   let num2 = 5;
   let total = num1 + num2; // total will be 15

9. Math Object:
- JavaScript provides the Math object with built-in methods for more complex mathematical operations. For example:

   let squareRoot = Math.sqrt(16); // squareRoot will be 4

10. Using Functions:
- You can create functions to perform specific calculations and reuse them throughout your code:

    function addNumbers(a, b) {
        return a + b;
    }

    let sum = addNumbers(8, 3); // sum will be 11

By utilizing these arithmetic operators, mathematical functions, and JavaScript's capabilities, you can easily perform calculations and solve numerical problems within your code.

75 views13:41

HeyGen 3.0 dropped new AI avatars that look real.

The viseme morphing appears slightly slow, but 99% of people won’t notice its AI-generated content.

Source | Artificial intelligence 🤖

77 views13:03

Html codes

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halloween Matching Puzzle</title>
<style>
/* Basic reset and background styling */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #1a1a1d;
color: #eee;
}

h1 {
text-align: center;
color: #f26d21;
margin-bottom: 20px;
}

/* Game Board */
.game-board {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-gap: 15px;
}

/* Card Styles */
.card {
width: 100px;
height: 100px;
background-color: #333;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2em;
color: transparent;
cursor: pointer;
transition: transform 0.2s;
}

.card.flip {
color: #fff;
background-color: #f26d21;
transform: rotateY(180deg);
}

.card.matched {
background-color: #333;
color: #333;
cursor: not-allowed;
}

/* Game Info */
.game-info {
margin-top: 20px;
text-align: center;
font-size: 1.2em;
color: #f26d21;
}

</style>
</head>
<body>
<div>
<h1>🎃 Halloween Matching Puzzle 👻</h1>
<div class="game-board" id="gameBoard"></div>
<div class="game-info" id="gameInfo">Attempts: 0</div>
</div>

<script>
// Halloween icons
const halloweenIcons = ["🎃", "👻", "🕸️", "🧛", "🧙", "🕷️", "💀", "🍬"];
const gameBoard = document.getElementById("gameBoard");
const gameInfo = document.getElementById("gameInfo");

// Duplicate and shuffle icons for pairs
let cards = [...halloweenIcons, ...halloweenIcons];
cards.sort(() => 0.5 - Math.random());

let firstCard = null;
let secondCard = null;
let attempts = 0;
let matches = 0;

// Render cards
cards.forEach(icon => {
const card = document.createElement("div");
card.classList.add("card");
card.innerHTML = icon;
card.addEventListener("click", () => flipCard(card));
gameBoard.appendChild(card);
});

// Flip card function
function flipCard(card) {
if (card.classList.contains("flip") || card.classList.contains("matched")) return;

card.classList.add("flip");

if (!firstCard) {
firstCard = card;
} else {
secondCard = card;
attempts++;
gameInfo.textContent = Attempts: ${attempts};
checkForMatch();
}
}

// Check for a match
function checkForMatch() {
const isMatch = firstCard.innerHTML === secondCard.innerHTML;
if (isMatch) {
firstCard.classList.add("matched");
secondCard.classList.add("matched");
matches++;
if (matches === halloweenIcons.length) {
setTimeout(() => alert(You won in ${attempts} attempts!), 500);
}
resetTurn();
} else {
setTimeout(() => {
firstCard.classList.remove("flip");
secondCard.classList.remove("flip");
resetTurn();
}, 1000);
}
}

82 views04:18

Html codes

// Reset turn
function resetTurn() {
firstCard = null;
secondCard = null;
}

</script>
</body>
</html>

80 views04:18

Html codes

🎃

77 views04:19

Html codes

🚀 Introducing Free SVG Icons Your Ultimate SVG Icon Search Engine Discover and access over 200,000 open-source SVG icons in one place. Our powerful search engine lets you: 🔍 Instantly search through our massive icon collection 🛸 Download icons with one click 📸 Copy SVG code directly to your clipboard ⛓️‍💥 Access 100% free, open-source icons Checkout More About Free SVG Icons here → https://freesvgicons.com/

Free SVG Icons

Iconbuddy — Free and Open Source SVG icons

Browse and download 300,000+ SVG icons from multiple open source icon libraries. Customize color, size, and export as SVG, PNG, JSX, or Base64.

72 views07:53

Html codes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello in 99 Languages</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        h1 {
            color: #333;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            margin: 5px 0;
        }
    </style>
</head>
<body>

<h1>Hello in 99 Languages</h1>
<ul>
    <li>English: Hello</li>
    <li>Spanish: Hola</li>
    <li>French: Bonjour</li>
    <li>German: Hallo</li>
    <li>Italian: Ciao</li>
    <li>Portuguese: Olá</li>
    <li>Russian: Привет</li>
    <li>Chinese (Mandarin): 你好</li>
    <li>Japanese: こんにちは</li>
    <li>Korean: 안녕하세요</li>
    <li>Arabic: مرحبا</li>
    <li>Hindi: नमस्ते</li>
    <li>Greek: Γειά σας</li>
    <li>Dutch: Hallo</li>
    <li>Turkish: Merhaba</li>
    <li>Swedish: Hej</li>
    <li>Norwegian: Hei</li>
    <li>Danish: Hej</li>
    <li>Finnish: Hei</li>
    <li>Polish: Cześć</li>
    <li>Hebrew: שלום</li>
    <li>Thai: สวัสดี</li>
    <li>Vietnamese: Xin chào</li>
    <li>Indonesian: Halo</li>
    <li>Filipino: Kamusta</li>
    <li>Persian: سلام</li>
    <li>Swahili: Jambo</li>
    <li>Hungarian: Szia</li>
    <li>Czech: Ahoj</li>
    <li>Romanian: Salut</li>
    <li>Ukrainian: Привіт</li>
    <li>Bulgarian: Здравейте</li>
    <li>Serbian: Здраво</li>
    <li>Slovak: Ahoj</li>
    <li>Croatian: Bok</li>
    <li>Bosnian: Zdravo</li>
    <li>Slovenian: Živjo</li>
    <li>Estonian: Tere</li>
    <li>Latvian: Sveiki</li>
    <li>Lithuanian: Labas</li>
    <li>Malaysian: Halo</li>
    <li>Amharic: ሰላም</li>
    <li>Afrikaans: Hallo</li>
    <li>Albanian: Përshëndetje</li>
    <li>Armenian: Բարեւ</li>
    <li>Azerbaijani: Salam</li>
    <li>Bengali: হ্যালো</li>
    <li>Basque: Kaixo</li>
    <li>Belarusian: Прывітанне</li>
    <li>Georgian: გამარჯობა</li>
    <li>Irish: Dia dhuit</li>
    <li>Icelandic: Halló</li>
    <li>Kazakh: Сәлем</li>
    <li>Kurdish: Silav</li>
    <li>Kinyarwanda: Muraho</li>
    <li>Macedonian: Здраво</li>
    <li>Mongolian: Сайн байна уу</li>
    <li>Nepali: नमस्ते</li>
    <li>Papiamento: Halo</li>
    <li>Pashto: سلام</li>
    <li>Samoan: Talofa</li>
    <li>Scottish Gaelic: Halò</li>
    <li>Sindhi: سلام</li>
    <li>Sinhala: හෙලෝ</li>
    <li>Somali: Salaan</li>
    <li>Sundanese: Halo</li>
    <li>Tajik: Салом</li>
    <li>Uzbek: Salom</li>
    <li>Tamil: வணக்கம்</li>
    <li>Telugu: హలో</li>
    <li>Tigrinya: ሰላም</li>
    <li>Urdu: ہیلو</li>
    <li>Wolof: Salaam</li>
    <li>Yoruba: Pẹlẹ o</li>
    <li>Zulu: Sawubona</li>
    <!-- You can add more languages if needed -->
</ul>

</body>
</html>

62 viewsedited 15:13

Html codes

<!-- Modal toggle -->
<button data-modal-target="default-modal" data-modal-toggle="default-modal" class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
  Toggle modal
</button>

<!-- Main modal -->
<div id="default-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
    <div class="relative p-4 w-full max-w-2xl max-h-full">
        <!-- Modal content -->
        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
            <!-- Modal header -->
            <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                    Terms of Service
                </h3>
                <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="default-modal">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
            </div>
            <!-- Modal body -->
            <div class="p-4 md:p-5 space-y-4">
                <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
                    With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
                </p>
                <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
                    The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
                </p>
            </div>
            <!-- Modal footer -->
            <div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
                <button data-modal-hide="default-modal" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">I accept</button>
                <button data-modal-hide="default-modal" type="button" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Decline</button>
            </div>
        </div>
    </div>
</div>

66 views12:51

About

Blog

Apps

Platform