[Tutorial] Pagina HTML estilosa

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

avatar
Admin
Administrador
Tempo Online : 176d 8h 9m 37s
Mensagens : 693
Reputação : 3
Ver perfil do usuário http://bestweb.forumais.com

MensagemAdmin em 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>

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

Cria uma conta ou logue para postar uma mensagem.

Você precisa ser um membro, para poder postar uma resposta.

Criar conta

Participe de nossa comunidade, basta se registrar. É Fácil!


Criar uma conta

Logar

Já tem uma conta? Sem problemas, Logue agora.


Logar-se

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum