skvggor/gist:2036313

## 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/styles.css" />
        <script src="js/jquery.js"> </script>
        <script src="js/source.js"></script>
        <title>CESAR Professional Photographer</title>
    </head>
    <body>

        <div id="container"> <!-- Container -->

            <div id="home"> <!-- page Home -->

                <div id="header"> <!-- Header -->
                    <span class="logo">Cesar</span>
                    <span class="slogan">Photographer</span>
                </div> <!-- end Header -->

                <div class="menu"> <!-- Menu -->
                    <ul>
                        <li class="submenu"><a href="#">Ensaios</a></li>
                        <ul>
                            <li class="pessoas"><a href="#">Pessoas</a></li>
                            <li class="outros"><a href="#">Outros</a></li>

                        </ul>
                        <li><a href="#">Paisagens</a></li>
                        <li><a href="#">Quem somos</a></li>
                        <li><a href="#">Contato</a></li>
                    </ul>
                </div> <!-- end Menu -->

                <div class="footer"> <!-- Footer -->
                    <div class="texto">
                        <p>Alguns direitos reservados <span class="bold">Marcker &copy;</span> 2012 </p>
                    </div>
                </div> <!-- end Footer -->

            </div> <!-- end page Home -->

            <div id="ensaios"> <!-- page 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> <!-- end page Ensaios -->

            <div id="paisagens"> <!-- page 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> <!-- end page Paisagens -->

            <div id="quemsomos"> <!-- page 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> <!-- end page Quemsomos -->

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

                <div class="menu"> <!-- Menu -->
                    <ul>
                        <li>Home</li>
                    </ul>
                </div> <!-- end Menu -->

                <div id="content">
                    <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> <!-- end page Contato-->

        </div>  <!-- end Container -->

    </body>
</html>

//css

body{
    font-family:Helvetica,Arial,sans-serif;
    margin:0;
}

.bold {
    font-weight:bold;
}

    #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:#999;
            font-style:italic;
            text-align:right;
            margin-left:3px;
            vertical-align:-70%;
        }

    .menu{
        text-align:center;
    }

    .menu *{
        margin: 0 auto;
    }

    .menu ul{
        list-style-type:none;
        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 + */
    }

    .menu a{
        text-decoration:none;
        color:#FFF;
    }

    .footer{
       position:absolute;
       left:0px;
       bottom:0px;
       height:5%;
       width:100%;
       background:#999;
    }

        .footer p{
            color:#FFF;
            text-align:center;
        }

//jquery

$(document).ready(function() {

    function viewport_height(){
      return $(window).height();
    }

    function viewport_width(){
      return $(window).width();
    }

    function ajustar_viewport(ids){
      var i;

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

      }
    }

    function effect(selectors, speed, event) {
        $(selectors).next().toggle(speed);
    }

    function hidden(selectors){
        $(selectors).next().hide();
    }

    function scroller(destino) {
        $(document.body).animate({ scrollTop: $(destino).offset().top }, 'slow');
    }

    hidden('.submenu');

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

    $('.submenu').click(function(e){
        effect(this, 'slow');
        e.preventDefault();
    });

    $('.pessoas').click(function(e) {
        scroller('#pessoas');
        e.preventDefault();
    });

    $('.outros').click(function(e) {
        scroller('#outros');
        e.preventDefault();
    });

});
	//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/styles.css" />
	<script src="js/jquery.js"> </script>
	<script src="js/source.js"></script>
	<title>CESAR Professional Photographer</title>
	</head>
	<body>

	<div id="container"> <!-- Container -->

	<div id="home"> <!-- page Home -->

	<div id="header"> <!-- Header -->
	<span class="logo">Cesar</span>
	<span class="slogan">Photographer</span>
	</div> <!-- end Header -->

	<div class="menu"> <!-- Menu -->
	<ul>
	<li class="submenu"><a href="#">Ensaios</a></li>
	<ul>
	<li class="pessoas"><a href="#">Pessoas</a></li>
	<li class="outros"><a href="#">Outros</a></li>

	</ul>
	<li><a href="#">Paisagens</a></li>
	<li><a href="#">Quem somos</a></li>
	<li><a href="#">Contato</a></li>
	</ul>
	</div> <!-- end Menu -->

	<div class="footer"> <!-- Footer -->
	<div class="texto">
	<p>Alguns direitos reservados <span class="bold">Marcker ©</span> 2012 </p>
	</div>
	</div> <!-- end Footer -->

	</div> <!-- end page Home -->

	<div id="ensaios"> <!-- page 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> <!-- end page Ensaios -->

	<div id="paisagens"> <!-- page 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> <!-- end page Paisagens -->

	<div id="quemsomos"> <!-- page 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> <!-- end page Quemsomos -->

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

	<div class="menu"> <!-- Menu -->
	<ul>
	<li>Home</li>
	</ul>
	</div> <!-- end Menu -->

	<div id="content">
	<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> <!-- end page Contato-->

	</div> <!-- end Container -->

	</body>
	</html>

	//css

	body{
	font-family:Helvetica,Arial,sans-serif;
	margin:0;
	}

	.bold {
	font-weight:bold;
	}

	#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:#999;
	font-style:italic;
	text-align:right;
	margin-left:3px;
	vertical-align:-70%;
	}

	.menu{
	text-align:center;
	}

	.menu *{
	margin: 0 auto;
	}

	.menu ul{
	list-style-type:none;
	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 + */
	}

	.menu a{
	text-decoration:none;
	color:#FFF;
	}

	.footer{
	position:absolute;
	left:0px;
	bottom:0px;
	height:5%;
	width:100%;
	background:#999;
	}

	.footer p{
	color:#FFF;
	text-align:center;
	}

	//jquery

	$(document).ready(function() {

	function viewport_height(){
	return $(window).height();
	}

	function viewport_width(){
	return $(window).width();
	}

	function ajustar_viewport(ids){
	var i;

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

	}
	}

	function effect(selectors, speed, event) {
	$(selectors).next().toggle(speed);
	}

	function hidden(selectors){
	$(selectors).next().hide();
	}

	function scroller(destino) {
	$(document.body).animate({ scrollTop: $(destino).offset().top }, 'slow');
	}

	hidden('.submenu');

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

	$('.submenu').click(function(e){
	effect(this, 'slow');
	e.preventDefault();
	});

	$('.pessoas').click(function(e) {
	scroller('#pessoas');
	e.preventDefault();
	});

	$('.outros').click(function(e) {
	scroller('#outros');
	e.preventDefault();
	});

	});