Image my crush

PHOTO

Tue Aug 24 2021 08:30:19 GMT+0000 (UTC)

Saved by @_Ryan_ #html

<!DOCTYPE html>
<html>
    <head>
      <title>Image my crush</title>
      <link rel="stylesheet" href="main.css">   
    </head>
   <body>
     <div class="header">IMAGE MY CRUSH
     <div><img class="robot"src="https://www.thiscodeworks.com/images/robot.png" alt=""></div>
     </div>
     <div style="border-left: 15px solid #080a52;
     border-right: 15px solid #080a52; margin-top: 4.6cm;">
     <div style=" background-image: linear-gradient(0, rgba(8, 10, 82, 0.5),rgba(235, 33, 136, 0.5) ),url(https://previews.123rf.com/images/karenr/karenr1405/karenr140500001/27947992-pale-blue-and-white-diamonds-tiles-pattern-repeat-background.jpg)">
        <div style="margin-left: 3.5cm;">
            <div> 
                <img class="image"src="https://scontent-xsp1-1.xx.fbcdn.net/v/t1.6435-9/160629167_2974693646092956_3432288190424967043_n.jpg?_nc_cat=108&ccb=1-5&_nc_sid=09cbfe&_nc_ohc=ghhkf5k2DHUAX8cHeJb&_nc_oc=AQk8xRXR1H5jWZD5xwxqt_5mxB5jI5ESWqI4dLaHP1jbBAXmw3x1v6wx6IQ_HD-p8B5_juWBDLtpJpCV_C50pkN-&tn=NfHaIeDpSxWJqYpr&_nc_ht=scontent-xsp1-1.xx&oh=a630723f3cc1ea5e7818651a48af40e2&oe=61483EA1" alt="">  
                <img class="image"src="https://scontent.fsgn5-5.fna.fbcdn.net/v/t1.6435-9/141284173_2937427476486240_3778333158782615113_n.jpg?_nc_cat=100&ccb=1-5&_nc_sid=8bfeb9&_nc_ohc=5BK46_R1eqUAX-ErglT&_nc_ht=scontent.fsgn5-5.fna&oh=1b2e5925ddffdc865458e843102b1262&oe=614837AB" alt="">
                <img class="image"src="https://scontent.fsgn5-2.fna.fbcdn.net/v/t1.6435-9/169123202_2988190028076651_1892547538067409246_n.jpg?_nc_cat=105&ccb=1-5&_nc_sid=8bfeb9&_nc_ohc=ejrDjBIF-8oAX9TdsW4&_nc_ht=scontent.fsgn5-2.fna&oh=b936cc4e61d75deb21ca4a86614f0496&oe=61483E52" alt="">
                <img class="image"src="https://scontent-xsp1-3.xx.fbcdn.net/v/t1.6435-9/168720070_2988190158076638_4324234658353616084_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=8bfeb9&_nc_ohc=_kf3mi1aeSAAX8N63-Y&_nc_ht=scontent-xsp1-3.xx&oh=db8752ef642eac4e5bbdcf20b8edc56e&oe=614A63DB" alt="">
                <img class="image"src="https://scontent.fsgn5-1.fna.fbcdn.net/v/t1.6435-9/168937482_2988189824743338_5671243374235012445_n.jpg?_nc_cat=101&ccb=1-5&_nc_sid=8bfeb9&_nc_ohc=ETCCbsVI3w8AX-wmmeH&_nc_ht=scontent.fsgn5-1.fna&oh=5996a5d7dc1188425738cc001ca04a01&oe=61474AE9" alt="">
                <img class="image"src="https://scontent.fsgn5-6.fna.fbcdn.net/v/t1.6435-9/168630872_2988189798076674_4558975586110322457_n.jpg?_nc_cat=106&ccb=1-5&_nc_sid=8bfeb9&_nc_ohc=syb16Ya2uhcAX9JB54t&_nc_ht=scontent.fsgn5-6.fna&oh=19de828669c9585b8e154c8c1a9f041e&oe=6148A3D1" alt="">
                <img class="image"src="https://scontent.fsgn5-1.fna.fbcdn.net/v/t1.6435-9/123104399_2864233030472352_7745981858209761034_n.jpg?_nc_cat=101&ccb=1-5&_nc_sid=8bfeb9&_nc_ohc=mNNDxd8XLlIAX_SPeSn&tn=NfHaIeDpSxWJqYpr&_nc_ht=scontent.fsgn5-1.fna&oh=987c2a109b02e001a284e4c0a7233ced&oe=614A87EB" alt="">
                <img class="image"src="https://scontent.fsgn5-4.fna.fbcdn.net/v/t1.6435-9/122506025_2864233023805686_4402738516857452655_n.jpg?_nc_cat=102&ccb=1-5&_nc_sid=8bfeb9&_nc_ohc=1Z6jEfAJ-U4AX_HS2mC&tn=NfHaIeDpSxWJqYpr&_nc_ht=scontent.fsgn5-4.fna&oh=11570d5d6dd6172f864ddde0eb1e5b10&oe=61482F52" alt="">
                <img class="image"src="https://scontent-xsp1-3.xx.fbcdn.net/v/t1.6435-9/123073257_2864232967139025_7707325929730806427_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=8bfeb9&_nc_ohc=qAZxN1hUOq0AX_413Ie&_nc_ht=scontent-xsp1-3.xx&oh=9a4da53cd891c105c7e7a8c3b48c66ec&oe=61485FC6" alt="">
                <img class="image"src="https://scontent-xsp1-2.xx.fbcdn.net/v/t1.6435-9/122559403_2864232923805696_2118200583477191154_n.jpg?_nc_cat=104&ccb=1-5&_nc_sid=8bfeb9&_nc_ohc=5OlE5Ip93ZkAX8ROzG4&_nc_ht=scontent-xsp1-2.xx&oh=ec5a483024223736763d850bdb8cc0f3&oe=6147BDBC" alt="">
                <img class="image"src="https://scontent.fsgn5-5.fna.fbcdn.net/v/t1.6435-9/122716629_2864232793805709_8998774641751735835_n.jpg?_nc_cat=108&ccb=1-5&_nc_sid=8bfeb9&_nc_ohc=_pPNe3eeO2MAX_UKu1z&_nc_oc=AQmn6sYS9T5-8dg6Gx3PQSnsevSq-FEsW0NnRMUluR-0j-fBklQhGR5mOgKafKVKqgfWyrZsRQVc2fi6Q0LgJAgB&_nc_ht=scontent.fsgn5-5.fna&oh=77bdd5a6f2fa3ce6de2720a4b68757db&oe=614A2FA0" alt="">
                <img class="image"src="https://scontent.fsgn5-5.fna.fbcdn.net/v/t1.6435-9/122649520_2864232783805710_7043014946100128846_n.jpg?_nc_cat=100&ccb=1-5&_nc_sid=8bfeb9&_nc_ohc=_HT8lcQ9RSYAX9GXo4J&_nc_ht=scontent.fsgn5-5.fna&oh=47e25e907d16aaf2197f4599212d82a4&oe=614A5330" alt="">
                <img class="image"src="https://scontent.fsgn5-7.fna.fbcdn.net/v/t1.6435-9/118378901_2803879569841032_1553342826402939696_n.jpg?_nc_cat=103&ccb=1-5&_nc_sid=174925&_nc_ohc=bg4n0bv8rj4AX9PHkbW&_nc_oc=AQkA6RMlB6cMrSobqmC5YC8bo-lmeu9gO1WBUnGjuCbfzXm9U1x1_QdAlVvx1lcF1qXruSUaOaYlqEcwyz1kM6ej&_nc_ht=scontent.fsgn5-7.fna&oh=46ac98898911765d3c79919aa6bda39e&oe=614AB1F1" alt="">
                <img class="image"src="https://scontent.fsgn5-7.fna.fbcdn.net/v/t1.6435-9/104290739_2744070089155314_6070908186352449116_n.jpg?_nc_cat=103&ccb=1-5&_nc_sid=174925&_nc_ohc=ugNkGS88mJkAX_I06fS&_nc_ht=scontent.fsgn5-7.fna&oh=8cfa0bf5d70c0a50a701030a138e84c6&oe=6148BC38" alt="">
                <img class="image"src="https://scontent-xsp1-3.xx.fbcdn.net/v/t1.6435-9/95772266_2705970872965236_632200472798691328_n.jpg?_nc_cat=107&ccb=1-5&_nc_sid=8bfeb9&_nc_ohc=wGl3JuXT4IoAX8GYYl2&_nc_ht=scontent-xsp1-3.xx&oh=59320502f509585b1b2afa6f28001380&oe=61496BD0" alt="">
                <img class="image"src="https://scontent-xsp1-3.xx.fbcdn.net/v/t1.6435-9/92231671_2685048045057519_1139200359701413888_n.jpg?_nc_cat=111&ccb=1-5&_nc_sid=174925&_nc_ohc=L9EvvcD8ktgAX8oXf7N&_nc_ht=scontent-xsp1-3.xx&oh=6d53eb664df6084a2a8f38e90f262e23&oe=614A798B" alt="">
                <img class="image"src="https://scontent-xsp1-3.xx.fbcdn.net/v/t1.6435-9/90815465_2674801206082203_6088812897444560896_n.jpg?_nc_cat=111&ccb=1-5&_nc_sid=8bfeb9&_nc_ohc=4Ij5MS6RhuEAX9lkr6v&_nc_ht=scontent-xsp1-3.xx&oh=74c3dcf1527e193e641898aaf53e8db4&oe=614ACD6D" alt="">
                <img class="image"src="https://scontent.fsgn5-3.fna.fbcdn.net/v/t1.6435-9/87254890_2645169219045402_179917721922699264_n.jpg?_nc_cat=110&ccb=1-5&_nc_sid=8bfeb9&_nc_ohc=F8KT8DLVvEsAX95Lo6Y&_nc_ht=scontent.fsgn5-3.fna&oh=b47b0eb6ce7039d97a65cf5bd7d73851&oe=614758AC" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
 
            </div>
        </div>
        </div>
    </div>
    </body>
 
    <div class="footer">
      <a style="color: white;"href="https://www.facebook.com/le.truc.tkm2108">Go to Truc's facebook</a>
    </div>
   </body>
</html>

.header
{
    height: 175px;
    width: 100%;
    background:#080a52;
    padding: 20px;
    box-sizing: border-box;
    background-clip: border-box;
    border:10px solid black;
    color: #eb2188;
    font-size: 100px;
    align-items: center;
    justify-content: center;
    display: flex;  
    position: fixed;
    top: 0cm;   
  }
 .robot
  {
    width: 3cm;
    height: 3cm;
    position: absolute;
    left: 72px;
    top: 27px;

  }
  .image
         {
         width: 5cm;
         height: 5cm;
         border: solid black;
         margin: 40px;
         
       }
   html, body
   {
    margin: 0;
   }
 
        .footer
        {
            border-top: 10px solid black;
            background-clip: content-box;
           background: #080a52;
            width: 100%;
            height: 50px;
            font-size: 30px;
     
            
            align-items: center;
           justify-content: center;
           display: flex;
          }

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-CSS

@_Ryan_

Image my crush

#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;
}

#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>

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>

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

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>

#html #javascript #howto

How to dynamically update your site's copyright year

<p id="copyrightyear"></p>

<script>
   document.getElementById('copyrightyear').innerHTML
</script>

Browse more snippets >>