Skip to main content

Posts

Showing posts with the label CSS

How to use smooth box shadow in webpage

Webkit and Mozilla: -webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.15); -moz-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.15); box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.15); Standard CSS: <style> .bg {     padding:20px;     background:#EEE; } .box {     background: #fff;     width: 400px;     height: 100px;     box-shadow: 0px 2px 3px rgba(0,0,0,.13) ,    1px 2px 2px rgba(0,0,0,.1) ,    -1px -2px 2px rgba(0,0,0,.05) ;    margin:auto; } </style> <div class="bg">     <div class="box">     </div> </div>
Post a Comment
Read more

How to use custom font in website

Use custom font in your website help of @font-face rule First: you need some font file like - .woff, .ttf etc  Second: download your font using this sites  1001 Free Fonts - Download Fonts 1001 Fonts · Free Fonts Baby! After downloading that create a folder on your root folder by named font and past it. then  @font-face {     font-family: myFont;     src: url(fontname.ttf); } it helps you to create a custom font family name. now your site is ready to use this h1{     font-family: myFont; }
Post a Comment
Read more

How to Create a secure login panel with PHP & Mysql using parameters and session

Secure Login with PHP & Mysql Download project zip Requirement: you need an Apache and MySQL Server database on your device If your computer has xampp or wamp or mamp  or lamp that's great otherwise you need to install Apache and MySQL server Create a database login Run this query : CREATE TABLE admin ( id INT(6) AUTO_INCREMENT PRIMARY KEY, uname VARCHAR(30) NOT NULL, upass VARCHAR(30) NOT NULL ); INSERT INTO `admin` (`id`, `uname`, `upass`) VALUES (NULL, 'admin', 'admin1993'); That means you set your username =  admin and password = admin1993 Login Page: login.php <!doctype html> <html> <head> <meta charset="utf-8"> <title>Login Getway</title> <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" type="text/css"> <style> * { margin:0px; padding:0px; font-family:ar...
Post a Comment
Read more

Responsive header menu bar using jquery with sub-menu for mobile and tables

Responsive menu jquery with submenu mobile and tables Download HTML File Source : <!doctype html> <html> <head> <meta charset="utf-8"> <title>Responsive menu jquery with submenu mobile and tables </title> <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(e) {     $("#mobileMen").click(function(){ $("#menu").fadeToggle(100) }) }); </script> <style> * { margin:0px; padding:0px; text-decoration:none; color:inherit; font-family:arial; transition-duration:.5s; }  nav  { background:#FF404E;     background: -webkit-linear-gradient(#FF404E, #FF616C);     background: -o-linear-gradient(#FF404E, #FF616C);     backgrou...
Post a Comment
Read more

Responsive Contact Form and send data to email by php

Responsive Contact form with php validation and transfer data to email script Source : don't forget one think this will saved by filename.php extension its mandatory and its working online and linux based server platform. <!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="jumbotron text-center">   <h2>Contact form with PHP ans send data to email...
Post a Comment
Read more

How to create a dynamic digital clock for your website using javascript

Dynamic Digital Clock Time : Day : Click to see the clock Just copy and past on your website Source :  <!DOCTYPE html> <html> <head> <script> function startTime() {     var today = new Date();     var h = today.getHours();     var m = today.getMinutes();     var s = today.getSeconds();     m = checkTime(m);     s = checkTime(s);     document.getElementById('clock').innerHTML =     h + ":" + m + ":" + s;     var t = setTimeout(startTime, 500); var today = new Date();     var day = today.getDate();     var month = today.getMonth();     var year = today.getFullYear();       document.getElementById('day').innerHTML =     day + "/" + month + "/" + year;     var d = setTimeout(startTime, 500); } function checkTime(i) {     if (i < 10) {i =...
Post a Comment
Read more

Create dynamic table using bootstrap (filter & find records)

Data Table With Bootstrap Download HTML file Into : In this table, you can short, filtering, find the record and many features you have been used but its very easy to use and configure. so don't get late lets introducing data table CSS:  Data table Stylesheet JS:   Data table js download this for your next project. or you can copy and paste bellow con on your project it's definitely working. Source : <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Data Table</title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script> <script> $(document).ready(function(){       $('#myTable').DataTable(); }); </script> <link...
Post a Comment
Read more

How to create a calculator using HTML, CSS & JavaScript

Create a Calculator Using HTML ,CSS & JavaScript Download HTML file Source : <!doctype html> <html> <head> <meta charset="utf-8"> <title>Dynamic Calculator</title> <style> body { background:#ecf0f1; font-family:arial; } #calBody { padding:10px; background:#3498db; width:300px; height:310px; margin:auto; top:0px; right:0px; left:0px; bottom:0px; position:absolute; -webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.15); -moz-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.15); box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.15); } #calBody h1 { color:#ecf0f1; font-weight:normal; text-align:center; } #calBody input, #answer { padding:10px; width:270px; border:none; margin:auto; display:block; margin-bottom:10px; font-size:24px; color:#34495e; background:#ecf0f1; } #buttons { width:230px; margin:auto; ...
Post a Comment
Read more