Subversion Repositories SmartDukaan

Rev

Rev 8818 | Blame | Compare with Previous | Last modification | View Log | RSS feed

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<!-- Prevent MS Office toolbar from changing layout -->
<meta http-equiv="imagetoolbar" content="false">
<meta name="MSSmartTagsPreventParsing" content="true">

<title>Home Page</title>
#include ( "templates/commonjsfiles.vm" )
<!-- start of new code -->
<style type="text/css">

.main-left-banner img {
    width: 980px;
}
label.error{
        color:red;
        font-size:13px;
        padding: 2px 10px;
}

.left {
        float:left;
        }
.right {
        float:right;
        }
        
.cart-icon {
        background-image:url('/images/cart-icon.png');
        height:45px;
        width:45px;
}
.menu-icon {
        background-image:url('/images/menu-icon.png');
        height:45px;
        width:45px;
}
.account-icon {
        background-image:url('/images/account-icon.png');
        height:45px;
        width:45px;
}
.site-logo {
        background-image:url('/images/site-logo.png');
        height:45px;
        width:45px;
        
}

.header-bottom {
        background-color:#2789c1;
        padding:6px 8px;
        position:relative;
}

.header-top a {
        display:inline-block;
        margin-right:10px;
}

body {
        padding:0;
        margin:0;
}

.search-bar {
        width: 100%;
    padding: 9px 5px;
    font-size: 13px;
    color: #888888;
    border: none;
}

.search-button {
        /*height: 25px;
    color: #666666;
    background-color: white;
    border: 0;
    margin-left: -30px;
        background-image:url('/images/search-icon.png');
        width:25px;
        line-height: 25px !important;*/
        position:absolute;
        width:60px;
        right:8px;
        top:6px;
        border: 0;
    border-radius: 0;
    background-color: #ff5d00;
    color: white;
    font-weight: bold;
    font-size: 13px;
    padding: 9px 0;
}

.banner img{
        width:100%;
}

.banner {
        margin:10px 0 10px 0;
}

.expandable ul {
        display:none;
        list-style-type:none;margin:0;padding:0;
}

.expandable ul li {
        height:45px;
        line-height:45px;
        border-bottom:1px solid #AAAAAA;
        padding-left:25px;
        background-color:#EEEEEE;
}

.expandable ul li a{
        text-decoration:none;
        color:#666666;
        display:inline-block;
        width:100%;
}

.menu-container {
        border:1px solid #AAAAAA;
        margin:10px;
        background-color:white;
}

.expandable {
        line-height:45px;
        color:#666666;
        cursor:pointer;
}

.plus {
        background:url('/images/plus.png') no-repeat right top;
}

.minus {
        background:url('/images/minus.png') no-repeat right top;
}

.non-expandable {
        height:45px;
        line-height:45px;
        color:#666666;
        padding-left:10px;
        border-bottom:1px solid #AAAAAA;
}

.menu-container-header {
        height:45px;
        line-height:45px;
        color:#333333;
        padding-left:10px;
        font-size:18px;
        border-bottom:2px solid #2789c1;
}

.non-expandable a {
        text-decoration:none;
        color:#666666;
        display:inline-block;
        width:100%;
}

.header {
        background-color:white;
}

.footer {
        border-top:4px solid #2789c1;
        background-color:white;
        height:30px;
        line-height:30px;
        font-size:13px;
        color:#666666;
        padding-left:25px;
}

.footer a {
        color:#666666;
        text-decoration:none;
}

.expandable div img, .non-expandable a img {
        vertical-align: middle;
}
</style>
 
</head>

<body  style='background-color:#BBBBBB;'>
        <div class='header'>
                <div class='header-top'>
                        <a class='site-logo left' href="#"></a>
                        <a class='menu-icon left' href='#'></a>
                        <a class='cart-icon right' href='#'></a>
                        <a class='account-icon right' href='#'></a>
                        
                </div>
                <div style='clear:both;'></div>
                <form class='header-bottom'>
                        <div style='margin-right:35px;'>
                                <input class='search-bar' type='text'></input>
                        </div>
                        <input type='submit' class="search-button" value='Search'></input>
                </form>
        </div>
        <div>
                <div class='banner'>
                        <img src='/images/bannerImage.jpg'></img>
                </div>
                
                <div class='menu-container'>
                        <div class='menu-container-header'>Shop by category</div>
                <div class='expandable plus'>
                                <div style='border-bottom:1px solid #AAAAAA;padding-left:10px;'><img src='/images/mobile.png'></img>Mobiles</div>
                        <ul>
                                <li><a href='/search?q=mobile'>All Mobiles</a></li>
                                <li><a href='/search?q=android'>Android Phones</a></li>
                        </ul>
                </div>
                <div class='non-expandable'>
                        <a href='/search?q=tablets'><img src='/images/tablet.png'></img>Tablets</a>
                </div>
                <div class='expandable plus'>
                                <div style='border-bottom:1px solid #AAAAAA;padding-left:10px;'><img src='/images/laptop.png'></img>Laptops</div>
                        <ul>
                                <li><a href='/search?q=tablets'>Windows</a></li>
                                <li><a href='/search?q=tablets'>Mac</a></li>
                                <li><a href='/search?q=tablets'>DOS/Linux</a></li>
                        </ul>
                </div>
                        <div class='expandable plus'>
                                <div style='border-bottom:1px solid #AAAAAA;padding-left:10px;'><img src='/images/accessories.png'></img>Accessories</div>
                        <ul>
                                <li><a href='/search?q=tablets'>Laptop Accessories</a></li>
                                <li><a href='/search?q=tablets'>Mobile Accessories</a></li>
                        </ul>
                </div>
                        <div class='expandable plus'>
                                <div style='border-bottom:1px solid #AAAAAA;padding-left:10px;'><img src='/images/camera.png'></img>Cameras</div>
                        <ul>
                                <li><a href='/search?q=tablets'>DSLR</a></li>
                                <li><a href='/search?q=tablets'>Compact Cameras</a></li>
                        </ul>
                </div>
                        <div class='non-expandable'>
                        <a href='/recharge'><img src='/images/recharge.png'></img>Quick Recharge</a>
                </div>
                        <div class='non-expandable'>
                        <a href='/best-deals'><img src='/images/star.png'></img> Best Deals</a>
                </div>
                </div>
        </div>
        <div class='footer'>
                <a href='www.saholic.com'>Full Site</a>&nbsp;|&nbsp;
                <a href='/contact-us'>Contact us</a>&nbsp;|&nbsp;
                <a href='/terms'>Policies</a>
                
        </div>
<script>
        jQuery('.expandable').click(function() {
                if(jQuery(this).hasClass('plus')) {
                        jQuery(this).removeClass('plus');
                        jQuery(this).addClass('minus');
                } else {
                        jQuery(this).removeClass('minus');
                        jQuery(this).addClass('plus');
                }
                
                jQuery(this).find('ul').slideToggle("fast");
        });
</script>
</body>
</html>