doboyo

listing template

by Christopher Pearson

HTML

<link href='http://fonts.googleapis.com/css?family=Oswald:300,400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
</head>
<body>
    <div class="listing-template">

        <div class="section-hdr">

            <img class="top-logo" src="http://i76.photobucket.com/albums/j39/christopherepearson1/Web%20Graphics/logo3_zpsa8816cd3.png" alt="logo" />

            <div class="nav-bar">
                <ul>
                    <li><a target="_blank" href="http://stores.ebay.com/doboyo_Maternity-Fashion_W0QQfsubZ5511741012">maternity</a></li>
                    
                    <li><a target="_blank" href="http://stores.ebay.com/doboyo_Womens-Fashion_W0QQfsubZ5511742012">women's</a></li>
                    
                    <li><a target="_blank" href="http://stores.ebay.com/doboyo_Mens-Fashion_W0QQfsubZ5511743012">men's</a></li>
                    
                    <li><a target="_blank" href="http://stores.ebay.com/doboyo_Youth-Fashion_W0QQfsubZ5511744012">youth</a>

                    </li>
                    <li><a target="_blank" href="http://stores.ebay.com/doboyo_Baby_W0QQfsubZ5511745012">baby</a></li>
                    
                    <li><a target="_blank" href="http://stores.ebay.com/doboyo_Household_W0QQfsubZ5511751012">houshold</a></li>
                    
                    <li id="unique-nav"><a target="_blank" href="http://stores.ebay.com/doboyo">STORE HOME</a></li>
                </ul>
            </div> <!-- end navigation bar -->

        </div>  <!-- end header section -->

        <div class="section-content">

                <div class="gallery">
                    <div class="preview">
                        
                        <img name="preview" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-01-m_zps3e6ef52c.jpg" alt="Large photo">
                        
               ...

CSS

/***********************************************/
/*******auction listing stylesheet**************/
/****Copyright (c) chris e pearson 2013-2015****/
/***********************************************/



/*STYLE FOR MAIN LISTING CONTAINER*/
.listing-template {
    width: 750px;
    background-color: #7496a7;
    border: 1px solid #333;
    margin-top: 0;
    padding: 5px;
    margin-left: auto;
    margin-right: auto;
}

/*BASE STYLE FOR PARAGRAPHS*/
.listing-template p {
    font-family: lato, sans-serif;
    font-size: 14px;
    color: #042839;
    font-weight: 400;
    text-align: justify;
}

/*BASE STYLE FOR H6 HEADERS (currently used in footer)*/
.listing-template h6 {
    margin: 3px 0 7px 0;
    font-family: oswald, sans-serif;
    color: #D7E3E9;
    font-weight: 300;
    text-align: center;
}

/*BASE STYLE FOR THE HEADER SECTION*/
.listing-template .section-hdr {
    padding-top: 1px;
    width: 100%;
}

/*STYLE FOR THE LOGO IMAGE*/
.listing-template .section-hdr .top-logo {
    max-width: 350px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*STYLE FOR TOP NAV BAR WRAPPER*/
.listing-template .nav-bar {
    width: 700px;
    /*border: 1px solid #D7E3E9;*/
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*STYLE FOR TOP NAV BAR ul*/
.listing-template .nav-bar ul {
    padding:0;
}

/*STYLE FOR NAV BAR LINKS (font related)*/
.listing-template .nav-bar a {
    color: #D7E3E9;
    font-family: oswald, sans-serif;
    font-size: 14px;
    font-weight: 300;
    padding: 8px;
    text-transform: uppercase;
    text-decoration: none;
}

/*STYLE FOR NAV BAR LIST ITEMS (box related)*/
.listing-template .nav-bar li {
    display:inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #D7E3E9;
}

/*STYLE FOR NAV BAR BOXES ON HOVER*/
.listing-template .nav-bar li:hover {
    background-color:#2B596F;
    border: 1px dotted #D7E3E9
}

/*DEFINES A UNIQUE STYLE FOR ONE OF...

JavaScript

/*jslint browser: true, plusplus: true, sloppy: true */
/*
*    TABS
*    ---------------------------------------------------------------------------
*    Copyright (c) 2009-2013 Bo Frederiksen
*    https://github.com/bofrede/Tabs
*
*    Copyright (c) 2008 Dan Peverill
*    http://www.danpeverill.com
*
*    Copyright (c) 2005 John Resig
*    http://ejohn.org/projects/flexible-javascript-events/
*
*    LICENSE
*    ---------------------------------------------------------------------------
*    The MIT License
*    http://www.opensource.org/licenses/mit-license.php
*
*    INSTALLATION
*    ---------------------------------------------------------------------------
*    Tabs are controlled with links. Each link has a target that it is attached to and specified
*    as an #anchor in the href attribute. Example: <a href="#tab">tab</a>. The #anchor
*    is the id of the actual target.
*
*    Tabs can be grouped or single. Grouping tabs you specify the parent
*    class of the tabs with the "tabs" class. For a single tab just add the class "tabs" to it.
*
*    Active tabs given the class "active" by default. Inactive tabs have no class. You may
*    specify the default active/inactive tabs by adding the class "active" to any of them in
*    your HTML.
*
*    Tab targets are automatically shown and hidden as you click the appropriate tabs. You can control
*    this behavior with callback functions (see below). It is up to you to style the tabs and tab targets
*    with CSS. This script only toggles the active class on tabs and shows/hides the tab targets.
*
*    You may add custom tabs yourself with Tabs.create(tabs, callbacks).
*
*    Callbacks is an optional argument. Callbacks is an object with two optional properties: click, show.
*    These options are a function that handles the appropriate callback. Each callback can accept
*    two arguments, the click event and the currently active tab target. "this" refers to the tab.
*    click: This callback is triggered...