Sanwebcorner | Programming Blog

Our Team Page Design Ideas using Html and Css

Team member page design is one of the simple concept to display the team members in the webpage. Lot of peoples are confusing about to display the team members i think it is one of the useful post for them. This is one of the simple layout and have the simple and neat hover effect for each team members.This team member page design is fully responsive and i am used the bootstrap framework in this. This is one of the easy to do. You can modify the column for the team member using bootstrap grid. I used hear four column you can use how many columns you want. with the help of this code col-md-3 col-sm-6.

And you can change the background colors and opacity by customizing the css code. In our team member page have to display the team member name and designation. you can customize that also according to your choice. You can set the social media icons also using social media icons and the corresponding social media links by using below code.

<ul class="social-link">
<li><a href="#" class="fab fa-facebook"></a></li>
<li><a href="#" class="fab fa-google"></a></li>
<li><a href="#" class="fab fa-twitter"></a></li>
</ul>

Here i provided the demo and download both links, You can visit the demo link to get the result of this program. You can download the full code by clicking the download button below.I hope really this post helpful to create our team page (team section) 




Our Team Page Design code:

<html>
<head>
<title>Team Section design concept</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<style>
.our-team{
position: relative;
text-align: center;
overflow: hidden;
box-shadow: 0 0 5px #808080;
margin-bottom:35px;
margin-top:25px;
cursor:pointer;
}
.our-team img{
width: 100%;
height: auto;
transition: all 0.50s linear 0s;

}
.our-team:hover img{
transform: scale(1.2);

}
.our-team .team-content{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
padding: 40px 20px;
background: rgba(152, 197, 112, 0.95);
opacity: 0;
transition: all 0.5s ease-in-out;
}
.our-team:hover .team-content{
opacity: 1;
}
.our-team .team-prof{
margin: 20px 0;
position: relative;
top: 13%;
font-size: 25px;
font-weight: bold;
color: rgba(0, 0, 0, 0.3);
letter-spacing: 1px;
text-transform: capitalize;
}
.our-team .team-prof small{
display: block;
font-size: 13px;
color: #fff;
margin-top: 10px;
text-transform: uppercase;
}
.our-team .social-link{
padding: 0;
margin: 0;
list-style: none;
position: relative;
top: 13%;
}
.our-team .social-link li{
margin-right: 5px;
display: inline-block;
}
.our-team .social-link li a{
width: 35px;
height: 35px;
line-height: 35px;
border-radius: 5px;
color: #fff;
background: rgba(0, 0, 0, 0.3);
}
.our-team .social-link li a:hover{
background: #fff;
color: #333;
text-decoration: none;
}
@media only screen and (max-width: 990px){
.our-team{ margin-bottom: 20px; }
}

</style>
</head>
<body>
<div class="container">

<h1 style="text-align:center;">Team member page design idea.</h1>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="our-team">
<img src="team-page-design.jpg" alt="">
<div class="team-content">
<h3 class="team-prof">
Team Member Name
<small>Team member designation</small>
</h3>
<ul class="social-link">
<li><a href="#" class="fab fa-facebook"></a></li>
<li><a href="#" class="fab fa-google"></a></li>
<li><a href="#" class="fab fa-twitter"></a></li>
</ul>
</div>
</div>
</div>

<div class="col-md-3 col-sm-6">
<div class="our-team">
<img src="team-page-design.jpg" alt="">
<div class="team-content">
<h3 class="team-prof">
Team Member Name
<small>Team member designation</small>
</h3>
<ul class="social-link">
<li><a href="#" class="fab fa-facebook"></a></li>
<li><a href="#" class="fab fa-google"></a></li>
<li><a href="#" class="fab fa-twitter"></a></li>
</ul>
</div>
</div>
</div>


<div class="col-md-3 col-sm-6">
<div class="our-team">
<img src="team-page-design.jpg" alt="">
<div class="team-content">
<h3 class="team-prof">
Team Member Name
<small>Team member designation</small>
</h3>
<ul class="social-link">
<li><a href="#" class="fab fa-facebook"></a></li>
<li><a href="#" class="fab fa-google"></a></li>
<li><a href="#" class="fab fa-twitter"></a></li>
</ul>
</div>
</div>
</div>



<div class="col-md-3 col-sm-6">
<div class="our-team">
<img src="team-page-design.jpg" alt="">
<div class="team-content">
<h3 class="team-prof">
Team Member Name
<small>Team member designation</small>
</h3>
<ul class="social-link">
<li><a href="#" class="fab fa-facebook"></a></li>
<li><a href="#" class="fab fa-google"></a></li>
<li><a href="#" class="fab fa-twitter"></a></li>
</ul>
</div>
</div>
</div>

<div class="col-md-3 col-sm-6">
<div class="our-team">
<img src="team-page-design.jpg" alt="">
<div class="team-content">
<h3 class="team-prof">
Team Member Name
<small>Team member designation</small>
</h3>
<ul class="social-link">
<li><a href="#" class="fab fa-facebook"></a></li>
<li><a href="#" class="fab fa-google"></a></li>
<li><a href="#" class="fab fa-twitter"></a></li>
</ul>
</div>
</div>
</div>

<div class="col-md-3 col-sm-6">
<div class="our-team">
<img src="team-page-design.jpg" alt="">
<div class="team-content">
<h3 class="team-prof">
Team Member Name
<small>Team member designation</small>
</h3>
<ul class="social-link">
<li><a href="#" class="fab fa-facebook"></a></li>
<li><a href="#" class="fab fa-google"></a></li>
<li><a href="#" class="fab fa-twitter"></a></li>
</ul>
</div>
</div>
</div>

<div class="col-md-3 col-sm-6">
<div class="our-team">
<img src="team-page-design.jpg" alt="">
<div class="team-content">
<h3 class="team-prof">
Team Member Name
<small>Team member designation</small>
</h3>
<ul class="social-link">
<li><a href="#" class="fab fa-facebook"></a></li>
<li><a href="#" class="fab fa-google"></a></li>
<li><a href="#" class="fab fa-twitter"></a></li>
</ul>
</div>
</div>
</div>

<div class="col-md-3 col-sm-6">
<div class="our-team">
<img src="team-page-design.jpg" alt="">
<div class="team-content">
<h3 class="team-prof">
Team Member Name
<small>Team member designation</small>
</h3>
<ul class="social-link">
<li><a href="#" class="fab fa-facebook"></a></li>
<li><a href="#" class="fab fa-google"></a></li>
<li><a href="#" class="fab fa-twitter"></a></li>
</ul>
</div>
</div>
</div>
</div>
<h1 style="text-align:center; font-size:18px;"><a href="http://www.sanwebcorner.com">www.sanwebcorner.com</a></h1>
</div>
</body>
</html>

How to Create Vertical Fixed sidebar using pure css for webpages

This is one of the commonly used concept to highlighted text like contact number, Email ids, feedback etc.. This types of vertical fixed sidebar always increase the visibility of the particular text. When you promote the page for business those peoples really using this types of sidebars. 

This concept is purely done by using simple css. It also responsive and you can set this vertical fixed sidebar left or right sides to modifying simple css code here. You can able to set the margin and padding, colors, background colors according to your choice. I provided the simple css code here i hope this example  will helpful you. Here have the demo page to display the result of this code. 





<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vertical fixed sidebar using simple css</title>
<style type="text/css" media="screen">

#vertical-fixed-bar {
    height: 0px;
    width: 65px;
    position: fixed;
    left: 1px;
    top: 50%;
    z-index: 1000;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    margin-left: -38px;
}

#vertical-fixed-bar a {
    display: block;
    background: #f7a00c;
    height: 23px;
    width: 195px;
    padding: 11px 9px;
    color: #fff;
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-decoration: none;
    border-radius: 10px;
}

</style>
</head>
<body>

<div id="vertical-fixed-bar">
<a style="font-size:15px;" href="">www.sanwebcorner.com</a>
</div>

</body>
</html>

360 degree product view using Jquery and css

To view the 360 degree image view using jquery. This is the concept to view the 360 degree image  on mouse cursor movement. This types of view is mostly used in the e-commerce website products to show the best image for customers. This is something old concept to use the different angled image to view 360 degree view. But it is useful some cases. I hope this is useful. Below is the demo page please check out the demo page so you will know how its working. And also have the download code option below. You can download the code as well.


Code for 360 degree Product View:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery 360 product view</title>
<script type="text/javascript" language="JavaScript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript" language="JavaScript" src="js/pic360-1.0.0.js"></script>
<style>
.PIC360{display:none;overflow:hidden;}
.PIC360 UL,.PIC360 LI{margin:0; padding:0;}
.PIC360 LI{list-style:none;}
.PIC360{width:400px; margin:10px auto;border:5px solid #CECECE;}
</style>
</head>
<body>
<div class="PIC360">
<ul>
<li><img width="400" height="255" src="images/image1_1.jpg" /></li>
<li><img width="400" height="255" src="images/image1_2.jpg" /></li>
<li><img width="400" height="255" src="images/image1_3.jpg" /></li>
<li><img width="400" height="255" src="images/image1_4.jpg" /></li>
<li><img width="400" height="255" src="images/image1_5.jpg" /></li>
<li><img width="400" height="255" src="images/image1_6.jpg" /></li>
<li><img width="400" height="255" src="images/image1_7.jpg" /></li>
<li><img width="400" height="255" src="images/image1_8.jpg" /></li>
<li><img width="400" height="255" src="images/image1_9.jpg" /></li>
<li><img width="400" height="255" src="images/image1_10.jpg" /></li>
<li><img width="400" height="255" src="images/image1_11.jpg" /></li>
<li><img width="400" height="255" src="images/image1_12.jpg" /></li>
<li><img width="400" height="255" src="images/image1_13.jpg" /></li>
<li><img width="400" height="255" src="images/image1_14.jpg" /></li>
<li><img width="400" height="255" src="images/image1_15.jpg" /></li>
<li><img width="400" height="255" src="images/image1_16.jpg" /></li>
<li><img width="400" height="255" src="images/image1_17.jpg" /></li>
<li><img width="400" height="255" src="images/image1_18.jpg" /></li>
</ul>
</div>
</body>
</html>

Multi Level Dropdown Menu using Css and Javascript

Today we are going to see about how to create multilevel dropdown menu using simple Css, Html and JavaScript code. This is one of the useful code we can use this code for your website menu without any difficulty. Now a days lot of website having the more pages with links, when you can display all the links in the menu you are facing some difficulties but this types of multi-level-drop-down menu is easily reduce your difficulties. This types of menu structure is commonly used one. The additionally it supports responsive. It is properly displayed all the devices like Mobile, Tab, Laptop, Desktops.

In this example i used the menus like below. First you should include the meta tag <meta name="viewport" content="width=device-width, initial-scale=1"> Because then only it detects the device for responsive menu otherwise it will not work.

Set the Navigation bar:

#nav {
position: relative;
min-height: 60px;
max-width: 100%;
background-color: transparent !important;
color: #000;
}

This code is helps to set the Navigation bar, You can also customize the min-height and max-width according to the your website layout. Then the media screen you can write the respective code to display the menu perfectly. The below is the media query code. 






Full Code for Multi Level Dropdown Menu using Css:


<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi Level Dropdown menu using css and javascript</title>

<style>
html { font-family: 'roboto', sans-serif; }

.container {
width: 90%;
margin: 10vh auto;
}

a { color: inherit; }

#nav, #nav ul, #nav li {
margin: 0;
padding: 0;
border: 0;
list-style: none;
box-sizing: border-box;
}

#nav {
position: relative;
min-height: 60px;
max-width: 100%;
background-color: transparent !important;
color: #000;
}
@media screen and (min-width: 650px) {

#nav { display: inline-block; }
}
@media screen and (max-width: 650px) {

#nav { display: block; }
}

#nav li { position: relative; }

#nav a {
text-decoration: none;
height: 100%;
display: block;
padding: 0 50px;
}
@media screen and (min-width: 650px) {

#nav a:focus { outline: none; }
}

.plusMark {
margin-left: 10px;
font-size: 20px;
font-weight: 700;
}
@media screen and (min-width: 650px) {

#nav li {
text-align: left;
width: 200px;
}
}
@media screen and (max-width: 650px) {

#nav li {
text-align: center;
width: 100%;
}
}


@media screen and (min-width: 650px) {

a + ul { position: absolute; }

a + ul:not(.js-showElement) { display: none; }
}
@media screen and (max-width: 650px) {

a + ul { position: relative; }

a + ul:not(.js-hideElement) { display: block; }
}

#nav > ul, .fa {
height: 100%;
line-height: 60px;
}

#nav > ul > li {
position: relative;
text-align: center;
line-height: 60px;
}
@media screen and (min-width: 650px) {

#nav > ul > li {
float: left;
width: auto;
}
}
@media screen and (max-width: 650px) {

#nav > ul > li {
float: none;
display: block;
width: 100%;
}
}

#nav > ul > li > a { background-color: transparent !important; }

#nav > ul > li > a:hover, #nav > ul > li > a:focus, #nav > ul > li > a.js-openSubMenu { background-color: #D35400; color:#007bff; }
@media screen and (min-width: 650px) {

#nav > ul > li: not(: last-child) {
border-right: 1px solid #D35400;
border-bottom: none;
}
}
@media screen and (max-width: 650px) {

#nav > ul > li: not(: last-child) { border-right: none; }

#nav > ul > li:not(:last-child):not(:first-child) { border-bottom: 1px solid #D35400; }
}

#nav > ul > li:not(#toggleMenu):not(.js-showElement) {  }

@media screen and (min-width: 650px) {

#nav > ul > li: not(#toggleMenu): not(.js-showElement) { display: inline-block; }
}
@media screen and (max-width: 650px) {

#nav > ul > li: not(#toggleMenu): not(.js-showElement) { display: none; }
}
@media screen and (min-width: 650px) {

#nav #toggleMenu { display: none; }
}
@media screen and (max-width: 650px) {

#nav #toggleMenu {
display: block;
width: 100%;
}

#nav #toggleMenu.js-open { border-bottom: 1px solid #D35400; }

#nav #toggleMenu.js-open .fa-times { display: block; }

#nav #toggleMenu.js-open .fa-bars { display: none; }

#nav #toggleMenu.js-open a { background-color: #D35400; }

#nav #toggleMenu:not(.js-open) .fa-times { display: none; }

#nav #toggleMenu:not(.js-open) .fa-bars { display: block; }
}

span#toggleMenu-text {
position: absolute;
opacity: 0;
}

#nav > ul > li > ul { background-color: #D35400; }
@media screen and (min-width: 650px) {

#nav > ul > li > ul {
top: 60px;
left: 0;
}
}
@media screen and (max-width: 650px) {

#nav > ul > li > ul {
width: 100%;
position: relative;
}

#nav > ul > li > ul:not(.js-showElement) { display: none; }
}

#nav > ul > li > ul > li > a {     background-color: #F5F5F5;
border: 1px solid #ECECEC; }

#nav > ul > li > ul > li > a:hover, #nav > ul > li > ul > li > a:focus { color:#007bff; }

#nav > ul > li > ul > li:not(:last-child) a {  }


@media screen and (min-width: 650px) {

#nav > ul > li > ul > li > ul {
top: 0;
left: 200px;
}
}
@media screen and (max-width: 650px) {

#nav > ul > li > ul > li > ul {
width: 100%;
position: relative;
}

#nav > ul > li > ul > li > ul:not(.js-showElement) { display: none; }
}

#nav > ul > li > ul > li > ul > li > a { background-color: #E67E22; }

#nav > ul > li > ul > li > ul > li > a:hover, #nav > ul > li > ul > li > ul > li > a:focus { background-color: #D35400; }

#nav > ul > li > ul > li > ul > li:not(:last-child) > a { border-bottom: 1px solid #D35400; }

#nav .js-hideElement { display: none; }

#nav .js-showElement { display: block; }

html.no-js li:hover > a + ul, html.no-js li:focus > a + ul { display: block; }
@media screen and (max-width: 650px) {

html.no-js #nav: hover > ul > li: not(#toggleMenu), html.no-js #nav: focus > ul > li: not(#toggleMenu) { display: block; }

html.no-js #nav:hover li:hover > a + ul, html.no-js #nav:hover li:focus > a + ul, html.no-js #nav:focus li:hover > a + ul, html.no-js #nav:focus li:focus > a + ul { display: block; }
}
</style>
</head>
<body>
<nav id="nav">
<ul>

<!-- Menu tooggle on smaller screens  -->
<li id="toggleMenu"> <a href="/sitemap.html"> <i class="fa fa-bars"></i> <i class="fa fa-times"></i>
<span id="toggleMenu-text"></span> </a> </li>
<li> <a href="#">We</a>
<ul>
<li><a href="#">Who we are</a></li>
</ul>
</li>
<li> <a href="#">Connect</a>
<ul>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
<li> <a href="#">Services</a>
<ul>
<li><a href="#">Stall Design</a></li>
<li><a href="#">Stall Exibition</a></li>
</ul>
</li>
</ul>
</li>



<li> <a href="">Client</a>
<ul>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Testimonials</a></li>
</ul>
</li>


</ul>
</nav>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function() {

// Remove no-js class
$('html').removeClass('no-js');

$('#toggleMenu').on('click', function() {

if ($(this).hasClass('js-open')) {

$('#nav > ul > li:not(#toggleMenu)').removeClass('js-showElement');
$(this).removeClass('js-open');

} else {

$('#nav > ul > li:not(#toggleMenu)').addClass('js-showElement');
$(this).addClass('js-open');

}

return false;
})

// Add plus mark to li that have a sub menu


// sub menu
// ------------------------

// When interacting with a li that has a sub menu
$('li:has("ul")').on('mouseover keyup click mouseleave', function(e) {

// If either -
// tabbing into the li that has a sub menu
// hovering over the li that has a sub menu
if (e.keyCode === 9 | e.type === 'mouseover') {

// Show sub menu
$(this).children('ul').removeClass('js-hideElement');
$(this).children('ul').addClass('js-showElement');
}

// If mouse leaves li that has sub menu
if (e.type === 'mouseleave') {

// hide sub menu
$(this).children('ul').removeClass('js-showElement');
$(this).children('ul').addClass('js-hideElement');
}

// If clicking on li that has a sub menu
if (e.type === 'click') {

// If sub menu is already open
if ($(this).children('a').hasClass('js-openSubMenu')) {

// remove Open class
$(this).children('a').removeClass('js-openSubMenu');

// Hide sub menu
$(this).children('ul').removeClass('js-showElement');
$(this).children('ul').addClass('js-hideElement');

// If sub menu is closed
} else {

// add Open class
$(this).children('a').addClass('js-openSubMenu');

// Show sub menu
$(this).children('ul').removeClass('js-hideElement');
$(this).children('ul').addClass('js-showElement');

}

return false;

} // end click event

});

// Tabbing through Levels of sub menu
// ------------------------

// If key is pressed while on the last link in a sub menu
$('li > ul > li:last-child > a').on('keydown', function(e) {

// If tabbing out of the last link in a sub menu AND not tabbing into another sub menu
if ((e.keyCode == 9) && $(this).parent('li').children('ul').length == 0) {

// Close this sub menu
$(this).parent('li').parent('ul').removeClass('js-showElement');
$(this).parent('li').parent('ul').addClass('js-hideElement');

// If tabbing out of a third level sub menu and there are no other links in the parent (level 2) sub menu
if ($(this).parent('li').parent('ul').parent('li').parent('ul').parent('li').children('ul').length > 0 && $(this).parent('li').parent('ul').parent('li').is(':last-child')) {

// Close the parent sub menu (level 2) as well
$(this).parent('li').parent('ul').parent('li').parent('ul').removeClass('js-showElement');
$(this).parent('li').parent('ul').parent('li').parent('ul').addClass('js-hideElement');
}

}

})

})
</script>
</body>
</html>

Here i provided the full code and the demo page. Please check the demo button below to check the menu live. And also you can download full code by clicking the download button below. I hope this code is very useful.

 

How to Delete data from table using php and mysql

Here is the code to display the data from the table using php and mysql. This simple code is used to delete the record you choose.You can create the database and table. Here i created database name is oops and the table name is called as a oop. And the table fields are name, lname, salary. The below code helps you to display the table information in the format of table with the delete option. When you click the delete it takes the particular id and moves to the delete.php file, In the delete.php file haves the code to delete the particular row based on the id you chosen from the table. I hope this is very useful to you and this is one of the simple concept in php.


delete-data-from-table-php-mysql



index.php

<?php
$con=mysqli_connect("localhost","root","","oops");
$sql="select * from oop";
$result=mysqli_query($con,$sql);
echo "<table><tr><th>Name</th><th>Lname</th><th>Salary</th><th>Edit</th></tr>";
while($row=mysqli_fetch_assoc($result)){

echo "<tr><td>".$row['fname']."</td>";
echo "<td>".$row['lname']."</td>";
echo "<td>".$row['salary']."</td>";
echo "<td><a href='delete.php?id=".$row['id']."'>Delete</a></td>";
}
echo "</tr></table>";
?>



delete.php

<?php
$con=mysqli_connect("localhost","root","","oops");
$id=$_GET['id'];
$query="delete  from oop where id=$id";
$sql=mysqli_query($con,$query);
header("Location: view.php");
?>

How to create simple coming soon page

Simple website always looks nice and very professional . Here we will see how to create very simple coming soon page for your website. It is very easy to create the coming soon page using simple html and css code. Take on simple icon related to the coming soon page and put it in to the center of the page using css code like 

.holder{
width: 480px;
text-align: center;
margin: 0 auto;
padding-top: 120px;
}

Then give your coming soon text in header tag. The simple coming soon page is ready. This is very simple and neat. I hope this page is very useful to you. You can use this page to your websites. I given the full html code here you can copy paste the code and change the image. or you can download the full code from here by pressing download button.




<!DOCTYPE html>
<html lang="en">
<head>
<title>Coming Soon Page</title>
<meta charset="UTF-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="description">
<link href="https://fonts.googleapis.com/css?family=Neuton|Roboto" rel="stylesheet">
<style>
.holder{
width: 480px;
text-align: center;
margin: 0 auto;
padding-top: 120px;
}
.holder h1 {
font-family: 'loveloblack', sans-serif;
font-size:5em;
color:#2d2d2d;
text-shadow: 3px 3px 0 #e3e3e3;
line-height: 27px;
margin-top: 12px;
margin-bottom: 10px;
}
.holder h1 span.tbl{
font-family: Dosis,Tahoma,sans-serif;
font-size:35px;
color:#2d2d2d;
line-height:1em;
font-weight: bold;
letter-spacing: -1px;
line-height: 1;
text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.3);
}
.holder h1 span {
font-family: Dosis,Tahoma,sans-serif;
font-size:1em;
color:#3d9df8;
line-height:1em;
font-weight: bold;
letter-spacing: -1px;
line-height: 1;
text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.3);
}
p{
font-size: 18px;
font-weight: 600;
color: #13447E;
font-family: 'Neuton', serif;
}
</style>
</head>
<body>
<div class="holder">
<img src="Coming-Soon-Icon.png" style="width:250px;" />
<h1><span class="tbl">Our Website is Coming Soon.</span></h1>
<p><span class="tbl">We'll be back shortly.</span></p><br>
<br />
</div>
</body>
</html>

Create Auto complete to Input field without database Jquery

Auto complete system one of the simple thing, It will done by using Jquery. Now we will see how to create auto complete process to the input field by using manually given keyword by the programmer. This process is very useful to the user. When user types the keyword it automatically shows the suggestion tho the used based on the given keyword.

 There is two ways to complete this process one is auto complete based on the database data and another one is based on the given keyword.For this concept there is no need any database. In previous session i showed you here how to create auto complete system with database. I hope this below example will help you. Check out my demo page in below link.



<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var availableTags = [
"ActionScript",
"Html",
"Css",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( ".san" ).autocomplete({
source: availableTags
});
} );
</script>

<style>
.san{
width:100%;
border:1px solid red;
height:35px;
max-width:300px;
margin:0 auto;
display:block;
}

.content{
width:500px;
margin:0 auto;
background-color: #588659;
padding: 65px 35px;
}
</style>
</head>
<body>
<div class="content">
<h2 style="color:#fff; text-align:center;">Auto complete System without database using jQuery</h2>
<input class="san">
<p style="color:#fff; text-align:center;">www.sanwebcorner.com</p>
</div>
</body>
</html>

How to Animate gradient Text using pure css

This is one of the css3 trick to Animate the gradient text. This is one of the interesting concept and this will be done by using the html and css3 code. First we should give the gradient colors for the text using the following code. background: linear-gradient(to right, #FF3202 20%, #FF6E02 40%, #FF6E02 60%, #FF3202 80%); you can change the gradient color according to your choice. In this example i privided light orange and red color for gradient. Then will give the position for this gradient using the below code.background-position: 200% center; and then give the animation for the background using below code animation: shine 3s linear infinite; 

This is the process to generate the animated gradient text using css3 and html. I hope this example is very useful and also very simple to create. Here i provided the demo page, check out the demo page for this effect. And also have the code you can download and use this code for your projects.




Code for Animate gradient text using Css:

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>How to Animate gradient Text using pure css</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:900" rel="stylesheet">
<style>
html {
height: 100%;
}
body {
background: #333;
text-align: center;
min-height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-family: 'Roboto', sans-serif;
}
h1 {
font-size: 100px;
text-transform:uppercase;
}
.linear-wipe {
text-align: center;
background: -webkit-gradient(linear, left top, right top, color-stop(20%, #FF3202), color-stop(40%, #FF6E02), color-stop(60%, #FF6E02), color-stop(80%, #FF3202));
background: linear-gradient(to right, #FF3202 20%, #FF6E02 40%, #FF6E02 60%, #FF3202 80%);
background-size: 200% auto;
color: #000;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: shine 3s linear infinite;
animation: shine 3s linear infinite;
}
@-webkit-keyframes shine {
to {
background-position: 200% center;
}
}
@keyframes shine {
to {
background-position: 200% center;
}
}
</style>
</head>
<body>
<h2>How to Animate gradient Text using pure css</h2>
<h1 class="linear-wipe">sanwebcorner</h1>
</body>
</html>

How to generate random password using php

In this program we are going to see how to generate random password using php. This is the php concept to generate random password with given character like abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()-=+? you can give the any character like that. str_shuffle() is a php function is used to shuffle the given character. You can also mention how many digits you want. In this example i given 8 character length. You should provide according to your choice.

Here when you refresh the page using refresh button the password will be change. The password dynamically changed when you refresh the page. This is one of the old concept to generate the password but still is useful. Please check out the demo page and download the code from here. I hope this concept will useful somewhere in the programs. 

Code for Create random Password using PHP:

<html>
<head>
<title>Generate random password using php</title>
<style>
.san{
margin: 40px;
border: 1px solid #3A3737;
width: 355px;
padding: 16px;
font-size: 30px;
font-weight: bold;
float:left;
}
</style>
</head>
<body>
<?php
function random_password_generate($length) 
{
$chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()-=+?";
$password = substr(str_shuffle( $chars ),0, $length );
return $password;
}
$password = random_password_generate(8);?>
<h2 style="float:left; margin:40px;  padding: 21px 0px;"> Password: </h2> &nbsp; <div class="san">
<?php echo $password;?>
</div>
<input type="button" value="Refresh Page" onClick="window.location.reload()" style="float:left; margin:49px 40px;  padding: 15px;">
</body>
</html>

3D Drop Shadow for text using pure css

This is one of the simple concept using css3 code. It is just drop the shadow to the text for 3D Effect. 3D text always looking good and attractive to everyone. So you can use this for your headings to attractive your contents to the clients. This is very easy to drop the shadow with the help of css3. You can drop the shadow to the text using the following simple code.

text-shadow:     0 1px 0 hsl(174,5%,80%),
0 2px 0 hsl(174,5%,75%),
0 3px 0 hsl(174,5%,70%),
0 4px 0 hsl(174,5%,66%),
0 5px 0 hsl(174,5%,64%),
0 6px 0 hsl(174,5%,62%),
0 7px 0 hsl(174,5%,61%),
0 8px 0 hsl(174,5%,60%),

0 0 5px rgba(0,0,0,.05),
0 1px 3px rgba(0,0,0,.2),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.2),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.3);

You can change the color of the codes and shadow colors according to your choice. Here is the demo page of this example you can visit the demo page for this 3d text, and also download the code from here. I hope this simple  concept is very useful to you.



To Drop Shadow to Text for 3D Effect:

<html>
<head>
<title>Drop shadow for 3d text</title>
<style>
body { font: 900 120px/1 'Source Sans Pro', Arial, sans-serif; background: #becccc; text-transform: uppercase; color: #fff; text-align: center; letter-spacing: -3px; padding-top: 10%; }

h1 {
position: absolute;
top: 35%;
width: 100%;
font-size:75px;

text-shadow:     0 1px 0 hsl(174,5%,80%),
0 2px 0 hsl(174,5%,75%),
0 3px 0 hsl(174,5%,70%),
0 4px 0 hsl(174,5%,66%),
0 5px 0 hsl(174,5%,64%),
0 6px 0 hsl(174,5%,62%),
0 7px 0 hsl(174,5%,61%),
0 8px 0 hsl(174,5%,60%),

0 0 5px rgba(0,0,0,.05),
0 1px 3px rgba(0,0,0,.2),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.2),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.3);
}
</style>
</head>
<body>
<h2>3D Drop Shadow for text using pure css </h2>
<h1>SAN WEB CORNER</h1>
</body>
</html>