Personalizar página HTML

+2
Shek
Guilherme3f
6 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Personalizar página HTML

Mensagem 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:

e se na edição eu errei em algum lugar podem me informar?
Guilherme3f

Guilherme3f
**

Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115

http://teste-kmz.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar página HTML

Mensagem por Guilherme3f 14.11.16 13:50

...
Guilherme3f

Guilherme3f
**

Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115

http://teste-kmz.forumeiros.com/forum

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Personalizar página HTML

Mensagem por Shek 14.11.16 14:21

Boa tarde.

Fico feliz por saber que deseja aprender. Piscada 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

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar página HTML

Mensagem por Guilherme3f 14.11.16 14:25

é muito interessante isso html,css,jquery Feliz

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

Guilherme3f
**

Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115

http://teste-kmz.forumeiros.com/forum

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Personalizar página HTML

Mensagem 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! Feliz
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar página HTML

Mensagem por Guilherme3f 14.11.16 15:01

mas eu gostaria de manter em sigilo minha pagina html,pois quero que seja unica...
Guilherme3f

Guilherme3f
**

Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115

http://teste-kmz.forumeiros.com/forum

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Personalizar página HTML

Mensagem 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

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar página HTML

Mensagem por Guilherme3f 14.11.16 15:26

posso postar e assim que for finalizado esse topico posso retirar?
Guilherme3f

Guilherme3f
**

Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115

http://teste-kmz.forumeiros.com/forum

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Personalizar página HTML

Mensagem 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!
Cream

Cream
Membro Entusiasta
Membro Entusiasta

Membro desde : 15/12/2010
Mensagens : 8540
Pontos : 11644

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar página HTML

Mensagem 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>"?
Guilherme3f

Guilherme3f
**

Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115

http://teste-kmz.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar página HTML

Mensagem por Guilherme3f 14.11.16 23:34

...
Guilherme3f

Guilherme3f
**

Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115

http://teste-kmz.forumeiros.com/forum

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Personalizar página HTML

Mensagem 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:
Código:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" / >
Esse código "linka" o CSS do bootstrap para sua página HTML.
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. Muito feliz
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar página HTML

Mensagem 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?
Guilherme3f

Guilherme3f
**

Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115

http://teste-kmz.forumeiros.com/forum

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Personalizar página HTML

Mensagem 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. Feliz
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar página HTML

Mensagem por Guilherme3f 15.11.16 13:59

Guilherme3f

Guilherme3f
**

Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115

http://teste-kmz.forumeiros.com/forum

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Personalizar página HTML

Mensagem 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é? Piscada

Até mais.
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar página HTML

Mensagem 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

Guilherme3f
**

Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115

http://teste-kmz.forumeiros.com/forum

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Personalizar página HTML

Mensagem por Luiz 15.11.16 17:14

Olá.

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

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar página HTML

Mensagem 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?
Guilherme3f

Guilherme3f
**

Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115

http://teste-kmz.forumeiros.com/forum

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Personalizar página HTML

Mensagem por Luiz 15.11.16 17:24

Bom só é permitida uma questão por tópico...
No mais, poderia dizer qual tag ficou vermelha?
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar página HTML

Mensagem por Guilherme3f 15.11.16 17:33

ah </head>
Guilherme3f

Guilherme3f
**

Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115

http://teste-kmz.forumeiros.com/forum

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Personalizar página HTML

Mensagem por Luiz 15.11.16 19:55

Altere o código 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>

E diga se ainda fica vermelha.
Atenciosamente. Feliz
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar página HTML

Mensagem por Guilherme3f 15.11.16 20:01

sim,resolveu Feliz

mia seu gostaria de alguem para me ajudar com minha pagina
Guilherme3f

Guilherme3f
**

Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115

http://teste-kmz.forumeiros.com/forum

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Personalizar página HTML

Mensagem por Luiz 15.11.16 20:15

Não entendi muito bem como quer sua página, poderia ser mais específico?
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar página HTML

Mensagem 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

Guilherme3f
**

Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115

http://teste-kmz.forumeiros.com/forum

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Personalizar página HTML

Mensagem por Luiz 15.11.16 21:25

Olá, veja se resulta:

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. Feliz
Observação: as alterações não são feitas com tags, mas sim com CSS! Muito feliz
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar página HTML

Mensagem por Guilherme3f 15.11.16 21:45

Não :/
Guilherme3f

Guilherme3f
**

Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115

http://teste-kmz.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar página HTML

Mensagem por Guilherme3f 16.11.16 14:13

Alguem pode me ajudar? @Kyo panda @cepheus @shek @Cream?
Guilherme3f

Guilherme3f
**

Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115

http://teste-kmz.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar página HTML

Mensagem por Guilherme3f 16.11.16 21:02

...
Guilherme3f

Guilherme3f
**

Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115

http://teste-kmz.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar página HTML

Mensagem 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

Guilherme3f
**

Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115

http://teste-kmz.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar página HTML

Mensagem por Kyo Panda 17.11.16 16:41

Deram um bom progresso aqui, heim?

Posso assumir que a versão mais recente do código da página é a deixada na mensagem do @luuuiiiz, ou o senhor está a utilizar outra? Poderia passar a última versão do código aqui?
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar página HTML

Mensagem por Guilherme3f 17.11.16 17:38

Sim kkk

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

Guilherme3f
**

Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115

http://teste-kmz.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar página HTML

Mensagem por Kyo Panda 17.11.16 18:05

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" />
    </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

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar página HTML

Mensagem 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?
Guilherme3f

Guilherme3f
**

Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115

http://teste-kmz.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar página HTML

Mensagem por Kyo Panda 17.11.16 18:35

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">
            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

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar página HTML

Mensagem 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:
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

Guilherme3f
**

Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115

http://teste-kmz.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar página HTML

Mensagem por Kyo Panda 19.11.16 21:01

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">
        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

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar página HTML

Mensagem 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

Guilherme3f
**

Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115

http://teste-kmz.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar página HTML

Mensagem 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

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar página HTML

Mensagem 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

Essa::
Guilherme3f

Guilherme3f
**

Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115

http://teste-kmz.forumeiros.com/forum

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Personalizar página HTML

Mensagem por Sennior 26.11.16 9:15

Boas!

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

Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar página HTML

Mensagem por Guilherme3f 28.11.16 13:40

Obg
Guilherme3f

Guilherme3f
**

Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115

http://teste-kmz.forumeiros.com/forum

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Personalizar página HTML

Mensagem por Cream 28.11.16 14:43

Personalizar página HTML Symbol10 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

Cream
Membro Entusiasta
Membro Entusiasta

Membro desde : 15/12/2010
Mensagens : 8540
Pontos : 11644

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos