Sunday, June 5, 2016

My Projects

                No comments   

List of my projects

About Myself

                No comments   

Hey, this is my homepage, so I have to say something about myself. Sometimes it is hard to  introduce yourself because you know yourself so well that you do not know where to start with. Let me give a try to see what kind of image you have about me through my self-description. I hope that my impression about myself and your impression about me are not so different. Here it goes.

  • I'm Sheetal Khandelwal.
  • I'm from Bharatpur.
  • I've done my schooling from Govt.Sr.Secondary School at Bharatpur and secure 80% in 10th and78% in 12th.
  • And I completed my Btech from Poornima Institute of Engineering & technology from Jaipur in computer science and secure 75% aggargate.
  • I started carrier from Cyrus technoedge pvt ltd jaipur as Software developer so till date I had 1 year experience.
  • My Strength is positive attitude towards career and my life, Hard Working until reaching the goal & self-confidence, My weakness is I can't say to no easily to anyone.
  • And my hobbies are listening music & Gardening.

I am a person who is positive about every aspect of life. There are many things I like to do, to see, and to experience.

  1. I love myself. I am unique.
  2. I can and I will do things to promote healing in my life.
  3. I can handle this one step at a time.
  4. The sun is shining; I am ready to take on another day.
  5. My problem has a solution; I will work on a plan.
  6. I refuse to give up because I haven’t tried all possible ways.
  7. I will inhale confidence and exhale doubt.
  8. Today, I will celebrate me. I matter.
  9. I can find peace through prayer and meditation.
  10. I am strong. My confidence is beautiful.
  11. I am imperfect but I’m perfectly me.
  12. I am special; I will not change myself for anyone.
  13. The answer is right before me, even if I do not see it right now.
  14. I am awake and ready to be awesome.
  15. I release myself from my anger.
  16. Today is a new day; I will see what adventure it holds.
  17. I will speak kindly to others and to myself.
  18. I have the power to control my reactions to the challenges I will face.
  19. I choose to see each obstacle as an opportunity to grow.
  20. I will step out of my comfort zone and try something new today.
  21. I can reach my goals, I am unstoppable.
  22. My hard work is already paying off.
  23. Yesterday was a bad day, not a bad life. Today will be better.
  24. I will remember; often difficult roads lead to beautiful destinations.
  25. There is more to life than this moment; I choose to keep moving forward.
  26. I am capable of bringing my dreams to life.
  27. I will learn from yesterday, live for today and hope for tomorrow.

Friday, May 27, 2016

css box sliding style on hover

                No comments   

Intoduction :- 
Hii Friends...
Have you ever wanted to use your own style in  your website ?  you create your own stylish div with 3D look. This script will let you do that  Easily.This can possible with the help of css . This works flawlessly in Firefox, Safari, Internet Explorer 7, Opera and others.So go ahead, CSS form styling is this easy. Now  I am going to put this with Example.
DEMO:-

Dot Net Modules


Welcome On Asp.net modules. This is my blog and I am Sheetal Khandelwal. It's a css Box with a new creative style. Enjoy.. :) :)

Dot Net Modules


Welcome On Asp.net modules. This is my blog and I am Sheetal Khandelwal. It's a css Box with a new creative style. Enjoy.. :) :)


Example :-
<div class="coat">
    <div class="left_barrier">
    </div>
    <div class="right_barrier">
    </div>
    <h1>
        Dot Net Modules</h1>
    <img style="border:solid 2px rgb(36, 159, 163);" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhriHfw8KtedIOQ1MQwCVDUdBEtTB7K11-LVZaA9IPxJ1op4wjjue14yF5t3M0akFrTrkosTqywM6QDePPjkK06ALp-zfukLsrPKp7Od0Lx4kTyVGhujfPX2lJWbCspz1lkZ2R-FWoZ44Q/s1600-r/dotnetnew.png">
    <p>
        Welcome On Asp.net modules. This is my blog and I am Sheetal Khandelwal. It's a css Box with a new creative style. Enjoy.. :) :)
    </p>
</div>
<div class="coat slide_in">
    <div class="left_barrier">
    </div>
    <div class="right_barrier">
    </div>
    <h1>
        Dot Net Modules</h1>
    <img style="border:solid 2px rgb(36, 159, 163);" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhriHfw8KtedIOQ1MQwCVDUdBEtTB7K11-LVZaA9IPxJ1op4wjjue14yF5t3M0akFrTrkosTqywM6QDePPjkK06ALp-zfukLsrPKp7Od0Lx4kTyVGhujfPX2lJWbCspz1lkZ2R-FWoZ44Q/s1600-r/dotnetnew.png">
    <p>
        Welcome On Asp.net modules. This is my blog and I am Sheetal Khandelwal. It's a css Box with a new creative style. Enjoy.. :) :)
    </p>
</div>
<style>
    body
    {
        font-size: 12px;
        font-family: 'Open Sans' , sans-serif;
        color: #4A4A4A;
        text-align: center;
    }
   
    .coat
    {
        position: relative;
        width: 300px;
        height: 310px;
        margin: 20px auto;
        background-color: #eee;
        z-index: 1;
        padding: 10px;
        -webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
        -mox-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
        box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }
   
    .left_barrier
    {
        position: absolute;
        background: #DBDCDE;
        bottom: 0;
        right: 50%;
        left: 0;
        top: 0;
        border: 1px solid #F0F0F0;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
        -ms-transition: all 0.5s ease-out;
        -o-transition: all 0.5s ease-out;
        transition: all 0.5s ease-out;
    }
    .coat:hover .left_barrier
    {
        right: 100%;
        left: -50%;
    }
   
    .right_barrier
    {
        position: absolute;
        background: #DBDCDE;
        bottom: 0;
        left: 50%;
        right: 0;
        top: 0;
        border: 1px solid #F0F0F0;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
        -ms-transition: all 0.5s ease-out;
        -o-transition: all 0.5s ease-out;
        transition: all 0.5s ease-out;
    }
    .coat:hover .right_barrier
    {
        left: 100%;
        right: -50%;
    }
   
    .slide_in
    {
        overflow: hidden;
    }
    .slide_in .left_barrier
    {
        background: #DBDCDE;
        border: 1px solid #F0F0F0;
    }
    .slide_in .right_barrier
    {
        background: #DBDCDE;
        border: 1px solid #F0F0F0;
    }
   
    .coat img
    {
        width: 100%;
        margin-top: 15px;
    }
   
    p
    {
        margin-top: 15px;
        text-align: justify;
    }
   
    h1
    {
        font-size: 20px;
        font-weight: bold;
        margin-top: 5px;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    }
</style> 

Thursday, May 19, 2016

css box style

                No comments   

Intoduction :- 
Hii Friends...
Have you ever wanted to use your own style in  your website ?  you create your own stylish div with 3D look. This script will let you do that  Easily.This can possible with the help of css . This works flawlessly in Firefox, Safari, Internet Explorer 7, Opera and others.So go ahead, CSS form styling is this easy. Now  I am going to put this with Example.

DEMO:- 
 Example :-
<div class="wrap">
    <h1>Dot Net Modules</h1>  
       <img style="border:solid 3px #7aa5a2;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhriHfw8KtedIOQ1MQwCVDUdBEtTB7K11-LVZaA9IPxJ1op4wjjue14yF5t3M0akFrTrkosTqywM6QDePPjkK06ALp-zfukLsrPKp7Od0Lx4kTyVGhujfPX2lJWbCspz1lkZ2R-FWoZ44Q/s1600-r/dotnetnew.png">
        <p>
      Welcome On Asp.net modules. This is my blog and I am Sheetal Khandelwal. It's a css Box with a new creative style. Enjoy.. :) :)
       </p>
       <br />
</div>

<style>
body {
    font-size: 12px;
    font-family: 'Open Sans', sans-serif;
    color: #4A4A4A ;
    text-align: center;
}

.wrap { 
    background: #d6e9c6; 
    margin: 20px auto;
    display: block;
    width: 300px;
    min-height: 310px;
    padding:20px;
   
   
}

.wrap img {
    width: 100%;
    margin-top: 15px;
}

p{
    margin-top: 15px;
    text-align: justify;
} 
h1 { 
    background: #a8c4c0;
    background: -moz-linear-gradient(top,  #a8c4c0 0%, #7aa5a2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8c4c0), color-stop(100%,#7aa5a2));
    background: -webkit-linear-gradient(top,  #a8c4c0 0%,#7aa5a2 100%);
    background: -o-linear-gradient(top,  #a8c4c0 0%,#7aa5a2 100%);
    background: -ms-linear-gradient(top,  #a8c4c0 0%,#7aa5a2 100%);
    background: linear-gradient(top,  #a8c4c0 0%,#7aa5a2 100%);
    font-size: 20px;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    padding: 0 20px; 
    line-height: 50px;
    height: 50px;
    margin-top: 5px;
    margin-left: -35px;  
    position: relative; 
    width: 300px; 
    box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.3);
    color: #3b3a3b; 
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 
} 
  h1:before {
    content: '';
    position: absolute;
    top: 5px;
    height: 39px;
    border-top: 1px solid rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.5);
    width: 100%;
    left: 0;
}
</style>

Thursday, May 12, 2016

RadioButton Style with css

                No comments   

Intoduction :- 
Hii Friends...
Have you ever wanted to use your own style in  radio buttons ? This script will let you do that  Easily. This can possible with the help of css .This works flawlessly in Firefox, Safari, Internet Explorer 7, Opera and others.So go ahead, CSS form styling is this easy. Now I am going to put this with Example.
DEMO:- 
 
Example :-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script> 
<style type="text/css" >
.change {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 150px;
      height: 50px;
      text-align: center;
      margin: -30px 0px 0px -75px;
      background: rgb(36, 159, 163);
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
    .change span {
      position: absolute;
      width: 20px;
      height: 4px;
      top: 50%;
      left: 50%;
      margin: -2px 0px 0px -4px;
      background: #ffffff;
      display: block;
      -webkit-transform: rotate(-45deg);
      -webkit-transition: all 0.2s ease;
      -moz-transform: rotate(-45deg);
      -moz-transition: all 0.2s ease;
      -ms-transform: rotate(-45deg);
      -ms-transition: all 0.2s ease;
      transform: rotate(-45deg);
      transition: all 0.2s ease;
    }
    .change span:after {
      content: "";
      display: block;
      position: absolute;
      width: 4px;
      height: 12px;
      margin-top: -8px;
      background: #ffffff;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
    input[type=radio] {
      display: none;
    }
    .change label {
      cursor: pointer;
      color: rgba(0, 0, 0, 0.2);
      width: 60px;
      font-family: 'Roboto';
      font-weight: 400;
      line-height: 50px;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
    label[for=yes] {
      position: absolute;
      left: 0px;
      height: 20px;
    }
    label[for=no] {
      position: absolute;
      right: 0px;
    }
    #no:checked ~ .change {
      background: #eb4f37;
    }
    #no:checked ~ .change span {
      background: #ffffff;
      margin-left: -8px;
    }
    #no:checked ~ .change span:after {
      background: #ffffff;
      height: 20px;
      margin-top: -8px;
      margin-left: 8px;
    }
    #yes:checked ~ .change label[for=yes] {
      color: #ffffff;
    }
    #no:checked ~ .change label[for=no] {
      color: #ffffff;
    }
 </style>
    <div align="center" style="position:relative; padding:120px 0px;">
      <div class="toggle-radio">
        <input type="radio" name="rdo" id="yes" checked>
        <input type="radio" name="rdo" id="no">
        <div class="change">
          <label for="yes">Yes</label>
          <label for="no">No</label>
          <span></span>
        </div>
      </div>
    </div>

Friday, April 15, 2016

Auto-Hiding Navbar with Javascript

                1 comment   

Intoduction :- 
Hii Friends...
today i explain how to hide a navbar when scroll the page. Fixed headers are fairly common nowadays with big name brands like Facebook, Twitter, Google, LinkedIn, and others using this pattern. Other apps and websites are already doing this, and it’s pretty sweet. Here’s how you do it.

DEMO:- 


Example :-

<style type="text/css">

 .topper-link
{
list-style:none;
background:#fff;
width:100%;
text-align:center;
box-shadow: 2px 2px 3px #000;
height:35px;
}
.topper-link li
{
display:inline-block;
color:#333;
}
.tp1
{

}
.topper-link li a
{
border-right: 1px solid #333;
color: #333;
display: block;
padding: 5px 10px;
text-decoration: none;
}
    </style>

<div id="scid" class="row">
    <div class="container">
        <div class="top_menu tp1">
            <ul class="topper-link" style="margin-top: 3px; padding-top: 3px;">
                <li>Go quickly to -> </li>
                <li><a href="#">Mobiles</a> </li>
                <li><a href="#">Books</a> </li>
                <li><a href="#">Food</a> </li>
                <li><a href="#">Lighting</a> </li>
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).scroll(function () {
        if (($(this).scrollTop() / 10) > 10) {
            $('#scid').css('display', 'none');
        }
        else {
            $('#scid').css('display', 'block')

        }
    });
</script>

</div>
</div>

</div>

css Hovering Bounce

                No comments   

Intoduction :- 
Hii Friends...
Today I explain how to make css hovering fill circle  boundary with images bounce .
hover selector is used to select elements when you mouse over them.  When we put a cursor on the image the hovering is work and fill the circle on hovering color that you want to fill.  And the images is give a little bounce.

DEMO:-
hover over it

Example :-

<style type="text/css">
.theImage {
    animation-duration: .3s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

.theImage:hover {
    animation-name: jittery;
}

@keyframes jittery {
    10% {
        transform: translate(-2px, -3px) scale(1.01, 1.01);
    }
    20% {
        transform: translate(3px, 2px) scale(.99, .99);
    }
    30% {
        transform: translate(-4px, -5px) scale(1.01, 1.01);
    }
    40% {
        transform: translate(2px, 3px) scale(1, 1);
    }
    50% {
        transform: translate(-1px, -2px) scale(.98, .98);
    }
    60% {
        transform: translate(0px, 3px) scale(1.02, 1.02);
    }
    70% {
        transform: translate(-2px, -4px) scale(1, 1);
    }
    80% {
        transform: translate(3px, 5px) scale(.99, .99);
    }
    90% {
        transform: translate(-5px, -3px) scale(1.1, 1.1);
    }
    100% {
        transform: translate(3px, 1px) scale(.95, .95);
    }
}
</style>

<img class="theImage" alt="hover over it" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhriHfw8KtedIOQ1MQwCVDUdBEtTB7K11-LVZaA9IPxJ1op4wjjue14yF5t3M0akFrTrkosTqywM6QDePPjkK06ALp-zfukLsrPKp7Od0Lx4kTyVGhujfPX2lJWbCspz1lkZ2R-FWoZ44Q/s1600-r/dotnetnew.png">

 

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...
  • 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 Directives
    Intoduction :-   Hii Friends... Today I explain about Angular Directives.  1) Angular JS use new attribute i.e called Directives. 2)...
  • Asp.net insert, Edit, update, delete in grid view
    Introduction :   Here I explain how to insert, edit, update and delete data in grid view using asp.net. In this project I use so...
  • 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...
  • css Hovering Bounce
    Intoduction :-   Hii Friends... Today I explain how to make css hovering fill circle  boundary with images bounce . hover selector is us...
  • 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...
  • Calculator with Angular JS
    Intoduction :-   Hii Friends... Today I explain how to make a Calculator with the help of Angular JS. In this code i use some directive...