Monday, January 30, 2017

CSS3 image and text hover effects

                No comments   

Intoduction :-
Hii Friends... 

 Today I explain how to make  CSS3 image hover effects. On the modern web there are so many techniques that can be used to create interesting interactions, but the simplest and most easy is use CSS, and specifically the additions that came with CSS3. It gives us beautiful animation and transitions or image effects.

Demo :-


Hover Effect
img12

DotNet Modules

This is a Plateform, Of new ideas and Interesting modules.
Example :- 

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <title>Hover Effect</title>
    <style>
        .grid figure
        {
            position: relative;
            float: left;
            overflow: hidden;
            margin: 10px 1%;
            min-width: 320px;
            max-width: 480px;
            max-height: 360px;
            width: 48%;
            background: #3085a3;
            text-align: center;
        }
        .grid figure figcaption
        {
            padding: 2em;
            color: #fff;
            text-transform: uppercase;
            font-size: 1.25em;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        .grid figure p
        {
            letter-spacing: 1px;
            font-size: 68.5%;
        }
        figure.effect-marley figcaption
        {
            text-align: right;
        }
        figure.effect-marley h2, figure.effect-marley p
        {
            position: absolute;
            right: 30px;
            left: 30px;
            padding: 10px 0;
        }
        figure.effect-marley p
        {
            bottom: 30px;
            line-height: 1.5;
            -webkit-transform: translate3d(0,100%,0);
            transform: translate3d(0,100%,0);
        }
        figure.effect-marley h2
        {
            top: 30px;
            -webkit-transition: -webkit-transform 0.35s;
            transition: transform 0.35s;
            -webkit-transform: translate3d(0,20px,0);
            transform: translate3d(0,20px,0);
        }
        figure.effect-marley:hover h2
        {
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }
        figure.effect-marley h2::after
        {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: 4px;
            background: #fff;
            content: '';
            -webkit-transform: translate3d(0,40px,0);
            transform: translate3d(0,40px,0);
        }
        figure.effect-marley h2::after, figure.effect-marley p
        {
            opacity: 0;
            -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
            transition: opacity 0.35s, transform 0.35s;
        }
        figure.effect-marley:hover h2::after, figure.effect-marley:hover p
        {
            opacity: 1;
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            <div class="grid">
                <figure class="effect-marley">
                        <img src="img/12.jpg" alt="img12"/>
                        <figcaption>
                            <h2>DotNet <span>Modules</span></h2>
                            <p>This is a Plateform, Of new ideas and Interesting modules.</p>
                        </figcaption>           
                    </figure>
            </div>
        </div>
</body>
</html>

Saturday, January 28, 2017

CSS3 image hover effects

                No comments   


Intoduction :-
Hii Friends... 

 Today I explain how to make  CSS3 image hover effects. On the modern web there are so many techniques that can be used to create interesting interactions, but the simplest and most easy is use CSS, and specifically the additions that came with CSS3. It gives us beautiful animation and transitions or image effects.

Demo :-

Hover Effect
img03

DotNet Modules

This is a Plateform, Of new ideas friends.
Example :- 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hover Effect</title>
  <style>
 
  .grid figure {
    position: relative;
    float: left;
    overflow: hidden;
    margin: 10px 1%;
    min-width: 320px;
    max-width: 480px;
    max-height: 360px;
    width: 48%;
    background: #3085a3;
    text-align: center;
    cursor: pointer;
}

.grid figure figcaption {
    padding: 2em;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.grid figure figcaption,
.grid figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.grid figure p {
    letter-spacing: 1px;
    font-size: 68.5%;
}

figure.effect-layla {
    background: #18a367;
}

figure.effect-layla img {
    height: 390px;
}

figure.effect-layla figcaption {
    padding: 3em;
}

figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after {
    position: absolute;
    content: '';
    opacity: 0;
}

figure.effect-layla figcaption::before {
    top: 50px;
    right: 30px;
    bottom: 50px;
    left: 30px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0,1);
    transform: scale(0,1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

figure.effect-layla figcaption::after {
    top: 30px;
    right: 50px;
    bottom: 30px;
    left: 50px;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1,0);
    transform: scale(1,0);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
}

figure.effect-layla h2 {
    padding-top: 26%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}

figure.effect-layla p {
    padding: 0.5em 2em;
    text-transform: none;
    opacity: 0;
    -webkit-transform: translate3d(0,-10px,0);
    transform: translate3d(0,-10px,0);
}

figure.effect-layla img,
figure.effect-layla h2 {
    -webkit-transform: translate3d(0,-30px,0);
    transform: translate3d(0,-30px,0);
}

figure.effect-layla img,
figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after,
figure.effect-layla p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-layla:hover img {
    opacity: 0.7;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-layla:hover figcaption::before,
figure.effect-layla:hover figcaption::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

figure.effect-layla:hover h2,
figure.effect-layla:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { display: table; content: ''; }
.clearfix:after { clear: both; }
.content {
    margin: 0 auto;
    max-width: 1000px;
}
 
  </style>
</head>
<body>
    <div class="container">
        <div class="content">
            <div class="grid">
                <figure class="effect-layla">
                        <img src="img/3.jpg" alt="img03"/>
                        <figcaption>
                            <h2>DotNet <span>Modules</span></h2>
                            <p>This is a Plateform, Of new ideas friends.</p>
                      
                        </figcaption>          
                    </figure>
            </div>
        </div>
    </div>
</body>
</html> 

Wednesday, January 25, 2017

jQuery image slider with three panels and 3D look

                No comments   

Intoduction :-
Hii Friends... 

 Today I explain How To make jQuery image slider with three panels and 3D look,
If you are a web designer or developer you are already aware of how to work jQuery
and CSS. CSS3 and jQuery have smart changes in web development. you Want to animate images or texts then you can easily with the help of Jquery and css3. For this I use animated hover effects,elastic effects, buttons with built-in progress bars,light boxes, image gallery effects, text effects and zoom-in effects.

Demo :-

Example :- 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Welcome On DotNetModules</title>
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300|Prata'
        rel='stylesheet' type='text/css' />
    <script type="text/javascript" src="js/modernizr.custom.26887.js"></script>
    <noscript>
        <link rel="stylesheet" type="text/css" href="css/noscript.css" />
    </noscript>
</head>
<body>
    <div class="container">
        <div class="main">
            <div class="fs-slider" id="fs-slider">
                <figure>
                        <img src="images/1.jpg" alt="image01" />
                        <figcaption>
                            <h3>Lorem Ipsum</h3>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                        </figcaption>
                    </figure>
                <figure>
                        <img src="images/2.jpg" alt="image02" />
                        <figcaption>
                            <h3>Lorem Ipsum</h3>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                        </figcaption>
                    </figure>
                <figure>
                        <img src="images/3.jpg" alt="image03" />
                        <figcaption>
                            <h3>Lorem Ipsum</h3>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                        </figcaption>
                    </figure>
                <figure>
                        <img src="images/4.jpg" alt="image04" />
                        <figcaption>
                            <h3>Lorem Ipsum</h3>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                        </figcaption>
                    </figure>
                <figure>
                        <img src="images/5.jpg" alt="image05" />
                        <figcaption>
                            <h3>Lorem Ipsum</h3>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                        </figcaption>
                    </figure>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.imgslider.js"></script>
    <script type="text/javascript">
        $(function () {

            $('#fs-slider').imgslider();

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

Dear friends if you need this code. I will provide you Zip. Put your EmailId in comment box.

Wednesday, January 18, 2017

How to get all tables, Procedures, triggers, objects name in SQL server

                No comments   

Intoduction :-
Hii Friends...

This is an easy way to find tables, procedures, triggers which was made by you or your friends and you don't know the table or procedures name then you can simply fire below queries
with remember name like if your table name is tbl_Employee and procedure name is proc_ManageEmployee and trigger name is tgr_updateEmployee then you can fire query like below queries

 1. for tables :  select * from sys.tables where name like '%Employee%'
you will get tbl_Employee  as result.
2. for procedures :  select * from sys.procedures where name like '%Employee%'

you will get proc_ManageEmployee as result.
3. for triggers :  select * from sys.triggers where name like '%Employee%'

you will get tgr_updateEmployee as result.

 you can also put your own condition with these conditions like AND Id > 10 OR Mobile=123456789

 Thank You !

Monday, January 9, 2017

How To scroll from bottom to top

                1 comment   

Intoduction :-
Hii Friends... 

Today I explain How To scroll from top to bottom and bottom to top, we use “scrollTop” function of jquery. In order to make the Scroll to Bottom action smooth,
jQuery animation has been used. The jQuery scrollTop property is used to set the position of the browser Scrollbar. The page is scrolled to Top or Bottom position
by setting the scrollTop property.Through this button, we can back to the top section from the bottom section of the web page without manual page scrolling.


Example :-
<img src="img/BackToTopArrow.png" class="on-click-scroll-page-image" title="Go To Top" />


<style>
.on-click-scroll-page-image
        {
            max-width:50px;
            position:fixed;
            cursor:pointer;
            bottom:5px;
            right:5px;
            display:none;
        }

</style>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>

        $(document).ready(function () {
            $(window).scroll(function () {
                if ($(window).scrollTop() > 10) {
                    $('.on-click-scroll-page-image').show();
                }
                else {
                    $('.on-click-scroll-page-image').hide();
                }
            });
            $('.on-click-scroll-page-image').click(function () {  
                    $("html, body").animate({ scrollTop: 0 }, 600);
                    return false;
                         });
        });

    </script>

Wednesday, November 2, 2016

Border Style

                No comments   

Intoduction :- 
Hii Friends...
Today I am going to explain a new css style, actually its a part of css3. Css3 is the extended version of css. In css3 its has multiple types of borders, So i am going to introduces a border style.
DEMO:-

Hello Welcome to DotNet Modules



Example :-
<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
#para{
 text-align:center;
 padding:20px;
 width:340px;
 margin: 0 auto;

 /* Set the border and border image properties */
 border:30px solid transparent;
 border-image:url(img/border.png) 30 30 round;
}

</style>

<br />
<div id="para">
Hello Welcome to DotNet Modules</div>
</div> 

Thursday, September 22, 2016

How to make Testimonial Slider

                No comments   

Intoduction :-
Hii Friends...
Today I explain how to make a bootstrap Testimonial Slider. Testimonial is a formal statement testifying to someone's character and qualifications. A Testimonial or show consists of a person's written or spoken statement extolling the virtue of a product.

HTML & CSS Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

    <style>
    .carousel-control.left,.carousel-control.right  {background:none;width:25px;}
.carousel-control.left {left:-25px;}
.carousel-control.right {right:-25px;}
.broun-block {
    background: url("http://myinstantcms.ru/images/bg-broun1.jpg") repeat scroll center top rgba(0, 0, 0, 0);
    padding-bottom: 34px;
}
.block-text {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 3px 0 #2c2222;
    color: #626262;
    font-size: 14px;
    margin-top: 27px;
    padding: 15px 18px;
}
.block-text a {
 color: #7d4702;
    font-size: 25px;
    font-weight: bold;
    line-height: 21px;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.mark {
    padding: 12px 0;background:none;
}
.block-text p {
    color: #585858;
    font-family: Georgia;
    font-style: italic;
    line-height: 20px;
}

.sprite-i-triangle {
    background-position: 0 -1298px;
    height: 44px;
    width: 50px;
}
.block-text ins {
    bottom: -44px;
    left: 50%;
    margin-left: -60px;
}


.block {
    display: block;
}
.zmin {
    z-index: 1;
}
.ab {
    position: absolute;
}

.person-text {
    padding: 10px 0 0;
    text-align: center;
    z-index: 2;
}
.person-text a {
    color: #ffcc00;
    display: block;
    font-size: 14px;
    margin-top: 3px;
    text-decoration: underline;
}
.person-text i {
    color: #fff;
    font-family: Georgia;
    font-size: 13px;
}
.rel {
    position: relative;
}
  
    </style>

</head>
<body>
    <form id="form1" runat="server">
    <div>
  
<div class="carousel-reviews broun-block">
    <div class="container">
        <div class="row">
            <div id="carousel-reviews" class="carousel slide" data-ride="carousel">
          
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="col-md-4 col-sm-6">
                            <div class="block-text rel zmin">
                                <a title="" href="#">Sheetal</a>
                                <div class="mark">My rating: <span class="rating-input"><span data-value="0" class="glyphicon glyphicon-star"></span><span data-value="1" class="glyphicon glyphicon-star"></span><span data-value="2" class="glyphicon glyphicon-star"></span><span data-value="3" class="glyphicon glyphicon-star"></span><span data-value="4" class="glyphicon glyphicon-star-empty"></span><span data-value="5" class="glyphicon glyphicon-star-empty"></span>  </span></div>
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</p>
                                <ins class="ab zmin sprite sprite-i-triangle block"></ins>
                            </div>
                            <div class="person-text rel">
                                <img src="https://media.licdn.com/mpr/mpr/shrink_100_100/AAEAAQAAAAAAAAf_AAAAJGQ4NWEyZmUwLWEyNTgtNDJmMC04OWQ1LWRiZDQwNjRkOTAzMQ.jpg" style="border-radius: 50px;"/>
                                <a title="" href="#">Sheetal</a>
                                <i>from Bharatpur</i>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 hidden-xs">
                            <div class="block-text rel zmin">
                                <a title="" href="#">Deepika</a>
                                <div class="mark">My rating: <span class="rating-input"><span data-value="0" class="glyphicon glyphicon-star"></span><span data-value="1" class="glyphicon glyphicon-star"></span><span data-value="2" class="glyphicon glyphicon-star-empty"></span><span data-value="3" class="glyphicon glyphicon-star-empty"></span><span data-value="4" class="glyphicon glyphicon-star-empty"></span><span data-value="5" class="glyphicon glyphicon-star-empty"></span>  </span></div>
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</p>
                                <ins class="ab zmin sprite sprite-i-triangle block"></ins>
                            </div>
                            <div class="person-text rel">
                                <img style="border-radius: 50px;" src="https://yt3.ggpht.com/-_lPdJSkjvkg/AAAAAAAAAAI/AAAAAAAAAAA/qmSPcvl81E0/s100-c-k-no-rj-c0xffffff/photo.jpg"/>
                                <a title="" href="#">Deepika</a>
                                <i>United States</i>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 hidden-sm hidden-xs">
                            <div class="block-text rel zmin">
                                <a title="" href="#">Jorge</a>
                                <div class="mark">My rating: <span class="rating-input"><span data-value="0" class="glyphicon glyphicon-star"></span><span data-value="1" class="glyphicon glyphicon-star"></span><span data-value="2" class="glyphicon glyphicon-star"></span><span data-value="3" class="glyphicon glyphicon-star"></span><span data-value="4" class="glyphicon glyphicon-star"></span><span data-value="5" class="glyphicon glyphicon-star"></span>  </span></div>
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</p>
                                <ins class="ab zmin sprite sprite-i-triangle block"></ins>
                            </div>
                            <div class="person-text rel">
                                <img style="height: 100px; border-radius: 50px;" src="https://pbs.twimg.com/profile_images/555227960026746880/0tqN73Qj_400x400.jpeg"/>
                                <a title="" href="#">Jorge</a>
                                <i>Indonesia</i>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-md-4 col-sm-6">
                            <div class="block-text rel zmin">
                                <a title="" href="#">Denim</a>
                                <div class="mark">My rating: <span class="rating-input"><span data-value="0" class="glyphicon glyphicon-star"></span><span data-value="1" class="glyphicon glyphicon-star"></span><span data-value="2" class="glyphicon glyphicon-star"></span><span data-value="3" class="glyphicon glyphicon-star"></span><span data-value="4" class="glyphicon glyphicon-star-empty"></span><span data-value="5" class="glyphicon glyphicon-star-empty"></span>  </span></div>
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</p>
                                <ins class="ab zmin sprite sprite-i-triangle block"></ins>
                            </div>
                            <div class="person-text rel">
                                <img src="https://media.licdn.com/mpr/mpr/shrink_100_100/AAEAAQAAAAAAAAf_AAAAJGQ4NWEyZmUwLWEyNTgtNDJmMC04OWQ1LWRiZDQwNjRkOTAzMQ.jpg" style="border-radius: 50px;"/>
                              
                                <a title="" href="#">Denim</a>
                                <i>from Glasgow, Scotland</i>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 hidden-xs">
                            <div class="block-text rel zmin">
                                <a title="" href="#">Spedd</a>
                                <div class="mark">My rating: <span class="rating-input"><span data-value="0" class="glyphicon glyphicon-star"></span><span data-value="1" class="glyphicon glyphicon-star"></span><span data-value="2" class="glyphicon glyphicon-star-empty"></span><span data-value="3" class="glyphicon glyphicon-star-empty"></span><span data-value="4" class="glyphicon glyphicon-star-empty"></span><span data-value="5" class="glyphicon glyphicon-star-empty"></span>  </span></div>
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</p>
                                <ins class="ab zmin sprite sprite-i-triangle block"></ins>
                            </div>
                            <div class="person-text rel">
                                <img style="border-radius: 50px;" alt="" src="https://yt3.ggpht.com/-_lPdJSkjvkg/AAAAAAAAAAI/AAAAAAAAAAA/qmSPcvl81E0/s100-c-k-no-rj-c0xffffff/photo.jpg">
                                <a title="" href="#">Spedd</a>
                                <i>United States</i>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 hidden-sm hidden-xs">
                            <div class="block-text rel zmin">
                                <a title="" href="#">Firrll</a>
                                <div class="mark">My rating: <span class="rating-input"><span data-value="0" class="glyphicon glyphicon-star"></span><span data-value="1" class="glyphicon glyphicon-star"></span><span data-value="2" class="glyphicon glyphicon-star"></span><span data-value="3" class="glyphicon glyphicon-star"></span><span data-value="4" class="glyphicon glyphicon-star"></span><span data-value="5" class="glyphicon glyphicon-star"></span>  </span></div>
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</p>
                                <ins class="ab zmin sprite sprite-i-triangle block"></ins>
                            </div>
                            <div class="person-text rel">
                                <img style="height: 100px; border-radius: 50px;" alt="" src="https://pbs.twimg.com/profile_images/555227960026746880/0tqN73Qj_400x400.jpeg">
                                <a title="" href="#">Firrll</a>
                                <i>Indonesia</i>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-md-4 col-sm-6">
                            <div class="block-text rel zmin">
                                <a title="" href="#">Sheetal</a>
                                <div class="mark">My rating: <span class="rating-input"><span data-value="0" class="glyphicon glyphicon-star"></span><span data-value="1" class="glyphicon glyphicon-star"></span><span data-value="2" class="glyphicon glyphicon-star"></span><span data-value="3" class="glyphicon glyphicon-star"></span><span data-value="4" class="glyphicon glyphicon-star-empty"></span><span data-value="5" class="glyphicon glyphicon-star-empty"></span>  </span></div>
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</p>
                                <ins class="ab zmin sprite sprite-i-triangle block"></ins>
                            </div>
                            <div class="person-text rel">
                            <img style="height: 100px; border-radius: 50px;" src="https://pbs.twimg.com/profile_images/555227960026746880/0tqN73Qj_400x400.jpeg"/>
                                <a title="" href="#">Sheetal</a>
                                <i>from Glasgow, Scotland</i>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 hidden-xs">
                            <div class="block-text rel zmin">
                                <a title="" href="#">Angel</a>
                                <div class="mark">My rating: <span class="rating-input"><span data-value="0" class="glyphicon glyphicon-star"></span><span data-value="1" class="glyphicon glyphicon-star"></span><span data-value="2" class="glyphicon glyphicon-star-empty"></span><span data-value="3" class="glyphicon glyphicon-star-empty"></span><span data-value="4" class="glyphicon glyphicon-star-empty"></span><span data-value="5" class="glyphicon glyphicon-star-empty"></span>  </span></div>
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</p>
                                <ins class="ab zmin sprite sprite-i-triangle block"></ins>
                            </div>
                            <div class="person-text rel">
                                <img style="height: 100px; border-radius: 50px;" src="https://pbs.twimg.com/profile_images/555227960026746880/0tqN73Qj_400x400.jpeg"/>
                                <a title="" href="#">Angel</a>
                                <i>United States</i>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 hidden-sm hidden-xs">
                            <div class="block-text rel zmin">
                                <a title="" href="#">Denim</a>
                                <div class="mark">My rating: <span class="rating-input"><span data-value="0" class="glyphicon glyphicon-star"></span><span data-value="1" class="glyphicon glyphicon-star"></span><span data-value="2" class="glyphicon glyphicon-star"></span><span data-value="3" class="glyphicon glyphicon-star"></span><span data-value="4" class="glyphicon glyphicon-star"></span><span data-value="5" class="glyphicon glyphicon-star"></span>  </span></div>
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</p>
                                <ins class="ab zmin sprite sprite-i-triangle block"></ins>
                            </div>
                            <div class="person-text rel">
                                <img style="height: 100px; border-radius: 50px;" src="https://pbs.twimg.com/profile_images/555227960026746880/0tqN73Qj_400x400.jpeg"/>
                                <a title="" href="#">Denim</a>
                                <i>Indonesia</i>
                            </div>
                        </div>
                    </div>                  
                </div>
                <a class="left carousel-control" href="#carousel-reviews" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#carousel-reviews" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>
        </div>
    </div>
</div>
    </div>
    </form>
</body>
</html>

Popular Posts

  • How to make color picker
    Intoduction :-   Hii Friends... Today i going to put a very interesting module i.e how to make a color picker module. Its very interesti...
  • Angular Directives
    Intoduction :-   Hii Friends... Today I explain about Angular Directives.  1) Angular JS use new attribute i.e called Directives. 2)...
  • Bounce a circle with Css
    Intoduction :-   Hii Friends... Today I explain how to make a bouncing circle with the help of css.  DEMO:- ...
  • Bootstrap Model
      Intoduction :-   Hii Friends... Today I explain how to make a bootstrap model in asp.net . Its not so complicated its easy. here som...
  • Angular Js Introduction
    Intoduction :-   Hii Friends... Today I explain about angular js. Angular js is a part of javascript but its extended. 1 ) AngularJS ...
  • How To Make Semi-Transparent Buttons
    Intoduction :-   Hii Friends...   Today I explain how to make Semi-Transparent Buttons with the help of css. This style now a days goes t...
  • Border style in css
    Introduction :- Hii Friends... Today I explain how to make many types of borders in asp.net with the help of css. so now I explain this...
  • css Hovering Bounce
    Intoduction :-   Hii Friends... Today I explain how to make css hovering fill circle  boundary with images bounce . hover selector is us...
  • jQuery image slider with three panels and 3D look
    Intoduction :- Hii Friends...   Today I explain How To make jQuery image slider with three panels and 3D look, If you are a web designe...
  • How To Make A Calculator In Html
    Intoduction :- Hii Friends... Today I explain how to make a calculator with html. So here i explain this step by step. Step : 1    Th...