Vite SVG

PHOTO

Sun May 15 2022 21:13:58 GMT+0000 (Coordinated Universal Time)

Saved by @Rangerdevv #html

<svg width="100" height="100" viewBox="0 0 176 176" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M164.362 33.803L92.0811 163.053C91.7417 163.661 91.2467 164.168 90.647 164.521C90.0473 164.875 89.3643 165.063 88.6681 165.066C87.9719 165.068 87.2874 164.886 86.6849 164.537C86.0823 164.188 85.5834 163.686 85.2391 163.081L11.5281 33.814C11.1575 33.1654 10.9796 32.4246 11.0152 31.6784C11.0509 30.9323 11.2986 30.2118 11.7293 29.6014C12.1601 28.9911 12.756 28.5163 13.4471 28.2328C14.1382 27.9492 14.8958 27.8686 15.6311 28.0005L87.9891 40.9365C88.4492 41.0194 88.9204 41.0194 89.3806 40.9365L160.226 28.0225C160.958 27.8887 161.714 27.9658 162.404 28.245C163.094 28.5241 163.691 28.9937 164.125 29.599C164.558 30.2043 164.811 30.9204 164.853 31.6638C164.895 32.4072 164.725 33.1472 164.362 33.7975V33.803Z" fill="url(#paint0_linear_129_36)"/>
<path d="M122.452 11.0385L68.9702 21.516C68.5421 21.5996 68.154 21.8234 67.8672 22.152C67.5803 22.4807 67.4111 22.8955 67.3862 23.331L64.0972 78.903C64.0791 79.2079 64.1323 79.5128 64.2526 79.7935C64.373 80.0742 64.5571 80.3229 64.7905 80.52C65.0238 80.717 65.2999 80.8569 65.5968 80.9285C65.8937 81.0001 66.2032 81.0015 66.5007 80.9325L81.3892 77.495C81.71 77.4209 82.0442 77.4286 82.3612 77.5175C82.6782 77.6063 82.9677 77.7734 83.2032 78.0035C83.4387 78.2335 83.6126 78.519 83.7089 78.8338C83.8052 79.1486 83.8208 79.4826 83.7542 79.805L79.3322 101.47C79.264 101.803 79.2836 102.149 79.3892 102.472C79.4948 102.796 79.6828 103.086 79.9346 103.316C80.1864 103.545 80.4935 103.704 80.8256 103.779C81.1578 103.853 81.5036 103.84 81.8292 103.741L91.0252 100.947C91.3513 100.847 91.6978 100.834 92.0306 100.909C92.3633 100.984 92.6708 101.144 92.9228 101.374C93.1748 101.604 93.3626 101.895 93.4677 102.219C93.5728 102.544 93.5916 102.89 93.5222 103.224L86.4877 137.253C86.0477 139.381 88.8802 140.542 90.0627 138.721L90.8492 137.5L134.437 50.5175C134.6 50.1898 134.669 49.8228 134.635 49.458C134.601 49.0933 134.466 48.7454 134.244 48.4536C134.023 48.1618 133.724 47.9377 133.382 47.8068C133.04 47.6758 132.668 47.6431 132.308 47.7125L116.98 50.666C116.65 50.7291 116.309 50.7066 115.99 50.6005C115.672 50.4943 115.385 50.3082 115.159 50.0599C114.933 49.8116 114.774 49.5094 114.698 49.1821C114.622 48.8549 114.631 48.5137 114.725 48.191L124.724 13.508C124.818 13.1843 124.827 12.8418 124.751 12.5134C124.674 12.1851 124.514 11.882 124.287 11.6333C124.059 11.3847 123.771 11.1988 123.451 11.0937C123.13 10.9885 122.788 10.9676 122.458 11.033L122.452 11.0385Z" fill="url(#paint1_linear_129_36)"/>
<defs>
<linearGradient id="paint0_linear_129_36" x1="9.72693" y1="23.3798" x2="99.6804" y2="145.544" gradientUnits="userSpaceOnUse">
<stop stop-color="#41D1FF"/>
<stop offset="1" stop-color="#BD34FE"/>
</linearGradient>
<linearGradient id="paint1_linear_129_36" x1="83.8311" y1="13.8808" x2="100.103" y2="125.506" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFEA83"/>
<stop offset="0.083" stop-color="#FFDD35"/>
<stop offset="1" stop-color="#FFA800"/>
</linearGradient>
</defs>
</svg>

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

#html #javascript #nodejs

How to Save HTML Form Data in JSON - Express

<form action="/new" method="post">
 
  <input name="title" type="text">
  <input name="description" type="text">
  <button type="submit">Submit Form</button>
 
</form>

> More steps

#html #javascript #jsfunctions #dom #dommanipulation

getAttribute() - how to get the value of any attribute of HTML element

<html>

<input id="contact" name="address">

<script>

    var x = document.getElementById("contact").getAttribute('name');

</script>

</html>

#html #jquery #css #navbar

Underline active navbar link

// in css:
/* Display line under clicked navbar link */
.active {
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  color: rgb(20, 19, 19);
}

//in html: 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
      $(document).ready(function () {
        // Underline to remain in navbar after click using URL
        jQuery(function ($) {
          var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
          $('.nav-link').each(function () {
            if (this.href === path) {
              $(this).addClass('active');
            }
          });
        });
      });
    </script>

//Note class in link should be nav-link

C:/Users/intel/Desktop/dig%20fest/Mohd%20Midhlaj%20A%20A%206E%20Website%20Building/index.html

Bootstrap Starter Template

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Background Image That Doesn't Scroll on Webpage

body{
    background-image: url("img_tree.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
}

How to Create a Table in HTML

<table>
  <tr>
    <th>Name</th>
    <th>Phone</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Khan</td>
    <td>12345</td>
    <td>23</td>
  </tr>
  <tr>
    <td>Jamal</td>
    <td>54321</td>
    <td>45</td>
  </tr>
</table>

#html #javascript

Stop YouTube Embedded Video from Playing with Javascript

<main>
	<iframe src="https://www.youtube.com/embed/KQetemT1sWc"></iframe>   
    <a href="#!" onclick="stopThis()">Stop Playing</a>
</main>

<script>
  function stopThis(){
      var iframe = container.getElementsByTagName("iframe")[0];
      var url = iframe.getAttribute('src');
      iframe.setAttribute('src', '');
      iframe.setAttribute('src', url);
  }
</script>

HTML : Responsive Navbar

<!DOCTYPE html>
<!-- Created By TopArchives - www.toparchives.us -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Responsive Navbar | TopArchives</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
  </head>
  <body>
    <nav>
      <input type="checkbox" id="check">
      <label for="check" class="checkbtn">
        <i class="fas fa-bars"></i>
      </label>
      <label class="logo">TopArchives</label>
      <ul>
        <li><a class="active" href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Feedback</a></li>
      </ul>
    </nav>
    <section></section>
  </body>
</html>
<!-- DON'T REMOVE CREDITS -->

Bootstrap Fixed Floating Buttons

<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
  <a class="btn-floating btn-lg red">
    <i class="fas fa-pencil-alt"></i>
  </a>

  <ul class="list-unstyled">
    <li><a class="btn-floating red"><i class="fas fa-star"></i></a></li>
    <li><a class="btn-floating yellow darken-1"><i class="fas fa-user"></i></a></li>
    <li><a class="btn-floating green"><i class="fas fa-envelope"></i></a></li>
    <li><a class="btn-floating blue"><i class="fas fa-shopping-cart"></i></a></li>
  </ul>
</div>

#javascript #eventos #mouse #css #html

mover un elemento junto al mouse, dentro de un div (eventos de mouse)

let hijo = document.querySelector('.hijo');
let etiqueta = document.querySelectorAll('.etiqueta');
//El metodo .getBoundingClientRect() nos da 
//la posicion de un elemento con respecto al viewport(en numeros).
// tomare la posicion constante del elemento .hijo 
const coords = hijo.getBoundingClientRect();
const j = coords.top; // estamos obteniendo la posicion top en numero
const k = coords.left;

// se aplica forEach para obtener posicion de cada movimiento del mouse
etiqueta.forEach(link => {
// se obtiene la posicion del mouse con la funcion  mover(e)
    function mover(e){
// se calcula la posicion top y left del mouse al cual le restamos
// la posicion del elemento "hijo"; resultado: mouse e "hijo" juntos 
	 let m = e.pageY ;
	 let n = e.pageX ;

	 let t = m - j;
	 let l = n - k;
	 hijo.style.top = t + "px"; // agregando px a los numeros
	 hijo.style.left = l + "px";
    };
// mouseover dice que entro en elemento etiqueta
    link.addEventListener("mouseover",() => {
	hijo.classList.add("edd1");// solo agrega un class que le da color red

	 window.addEventListener("mousemove",mover);// agrega el evento junto a la funcion 
    });

    link.addEventListener("mouseleave",() => {// mouseleave dice que salio del elemento etiqueta
	hijo.classList.remove("edd1"); // le quita un class, que le quita color red
	 window.removeEventListener("mousemove", mover);// remuev el evento
    });
});

/* Simples estilos para delimitar los div*/
.box{
width: 300px;
height: 300px;
border: solid 1px black;
}
.etiqueta{
width:100px;
height:100px;
position: absolute;
left:50px;
top:50px;
background: green;
overflow: hidden;
position:relative;
}
.hijo{
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: blue;
transform: scale(0); /*desaparece el elemento hijo*/
}
.edd1{
background-color: red;
transform: scale(1); /*reaparece el elemento hijo con el mause al centro*/
} 

// un ejemplo con html
<div class="box">
  <div class="etiqueta">
  <div class="hijo"></div>
  </div>
</div>

Component library css link

<link rel="stylesheet" href="https://grapheneui.netlify.app/Components/components.css" />

#html #alpinejs

Set boolean to true after scrolling on page using Alpine.js

<div
    class="justify-between py-6 md:flex"
    x-data="{
        open: false,
        hasScrolled: false,
        reactOnScroll() {
            if (this.$el.getBoundingClientRect().top < 120 && window.scrollY > 120) {
                this.hasScrolled = true;
            } else {
                this.hasScrolled = false;
            }
        } 
    }"
    x-init="reactOnScroll()"
    @scroll.window="reactOnScroll()"
>

#html #javascript #jsfunctions #dom #dommanipulation

How to change any attribute of a HTML element

<html>	
   
   <input id="contact" name="address">
 
 <script>

    document.getElementById("contact").attribute = "phone";
	
    //ALTERNATIVE METHOD TO CHANGE
    document.getElementById("contact").setAttribute('name', 'phone');	

  </script>

</html>

#html #javascript

Display Date Objects in Shorter Format - MMM DD YYY HH:MM

<p id="date-stamp">Sat Dec 14 2019 16:58:20 GMT+0500 (Pakistan Standard Time)</p>

<script>
        var dateStamp = document.getElementById("date-stamp");
        var date = dateStamp.innerHTML;
        var date2 = date.substr(4, 17);
        dateStamp.innerHTML = date2;
    
</script>

Browse more snippets >>