Skip to main content

Posts

Showing posts from September, 2023
Date :

Animated header

 <style>  /* Animated header */ .animated-header {   position: relative;   height: 100px;   width: 100%;   overflow: hidden; } .animated-header h1 {   position: absolute;   top: 50%;   left: 50%;   transform: translate(-50%, -50%);   font-size: 60px;   color: black; } .animated-header h1:hover {   animation: bounce 1s ease-in-out; } @keyframes bounce {   from {     transform: translate(-50%, -50%) scale(1);   }   to {     transform: translate(-50%, -50%) scale(1.1);   } } </style> <div class='animated-header'>   <h1>Convertohub</h1> </div>
Post a Comment
Read more

Code for Digital clock

Click here to see Digital Clock <!DOCTYPE html> <html> <head>   <title>Digital Clock</title> //Add following CSS    <style>     body {       font-family: sans-serif;     }     .clock {       position: absolute;       top: 50%;       left: 50%;       transform: translate(-50%, -50%);       font-size: 60px;       color: black;     }   </style> </head>
Post a Comment
Read more

Select all the Checkboxes at once.

  The code snippet that you can use to select all the checkboxes on the Facebook Pages Invite Screen is: let checkboxes = document . querySelectorAll ( 'div[role="checkbox"]' ); checkboxes. forEach ( function ( v,i ){ checkboxes[i]. click () }); This code uses the `document.querySelectorAll` method to select all the elements with the attribute `role=”checkbox”`, which are the checkboxes on the screen. Then, it uses the `forEach` method to loop through each checkbox and click on it using the `click` method. This way, you can select all the checkboxes on the screen with one line of code.
Post a Comment
Read more

Script to confirm Facebook friend's request all at once.

Run the following command in Console of the browser. Facebook = {     config: {         actionDelay: 1000,         scrollDelay: 5000,         // set to -1 for no limit         maxRequestsToAccept: -1,         totalRequestsAccepted: 0,         // set string to be present in names to be accepted, leave empty to accept all         mustIncludeInName: [],     },     inspect: function (data, config) {         console.info("INFO: script initialized on the page data...");         console.debug("DEBUG: finding confirm buttons...");         var confirmDivEles = document.querySelectorAll('[aria-label="Confirm"]');         data = [];         for (var i = 0; i < confirmDivEles.length; i++) {           ...
Post a Comment
Read more

View PC localhost on your mobile phone

Very Simple Method to see your localhost on your mobile phone.  Serve over your wifi via local IP This sounds complicated but its actually really easy. IMPORTANT: Make sure that your dev computer and your mobile device are connected to the same wifi network. Step 1: Serve to Localhost On your dev machine, serve your application in whatever way you usually do that serves it over a  localhost  address. Make sure to note what port number its being served on. In the image below, we’re noting  8080 . Once you are able to view your app locally on your computer via localhost, you can move to step 2. Step 2: Find your Local IP Address Open  System Preferences  >  Network . Select “Wifi” in the left pane if it isn’t already selected. Under “Status: Connected”, you should see “Wi-Fi is connected to <network name> and has the IP address < local IP address >.” Take note of that IP address! Note: It’s common for your Local IP Address to change automa...
Post a Comment
Read more

Responsive Theme with Navbar

Responsive Theme and Navbar Responsive  in HTML and CSS. Add HTML <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Responsive </ title >     < link href = "https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel = "stylesheet" >     < link rel = "stylesheet" href = "style.css" > </ head > < body >     < div class = "main" >                 < div class = "nav" >             < h2 > Logo </ h2 >             < ul class = "nav2" >                 < li > Store </ li >                 < li > G...
Post a Comment
Read more

How to create HTML Links - Hyperlinks

  HTML Links - Hyperlinks HTML links are hyperlinks. You can click on a link and jump to another document. When you move the mouse over a link, the mouse arrow will turn into a little hand. Note:  A link does not have to be text. A link can be an image or any other HTML element! HTML Links - Syntax The HTML  <a>  tag defines a hyperlink. It has the following syntax: < a  href =" url " > link text < /a > The most important attribute of the  <a>   element is the  href  attribute, which indicates the link's destination. The  link text  is the part that will be visible to the reader. Clicking on the link text, will send the reader to the specified URL address. Example This example shows how to create a link to W3Schools.com: < a  href ="https://www.w3schools.com/" > Visit W3Schools.com! < /a >
Post a Comment
Read more

Create Contact Form

  Create a Contact Section Step 1) Add HTML: Example < div  class ="container" >    < div  style ="text-align:center" >      < h2 > Contact Us < /h2 >      < p > Swing by for a cup of coffee, or leave us a message: < /p >    < /div >    < div  class ="row" >      < div  class ="column" >        < img  src ="/w3images/map.jpg"  style ="width:100%" >      < /div >      < div  class ="column" >        < form  action ="/action_page.php" >          < label  for ="fname" > First Name < /label >          < input  type ="text"  id ="fname"  name ="firstname"  placeholde...
Post a Comment
Read more

Create a Header

Header Header My supercool header Create a Header Step 1) Add HTML: Example < div  class ="header" >    < h1 > Header < /h1 >    < p > My supercool header < /p > < /div Step 2) Add CSS: Style the header with a large padding, centered text, a specific background-color and a big sized text: Example .header  {   padding :  60px ;   text-align :  center ;   background :  #1abc9c ;   color :  white ;   font-size :  30px ; }
Post a Comment
Read more