Thursday, March 5, 2015

<!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:

Post a Comment

Subscribe to: Post Comments (Atom)