Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

[Pedido] Página inicial básica em HTML

3 participantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode

Ir para baixo

Tópico resolvido [Pedido] Página inicial básica em HTML

Mensagem por Loadder 28.10.17 22:55

Detalhes da questão


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

Descrição


Olá à todos, eu gostaria de pedir para quem puder/souber, criar uma página HTML para mim...

Eu criei um exemplo de como eu quero, no photoshop para ajudar a pessoa que for me ajudar

Imagem:
https://i.imgur.com/I6jIz6C.png

PS: Sem um rodapé com nome em baixo... do jeito que está aí, porém, é um exemplo apenas, no background eu gostaria que fosse uma imagem que preencha todo o fundo (pode por qualquer uma que eu altero depois...)

Desde já, agradeço!
Loadder
Loadder
Novo Membro

Membro desde : 02/08/2017
Mensagens : 18
Pontos : 26

http://url-forum.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: [Pedido] Página inicial básica em HTML

Mensagem por Luiz 29.10.17 13:11

Aqui está:
Código:
<!DOCTYPE html>
<html lang="pt">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Nome do Fórum</title>
   
   <style>
      body {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
               -ms-flex-direction: column;
                     flex-direction: column;
         min-height: 100vh;
      }

      .fa-menu {
         background-color: #d0d0d0;
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: horizontal;
         -webkit-box-direction: normal;
               -ms-flex-direction: row;
                     flex-direction: row;
         -webkit-box-pack: justify;
               -ms-flex-pack: justify;
                     justify-content: space-between;
         -webkit-box-align: center;
               -ms-flex-align: center;
                     align-items: center;
      }

      .fa-menu .fa-nav-brand a {
         display: inline-block;
         margin: 20px 10px;
         padding: 20px;
         background-color: #f0f0f0;
         font-family: "Gegoria", serif;
         color: #333;
         text-decoration: none;
         font-size: 21px;
         -webkit-transition: all 120ms linear;
         transition: all 120ms linear;
      }

      .fa-menu .fa-nav-brand a:hover {
         background-color: #333;
         color: #f0f0f0;
      }

      .fa-menu .fa-navlinks {
         margin-right: 20px;
      }

      .fa-menu .fa-navlinks a {
         padding: 10px;
         font-size: 18px;
         font-family: "Georgia", serif;
         background-color: #f0f0f0;
         color: #555;
         border-radius: 6px;
         text-decoration: none;
         margin-left: 10px;
         -webkit-transition: all 120ms linear;
         transition: all 120ms linear;
      }

      .fa-menu .fa-navlinks a:hover {
         background-color: #555;
         color: #f0f0f0;
      }

      .fa-main {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
               -ms-flex-direction: column;
                     flex-direction: column;
         -webkit-box-pack: start;
               -ms-flex-pack: start;
                     justify-content: flex-start;
         -webkit-box-align: center;
               -ms-flex-align: center;
                     align-items: center;
         background-color: #a4a0a0;
         -webkit-box-flex: 1;
               -ms-flex-positive: 1;
                     flex-grow: 1;
         padding: 0 10%;
      }

      .fa-main .fa-titles {
         text-align: center;
         color: #fff;
      }

      .fa-main .fa-titles h1 {
         font-size: 40px;
         font-family: "Segoe UI", "Helvetica", sans-serif;
         margin: 20px 0 10px 0;
         font-weight: 700;
         text-transform: uppercase;
      }

      .fa-main .fa-titles p {
         margin: 0;
         margin-bottom: 25px;
         font-size: 18px;
         font-family: "Segoe UI", "Helvetica", sans-serif;
      }

      .fa-row {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: horizontal;
         -webkit-box-direction: normal;
               -ms-flex-direction: row;
                     flex-direction: row;
      }

      .fa-row > .fa-col {
         margin-right: 20px;
      }

      .fa-row > .fa-col:last-child {
         margin-right: 0;
      }

      .fa-card {
         border: solid 1px #c0c0c0;
         overflow: hidden;
      }

      .fa-card > .fa-card-header {
         background-color: #ccc;
         border-bottom: solid 1px #c0c0c0;
         padding: 15px;
         text-align: center;
      }

      .fa-card > .fa-card-header .lead {
         text-transform: uppercase;
         font-family: "Georgia", serif;
         font-weight: 500;
         font-size: 25px;
         color: #555;
      }

      .fa-card > .fa-card-content {
         padding: 15px;
         background-color: #ddd;
         color: #555;
      }

      @media screen and (max-width: 800px) {
         .fa-main {
            padding: 0 20px;
         }

         .fa-row {
            -ms-flex-wrap: wrap;
                  flex-wrap: wrap;
         }
      }

      ::-moz-selection {
         background-color: #555;
         color: #fff;
      }

      ::selection {
         background-color: #555;
         color: #fff;
      }
   </style>
</head>
<body>
   <nav class="fa-menu">
      <span class="fa-nav-brand">
         <a href="/">LOGO</a>
      </span>
      <div class="fa-navlinks">
         <a href="#">Fórum</a>
         <a href="#">Sobre</a>
         <a href="#">Texto</a>
      </div>
   </nav>
   <section class="fa-main">
      <div class="fa-row">
         <div class="fa-col fa-titles">
            <h1>Forumeiros</h1>
            <p>Mensagem Descritiva</p>
         </div>
      </div>
      <div class="fa-row">
         <div class="fa-col fa-card">
            <header class="fa-card-header">
               <span class="lead">Título</span>
            </header>
            <div class="fa-card-content">
               Lorem ipsum dolor sit amet quae ipsum nulla at dolor ipsum lorem dolor... Lorem ipsum dolor sit amet quae ipsum nulla at dolor ipsum lorem dolor... Lorem ipsum dolor sit amet quae ipsum nulla at dolor ipsum lorem dolor...
            </div>
         </div>
         <div class="fa-col fa-card">
            <header class="fa-card-header">
               <span class="lead">Título</span>
            </header>
            <div class="fa-card-content">
               Lorem ipsum dolor sit amet quae ipsum nulla at dolor ipsum lorem dolor... Lorem ipsum dolor sit amet quae ipsum nulla at dolor ipsum lorem dolor... Lorem ipsum dolor sit amet quae ipsum nulla at dolor ipsum lorem dolor...
            </div>
         </div>
         <div class="fa-col fa-card">
            <header class="fa-card-header">
               <span class="lead">Título</span>
            </header>
            <div class="fa-card-content">
               Lorem ipsum dolor sit amet quae ipsum nulla at dolor ipsum lorem dolor... Lorem ipsum dolor sit amet quae ipsum nulla at dolor ipsum lorem dolor... Lorem ipsum dolor sit amet quae ipsum nulla at dolor ipsum lorem dolor...
            </div>
         </div>
      </div>
   </section>
</body>
</html>
Luiz
Luiz
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: [Pedido] Página inicial básica em HTML

Mensagem por Loadder 29.10.17 14:59

Luiz escreveu:Aqui está:
Código:
<!DOCTYPE html>
<html lang="pt">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Nome do Fórum</title>
   
   <style>
      body {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
               -ms-flex-direction: column;
                     flex-direction: column;
         min-height: 100vh;
      }

      .fa-menu {
         background-color: #d0d0d0;
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: horizontal;
         -webkit-box-direction: normal;
               -ms-flex-direction: row;
                     flex-direction: row;
         -webkit-box-pack: justify;
               -ms-flex-pack: justify;
                     justify-content: space-between;
         -webkit-box-align: center;
               -ms-flex-align: center;
                     align-items: center;
      }

      .fa-menu .fa-nav-brand a {
         display: inline-block;
         margin: 20px 10px;
         padding: 20px;
         background-color: #f0f0f0;
         font-family: "Gegoria", serif;
         color: #333;
         text-decoration: none;
         font-size: 21px;
         -webkit-transition: all 120ms linear;
         transition: all 120ms linear;
      }

      .fa-menu .fa-nav-brand a:hover {
         background-color: #333;
         color: #f0f0f0;
      }

      .fa-menu .fa-navlinks {
         margin-right: 20px;
      }

      .fa-menu .fa-navlinks a {
         padding: 10px;
         font-size: 18px;
         font-family: "Georgia", serif;
         background-color: #f0f0f0;
         color: #555;
         border-radius: 6px;
         text-decoration: none;
         margin-left: 10px;
         -webkit-transition: all 120ms linear;
         transition: all 120ms linear;
      }

      .fa-menu .fa-navlinks a:hover {
         background-color: #555;
         color: #f0f0f0;
      }

      .fa-main {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
               -ms-flex-direction: column;
                     flex-direction: column;
         -webkit-box-pack: start;
               -ms-flex-pack: start;
                     justify-content: flex-start;
         -webkit-box-align: center;
               -ms-flex-align: center;
                     align-items: center;
         background-color: #a4a0a0;
         -webkit-box-flex: 1;
               -ms-flex-positive: 1;
                     flex-grow: 1;
         padding: 0 10%;
      }

      .fa-main .fa-titles {
         text-align: center;
         color: #fff;
      }

      .fa-main .fa-titles h1 {
         font-size: 40px;
         font-family: "Segoe UI", "Helvetica", sans-serif;
         margin: 20px 0 10px 0;
         font-weight: 700;
         text-transform: uppercase;
      }

      .fa-main .fa-titles p {
         margin: 0;
         margin-bottom: 25px;
         font-size: 18px;
         font-family: "Segoe UI", "Helvetica", sans-serif;
      }

      .fa-row {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: horizontal;
         -webkit-box-direction: normal;
               -ms-flex-direction: row;
                     flex-direction: row;
      }

      .fa-row > .fa-col {
         margin-right: 20px;
      }

      .fa-row > .fa-col:last-child {
         margin-right: 0;
      }

      .fa-card {
         border: solid 1px #c0c0c0;
         overflow: hidden;
      }

      .fa-card > .fa-card-header {
         background-color: #ccc;
         border-bottom: solid 1px #c0c0c0;
         padding: 15px;
         text-align: center;
      }

      .fa-card > .fa-card-header .lead {
         text-transform: uppercase;
         font-family: "Georgia", serif;
         font-weight: 500;
         font-size: 25px;
         color: #555;
      }

      .fa-card > .fa-card-content {
         padding: 15px;
         background-color: #ddd;
         color: #555;
      }

      @media screen and (max-width: 800px) {
         .fa-main {
            padding: 0 20px;
         }

         .fa-row {
            -ms-flex-wrap: wrap;
                  flex-wrap: wrap;
         }
      }

      ::-moz-selection {
         background-color: #555;
         color: #fff;
      }

      ::selection {
         background-color: #555;
         color: #fff;
      }
   </style>
</head>
<body>
   <nav class="fa-menu">
      <span class="fa-nav-brand">
         <a href="/">LOGO</a>
      </span>
      <div class="fa-navlinks">
         <a href="#">Fórum</a>
         <a href="#">Sobre</a>
         <a href="#">Texto</a>
      </div>
   </nav>
   <section class="fa-main">
      <div class="fa-row">
         <div class="fa-col fa-titles">
            <h1>Forumeiros</h1>
            <p>Mensagem Descritiva</p>
         </div>
      </div>
      <div class="fa-row">
         <div class="fa-col fa-card">
            <header class="fa-card-header">
               <span class="lead">Título</span>
            </header>
            <div class="fa-card-content">
               Lorem ipsum dolor sit amet quae ipsum nulla at dolor ipsum lorem dolor... Lorem ipsum dolor sit amet quae ipsum nulla at dolor ipsum lorem dolor... Lorem ipsum dolor sit amet quae ipsum nulla at dolor ipsum lorem dolor...
            </div>
         </div>
         <div class="fa-col fa-card">
            <header class="fa-card-header">
               <span class="lead">Título</span>
            </header>
            <div class="fa-card-content">
               Lorem ipsum dolor sit amet quae ipsum nulla at dolor ipsum lorem dolor... Lorem ipsum dolor sit amet quae ipsum nulla at dolor ipsum lorem dolor... Lorem ipsum dolor sit amet quae ipsum nulla at dolor ipsum lorem dolor...
            </div>
         </div>
         <div class="fa-col fa-card">
            <header class="fa-card-header">
               <span class="lead">Título</span>
            </header>
            <div class="fa-card-content">
               Lorem ipsum dolor sit amet quae ipsum nulla at dolor ipsum lorem dolor... Lorem ipsum dolor sit amet quae ipsum nulla at dolor ipsum lorem dolor... Lorem ipsum dolor sit amet quae ipsum nulla at dolor ipsum lorem dolor...
            </div>
         </div>
      </div>
   </section>
</body>
</html>


Opa Luiz, muito obrigado, tem apenas 1 coisinha que eu queria mudar nisso, nas laterais do site fica como se tivesse uma borda, não tem como removê-la? deixar o site full na tela?

Imagem:
https://i.imgur.com/x9NeLXh.png
Loadder
Loadder
Novo Membro

Membro desde : 02/08/2017
Mensagens : 18
Pontos : 26

http://url-forum.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: [Pedido] Página inicial básica em HTML

Mensagem por Luiz 29.10.17 17:01

Pode me passar o endereço da sua página HTML? Muito feliz
Luiz
Luiz
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: [Pedido] Página inicial básica em HTML

Mensagem por Loadder 29.10.17 18:22

Luiz escreveu:Pode me passar o endereço da sua página HTML? Muito feliz

http://urlxdr.forumeiros.com/h1-pagina-inicial#
Loadder
Loadder
Novo Membro

Membro desde : 02/08/2017
Mensagens : 18
Pontos : 26

http://url-forum.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: [Pedido] Página inicial básica em HTML

Mensagem por Luiz 29.10.17 18:23

No código de sua página, procure por:
Código:
<style>
Troque por:
Código:
<style>
  * {
    margin: 0;
    padding: 0;
  }

o/
Luiz
Luiz
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: [Pedido] Página inicial básica em HTML

Mensagem por Loadder 29.10.17 18:54

Luiz escreveu:No código de sua página, procure por:
Código:
<style>
Troque por:
Código:
<style>
  * {
    margin: 0;
    padding: 0;
  }

o/

Opa, perfeito, valeu aí mano!
Loadder
Loadder
Novo Membro

Membro desde : 02/08/2017
Mensagens : 18
Pontos : 26

http://url-forum.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: [Pedido] Página inicial básica em HTML

Mensagem por Ketholy 29.10.17 18:56

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Ketholy
Ketholy
Super Membro

Membro desde : 20/01/2017
Mensagens : 1309
Pontos : 1577

http://jogosrpg-com-br.forumais.com/forum https://twitter.com/Ketholy Suan

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode

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