Posts

Showing posts from July, 2022

Simple Navbar Using CSS Flex

-
Image
HTML CODE <html lang = "en" > <head>     <meta charset = "UTF-8" >     <meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     <title> Document </title>     <style>         .nav-container {             display : flex ;             flex-direction : row ;             justify-content : space-between ;         }                 .nav-left-container {             display : flex ;             flex-direction : row ;             list-style-type : none ;         }                 .nav-lef...
Post a Comment
Read more

HTML Battery Charge Icon

-
Image
<html lang = "en" > <head>     <meta charset = "UTF-8" >     <meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     <title> Document </title>     <style>         * {             box-sizing : border-box ;         }                 body {             display : flex ;             justify-content : center ;             align-items : center ;         }                 .battery__container {             position : relative ;             width : 150px ;         ...
Post a Comment
Read more

Progress Bar 0 to 100% in 10 sec

-
Image
Progress Bar Example HTML CODE <html lang = "en" > <head>     <meta charset = "UTF-8" >     <meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     <title> Document </title>     <style>         * {             box-sizing : border-box ;         }                 .progressbar__container {             max-width : 350px ;             margin : 0 auto ;             margin-top : 10% ;         }                 .progressbar__bar {             height : 27px ;             width : 100% ; ...
Post a Comment
Read more

PHP -Using Composer (For Beginner)

-
Using Composer First Time Introduction # Composer is a tool for dependency management in PHP. It allows you to declare the libraries your project depends on and it will manage (install/update) them for you. Dependency management # Composer is  not  a package manager in the same sense as Yum or Apt are. Yes, it deals with "packages" or libraries, but it manages them on a per-project basis, installing them in a directory (e.g.  vendor ) inside your project. By default, it does not install anything globally. Thus, it is a dependency manager. It does however support a "global" project for convenience via the  global  command. https://getcomposer.org/doc/00-intro.md 1. Download Composer   https://getcomposer.org/Composer-Setup.exe 2. Install Composer Composer will work with PHP so we assume you have installed wamp or xampp (in my case its XAMPP).  Open composer-setup.exe to install composer. During Installation, it will ask you to "choose command line php y...
Post a Comment
Read more

PHP -Sending Email from Localhost (XAMPP) Using SendinBlue

-
Image
 Enviroment Enviroment: Local Web Server: XAMP v3.3.0 OS: Windows 7 1. Create account on sendinblue https://app.sendinblue.com/account/login 2. SMTP Setting Go to  https://account.sendinblue.com/advanced/api and check your smtp settings 3. Xampp php.ini settings Open xampp control panel, click on apache config button, a context menu will appear, click on php.ini.  Find and set these settings SMTP=smtp-relay.sendinblue.com smtp_port=587 sendmail_from = youremail@gmail.com sendmail_path = "\"C:\xampp\sendmail\sendmail.exe\" -t" Now go to C:\xampp\sendmail\ and open sendmail.ini and set smtp_server=smtp-relay.sendinblue.com smtp_port=587 debug_logfile=debug.log auth_username=sendinblue_login auth_password=sendinblue_password 4. Write php code <?php // the message $msg = "First line of text\nSecond line of text" ; // use wordwrap() if lines are longer than 70 characters $msg = wordwrap($msg, 70 ); $headers = "From: abc@gmail.com" ; $success = mai...
Post a Comment
Read more

Facebook Post Reactions Example

-
Image
Create post reaction as facebook using html, css and Js.  For reaction buttons we have used image and have mapped different areas of image using map tag. We have mapped first 3 reactions button but you can add more. Html Code <html lang = "en" > <head>     <meta charset = "UTF-8" >     <meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     <title> Document </title>     <style>         * {             box-sizing : border-box ;         }                 body {             background-color : #aaa ;             font-family : monospace ;             max-width : 400px ;       ...
Post a Comment
Read more

Dark Light Mode (HTML, CSS, JS)

-
Image
  <html lang = "en" color-mode = "light" > <head>     <meta charset = "UTF-8" >     <meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     <title> Document </title>     <style>         /* Light Mode */                   :root [ color-mode = "light" ] {             --surface1 : #e6e6e6 ;             --surface2 : #f2f2f2 ;             --surface3 : #ffffff ;             --element1 : #111111 ;             --element2 : #222222 ;             --element3 : #333333 ;             --elementInverse : #eee ;        ...
Post a Comment
Read more