professional web site design for you

I will create a professional web site design for you 

Im a Web Designer and Developer with over 7 Years of Experience. 
Please check more details about me on my LinkedIn - https://www.linkedin.com/in/thilankadesilva/
Contact me for HTML CSS issue or PSD TO HTML

A Good Looking Professional Web Site. 

A Static 5 Page minimalist custom website for Anyone in USA
Using HTML 5 CSS 3 Jquery and Bootstrap 4
Basic Website design
Personal Website or Small Business Web site Includes (Everything you need :) )
Simple website design
Slide Show
Image Gallery
SEO Friendly
Contact From
Design Customization on request
Customize the color scheme and layout on requestResponsive Design - Mobile web siteInclude Source Code

Feel free to contact before you order. -affordable rates

Please send all the content (text, logo and images ) for the web site within the first day to begin the work and complete on time.

share facebook youtube video on my 50,000 fans fb page

I will share your Facebook Video or YouTube video to my 51000 main Facebook page and other mini pages. I will share your link for 5 times within 2 days in my pages. 

Number of social shares from high authority pages will help to rank your video higher (Video SEO) on search engines and more engagements plus reach.

My facebook page has real and active fans. 

I will test review your web site for SEO speed performance design

In this Website QA gig i will do a deep testing for your web site. I will review your site for Performance | Best Practices | Accessibility | SEO.

Why me ? Im a Web Designer and Developer with over 7 Years of Experience.

Web site Testing will Includes

Web Developer Testing - SEO Testing, Page Performance , Speed Testing , Web Page Size  
Website User Testing -  Accessibility Test, Usability Check, Spelling Check
Web Design Testing - Responsive Web Test , Mobile Design Test
CSS HTML Bug Fix / CSS HTML Error Fixing (Extra Service)
Mobile Responsive Issue Fix (Extra Service)

I will send you a report and advice how to fix the issue on your web site.

by this gig you can improve and optimize your website SEO, Loading time and User Experience.

Hiding a div on IE 6 , 7, 8

Hiding a Writing a style specifically for Internet explorer IE 6 ,7, 8

Add this code to header tag

    <!--[if IE 6]>
    <style>#dl-menu{display: none;}</style>
    <![endif]-->
    <!--[if IE 7]>
    <style>#dl-menu{display: none;}</style>
    <![endif]-->
    <!--[if IE 8]>
    <style>#dl-menu{display: none;}</style>
    <![endif]-->

Keith Count down with server time

Keith jQuery Count down time working with server time with Ajax

Javascript  code

<script>
function serverTime() { 
    var time = null; 
    $.ajax({url: 'serverTime.php', 
        async: false, dataType: 'text', 
        success: function(text) { 
            time = new Date(text); 
        }, error: function(http, message, exc) { 
            time = new Date(); 
    }}); 
    return time; 
}

 $(document).ready(function () {
 
 
 
    $('#120').countdown({
        until: new Date(2014, 03 - 1, 30),
        format: 'DHMS',
  serverSync: serverTime
    });
});
</script>

PHP file

<?php
$now = new DateTime(null, new DateTimeZone('Asia/Kolkata'));
echo $now->format("M j, Y H:i:s O")."\n";
?>

Jquery Change width and height on scroll - page elements

<!--CSS change on Scroll-->
 <script>
     $(window).scroll(function () {
  //if($(".toggleMenu").css("display") == "none"){  --> condition for mobile
            if ($(this).scrollTop() > 100) {
                $('.lgo').css({width:'90px'});
                $('.mm').css({margin:'5px 10px'});
            } else {
                $('.lgo').css({width:'140px'});
                $('.mm').css({margin:'15px 10px'});
            //}
   }        
  });
 </script>

If Else for Jquery Example

<script>
$(document).ready(function(){

 // hide #back-top first
 $("#back-top").hide();
 
 // fade in #back-top
 $(function () {
  $(window).scroll(function () {
   if ($(this).scrollTop() > 100) {
    $('#back-top').fadeIn();
   } else {
    $('#back-top').fadeOut();
   }
  });

  // scroll body to 0px on click
  $('#back-top').click(function () {
   $('body,html').animate({
    scrollTop: 0
   }, 800);
   return false;
  });
 });

});
</script> 

World's simplest background parallax effect

How to apply the World's simplest background parallax effect to you web site background image for the scroll function.

$(window).scroll(function() {
    var x = $(this).scrollTop();
    $('#slide5').css('background-position', '100% ' + parseInt(-x / 3.5) + 'px' + ', 0% ' + parseInt(-x / 5) + 'px');
});

Using Readmore JS correctly

<script src="js/readmore.min.js"></script>
<script>
  $('.manage2').readmore({
    maxHeight: 100
  });
 
  // Wait a tick before firing Readmore on the #info block to give Prettify time to finish painting.
  setTimeout(function() {
    $('.manage2').readmore({
      moreLink: '<a href="#" style="color:#4a89dc">Read More</a>',
lessLink: '<a href="#" class="managename" style="color:#4a89dc">Close</a>',
      maxHeight: 100,
      afterToggle: function(trigger, element, more) {
        if(! more) { // The "Close" link was clicked
          $('html, body').animate( { scrollTop: element.offset().top }, {duration: 100 } );
        }
      }
    });
  }, 100);
</script>
<!---Read more codeEND-->

CSS3 transform code on hover

#logo:hover{
-moz-transform: scale(1) rotate(4deg) translate(0px, 0px) skew(0deg, -4deg);
-webkit-transform: scale(1) rotate(4deg) translate(0px, 0px) skew(0deg, -4deg);
-o-transform: scale(1) rotate(4deg) translate(0px, 0px) skew(0deg, -4deg);
-ms-transform: scale(1) rotate(4deg) translate(0px, 0px) skew(0deg, -4deg);
transform: scale(1) rotate(4deg) translate(0px, 0px) skew(0deg, -4deg);
}

Stop repeating Jquery animation SlideDown or SlideUp

How to stop repeating of Jquery animation SlideDown or SlideUp animation when you have repeating div classesor id with the same name in single web page. This code will work only for the next div tag with the similar name

<script>
$(document).ready(function() {
    $('.but1').on('click', function() {
        $(this).siblings('.carea').slideToggle(300);
    }); });
</script>

facebox pop up image on load with a a link

Step 1

Load facebox

  <link href="src/facebox.css" media="screen" rel="stylesheet" type="text/css" />
  <script src="src/jquery.js" type="text/javascript"></script>
  <script src="src/facebox.js" type="text/javascript"></script>
  <script type="text/javascript">
    jQuery(document).ready(function($) {
      $('a[rel*=facebox]').facebox({
        loadingImage : 'src/loading.gif',
        closeImage   : 'src/closelabel.png'
      })
    })
  </script>

Step 2

Writing th efunction tp pop up an image with a link on page load

<script language="javascript">
$(document).ready(function() {
    $.facebox.settings.opacity = 0.9;
    $('a[rel*=facebox]').facebox();
    $.facebox('<a href="http://abc.lk" target="blank"><img src="src/offer.jpg"></a>');

});
</script>

Hide div on Scroll Down

Hide div on Scrolling on web page with JQuery and shows back when scroll top of the page

        $(window).scroll(function () {
            if ($(this).scrollTop() > 200) {
                $('.bread').fadeOut();
            } else {
                $('.bread').fadeIn();
            }
        });

Add a class on click to a link

Add a class on click to a link and remove the class when clicking another link with JQuery

    <script>   
//to add class on active
    $("a").click(function(){
   $("a.active").removeClass("active");
   $(this).addClass("active");
    });
    </script>

360 Rotate on hover

Code on element

   -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    -ms-transition-property: -ms-transform;

Code on hover

-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);

Gray scale your images with CSS 3

How to gray scale your images with CSS 3, without using photoshop. You can use this code with CSS mouse over hover effect. or to grayscale the images direclty on your web page


.grayimg:hover
{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
 filter: gray; 
-webkit-filter: grayscale(100%); 
}

jquery animate div one after another

jquery animate div one after another

HTML code

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup,
  menu, nav, section { display: block; }
 
  div.test {width: 100px; height: 100px; background-color: red; display: none;}
</style>
</head>
<body>
  <div class="test"></div>
  <div class="test"></div>
  <div class="test"></div>
  <div class="test"></div>
  <div class="test"></div>
</body>
</html>

JQuery

(function($){
  $.fn.showdelay = function(){
    var delay = 0;
    return this.each(function(){
      $(this).delay(delay).fadeIn(1800);
      delay += 200;
    });
  };
})(jQuery);

$(document).ready(function(){
  $('div').showdelay();
});

jquery on hover change css another element

jquery on hover change or add css of another element and remove

JQuery on hover changing CSS of another element - div or class - and remove the CSS when mouse left the element - simple code

     <script>
            $(document).ready(function () {
                $('.manage').hover(function () {
                    $('.topdes1').css('top', '0px');
                }, function () {
                    $('.topdes1').css('top', '140px');
                });
            });
    </script>

Option 2 : Avoid the repeating of hover when you have more than one div tags in same name.

TAG : jquery outer div hover change css in inner div

    <script>
            $(document).ready(function () {
                $('.manage',this).hover(function () {
                    $('.topdes1',this).css('top', '0px');
                }, function () {
                    $('.topdes1').css('top', '140px');
                });
            });
    </script>

Smooth Scrolling on A Name tags in one page web site

JQuery Smooth Scrolling on A Name tags in one page web site. You can add the link to navigate between DIV sections in single page web site.

Link :

<li data-slide="4"><a href="index.html#slide4" >About</a></li>

Target ( on same page) :

<div class="slide" id="slide4" data-slide="4" data-stellar-background-ratio="0.5">
</div>

Code ( on header section ) :
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
</script>

CSS Transition code for All Properties

Here is the default CSS3 Transition properties to animate the div elements ot the images ( with cross browser prefix ) this will apply to all attributes ( Background, color, with, height, whatever...)

.effect {
  -moz-transition: all 0.2s ease; /* FF3.7+ */
  -o-transition: all 0.2s ease; /* Opera 10.5 */
  -webkit-transition: all 0.2s ease; /* Saf3.2+, Chrome */
  transition: all 0.2s ease;
}