Página Inicial HTML

Detalhes da questão

Endereço do fórum: http://ffs-nwd.forumeiros.com
Versão do fórum: ModernBB

Descrição

Código:

<style type="text/css">
h1 {
color: #7700ff !important;
}
.btn-outline-info {
color: #7700ff !important;
border-color: #7700ff !important;
}
.btn-outline-info:hover {
background-color: #7700ff !important;
border-color: #7700ff !important;
}
.mbr-arrow > a > i {
top: 12px !important;
}
.mbr-fullscreen {
  background-image: url('http://planetcarsz.com/assets/uploads/NISSAN%20GT-R%20NISMO%20WORLD%20RECORD%202016%2001.jpg');
}
</style>                
<!--  Site made with Mobirise Website Builder v4.0.16, https://mobirise.com  -->      
<!--  Pagina criada por Harleen Ex-Ajudeira - Fórum dos Fóruns  -->      <meta charset="UTF-8" />        <meta content="IE=edge" http-equiv="X-UA-Compatible" />        <meta content="Mobirise v4.0.16, mobirise.com" name="generator" />        <meta content="width=device-width, initial-scale=1" name="viewport" />        <link type="image/x-icon" href="" rel="shortcut icon" />        <meta content="" name="description" />        <title>Bem Vindo ao Fórum</title>        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />        <link href="https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet" />        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Sans:400,700" />        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700" />        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" />        <link href="https://arquivosdiversos.github.io/mixwin/assets/web/assets/mobirise-icons/mobirise-icons.css" rel="stylesheet" />        <link href="https://arquivosdiversos.github.io/mixwin/assets/tether/tether.min.css" rel="stylesheet" />        <link href="https://arquivosdiversos.github.io/mixwin/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" />        <link href="https://arquivosdiversos.github.io/mixwin/assets/socicon/css/styles.css" rel="stylesheet" />        <link href="https://arquivosdiversos.github.io/mixwin/assets/theme/css/style.css" rel="stylesheet" />        <link type="text/css" href="https://arquivosdiversos.github.io/mixwin/assets/mobirise/css/mbr-additional.css" rel="stylesheet" />                             <section data-rv-view="63" id="header2-2" class="mbr-fullscreen mbr-parallax-background">                </section>
<div style="opacity: 0.7; background-color: rgb(0, 0, 0);" class="mbr-overlay">
</div><section data-rv-view="63" id="header2-2" class="mbr-fullscreen mbr-parallax-background">         </section>
<div style="" class="container align-center">
            
 <div class="media-container-column mbr-white col-md-10 offset-md-1">
                
 <h1 class="mbr-section-title mbr-bold pb-3 mbr-fonts-style display-1">
                  BEM VINDO AO FÓRUM
 </h1>
                                              
 <div class="mbr-section-btn">
                    <a href="/register" class="btn btn-outline-info"><span class="mbri-edit mbr-iconfont mbr-iconfont-btn"></span>CRIAR CONTA</a>                    <a href="/forum" class="btn btn-outline-info"><span class="mbri-home mbr-iconfont mbr-iconfont-btn"></span>ENTRAR NO FÓRUM</a>                    <a target="_blank" href="https://discordapp.com/invite/fVVnFJ8" class="btn btn-outline-info"><span class="socicon socicon-discord mbr-iconfont mbr-iconfont-btn"></span>DISCORD</a>                
 </div>
            
 </div>
        
</div><section data-rv-view="63" id="header2-2" class="mbr-fullscreen mbr-parallax-background">        </section>
<div style="" aria-hidden="true" class="mbr-arrow hidden-sm-down">
            <a href="#next">                <em class="mbri-down mbr-iconfont"></em>            </a>        
</div><section data-rv-view="63" id="header2-2" class="mbr-fullscreen mbr-parallax-background">    </section>     <section class="engine"><a href="https://mobirise.co/m">bootstrap table</a></section><section data-rv-view="66" id="features16-6" class="features16 cid-qrzmV6KjG9">                             </section>
<div style="" class="container align-center">
            
 <h2 class="pb-3 mbr-fonts-style mbr-section-title display-2">
                EQUIPE DO FÓRUM
 </h2>
            
 <div class="row media-row">
                          
 <div class="team-item col-lg-3 col-md-6">
                    
 <div class="item-image">
                      <img media-simple="true" title="" alt="" src="https://arquivosdiversos.github.io/mixwin/assets/images/fqkjkb9-400x300.jpg" />                    
 </div>
                    
 <div class="item-caption py-3">
                        
 <div class="item-name px-2">
                            
 <p class="mbr-fonts-style display-5">
                              [FFS]Rosberg                            
 </p>
                        
 </div>
                                                                  
 </div>
                
 </div>
 <div class="team-item col-lg-3 col-md-6">
                    
 <div class="item-image">
                      <img media-simple="true" title="" alt="" src="https://arquivosdiversos.github.io/mixwin/assets/images/ywtup7n-225x225.jpg" />                    
 </div>
                    
 <div class="item-caption py-3">
                        
 <div class="item-name px-2">
                            
 <p class="mbr-fonts-style display-5">
                              [FFS]skywaLL                            
 </p>
                        
 </div>
                                                                    
 </div>
                
 </div>
 <div class="team-item col-lg-3 col-md-6">
                    
 <div class="item-image">
                      <img media-simple="true" title="" alt="" src="https://arquivosdiversos.github.io/mixwin/assets/images/zok8ndg-225x225.jpg" />                    
 </div>
                    
 <div class="item-caption py-3">
                        
 <div class="item-name px-2">
                            
 <p class="mbr-fonts-style display-5">
                                                          
 </p>
                      
 </div>
                                                                  
 </div>
                
 </div>
 </div>
          
</div><section data-rv-view="66" id="features16-6" class="features16 cid-qrzmV6KjG9">    </section>     <section data-rv-view="76" id="footer6-7" class="cid-qrznhOISmE" once="">                       </section>
<div style="" class="container">
            
 <div class="media-container-row align-center mbr-white">
                
 <div class="col-12">
                    
 <p class="mbr-text mb-0 mbr-fonts-style display-7">
                       Criado por <a class="text-white" target="_blank" href="https://ajuda.forumeiros.com/u47631">Harleen</a> | Hospedado em <a class="text-white" target="_blank" href="https://www.forumeiros.com">Forumeiros</a>
 </p>
                
 </div>
            
 </div>
        
</div><section data-rv-view="76" id="footer6-7" class="cid-qrznhOISmE" once="">    </section>       <script src="https://arquivosdiversos.github.io/mixwin/assets/web/assets/jquery/jquery.min.js"></script>      <script src="https://arquivosdiversos.github.io/mixwin/assets/tether/tether.min.js"></script>      <script src="https://arquivosdiversos.github.io/mixwin/assets/bootstrap/js/bootstrap.min.js"></script>      <script src="https://arquivosdiversos.github.io/mixwin/assets/smooth-scroll/smooth-scroll.js"></script>      <script src="https://arquivosdiversos.github.io/mixwin/assets/jarallax/jarallax.min.js"></script>      <script src="https://arquivosdiversos.github.io/mixwin/assets/theme/js/script.js"></script>

Esse e o código da minha Página HTML, eu queria personaliza-la nesse estilo com a mesma imagem do código enviado a cima. E queria que mudassem o título para Bem Vindo (a) e adicionassem esse logo no título 
OBS: O estilo da pagina tem q ser diferente do link mostrado, era só uma base do que eu quero

Olá @SkoLL,
O Senhor basicamente pretende que nós recriemos a sua página, certo? Não têm uma ideia mais assertiva do que pretende, isso é se o Senhor quer um menu de navegação, uma caixa de login, ou simplesmente os botões como apresentado do seu código.


Aguardo uma resposta sua,
pedxz.

Isso mesmo, quero que recriam e que de uma personalizada nela mas que não perca o tema: Corrida.
Só quero os botões mesmo, ENTRAR FORUM, REGISTRAR E DISCORD

Algum assim?

Código:

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title>Bem vindo(a) ao FFS-nwd!</title>
    <link type="image/png" href="https://i.imgur.com/jTwGEvJ.png" rel="icon" />
    <link rel="stylesheet" href="https://forumeiros.github.io/resources/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="https://forumeiros.github.io/resources/font-awesome/css/font-awesome.min.css" />  
    <script src="https://forumeiros.github.io/resources/bootstrap/bootstrap.min.js"></script>
    <script src="https://forumeiros.github.io/resources/bootstrap/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
 
<body class="bg-light" style="background: url(https://i42.servimg.com/u/f42/19/82/86/09/white_10.png)">
 
    <div class="container">
 <div class="py-5 text-center">
        <img class="d-block mx-auto mb-4" src="https://i.imgur.com/J7Rf7af_d.jpg" alt="" width="72" height="72" />
        <h2>Escolher local</h2>
        <div class="btn-group" role="group" aria-label="Escolha">
  <button onclick="location.href='/register?change_temp=3'" type="button" class="btn btn-dark btn-lg">Criar Conta</button>
  <button onclick="location.href='/forum?change_temp=3'" type="button" class="btn btn-dark btn-lg">Fórum</button>
  <button onclick="location.href='/portal?change_temp=3'" type="button" class="btn btn-dark btn-lg">Portal</button>
</div>
      </div>
        
 
    </div>
    <footer class="my-5 pt-5 text-muted text-center text-small">
        <p class="mb-1"> 2018 FFS-nwd <br /> by <a class="text-dark" href="https://forumeiros.com">Forumeiros.com</a></p>
    </footer>
</body>
 
</html>

Eu recomendaria a organização semelhante a: Questão Resolvida , devido a página ficar quase vazia

Seria legal está organização, poderia realiza-la por gentileza?

Algum assim está bom?

Código:

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title>Bem vindo(a) ao FFS-nwd!</title>
    <link type="image/png" href="https://i.imgur.com/jTwGEvJ.png" rel="icon" />
    <link rel="stylesheet" href="https://forumeiros.github.io/resources/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="https://forumeiros.github.io/resources/font-awesome/css/font-awesome.min.css" />  
    <script src="https://forumeiros.github.io/resources/bootstrap/bootstrap.min.js"></script>
    <script src="https://forumeiros.github.io/resources/bootstrap/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
 
<body class="bg-light" style="background: url(https://i.servimg.com/u/f42/19/82/86/09/white_10.png)">
<script type="text/javascript">
        (function($) {
            'use strict';
 
            $(function() {
                $.get('/forum')
                    .done(function(context) {
 
                        if ($('a[id="logout"]', context).length != 0) {
                            $('.alert-success').fadeIn();
                            setTimeout(
                                function() {
                                    window.location.replace("/forum");
                                }, 3000);
 
                        }
 
                    })
                    .fail(function() {
                        alert('Contacte o Suporte Forumeiros!');
                    });
 
            });
        }(jQuery));
    </script>
 
 
    <div class="container">
     <div class="py-5 text-center">
        <img class="d-block mx-auto mb-4" src="https://i.imgur.com/J7Rf7af_d.jpg" alt="" width="72" height="72" />
       <h2>FFS NWD</h2>
       <p class="lead">Aqui fica um pequeno texto informativo</p>
      </div>
    <div class="row">
      <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
        <div class="card card-signin my-5">
          <div class="card-body">
            <h5 class="card-title text-center">Entrar no fórum</h5>
            <form class="form-signin" method="post" action="/login">
              <div class="alert alert-success" style="display:none;" role="alert">
                  Sessão iniciada, redirecionado...
              </div>
              <div class="form-label-group">
                <input class="form-control" placeholder="Seu usuário" value="" maxlength="40" size="30" id="username" name="username" tabindex="1" type="text" required autofocus />
              </div>

              <div class="form-label-group">
                <input class="form-control" maxlength="25" size="30" name="password" id="password" tabindex="2" type="password" placeholder="Sua Senha" required />
              </div>

              <div class="custom-control custom-checkbox mb-3">
                <input type="checkbox" class="custom-control-input" name="autologin" id="customCheck1" />
                <label class="custom-control-label" for="customCheck1">Lembrar dados</label>
              </div>
              <input value="" name="redirect" type="hidden" />
              <input value="" name="query" type="hidden" />
              <input class="btn btn-lg btn-primary btn-block text-uppercase" value="Entrar" tabindex="6" name="login" type="submit" />
              </form>
              <hr class="my-4" />
              <button class="btn btn-lg btn-google btn-block text-uppercase" name="login" type="submit" onclick="location.href='/register?change_temp=3'"><i class="fa fa-user mr-2"></i> Criar Conta</button>
          </div>
        </div>
      </div>
    </div>
    <footer class="my-5 pt-5 text-muted text-center text-small">
        <p class="mb-1"> 2018 FFS NWD</p>
        <ul class="list-inline">
          <li class="list-inline-item"><a href="/forum">Início</a></li>
          <li class="list-inline-item"><a href="/faq">FAQ</a></li>
          <li class="list-inline-item"><a href="/profile?mode=sendpassword">Esqueci a senha</a></li>
         <li class="list-inline-item"><a href="https://discordapp.com/invite/fVVnFJ8">Discord</a></li>
        </ul>
      </footer>
</div>
</body>
 
</html>

Gostei. Mas quero que faça algumas alterações.
O título deixe só Bem Vindo (a), mas o ícone da FFS que lhe mandei.
Esse ícone que fica a cima do texto informativo n precisa, pode retira-lo.
E no texto informativo coloque:
Quando eu me tornar campeão, não vou deixar de ser o mesmo.

Desculpe,
Tinha percebido que a imagem era para ser um logotipo, mude a página para o seguinte:

Código:

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title>Bem vindo(a)</title>
    <link type="image/png" href="https://i.imgur.com/J7Rf7af_d.jpg" rel="icon" />
    <link rel="stylesheet" href="https://forumeiros.github.io/resources/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="https://forumeiros.github.io/resources/font-awesome/css/font-awesome.min.css" /> 
    <script src="https://forumeiros.github.io/resources/bootstrap/bootstrap.min.js"></script>
    <script src="https://forumeiros.github.io/resources/bootstrap/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
 
<body class="bg-light" style="background: url(https://i.servimg.com/u/f42/19/82/86/09/white_10.png)">
<script type="text/javascript">
        (function($) {
            'use strict';
 
            $(function() {
                $.get('/forum')
                    .done(function(context) {
 
                        if ($('a[id="logout"]', context).length != 0) {
                            $('.alert-success').fadeIn();
                            setTimeout(
                                function() {
                                    window.location.replace("/forum");
                                }, 3000);
 
                        }
 
                    })
                    .fail(function() {
                        alert('Contacte o Suporte Forumeiros!');
                    });
 
            });
        }(jQuery));
    </script>
 
 
    <div class="container">
    <div class="py-5 text-center">
      <h2>FFS NWD</h2>
      <p class="lead">Quando eu me tornar campeão, não vou deixar de ser o mesmo.</p>
      </div>
    <div class="row">
      <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
        <div class="card card-signin my-5">
          <div class="card-body">
            <h5 class="card-title text-center">Entrar no fórum</h5>
            <form class="form-signin" method="post" action="/login">
              <div class="alert alert-success" style="display:none;" role="alert">
                  Sessão iniciada, redirecionado...
              </div>
              <div class="form-label-group">
                <input class="form-control" placeholder="Seu usuário" value="" maxlength="40" size="30" id="username" name="username" tabindex="1" type="text" required autofocus />
              </div>
 
              <div class="form-label-group">
                <input class="form-control" maxlength="25" size="30" name="password" id="password" tabindex="2" type="password" placeholder="Sua Senha" required />
              </div>
 
              <div class="custom-control custom-checkbox mb-3">
                <input type="checkbox" class="custom-control-input" name="autologin" id="customCheck1" />
                <label class="custom-control-label" for="customCheck1">Lembrar dados</label>
              </div>
              <input value="" name="redirect" type="hidden" />
              <input value="" name="query" type="hidden" />
              <input class="btn btn-lg btn-primary btn-block text-uppercase" value="Entrar" tabindex="6" name="login" type="submit" />
              </form>
              <hr class="my-4" />
              <button class="btn btn-lg btn-google btn-block text-uppercase" name="login" type="submit" onclick="location.href='/register?change_temp=3'"><i class="fa fa-user mr-2"></i> Criar Conta</button>
          </div>
        </div>
      </div>
    </div>
    <footer class="my-5 pt-5 text-muted text-center text-small">
        <p class="mb-1">️ 2018 FFS NWD</p>
        <ul class="list-inline">
          <li class="list-inline-item"><a href="/forum">Início</a></li>
          <li class="list-inline-item"><a href="/faq">FAQ</a></li>
          <li class="list-inline-item"><a href="/profile?mode=sendpassword">Esqueci a senha</a></li>
        <li class="list-inline-item"><a href="https://discordapp.com/invite/fVVnFJ8">Discord</a></li>
        </ul>
      </footer>
</div>
</body>
 
</html>

A imagem de fundo quero uma bem dahora

A imagem é que necessito da sua ajuda, visto que não sei que imagem de fundo o Senhor gostará, têm alguma ideia?

A imagem pode ser a mesma da pagina inicial anterior.

Altere a página para:

Código:

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title>Bem vindo(a)</title>
    <link type="image/png" href="https://i.imgur.com/J7Rf7af_d.jpg" rel="icon" />
    <link rel="stylesheet" href="https://forumeiros.github.io/resources/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="https://forumeiros.github.io/resources/font-awesome/css/font-awesome.min.css" />
    <script src="https://forumeiros.github.io/resources/bootstrap/bootstrap.min.js"></script>
    <script src="https://forumeiros.github.io/resources/bootstrap/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
 
<body class="bg-light" style="background: url('http://planetcarsz.com/assets/uploads/NISSAN%20GT-R%20NISMO%20WORLD%20RECORD%202016%2001.jpg');">
<script type="text/javascript">
        (function($) {
            'use strict';
 
            $(function() {
                $.get('/forum')
                    .done(function(context) {
 
                        if ($('a[id="logout"]', context).length != 0) {
                            $('.alert-success').fadeIn();
                            setTimeout(
                                function() {
                                    window.location.replace("/forum");
                                }, 3000);
 
                        }
 
                    })
                    .fail(function() {
                        alert('Contacte o Suporte Forumeiros!');
                    });
 
            });
        }(jQuery));
    </script>
 
 
    <div class="container">
    <div class="py-5 text-center">
      <h2>FFS NWD</h2>
      <p class="lead">Quando eu me tornar campeão, não vou deixar de ser o mesmo.</p>
      </div>
    <div class="row">
      <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
        <div class="card card-signin my-5">
          <div class="card-body">
            <h5 class="card-title text-center">Entrar no fórum</h5>
            <form class="form-signin" method="post" action="/login">
              <div class="alert alert-success" style="display:none;" role="alert">
                  Sessão iniciada, redirecionado...
              </div>
              <div class="form-label-group">
                <input class="form-control" placeholder="Seu usuário" value="" maxlength="40" size="30" id="username" name="username" tabindex="1" type="text" required autofocus />
              </div>
 
              <div class="form-label-group">
                <input class="form-control" maxlength="25" size="30" name="password" id="password" tabindex="2" type="password" placeholder="Sua Senha" required />
              </div>
 
              <div class="custom-control custom-checkbox mb-3">
                <input type="checkbox" class="custom-control-input" name="autologin" id="customCheck1" />
                <label class="custom-control-label" for="customCheck1">Lembrar dados</label>
              </div>
              <input value="" name="redirect" type="hidden" />
              <input value="" name="query" type="hidden" />
              <input class="btn btn-lg btn-primary btn-block text-uppercase" value="Entrar" tabindex="6" name="login" type="submit" />
              </form>
              <hr class="my-4" />
              <button class="btn btn-lg btn-google btn-block text-uppercase" name="login" type="submit" onclick="location.href='/register?change_temp=3'"><i class="fa fa-user mr-2"></i> Criar Conta</button>
          </div>
        </div>
      </div>
    </div>
    <footer class="my-5 pt-5 text-muted text-center text-small">
        <p class="mb-1">️️ 2018 FFS NWD</p>
        <ul class="list-inline">
          <li class="list-inline-item"><a href="/forum">Início</a></li>
          <li class="list-inline-item"><a href="/faq">FAQ</a></li>
          <li class="list-inline-item"><a href="/profile?mode=sendpassword">Esqueci a senha</a></li>
        <li class="list-inline-item"><a href="https://discordapp.com/invite/fVVnFJ8">Discord</a></li>
        </ul>
      </footer>
</div>
</body>
 
</html>