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>

Monday, June 20, 2016

Creating Alert Messages in Bootstrap

                No comments   

Intoduction :- 
Hii Friends...
Alert boxes are used quite often to stand out the information that requires immediate attention of the end users such as warning, error or confirmation messages. With Bootstrap you can easily create elegant alert messages box for various purposes. You can also add an optional close button to dismiss any alert.
DEMO:- 

Example :-
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Dotnetmodules</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Alerts</h2>

  <div class="alert alert-success">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <strong>Success!</strong> This alert box indicate a successful or positive action.
  </div>
  <div class="alert alert-info">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <strong>Info!</strong> This alert box indicate a neutral informative change or action.
  </div>
  <div class="alert alert-warning">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <strong>Warning!</strong> This alert box indicate a warning that might need attention.
  </div>
  <div class="alert alert-danger">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <strong>Danger!</strong> This alert box indicate a dangerous or potentially negative action.
  </div>
</div>

</body>
</html>

Sunday, June 12, 2016

List Style

           ,      No comments   

Intoduction :- 
Hii Friends...
Html have 2 types of list . Ordered List and Unordered List. If you are required to put your items in a numbered list  instead of bulleted then HTML ordered list will be used. This list is created by using <ol> tag or <ul> tag. But we weant a stylish look on the list so i give a code that is with good look and feel. 
DEMO:-
  1. Asp.Net
  2. HTML
  3. CSS
  4. Java Script
Example :-
<div class="list-type2">
<ol>
<li><a href="#">Asp.Net</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Java Script</a></li>
</ol>
</div>

<style>

.list-type2{
width:400px;
margin:0 auto;
}

.list-type2 ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font-size: 15px;
font-family: 'Raleway', sans-serif;
padding: 0;
margin-bottom: 4em;
}

.list-type2 ol ol{
margin: 0 0 0 2em;
}

.list-type2 a{
position: relative;
display: block;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .5em 0;
background: #228FAC;
color: #fff;
text-decoration: none;
transition: all .2s ease-in-out;
}

.list-type2 a:hover{
background: #d6d4d4;
text-decoration:none;
transform: scale(1.1);
}

.list-type2 a:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1.3em;
background:#228FAC;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
color:#FFF;
}

</style>

Sunday, June 5, 2016

My Resume

                No comments   

Alan Smith

Sheetal Khandelwal

Full Stack Developer

Personal Profile

I'm a Web Developer with a passion for the Internet and the digital world which began at a very young age When I dabbled with creating websites using HTML. Since then I have been hooked on creating elegant, usable and effective websites.

Work Experience

Asp.Net Developer at Cyrus Technoedge Jaipur

May 2015 - Present
I Currently work as a Full Stack developer at Cyrus Technoedge Jaipur, here I build many mobile recharge softwares and E-commerce websites

Industrial Training

May 2014 - June 2014
I worked as a junior web developer at Compucom Software Pvt. Ltd. Jaipur, where I build a E-Commerce website and learn team work

Freelance Web Developer

June 2014 - Present
I have been a freelance web developer since 2014 and during that time I have worked with a variety of different clients.

Key Skills

  • Asp.Net
  • SQL Server
  • Twitter Bootstrap
  • HTML5
  • CSS3
  • javaScript
  • PhotoShop CS6
  • C++
  • C

Education

Poornima Institute of Engineering and Technology, Jaipur

B.Tech
I have completed my graduation from Poornima Institute of Engineering and Technology, Jaipur in computer science and secure 75% marks

Govt. sr. sec. School Kumher

12th
I have completed my Intermediate from Govt. sr. sec. School Kumher in Maths & science and secure 77% marks

Govt. sr. sec. Girls School Kumher

10th
I have completed my Matriculate from Govt. sr. sec. Girls School Kumher and got 80% marks

Photos of DotnetModules

                No comments   














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>

Popular Posts