/gist:2036312

## gistfile1.txt
//html

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="css/mobile.css" />
        <script src="js/jquery-1.7.1.js"> </script>
        <script src="js/jq-mobile.js"></script>
     <title></title>
    </head>
    <body>
    <div id="container"> <!-- container -->
        <div id="home"> <!-- home -->
            <div id="header"> <!-- header -->
                <span class="logo">Cesar</span>
                <span class="slogan">Photografo</span>
            </div> <!-- end header -->

            <div class="menu"> <!-- menu -->
                        <ul>
                    <li class="submenu">Ensaios</li>
                    <ul>
                        <li>Pessoas</li>
                        <li>Outros</li>

                    </ul>
                    <li>Paisagens</li>
                    <li>Quem somos</li>
                    <li>Contato</li>

                </ul>
            </div> <!-- end menu -->
            <div class="footer">
                <div class="texto">
                    <p>Todos os direitos para mim rsrs.</p>
                </div>
            </div>
        </div> <!-- end home -->

          <div id="ensaios"> <!-- ensaios -->

            <div class="menu"> <!-- menu -->
                <ul>
                    <li>Home</li>
                </ul>
            </div> <!-- end menu -->
        <div id="pessoas">
            <h1> Pessoas</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        </div>
        <div id="outros">
             <h1>Outros</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        </div>

            <div class="footer"></div>
        </div> <!-- end ensaios -->

          <div id="paisagens"> <!-- paisagens -->

            <div class="menu"> <!-- menu -->
                <ul>
                    <li>Home</li>
                </ul>
            </div> <!-- end menu -->
        <div class="content">
            <h1> Arvores</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        </div>


            <div class="footer"></div>
        </div> <!-- end paisagens -->

        <div id="quemsomos"> <!-- quemsomos -->

            <div class="menu"> <!-- menu -->
                <ul>
                    <li>Home</li>
                </ul>
            </div> <!-- end menu -->
        <div class="content">
            <h1> Quem Somos</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        </div>


            <div class="footer"></div>
        </div> <!-- end quemsomos -->

         <div id="contato"> <!-- contato -->

            <div class="menu"> <!-- menu -->
                <ul>
                    <li>Home</li>
                </ul>
            </div> <!-- end menu -->
        <div id="conteudo">
            <h1> Contato</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        </div>


            <div class="footer"></div>
            </div> <!--contato-->
    </div>  <!-- end container -->

    </body>
</html>


//css

body{
    font-family: Helvetica,Arial,sans-serif;
    margin: 0;
}
#home,
#ensaios,
#paisagens,
#contato,
#quemsomos{
    margin-bottom:10px;
}
#header{
    background: url('../img/bg_header.jpg') repeat-x #585451;
    height:auto;
    margin-bottom:10px;
    padding:2px;
}
    .logo{
      font-size:45px;
      color:#ccc;
      margin-left:20px;
    }
    .slogan{
      font-size:25px;
      font-weight:bold;
      color:#ccc;
      font-style:italic;
      text-align:right;
      margin-left:3px;
      vertical-align:-70%; /* vertical align ajustar o alinhamento vertical só funciona depois de definido o lineheight */
    }
.menu{ /* centralização horizontal */
    text-align:center;
}
.menu *{ /* centralização horizontal */
    margin: 0 auto;
}
.menu ul{
    list-style-type:none;
    color:#fff;
    font-weight:bold;
    margin-left:-40px;
}
.menu ul li {
    background: url('../img/bg_menu.jpg') repeat-x #95d2f1;
    width:200px;
    height:35px;
    line-height:35px;
    margin-bottom:10px;
    border-radius: 5px;
}
.menu ul li:hover{
    background: #CCC;
}
.menu ul > ul li{
    background:#999;
}

.submenu{
    background: url('../img/mais.png')  no-repeat #95d2f1 15px center  !important; /* dando prioridade para o sinal de + */
}
.footer{
    background: url('../img/bg_footer.jpg') repeat-x #000;
    height:50px;
    position: absolute;


}

//jq

$(document).ready(function() {

    function viewheight(){
      return $(window).height();
    }
    function viewwidth(){
      return $(window).width();
    }

    function mudaraltura(ids){
      var arr_id, i;
      arr_id = ids;

      for (i = 0; i < ids.length; i += 1){
          $(ids[i]).height(viewheight());

      }

    }

    function alturamenu(){
        return $('#menu').height();

    }

    function alturaheader(){
        return $('#header').height();
    }

    function efeito(seletores, velocidade) {
        $(seletores).click(function(){
            $(seletores).next().toggle(velocidade);
        });
    }

    function hide(seletores){
        $(seletores).next().hide();
    }

    hide('.submenu');
    efeito('.submenu','slow');

    mudaraltura([
                    '#home',
                    '#ensaios',
                    '#paisagens',
                    '#quemsomos',
                    '#contato'
                ]);

     $('.footer').width(viewwidth());
     $('.footer').css('top', viewheight() - ( alturaheader() + alturamenu() ));
    //alert(soma);
});
	//html

	<!DOCTYPE html>
	<html lang="pt-br">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="stylesheet" href="css/mobile.css" />
	<script src="js/jquery-1.7.1.js"> </script>
	<script src="js/jq-mobile.js"></script>
	<title></title>
	</head>
	<body>
	<div id="container"> <!-- container -->
	<div id="home"> <!-- home -->
	<div id="header"> <!-- header -->
	<span class="logo">Cesar</span>
	<span class="slogan">Photografo</span>
	</div> <!-- end header -->

	<div class="menu"> <!-- menu -->
	<ul>
	<li class="submenu">Ensaios</li>
	<ul>
	<li>Pessoas</li>
	<li>Outros</li>

	</ul>
	<li>Paisagens</li>
	<li>Quem somos</li>
	<li>Contato</li>

	</ul>
	</div> <!-- end menu -->
	<div class="footer">
	<div class="texto">
	<p>Todos os direitos para mim rsrs.</p>
	</div>
	</div>
	</div> <!-- end home -->

	<div id="ensaios"> <!-- ensaios -->

	<div class="menu"> <!-- menu -->
	<ul>
	<li>Home</li>
	</ul>
	</div> <!-- end menu -->
	<div id="pessoas">
	<h1> Pessoas</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
	</div>
	<div id="outros">
	<h1>Outros</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
	</div>

	<div class="footer"></div>
	</div> <!-- end ensaios -->

	<div id="paisagens"> <!-- paisagens -->

	<div class="menu"> <!-- menu -->
	<ul>
	<li>Home</li>
	</ul>
	</div> <!-- end menu -->
	<div class="content">
	<h1> Arvores</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
	</div>


	<div class="footer"></div>
	</div> <!-- end paisagens -->

	<div id="quemsomos"> <!-- quemsomos -->

	<div class="menu"> <!-- menu -->
	<ul>
	<li>Home</li>
	</ul>
	</div> <!-- end menu -->
	<div class="content">
	<h1> Quem Somos</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
	</div>


	<div class="footer"></div>
	</div> <!-- end quemsomos -->

	<div id="contato"> <!-- contato -->

	<div class="menu"> <!-- menu -->
	<ul>
	<li>Home</li>
	</ul>
	</div> <!-- end menu -->
	<div id="conteudo">
	<h1> Contato</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
	</div>


	<div class="footer"></div>
	</div> <!--contato-->
	</div> <!-- end container -->

	</body>
	</html>


	//css

	body{
	font-family: Helvetica,Arial,sans-serif;
	margin: 0;
	}
	#home,
	#ensaios,
	#paisagens,
	#contato,
	#quemsomos{
	margin-bottom:10px;
	}
	#header{
	background: url('../img/bg_header.jpg') repeat-x #585451;
	height:auto;
	margin-bottom:10px;
	padding:2px;
	}
	.logo{
	font-size:45px;
	color:#ccc;
	margin-left:20px;
	}
	.slogan{
	font-size:25px;
	font-weight:bold;
	color:#ccc;
	font-style:italic;
	text-align:right;
	margin-left:3px;
	vertical-align:-70%; /* vertical align ajustar o alinhamento vertical só funciona depois de definido o lineheight */
	}
	.menu{ /* centralização horizontal */
	text-align:center;
	}
	.menu { / centralização horizontal */
	margin: 0 auto;
	}
	.menu ul{
	list-style-type:none;
	color:#fff;
	font-weight:bold;
	margin-left:-40px;
	}
	.menu ul li {
	background: url('../img/bg_menu.jpg') repeat-x #95d2f1;
	width:200px;
	height:35px;
	line-height:35px;
	margin-bottom:10px;
	border-radius: 5px;
	}
	.menu ul li:hover{
	background: #CCC;
	}
	.menu ul > ul li{
	background:#999;
	}

	.submenu{
	background: url('../img/mais.png') no-repeat #95d2f1 15px center !important; /* dando prioridade para o sinal de + */
	}
	.footer{
	background: url('../img/bg_footer.jpg') repeat-x #000;
	height:50px;
	position: absolute;


	}

	//jq

	$(document).ready(function() {

	function viewheight(){
	return $(window).height();
	}
	function viewwidth(){
	return $(window).width();
	}

	function mudaraltura(ids){
	var arr_id, i;
	arr_id = ids;

	for (i = 0; i < ids.length; i += 1){
	$(ids[i]).height(viewheight());

	}

	}

	function alturamenu(){
	return $('#menu').height();

	}

	function alturaheader(){
	return $('#header').height();
	}

	function efeito(seletores, velocidade) {
	$(seletores).click(function(){
	$(seletores).next().toggle(velocidade);
	});
	}

	function hide(seletores){
	$(seletores).next().hide();
	}

	hide('.submenu');
	efeito('.submenu','slow');

	mudaraltura([
	'#home',
	'#ensaios',
	'#paisagens',
	'#quemsomos',
	'#contato'
	]);

	$('.footer').width(viewwidth());
	$('.footer').css('top', viewheight() - ( alturaheader() + alturamenu() ));
	//alert(soma);
	});