My portal – single page layout for your community

My portal – single page layout for your community

7 70465
My portal - single page layout

My portal – single page layout for your community.

Today I have prepared new great template for you. This is modern looking stylish layout in dark colors. It consists of logo, social icons, navigation menu, search bar, footer, promo section, headline block, and 2 other blocks: list of members and last news. Last two blocks are UL-LI based lists. Sure that you will like it.

Final Result

final template result

Live Demo
download result

Get started

Firstly, prepare new folder (for our template), and create next folders inside:

  • css – for CSS stylesheets (reset.css, style.css)
  • images – for all the images
  • js – for JS files (jquery.spinner.js and script.js)

Head section markup

Now look at the HTML markup of our header:

<!DOCTYPE html>
<html lang="en"><head>
    <title>'My portal' single page layout | Script tutorials demo</title>
    <meta charset="utf-8">
    <!-- Link styles -->
    <link rel="stylesheet" href="css/reset.css" type="text/css" />
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <!-- Link scripts -->
    <script src="https://www.google.com/jsapi"></script>
    <script>
        google.load("jquery", "1.7.1");
    </script>
    <script src="js/jquery.spinner.js"></script>
    <script src="js/script.js"></script>
</head>

Moving forward – Main layout (body section)

Main body layout consists of 3 main sections: header (logo, social icons, navigation menu and search form), main section (four blocks: Promo, Headline (you can use some video here), Last members and Last news) and footer (with different links). It looks like:

<body>
    <header><!-- Define the header section of the page -->
        <h1 class="logo"><!-- Define the logo element -->
            <a href="#"><img src="images/logo.png" alt=""></a>
        </h1>
        <ul class="soc-ico"><!-- Define social icons -->
            <li><a href="#"><img src="images/twitter48.png" alt=""></a></li>
            .....
        </ul>
        <nav><!-- Define the navigation menu -->
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Members</a></li>
                .....
            </ul>
        </nav>
        <form id="search"><!-- Define the search element -->
            <input type="text" name="s" />
            <input type="submit" value="" />
        </form>
    </header>
    <div id="content"><!-- Define the content section -->
        <div class="box box1">
            .....
        </div>
        <div class="box box2">
            .....
        </div>
        <div class="box box3">
            .....
        </div>
        <div class="box box4">
            .....
        </div>
    </div>
    <footer><!-- Define the footer section of the page -->
        <ul>
          <li class="active"><a href="#">Home</a>|</li>
          <li><a href="#">Members</a>|</li>
          .....
        </ul>
    </footer>
</body>

Base CSS styles

/* base styles */
body {
        background:#000;
        font-family:Arial, Helvetica, sans-serif;
        font-size:100%;
        line-height:1em;
        color:#000;
}
header {
        background:url("../images/header-bg.png") repeat-x scroll 0 0 transparent;
        height:160px;
        position:relative;
}
a {
        color:#2cbcfc;
        outline:none;
}
a:hover {
        text-decoration:none;
}
p {
        line-height:16px;
        margin-bottom:16px;
}
h1 {
        position:absolute;
        left:10px;
        top:49px;
}
h2 {
        font:bold 20px/24px Arial, Helvetica, sans-serif;
        color:#fff;
        text-transform:uppercase;
        margin-bottom:11px;
        padding:0 4px;
}
h3,.h3 {
        font:bold 13px/22px Arial, Helvetica, sans-serif;
        color:#2cbcfc;
        text-transform:uppercase;
}
.white {
        color:#FFF;
}
.blue {
        color:#22a2fb;
}
.gray {
        color:#696565;
}
.rm {
        width:108px;
        padding-left:14px;
        background:url(../images/rm-bg.png) no-repeat;
        font:bold 11px/29px Arial, Helvetica, sans-serif;
        display:inline-block;
        text-decoration:none;
        text-transform:uppercase;
        color:#fff;
        float:right;
}
.rm:hover {
        color:#000;
}
.upc {
        text-transform:uppercase;
}
.extra-wrap {
        overflow:hidden;
}
.clear {
        clear:both;
        line-height:0;
}
.blck {
        display:block;
}

Header section preview

header area

Header section preview html markup:

<header><!-- Define the header section of the page -->
    <h1 class="logo"><!-- Define the logo element -->
        <a href="#"><img src="images/logo.png" alt=""></a>
    </h1>
    <ul class="soc-ico"><!-- Define social icons -->
        <li><a href="#"><img src="images/twitter48.png" alt=""></a></li>
        <li><a href="#"><img src="images/google48.png" alt=""></a></li>
        <li><a href="#"><img src="images/facebook48.png" alt=""></a></li>
        <li><a href="#"><img src="images/stumbleupon48.png" alt=""></a></li>
        <li><a href="#"><img src="images/rss48.png" alt=""></a></li>
    </ul>
    <nav><!-- Define the navigation menu -->
        <ul>
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Members</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Photos</a></li>
            <li><a href="#">Radio</a></li>
            <li><a href="#">Forum</a></li>
            <li><a href="https://www.script-tutorials.com/my-portal-single-page-layout-for-your-community/">back to Script Tutorials</a></li>
        </ul>
    </nav>
    <form id="search"><!-- Define the search element -->
        <input type="text" name="s" />
        <input type="submit" value="" />
    </form>
</header>

CSS styles for header section:

/* navigation menu styles */
header nav {
        position:absolute;
        top:82px;
        white-space:nowrap;
}
header nav li {
        float:left;
        margin-right:1px;
}
header nav li:first-child {
        margin-left:20px;
}
header nav a {
        background:url(../images/nav-sprite.png) 0 0 repeat-x;
        color:#fff;
        display:block;
        font:bold 14px/20px Arial, Helvetica, sans-serif;
        height:32px;
        padding:14px 18px 0;
        text-decoration:none;
        text-transform:uppercase;
}
header nav a:hover,header nav .active a {
        background-position:0 -70px;
}
/* header styles */
.logo {
        left:30px;
        position:absolute;
        top:20px;
}
.soc-ico {
        position:absolute;
        right:40px;
        top:25px;
        width:270px;
}
.soc-ico li {
        float:left;
        margin-left:5px;
}
#search {
        border:1px solid #000;
        position:absolute;
        right:50px;
        top:95px;
        width:226px;
}
#search input[type=text] {
        background-color:#4F4F4F;
        border-width:0;
        color:#FFF;
        float:left;
        font-size:12px;
        height:28px;
        line-height:28px;
        margin-right:1px;
        padding:0 5px;
        width:185px;
}
#search input[type=submit] {
        background:url(../images/search-submit.png) no-repeat;
        border:none;
        cursor:pointer;
        float:left;
        height:28px;
        width:30px;
}

Main content section

Now – our main content area. It consists of 4 different blocks: Promo (with jQuery slider), new block with embed video (as example – some video promo), next 2 blocks – listings, first one – with images (you can use it as list of members or photos at your website), second one – without images (you can use this list to display some news of your website).

main content area

<div id="content"><!-- Define the content section -->
    <div class="box box1">
        <div class="gallery">
            <div class="pic"><img src="images/promo1.jpg" alt=""></div>
            <ul class="imgs">
                <li class="current"><a href="images/promo1.jpg"><img src="images/thumb1.jpg" alt=""></a></li>
                <li><a href="images/promo2.jpg"><img src="images/thumb2.jpg" alt=""></a></li>
                <li><a href="images/promo3.jpg"><img src="images/thumb3.jpg" alt=""></a></li>
            </ul>
        </div>
        <div class="fl">
        <h3>Promo block - item title</h3>
        <strong class="upc white">Promo block - item description</strong> </div>
    </div>
    <div class="box box2">
        <h2 class="fl"><span class="blue">Our</span> headline</h2>
        <iframe width="332" height="187" src="http://www.youtube.com/embed/DzH_wX6Uauc" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="box box3">
        <h2><span class="blue">Last</span> members</h2>
        <ul class="box-set">
            <li>
                <a href="#"><img src="images/thumbnail.jpg" alt=""></a>
                <h3>Member 1</h3>
                <strong class="white upc">USA, New York</strong>
            </li>
            <li>
                <a href="#"><img src="images/thumbnail.jpg" alt=""></a>
                <h3>Member 2</h3>
                <strong class="white upc">USA, New York</strong>
            </li>
            <li>
                <a href="#"><img src="images/thumbnail.jpg" alt=""></a>
                <h3>Member 3</h3>
                <strong class="white upc">USA, New York</strong>
            </li>
            <li>
                <a href="#"><img src="images/thumbnail.jpg" alt=""></a>
                <h3>Member 4</h3>
                <strong class="white upc">USA, New York</strong>
            </li>
            <li>
                <a href="#"><img src="images/thumbnail.jpg" alt=""></a>
                <h3>Member 5</h3>
                <strong class="white upc">USA, New York</strong>
            </li>
            <li>
                <a href="#"><img src="images/thumbnail.jpg" alt=""></a>
                <h3>Member 6</h3>
                <strong class="white upc">USA, New York</strong>
            </li>
        </ul>
        <a href="#" class="rm">read more</a><br class="clear">
    </div>
    <div class="box box4">
        <h2><span class="blue">Last</span> News</h2>
        <ul class="list">
            <li><a href="#"><span class="n">01</span><span class="extra-wrap blck"><span class="h3">Post title 1</span><br><strong class="white upc">Description of post #1 Description of post #1 Description of post #1</strong></span></a></li>
            <li><a href="#"><span class="n">02</span><span class="extra-wrap blck"><span class="h3">Post title 2</span><br><strong class="white upc">Description of post #2 Description of post #2 Description of post #2</strong></span></a></li>
            <li><a href="#"><span class="n">03</span><span class="extra-wrap blck"><span class="h3">Post title 3</span><br><strong class="white upc">Description of post #3 Description of post #3 Description of post #3</strong></span></a></li>
            <li><a href="#"><span class="n">04</span><span class="extra-wrap blck"><span class="h3">Post title 4</span><br><strong class="white upc">Description of post #4 Description of post #4 Description of post #4</strong></span></a></li>
            <li><a href="#"><span class="n">05</span><span class="extra-wrap blck"><span class="h3">Post title 5</span><br><strong class="white upc">Description of post #5 Description of post #5 Description of post #5</strong></span></a></li>
        </ul>
        <a href="#" class="rm">read more</a><br class="clear">
    </div>
</div>

CSS styles for main section:

/* main section */
#content {
        margin:0 auto;
        overflow:hidden;
        position:relative;
        width:1225px;
}
.box {
        float:left;
        font-size:11px;
        margin-bottom:10px;
        margin-right:8px;
        overflow:hidden;
        padding:14px;
    /* CSS3 Box sizing property */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
.box1,.box2 {
        background:#1a1a1a url(../images/block-bg1.png) repeat-x 0 0;
}
.box3 {
        background:#0d0d0d url(../images/block-bg2.png) repeat-x 0 0;
        width:615px;
}
.box4 {
        background:#0d0d0d url(../images/block-bg3.png) repeat-x 0 0;
        width:585px;
}
.box1 {
        width:840px;
}
.box2 {
        width:360px;
}
.gallery {
        margin-bottom:3px;
        overflow:hidden;
}
.gallery .pic {
        float:left;
        margin-right:4px;
}
.gallery .imgs {
        float:left;
}
.gallery .imgs>li {
        margin-bottom:4px;
}
.gallery .imgs>li>a {
        display:block;
}
/* list styles */
.list {
        display:block;
}
.list li {
        background:url(../images/g-separator.png) bottom repeat-x;
        margin-bottom:18px;
        padding-bottom:18px;
}
.list2 li {
        margin-bottom:10px;
        padding-bottom:10px;
}
.list a {
        text-decoration:none;
}
.list a span {
        cursor:pointer;
}
*+html .list li {
        margin-bottom:17px;
        overflow:hidden;
        padding-bottom:16px;
}
.list a .n {
        background:#4f4f4f;
        color:#fff;
        float:left;
        font:bold 13px/22px Arial, Helvetica, sans-serif;
        margin-right:11px;
        text-align:center;
        text-decoration:none;
        width:22px;
}
.list a:hover .n {
        background:#28b3fc;
        color:#000;
}
/* box set styles */
.box-set dl dt {
        float:left;
}
div.box-set {
        margin-top:-12px;
}
div.box-set dl {
        overflow:hidden;
        padding-top:12px;
        position:relative;
}
div.box-set dl dt {
        margin-right:10px;
}
div.box-set dl dd strong {
        font-size:11px;
        font-weight:700;
}
ul.box-set li {
        float:left;
        margin-bottom:16px;
        margin-right:10px;
}
ul.box-set li.last {
        margin-right:0;
}
ul.box-set li img {
        margin-bottom:8px;
}
.box-set dl,.box-set dl dd,ul.box-set {
        overflow:hidden;
}

Footer section

And finally – small footer area with extra links:

footer area

<footer><!-- Define the footer section of the page -->
    <ul>
      <li class="active"><a href="#">Home</a>|</li>
      <li><a href="#">Members</a>|</li>
      <li><a href="#">News</a>|</li>
      <li><a href="#">Photos</a>|</li>
      <li><a href="#">Radio</a>|</li>
      <li><a href="#">Forum</a></li>
    </ul>
</footer>

CSS styles for footer section:

/* footer section */
footer {
        background:url("../images/footer-bg.png") repeat-x scroll 0 0 transparent;
        height:63px;
        margin-top:50px;
        position:relative;
        width:100%;
}
footer ul {
        margin:0 auto;
        overflow:hidden;
        padding-top:24px;
        position:relative;
        width:410px;
}
footer li {
        color:#373838;
        float:left;
        font:12px/18px Arial, Helvetica, sans-serif;
        margin-right:10px;
}
footer li a {
        color:#757575;
        float:left;
        margin-right:10px;
        text-decoration:none;
}
footer li a:hover,footer li.active a {
        color:#fff;
}

Javascript for our template

There are only 2 JS files (jquery.spinner.js and script.js). First one is extra jQuery library for our promo block. Second one – our own code, look at this code:

;(function($){
    $.fn.extend({
        praParent:function(name){
            var th = $(this);
            while (th = th.parent()) {
                if (th.is(name)) break
            }
            return th;
        }
    })
})(jQuery)
$(function(){
    $('.gallery .imgs a').each(function(){
        var th=$(this), img=$('img',th), tmp;
        if(tmp=img.height()) {
            th.css({height:tmp/2});
        } else {
            img.load(function(){
            th.css({height:this.offsetHeight/2})
            })
        }
        th.css({overflow:'hidden',position:'relative'}).append($('<span></span>')
            .css({background:'url('+img.attr('src')+') 0 100% no-repeat',position:'absolute',left:0,top:0,width:'100%',height:'100%',opacity:0,cursor:'pointer'})
            .bind('mouseenter',function(){
                $(this).stop().animate({opacity:1})
            })
            .bind('mouseleave',function(){
                if(!$(this).praParent('li').is('.current')) {
                    $(this).stop().animate({opacity:0});
                }
            })
        )
        .bind('click',function(){
            var th=$(this),pic=th.praParent('div').find('.pic img');
            th.parent('li').addClass('current').siblings().removeClass('current').find('span').stop().animate({opacity:0});
            pic.spinner({
                filename:'images/ajax-loader.gif',
                src:th.attr('href')
            })
            return false
        })
        $('.gallery ul.imgs li.current span').css({opacity:1})
    })
})

Live Demo
download result

Conclusion

We have just finished developing of our next single page layout ‘My portal’. Congrats! You can use this as is, but please leave the back link to us intact. Good luck!

SIMILAR ARTICLES

Understanding Closures

0 24615

7 COMMENTS

    • What resolution did you try? :-) Anyway, only the navigation menu is affected to it, but rest layout keeps correct placement in case of even smallest resolution

  1. hi, thanks layout nice. i want to use this one. may i know where package css, js, images files are used. your coding whcih is given for html css js not in package , where to use it . i am having vs2010. let me know sir

    • Hello Akash,
      I think that you are wrong, because everything (html pages, css stylesheets, images, and js files) is in the package.

  2. how great you are? i’m a cameroonian doing an ecommerce platform.
    i found all your layouts astonishing . thanks and keep up

Leave a Reply