LOGIN
SEARCH
PROFILE
keys: ↑ ↓
LOGOUT
INDEX
MEMBERS
keys: ↑ ↓
HOME
PORTAL
PLAY ALONG
PLAY with WORDS
PLAY with GRAPHICS
PLAY with SOUNDS
PLAY with CODES
PLAY with PROJECTS
keys: ← →
Guest Access
Register:
Members:



GAMEFACE101 » MEDIA » PLAY with CODE! » PLAY with CODE (scripts and software) » CSS HTML JS/JQ (WEB DESIGN) »G101 + HTML = THE FRONT PAGES

View previous topic View next topic Go down Message [Page 1 of 1]

Administrator
Administrator
 #1 G101 + HTML = THE FRONT PAGES Empty G101 + HTML = THE FRONT PAGES 5/1/2013, 5:39 am
Loading

G@MeF@Ce

G@MeF@Ce
Administrator
Administrator
Administrator
profile
FRONT PAGE 1


G101 + HTML = THE FRONT PAGES Front_10_800x600

*before you try the test_page, know that you can return to this topic by clicking on the header GAMEFACE101.COM*

TEST_PAGE:
http://gameface101.playogame.com/h9-front_page

In this template there is no doc type, some css, a script for the menu, images, plenty of links, and messy comments, this is just an early version of this post and this free template, both will improve with each version.

HTML: version 1
Code:
<html>
</***Title for Page Tab (start)********************************/>
<!--HEAD HEAD HEAD HEAD HEAD HEAD HEAD HEAD HEAD HEAD HEAD HEAD-->

<head>
<style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ffffff;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:2px solid #808080;/* */
}

.submenu{
margin-bottom: 0.5em;
}
</style>

<script type="text/javascript">

/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only

if (document.getElementById){ http://DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
   if(document.getElementById){
   var el = document.getElementById(obj);
   var ar = document.getElementById("masterdiv").getElementsByTagName("span"); http://DynamicDrive.com change
      if(el.style.display != "block"){ http://DynamicDrive.com change
         for (var i=0; i<ar.length; i++){
            if (ar[i].className=="submenu") http://DynamicDrive.com change
            ar[i].style.display = "none";
         }
         el.style.display = "block";
      }else{
         el.style.display = "none";
      }
   }
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}

function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}

if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction

if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate

</script>

<!-- FAVICON -->

<LINK REL="SHORTCUT ICON" HREF="http://i33.servimg.com/u/f33/14/43/85/81/favico10.png">
<title>GAMEFACE101.com</title>

<!-- CUSTOM CURSOR -->

<style type="text/css"><!--
a:hover {cursor:url("http://i37.tinypic.com/256sknq.png"), pointer}
--></style>

<style type="text/css"><!--
a:hover {cursor:url("http://i37.tinypic.com/256sknq.png"), auto}
--></style>


</head>

</***Title for Page Tab (end)********************************/>

<!-- CUSTOM_CURSOR -->

<style type="text/css">
.menutitle{

margin-bottom: 4px;
background:url(http://r26.imgfast.net/users/3113/12/83/19/album/g101_b10.png);
background-size:270px 32px;
background-repeat:no-repeat;
background-color:#989898;
color:#000000;
width:250px;
padding:6px;
text-align:left;
font-weight:bold;
/*/*/border:0px solid #303030;/* */
}

.submenu{
margin-bottom: 0.5em;
}
</style>


</***All that is displayed on the page********************************/>

<!-- BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY -->

<body>

    <STYLE type="text/css">
      BODY {

background-image:url('http://r26.imgfast.net/users/3113/12/83/19/album/pr/hotbox10_800x600.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center bottom;

 
 }
    </STYLE>
<body bgcolor="white">
<font color="black">


</***Interactive Header********************************/>
<a href="http://gameface101.playogame.com/t1637-g101-html-the-front-pages#21769"><img src="http://r26.imgfast.net/users/3113/12/83/19/album/g101_h13.png" border="0" alt="gameface101"></a>


<!-- Keep all menus within masterdiv-->
<div id="masterdiv">

   <div class="menutitle" onclick="SwitchMenu('sub1')">MULTIMEDIA</div>
   <span class="submenu" id="sub1">
      - <a href="http://gameface101.playogame.com/f3-play-with-words-literary-analysis">Play with Words</a><br>
      - <a href="http://gameface101.playogame.com/f4-play-with-sounds-audio-analysis">Play with Sounds</a><br>
      - <a href="http://gameface101.playogame.com/f5-play-with-graphics-visual-analysis">Play with Graphics</a><br>
      - <a href="http://gameface101.playogame.com/f6-play-with-projects-demos-media">Play with Projects</a>
   </span>

   <div class="menutitle" onclick="SwitchMenu('sub2')">URBAN CULTURE</div>
   <span class="submenu" id="sub2">
      - <a href="http://gameface101.playogame.com/f64-play-alongcommunity-games">Play Along</a><br>
      - <a href="http://gameface101.playogame.com/f17-all-about-games-arcade-computer-console-etc">All About Games</a><br>
                - <a href="http://gameface101.playogame.com/f107-communicatepick-a-topic-any-topic">Communicate</a><br>
                - <a href="http://gameface101.playogame.com/f108-crafts-hobbiesfrom-collections-to-creations">Crafts and Hobbies</a><br>
      - <a href="http://gameface101.playogame.com/f109-common-entertainmentfrom-preference-to-opinion">Common Entertainment</a>
   </span>

   <div class="menutitle" onclick="SwitchMenu('sub3')">UNDERGROUND GAMING</div>
   <span class="submenu" id="sub3">
      - <a href="http://gameface101.playogame.com/f38-gmefce101ceative-support-center">Creative Support</a><br>
                - <a href="http://gameface101.playogame.com/c18-thunder-dome">The Thunder Dome</a><br>
   </span>
   
   <div class="menutitle" onclick="SwitchMenu('sub4')">LOTS OF LINKS</div>
   <span class="submenu" id="sub4">
      - <a href="http://www.google.com">Google</a> 
      - <a href="http://www.yahoo.com">Yahoo</a> 
      - <a href="http://www.hotmail.com">Hotmail</a> 
      - <a href="http://www.youtube.com">You Tube</a> 
      - <a href="http://www.soundcloud.com">Sound Cloud</a> 
   </span>

   <div class="menutitle" onclick="SwitchMenu('sub5')">about</div>

   <span class="submenu" id="sub5">
                website/forum = http://gameface101.playogame.com<br>
      since - 10-8-2009<br>
      powered by forumotion<br>
      webmaster - G@MeF@Ce<br>
   </span>

</div>

   <div class="menutitle" onclick="SwitchMenu('sub6')">contact</div>

   <span class="submenu" id="sub6">
                email: mrgameface101@gmail.com<br>
   </span>

</div>

  </body>

</***All that is displayed on the page********************************/>
  </html>

This template is free to use so feel free to give credit to the following:
G@MeF@Ce = html,css,graphics
Martial B = switch Menu
http://getElementById.com
www.dynamicdrive.com


FUN_FACT: I made that drawing of a robot more than 10 years ago, it's another OLD_SCHOOL_ART.




Administrator
Show Signature
Administrator
https://www.dropbox.com/sh/i47rig99qhrvn8s/4m5HvsM2fD http://g4m3f4c3.deviantart.com https://www.facebook.com//pages/Gameface101/332331300127008 https://twitter.com//mr_gameface101 https://soundcloud.com/schurr https://www.youtube.com/user/MrGameface101?feature=watch

View previous topic View next topic Back to top Message [Page 1 of 1]

GAMEFACE101 » MEDIA » PLAY with CODE! » PLAY with CODE (scripts and software) » CSS HTML JS/JQ (WEB DESIGN) »G101 + HTML = THE FRONT PAGES

 

Chatbox system disabled
Personal messaging disabled