Sexta Igreja - WebSite
HTML
<div id="wrap">
<div id="wrap-content">
<div id="header">
<img id="logo-image" alt="Logo Sexta Igreja" src="Images/Logo.jpg" />
<div id="menu-title">
<ul id="menu">
<li class="gradient"><a href="/Home/nossaigreja">nossa igreja</a></li>
<li class="gradient"><a href="/Home/mensagens">mensagens</a></li>
<li class="gradient"><a href="/Home/sociedades">sociedades</a></li>
<li class="gradient"><a href="/Home/utilidades">utilidades</a></li>
<li class="gradient"><a href="/Home/contato">contato</a></li>
</ul>
<h1>SEXTA IGREJA PRESBITERIANA</h1>
<p>BELO HORIZONTE</p>
</div>
</div>
<div id="content">
<div id="home-top">
<div id="home-content">
<div id="home-text">
<p>Baixe o novo CD</p>
<p>Povo da Aliança</p>
<p>agora mesmo</p>
<p class="top-space">Aproveite e aprenda</p>
<p>a todas as musicas</p>
</div>
<img id="home-cd" alt="CD Povo da Aliança" src="Images/Capa-CD.png" />
</div>
<div id="home-buttons">
<ul class="buttons">
<li class="gradient">
<div class="button">
<a href="#" title="CD Povo da Aliança">
<span class="button-title">CD Povo da Aliança</span>
<span>Clique e faça o download</span>
</a>
<p>1</p>
</div>
</li>
<li class="gradient">
<div class="button">
<a href="#" title="GAM - Missionários">
<span class="button-title">GAM - Missionários</span>
<span>Notícias e Missões</span>
</a>
<p>2</p>
</div>
</li>
<li class="gradient">
<div class="button">
<a href="#" title="Sociedades...
CSS
body
{
font-size: 12px;
font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
color: #232323;
background-color: #fff;
margin:0px;
}
h1
{
color: #C40000;
font-size:52px;
padding:0px;
margin:0px;
}
p
{
margin:0px;
}
a
{
text-decoration:none;
}
/* Main
-----------------------------------------------------------*/
div#wrap
{
width:1024px;
margin:20px auto;
doverflow:auto;
position:relative;
}
/* Header
-----------------------------------------------------------*/
div#header
{
border-bottom: 1px solid #808080;
}
div#header img#logo-image
{
max-width:200px;
max-height:200px;
}
div#header div#menu-title
{
width:870px;
margin:0px;
font-weight:bold;
display:inline-block;
}
div#header div#menu-title h1
{
text-align:center;
padding:0px 90px;
line-height:50px;
}
div#header div#menu-title p
{
text-align:center;
color: #C40000;
font-size:22px;
padding:0px;
margin:0px;
}
/* Menu
-----------------------------------------------------------*/
ul#menu
{
margin:0px;
padding:0px 0px 15px;
list-style-type:none;
}
ul#menu li
{
display: inline-block;
text-align: center;
}
ul#menu li a
{
text-decoration: none;
padding:16px 0px;
margin:0px;
width:170px;
display: block;
color: #FFFFFF;
}
ul#menu li a:hover
{
font-weight: bold;
background-color: #757575;
}
/* Content
-----------------------------------------------------------*/
div#content
{
margin-top:15px;
}
/* Page Home
-----------------------------------------------------------*/
div#home-top
{
background-color:Red;
overflow: hidden;
}
div#home-content
{
float:left;
max-width:780px;
overflow:auto;
}
img#home-cd
{
/*display:inline-block;*/
float:left;
}
div#home-text
{
float:left;
/*display:inline-block;*/
margin:0px 20px;
}
div#home-text p
{
font-size:30px;
}
div#home-buttons
{
...