HTML, CSS
| Title | Code |
|---|---|
|
|
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; */
}
|
|
|
<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{
text-align: justify;
white-space: normal;
}
|
|
|
Create a new tab on browser <a class="btn btn-success" target="_blank" href="<?= $row['link']; ?>" >Click Now</a> |
|
|
<head> <meta http-equiv="refresh" content="2" /> </head> |
|
|
#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%;
}
|
|
|
https://css-tricks.com/couple-takes-sticky-footer/ |
|
|
[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 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';
}
|
|
|
Textarea editor https://summernote.org/ multiple use: https://summernote.org/examples/ |
|
|
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>
|
|
|
/* .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>
|
|
|
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/
|
|
|
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{
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: linear-gradient(to right,#000,#333,#666); |
|
|
// 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>
<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>
|
|
|
<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>
|
|
|
<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>
|
|
|
<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>
|
|
|
<?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 type="text" name="date" placeholder="Day-Month-Year" value="{{date('d-m-Y', strtotime($date))}}" readonly='true' />
|
|
|
https://www.daterangepicker.com/ |
|
|
<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>
|
|
|
<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/
|
|
|
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/
|
|
|
https://morioh.com/a/06b4b5d373a1/20-essential-html-input-types-with-code-examples |
|
|
<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/
|
|
|
<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;
}
|
|
|
x => × |
|
|
a |
|
|
Redactor https://imperavi.com/redactor/ |
|
|
b) PHP & JQuery i) Create an Input Box & Button ii) Insert number. After clicking on button Questions: 1. Find out the factorial of inserted number. 2. Find out length of factorial you found. 3. Find out small digit of factorial 4. Find out sum of all digit of factorial. Note: Input text allow only number, number must be >=5 c) How Can We Know The Number Of Days Between Two Given d) How to create objects from a class? Print "Hello World" withi |