Thursday, March 5, 2015

img.framed {
border: 10px solid #ccb089; border-image-source: url('wooden_frame.jpg'); border-image-slice: 50 65;
}
Reset Code
Posted by at No comments:
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title> Web form </title>
    <script src="js/jquery-2.1.1.js"></script>

<script>
 jQuery(document).ready(function() {
    jQuery('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = jQuery(this).attr('href');

        // Show/Hide Tabs
        jQuery('.tabs ' + currentAttrValue).show().siblings().hide();

        // Change/remove current tab to active
        jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

        e.preventDefault();
    });
});
</script>

  <link rel="stylesheet" href="css/custom.css" type="text/css" media="all" />




</head>
<body>

<div class="form-wrapper">
<div class="tabs">
    <ul class="tab-links">
        <li class="active"><a href="#tab1">Step 1</a></li>
        <li><a href="#tab2">Step 2</a></li>
        <li><a href="#tab3">Step 3</a></li>
        <li><a href="#tab4">Step 4</a></li>
        <li><a href="#tab5">Step 5</a></li>
        <li><a href="#tab6">Step 6</a></li>
        <li><a href="#tab7">Final Step</a></li>
    </ul>

    <div class="tab-content">
        <div id="tab1" class="tab active">
            <p>Tab #1 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis.</p>
        </div>

        <div id="tab2" class="tab">
            <p>Tab #2 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
        </div>

        <div id="tab3" class="tab">
            <p>Tab #3 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.</p>
        </div>

        <div id="tab4" class="tab">
            <p>Tab #4 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
        </div>
                <div id="tab5" class="tab">
            <p>Tab #1 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis.</p>
        </div>

        <div id="tab6" class="tab">
            <p>Tab #2 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
        </div>

        <div id="tab7" class="tab">
            <p>step #3 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.</p>
        </div>
    </div>
</div>

</div>   <!-- end form wrapper -->

</body>
</html>



body{
    background: #aeaeae;
    -webkit-box-shadow: inset 0 0 0 rgba(255,255,255,0.75);
    -moz-box-shadow: inset 0 0 0 rgba(255,255,255,0.75);
    box-shadow: inset 0 0 0 rgba(255,255,255,0.75);
    min-width: 750px;
}

.form-wrapper {
        width: 750px;
        margin-top: 100px;
        right: 20vw;
        position: relative;
        float: right;
    }

/*----- Tabs -----*/
   .tabs {
    width:100%;
    display:inline-table;
}

    /*----- Tab Links -----*/
    /* Clearfix */
   .tab-links{display: table;
              margin: auto;}

    .tab-links:after {
        display:block;
        clear:both;
        content:'';
    }

    .tab-links li {
        display:table-cell;
        margin:0px 5px;
        float:left;
        list-style:none;
    }

    .tab-links a {
            display:table-cell;
            vertical-align: middle;
            border-radius:3px 3px 0px 0px;
            background:#7FB5DA;
            font-size:16px;
            font-weight:600;
            color:#4c4c4c;
            transition:all linear 0.15s;
        }

    .tab-links a:hover {
            background:#a7cce5;
            text-decoration:none;
        }

    li.active a, li.active a:hover {
        background:#333;
        color:#4c4c4c;
    }

    /*----- Content of Tabs -----*/
    .tab-content {
        padding:15px;
        border-radius:3px;
        box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
        background:#999;
    }

        .tab {
            display:none;
        }

        .tab.active {
            display:block;
        }


Posted by at No comments:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Styles/Reset.css" rel="stylesheet" />
<link href="Styles/Base.css" rel="stylesheet" />
<link href="Styles/index.css" rel="stylesheet" />
</head>
<body>
<header>
<div>
<h1>Graphics Umbrella - Premium style free graphics</h1>
<nav class="main-menu">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">NEWS</a></li>
<li><a href="">PRODUCTS</a></li>
<li><a href="">FEATURES</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</nav>
</div>
</header>
<div id="Rotator" class="rotator">
<a class="prev" href="#"></a>
<div class="rotatorWrapper">
<ul>
<li class="slide0">
<div>
Slide 1
ADD LOVELY CAPTIONS TO
EACH SLIDE AND MAKE YOUR
BUSINESS STAND OUT
</div>
</li>
<li class="slide1">
<div>
Slide 2
ADD LOVELY CAPTIONS TO
EACH SLIDE AND MAKE YOUR
BUSINESS STAND OUT
</div>
</li>
<li class="slide2">
<div>
Slide 3
ADD LOVELY CAPTIONS TO
EACH SLIDE AND MAKE YOUR
BUSINESS STAND OUT
</div>
</li>
</ul>
</div>
<a class="next" href="#"></a>
</div>
<div class="content">
<h2>
WELCOME TO <span>ELEGANTICA</span> - A MINIMAL BUSINESS THEME
</h2>
<div class="services">
<ul>
<li>
<div class="discOuter">
<div class="discInner">
<div class="amazing icon"></div>
</div>
</div>
<h3>Amazing</h3>
<h5>Support</h5>
</li>
<li>
<div class="discOuter">
<div class="discInner">
<div class="hour icon"></div>
</div>
</div>
<h3>24 Hour</h3>
<h5>Availability</h5>
</li>
<li>
<div class="discOuter">
<div class="discInner">
<div class="webicon icon"></div>
</div>
</div>
<h3>Web</h3>
<h5>Design</h5>
</li>
<li>
<div class="discOuter">
<div class="discInner">
<div class="mobiledev icon"></div>
</div>
</div>
<h3>Mobile</h3>
<h5>Development</h5>
</li>
</ul>
</div>
<div class="subHeader">
<h4>Recent from <span>Portfolio</span></h4>
</div>
<div class="portItem">
<img src="" alt="" />
<h5>Business Cards</h5>
<a href="">Video</a>
<a href="">Interview</a>
<p>
Lorem ipsum dolor sit amet das
consectetuer adipiscing elit, ad
diam nonummy nibh euismodos
tincidunt ut laoreet dolore atir.
</p>
</div>
<div class="portItem">
<img src="" alt="" />
<h5>Moo Minicards</h5>
<a href="">Video</a>
<a href="">Interview</a>
<p>
Lorem ipsum dolor sit amet das
consectetuer adipiscing elit, ad
diam nonummy nibh euismodos
tincidunt ut laoreet dolore atir.
</p>
</div>
<div class="portItem">
<img src="" alt="" />
<h5>Say It In Print</h5>
<a href="">Video</a>
<a href="">Interview</a>
<p>
Lorem ipsum dolor sit amet das
consectetuer adipiscing elit, ad
diam nonummy nibh euismodos
tincidunt ut laoreet dolore atir.
</p>
</div>
<div class="portItem">
<img src="" alt="" />
<h5>Graphics In Print</h5>
<a href="">Video</a>
<a href="">Interview</a>
<p>
Lorem ipsum dolor sit amet das
consectetuer adipiscing elit, ad
diam nonummy nibh euismodos
tincidunt ut laoreet dolore atir.
</p>
</div>
<div class="subHeader">
<h4>Our Major <span>Advertisers</span></h4>
</div>
<ul class="advertisers">
<li>
<img src="Images/watermelon.png" />
</li>
<li>
<img src="Images/plantcloud.png" />
</li>
<li>
<img src="Images/template.png" />
</li>
<li>
<img src="Images/birdfly.png" />
</li>
<li>
<img src="Images/silhouette.png" />
</li>
<li>
<img src="Images/solidsociety.png" />
</li>
</ul>
</div>
<footer class="footer">
<div class="footer-content">
<div>
<h5>Little About Us</h5>
<p>
Sed posuere consectetur est at.
Nulla vitae elit libero, a pharetra.
Lorem ipsum dolor sit amet, conse
ctetuer adipiscing elit.
</p>
<h5>Follow Us</h5>
<div class="social-links">
<ul>
<li><a href="#" class="facebook"></a></li>
<li><a href="#" class="twitter"></a></li>
<li><a href="#" class="rss"></a></li>
<li><a href="#" class="vimeo"></a></li>
<li><a href="#" class="dribble"></a></li>
<li><a href="#" class="msn"></a></li>
</ul>
</div>
</div>
<div>
<h5>Archives</h5>
</div>
<div>
<h5>Contact Us</h5>
</div>
<div>
<h5>Sign To Newsletter</h5>
</div>
</div>
</footer>
<div class="base-footer">
<div class="bs-content">
<div class="footer-nav">
<a href="">home</a>
<a href="">portfolio</a>
<a href="">sitemap</a>
<a href="">contact</a>
</div>
<div class="copy">
@2013 All Rights Reserved
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.rotator.js"></script>
<script>
$(function () {
$('#Rotator').Rotator();
});
</script>
</body>
</html>


//jqury rotator

; (function ($) { $.fn.Rotator = function (options) { var defaults = { container: '.rotatorWrapper', animationduration: 1000, slideWidth: 960 }; options = $.extend(defaults, options); elm = this; var pageIndex = 0, slideCount = 0; var _init = function () { slideCount = elm.find(options.container).children().children().length; elm.find(options.container).children().width(slideCount * options.slideWidth); _bindEvents(); _togglePager(); }; var _bindEvents = function () { var jElm = $(elm); jElm.find('.prev').on('click', _previous); jElm.find('.next').on('click', _next); }; var _next = function (e) { e.preventDefault(); if (pageIndex >= 0 && pageIndex < slideCount - 1) { pageIndex++; elm.find(options.container).children().animate({ left: "-=" + options.slideWidth }, options.animationduration); } _togglePager(); }; var _previous = function (e) { e.preventDefault(); if (pageIndex <= slideCount) { pageIndex--; elm.find(options.container).children().animate({ left: "+=" + options.slideWidth }, options.animationduration); } _togglePager(); }; var _togglePager = function () { var $elm = $(elm); var prev = $elm.find('.prev'); var next = $elm.find('.next'); console.log('slide count' + pageIndex + ' Page Index' + pageIndex) if (pageIndex >= slideCount - 1) { next.hide(); } else { next.show(); } if (pageIndex <= 0) { prev.hide(); } else { prev.show(); } } return _init(elm); } })(jQuery);

 // css main

body {
    background: #f5f5f5;
    font: 13px/1.1em Arial, "Helvetica Neue", Helvetica, sans-serif;
}

 h1,
h2,
h3,
h4,
h5 {
    text-transform: uppercase;
}

     h2 span,
    h3 span,
    h4 span {
        color: #9fc63f;
    }

 header > div {
    margin: 0 auto;
    width: 960px;
}

 /*=================
    Header
=================*/
header {
    overflow: hidden;
    padding: 25px 0 30px 0;
}

     header h1 {
        background-image: url(../images/logo.png);
        height: 60px;
        float: left;
        overflow: hidden;
        text-indent: 100%;
        white-space: nowrap;
        width: 274px;
    }

     header nav {
        float: right;
    }

 .main-menu li {
    float: left;
    padding-top: 27px;
    text-align: right;
    width: 125px;
}

 .main-menu a {
    color: #000;
    font-size: 14px;
    text-decoration: none;
    text-transform: uppercase;
}

     .main-menu a:hover {
        text-decoration: underline;
    }

 .content {
    margin: 0 auto 140px auto;
    overflow: hidden;
    width: 960px;
}

footer {
    background: #fff;
    border-top: 1px solid #ece9e9;
    border-bottom: 1px solid #ece9e9;
    clear: both;
    overflow: hidden;
}

     footer .footer-content {
        margin: 0 auto;
        padding: 40px 0 20px 0;
        width: 960px;
    }

         footer .footer-content > div {
            float: left;
            margin-right: 40px;
            width: 200px;
        }

     footer h5 {
        font-size: 15px;
        margin-bottom: 25px;
        text-transform: uppercase;
    }

     footer p {
        margin-bottom: 25px;
    }

 .base-footer {
    background: #202020;
        padding: 5px 0;
    overflow: hidden;
}

     .base-footer .bs-content {
        margin: 0 auto;
        width: 960px;
    }

     .base-footer .footer-nav {
        float: left;
    }

         .base-footer .footer-nav a {
            color: #fff;
            padding:0 5px;
            text-decoration: none;
            text-transform:uppercase;
        }

     .base-footer .copy {
        color: #fff;
        float: right;
    }

 .social-links {
}

     .social-links li {
        display: inline-block;
    }

     .social-links a {
        background-position: center center;
        background-repeat: no-repeat;
        display: block;
        height: 25px;
        width: 25px;
    }

     .social-links .facebook {
        background-image: url(../images/facebook.png);
    }

     .social-links .twitter {
        background-image: url(../images/twitter.png);
    }

     .social-links .rss {
        background-image: url(../images/rss.png);
    }

     .social-links .vimeo {
        background-image: url(../images/vimeo.png);
    }

     .social-links .dribble {
        background-image: url(../images/dribble.png);
    }

     .social-links .msn {
        background-image: url(../images/msn.png);

    }
/// css rotator 

#Rotator {
    background: #9fc63f;
    clear: both;
    height: 415px;
    position: relative;
}

.rotator {
}

    .rotator .prev {
        background-image: url(../images/backward.png);
        display: block;
        height: 60px;
        left: 50px;
        margin-top: -30px;
        position: absolute;
        top: 50%;
        width: 60px;
    }

    .rotator .next {
        background-image: url(../images/forward.png);
        display: block;
        right: 50px;
        height: 60px;
        margin-top: -30px;
        position: absolute;
        top: 50%;
        width: 60px;
    }

    .rotator .rotatorWrapper {
        height: 420px;
        margin: 0 auto;
        position: relative;
        width: 960px;
        overflow: hidden;
    }

    .rotator ul {
        position: absolute;
        top: 0px;
        width: 2000em;
    }

    .rotator li {
        float: left;
        height: 420px;
        width: 960px;
        position: relative;
    }

.slide0, .slide1, .slide2 {
    background: url(../images/slide.png) left center no-repeat;
}

    .slide0 div,
    .slide1 div,
    .slide2 div {
        color: #fff;
        font-size: 25px;
        line-height: 1.5;
        position: absolute;
        right: 0;
        text-align: center;
        top: 75px;
        width: 400px;
    }



.content h2 {
    background: url(../images/bg_dash.png) bottom right repeat-x;
    font-size: 28px;
    padding: 40px 0;
    text-align: center;
}

.services {
    margin-bottom: 50px;
    overflow: hidden;
}

    .services ul {
        margin-top: 40px;
    }

    .services li {
        float: left;
        margin-right: 75px;
    }

        .services li:last-child {
            margin-right: 0;
        }

    .services .discOuter {
        background: #fff;
        border: 1px solid #dedede;
        border-radius: 100%;
        height: 178px;
        margin-bottom: 18px;
        width: 178px;
    }

    .services .discInner {
        background: #9fc63f;
        border-radius: 100%;
        height: 140px;
        margin: 19px;
        width: 140px;
    }

        .services .discInner .icon {
            background-repeat: no-repeat;
            background-position: center center;
            height: 140px;
            width: 140px;
        }

    .services .amazing {
        background-image: url(../images/amazing.png);
    }

    .services .hour {
        background-image: url(../images/24hour.png);
    }

    .services .webicon {
        background-image: url(../images/web.png);
    }

    .services .mobiledev {
        background-image: url(../images/mobile.png);
    }

    .services h3 {
        font-size: 24px;
        text-align: center;
        margin-bottom: 10px;
    }

    .services h5 {
        font-size: 14px;
        text-align: center;
    }

.subHeader {
    background: url(../images/bg_dash.png) center repeat-x;
    clear: both;
    height: 20px;
    margin-bottom: 35px;
}

    .subHeader h4 {
        background: #f5f5f5;
        font-size: 20px;
        height: 20px;
        padding-top: 4px;
        margin-left: 30px;
        width: 275px;
    }


.portItem {
    border: 1px solid #ecebeb;
    float: left;
    margin-bottom: 25px;
    margin-right: 16px;
    width: 465px;
}

    .portItem:nth-child(2n + 1) {
        margin-right: 0;
    }

    .portItem img {
        float: left;
        height: 148px;
        margin-right: 20px;
        width: 227px;
    }

    .portItem h5 {
        font-size: 12px;
        margin: 15px 0 10px 0;
    }

    .portItem a {
        background: #9fc63f;
        color: #fff;
        display: inline-block;
        margin-right: 6px;
        margin-bottom: 14px;
        padding: 3px 10px;
        text-decoration: none;
    }

    .portItem p {
    }

.advertisers {
}

    .advertisers li {
        background-image: url(../images/adv_background.png);
        float: left;
        margin: 0px;
        height: 131px;
        width: 160px;
    }

Posted by at No comments:
Subscribe to: Posts (Atom)