Html codes – Telegram

Html codes

184 subscribers

112 photos

15 videos

226 files

198 links

👋 Welcome to Html Codee
🚀 Here you’ll find mini tools, code snippets, and web tricks to grow fast.
🧩 Built with HTML, PHP, and smart ideas.
💌 Support: support@bestpage.x10.mx
🏁 If you don't walk today, run tomorrow.

Download Telegram

About

Blog

Apps

Platform

184 subscribers

🌟 Elevate Your Website with Innovative CSS Animation and Transition Effects! 🌟

Dive into the world of CSS animations and transitions to add a touch of magic to your website. Explore mesmerizing techniques that will captivate your visitors and elevate their browsing experience.

1. Text Shadow Pulse Effect:

@keyframes pulse {
    0%, 100% {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    }
    50% {
        text-shadow: 0 0 20px rgba(255, 255, 255, 1);
    }
}

.pulsing-text {
    animation: pulse 1.5s infinite;
}

2. Background Color Shift:

.button {
    background-color: #3498db;
    transition: background-color 0.4s ease;
}

.button:hover {
    background-color: #2ecc71;
}

3. 3D Flip Card:

<div class="card">
    <div class="front">Front</div>
    <div class="back">Back</div>
</div>

.card {
    width: 200px;
    height: 300px;
    perspective: 1000px;
}

.card div {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border: 1px solid #ccc;
}

4. Ripple Effect on Click:

.button {
    overflow: hidden;
    position: relative;
}

.button::before {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: ripple 0.6s linear;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

5. Scrolling Progress Indicator:

<div class="progress-bar"></div>

.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 5px;
    background-color: #3498db;
    transition: width 0.1s ease;
}

6. Image Hover Zoom:

.image-hover {
    overflow: hidden;
}

.image-hover img {
    transition: transform 0.5s ease;
}

.image-hover:hover img {
    transform: scale(1.1);
}

7. Slide In Navigation:

<div class="nav">
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
</div>

.nav {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.nav.active {
    transform: translateX(0);
}

Ready to enchant your website with these CSS codes? Explore these techniques and transform your digital experience!

🚀 #CSSAnimations #WebDesign #Innovation #html #web #new

---

@Html_codee

128 views14:45

🧠 The Most Important Only.

— Elon Musk files injunction against OpenAI

— ChatGPT turns two

— Runway releases Frames

— Man convinces AI to give him money

— AI girlfriends could be dangerous to men

@aipost 🧠 | Our X 😎

123 views16:11

Social media buttons by @Html_codee.html

113 views13:30

Shiny text:

body {
  background: black;
  font-family: 'Poppins', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1.shine {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  background: linear-gradient(to right, #4d4d4d 0, white 10%, #4d4d4d 20%);
  background-position: 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s infinite linear;
  animation-fill-mode: forwards;
  font-weight: 600;
  font-size: 48px; /* Adjust size for header */
  text-align: center;
  white-space: nowrap;
}

@keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 180px;
  }
  100% {
    background-position: 180px;
  }
}

108 views16:23

🎨 New HTML Code: Unlock the Power of HTML!
💻 Today’s Topic: Create a Stylish Card with Hover Effects!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover Card</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #74ebd5, #9face6);
            font-family: Arial, sans-serif;
        }
        .card {
            background: #ffffff;
            width: 300px;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            text-align: center;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        }
        .card img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-bottom: 10px;
        }
        .card h3 {
            margin: 10px 0;
            font-size: 22px;
            color: #333;
        }
        .card p {
            font-size: 16px;
            color: #777;
        }
    </style>
</head>
<body>
    <div class="card">
        <img src="https://via.placeholder.com/100" alt="Avatar">
        <h3>3legsbird</h3>
        <p>Web Developer & Designer</p>
    </div>
</body>
</html>

🔥 Try this code and add your own styles to make it unique!

📌 Don’t forget to subscribe to @Html_codee for more creative HTML tutorials. Share this post with your friends and level up your coding skills!

#HTML #CSS #WebDevelopment

132 views13:42

💼 Career Spotlight: Graphic Designers, Web Developers, and App Developers

🎨 Graphic Designers

What They Do: Create captivating visuals for branding, marketing, websites, and social media.
Average Salary:

Freelancers: $20–$50/hour (or more, based on expertise).

Full-time: $40,000–$70,000/year (varies by location).
💡 Skills Required: Adobe Photoshop, Illustrator, Figma, creativity, and attention to detail.

💻 Web Developers

What They Do: Design, build, and maintain websites using HTML, CSS, JavaScript, and frameworks like React or WordPress.
Average Salary:

Freelancers: $25–$100/hour (based on project complexity).

Full-time: $50,000–$90,000/year.
💡 Skills Required: Front-end and/or back-end coding, problem-solving, and UI/UX design principles.

📱 App Developers

What They Do: Build mobile applications for Android, iOS, or cross-platforms using technologies like Kotlin, Swift, or Flutter.
Average Salary:

Freelancers: $30–$150/hour (depending on project scope).

Full-time: $70,000–$120,000/year.
💡 Skills Required: Mobile coding, debugging, API integration, and app store deployment.

📌 Which career excites you the most? Let us know in the comments!
✨ Follow us for more insights on tech careers, tips, and earning potential.
#GraphicDesign #WebDevelopment #AppDevelopment #FreelanceJobs #CareerInsights

@Html_codee

199 views13:59

This media is not supported in your browser

VIEW IN TELEGRAM

🐱Could it be that our pets are the very angels that keep us safe? 🥹🤍

🎥 #VideoAI
📸 #PhotoAI

204 views13:10

Hello everyone!

188 views13:23

This media is not supported in your browser

VIEW IN TELEGRAM

OpenAI's Noam Brown says he was initially skeptical about the speed at which AI would change the world, but progress is now happening "faster than I originally thought"

©️@aipost 🧠 |

172 viewsedited 05:34

Creating a glitch effect with CSS can add an intriguing visual to your web design. Below is a step-by-step tutorial on how to achieve a simple glitch effect on text elements using CSS animations.

📚 Step 1: Setting Up the HTML Structure

Start by creating a basic HTML structure for your text. You can use a <div> to hold the text that will have the glitch effect.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Glitch Effect</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="glitch" data-text="GLITCH">GLITCH</div>
</body>
</html>

📚 Step 2: Defining CSS Styles

Now, let’s create the CSS to style the text and apply the glitch effect. You can start by creating a styles.css file.

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #000;
    margin: 0;
}

.glitch {
    font-family: 'Courier New', Courier, monospace;
    font-size: 100px;
    color: white;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.05em;
}

.glitch:before,
.glitch:after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    width: 100%;
    color: #ff0080; /* Red color for glitch effect */
    overflow: hidden;
    clip: rect(0, 0, 100px, 0);
}

/* Animation */
.glitch:before {
    animation: glitch-anim 1s infinite linear alternate-reverse;
}

.glitch:after {
    animation: glitch-anim-2 1s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% {
        clip: rect(42px, 9999px, 58px, 0);
        transform: translate(0);
    }
    25% {
        clip: rect(30px, 9999px, 40px, 0);
        transform: translate(-5px, -5px);
    }
    50% {
        clip: rect(10px, 9999px, 60px, 0);
        transform: translate(5px, 5px);
    }
    75% {
        clip: rect(20px, 9999px, 30px, 0);
        transform: translate(-5px, 5px);
    }
    100% {
        clip: rect(42px, 9999px, 58px, 0);
        transform: translate(0);
    }
}

@keyframes glitch-anim-2 {
    0% {
        clip: rect(10px, 9999px, 50px, 0);
        transform: translate(0);
    }
    25% {
        clip: rect(20px, 9999px, 30px, 0);
        transform: translate(5px, -5px);
    }
    50% {
        clip: rect(0px, 9999px, 50px, 0);
        transform: translate(-5px, 5px);
    }
    75% {
        clip: rect(30px, 9999px, 40px, 0);
        transform: translate(5px, 5px);
    }
    100% {
        clip: rect(10px, 9999px, 50px, 0);
        transform: translate(0);
    }
}

📚 Step 3: Explanation of the Code

1. HTML Structure:
⦁ We set up a <div> with the class glitch and a data-text attribute for the text content.

2. CSS Styles:
⦁ The body centers the text using Flexbox.
⦁ The glitch class sets the base styles for the text, including font, size, color, and positioning.
⦁ The :before and :after pseudo-elements are used to create two duplicates of the text, each of which will be animated to create the glitch effect.

3. Animations:
⦁ The @keyframes define the glitching movement and clipping effect. Each frame of the animation has different clipping rectangles and translations which create the illusion of a glitch.

📚 Step 4: View the Result

Once you’ve added the HTML and CSS, open the HTML file in a web browser. You should see the word "GLITCH" flickering with a vibrant color, creating a glitch effect. Adjust the colors, sizes, and animations as you like to customize the effect further!

📚 Conclusion

This guide provides a simple way to create a glitch text effect using just HTML and CSS. You can expand upon this basic example by adding hover effects, changing colors, or layering different text elements for a more complex effect. Happy coding!
@Html_codee

160 views16:10

133 views16:10

Taking a screenshot using HTML and JavaScript can be done using the html2canvas library. This library allows you to render HTML elements onto a canvas and then export that canvas as an image. Additionally, handling screenshots with a three-finger swipe gesture can be accomplished using touch events.

Here's how you can implement this:

📚 Step 1: Include html2canvas in your project

You can include the library from a CDN in your HTML file:

<!DOCTYPE html>
<html>
<head>
    <title>Screenshot Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
    <style>
        #screenshotArea {
            border: 1px solid #000;
            padding: 20px;
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>

<div id="screenshotArea">
    <h1>Hello World!</h1>
    <p>This is a screenshot example.</p>
</div>

<script>
    function takeScreenshot() {
        html2canvas(document.querySelector("#screenshotArea")).then(canvas => {
            // Create a link to download the image
            const link = document.createElement('a');
            link.href = canvas.toDataURL("image/png");
            link.download = 'screenshot.png';
            link.click();
        });
    }

    let touchStartX = 0;
    let touchStartY = 0;

    document.addEventListener("touchstart", function(event) {
        if (event.touches.length === 3) {  // Check for three fingers
            touchStartX = event.touches[0].clientX;
            touchStartY = event.touches[0].clientY;
        }
    }, false);

    document.addEventListener("touchend", function(event) {
        if (event.changedTouches.length === 3) { // Check for three fingers
            const touchEndX = event.changedTouches[0].clientX;
            const touchEndY = event.changedTouches[0].clientY;

            // Implementing a simple swipe detection logic
            const swipeDistanceX = touchEndX - touchStartX;
            const swipeDistanceY = touchEndY - touchStartY;

            if (Math.abs(swipeDistanceX) > Math.abs(swipeDistanceY) && Math.abs(swipeDistanceX) > 100) {
                // If the swipe is horizontal and significant
                takeScreenshot();
            }
        }
    }, false);
</script>

</body>
</html>

📚 Explanation

1. HTML Structure: We have a simple <div> that we want to take as a screenshot.

2. html2canvas Integration: The html2canvas library is linked in the document, and we define a function takeScreenshot that captures the content of the screenshotArea div when invoked.

3. Touch Events: We listen for touchstart and touchend events to check if the user has performed a 3-finger touch gesture.

4. Swipe Detection: We check if the fingers traveled a significant distance horizontally, and if they did, we call the takeScreenshot function.

This example demonstrates how to take a screenshot programmatically using a three-finger gesture on touch devices. Make sure to test this on a real touch device, as desktop browsers may not fully support touch events.

@Html_codee

🥰65❤30👍21🤩21👏20🔥17

349 views16:14

Random Quote Generator in JavaScript.zip

163 views04:22

To create a cloud background using Vanta.js, you'll need to incorporate Vanta into your HTML project. Vanta.js is a lightweight library that allows for animated backgrounds and provides several preset effects, including a cloud-like animation.

Here’s a step-by-step guide on how to achieve a cloud background effect:

📚 Step 1: Include Vanta.js in your project

You can include the Vanta.js library directly from a CDN. Here's how to set it up in your HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cloud Background with Vanta.js</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        #vanta-bg {
            position: fixed;
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            z-index: -1; /* Ensures the background stays behind other content */
        }
    </style>
</head>
<body>

    <div id="vanta-bg"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.rawgit.com/tengbao/vanta/v0.5.12/dist/vanta.clouds.min.js"></script>
    <script>
        VANTA.CLOUDS({
            el: "#vanta-bg",
            THREE: window.THREE,
            mouseControls: true,
            touchControls: true,
            gyroControls: false,
            minHeight: 200.00,
            minWidth: 200.00,
            skyColor: 0x3a3f47,
            cloudColor: 0xffffff,
            highFrequency: 5.00
        });
    </script>

</body>
</html>

📚 Step 2: Customize the Vanta.js settings

In the JavaScript snippet, you can customize various parameters of the cloud background:

⦁ skyColor: The background color of the sky.
⦁ cloudColor: The color of the clouds.
⦁ highFrequency: Controls the density of clouds.

📚 Additional Notes

1. Performance: Vanta.js is optimized for performance, but keep an eye on how the animation affects the overall performance of your app, especially on mobile devices.

2. Responsiveness: The background is set to cover the full width and height of the viewport. Make sure other content adjusts accordingly.

3. Browser Compatibility: Ensure that you test your implementation across different browsers for consistency.

4. Vanta.js Documentation: You can refer to Vanta.js documentation for more options and configurations.

By following these steps, you should have a beautiful animated cloud background on your website!

149 views04:40

Forwarded from AI Post — Artificial Intelligence

Media is too big

VIEW IN TELEGRAM

This is completely crazy, the whole video was created with Sora. And it looks like a report from a TV programme. We've done it, AI films are now a reality and they look 100% real.

@aipost 🧠 | Our X 😎 | WoW

☺️

Please open Telegram to view this post

VIEW IN TELEGRAM

👍2

100 views04:45

<html lang="en">
 <head>
  <meta charset="utf-8"/>
  <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
  <title>
   Contact Us
  </title>
  <script src="https://cdn.tailwindcss.com">
  </script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&amp;display=swap" rel="stylesheet"/>
 </head>
 <body class="font-roboto bg-gray-100">
  <header class="bg-blue-600 text-white p-4">
   <div class="container mx-auto flex justify-between items-center">
    <h1 class="text-2xl font-bold">
     Contact Us
    </h1>
    <nav>
     <ul class="flex space-x-4">
      <li>
       <a class="hover:underline" href="#">
        Home
       </a>
      </li>
      <li>
       <a class="hover:underline" href="#">
        About
       </a>
      </li>
      <li>
       <a class="hover:underline" href="#">
        Services
       </a>
      </li>
      <li>
       <a class="hover:underline" href="#">
        Contact
       </a>
      </li>
     </ul>
    </nav>
   </div>
  </header>
  <main class="container mx-auto p-4">
   <section class="bg-white p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4">
     Get in Touch
    </h2>
    <form action="#" class="space-y-4" method="POST">
     <div>
      <label class="block text-sm font-medium text-gray-700" for="name">
       Name
      </label>
      <input class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" id="name" name="name" type="text"/>
     </div>
     <div>
      <label class="block text-sm font-medium text-gray-700" for="email">
       Email
      </label>
      <input class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" id="email" name="email" type="email"/>
     </div>
     <div>
      <label class="block text-sm font-medium text-gray-700" for="message">
       Message
      </label>
      <textarea class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" id="message" name="message" rows="4"></textarea>
     </div>
     <div>
      <button class="w-full bg-blue-600 text-white p-2 rounded-md hover:bg-blue-700" type="submit">
       Send Message
      </button>
     </div>
    </form>
   </section>
   <section class="mt-8">
    <h2 class="text-2xl font-bold mb-4">
     Our Location
    </h2>
    <div class="bg-white p-6 rounded-lg shadow-lg">
     <div class="flex flex-col md:flex-row">
      <div class="md:w-1/2">
       <img alt="Map showing the location of our office" class="rounded-lg" height="400" src="https://storage.googleapis.com/a1aa/image/ZXjQSOBx5wKEBBpXt3DdBN4FoOUVfz1aDkx0zggarGOaf16TA.jpg" width="600"/>
      </div>
      <div class="md:w-1/2 md:pl-6 mt-4 md:mt-0">
       <h3 class="text-xl font-bold">
        Office Address
       </h3>
       <p class="mt-2">
        1234 Street Name, City, State, 12345
       </p>
       <p class="mt-2">
        <i class="fas fa-phone-alt">
        </i>
        (123) 456-7890
       </p>
       <p class="mt-2">
        <i class="fas fa-envelope">
        </i>
        contact@company.com
       </p>
      </div>
     </div>
    </div>
   </section>
  </main>
  <footer class="bg-blue-600 text-white p-4 mt-8">
   <div class="container mx-auto text-center">
    <p>
     © 2023 Company Name. All rights reserved.
    </p>
   </div>
  </footer>
 </body>
</html>

156 views16:10

Hello!, how are you?

152 viewsedited 15:59

rainviewer-api-example.html

rainviewer-api-example.html

147 views15:59

vertical-image-loop-with-scroll-acceleration-with-gsap.zip

125 views16:00

Mark Zuckerberg’s company is siding with Elon Musk in a fight against the developer of ChatGPT.

Meta urges California Attorney General to stop OpenAI from becoming for-profit.

@aipost 🧠 | WoW ☺️

125 views16:39