Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Galera, boa noite!
Estou aprendendo html e css há alguns dias. Consegui esse resultado abaixo com alguns tutos scripts prontos. Já desvendei a maioria dos itens, menos as transições....
Vocês poderiam me dar algumas dicas de organização? NO MODO HTML5? essa é a index.
ficará mais ou menos assim. /applications/core/interface/imageproxy/imageproxy.php?img=https://lh4.googleusercontent.com/--aU_ibmdlGs/UF9oRxBFI_I/AAAAAAAAAtw/f76OlaUVMUk/s1072/site%252520proposta.jpg&key=8c87da01eedee40b661d2c4dd09f3091222826e2e95e02fb774a2d5889a30e19" alt="site%2520proposta.jpg" />
<!doctype html>
<html lang=pt-br>
<head>
<meta charset="utf-8">
<title>Snake Portal</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="Eventos, Musica Eletônica, Rock n Roll, Sabará, Sabará - Minas Gerais, Belo horizonte, Musica, Portal Musica, Eletro, Trance, Psy">
<meta name="keywords" content="Eventos, Musica Eletônica, Rock n Roll, Sabará, Sabará - Minas Gerais, Belo horizonte, Musica, Portal Musica, Eletro, Trance, Psy">
<link rel="shortcut icon" href="Img/favicon.png">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/styleslogin.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/Circles/democircle.css" />
<link rel="stylesheet" type="text/css" href="css/Circles/cammoncircle.css" />
<link rel="stylesheet" type="text/css" href="css/Circles/stylecircle.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,700' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="js/Circles/jquery.min.js"></script>
<script src="js/Circles/csscustom.js"></script>
<script type="text/javascript" src="js/Circles/modernizr.custom.js"></script>
<!--[if lte IE 8]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
</head>
<body>
<section>
<div id="conteudo">
<div id ="corpo">
<!---*************
AQUI COMEÇA O SLIDER
----------*******--->
<noscript>
<style>
.cn-images img{position: relative;display: block;border-bottom: 5px solid #d0ab47;}
.cn-slideshow{height: auto;}
</style>
</noscript>
<script id="barTmpl" type="text/x-jquery-tmpl">
<div class="cn-bar">
<div class="cn-nav">
<a href="#" class="cn-nav-prev">
<span>Previous</span>
<div style="background-image:url(${prevSource});"></div>
</a>
<a href="#" class="cn-nav-next">
<span>Next</span>
<div style="background-image:url(${nextSource});"></div>
</a>
</div><!-- cn-nav -->
<div class="cn-nav-content">
<div class="cn-nav-content-prev">
<span>Imagem Anterior</span>
<h3>${prevTitle}</h3>
</div>
<div class="cn-nav-content-current">
<span>Atual</span>
<h2>${currentTitle}</h2>
</div>
<div class="cn-nav-content-next">
<span>Próxima imagem</span>
<h3>${nextTitle}</h3>
</div>
</div><!-- cn-nav-content -->
</div><!-- cn-bar -->
</script>
<div class="wrapper">
<div id="cn-slideshow" class="cn-slideshow">
<div class="cn-images">
<img src="Img/Caixa/Caixa/image-1.jpg" alt="image01" title="Evento 01" data-thumb="Img/Caixa/Caixa/image-1.jpg" style="display:block;"/>
<img src="Img/Caixa/Caixa/image-2.jpg" alt="image02" title="Evento 02" data-thumb="Img/Caixa/Caixa/image-2.jpg"/>
<img src="Img/Caixa/Caixa/image-3.jpg" alt="image03" title="Evento 03" data-thumb="Img/Caixa/Caixa/image-3.jpg"/>
<img src="Img/Caixa/Caixa/image-4.jpg" alt="image04" title="" data-thumb="Img/Caixa/Caixa/image-4.jpg"/>
</div><!-- cn-images -->
</div><!-- cn-slideshow -->
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="js/jquery.slideshow.js"></script>
<script type="text/javascript">
$(function() {
$('#cn-slideshow').slideshow();
});
</script>
<!--------
PATROCINADORES CIRCLE
------------------------>
</div>
</section>
<!--------
COMEÇO DO HEADER
------------------------>
<header>
<div id="logo">
</div>
<nav>
<!---------------------
PARTE DOS MENUS
----------------------->
<nav id="menutotal">
<ul>
<li id="inicio"><a href="#"></a></li>
<li id="eventos"><a href="#"></a></li>
<li id="news"><a href="#"></a></li>
<li id="galeria"><a href="#"></a></li>
<li id="contato"><a href="#"></a></li>
<li id="cadastro"><a href="#"></a><li>
</ul>
<nav class="menu2">
<ul>
<li><a href="#">LOCAIS</a></li>
<li><a href="#">TRABALHOS / DESIGN</a></li>
<li><a href="#">PATROCINIOS</a></li>
<li><a href="#">TRANSMISÃO AO VIVO</a></li>
<li><a href="#">INSPIRAÇÕES</a></li>
</ul>
</nav>
</nav>
</nav>
<section >
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1"></div>
<div class="ch-info-back">
<h3>BRUNO GOULART</h3>
<p>SNAKE BG <a href="https://www.facebook.com/bgoulart13">FACEBOOK</a></p>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-2">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-2"></div>
<div class="ch-info-back">
<h3>BRUNO GOULART</h3>
<p>by SNAKE BG <a href="https://www.facebook.com/bgoulart13">FACEBOOK</a></p>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-3">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-3"></div>
<div class="ch-info-back">
<h3>BRUNO GOULART</h3>
<p>SNAKE BG <a href="https://www.facebook.com/bgoulart13">FACEBOOK</a></p>
</div>
</div>
</div>
</div>
</li>
</ul>
</section>
</div>
</div>
</header>
<footer>
<div id="footer">
</div>
</footer>
</body>
<!------------
<section>
<div id="main">
<h1>Registre-se e receba nossas atualizações!</h1>
<form class="" method="post" action="">
<div class="row email">
<input type="text" id="email" name="email" placeholder="Email" />
</div>
<div class="row pass">
<input type="password" id="password1" name="password1" placeholder="Password" />
</div>
<div class="row pass">
<input type="password" id="password2" name="password2" placeholder="Password (repeat)" disabled="true" />
</div>
<!-- The rotating arrow > MUDAR AQUI!!!!
<div class="arrowCap"></div>
<div class="arrow"></div>
<p class="meterText">POTÊNCIA</p>
<input type="submit" value="Register" />
</form>
<script src="js/login/jquery-1.7.2.min.js"></script>
<script src="js/login/jquery.complexify.js"></script>
<script src="js/login/script.js"></script>
</section>------------>
</html>Dei uma melhorada mas o footer não aparece... alguma ideia?
Carregando comentários...