HTML, CSS

Title Code
center
Any div or element want to center position...
just use this class...

<div class="center-block">
</div>

*******
.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}
table [insert]
<form action="store.php" method="POST">
     <div class="form-group">
            <label>Name: </label>
            <input type="text" class="form-control" name="" placeholder="" required>            
     </div>

     <div class="form-group">
            <label>Roll: </label>
            <input type="text" class="form-control" name="" placeholder="">            
     </div>

     <div class="form-group">
            <label>Age: </label>
            <input type="text" class="form-control" name="" placeholder="">            
     </div>
         <button type="submit" class="btn btn-primary">Submit</button>
</form>
textarea
textarea{
      text-align: justify;
      white-space: normal;
   }
target
Create a new tab on browser

<a class="btn btn-success" target="_blank" href="<?= $row['link']; ?>" >Click Now</a>
auto refresh
<head>
	<meta http-equiv="refresh" content="2" />
</head>
image
#userCompleteView {  
  background-image: linear-gradient(rgba(10,0,0,.1),rgba(0,10,0,.2)),url(\"../images/user.jpg\");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
  width: auto;  
  min-height: 80vh;
}


<img src=\"#\" class=\"img-thumbnail responsive\" alt=\"No Image found\" width=\"80\">


<img src="admin_image/aslam_<?=$rand;?>.jpg">
	<h5>Md Aslam Hossain</h5>

************

profile img{
    width: 160px;
    height: 160px;
    /*padding-top: 15%;*/
    color: #fff;
    border-radius: 50%; 
}
Footer design
https://css-tricks.com/couple-takes-sticky-footer/
Anchor tag
[float: right] PMAQUBGIJI
not working
<h4 style="float: right;">
   <a href="#company" data-slide="prev">company</a>
   <a href="#city" data-slide="next">city</a>
</h4>

It is working...
<h4 style="float: right; position:relative; z-index:5;">
   <a href="#company" data-slide="prev">company</a>
   <a href="#city" data-slide="next">city</a>
</h4>

Another example: 
  <div style="float: left; position:relative; z-index:5; left: 15px;">
               <a href="election.php?election=<?php echo $name; ?>" 
class="btn btn-info" style="padding: 8px 94px; 
margin: 0 auto; ">Back</a>
            </div>
fontawesome
fontawesome 5 font-family not work

link : https://stackoverflow.com/questions/47788847/fontawesome-5-font-family-not-work

HTML :
<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
<a>User</a>
<i class="fas fa-shopping-basket"></i>

CSS :

a::after {
  content: "f007";
  font-family: 'Font Awesome 5 Free';
}
summernote
Textarea editor
https://summernote.org/

multiple use:
https://summernote.org/examples/
Range
1st style: 
<input type="range" min="0" max="100" step="5" value="0" name="range" id="range" class="form-control" list=mapsettings required>
<p>Value : <span id="showOutput"></span></p>

<script>
    var range = document.getElementById("range");
    var output = document.getElementById("showOutput");
    output.innerHTML = range.value;

    range.oninput = function() {
        output.innerHTML = this.value;
    }
</script>

2nd style
<input type="range" min="1" max="100" value="5" oninput="this.nextElementSibling.value = this.value" list=mapsettings>
<output>5</output>

3rd style
<input type="range" value="10" max="100" oninput="num.value = this.value" list=mapsettings>
<output id="num">0</output>

<datalist id=mapsettings>
   <option>20</option>
   <option>40</option>
   <option>60</option>
   <option>80</option>
   <option>100</option>
</datalist>
Change another element on :hover
/* .sibling-hover, #parent {
    cursor: pointer;
} */
.sibling-hover:hover ~ .sibling-highlight {
    background-color: blue;
    color: white;
}
#parent:hover .parent-highlight {
    background-color: red;
    color: white;
}
ul li { list-style:none; }
span{ margin-left:2em;}
ul li a:hover{
  color:blue; font-size:20px;
}
ul li a:hover span{
  background:green;
  color: #fff;
}

<b>sibling method:</b>
<div>
    <div class="sibling-hover">hover over me</div>
   	<br><br>
    <div class="sibling-highlight">I get highlighted</div>
</div>
<br>

<b>child method:</b>
<div id="parent">
    <div>hover over me</div>
    <br><br>
    <div class="parent-highlight">I get highlighted</div>
</div>

<b>Listing</b>
<ul>
	<li>
		<a href="">AAA 
			<span>aaa</span>
		</a>
	</li>
	<li>
		<a href="">BBB
			<span>bbb</span>
		</a>
	</li>
	<li>
		<a href="">CCC
			<span>ccc</span>
		</a>
	</li>
	<li>
		<a href="">CCC
			<span>ccc</span>
		</a>
	</li>
</ul>
scrollbar
Final css code
=========
body::-webkit-scrollbar{ width: 8px; }
body::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }
			
/*back part*/
body::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; }
@media screen and (max-width: 992px) { body { font-size: 16px; } }

Source: 
http://jsfiddle.net/4xMUB/2/
fieldset, legend
HTML:
<fieldset>
       <legend>Title</legend>
        Message...
</fieldset>

CSS :
fieldset {
   border: 1px dashed skyblue !important;
   border-radius: 0.50rem;
   padding: 0 1em 1em 1em !important;
   margin: 0 0 1.5em 0 !important;
   -webkit-box-shadow:  0px 0px 0px 0px #000;
   box-shadow:  0px 0px 2px 0px #000;
}
legend{ 
   width:inherit;
   font-size: 1em !important;
   font-weight: bold !important;
   text-align: center;
   border: 1px solid pink; 
   background-color: whitesmoke;
   border-radius: 12px;   
   padding: 0px 10px; 
   margin-bottom:10px;
}
pre
pre{
   font-family: "Courier New", monospace;
   padding: 9px;
   font-size: 12px;
   color: #333;
   word-break: break-all;
   word-wrap: break-word;
   background-color: #dfe6e9; 
   border: 1px solid #ccc;
   border-radius: 4px;
}

<pre>Code</pre>
background
background: linear-gradient(to right,#000,#333,#666);
responsive
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
html include
<html>
      <div id="header"></div>
      <body>
              This is body
              <div id="footer"></div>
      </body>
</html>
	
<script>
	$(function(){
              $("#header").load("header.html");
	      $("#footer").load("footer.html")
	});
</script>
Nice button
<a href="/learn/" target="_self" style=" " class="button   9  " data-aa-title="default-cta">
Previous
</a>

<style>
   button:hover, .button:hover, button:focus, .button:focus {
      box-shadow: 0 10px 30pxrgba(0,0,0,0.4);
      background: linear-gradient(145deg,#f05a28 0,#ec008c 100%);
      color: white;
   }

   button, .button {
      font-family: sans-serif;
      font-weight: 700;
      font-size: 14px;
      line-height: 1.1;
      padding: 15px 30px;
      white-space: normal;
      border-radius: 2px;
      color: #fff;
      background: #ec008c;
      position: relative;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      transition: box-shadow .3s ease-in-out;
      margin: 0 0 20px;
      letter-spacing: 1px;
      text-transform: uppercase;
   }
</style>
Radio input design
<style>
    div {
  display: inline-block;
  position: relative;
}
label {
  background: #fcb608;
  padding: 2px 10px 2px 1.5em;
  border: 1px solid transparent; /* keeps layout from jumping */ border-radius: 3px;
}
input {
  position: absolute;
}
input[type="radio"]:checked + label {
  background: #000;
  border-color: green;
  color: white;
 
}
</style>

<div>
    <input id="id1" type="radio" name="ad_caroserie" value="0">
    <label for="id1" class="radio">Berlina</label>
  </div>
  <div>
    <input id="id2" type="radio" name="ad_caroserie" value="1">
    <label for="id2" class="radio">Break</label>
  </div>
  <div>
    <input id="id3" type="radio" name="ad_caroserie" value="2">
    <label for="id3" class="radio">Cabrio</label>
  </div>
line circle line
<div class="title-line">
   <div class="tl-1"></div>
   <div class="tl-2"></div>
   <div class="tl-3"></div>
</div>

<style>
   .title-line {
      margin-top: -10px;
   }
   .tl-1 {
      width: 80px;
      height: 1px;
      display: inline-block;
      background: #eee;
   }
   .tl-2 {
      display: inline-block;
      height: 12px;
      margin: 0 5px;
      position: relative;
      top: 5px;
      width: 12px;
      border: 1px solid #ebc131;
      border-radius: 50px;
   }
   .tl-3 {
      width: 80px;
      height: 1px;
      display: inline-block;
      background: #eee;
   }
</style>
Dynamic bootstrap call
<?php
    $bootstrap = [
        '5.3.0-alpha1',
        '5.2.3',
        '5.1.3',
        '5.0.2',
        '4.6.2',
        '4.5.3',
        '4.4.1',
        '4.3.1',
        '4.2.1',
        '4.1.3',
        '4.0.0',
        '3.4.1',
        '3.3.7'
    ];

    $version = $bootstrap[3];
    //print : 5.0.2

    echo "https://cdn.jsdelivr.net/npm/bootstrap@".$version."/dist/css/bootstrap.min.css";
    echo "<br>";
    echo "https://cdn.jsdelivr.net/npm/bootstrap@".$version."/dist/js/bootstrap.min.js";
   
?>
   
<link href="https://cdn.jsdelivr.net/npm/bootstrap@{{$version}}/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@{{$version}}/dist/js/bootstrap.min.js"></script>
input field read only but still data back to a form?
<input type="text" name="date" placeholder="Day-Month-Year" value="{{date('d-m-Y', strtotime($date))}}" readonly='true' />
date range double calender
https://www.daterangepicker.com/
button hover effect
<a class="form-control btn border link" href="">aaa</a>	
<style>
		.btn { 
			position: relative;
			transition: color 200ms;
		}
		.btn::before {
			content: '';
			display: inline-block;
			position: absolute;
			inset: 0;
			background: #121212;
			transform: scaleX(0);
			transform-origin: left;
			z-index: -1;
			transition: transform 200ms;
		}
		.btn:hover { color: #ffffff; }
		.btn:hover::before { transform: scaleX(1); }
	</style>
autofocus
<button type="button" required class="btn" data-toggle="modal" data-target="#modal-sm3">Payment</button>

<div class="modal fade" id="modal-sm3" style="top: 15%; left: 30%;">
   <div class="modal-dialog modal-sm">
      <div class="modal-content">        
         <div class="modal-body payment_reload">
             <input type="text" class="form-control" id="cash"  autofocus>           
      </div>
      </div>
   </div>
</div>

<script>
 $('#modal-sm3').on('shown.bs.modal', function() {
        $('#cash').trigger('focus');
        $('input[type="number"]').trigger('focus');

    });
</script>

https://getbootstrap.com/docs/4.5/components/modal/
The Enter Key should Submit Forms
Enter = Submit

<div class="modal-body">
            <input type="number" id="discount" onkeypress="submitOnEnter(event)">        
            <button type="button" class="btn btn-primary submit2" id="submit">Add</button>
         </div>

    document.getElementById('discount').addEventListener('keypress', function(event) {
        if (event.keyCode == 13) {
            document.getElementById('submit').click();
        }
    });
    
    function submitOnEnter(e) {
        alert(e.which);
        if (e.which == 13) {
            document.getElementById('submit').click();
            or
            $('.submit2').click();
        }
    }

https://www.tjvantoll.com/2013/01/01/enter-should-submit-forms-stop-messing-with-that/
20+ HTML Input Types
https://morioh.com/a/06b4b5d373a1/20-essential-html-input-types-with-code-examples
Checks and radios
<div>
                        <input type="radio" class="btn-check" name="radio" id="cat" autocomplete="off" >
                        <label class="btn rounded-4" for="cat">
                           Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi, facere.
                        </label>

                        <input type="radio" class="btn-check" name="radio" id="dog" autocomplete="off">
                        <label class="btn rounded-4" for="dog">
                           Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi, facere.
                        </label>

                        <input type="checkbox" class="btn-check" name="checkbox" id="cat2" autocomplete="off" >
                        <label class="btn rounded-4" for="cat2">
                           Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi, facere.
                        </label>

                        <input type="checkbox" class="btn-check" name="checkbox" id="dog2" autocomplete="off">
                        <label class="btn rounded-4" for="dog2">
                           Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi, facere.
                        </label>
                    </div>

https://getbootstrap.com/docs/5.0/forms/checks-radios/
scrollbar
<div id="colorlib-aside">
Contant
</div>
#colorlib-aside {
    padding-top: 0.5em;
    padding-bottom: 40px;
    float: left;
    width: 300px;
    position: fixed;
    overflow-y: scroll;
    z-index: 1001;
    background: #f2f3f7;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    height: 120px;
}
/*font part*/
                                #colorlib-aside::-webkit-scrollbar {
                                    width: 7px;
                                }
                                #colorlib-aside::-webkit-scrollbar-thumb {
                                    border-radius: 10px;
                                    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
                                }

                                /*back part*/
                                #colorlib-aside::-webkit-scrollbar-track {
                                    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
                                    border-radius: 10px;
                                }
Cross (x) icon
x => &times;