Sanwebcorner | Programming Blog

Simple Call to Action Section for website using Css

Now i am going to tell you how to create call to action section to website with the help of simple html and css code and Bootstrap. This is very simple and easy, Every website contain this types of call to action section. This call to action section very important to get the leads or customer interaction. 

when click the call to action button (CTA) it takes the important actions like Signup form or feedback forms and etc.. So we have to highlight that particular section. I hope this is very helpful. Here i provided the  demo page and download link. Please checkout the links.

Code for Simple Call to Action Section:

<html>
<head>
<title>Simple Call to Action Button</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<style>
.call_to_action_container
{
width:100%;
padding:30px;
background-color:#fb5b21;
}

h3{
color:#fff;
font-size:30px;
text-transform:uppercase;
margin-top:10px;

}

.btn
{
border-color:#fff;
border-radius:3px;
background-color:#fff;
color:#000;
padding: 12px 25px;
}

.btn:hover
{
color:#fb5b21;

}
</style>
</head>
<body>

<div class="container-fluid call_to_action_container">
<div class="row">
<div class="col-md-2">&nbsp;</div>
<div class="col-md-6">
<h3>Do you want discount?</h3></div>
<div class="col-md-2"><a href="#" class="btn warning">Get Discount</a></div>
<div class="col-md-2">&nbsp;</div>
</div>
</div>
</body>
</html>

Customize the HTML5 Audio controller using Jquery

Now i will tell you how to customize the html5 audio controller with the help of Jquery and Javascript. This is fully customizable html5 controller with nice effect. It contains the play and pause buttons. Here the seeking slider is around the play pause button. Its looking nice you can set this in to your website very easily and it is also simple using the jquery files. I found this code from here : https://github.com/jplayer/jPlayer

Below is the Demo link checkout the demo link how it is working. This audio player controller is totally different form the normal html5 audio controller.I hope this post is very useful. you can addyour own audio files Here so you can play your coustomized audio in your website by changing the below audio url.

m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"






Code for Customize the HTML5 Audio controller using Jquery

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Customize the HTML5 Audio controller using Jquery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="skin/circle.player.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.jplayer.min.js"></script>
<script type="text/javascript" src="jquery.transform2d.js"></script>
<script type="text/javascript" src="jquery.grab.js"></script>
<script type="text/javascript" src="mod.csstransforms.min.js"></script>
<script type="text/javascript" src="circle.player.js"></script>
<script type="text/javascript">
//<![CDATA[

$(document).ready(function(){

var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",
{
m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
}, {
cssSelectorAncestor: "#cp_container_1",
swfPath: "../../dist/jplayer",
wmode: "window",
keyEnabled: true
});
});
//]]>
</script>
</head>
<body>

<div id="jquery_jplayer_1" class="cp-jplayer"></div>
<div id="cp_container_1" class="cp-container">
<div class="cp-buffer-holder">
<div class="cp-buffer-1"></div>
<div class="cp-buffer-2"></div>
</div>
<div class="cp-progress-holder">
<div class="cp-progress-1"></div>
<div class="cp-progress-2"></div>
</div>
<div class="cp-circle-control"></div>
<ul class="cp-controls">
<li><a class="cp-play" tabindex="1">play</a></li>
<li><a class="cp-pause" style="display:none;" tabindex="1">pause</a></li>
</ul>
</div>
</body>
</html>

How to create statistic counter when scroll the page using Jquery and css

In this section will tell you how to create statistic counter while scroll the webpage. This section normally available for all types of websites. This is one of the animated counter section will easily explain the customers about our status. This pictorial representation is very attractive the customers. The counter animation will done by using javascript, Jquery and css. The fonts are font awesome icons.

For layout i am using the bootstrap here. This is one of the simple example shows how easy to create this types of animated circle counter using Jquery. You can customize this layout using the below simple css code. This types of sections are available most of the website to present the best information attractive animated manner.

This statistic counter is one of the simple animated counter. This counter will execute while scroll the website or view the particular animated section. This counter having the certain numeric value, the counter starts from number 0 and increase up to the specified value. You will specify the numeric value in the particular class called currency-count like this:

<span class="currency-count">530</span>

I hope this common below example is useful to you. Here i provided the demo link and full code to download. Checkout those pages. 







Styles for Stat counter while scroll:

<style>
html,
body {
  height: 100%;
  font-family: 'Open Sans', sans-serif;
}

.pb100 {
    padding-bottom: 100px;
}

.pt100 {
    padding-top: 100px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Lato', sans-serif;
    padding: 0;
    margin: 0;
}


.counter-section {
  background: url(bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;
  background-size: cover;
}

.counter-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.89);
}

.count-items {
  text-align: center;
  padding: 50px 20px;
  border-radius: 100%;
  border-bottom: 3px dotted #666;
  border-top: 3px dotted #666;
}
.count-items:hover.count-items i{
  color: #ffaf53
}
.count-items:hover.count-items h2{
  color: #f35b68
}
.count-items i {
  color: #f35b68;
  font-size: 36px;
}

.count-items span {
  color: #fff;
  font-size: 36px;
  padding: 20px 0px;
  display: inherit;
  font-weight: 700;
}

.count-items h2 {
  font-size: 16px;
  color: #ffaf53;
}
.funfact {
  margin-top: 50px;
  text-align: right;
}

.funfact h2 {
    color: #ffaf53;
    font-size: 42px;
    font-weight: 700;
    position: relative;

}
.funfact h2:after {
position: absolute;
content: "";
width: 115px;
height: 2px;
background:#fff;
right: 0px;
bottom: -24px;


}
.funfact p {
  line-height: 24px;
  font-size: 16px;
  margin-top: 50px;
  color: #e1e1e1;
}
a.site-btn.transition-ease.quote-btn {
  padding:14px 28px;
  background: #f35b68;
}
.site-btn.header-quote-btn:hover {

    background: transparent;
    color: #252525;

}
.site-btn.header-quote-btn {
padding:14px 28px;
background: #f35b68;
  background: linear-gradient(to right, #f35b68, #ffaf53);
  margin-left: 20px;
text-transform: capitalize;
background-origin: border-box ;
}
#marquee-container {
  padding: 20px 0px;
}

.fix {
    overflow: hidden;
}
</style>



Html Code for Statistic Counter for website:


<section class="counter-section fix">
<div class="counter-overlay"></div>
<div class="container pt100 pb100">
<div class="row">

<div class="col-md-3 col-sm-6">
<div class="currency-counter count-items">
<i class="fa fa-rocket"></i>
<span class="currency-count">1224</span>
<h2>Designs Completed</h2>
</div>
</div>

<div class="col-md-3 col-sm-6">
<div class="currency-counter count-items">
<i class="fa fa-users"></i>
<span class="currency-count">30</span>
<h2>Team Member</h2>
</div>
</div>

<div class="col-md-3 col-sm-6">
<div class="currency-counter count-items">
<i class="fa fa-calendar"></i>
<span class="currency-count">15</span>
<h2>Years Experience</h2>
</div>
</div>

<div class="col-md-3 col-sm-6">
<div class="currency-counter count-items">
<i class="fa fa-comment-o"></i>
<span class="currency-count">530</span>
<h2>Satisfied Customers</h2>
</div>
</div>
</div>

</div>
</section>
<h2 style="padding:40px; text-align:center;"><a href="http://www.sanwebcorner.com/">www.sanwebcorner.com</a></h2>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/main.js"></script>

How to Send Feedback form Information to email in tabular format using php

I already shared the concepts about customer feedback form. Now we will see how to send the feedback information to the particular email id in the format of table. If you can implement the tabular format information you can use the html tag inside the php tag. The below code is very helpful to send the feedback form information in the format of tabular.

This example works 100% . I hope this example will really helpful to the programmers to send the form information in the tabular format to the email. Here is the demo page. You can check the form here and you can't able to view the result here, so you will check in your server. Here is the option to download full code by clicking the below download button.






index.html

<html>
<head>
<title>Send Feedback Information in tabular format to mail</title>
</head>
<body>
<form name="contact-form1"  method="post" action="email_send.php">
<input type="text"  name="name" placeholder="Your Name.." required>
<input type="text"  name="email" placeholder="Your Email.."required >
<input type="text"  name="phone" placeholder="Your 10 digit Phone.."require pattern="[0-9]{10}">
<textarea  name="message" placeholder="Write something.." style="height:100px" required></textarea>
<input name="submit" type="submit" value="Submit" /><br>
</form>
</body>
</html>


email_send.php

<?php
if(isset($_POST['submit'])){
    $to = "admin@sanwebcorner.com";
    $from = "admin@sanwebcorner.com";
    $name = $_POST['name'];
$phone = $_POST['phone'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $subject = "New Enquiry From Website";
$msg.= "<table width='500' border='0' align='center' cellpadding='0' cellspacing='0' style='font-family:Arial, Helvetica, sans-serif; font-size:10pt; border:1px solid #ccc;'> ";
$msg.= "<tr>";
$msg.= "<td width='96' style='border:1px solid #ccc; padding:5px'>Name</td>";
$msg.= "<td height='25' style='border:1px solid #ccc; padding:5px'>$name</td>";
$msg.= "</tr>";
$msg.= "<tr>";
$msg.= "<td height='25' bgcolor='#F5F5F5'  style='border:1px solid #ccc; padding:5px'>Email Id </td>";
$msg.= "<td height='25' bgcolor='#F5F5F5'  style='border:1px solid #ccc; padding:5px'>$email</td>";
$msg.= "</tr>";
$msg.= "<tr>";
$msg.= "<td height='25'  style='border:1px solid #ccc; padding:5px'>Phone No</td>";
$msg.= "<td height='25'  style='border:1px solid #ccc; padding:5px'>$phone</td>";
$msg.= "</tr>";
$msg.= "<tr>";
$msg.= "<td height='95' style='border:1px solid #ccc; padding:5px'>Message</td>";
$msg.= "<td height='95' style='border:1px solid #ccc; padding:5px'>$message</td>";
$msg.= "</tr>";
$msg.= "</table>";              
$headers = "From: $name < admin@sanwebcorner.com >.";
$headers .= "\r\nContent-Type: text/html; charset=ISO-8859-1\r\n";
mail($to, $subject, $msg, $headers) ;
echo '<script>alert("Your Enquiry Received . We will contact you soon...");</script>';
echo '<script>location.href = "index.php"</script>';
    }
?>

jQuery Responsive popup box with feedback form

Here we can see how to create Jquery responsive popup box with feedback form. I already posted the popup box with feedback form. But in this post i will give you the code about how to display the responsive popupbox with feedback form.( or you can use contact form) or any type of form you can use in this popupbox. This responsive popup box will display on page load.

Here we write the styles (css) responsive manner. It will fit all the devices like mobile and tab, desktop, laptop. Here is the full html, css, jquery code you can view the code below. And i will  provide the full code here. To download full code please click the below download link. In this example have the responsive code you can see this example by clicking the demo link. You can see the result of this page. I hope this is very useful.





Style sheet for responsive pop-up box:

body { margin-top: 0; }

#container {
  max-width: 1000px;
  margin: 0 auto;
  background: #EEE;
}

h1,
p {     padding: 0em 2em;}

#fvpp-blackout {
  display: none;
  z-index: 499;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
}

#pop-up-content {
  display: none;
  z-index: 500;
  position: fixed;
  width: 36%;
  left: 30%;
  top: 20%;
  padding: 20px 2%;
  font-family: Calibri, Arial, sans-serif;
  background: #FFF;
}

#fvpp-close {
    position: absolute;
    top: -16px;
    right: -10px;
    font-size: 23px;
    cursor: pointer;
    font-weight: bold;
    color: #FFF;
    background-color: #000;
    padding: 1px 9px;
    border-radius: 34px;
}


#fvpp-dialog h2 {
  font-size: 2em;
  margin: 0;
}

#fvpp-dialog p { margin: 0; }


input{
width:100%;
height:40px;
border:1px solid green;
padding:8px;
}

select
{
width:104%;
height:40px;
border:1px solid green;
padding:8px;
padding-top: 0px;
padding-bottom: 0px;
}

textarea
{
width:100%;
height:80px;
border:1px solid green;
padding:8px;
}
.enq-div{
width:300px;
padding:35px;
border:1px solid green;
background-color:#f1f1f1;
display:block;
margin:0 auto;
}

.btn{
width: 50% !important;
    background-color: green;
    color: #fff;
    height: 50px;
    margin: 0 auto;
    display: block;
}


Html code for responsive popup box with feedback form:

<body>
<div id="container">
<h1>jQuery Responsive popup box with feedback form</h1>
</div>
</div>
<div id="pop-up-content">
<form id="contact-form1" class="contact-form flex-type" action="mail1.php" method="post">
<p><input type="text" name="name"  required placeholder="Your Name (required)"></p>
<p><select name="enquiry-abt">
<option name="Enquiry About Admission" value="Enquiry About Admission" >Enquiry About Admission</option>
<option name="Enquiry About Fees" value="Enquiry About Fees" >Enquiry About Fees</option>
<option name="Others" value="Others" >Others</option>
</select></p>
<p><input type="email" name="email" required placeholder="Email (required)"></p>
<p><input type="text" name="subject" required placeholder="Subject"></p>
<p><input type="Mobile" name="mobile" required placeholder="Mobile Number"></p>
<p><textarea rows="8" name="message" required placeholder="Message"></textarea></p>
<p><input type="submit" name="submit" required value="submit" class="btn" data-type="submit"></button></p>
</div>
<h5><a href="http://www.sanwebcorner.com">www.sanwebcorner.com</a></h5>
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="jquery.firstVisitPopup.js"></script> 
<script>
$(function () {
$('#pop-up-content').firstVisitPopup({
cookieName : 'homepage',
showAgainSelector: '#show-message'
});
});
</script>
</body>

Change images on mouse move on image using Jquery

In this section i will tell you how to create image change option on image move. It means to display various images when move the cursor point on the images from the left to right or right to left using Jquery and simple html code. This is one of the simple JavaScript effect. 

This is very useful to some sections in website. It changes the images when move the mouse from left and right. This example have the demo link please visit the demo link and check how it works. Click the download link to download the script. I hope this post is very useful to you.




Code for changes image on mouse  move on image using javascript and Jquery:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Change image on mouse move using javascript and Jquery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.shuffle-images.js"></script>
<style>
.container {
width: 980px;
margin: 0 auto;
}

a{
text-decoration:none;
color:#fff;
}

.main {
position: relative;
}

.shuffle-me {
width: 25%;
height: 150px;
margin: 2%;
display: block;
position: relative;
float: left;
width: 26%;
height: 209px;
}

.info {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.35);
padding: 20px;
text-align: center;
display: block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}


.shuffle-group {
position: relative;
width: 100%;
margin-bottom: 10px;
}

.shuffle-group .shuffle-me {
width: 31.9%;
float: left;
margin: 5px;
}

.shuffle-group .shuffle-me:first-child {
width: 66%;
float: left;
height: 431px;
}
.shuffle-group .shuffle-me:first-child h1 {
margin-top: 190px;
font-size: 30px;
}

</style>
<script>
$(document).ready(function(){
$(".shuffle-me").shuffleImages({
target: ".images > img"
});
});

</script>
</head>
<body>
<div class="wrapper">
<div class="main">
<div class="container">
<div class="shuffle-group">
<div data-si-mousemove-trigger="100" class="shuffle-me">
<a href="http://sanwebcorner.com/" class="info" target="_blank"><h1>www.sanwebcorner.com</h1><h2>web tutorial</h2></a>
<div class="images">
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Display Feedback form in popup box on page load with the help of Javascript, Html and Css

Now i will give you the codes to display the feedback form in popup box on page load. This is one of the important concept to view the particular popup box on page load. In this popup box will set the feedback form or signup form to get the response from the client very easily. You can write the content what you want. You can set the images, contents, forms in the popup box.

In this feedback form onpage load will give the popup box on immediately after page load. The popup content or forms will be display here. If client interested to give the feedback they will fill the form. If they will click outside of the popup window the popup box will close automatically.

Here is i am using feedback form, When will fill the feedback form, the form information will go to the particular email id. the following php code will useful to send the form information to mail id.


This type of on load popup box really increased the visibility from the customer. So it is very useful to give the important news and feedback and lead generated forms. Most of the website they are using this types of popup boxes to generate the sales. Here is the source code and demo pages. Please check the demo page, then you can able to know how this process is working.



Code for Display Feedback Form on Page Load.:

<html>
<head>
<meta charset="utf-8">
<title>Display popup on page load</title>
<link rel="stylesheet" href="swc.css">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div class="maintext">
<h2>www.sanwebcorner.com</h2>
</div>
<div id="boxes">
<div style="top: 50%; left: 50%; display: none;" id="dialog" class="window">
<div id="san">
<a href="#" class="close agree"><img src="close-icon.png" width="25" style="float:right; margin-right: -25px; margin-top: -67px;"></a>


<div class="form-body-w3l">
<form method="post" action="mail1.php">
<div class="user-text-w3ls">
<div class="w3ls-user">
<label>Fullname</label><br>
<input type="text" placeholder="NAME" name="name" required="required">
<span class="icon2"><i class="fa fa-user" aria-hidden="true"></i></span>
</div>
<div class="w3ls-password">
<label>Contact Number</label><br>
<input type="text" placeholder="CONTACT NUMBER" name="contactnumber" required="required">
<span class="icon3"><i class="fa fa-mobile" aria-hidden="true" style="    font-size: 22px;"></i></span>
</div>
<div class="clear"></div>
</div>
<div class="email-w3ls">
<label>Your e-mail</label><br>
<input type="email" placeholder="E-MAIL"  name="emailid" required="required">
<span class="icon1"><i class="fa fa-envelope" aria-hidden="true"></i></span>
</div>
<input type="submit" name="submit"  value="Signup">
</form>
</div>
</div>
</div>
<div style="width: 2478px; font-size: 32pt; color:white; height: 1202px; display: none; opacity: 0.4;" id="mask"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script src="swc.js"></script>
</body>
</html>


Php File to Send the form information to the particular Email:

 <?php
if(isset($_POST['submit'])){
    $to = "admin@sanwebcorner.com";
    $from = "admin@sanwebcorner.com";
    $name = $_POST['name'];
    $mobile = $_POST['contactnumber'];
    $email = $_POST['emailid'];
    $subject = "New Enquiry From Website";
    $message = " \n\n Name:".$name ."\n\n  Email : " . $email ."\n\n Mobile :".$mobile."\n\n" ;
    $headers2 = "Feedback From Website: " . $email;
    mail($to,$subject,$message,$headers2);
echo '<script>alert("Thanks for Sign up...");</script>';
echo '<script>location.href = "http://rcdcindia.com/race-on-the%20international-tracks/"</script>';
    }
?>


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>