Html codes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flowbite Alert</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex justify-center items-center min-h-screen">

    <!-- Flowbite Alert -->
    <div id="alert-1" class="flex p-4 mb-4 text-sm text-blue-800 border border-blue-300 rounded-lg bg-blue-50" role="alert">
        <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M18 8a6 6 0 11-12 0 6 6 0 0112 0zm-6 8a8 8 0 100-16 8 8 0 000 16zm-.75-9.75a.75.75 0 111.5 0v2.25a.75.75 0 01-1.5 0V6.25zm.75 6a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd"></path>
        </svg>
        <div>
            <span class="font-medium">Info alert!</span> This is a blue alert using Flowbite.
        </div>
        <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-blue-50 text-blue-500 rounded-lg focus:ring-2 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex h-8 w-8" data-dismiss-target="#alert-1" aria-label="Close">
            <span class="sr-only">Close</span>
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
            </svg>
        </button>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.js"></script>
</body>
</html>

84 viewsedited 16:16

Html codes via @Shazambot

Please open Telegram to view this post

VIEW IN TELEGRAM

🤷‍♂1

84 views04:08

Html codes

❓

🤷‍♂1🤔1

86 views04:50

Html codes

The radio type input is responsible for playing music on a page.

Anonymous Quiz

🎉1

4 voters88 views10:13

Html codes

Forwarded from WeWantYou

This media is not supported in the widget

VIEW IN TELEGRAM

87 views10:40

Html codes

This media is not supported in the widget

VIEW IN TELEGRAM

👎2

99 views10:53

Html codes

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

Html code ⛧

Boost this channel to help it unlock additional features.

91 views12:32

Html codes

In HTML, you can create tables using the <table>, <tr>, <th>, and <td> elements. Here are some essential commands and elements to create tables in HTML:

1. <table>: This is the main element used to define a table.

2. <tr>: This element defines a row in the table.

3. <th>: This element defines a header cell in a table. Header cells are typically bold and centered.

4. <td>: This element defines a standard cell in a table.

Here's a basic example of how to create a simple table with two rows and two columns:

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
    <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
    </tr>
</table>

You can further customize tables by using attributes like colspan, rowspan, border, align, and more within the table elements to control the structure and appearance of the table.

If you have specific requirements or need assistance with a particular aspect of creating HTML tables, feel free to ask for more details!

91 views12:34

Html codes

1. <div>: The <div> element is a versatile container used to group and style elements in HTML.

2. <p>: The <p> element defines a paragraph of text.

3. <a>: The <a> element creates hyperlinks to other web pages, files, locations within the same page, or email addresses.

4. <img>: The <img> element embeds images in an HTML document.

5. <ul>, <ol>, <li>: These elements create unordered lists (<ul>), ordered lists (<ol>), and list items (<li>), respectively.

6. <form>, <input>, <button>: These elements are essential for creating forms and input fields for user interaction on websites.

7. <span>: The <span> element is an inline container that allows you to apply styles or scripts to a specific section of text.

8. <header>, <footer>, <nav>, <section>, <article>: These are semantic HTML5 elements for structuring the layout of a webpage.

9. Attributes: HTML elements can have various attributes like id, class, href, src, alt, style, etc., which provide additional information or control over the elements.

•••••••••☆☆☆☆☆••••••••••
Join our channel @Html_codee

65 views15:39

Html codes

Html codes pinned «Very important ❗ https://t.me/boost/html_codee 🙏🙏🙏»

04:43

Html codes

/* HTML: <div class="loader"></div> */
.loader {
  height: 60px;
  aspect-ratio: 1;
  position: relative;
}
.loader::before,
.loader::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform-origin: bottom;
}
.loader::after {
  background:
    radial-gradient(at 75% 15%,#fffb,#0000 35%),
    radial-gradient(at 80% 40%,#0000,#0008),
    radial-gradient(circle  5px,#fff 94%,#0000),
    radial-gradient(circle 10px,#000 94%,#0000),
    linear-gradient(#F93318 0 0) top   /100% calc(50% - 5px),
    linear-gradient(#fff    0 0) bottom/100% calc(50% - 5px)
    #000;
  background-repeat: no-repeat;
  animation: l20 1s infinite cubic-bezier(0.5,120,0.5,-120);
}
.loader::before {
  background:#ddd;
  filter: blur(8px);
  transform: scaleY(0.4) translate(-13px, 0px);
}
@keyframes l20 { 
 30%,70% {transform:rotate(0deg)}
 49.99%  {transform:rotate(0.2deg)}
 50%     {transform:rotate(-0.2deg)}
}

62 views04:49

Html codes

/* HTML: <div class="loader"></div> */
.loader {
  width: 60px;
  height: 16px;
  display: grid;
}
.loader:before,
.loader:after {
  content: "";
  grid-area: 1/1;
  --c:no-repeat linear-gradient(#046D8B 0 0);
  background: var(--c), var(--c), var(--c);
  animation: l16-1 1.5s infinite linear, l16-2 1.5s infinite linear;
  transform: scale(var(--s,1)) translate(3px,-3px);
}
.loader:after {
  --s:-1;
}
@keyframes l16-1 {
  0%,
  3%    {background-size: 0    4px,4px 0   ,0    4px}
  16.67%{background-size: 100% 4px,4px 0   ,0    4px}
  33.33%{background-size: 100% 4px,4px 100%,0    4px}
  46%,
  54%   {background-size: 100% 4px,4px 100%,100% 4px}
  66.67%{background-size: 0    4px,4px 100%,100% 4px}
  83.33%{background-size: 0    4px,4px 0   ,100% 4px}
  96%,
  100%  {background-size: 0    4px,4px 0   ,0    4px}
}
@keyframes l16-2 {
  0%,49.9%{background-position: 0    0,100% 0   ,100% 100%}
  50%,100%{background-position: 100% 0,100% 100%,0    100%}
}

59 views04:49

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

About

Blog

Apps

Platform