Html codes

/* HTML: <div class="loader"></div> */
.loader {
  width: 74px;
  height: calc(27px*0.866 + 6px);
  display: grid;
}
.loader:before,
.loader:after {
  content: "";
  grid-area: 1/1;
  background:#FD135A;
  --c1:conic-gradient(from 150deg at top   ,#000 60deg,#0000 0);
  --c2:conic-gradient(from -30deg at bottom,#000 60deg,#0000 0);
  --s:27px calc(27px*0.866);
  clip-path: polygon(17px 0,calc(100% - 17px) 0,100% 100%,0 100%);
  -webkit-mask:
    var(--c1) left  6px top 4px,
    var(--c2) center,
    var(--c1) right 6px top 4px,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  -webkit-mask-repeat:no-repeat;
  animation: l6 2s infinite both;
}
.loader:after {
  transform: rotate(180deg);
  transform-origin: 50% 99%;
  animation-delay: 0.5s;
}
@keyframes l6 {
  0%    {-webkit-mask-size:0    0  ,0    0  ,0    0  ,auto}
  8.33% {-webkit-mask-size:var(--s),0    0  ,0    0  ,auto}
  16.67%{-webkit-mask-size:var(--s),var(--s),0    0  ,auto}
  25%,
  50%   {-webkit-mask-size:var(--s),var(--s),var(--s),auto}
  58.33%{-webkit-mask-size:0    0  ,var(--s),var(--s),auto}
  66.67%{-webkit-mask-size:0    0  ,0    0  ,var(--s),auto}
  75%,
  100%  {-webkit-mask-size:0    0  ,0    0  ,0    0  ,auto}
}

👍1

66 views04:50

Html codes

Europa Clipper Begins Journey to Jupiter’s Icy Moon
https://www.nasa.gov/image-detail/afs-8-101-904/

A SpaceX Falcon Heavy rocket carrying NASA’s Europa Clipper spacecraft lifts off from Launch Complex 39A at NASA’s Kennedy Space Center in Florida at 12:06 p.m. EDT on Monday, Oct. 14, 2024. After launch, the spacecraft plans to fly by Mars in February 2025, then back by Earth in December 2026, using the gravity of each planet to increase its momentum. With help of these “gravity assists,” Europa Clipper will achieve the velocity needed to reach Jupiter in April 2030.

61 views05:11

Html codes

<!DOCTYPE html>
<head>
    <title> Flag Dots Animation</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #000;
            overflow: hidden;
        }

        .container {
            position: relative;
            width: 80vmin;
            height: 50vmin;
        }

        .dot {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: white;
            animation: blink 2s infinite alternate;
            opacity: 0;
        }

        @keyframes blink {
            0%, 100% {
                opacity: 0;
                transform: scale(0.5);
            }
            50% {
                opacity: 1;
                transform: scale(1);
            }
        }
    </style>
</head>
<body>
    <div class="container" id="flag-container"></div>

    <script>
        const flagContainer = document.getElementById('flag-container');

        const colors = ['#3C9CD9', '#FFFFFF', '#008000', '#FFDD00'];
        const flagPattern = [
            [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], // Blue stripe
            [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], // Blue stripe
            [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], // Blue stripe
            [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2], // White stripe
            [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2], // White stripe
            [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3], // Green stripe
            [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3], // Green stripe
            [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3], // Green stripe
        ];

        const rows = flagPattern.length;
        const cols = flagPattern[0].length;
        const dotSize = 10;
        const gap = 20;

        for (let row = 0; row < rows; row++) {
            for (let col = 0; col < cols; col++) {
                const dot = document.createElement('div');
                dot.className = 'dot';
                dot.style.backgroundColor = colors[flagPattern[row][col] - 1];
                dot.style.top = `${row * gap}px`;
                dot.style.left = `${col * gap}px`;

                // Delayed animation for a drone-like effect
                dot.style.animationDelay = `${(row + col) * 0.1}s`;

                flagContainer.appendChild(dot);
            }
        }
    </script>
</body>
</html>

Guess this flag, say on comment

77 viewsedited 05:24

Html codes

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

Thanks 👍👏👏👏🙏🙏🙏🙏🙏🙏

❤1

88 views05:26

Html codes

What does the RGB values (99, 99, 99) represent in the code?

Anonymous Quiz

50%

Red, green, blue

50%

Specific shade of gray

Hue, saturation, lightness

8 voters86 views13:17

Html codes

Check:

<p style="color:rgb(99,99,99);">text</p>

89 viewsedited 14:18

Html codes

Which of these tags does not need a closing tag?

Anonymous Quiz

13 voters92 views04:32

Html codes

Dino_Game.html

4.2 KB

Dino game

83 views04:45

Html codes

This media is not supported in your browser

VIEW IN TELEGRAM

73 views14:30

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

About

Blog

Apps

Platform