Skip to content

@marcker /gist:2036313 forked from anonymous/gist:2036312
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Cesar Mobile Site
//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();
});
});
@marcker
Owner

Editar até 19/03/2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.