![[Tutorial] Pagina HTML estilosa L818BqA](https://2img.net/h/i.imgur.com/l818BqA.png)
Início[Tutorial] Pagina HTML estilosa
Página 1 de 1 • Compartilhe
![[Tutorial] Pagina HTML estilosa Empty](https://2img.net/i/empty.gif)
- Admin
- Tempo Online : 250d 6h 21m 59s
Mensagens : 693
Reputação : 4 -
Admin Seg Nov 21, 2016 12:20 am
Autor: Kyo Panda
Funcionalidade: Em todas as versões
Acesse:
Painel de Controle -> Modulos -> HTML & Javascripts -> Gestão das paginas HTML
E crie uma nova pagina HTML com esse código:
- 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>
Tópicos semelhantes
Cria uma conta ou logue para postar uma mensagem.
Você precisa ser um membro, para poder postar uma resposta.
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos|
|
|