InícioPersonalizar página HTML
+2
Shek
Guilherme3f
6 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Personalizar página HTML
por Guilherme3f 13.11.16 19:03
Detalhes da questão
Endereço do fórum: http://teste-kmz.forumeiros.com/forum
Versão do fórum: PunBB
Descrição
Olá,tudo bem?
Venho aqui dar um pouco de trabalho para vocês rs.
- eu fiz uma pagina html,mas sou amador ainda,eu editei o maximo do que eu entendo sobre html,ficou algumas coisas que não conseguir editar,pois desconheço a "tag" que exuta tal função.
Bom eu gostaria de alinhas essas caixas uma do lado da outra com um espaçamento.veja:
https://imgur.com/a/kH5zr
e tambem essa só que está não consegui reduzir o tamanho dela:
https://imgur.com/a/mUHog
Ah mais algumas coisa que gostaria de adicionar
pode me mostrar quais Tags e execuções usaram para obter tal efeito?estou muito querendo aprender sobre html,css,jquery e talls e isso me ajudaria a aprender mais!
- Importante:
- Eu gostaria de manter o sigilo do meu html apesar de não ser original meu,teria como?
e se na edição eu errei em algum lugar podem me informar?
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Personalizar página HTML
por Shek 14.11.16 14:21
Boa tarde.
Fico feliz por saber que deseja aprender.
Por favor, poderia nos indicar o código que usa? Sobre o tal espaçamento, eu não entendi bem. Ele está saindo fora da coluna da esquerda e deseja remover este espaço que faz ela sair da coluna, é isso?
Obrigado por suas informações.
Até mais!
Fico feliz por saber que deseja aprender.
Por favor, poderia nos indicar o código que usa? Sobre o tal espaçamento, eu não entendi bem. Ele está saindo fora da coluna da esquerda e deseja remover este espaço que faz ela sair da coluna, é isso?Obrigado por suas informações.
Até mais!
Shek- Principal Contribuidor
- Membro desde : 11/04/2009
Mensagens : 19006
Pontos : 22969 -
Re: Personalizar página HTML
por Guilherme3f 14.11.16 14:25
é muito interessante isso html,css,jquery 
bom na coluna B eu usei "padding" por que ele era maior do que a imagem representa,mais agora para a coluna A eu não sei qual codigo usar,e na 2° imagem eu não consegui alterar o tamanho com "padding"
Eu poderia passar a html por "pm"?
bom na coluna B eu usei "padding" por que ele era maior do que a imagem representa,mais agora para a coluna A eu não sei qual codigo usar,e na 2° imagem eu não consegui alterar o tamanho com "padding"
Eu poderia passar a html por "pm"?
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Personalizar página HTML
por Shek 14.11.16 14:55
Não... Passe o código aqui no tópico, porque, se houver pessoas para ajudá-lo, eles vão ajudá-lo com o código que estiver aqui!
Shek- Principal Contribuidor
- Membro desde : 11/04/2009
Mensagens : 19006
Pontos : 22969 -
Re: Personalizar página HTML
por Guilherme3f 14.11.16 15:01
mas eu gostaria de manter em sigilo minha pagina html,pois quero que seja unica...
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Personalizar página HTML
por Shek 14.11.16 15:04
Isso é meio que impossível @Guilherme3f, porque, qualquer um que acessar sua página depois, e apertar o Ctrl + U, terá acesso ao seu código sem qualquer problema. Isso é inevitável, infelizmente.
Shek- Principal Contribuidor
- Membro desde : 11/04/2009
Mensagens : 19006
Pontos : 22969 -
Re: Personalizar página HTML
por Guilherme3f 14.11.16 15:26
posso postar e assim que for finalizado esse topico posso retirar?
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Personalizar página HTML
por Cream 14.11.16 16:58
Olá autor,
Você pode retirar depois que o tópico for finalizado. Mas lembre-se, seria interessante você deixar o código a vista para que outros membros também possam aprender com ele.
Até mais!
Você pode retirar depois que o tópico for finalizado. Mas lembre-se, seria interessante você deixar o código a vista para que outros membros também possam aprender com ele.
Até mais!
Cream- Membro Entusiasta
- Membro desde : 15/12/2010
Mensagens : 8540
Pontos : 11644 -
Re: Personalizar página HTML
por Guilherme3f 14.11.16 17:26
Ok!
Vou passar o site onde está minha pagina html,
http://teste-kmz.forumeiros.com/
pode ser assim?
e vocês poderiam me explicar oque é "<meta>" e "<link>"?
Vou passar o site onde está minha pagina html,
http://teste-kmz.forumeiros.com/
pode ser assim?
e vocês poderiam me explicar oque é "<meta>" e "<link>"?
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Personalizar página HTML
por Luiz 15.11.16 9:44
Olá.
Se você entende um pouco de Inglês, deixo aqui um site excelente, no qual eu aprendi o básico a avançado de HTML e CSS:
http://www.w3schools.com/
No mais, estas duas tags, servem para várias funções.
Como por exemplo, você pode usar a tag link para colocar uma CSS externa ao seu fórum. Por exemplo:
Note que: esta é uma tag em que não se coloca conteúdo, por isso ela termina com uma barra ( / ).
Já a tag meta pode definir diversas coisas, como o o SEO de seu site, "UTF", dentre outros. Como exemplo:
Caso tenha mais dúvidas, não exite em comentar.
Atenciosamente.
Se você entende um pouco de Inglês, deixo aqui um site excelente, no qual eu aprendi o básico a avançado de HTML e CSS:
http://www.w3schools.com/
No mais, estas duas tags, servem para várias funções.
Como por exemplo, você pode usar a tag link para colocar uma CSS externa ao seu fórum. Por exemplo:
- Código:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" / >
Note que: esta é uma tag em que não se coloca conteúdo, por isso ela termina com uma barra ( / ).
Já a tag meta pode definir diversas coisas, como o o SEO de seu site, "UTF", dentre outros. Como exemplo:
- Código:
<meta charset="UTF-8" / >
<meta name="description" content="Free Web tutorials" / >
<meta name="keywords" content="HTML,CSS,XML,JavaScript" / >
<meta name="author" content="Hege Refsnes" / >
Caso tenha mais dúvidas, não exite em comentar.
Atenciosamente.
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Re: Personalizar página HTML
por Guilherme3f 15.11.16 13:12
na verdade minnha duvida maior seria no "content" que se encontra dentro da tag meta,eu não entendo o conteudo que se encontra lá dentro...
e alguem pode me ajudar com minha pagina?
e alguem pode me ajudar com minha pagina?
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Personalizar página HTML
por Luiz 15.11.16 13:43
Amigo, para te explicar o que é, preciso que passe o código completo de sua página HTML.
Assim, você também estará ajudando os outros que tem uma dúvida similar a sua.
Atenciosamente.
Assim, você também estará ajudando os outros que tem uma dúvida similar a sua.
Atenciosamente.
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Personalizar página HTML
por Luiz 15.11.16 16:17
Precisamos do código para personalizar.
Sem você passar o código HTML que usa para fazer a página, não teremos como lhe ajudar sem o código. :/
Também, sempre é bom deixar aqui para ajudar os outros que querem um efeito parecido, né?
Até mais.
Sem você passar o código HTML que usa para fazer a página, não teremos como lhe ajudar sem o código. :/
Também, sempre é bom deixar aqui para ajudar os outros que querem um efeito parecido, né?
Até mais.
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Re: Personalizar página HTML
por Guilherme3f 15.11.16 16:50
Aqui está:
- Código:
<!DOCTYPE html>
<html>
<title>Alkware family</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-black.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<body>
<!-- Side Navigation -->
<nav class="w3-sidenav w3-white w3-card-2 w3-animate-left" style="display:none" id="mySidenav">
<h1 class="w3-xxxlarge w3-text-teal">Bem-vindo!</h1>
<a href="http://alkwarefamily.forumeiros.com/forum">Forum</a>
<a href="http://alkwarefamily.forumeiros.com/portal">Portal</a>
<a href="http://alkwarefamily.forumeiros.com/register">Registre-se</a>
<a href="javascript:void(0)" onclick="w3_close()" class="w3-closenav w3-xxxlarge w3-text-theme">Sair<i class="fa fa-remove"></i></a>
</nav>
<!-- Header -->
<header class="w3-container w3-theme w3-padding" id="myHeader">
<i onclick="w3_open()" class="fa fa-bars w3-xlarge w3-opennav"></i>
<div <div class="w3-center">
<h5>Bem-vindo ao forum Alkware</h5>
<h1 class="w3-xxxlarge w3-animate-bottom">Alkware family</h1>
<div class="w3-padding-32">
<button class="w3-btn w3-xlarge w3-dark-grey w3-hover-light-grey" onclick="document.getElementById('id01').style.display='block'" style="font-weight:900;">Inscreva-se</button>
</div>
</div>
</header>
<!-- Modal -->
<div id="id01" class="w3-modal">
<div class="w3-modal-content w3-card-8 w3-animate-top">
<header class="w3-container w3-theme-l1">
<span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn">×</span>
<h4>Ip do A/D:<strong style="color: #9e9e9e;"> Em breve!</strong></h4>
<h4>Servidor em que atuamos:<strong style="color: #9e9e9e;"> Brasil play vicio RPG</strong></h4>
</header>
<div class="w3-padding">
<strong>Venha fazer parte da nossa familia</strong><br />
<p>clike abaixo para se inscrever.</p>
<a class="w3-btn" href="http://alkwarefamily.forumeiros.com/f4-inscreva-se">Inscreva-se</a>
</div>
<footer class="w3-container w3-theme-l1">
<p>Familia Alkware</p>
</footer>
</div>
</div>
<hr>
<h2 class="w3-center" style="width: 225px;">Membros</h2>
<div class="w3-container">
<div class="w3-accordion">
<button onclick="myAccFunc('Demo1')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 200px; height: 50px;">Fundador</button>
<div id="Demo1" class="w3-accordion-content">
<div class="w3-container">
<p>Freez/Searby</p>
</div>
</div>
<button onclick="myAccFunc('Demo2')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 200px; height: 50px;">master</button>
<div id="Demo2" class="w3-accordion-content">
<div class="w3-container">
<p>No member</p>
</div>
</div>
<div class="w3-row-padding w3-center w3-margin-top">
<div class="w3-third">
<div class="w3-card-2 w3-padding-top" style="min-height:460px; width: 300px; cursor:default">
<h4>Historia Alkware</h4>
<p>Nossa Historia</p>
</div>
</div>
</div>
<div class="w3-center">
<h2>TDM'S</h2>
<p w3-class="w3-large"; style="font-size: 12px;">Todos os nossos confrontos em TDM'S!</p>
</div>
<div class="w3-responsive w3-card-4">
<table class="w3-table w3-striped w3-bordered">
<thead>
<tr class="w3-theme">
<th>team</th>
<th>team</th>
<th>result</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alkware</td>
<td>Vegeance</td>
<td>Wins</td>
</tr>
<tr class="w3-white">
<td>Alkware</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
</div>
<hr>
<hr>
<!-- Footer -->
<footer class="w3-container w3-theme-dark w3-padding-16">
<h5>- Alkware -</h5>
<div style="position:relative;bottom:55px;" class="w3-tooltip w3-right">
<span class="w3-text w3-theme-light w3-padding">Voltar para o topo</span>
<a class="w3-text-white" href="#myHeader"><span class="w3-xlarge">
<i class="fa fa-chevron-circle-up"></i></span></a>
</div>
</footer>
<!-- Script for Sidenav, Tabs, Accordions, Progress bars and slideshows -->
<script>
// Side navigation
function w3_open() {
var x = document.getElementById("mySidenav");
x.style.width = "100%";
x.style.textAlign = "center";
x.style.fontSize = "50px";
x.style.paddingTop = "10%";
x.style.display = "block";
}
function w3_close() {
document.getElementById("mySidenav").style.display = "none";
}
// Tabs
function openCity(evt, cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
var activebtn = document.getElementsByClassName("testbtn");
for (i = 0; i < x.length; i++) {
activebtn[i].className = activebtn[i].className.replace(" w3-dark-grey", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " w3-dark-grey";
}
var mybtn = document.getElementsByClassName("testbtn")[0];
mybtn.click();
// Accordions
function myAccFunc(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-dark-grey";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-dark-grey", "");
}
}
// Slideshows
var slideIndex = 1;
function plusDivs(n) {
slideIndex = slideIndex + n;
showDivs(slideIndex);
}
function showDivs(n) {
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
showDivs(1);
// Progress Bars
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width == 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("demoprgr").innerHTML = width * 1 + '%';
}
}
}
</script>
<a href="http://www.forumeiros.com" target="_blank">forumeiros.com</a>
</body>
</html>
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Personalizar página HTML
por Luiz 15.11.16 17:14
Olá.
No código, temos as linhas:
A tag "meta" serve para personalizar sua página na largura.
Já as tags "link" são usadas para usar a folha de estilo CSS da W3-Schools.
Entretanto, tais tags deveriam estar entre a tag "<head>". Deve ter um erro ocorrendo por causa disso.
Tente alterar para:
No mais, o senhor tem alguma dúvida?
Até mais.
No código, temos as linhas:
- Código:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-black.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
A tag "meta" serve para personalizar sua página na largura.
Já as tags "link" são usadas para usar a folha de estilo CSS da W3-Schools.
Entretanto, tais tags deveriam estar entre a tag "<head>". Deve ter um erro ocorrendo por causa disso.
Tente alterar para:
- Código:
<!DOCTYPE html>
<html>
<head>
<title>Alkware family</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-black.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<!-- Side Navigation -->
<nav class="w3-sidenav w3-white w3-card-2 w3-animate-left" style="display:none" id="mySidenav">
<h1 class="w3-xxxlarge w3-text-teal">Bem-vindo!</h1>
<a href="http://alkwarefamily.forumeiros.com/forum">Forum</a>
<a href="http://alkwarefamily.forumeiros.com/portal">Portal</a>
<a href="http://alkwarefamily.forumeiros.com/register">Registre-se</a>
<a href="javascript:void(0)" onclick="w3_close()" class="w3-closenav w3-xxxlarge w3-text-theme">Sair<i class="fa fa-remove"></i></a>
</nav>
<!-- Header -->
<header class="w3-container w3-theme w3-padding" id="myHeader">
<i onclick="w3_open()" class="fa fa-bars w3-xlarge w3-opennav"></i>
<div <div class="w3-center">
<h5>Bem-vindo ao forum Alkware</h5>
<h1 class="w3-xxxlarge w3-animate-bottom">Alkware family</h1>
<div class="w3-padding-32">
<button class="w3-btn w3-xlarge w3-dark-grey w3-hover-light-grey" onclick="document.getElementById('id01').style.display='block'" style="font-weight:900;">Inscreva-se</button>
</div>
</div>
</header>
<!-- Modal -->
<div id="id01" class="w3-modal">
<div class="w3-modal-content w3-card-8 w3-animate-top">
<header class="w3-container w3-theme-l1">
<span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn">×</span>
<h4>Ip do A/D:<strong style="color: #9e9e9e;"> Em breve!</strong></h4>
<h4>Servidor em que atuamos:<strong style="color: #9e9e9e;"> Brasil play vicio RPG</strong></h4>
</header>
<div class="w3-padding">
<strong>Venha fazer parte da nossa familia</strong><br />
<p>clike abaixo para se inscrever.</p>
<a class="w3-btn" href="http://alkwarefamily.forumeiros.com/f4-inscreva-se">Inscreva-se</a>
</div>
<footer class="w3-container w3-theme-l1">
<p>Familia Alkware</p>
</footer>
</div>
</div>
<hr>
<h2 class="w3-center" style="width: 225px;">Membros</h2>
<div class="w3-container">
<div class="w3-accordion">
<button onclick="myAccFunc('Demo1')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 200px; height: 50px;">Fundador</button>
<div id="Demo1" class="w3-accordion-content">
<div class="w3-container">
<p>Freez/Searby</p>
</div>
</div>
<button onclick="myAccFunc('Demo2')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 200px; height: 50px;">master</button>
<div id="Demo2" class="w3-accordion-content">
<div class="w3-container">
<p>No member</p>
</div>
</div>
<div class="w3-row-padding w3-center w3-margin-top">
<div class="w3-third">
<div class="w3-card-2 w3-padding-top" style="min-height:460px; width: 300px; cursor:default">
<h4>Historia Alkware</h4>
<p>Nossa Historia</p>
</div>
</div>
</div>
<div class="w3-center">
<h2>TDM'S</h2>
<p w3-class="w3-large"; style="font-size: 12px;">Todos os nossos confrontos em TDM'S!</p>
</div>
<div class="w3-responsive w3-card-4">
<table class="w3-table w3-striped w3-bordered">
<thead>
<tr class="w3-theme">
<th>team</th>
<th>team</th>
<th>result</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alkware</td>
<td>Vegeance</td>
<td>Wins</td>
</tr>
<tr class="w3-white">
<td>Alkware</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
</div>
<hr>
<hr>
<!-- Footer -->
<footer class="w3-container w3-theme-dark w3-padding-16">
<h5>- Alkware -</h5>
<div style="position:relative;bottom:55px;" class="w3-tooltip w3-right">
<span class="w3-text w3-theme-light w3-padding">Voltar para o topo</span>
<a class="w3-text-white" href="#myHeader"><span class="w3-xlarge">
<i class="fa fa-chevron-circle-up"></i></span></a>
</div>
</footer>
<!-- Script for Sidenav, Tabs, Accordions, Progress bars and slideshows -->
<script>
// Side navigation
function w3_open() {
var x = document.getElementById("mySidenav");
x.style.width = "100%";
x.style.textAlign = "center";
x.style.fontSize = "50px";
x.style.paddingTop = "10%";
x.style.display = "block";
}
function w3_close() {
document.getElementById("mySidenav").style.display = "none";
}
// Tabs
function openCity(evt, cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
var activebtn = document.getElementsByClassName("testbtn");
for (i = 0; i < x.length; i++) {
activebtn[i].className = activebtn[i].className.replace(" w3-dark-grey", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " w3-dark-grey";
}
var mybtn = document.getElementsByClassName("testbtn")[0];
mybtn.click();
// Accordions
function myAccFunc(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-dark-grey";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-dark-grey", "");
}
}
// Slideshows
var slideIndex = 1;
function plusDivs(n) {
slideIndex = slideIndex + n;
showDivs(slideIndex);
}
function showDivs(n) {
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
showDivs(1);
// Progress Bars
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width == 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("demoprgr").innerHTML = width * 1 + '%';
}
}
}
</script>
<a href="http://www.forumeiros.com" target="_blank">forumeiros.com</a>
</body>
</html>
No mais, o senhor tem alguma dúvida?
Até mais.
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Re: Personalizar página HTML
por Guilherme3f 15.11.16 17:18
Se a tag ficar vermelha tem alguma coisa haver ou é normal?
e quem vai me ajudar a editar ela?
e quem vai me ajudar a editar ela?
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Personalizar página HTML
por Luiz 15.11.16 17:24
Bom só é permitida uma questão por tópico...
No mais, poderia dizer qual tag ficou vermelha?
No mais, poderia dizer qual tag ficou vermelha?
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Personalizar página HTML
por Luiz 15.11.16 19:55
Altere o código para:
E diga se ainda fica vermelha.
Atenciosamente.
- Código:
<!DOCTYPE html>
<html>
<head>
<title>Alkware family</title>
<meta name="viewport" content="width=device-width, initial-scale=1" / >
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" / >
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-black.css" / >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" / >
</head>
<body>
<!-- Side Navigation -->
<nav class="w3-sidenav w3-white w3-card-2 w3-animate-left" style="display:none" id="mySidenav">
<h1 class="w3-xxxlarge w3-text-teal">Bem-vindo!</h1>
<a href="http://alkwarefamily.forumeiros.com/forum">Forum</a>
<a href="http://alkwarefamily.forumeiros.com/portal">Portal</a>
<a href="http://alkwarefamily.forumeiros.com/register">Registre-se</a>
<a href="javascript:void(0)" onclick="w3_close()" class="w3-closenav w3-xxxlarge w3-text-theme">Sair<i class="fa fa-remove"></i></a>
</nav>
<!-- Header -->
<header class="w3-container w3-theme w3-padding" id="myHeader">
<i onclick="w3_open()" class="fa fa-bars w3-xlarge w3-opennav"></i>
<div <div class="w3-center">
<h5>Bem-vindo ao forum Alkware</h5>
<h1 class="w3-xxxlarge w3-animate-bottom">Alkware family</h1>
<div class="w3-padding-32">
<button class="w3-btn w3-xlarge w3-dark-grey w3-hover-light-grey" onclick="document.getElementById('id01').style.display='block'" style="font-weight:900;">Inscreva-se</button>
</div>
</div>
</header>
<!-- Modal -->
<div id="id01" class="w3-modal">
<div class="w3-modal-content w3-card-8 w3-animate-top">
<header class="w3-container w3-theme-l1">
<span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn">×</span>
<h4>Ip do A/D:<strong style="color: #9e9e9e;"> Em breve!</strong></h4>
<h4>Servidor em que atuamos:<strong style="color: #9e9e9e;"> Brasil play vicio RPG</strong></h4>
</header>
<div class="w3-padding">
<strong>Venha fazer parte da nossa familia</strong><br />
<p>clike abaixo para se inscrever.</p>
<a class="w3-btn" href="http://alkwarefamily.forumeiros.com/f4-inscreva-se">Inscreva-se</a>
</div>
<footer class="w3-container w3-theme-l1">
<p>Familia Alkware</p>
</footer>
</div>
</div>
<hr>
<h2 class="w3-center" style="width: 225px;">Membros</h2>
<div class="w3-container">
<div class="w3-accordion">
<button onclick="myAccFunc('Demo1')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 200px; height: 50px;">Fundador</button>
<div id="Demo1" class="w3-accordion-content">
<div class="w3-container">
<p>Freez/Searby</p>
</div>
</div>
<button onclick="myAccFunc('Demo2')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 200px; height: 50px;">master</button>
<div id="Demo2" class="w3-accordion-content">
<div class="w3-container">
<p>No member</p>
</div>
</div>
<div class="w3-row-padding w3-center w3-margin-top">
<div class="w3-third">
<div class="w3-card-2 w3-padding-top" style="min-height:460px; width: 300px; cursor:default">
<h4>Historia Alkware</h4>
<p>Nossa Historia</p>
</div>
</div>
</div>
<div class="w3-center">
<h2>TDM'S</h2>
<p w3-class="w3-large"; style="font-size: 12px;">Todos os nossos confrontos em TDM'S!</p>
</div>
<div class="w3-responsive w3-card-4">
<table class="w3-table w3-striped w3-bordered">
<thead>
<tr class="w3-theme">
<th>team</th>
<th>team</th>
<th>result</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alkware</td>
<td>Vegeance</td>
<td>Wins</td>
</tr>
<tr class="w3-white">
<td>Alkware</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
</div>
<hr>
<hr>
<!-- Footer -->
<footer class="w3-container w3-theme-dark w3-padding-16">
<h5>- Alkware -</h5>
<div style="position:relative;bottom:55px;" class="w3-tooltip w3-right">
<span class="w3-text w3-theme-light w3-padding">Voltar para o topo</span>
<a class="w3-text-white" href="#myHeader"><span class="w3-xlarge">
<i class="fa fa-chevron-circle-up"></i></span></a>
</div>
</footer>
<!-- Script for Sidenav, Tabs, Accordions, Progress bars and slideshows -->
<script>
// Side navigation
function w3_open() {
var x = document.getElementById("mySidenav");
x.style.width = "100%";
x.style.textAlign = "center";
x.style.fontSize = "50px";
x.style.paddingTop = "10%";
x.style.display = "block";
}
function w3_close() {
document.getElementById("mySidenav").style.display = "none";
}
// Tabs
function openCity(evt, cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
var activebtn = document.getElementsByClassName("testbtn");
for (i = 0; i < x.length; i++) {
activebtn[i].className = activebtn[i].className.replace(" w3-dark-grey", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " w3-dark-grey";
}
var mybtn = document.getElementsByClassName("testbtn")[0];
mybtn.click();
// Accordions
function myAccFunc(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-dark-grey";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-dark-grey", "");
}
}
// Slideshows
var slideIndex = 1;
function plusDivs(n) {
slideIndex = slideIndex + n;
showDivs(slideIndex);
}
function showDivs(n) {
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
showDivs(1);
// Progress Bars
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width == 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("demoprgr").innerHTML = width * 1 + '%';
}
}
}
</script>
<a href="http://www.forumeiros.com" target="_blank">forumeiros.com</a>
</body>
</html>
E diga se ainda fica vermelha.
Atenciosamente.
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Re: Personalizar página HTML
por Guilherme3f 15.11.16 20:01
sim,resolveu
mia seu gostaria de alguem para me ajudar com minha pagina
mia seu gostaria de alguem para me ajudar com minha pagina
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Personalizar página HTML
por Luiz 15.11.16 20:15
Não entendi muito bem como quer sua página, poderia ser mais específico?
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Re: Personalizar página HTML
por Guilherme3f 15.11.16 20:41
muito simples,eu gostaria de deixar as caixar que mostrei nas imagens uma do lado da outra e que vocês mostrassem qual tag vocês utilizaram para atingir tal efeito
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Personalizar página HTML
por Luiz 15.11.16 21:25
Olá, veja se resulta:
Atenciosamente.
Observação: as alterações não são feitas com tags, mas sim com CSS!
- Código:
<!DOCTYPE html>
<html>
<head>
<style>
#lz-1 {width:70%!important; margin:auto;}
#lz-2 {}
</style>
<title>Alkware family</title>
<meta name="viewport" content="width=device-width, initial-scale=1" / >
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" / >
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-black.css" / >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" / >
</head>
<body>
<!-- Side Navigation -->
<nav class="w3-sidenav w3-white w3-card-2 w3-animate-left" style="display:none" id="mySidenav">
<h1 class="w3-xxxlarge w3-text-teal">Bem-vindo!</h1>
<a href="http://alkwarefamily.forumeiros.com/forum">Forum</a>
<a href="http://alkwarefamily.forumeiros.com/portal">Portal</a>
<a href="http://alkwarefamily.forumeiros.com/register">Registre-se</a>
<a href="javascript:void(0)" onclick="w3_close()" class="w3-closenav w3-xxxlarge w3-text-theme">Sair<i class="fa fa-remove"></i></a>
</nav>
<!-- Header -->
<header class="w3-container w3-theme w3-padding" id="myHeader">
<i onclick="w3_open()" class="fa fa-bars w3-xlarge w3-opennav"></i>
<div <div class="w3-center">
<h5>Bem-vindo ao forum Alkware</h5>
<h1 class="w3-xxxlarge w3-animate-bottom">Alkware family</h1>
<div class="w3-padding-32">
<button class="w3-btn w3-xlarge w3-dark-grey w3-hover-light-grey" onclick="document.getElementById('id01').style.display='block'" style="font-weight:900;">Inscreva-se</button>
</div>
</div>
</header>
<!-- Modal -->
<div id="id01" class="w3-modal">
<div class="w3-modal-content w3-card-8 w3-animate-top">
<header class="w3-container w3-theme-l1">
<span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn">×</span>
<h4>Ip do A/D:<strong style="color: #9e9e9e;"> Em breve!</strong></h4>
<h4>Servidor em que atuamos:<strong style="color: #9e9e9e;"> Brasil play vicio RPG</strong></h4>
</header>
<div class="w3-padding">
<strong>Venha fazer parte da nossa familia</strong><br />
<p>clike abaixo para se inscrever.</p>
<a class="w3-btn" href="http://alkwarefamily.forumeiros.com/f4-inscreva-se">Inscreva-se</a>
</div>
<footer class="w3-container w3-theme-l1">
<p>Familia Alkware</p>
</footer>
</div>
</div>
<hr>
<h2 class="w3-center" style="width: 225px;">Membros</h2>
<div class="w3-container">
<div class="w3-accordion">
<div id="lz-2">
<button onclick="myAccFunc('Demo1')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 200px; height: 50px;">Fundador</button>
<div id="Demo1" class="w3-accordion-content">
<div class="w3-container">
<p>Freez/Searby</p>
</div>
</div>
<button onclick="myAccFunc('Demo2')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 200px; height: 50px;">master</button>
<div id="Demo2" class="w3-accordion-content">
<div class="w3-container">
<p>No member</p>
</div>
</div>
<div class="w3-row-padding w3-center w3-margin-top">
<div class="w3-third">
<div class="w3-card-2 w3-padding-top" style="min-height:460px; width: 300px; cursor:default">
<h4>Historia Alkware</h4>
<p>Nossa Historia</p>
</div>
</div>
</div></div>
<div class="w3-center">
<h2>TDM'S</h2>
<p w3-class="w3-large"; style="font-size: 12px;">Todos os nossos confrontos em TDM'S!</p>
</div>
<div class="w3-responsive w3-card-4" id="lz-1">
<table class="w3-table w3-striped w3-bordered">
<thead>
<tr class="w3-theme">
<th>team</th>
<th>team</th>
<th>result</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alkware</td>
<td>Vegeance</td>
<td>Wins</td>
</tr>
<tr class="w3-white">
<td>Alkware</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
</div>
<hr>
<hr>
<!-- Footer -->
<footer class="w3-container w3-theme-dark w3-padding-16">
<h5>- Alkware -</h5>
<div style="position:relative;bottom:55px;" class="w3-tooltip w3-right">
<span class="w3-text w3-theme-light w3-padding">Voltar para o topo</span>
<a class="w3-text-white" href="#myHeader"><span class="w3-xlarge">
<i class="fa fa-chevron-circle-up"></i></span></a>
</div>
</footer>
<!-- Script for Sidenav, Tabs, Accordions, Progress bars and slideshows -->
<script>
// Side navigation
function w3_open() {
var x = document.getElementById("mySidenav");
x.style.width = "100%";
x.style.textAlign = "center";
x.style.fontSize = "50px";
x.style.paddingTop = "10%";
x.style.display = "block";
}
function w3_close() {
document.getElementById("mySidenav").style.display = "none";
}
// Tabs
function openCity(evt, cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
var activebtn = document.getElementsByClassName("testbtn");
for (i = 0; i < x.length; i++) {
activebtn[i].className = activebtn[i].className.replace(" w3-dark-grey", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " w3-dark-grey";
}
var mybtn = document.getElementsByClassName("testbtn")[0];
mybtn.click();
// Accordions
function myAccFunc(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-dark-grey";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-dark-grey", "");
}
}
// Slideshows
var slideIndex = 1;
function plusDivs(n) {
slideIndex = slideIndex + n;
showDivs(slideIndex);
}
function showDivs(n) {
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
showDivs(1);
// Progress Bars
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width == 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("demoprgr").innerHTML = width * 1 + '%';
}
}
}
</script>
<a href="http://www.forumeiros.com" target="_blank">forumeiros.com</a>
</body>
</html>
Atenciosamente.
Observação: as alterações não são feitas com tags, mas sim com CSS!
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Personalizar página HTML
por Guilherme3f 16.11.16 14:13
Alguem pode me ajudar? @Kyo panda @cepheus @shek @Cream?
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Personalizar página HTML
por Guilherme3f 17.11.16 14:52
Ok,então pode me ajudar aqui?criei o outro por que vocês não estavam respondendo aqui
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Personalizar página HTML
por Kyo Panda 17.11.16 16:41
Kyo Panda- Hiper Membro
- Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939 -
Re: Personalizar página HTML
por Guilherme3f 17.11.16 17:38
Sim kkk
Aqui está:
Aqui está:
- Código:
<!DOCTYPE html>
<html>
<head>
<title>Alkware family</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" />
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-black.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
</head>
<body>
<!-- Side Navigation -->
<nav class="w3-sidenav w3-white w3-card-2 w3-animate-left" style="display:none" id="mySidenav">
<h1 class="w3-xxxlarge w3-text-teal">Bem-vindo!</h1>
<a href="http://alkwarefamily.forumeiros.com/forum">Forum</a>
<a href="http://alkwarefamily.forumeiros.com/portal">Portal</a>
<a href="http://alkwarefamily.forumeiros.com/register">Registre-se</a>
<a href="javascript:void(0)" onclick="w3_close()" class="w3-closenav w3-xxxlarge w3-text-theme">Sair<i class="fa fa-remove"></i></a>
</nav>
<!-- Header -->
<header class="w3-container w3-theme w3-padding" id="myHeader">
<i onclick="w3_open()" class="fa fa-bars w3-xlarge w3-opennav"></i>
<div <div class="w3-center">
<h5>Bem-vindo ao forum Alkware</h5>
<h1 class="w3-xxxlarge w3-animate-bottom">ALKWARE FAMILY</h1>
<div class="w3-padding-32">
<button class="w3-btn w3-xlarge w3-dark-grey w3-hover-light-grey" onclick="document.getElementById('id01').style.display='block'" style="font-weight:900;">Inscreva-se</button>
</div>
</div>
</header>
<!-- Modal -->
<div id="id01" class="w3-modal">
<div class="w3-modal-content w3-card-8 w3-animate-top">
<header class="w3-container w3-theme-l1">
<span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn">×</span>
<h4>Ip do A/D:<strong style="color: #9e9e9e;"> Em breve!</strong></h4>
<h4>Servidor em que atuamos:<strong style="color: #9e9e9e;"> Brasil play vicio RPG</strong></h4>
</header>
<div class="w3-padding">
<strong>Venha fazer parte da nossa familia</strong><br />
<p>clike abaixo para se inscrever.</p>
<a class="w3-btn" href="http://alkwarefamily.forumeiros.com/f4-inscreva-se">Inscreva-se</a>
</div>
<footer class="w3-container w3-theme-l1">
<p>Familia Alkware</p>
</footer>
</div>
</div>
<hr>
<h2 class="w3-center" style="width: 225px;">Membros</h2>
<div class="w3-container">
<div class="w3-accordion">
<button onclick="myAccFunc('Demo1')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 200px; height: 50px;">Fundador</button>
<div id="Demo1" class="w3-accordion-content">
<div class="w3-container">
<p>Freez/Searby</p>
</div>
</div>
<button onclick="myAccFunc('Demo2')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 200px; height: 50px;">master</button>
<div id="Demo2" class="w3-accordion-content">
<div class="w3-container">
<p>No member</p>
</div>
</div>
<div class="w3-row-padding w3-center w3-margin-top">
<div class="w3-third">
<div class="w3-card-2 w3-padding-top" style="min-height:460px; width: 300px; cursor:default">
<h4>Historia Alkware</h4>
<p>Nossa Historia</p>
</div>
</div>
</div>
<div class="w3-center">
<h2>TDM'S</h2>
<p w3-class="w3-large"; style="font-size: 12px;">Todos os nossos confrontos em TDM'S!</p>
</div>
<div class="w3-responsive w3-card-4">
<table class="w3-table w3-striped w3-bordered">
<thead>
<tr class="w3-theme">
<th>team</th>
<th>team</th>
<th>result</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alkware</td>
<td>Vegeance</td>
<td>Wins</td>
</tr>
<tr class="w3-white">
<td>Alkware</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
</div>
<hr>
<hr>
<!-- Footer -->
<footer class="w3-container w3-theme-dark w3-padding-16">
<h5>- Alkware -</h5>
<div style="position:relative;bottom:55px;" class="w3-tooltip w3-right">
<span class="w3-text w3-theme-light w3-padding">Voltar para o topo</span>
<a class="w3-text-white" href="#myHeader"><span class="w3-xlarge">
<i class="fa fa-chevron-circle-up"></i></span></a>
</div>
</footer>
<!-- Script for Sidenav, Tabs, Accordions, Progress bars and slideshows -->
<script>
// Side navigation
function w3_open() {
var x = document.getElementById("mySidenav");
x.style.width = "100%";
x.style.textAlign = "center";
x.style.fontSize = "50px";
x.style.paddingTop = "10%";
x.style.display = "block";
}
function w3_close() {
document.getElementById("mySidenav").style.display = "none";
}
// Tabs
function openCity(evt, cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
var activebtn = document.getElementsByClassName("testbtn");
for (i = 0; i < x.length; i++) {
activebtn[i].className = activebtn[i].className.replace(" w3-dark-grey", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " w3-dark-grey";
}
var mybtn = document.getElementsByClassName("testbtn")[0];
mybtn.click();
// Accordions
function myAccFunc(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-dark-grey";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-dark-grey", "");
}
}
// Slideshows
var slideIndex = 1;
function plusDivs(n) {
slideIndex = slideIndex + n;
showDivs(slideIndex);
}
function showDivs(n) {
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
showDivs(1);
// Progress Bars
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width == 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("demoprgr").innerHTML = width * 1 + '%';
}
}
}
</script>
<a href="http://www.forumeiros.com" target="_blank">forumeiros.com</a>
</body>
</html>
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Personalizar página HTML
por Kyo Panda 17.11.16 18:05
Aqui:
Seguindo os padrões da sua página, eu usei elementos de navegação e grade.
Dividi a área em duas, uma para os botões e outra para a "História", coloquei os botões na navegação à esquerda e a história à direita.
Basicamente essa parte do código acima:
^-^
- Código:
<!DOCTYPE html>
<html>
<head>
<title>Alkware family</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" />
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-black.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
</head>
<body>
<!-- Side Navigation -->
<nav class="w3-sidenav w3-white w3-card-2 w3-animate-left" style="display:none" id="mySidenav">
<h1 class="w3-xxxlarge w3-text-teal">Bem-vindo!</h1>
<a href="http://alkwarefamily.forumeiros.com/forum">Forum</a>
<a href="http://alkwarefamily.forumeiros.com/portal">Portal</a>
<a href="http://alkwarefamily.forumeiros.com/register">Registre-se</a>
<a href="javascript:void(0)" onclick="w3_close()" class="w3-closenav w3-xxxlarge w3-text-theme">Sair<i class="fa fa-remove"></i></a>
</nav>
<!-- Header -->
<header class="w3-container w3-theme w3-padding" id="myHeader">
<i onclick="w3_open()" class="fa fa-bars w3-xlarge w3-opennav"></i>
<div <div class="w3-center">
<h5>Bem-vindo ao forum Alkware</h5>
<h1 class="w3-xxxlarge w3-animate-bottom">ALKWARE FAMILY</h1>
<div class="w3-padding-32">
<button class="w3-btn w3-xlarge w3-dark-grey w3-hover-light-grey" onclick="document.getElementById('id01').style.display='block'"
style="font-weight:900;">Inscreva-se</button>
</div>
</div>
</header>
<!-- Modal -->
<div id="id01" class="w3-modal">
<div class="w3-modal-content w3-card-8 w3-animate-top">
<header class="w3-container w3-theme-l1">
<span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn">×</span>
<h4>Ip do A/D:<strong style="color: #9e9e9e;"> Em breve!</strong></h4>
<h4>Servidor em que atuamos:<strong style="color: #9e9e9e;"> Brasil play vicio RPG</strong></h4>
</header>
<div class="w3-padding">
<strong>Venha fazer parte da nossa familia</strong><br />
<p>clike abaixo para se inscrever.</p>
<a class="w3-btn" href="http://alkwarefamily.forumeiros.com/f4-inscreva-se">Inscreva-se</a>
</div>
<footer class="w3-container w3-theme-l1">
<p>Familia Alkware</p>
</footer>
</div>
</div>
<h2 class="w3-center" style="width: 225px;">Membros</h2>
<div class="w3-container">
<div class="w3-accordion">
<div class="w3-row">
<div class="w3-col m4">
<ul class="w3-navbar">
<li>
<button onclick="myAccFunc('Demo1')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 200px; height: 50px;">Fundador</button>
<div id="Demo1" class="w3-accordion-content">
<div class="w3-container">
<p>Freez/Searby</p>
</div>
</div>
</li>
<li>
<button onclick="myAccFunc('Demo2')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 200px; height: 50px;">master</button>
<div id="Demo2" class="w3-accordion-content">
<div class="w3-container">
<p>No member</p>
</div>
</div>
</li>
</ul>
</div>
<div class="w3-col m8">
<div class="w3-row-padding w3-center w3-margin-top">
<div class="w3-third">
<div class="w3-card-2 w3-padding-top" style="min-height:460px; width: 300px; cursor:default">
<h4>Historia Alkware</h4>
<p>Nossa Historia</p>
</div>
</div>
</div>
</div>
</div>
<div class="w3-center">
<h2>TDM'S</h2>
<p w3-class="w3-large" ; style="font-size: 12px;">Todos os nossos confrontos em TDM'S!</p>
</div>
<div class="w3-responsive w3-card-4">
<table class="w3-table w3-striped w3-bordered">
<thead>
<tr class="w3-theme">
<th>team</th>
<th>team</th>
<th>result</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alkware</td>
<td>Vegeance</td>
<td>Wins</td>
</tr>
<tr class="w3-white">
<td>Alkware</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Footer -->
<footer class="w3-container w3-theme-dark w3-padding-16">
<h5>- Alkware -</h5>
<div style="position:relative;bottom:55px;" class="w3-tooltip w3-right">
<span class="w3-text w3-theme-light w3-padding">Voltar para o topo</span>
<a class="w3-text-white" href="#myHeader">
<span class="w3-xlarge">
<i class="fa fa-chevron-circle-up"></i>
</span
></a>
</div>
</footer>
<a href="http://www.forumeiros.com" target="_blank">forumeiros.com</a>
<!-- Script for Sidenav, Tabs, Accordions, Progress bars and slideshows -->
<script>
// Side navigation
function w3_open() {
var x = document.getElementById("mySidenav");
x.style.width = "100%";
x.style.textAlign = "center";
x.style.fontSize = "50px";
x.style.paddingTop = "10%";
x.style.display = "block";
}
function w3_close() {
document.getElementById("mySidenav").style.display = "none";
}
// Tabs
function openCity(evt, cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
var activebtn = document.getElementsByClassName("testbtn");
for (i = 0; i < x.length; i++) {
activebtn[i].className = activebtn[i].className.replace(" w3-dark-grey", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " w3-dark-grey";
}
var mybtn = document.getElementsByClassName("testbtn")[0];
mybtn.click();
// Accordions
function myAccFunc(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-dark-grey";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-dark-grey", "");
}
}
// Slideshows
var slideIndex = 1;
function plusDivs(n) {
slideIndex = slideIndex + n;
showDivs(slideIndex);
}
function showDivs(n) {
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
};
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}
showDivs(1);
// Progress Bars
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width == 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("demoprgr").innerHTML = width * 1 + '%';
}
}
}
</script>
</body>
</html>
Seguindo os padrões da sua página, eu usei elementos de navegação e grade.
Dividi a área em duas, uma para os botões e outra para a "História", coloquei os botões na navegação à esquerda e a história à direita.
Basicamente essa parte do código acima:
- Código:
<div class="w3-row">
<div class="w3-col m4">
<ul class="w3-navbar">
<li>
<button onclick="myAccFunc('Demo1')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 200px; height: 50px;">Fundador</button>
<div id="Demo1" class="w3-accordion-content">
<div class="w3-container">
<p>Freez/Searby</p>
</div>
</div>
</li>
<li>
<button onclick="myAccFunc('Demo2')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 200px; height: 50px;">master</button>
<div id="Demo2" class="w3-accordion-content">
<div class="w3-container">
<p>No member</p>
</div>
</div>
</li>
</ul>
</div>
<div class="w3-col m8">
<div class="w3-row-padding w3-center w3-margin-top">
<div class="w3-third">
<div class="w3-card-2 w3-padding-top" style="min-height:460px; width: 300px; cursor:default">
<h4>Historia Alkware</h4>
<p>Nossa Historia</p>
</div>
</div>
</div>
</div>
</div>
^-^
Kyo Panda- Hiper Membro
- Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939 -
Re: Personalizar página HTML
por Guilherme3f 17.11.16 18:11
Você é fooda Kyo panda!!
na primeira coluna,"membros" aconteceu um erro de jquery por isso fico um do lado do outro,mas eles ficam um debaixo do outro são 12 não 2 poderia arrumar para mim? e me mostrar qual ação executou para que eu posso aprender?
- e aonde ta "TDM" gostaria que ficasse a esquerda com uma largura menos
- e tbm mudar a cor do fundo,ao invés de branco ficasse esse: #565656
mesma coisa nesses 2 ultimos pedidos,poderia me mostrar qual ação utilizou?
na primeira coluna,"membros" aconteceu um erro de jquery por isso fico um do lado do outro,mas eles ficam um debaixo do outro são 12 não 2 poderia arrumar para mim? e me mostrar qual ação executou para que eu posso aprender?
- e aonde ta "TDM" gostaria que ficasse a esquerda com uma largura menos
- e tbm mudar a cor do fundo,ao invés de branco ficasse esse: #565656
mesma coisa nesses 2 ultimos pedidos,poderia me mostrar qual ação utilizou?
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Personalizar página HTML
por Kyo Panda 17.11.16 18:35
Aqui:
Para fazer os botões ficarem na vertical, só removi a navegação usada anteriormente:
Para o TDM à esquerda, foi o do anterior, utilizei a grade fornecida pelo CSS que está usando para criar as colunas:
O processo é:
Esse sistema de coluna é usa o padrão de 12 colunas. Então onde vê m3 e m9 são o tamanho da coluna à esquerda e direita. Se quisesse aumentar a coluna da esquerda, faria m4 e m8. Se quisesse as duas iguais, seria m6 e m6. Se ao invés de 2 colunas, quisesse 4, faria m3, m3, m3 e m3:
Sempre fazendo o cálculo para que as soma das colunas dê 12.
- Código:
<!DOCTYPE html>
<html>
<head>
<title>Alkware family</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" />
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-black.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
<style type="text/css">
h2.tdm-title {
background-color: #565656;
}
</style>
</head>
<body>
<!-- Side Navigation -->
<nav class="w3-sidenav w3-white w3-card-2 w3-animate-left" style="display:none" id="mySidenav">
<h1 class="w3-xxxlarge w3-text-teal">Bem-vindo!</h1>
<a href="http://alkwarefamily.forumeiros.com/forum">Forum</a>
<a href="http://alkwarefamily.forumeiros.com/portal">Portal</a>
<a href="http://alkwarefamily.forumeiros.com/register">Registre-se</a>
<a href="javascript:void(0)" onclick="w3_close()" class="w3-closenav w3-xxxlarge w3-text-theme">Sair<i class="fa fa-remove"></i></a>
</nav>
<!-- Header -->
<header class="w3-container w3-theme w3-padding" id="myHeader">
<i onclick="w3_open()" class="fa fa-bars w3-xlarge w3-opennav"></i>
<div <div class="w3-center">
<h5>Bem-vindo ao forum Alkware</h5>
<h1 class="w3-xxxlarge w3-animate-bottom">ALKWARE FAMILY</h1>
<div class="w3-padding-32">
<button class="w3-btn w3-xlarge w3-dark-grey w3-hover-light-grey" onclick="document.getElementById('id01').style.display='block'"
style="font-weight:900;">Inscreva-se</button>
</div>
</div>
</header>
<!-- Modal -->
<div id="id01" class="w3-modal">
<div class="w3-modal-content w3-card-8 w3-animate-top">
<header class="w3-container w3-theme-l1">
<span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn">×</span>
<h4>Ip do A/D:<strong style="color: #9e9e9e;"> Em breve!</strong></h4>
<h4>Servidor em que atuamos:<strong style="color: #9e9e9e;"> Brasil play vicio RPG</strong></h4>
</header>
<div class="w3-padding">
<strong>Venha fazer parte da nossa familia</strong><br />
<p>clike abaixo para se inscrever.</p>
<a class="w3-btn" href="http://alkwarefamily.forumeiros.com/f4-inscreva-se">Inscreva-se</a>
</div>
<footer class="w3-container w3-theme-l1">
<p>Familia Alkware</p>
</footer>
</div>
</div>
<h2 class="w3-center" style="width: 225px;">Membros</h2>
<div class="w3-container">
<div class="w3-accordion">
<div class="w3-row">
<div class="w3-col m3">
<button onclick="myAccFunc('Demo1')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 200px; height: 50px;">Fundador</button>
<div id="Demo1" class="w3-accordion-content">
<div class="w3-container">
<p>Freez/Searby</p>
</div>
</div>
<button onclick="myAccFunc('Demo2')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 200px; height: 50px;">master</button>
<div id="Demo2" class="w3-accordion-content">
<div class="w3-container">
<p>No member</p>
</div>
</div>
</div>
<div class="w3-col m9">
<div class="w3-row-padding w3-center w3-margin-top">
<div class="w3-third">
<div class="w3-card-2 w3-padding-top" style="min-height:460px; width: 300px; cursor:default">
<h4>Historia Alkware</h4>
<p>Nossa Historia</p>
</div>
</div>
</div>
</div>
</div>
<div class="w3-row">
<div class="w3-col m3">
<div class="w3-center">
<h2 class="tdm-title">TDM'S</h2>
<p w3-class="w3-large" ; style="font-size: 12px;">Todos os nossos confrontos em TDM'S!</p>
</div>
</div>
<div class="w3-col m9">
<div class="w3-responsive w3-card-4">
<table class="w3-table w3-striped w3-bordered">
<thead>
<tr class="w3-theme">
<th>team</th>
<th>team</th>
<th>result</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alkware</td>
<td>Vegeance</td>
<td>Wins</td>
</tr>
<tr class="w3-white">
<td>Alkware</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="w3-container w3-theme-dark w3-padding-16">
<h5>- Alkware -</h5>
<div style="position:relative;bottom:55px;" class="w3-tooltip w3-right">
<span class="w3-text w3-theme-light w3-padding">Voltar para o topo</span>
<a class="w3-text-white" href="#myHeader">
<span class="w3-xlarge">
<i class="fa fa-chevron-circle-up"></i>
</span
></a>
</div>
</footer>
<a href="http://www.forumeiros.com" target="_blank">forumeiros.com</a>
<!-- Script for Sidenav, Tabs, Accordions, Progress bars and slideshows -->
<script>
// Side navigation
function w3_open() {
var x = document.getElementById("mySidenav");
x.style.width = "100%";
x.style.textAlign = "center";
x.style.fontSize = "50px";
x.style.paddingTop = "10%";
x.style.display = "block";
}
function w3_close() {
document.getElementById("mySidenav").style.display = "none";
}
// Tabs
function openCity(evt, cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
var activebtn = document.getElementsByClassName("testbtn");
for (i = 0; i < x.length; i++) {
activebtn[i].className = activebtn[i].className.replace(" w3-dark-grey", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " w3-dark-grey";
}
var mybtn = document.getElementsByClassName("testbtn")[0];
mybtn.click();
// Accordions
function myAccFunc(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-dark-grey";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-dark-grey", "");
}
}
// Slideshows
var slideIndex = 1;
function plusDivs(n) {
slideIndex = slideIndex + n;
showDivs(slideIndex);
}
function showDivs(n) {
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
};
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}
showDivs(1);
// Progress Bars
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width == 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("demoprgr").innerHTML = width * 1 + '%';
}
}
}
</script>
</body>
</html>
Para fazer os botões ficarem na vertical, só removi a navegação usada anteriormente:
- Código:
<div class="w3-col m3">
<button onclick="myAccFunc('Demo1')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 200px; height: 50px;">Fundador</button>
<div id="Demo1" class="w3-accordion-content">
<div class="w3-container">
<p>Freez/Searby</p>
</div>
</div>
<button onclick="myAccFunc('Demo2')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 200px; height: 50px;">master</button>
<div id="Demo2" class="w3-accordion-content">
<div class="w3-container">
<p>No member</p>
</div>
</div>
</div>
Para o TDM à esquerda, foi o do anterior, utilizei a grade fornecida pelo CSS que está usando para criar as colunas:
- Código:
<div class="w3-row">
<div class="w3-col m3">
<div class="w3-center">
<h2 class="tdm-title">TDM'S</h2>
<p w3-class="w3-large" ; style="font-size: 12px;">Todos os nossos confrontos em TDM'S!</p>
</div>
</div>
<div class="w3-col m9">
<div class="w3-responsive w3-card-4">
<table class="w3-table w3-striped w3-bordered">
<thead>
<tr class="w3-theme">
<th>team</th>
<th>team</th>
<th>result</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alkware</td>
<td>Vegeance</td>
<td>Wins</td>
</tr>
<tr class="w3-white">
<td>Alkware</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
O processo é:
- Código:
<div class="w3-row"><!-- linha das colunas -->
<div class="w3-col m3">Coluna esquerda</div>
<div class="w3-col m9">Coluna direita</div>
</div>
Esse sistema de coluna é usa o padrão de 12 colunas. Então onde vê m3 e m9 são o tamanho da coluna à esquerda e direita. Se quisesse aumentar a coluna da esquerda, faria m4 e m8. Se quisesse as duas iguais, seria m6 e m6. Se ao invés de 2 colunas, quisesse 4, faria m3, m3, m3 e m3:
- Código:
<div class="w3-row"><!-- linha das colunas -->
<div class="w3-col m3">Coluna 1</div>
<div class="w3-col m3">Coluna 2</div>
<div class="w3-col m3">Coluna 3</div>
<div class="w3-col m3">Coluna 4</div>
</div>
Sempre fazendo o cálculo para que as soma das colunas dê 12.
Kyo Panda- Hiper Membro
- Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939 -
Re: Personalizar página HTML
por Guilherme3f 17.11.16 19:36
Gostaria que o TDM ficasse nesse lado da pagina assim como demonstra a imagem:
https://imgur.com/a/ef8Op
e tbm esse fundo branco da pagina e colocar essa Cor: #565656
acho que aquele pequeno menu lá em cima não será o suficiente então poderia adicionar um menu de navegação?como esse:
https://imgur.com/a/EjARy
e quando clika:
https://imgur.com/a/zE4OR
Seria possivel?
Novo codigo:
https://imgur.com/a/ef8Op
e tbm esse fundo branco da pagina e colocar essa Cor: #565656
acho que aquele pequeno menu lá em cima não será o suficiente então poderia adicionar um menu de navegação?como esse:
https://imgur.com/a/EjARy
e quando clika:
https://imgur.com/a/zE4OR
Seria possivel?
Novo codigo:
- Código:
<!DOCTYPE html>
<html>
<head>
<title>Alkware family</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" />
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-black.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
</head>
<body>
<!-- Side Navigation -->
<nav class="w3-sidenav w3-white w3-card-2 w3-animate-left" style="display:none" id="mySidenav">
<h1 class="w3-xxxlarge w3-text-teal">Bem-vindo!</h1>
<a href="/forum">Forum</a>
<a href="/portal">Portal</a>
<a href="/register">Registre-se</a>
<a href="javascript:void(0)" onclick="w3_close()" class="w3-closenav w3-xxxlarge w3-text-theme">Sair<i class="fa fa-remove"></i></a>
</nav>
<!-- Header -->
<header class="w3-container w3-theme w3-padding" id="myHeader">
<i onclick="w3_open()" class="fa fa-bars w3-xlarge w3-opennav"></i>
<div <div class="w3-center">
<h5>Bem-vindo ao forum Alkware</h5>
<h1 class="w3-xxxlarge w3-animate-bottom">ALKWARE FAMILY</h1>
<div class="w3-padding-32">
<button class="w3-btn w3-xlarge w3-dark-grey w3-hover-light-grey" onclick="document.getElementById('id01').style.display='block'"
style="font-weight:900;">Inscreva-se</button>
</div>
</div>
</header>
<!-- Modal -->
<div id="id01" class="w3-modal">
<div class="w3-modal-content w3-card-8 w3-animate-top">
<header class="w3-container w3-theme-l1">
<span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn">×</span>
<h4>Ip do A/D:<strong style="color: #9e9e9e;"> Em breve!</strong></h4><h4>A/D opcional: <strong style="color: #9e9e9e;">IP: 198.50.195.141:7776</strong></h4>
<h4>Servidor em que atuamos:<strong style="color: #9e9e9e;"> Brasil play vicio RPG</strong></h4>
</header>
<div class="w3-padding">
<strong>Venha fazer parte da nossa familia!!</strong>
<strong>clique abaixo para se inscrever,</strong><br />
<strong>após isso será redimensionado,ai basta clicar em "novo Topico" e preencher os dados.</strong><br />
<strong></strong><br />
<a class="w3-btn" href="http://alkwarefamily.forumeiros.com/f4-inscreva-se">Inscreva-se</a>
</div>
<footer class="w3-container w3-theme-l1">
<p>Familia Alkware</p>
</footer>
</div>
</div>
<h2 class="w3-center" style="width: 250px;">Membros</h2>
<div class="w3-container">
<div class="w3-accordion">
<div class="w3-row">
<div class="w3-col m3">
<button onclick="myAccFunc('Demo1')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 230px; height: 50px;">Fundador</button>
<div id="Demo1" class="w3-accordion-content">
<div class="w3-container">
<p>Freez/Searby</p>
</div>
</div>
<button onclick="myAccFunc('Demo2')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 230px; height: 50px;">master</button>
<div id="Demo2" class="w3-accordion-content">
<div class="w3-container">
<p>No member</p>
</div>
</div>
<button onclick="myAccFunc('Demo3')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 230px; height: 50px;">Gerente</button>
<div id="Demo3" class="w3-accordion-content">
<div class="w3-container">
<p>As</p>
</div>
</div>
<button onclick="myAccFunc('Demo4')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 230px; height: 50px;">Sub-Gerente</button>
<div id="Demo4" class="w3-accordion-content">
<div class="w3-container">
<p>No member</p>
</div>
</div>
<button onclick="myAccFunc('Demo5')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 230px; height: 50px;">Lider</button>
<div id="Demo5" class="w3-accordion-content">
<div class="w3-container">
<p>No member</p>
</div>
</div>
<button onclick="myAccFunc('Demo6')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 230px; height: 50px;">Coordenador</button>
<div id="Demo6" class="w3-accordion-content">
<div class="w3-container">
<p>No member</p>
</div>
</div>
<button onclick="myAccFunc('Demo7')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 230px; height: 50px;">M.Alkware</button>
<div id="Demo7" class="w3-accordion-content">
<div class="w3-container">
<p>No member</p>
</div>
</div>
<button onclick="myAccFunc('Demo8')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 230px; height: 50px;">M.ExperT</button>
<div id="Demo8" class="w3-accordion-content">
<div class="w3-container">
<p>SamuelS</p>
</div>
</div>
<button onclick="myAccFunc('Demo9')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 230px; height: 50px;">M.Avançado</button>
<div id="Demo9" class="w3-accordion-content">
<div class="w3-container">
<p>WellingtoN<br />
Zund <br />
Rayleigh <br />
DreeW <br />
Nelsinn<br /> </p>
</div>
</div>
<button onclick="myAccFunc('Demo10')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 230px; height: 50px;">M.Novato</button>
<div id="Demo10" class="w3-accordion-content">
<div class="w3-container">
<p>n0w<br />
iTz<br />
MeLLo<br />
kr<br /></p>
</div>
</div>
<button onclick="myAccFunc('Demo11')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 230px; height: 50px;">Designer's</button>
<div id="Demo11" class="w3-accordion-content">
<div class="w3-container">
<p>Rastafarii<br />
Xandy<br /></p>
</div>
</div>
<button onclick="myAccFunc('Demo12')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 230px; height: 50px;">Memoria</button>
<div id="Demo12" class="w3-accordion-content">
<div class="w3-container">
<p>Zeus<br />
Marcio <br />
Pattyz<br />
FalcoN<br />
Isabelly<br />
Biancah<br /></p>
</div>
</div>
</div>
<div class="w3-col m9">
<div class="w3-row-padding w3-center w3-margin-top">
<div class="w3-third">
<div class="w3-card-2 w3-padding-top" style="min-height:470px; width: 550px; cursor:default">
<h4>Historia Alkware</h4>
<p>Nosso Historia começa em 2014,mas não como Alkware e sim como
Kamikaze,a Alkware é decendente da Kamikaze...em junho de 2014
eu (Freez/Searby) fundava a Kamikaze mais conhecida com Kmz,
contei com a ajuda de 2 membros para me ajudar fundar a familia,
cujo os nomes são "Vinne" e o "Derpino" a kamikaze durou 6 meses,
ela foi fechada em Novembro,por desentendimento entre familia,
os membros desidiram abandonar a familia e uma familia sem membro
não é uma familia.então a Historia da kmz acaba e agora
começamos a historia da Alk,dessa vez resolvi fundar a Alk
sozinho...confesso que deu muito trabalho escolher o nome rs
e conserteza não fico do agrado de todos...Alkware foi fundada no
dia 28/09/2016 mas eu não posso contar toda a historia por que ela
ainda não terminou e espere que não
termine tão cedo,quero que fique conhecida nos servidores,fique
abastecida com boes membros e que ela fique eternizada!
<br />
<br />
Obrigado a Todos!
</p>
</div>
</div>
</div>
</div>
</div>
<div class="w3-row">
<div class="w3-col m3">
<div class="w3-center">
<h2 class="tdm-title">TDM'S</h2>
</div>
</div>
<div class="w3-col m9">
<div class="w3-responsive w3-card-4">
<table class="w3-table w3-striped w3-bordered">
<thead>
<tr class="w3-theme">
<th>team</th>
<th>team</th>
<th>result</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alkware</td>
<td>Vegeance</td>
<td>Wins</td>
</tr>
<tr class="w3-white">
<td>Alkware</td>
<td>KillerS</td>
<td>Wins</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="w3-container w3-theme-dark w3-padding-16">
<h5>- Alkware -</h5>
<div style="position:relative;bottom:55px;" class="w3-tooltip w3-right">
<span class="w3-text w3-theme-light w3-padding">Voltar para o topo</span>
<a class="w3-text-white" href="#myHeader">
<span class="w3-xlarge">
<i class="fa fa-chevron-circle-up"></i>
</span
></a>
</div>
</footer>
<a href="http://www.forumeiros.com" target="_blank">forumeiros.com</a>
<!-- Script for Sidenav, Tabs, Accordions, Progress bars and slideshows -->
<script>
// Side navigation
function w3_open() {
var x = document.getElementById("mySidenav");
x.style.width = "100%";
x.style.textAlign = "center";
x.style.fontSize = "50px";
x.style.paddingTop = "10%";
x.style.display = "block";
}
function w3_close() {
document.getElementById("mySidenav").style.display = "none";
}
// Tabs
function openCity(evt, cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
var activebtn = document.getElementsByClassName("testbtn");
for (i = 0; i < x.length; i++) {
activebtn[i].className = activebtn[i].className.replace(" w3-dark-grey", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " w3-dark-grey";
}
var mybtn = document.getElementsByClassName("testbtn")[0];
mybtn.click();
// Accordions
function myAccFunc(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-dark-grey";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-dark-grey", "");
}
}
// Slideshows
var slideIndex = 1;
function plusDivs(n) {
slideIndex = slideIndex + n;
showDivs(slideIndex);
}
function showDivs(n) {
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
};
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}
showDivs(1);
// Progress Bars
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width == 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("demoprgr").innerHTML = width * 1 + '%';
}
}
}
</script>
</body>
</html>
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Personalizar página HTML
por Kyo Panda 19.11.16 21:01
Aqui:
Não utilizei nenhum elemento novo.
Quanto ao menu, não há a necessidade de escondê-lo se no final ele ocupar o mesmo espaço inicial, é até ruim, pois o usuário tem que clicar no menu antes de vê-lo.
- Código:
<!DOCTYPE html>
<html>
<head>
<title>Alkware Family</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" />
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-black.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
<style type="text/css">
body {
background-color: #565656;
}
.custom-navbar li {
float: initial;
display: inline-block;
}
</style>
</head>
<body>
<!-- Header -->
<header class="w3-container w3-theme w3-padding" id="myHeader">
<i onclick="w3_open()" class="fa fa-bars w3-xlarge w3-opennav"></i>
<div <div class="w3-center">
<h5>Bem-vindo ao forum Alkware</h5>
<h1 class="w3-xxxlarge w3-animate-bottom">ALKWARE FAMILY</h1>
<div class="w3-padding-32">
<button class="w3-btn w3-xlarge w3-dark-grey w3-hover-light-grey" onclick="document.getElementById('id01').style.display='block'"
style="font-weight:900;">Inscreva-se</button>
</div>
</div>
</header>
<!-- Modal -->
<div id="id01" class="w3-modal">
<div class="w3-modal-content w3-card-8 w3-animate-top">
<header class="w3-container w3-theme-l1">
<span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn">×</span>
<h4>Ip do A/D:<strong style="color: #9e9e9e;"> Em breve!</strong></h4>
<h4>Servidor em que atuamos:<strong style="color: #9e9e9e;"> Brasil play vicio RPG</strong></h4>
</header>
<div class="w3-padding">
<strong>Venha fazer parte da nossa familia</strong><br />
<p>clike abaixo para se inscrever.</p>
<a class="w3-btn" href="http://alkwarefamily.forumeiros.com/f4-inscreva-se">Inscreva-se</a>
</div>
<footer class="w3-container w3-theme-l1">
<p>Familia Alkware</p>
</footer>
</div>
</div>
<div class="w3-container">
<div class="w3-row">
<ul class="w3-navbar w3-black w3-center custom-navbar">
<li><a href="/forum">Fórum</a></li>
<li><a href="/portal">Portal</a></li>
<li><a href="/register">Registre-se</a></li>
</ul>
</div>
<h2 class="w3-center" style="width: 225px;">Membros</h2>
<div class="w3-row">
<div class="w3-col m2">
<button onclick="myAccFunc('Demo1')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 200px; height: 50px;">Fundador</button>
<div id="Demo1" class="w3-accordion-content">
<div class="w3-container">
<p>Freez/Searby</p>
</div>
</div>
<button onclick="myAccFunc('Demo2')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 200px; height: 50px;">master</button>
<div id="Demo2" class="w3-accordion-content">
<div class="w3-container">
<p>No member</p>
</div>
</div>
</div>
<div class="w3-col m4">
<div class="w3-row-padding w3-center w3-white">
<div class="w3-third">
<div class="w3-card-2 w3-padding-top" style="min-height:460px; width: 300px; cursor:default">
<h4>Historia Alkware</h4>
<p>Nossa Historia</p>
</div>
</div>
</div>
</div>
<div class="w3-col m2">
<div class="w3-center">
<h2 class="tdm-title">TDM'S</h2>
<p w3-class="w3-large" ; style="font-size: 12px;">Todos os nossos confrontos em TDM'S!</p>
</div>
</div>
<div class="w3-col m4">
<div class="w3-responsive w3-card-4">
<table class="w3-table w3-striped w3-bordered w3-white">
<thead>
<tr class="w3-theme">
<th>team</th>
<th>team</th>
<th>result</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alkware</td>
<td>Vegeance</td>
<td>Wins</td>
</tr>
<tr class="w3-white">
<td>Alkware</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="w3-container w3-theme-dark w3-padding-16">
<h5>- Alkware -</h5>
<div style="position:relative;bottom:55px;" class="w3-tooltip w3-right">
<span class="w3-text w3-theme-light w3-padding">Voltar para o topo</span>
<a class="w3-text-white" href="#myHeader">
<span class="w3-xlarge">
<i class="fa fa-chevron-circle-up"></i>
</span
></a>
</div>
</footer>
<a href="http://www.forumeiros.com" target="_blank">forumeiros.com</a>
<!-- Script for Sidenav, Tabs, Accordions, Progress bars and slideshows -->
<script>
// Side navigation
function w3_open() {
var x = document.getElementById("mySidenav");
x.style.width = "100%";
x.style.textAlign = "center";
x.style.fontSize = "50px";
x.style.paddingTop = "10%";
x.style.display = "block";
}
function w3_close() {
document.getElementById("mySidenav").style.display = "none";
}
// Tabs
function openCity(evt, cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
var activebtn = document.getElementsByClassName("testbtn");
for (i = 0; i < x.length; i++) {
activebtn[i].className = activebtn[i].className.replace(" w3-dark-grey", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " w3-dark-grey";
}
var mybtn = document.getElementsByClassName("testbtn")[0];
mybtn.click();
// Accordions
function myAccFunc(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-dark-grey";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-dark-grey", "");
}
}
// Slideshows
var slideIndex = 1;
function plusDivs(n) {
slideIndex = slideIndex + n;
showDivs(slideIndex);
}
function showDivs(n) {
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
};
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}
showDivs(1);
// Progress Bars
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width == 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("demoprgr").innerHTML = width * 1 + '%';
}
}
}
</script>
</body>
</html>
Não utilizei nenhum elemento novo.
Quanto ao menu, não há a necessidade de escondê-lo se no final ele ocupar o mesmo espaço inicial, é até ruim, pois o usuário tem que clicar no menu antes de vê-lo.
Kyo Panda- Hiper Membro
- Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939 -
Re: Personalizar página HTML
por Guilherme3f 20.11.16 21:27
o senhor não utilizou o novo codigo,
- Código:
<!DOCTYPE html>
<html>
<head>
<title>Alkware family</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" />
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-black.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
</head>
<body>
<!-- Side Navigation -->
<nav class="w3-sidenav w3-white w3-card-2 w3-animate-left" style="display:none" id="mySidenav">
<h1 class="w3-xxxlarge w3-text-teal">Bem-vindo!</h1>
<a href="/forum">Forum</a>
<a href="/portal">Portal</a>
<a href="/register">Registre-se</a>
<a href="javascript:void(0)" onclick="w3_close()" class="w3-closenav w3-xxxlarge w3-text-theme">Sair<i class="fa fa-remove"></i></a>
</nav>
<!-- Header -->
<header class="w3-container w3-theme w3-padding" id="myHeader">
<i onclick="w3_open()" class="fa fa-bars w3-xlarge w3-opennav"></i>
<div <div class="w3-center">
<h5>Bem-vindo ao forum Alkware</h5>
<h1 class="w3-xxxlarge w3-animate-bottom">ALKWARE FAMILY</h1>
<div class="w3-padding-32">
<button class="w3-btn w3-xlarge w3-dark-grey w3-hover-light-grey" onclick="document.getElementById('id01').style.display='block'"
style="font-weight:900;">Inscreva-se</button>
</div>
</div>
</header>
<!-- Modal -->
<div id="id01" class="w3-modal">
<div class="w3-modal-content w3-card-8 w3-animate-top">
<header class="w3-container w3-theme-l1">
<span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn">×</span>
<h4>Ip do A/D:<strong style="color: #9e9e9e;"> Em breve!</strong></h4><h4>A/D opcional: <strong style="color: #9e9e9e;">IP: 198.50.195.141:7776</strong></h4>
<h4>Servidor em que atuamos:<strong style="color: #9e9e9e;"> Brasil play vicio RPG</strong></h4>
</header>
<div class="w3-padding">
<strong>Venha fazer parte da nossa familia!!</strong>
<strong>clique abaixo para se inscrever,</strong><br />
<strong>após isso será redimensionado,ai basta clicar em "novo Topico" e preencher os dados.</strong><br />
<strong></strong><br />
<a class="w3-btn" href="http://alkwarefamily.forumeiros.com/f4-inscreva-se">Inscreva-se</a>
</div>
<footer class="w3-container w3-theme-l1">
<p>Familia Alkware</p>
</footer>
</div>
</div>
<h2 class="w3-center" style="width: 250px;">Membros</h2>
<div class="w3-container">
<div class="w3-accordion">
<div class="w3-row">
<div class="w3-col m3">
<button onclick="myAccFunc('Demo1')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 230px; height: 50px;">Fundador</button>
<div id="Demo1" class="w3-accordion-content">
<div class="w3-container">
<p>Freez/Searby</p>
</div>
</div>
<button onclick="myAccFunc('Demo2')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 230px; height: 50px;">master</button>
<div id="Demo2" class="w3-accordion-content">
<div class="w3-container">
<p>No member</p>
</div>
</div>
<button onclick="myAccFunc('Demo3')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 230px; height: 50px;">Gerente</button>
<div id="Demo3" class="w3-accordion-content">
<div class="w3-container">
<p>As</p>
</div>
</div>
<button onclick="myAccFunc('Demo4')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 230px; height: 50px;">Sub-Gerente</button>
<div id="Demo4" class="w3-accordion-content">
<div class="w3-container">
<p>No member</p>
</div>
</div>
<button onclick="myAccFunc('Demo5')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 230px; height: 50px;">Lider</button>
<div id="Demo5" class="w3-accordion-content">
<div class="w3-container">
<p>No member</p>
</div>
</div>
<button onclick="myAccFunc('Demo6')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 230px; height: 50px;">Coordenador</button>
<div id="Demo6" class="w3-accordion-content">
<div class="w3-container">
<p>No member</p>
</div>
</div>
<button onclick="myAccFunc('Demo7')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 230px; height: 50px;">M.Alkware</button>
<div id="Demo7" class="w3-accordion-content">
<div class="w3-container">
<p>No member</p>
</div>
</div>
<button onclick="myAccFunc('Demo8')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 230px; height: 50px;">M.ExperT</button>
<div id="Demo8" class="w3-accordion-content">
<div class="w3-container">
<p>SamuelS</p>
</div>
</div>
<button onclick="myAccFunc('Demo9')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 230px; height: 50px;">M.Avançado</button>
<div id="Demo9" class="w3-accordion-content">
<div class="w3-container">
<p>WellingtoN<br />
Zund <br />
Rayleigh <br />
DreeW <br />
Nelsinn<br /> </p>
</div>
</div>
<button onclick="myAccFunc('Demo10')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 230px; height: 50px;">M.Novato</button>
<div id="Demo10" class="w3-accordion-content">
<div class="w3-container">
<p>n0w<br />
iTz<br />
MeLLo<br />
kr<br /></p>
</div>
</div>
<button onclick="myAccFunc('Demo11')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 230px; height: 50px;">Designer's</button>
<div id="Demo11" class="w3-accordion-content">
<div class="w3-container">
<p>Rastafarii<br />
Xandy<br /></p>
</div>
</div>
<button onclick="myAccFunc('Demo12')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align" style="width: 230px; height: 50px;">Memoria</button>
<div id="Demo12" class="w3-accordion-content">
<div class="w3-container">
<p>Zeus<br />
Marcio <br />
Pattyz<br />
FalcoN<br />
Isabelly<br />
Biancah<br /></p>
</div>
</div>
</div>
<div class="w3-col m9">
<div class="w3-row-padding w3-center w3-margin-top">
<div class="w3-third">
<div class="w3-card-2 w3-padding-top" style="min-height:470px; width: 550px; cursor:default">
<h4>Historia Alkware</h4>
<p>Nosso Historia começa em 2014,mas não como Alkware e sim como
Kamikaze,a Alkware é decendente da Kamikaze...em junho de 2014
eu (Freez/Searby) fundava a Kamikaze mais conhecida com Kmz,
contei com a ajuda de 2 membros para me ajudar fundar a familia,
cujo os nomes são "Vinne" e o "Derpino" a kamikaze durou 6 meses,
ela foi fechada em Novembro,por desentendimento entre familia,
os membros desidiram abandonar a familia e uma familia sem membro
não é uma familia.então a Historia da kmz acaba e agora
começamos a historia da Alk,dessa vez resolvi fundar a Alk
sozinho...confesso que deu muito trabalho escolher o nome rs
e conserteza não fico do agrado de todos...Alkware foi fundada no
dia 28/09/2016 mas eu não posso contar toda a historia por que ela
ainda não terminou e espere que não
termine tão cedo,quero que fique conhecida nos servidores,fique
abastecida com boes membros e que ela fique eternizada!
<br />
<br />
Obrigado a Todos!
</p>
</div>
</div>
</div>
</div>
</div>
<div class="w3-row">
<div class="w3-col m3">
<div class="w3-center">
<h2 class="tdm-title">TDM'S</h2>
</div>
</div>
<div class="w3-col m9">
<div class="w3-responsive w3-card-4">
<table class="w3-table w3-striped w3-bordered">
<thead>
<tr class="w3-theme">
<th>team</th>
<th>team</th>
<th>result</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alkware</td>
<td>Vegeance</td>
<td>Wins</td>
</tr>
<tr class="w3-white">
<td>Alkware</td>
<td>KillerS</td>
<td>Wins</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="w3-container w3-theme-dark w3-padding-16">
<h5>- Alkware -</h5>
<div style="position:relative;bottom:55px;" class="w3-tooltip w3-right">
<span class="w3-text w3-theme-light w3-padding">Voltar para o topo</span>
<a class="w3-text-white" href="#myHeader">
<span class="w3-xlarge">
<i class="fa fa-chevron-circle-up"></i>
</span
></a>
</div>
</footer>
<a href="http://www.forumeiros.com" target="_blank">forumeiros.com</a>
<!-- Script for Sidenav, Tabs, Accordions, Progress bars and slideshows -->
<script>
// Side navigation
function w3_open() {
var x = document.getElementById("mySidenav");
x.style.width = "100%";
x.style.textAlign = "center";
x.style.fontSize = "50px";
x.style.paddingTop = "10%";
x.style.display = "block";
}
function w3_close() {
document.getElementById("mySidenav").style.display = "none";
}
// Tabs
function openCity(evt, cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
var activebtn = document.getElementsByClassName("testbtn");
for (i = 0; i < x.length; i++) {
activebtn[i].className = activebtn[i].className.replace(" w3-dark-grey", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " w3-dark-grey";
}
var mybtn = document.getElementsByClassName("testbtn")[0];
mybtn.click();
// Accordions
function myAccFunc(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-dark-grey";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-dark-grey", "");
}
}
// Slideshows
var slideIndex = 1;
function plusDivs(n) {
slideIndex = slideIndex + n;
showDivs(slideIndex);
}
function showDivs(n) {
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
};
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}
showDivs(1);
// Progress Bars
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width == 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("demoprgr").innerHTML = width * 1 + '%';
}
}
}
</script>
</body>
</html>
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Personalizar página HTML
por Kyo Panda 21.11.16 23:47
Aqui:
- Código:
<!DOCTYPE html>
<html>
<head>
<title>Alkware family</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" />
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-black.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
<style type="text/css">
.custom-button-list button {
width: 100%;
height: 50px;
}
body {
background-color: #565656;
}
.custom-navbar li {
float: initial;
display: inline-block;
}
</style>
</head>
<body>
<!-- Header -->
<header class="w3-container w3-theme w3-padding" id="myHeader">
<i onclick="w3_open()" class="fa fa-bars w3-xlarge w3-opennav"></i>
<div <div class="w3-center">
<h5>Bem-vindo ao forum Alkware</h5>
<h1 class="w3-xxxlarge w3-animate-bottom">ALKWARE FAMILY</h1>
<div class="w3-padding-32">
<button class="w3-btn w3-xlarge w3-dark-grey w3-hover-light-grey" onclick="document.getElementById('id01').style.display='block'"
style="font-weight:900;">Inscreva-se</button>
</div>
</div>
</header>
<!-- Modal -->
<div id="id01" class="w3-modal">
<div class="w3-modal-content w3-card-8 w3-animate-top">
<header class="w3-container w3-theme-l1">
<span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn">×</span>
<h4>Ip do A/D:<strong style="color: #9e9e9e;"> Em breve!</strong></h4>
<h4>A/D opcional: <strong style="color: #9e9e9e;">IP: 198.50.195.141:7776</strong></h4>
<h4>Servidor em que atuamos:<strong style="color: #9e9e9e;"> Brasil play vicio RPG</strong></h4>
</header>
<div class="w3-padding">
<strong>Venha fazer parte da nossa familia!!</strong>
<strong>clique abaixo para se inscrever,</strong><br />
<strong>após isso será redimensionado,ai basta clicar em "novo Topico" e preencher os dados.</strong><br
/>
<strong></strong><br />
<a class="w3-btn" href="http://alkwarefamily.forumeiros.com/f4-inscreva-se">Inscreva-se</a>
</div>
<footer class="w3-container w3-theme-l1">
<p>Familia Alkware</p>
</footer>
</div>
</div>
<div class="w3-container">
<div class="w3-accordion">
<div class="w3-row">
<ul class="w3-navbar w3-black w3-center custom-navbar">
<li><a href="/forum">Fórum</a></li>
<li><a href="/portal">Portal</a></li>
<li><a href="/register">Registre-se</a></li>
</ul>
</div>
<h2 class="w3-center" style="width: 250px;">Membros</h2>
<div class="w3-row">
<div class="w3-col m2 custom-button-list">
<button onclick="myAccFunc('Demo1')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align">Fundador</button>
<div id="Demo1" class="w3-accordion-content">
<div class="w3-container">
<p>Freez/Searby</p>
</div>
</div>
<button onclick="myAccFunc('Demo2')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align">master</button>
<div id="Demo2" class="w3-accordion-content">
<div class="w3-container">
<p>No member</p>
</div>
</div>
<button onclick="myAccFunc('Demo3')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align">Gerente</button>
<div id="Demo3" class="w3-accordion-content">
<div class="w3-container">
<p>As</p>
</div>
</div>
<button onclick="myAccFunc('Demo4')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align">Sub-Gerente</button>
<div id="Demo4" class="w3-accordion-content">
<div class="w3-container">
<p>No member</p>
</div>
</div>
<button onclick="myAccFunc('Demo5')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align">Lider</button>
<div id="Demo5" class="w3-accordion-content">
<div class="w3-container">
<p>No member</p>
</div>
</div>
<button onclick="myAccFunc('Demo6')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align">Coordenador</button>
<div id="Demo6" class="w3-accordion-content">
<div class="w3-container">
<p>No member</p>
</div>
</div>
<button onclick="myAccFunc('Demo7')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align">M.Alkware</button>
<div id="Demo7" class="w3-accordion-content">
<div class="w3-container">
<p>No member</p>
</div>
</div>
<button onclick="myAccFunc('Demo8')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align">M.ExperT</button>
<div id="Demo8" class="w3-accordion-content">
<div class="w3-container">
<p>SamuelS</p>
</div>
</div>
<button onclick="myAccFunc('Demo9')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align">M.Avançado</button>
<div id="Demo9" class="w3-accordion-content">
<div class="w3-container">
<p>WellingtoN<br /> Zund <br /> Rayleigh <br /> DreeW <br /> Nelsinn
<br /> </p>
</div>
</div>
<button onclick="myAccFunc('Demo10')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align">M.Novato</button>
<div id="Demo10" class="w3-accordion-content">
<div class="w3-container">
<p>
n0w<br /> iTz
<br /> MeLLo
<br /> kr
<br /></p>
</div>
</div>
<button onclick="myAccFunc('Demo11')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align">Designer's</button>
<div id="Demo11" class="w3-accordion-content">
<div class="w3-container">
<p>Rastafarii<br /> Xandy
<br /></p>
</div>
</div>
<button onclick="myAccFunc('Demo12')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align">Memoria</button>
<div id="Demo12" class="w3-accordion-content">
<div class="w3-container">
<p>Zeus<br /> Marcio <br /> Pattyz
<br /> FalcoN
<br /> Isabelly
<br /> Biancah
<br /></p>
</div>
</div>
</div>
<div class="w3-col m4">
<div class="w3-row-padding w3-center">
<div class="w3-card-2 w3-padding-top w3-white">
<h4>Historia Alkware</h4>
<p>Nosso Historia começa em 2014,mas não como Alkware e sim como Kamikaze,a Alkware é decendente
da Kamikaze...em junho de 2014 eu (Freez/Searby) fundava a Kamikaze mais conhecida com
Kmz, contei com a ajuda de 2 membros para me ajudar fundar a familia, cujo os nomes são
"Vinne" e o "Derpino" a kamikaze durou 6 meses, ela foi fechada em Novembro,por desentendimento
entre familia, os membros desidiram abandonar a familia e uma familia sem membro não
é uma familia.então a Historia da kmz acaba e agora começamos a historia da Alk,dessa
vez resolvi fundar a Alk sozinho...confesso que deu muito trabalho escolher o nome rs
e conserteza não fico do agrado de todos...Alkware foi fundada no dia 28/09/2016 mas
eu não posso contar toda a historia por que ela ainda não terminou e espere que não termine
tão cedo,quero que fique conhecida nos servidores,fique abastecida com boes membros e
que ela fique eternizada!
<br />
<br /> Obrigado a Todos!
</p>
</div>
</div>
</div>
<div class="w3-col m2">
<div class="w3-center">
<h2 class="tdm-title">TDM'S</h2>
</div>
</div>
<div class="w3-col m4">
<div class="w3-responsive w3-card-4">
<table class="w3-table w3-striped w3-bordered">
<thead>
<tr class="w3-theme">
<th>team</th>
<th>team</th>
<th>result</th>
</tr>
</thead>
<tbody>
<tr class="w3-white">
<td>Alkware</td>
<td>Vegeance</td>
<td>Wins</td>
</tr>
<tr class="w3-white">
<td>Alkware</td>
<td>KillerS</td>
<td>Wins</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="w3-container w3-theme-dark w3-padding-16">
<h5>- Alkware -</h5>
<div style="position:relative;bottom:55px;" class="w3-tooltip w3-right">
<span class="w3-text w3-theme-light w3-padding">Voltar para o topo</span>
<a class="w3-text-white" href="#myHeader">
<span class="w3-xlarge">
<i class="fa fa-chevron-circle-up"></i>
</span
></a>
</div>
</footer>
<a href="http://www.forumeiros.com" target="_blank">forumeiros.com</a>
<!-- Script for Sidenav, Tabs, Accordions, Progress bars and slideshows -->
<script>
// Side navigation
function w3_open() {
var x = document.getElementById("mySidenav");
x.style.width = "100%";
x.style.textAlign = "center";
x.style.fontSize = "50px";
x.style.paddingTop = "10%";
x.style.display = "block";
}
function w3_close() {
document.getElementById("mySidenav").style.display = "none";
}
// Tabs
function openCity(evt, cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
var activebtn = document.getElementsByClassName("testbtn");
for (i = 0; i < x.length; i++) {
activebtn[i].className = activebtn[i].className.replace(" w3-dark-grey", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " w3-dark-grey";
}
var mybtn = document.getElementsByClassName("testbtn")[0];
mybtn.click();
// Accordions
function myAccFunc(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-dark-grey";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-dark-grey", "");
}
}
// Slideshows
var slideIndex = 1;
function plusDivs(n) {
slideIndex = slideIndex + n;
showDivs(slideIndex);
}
function showDivs(n) {
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
};
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}
showDivs(1);
// Progress Bars
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width == 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("demoprgr").innerHTML = width * 1 + '%';
}
}
}
</script>
</body>
</html>
Kyo Panda- Hiper Membro
- Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939 -
Re: Personalizar página HTML
por Guilherme3f 22.11.16 16:23
Muito obrigado panda!
só gostaria de colocar o titulo de "TDM" em cima da caixa dos confrontos,igual o de "membros".
e tbm gostaria de colocar essa imagem como background atras do "<h1" do forum
só gostaria de colocar o titulo de "TDM" em cima da caixa dos confrontos,igual o de "membros".
e tbm gostaria de colocar essa imagem como background atras do "<h1" do forum
- Essa::
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Personalizar página HTML
por Sennior 26.11.16 9:15
Boas!
Assim?
Até mais.
Sennior
Assim?
- Código:
<!DOCTYPE html>
<html>
<style>.w3-theme {
color: #fff !important;
background: url(http://i64.tinypic.com/5zjms5.jpg) no-repeat center;
}</style>
<head>
<title>Alkware family</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" />
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-black.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
<style type="text/css">
.custom-button-list button {
width: 100%;
height: 50px;
}
body {
background-color: #565656;
}
.custom-navbar li {
float: initial;
display: inline-block;
}
</style>
</head>
<body>
<!-- Header -->
<header class="w3-container w3-theme w3-padding" id="myHeader">
<i onclick="w3_open()" class="fa fa-bars w3-xlarge w3-opennav"></i>
<div <div class="w3-center">
<h5>Bem-vindo ao forum Alkware</h5>
<h1 class="w3-xxxlarge w3-animate-bottom">ALKWARE FAMILY</h1>
<div class="w3-padding-32">
<button class="w3-btn w3-xlarge w3-dark-grey w3-hover-light-grey" onclick="document.getElementById('id01').style.display='block'"
style="font-weight:900;">Inscreva-se</button>
</div>
</div>
</header>
<!-- Modal -->
<div id="id01" class="w3-modal">
<div class="w3-modal-content w3-card-8 w3-animate-top">
<header class="w3-container w3-theme-l1">
<span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn">×</span>
<h4>Ip do A/D:<strong style="color: #9e9e9e;"> Em breve!</strong></h4>
<h4>A/D opcional: <strong style="color: #9e9e9e;">IP: 198.50.195.141:7776</strong></h4>
<h4>Servidor em que atuamos:<strong style="color: #9e9e9e;"> Brasil play vicio RPG</strong></h4>
</header>
<div class="w3-padding">
<strong>Venha fazer parte da nossa familia!!</strong>
<strong>clique abaixo para se inscrever,</strong><br />
<strong>após isso será redimensionado,ai basta clicar em "novo Topico" e preencher os dados.</strong><br
/>
<strong></strong><br />
<a class="w3-btn" href="http://alkwarefamily.forumeiros.com/f4-inscreva-se">Inscreva-se</a>
</div>
<footer class="w3-container w3-theme-l1">
<p>Familia Alkware</p>
</footer>
</div>
</div>
<div class="w3-container">
<div class="w3-accordion">
<div class="w3-row">
<ul class="w3-navbar w3-black w3-center custom-navbar">
<li><a href="/forum">Fórum</a></li>
<li><a href="/portal">Portal</a></li>
<li><a href="/register">Registre-se</a></li>
</ul>
</div>
<h2 class="w3-center" style="width: 250px;">Membros</h2>
<div class="w3-row">
<div class="w3-col m2 custom-button-list">
<button onclick="myAccFunc('Demo1')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align">Fundador</button>
<div id="Demo1" class="w3-accordion-content">
<div class="w3-container">
<p>Freez/Searby</p>
</div>
</div>
<button onclick="myAccFunc('Demo2')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align">master</button>
<div id="Demo2" class="w3-accordion-content">
<div class="w3-container">
<p>No member</p>
</div>
</div>
<button onclick="myAccFunc('Demo3')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align">Gerente</button>
<div id="Demo3" class="w3-accordion-content">
<div class="w3-container">
<p>As</p>
</div>
</div>
<button onclick="myAccFunc('Demo4')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align">Sub-Gerente</button>
<div id="Demo4" class="w3-accordion-content">
<div class="w3-container">
<p>No member</p>
</div>
</div>
<button onclick="myAccFunc('Demo5')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align">Lider</button>
<div id="Demo5" class="w3-accordion-content">
<div class="w3-container">
<p>No member</p>
</div>
</div>
<button onclick="myAccFunc('Demo6')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align">Coordenador</button>
<div id="Demo6" class="w3-accordion-content">
<div class="w3-container">
<p>No member</p>
</div>
</div>
<button onclick="myAccFunc('Demo7')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align">M.Alkware</button>
<div id="Demo7" class="w3-accordion-content">
<div class="w3-container">
<p>No member</p>
</div>
</div>
<button onclick="myAccFunc('Demo8')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align">M.ExperT</button>
<div id="Demo8" class="w3-accordion-content">
<div class="w3-container">
<p>SamuelS</p>
</div>
</div>
<button onclick="myAccFunc('Demo9')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align">M.Avançado</button>
<div id="Demo9" class="w3-accordion-content">
<div class="w3-container">
<p>WellingtoN<br /> Zund <br /> Rayleigh <br /> DreeW <br /> Nelsinn
<br /> </p>
</div>
</div>
<button onclick="myAccFunc('Demo10')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align">M.Novato</button>
<div id="Demo10" class="w3-accordion-content">
<div class="w3-container">
<p>
n0w<br /> iTz
<br /> MeLLo
<br /> kr
<br /></p>
</div>
</div>
<button onclick="myAccFunc('Demo11')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align">Designer's</button>
<div id="Demo11" class="w3-accordion-content">
<div class="w3-container">
<p>Rastafarii<br /> Xandy
<br /></p>
</div>
</div>
<button onclick="myAccFunc('Demo12')" class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-left-align">Memoria</button>
<div id="Demo12" class="w3-accordion-content">
<div class="w3-container">
<p>Zeus<br /> Marcio <br /> Pattyz
<br /> FalcoN
<br /> Isabelly
<br /> Biancah
<br /></p>
</div>
</div>
</div>
<div class="w3-col m4">
<div class="w3-row-padding w3-center">
<div class="w3-card-2 w3-padding-top w3-white">
<h4>Historia Alkware</h4>
<p>Nosso Historia começa em 2014,mas não como Alkware e sim como Kamikaze,a Alkware é decendente
da Kamikaze...em junho de 2014 eu (Freez/Searby) fundava a Kamikaze mais conhecida com
Kmz, contei com a ajuda de 2 membros para me ajudar fundar a familia, cujo os nomes são
"Vinne" e o "Derpino" a kamikaze durou 6 meses, ela foi fechada em Novembro,por desentendimento
entre familia, os membros desidiram abandonar a familia e uma familia sem membro não
é uma familia.então a Historia da kmz acaba e agora começamos a historia da Alk,dessa
vez resolvi fundar a Alk sozinho...confesso que deu muito trabalho escolher o nome rs
e conserteza não fico do agrado de todos...Alkware foi fundada no dia 28/09/2016 mas
eu não posso contar toda a historia por que ela ainda não terminou e espere que não termine
tão cedo,quero que fique conhecida nos servidores,fique abastecida com boes membros e
que ela fique eternizada!
<br />
<br /> Obrigado a Todos!
</p>
</div>
</div>
</div>
<div class="w3-col m2">
<div class="w3-center">
<h2 class="tdm-title">TDM'S</h2>
</div>
</div>
<div class="w3-col m4">
<div class="w3-responsive w3-card-4">
<table class="w3-table w3-striped w3-bordered">
<thead>
<tr class="w3-theme">
<th>team</th>
<th>team</th>
<th>result</th>
</tr>
</thead>
<tbody>
<tr class="w3-white">
<td>Alkware</td>
<td>Vegeance</td>
<td>Wins</td>
</tr>
<tr class="w3-white">
<td>Alkware</td>
<td>KillerS</td>
<td>Wins</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="w3-container w3-theme-dark w3-padding-16">
<h5>- Alkware -</h5>
<div style="position:relative;bottom:55px;" class="w3-tooltip w3-right">
<span class="w3-text w3-theme-light w3-padding">Voltar para o topo</span>
<a class="w3-text-white" href="#myHeader">
<span class="w3-xlarge">
<i class="fa fa-chevron-circle-up"></i>
</span
></a>
</div>
</footer>
<a href="http://www.forumeiros.com" target="_blank">forumeiros.com</a>
<!-- Script for Sidenav, Tabs, Accordions, Progress bars and slideshows -->
<script>
// Side navigation
function w3_open() {
var x = document.getElementById("mySidenav");
x.style.width = "100%";
x.style.textAlign = "center";
x.style.fontSize = "50px";
x.style.paddingTop = "10%";
x.style.display = "block";
}
function w3_close() {
document.getElementById("mySidenav").style.display = "none";
}
// Tabs
function openCity(evt, cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
var activebtn = document.getElementsByClassName("testbtn");
for (i = 0; i < x.length; i++) {
activebtn[i].className = activebtn[i].className.replace(" w3-dark-grey", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " w3-dark-grey";
}
var mybtn = document.getElementsByClassName("testbtn")[0];
mybtn.click();
// Accordions
function myAccFunc(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-dark-grey";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-dark-grey", "");
}
}
// Slideshows
var slideIndex = 1;
function plusDivs(n) {
slideIndex = slideIndex + n;
showDivs(slideIndex);
}
function showDivs(n) {
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
};
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}
showDivs(1);
// Progress Bars
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width == 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("demoprgr").innerHTML = width * 1 + '%';
}
}
}
</script>
</body>
</html>
Até mais.
Sennior
Sennior- Principal Contribuidor
- Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903 -
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Personalizar página HTML
por Cream 28.11.16 14:43
 | Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas". |
Cream- Membro Entusiasta
- Membro desde : 15/12/2010
Mensagens : 8540
Pontos : 11644 -
Tópicos semelhantes» Personalizar página html
» Personalizar página HTML
» Personalizar página HTML
» Declaro Urgência Help HTML ( Colocar vídeo para tocar automaticamente quando abrir a página de entrada do fórum em HTML Preciso do códico em HTML
» Personalizar página HTML
» Personalizar página HTML
» Personalizar página HTML
» Declaro Urgência Help HTML ( Colocar vídeo para tocar automaticamente quando abrir a página de entrada do fórum em HTML Preciso do códico em HTML
» Personalizar página HTML
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos