Part of My Work on EEPIS New Site

About two months ago I designed a new theme for Electronic Engineering Polytechnic Institute of Surabaya (EEPIS). There are some requirements for the new theme, one of them is to simplify the menu and its contents. EEPIS is one of the best polytechnic in Indonesia which has so many information to share on its website, and I have to make it to look simple at first look.

Before I discuss the new look of EEPIS site, below is the screenshot of previous theme.

My design on EEPIS new look

 

For the new theme, I decided to use a large picture for its background as it is become a trend in recent years and also EEPIS has a beautiful building which is great to use as a background. The background will stay on its position when user scroll down their screen. This is the result of my design.

My new design on EEPIS new look

 

To make the background stay on its position when user scroll down their picture, I use “fixed” for “position” in my CSS and put the style on the outer div, before my wrapper div. For example like the div below:

<div id="page">
      <div id="wrapper">
      <div id="header"></div>
      <div id="content"></div>
      <div id="footer"></div>
     </div>
</div>

 

I put the background style on div page and below is the CSS script to make background stay on its position

#page{
    background: url(images/myimg.jpg) no-repeat center center fixed;
    width: 100%;
    display: table;
    padding-bottom: 15px;
}

To simplify the menu, I use mega menu to make it look elegant and simple. I use the tutorial from tutsplus and this is the result.

So, I need your comment for this new design of EEPIS site. It is possible that EEPIS will need another theme by the time they have a new logo.

 

Be Sociable, Share!

Related Posts:

5 Comments

Add a Comment

Your email address will not be published. Required fields are marked *