Posts

DOM

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> <style> * { margin : 10 px ; } </style> </head> <body> <input type ="text" id ="num1" placeholder ="Please Enter Number" value ="" > <br> <input type ="text" id ="num2" placeholder ="Please Enter Number" value ="" > <br> <button onclick =" Add () ; " > + </button> <button onclick =" Sub () ; " > - </button> <button onclick =" Mul () ; " > * </button> <button onclick =" Div () ; " > / </button> <button onclick =" mod () " > % </button> <input type ="text" id ="result2" placeholder ="Result" value ="" > <br> <d...

Javascript DOM (Document Object model)

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> <style> div { background : yellow ; height : 400 px ; width : 400 px ; } button { margin : 10 px ; } </style> </head> <body> <div id ="div1" > </div> Color 1 <button onclick =" Red () ; " > Red </button> <button onclick =" Green () ; " > Green </button> <button onclick =" Blue () ; " > Blue </button> <br> Color 2 <button onclick =" Yellow () ; " > Yellow </button> <button onclick =" Pink () ; " > Pink </button> <button onclick =" Orange () ; " > Orange </button> </body> <script> var divobj = document . getElementById ( 'div1' ) ; var color1 = ...

video

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> </head> <body> <audio width ="300px" controls autoplay muted > <source src ="https://jiolive.tv/player/jiotv/app/live/155/null/5d51dc8a1fe1268607170c151e9ca2f240c4bea7a6c95bbc6973cd3289b6981b15ba6fcdf8b34e31eb88f3bde3eefe1afcaa3d830d53b91b9b6f02620af3503da9ae5f922b05af4cee967c33e26499c8d87eb5ee16b05f06458e33eb733bc2ef_playlist.m3u8" type ="video/mp4" > </audio> <video width ="320" height ="240" poster ="Image/Computer.jpg" controls > <source src ="video/video%20(2160p).mp4" type ="video/mp4" > </video> </body> </html>

pesudo

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> <style> pre { color : blue ; } pre : first-letter { color : red ; font-size : 20 pt ; font-style : italic ; } pre : before { content : url ( "../img/pointer.png" ) ; background : #68ff46 ; } pre : after { content : url ( "../img/pointer.png" ) ; background : #68ff46 ; } </style> </head> <body> <pre> Integrate all business processes and operations into one system to streamline operations, optimize resources, and provide better service to customers with ERP and CRM software. </pre> </body> </html>

Layer Z-Index

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> <style> . main { width : 500 px ; height : 500 px ; border : solid 2 px ; position : relative ; } . div1 { width : 400 px ; height : 400 px ; background : red ; position : absolute ; left : 40 px ; top : 40 px ; } . div2 { width : 400 px ; height : 400 px ; background : green ; position : absolute ; top : 20 px ; left : 20 px ; /* z-index: 1; */ } . div3 { width : 400 px ; height : 400 px ; background : blue ; position : absolute ; } </style> </head> <body> <div class ="main" ...

postion sticky

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> <style> ul { display : flex ; list-style : none ; } header { background : #0c5460 ; height : 200 px ; } . stiky { position : sticky ; top : 0 px ; left : 0 px ; right : 0 px ; } </style> </head> <body> <header> <nav> <ul> <li><a href ="#" > Home </a></li> <li><a href ="#" > About </a></li> <li><a href ="#" > Contact </a></li> </ul> </nav> </header> <header class ="stiky" style =" background : #00FF00 " > <nav> <ul> ...

position card

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> <style> . card { width : 300 px ; height : 400 px ; background : gray ; border-radius : 15 px ; position : relative ; margin : 20 px ; } . offdis { width : 68 px ; height : 35 px ; background : yellow ; position : absolute ; bottom : 10 px ; right : 0 px ; padding : 7 px ; } . new { background : #65e965 ; padding : 10 px ; position : absolute ; top : 10 px ; } </style> </head> <body> <div class ="container" style =" display : flex ; flex-wrap : wrap ; " > <div class ="card" > <span class ="...