Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

My Portal – Single Page Layout For Your Community.

DZone's Guide to

My Portal – Single Page Layout For Your Community.

· Web Dev Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

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



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="http://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})
    })
})

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!

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda

Topics:

Published at DZone with permission of Andrey Prikaznov, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}