Marcelo Calazans

24 de julho de 2021

1 hora atrás, EddK disse:

Como faço para adicionar o texto (ver cupom) do botão?

@Marcelo Calazans

Gostei de fazer isso, é uma brincadeira interessante.

Confesso que nunca tinha pensado em fazer isso, mas achei legal.

Mudei algumas coisas e acho que ficou melhor, mas o deles é muito bom, difícil fazer exatamente igual.

O meu modelo tem algumas limitações estruturais, e se fosse para fazer um exatamente igual ao deles, teria que partir de outro princípio eu acho.

Veja o código novo:

<html>

<body>

<style>
.container-butt {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	background-color: #ecfae5;
	width: 240px;  
	border: 1px solid #46C600;	
  border-radius: 8px;
}

.container-butt p {
	text-align: right;
	color: #255909;
	font-style: bold;
	margin-right: 8px;
}

.but {
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: #46C600;
  border: none;
  color: #337b0c;
  width: 200px;
  height: 50px;  
  z-index: 1;  
  transition: all 0.5s 0s ease;  
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}



.but p {
  padding: 0;
  margin: 0;
  position: absolute;
  left: 50%;
  top: 50%;  
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  font-size: 16px;
}

.but:after {
    top: 5px;
    right: -17px;    
    background-image: linear-gradient(36deg, #b1cea8, #c6e8b8 38%, #c9e0be 47%, #c0e1b3 51%, rgba(255,255,255,0) 54%) !important;
    transform-origin: center top;
    border-radius: 5px;
    transform: rotate(35deg);
    position: absolute;
    margin-right: -27.5px;
    content: "";
    width: 43px;
    height: 55px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transform-origin: top;
    -webkit-transition: all 0.5s 0s ease;
    -moz-transition: all 0.5s 0s ease;
    transition: all 0.5s 0s ease;
}

.but:hover:after {        
    border-radius:5px;    
    top: 8px;
    right: -22px;    
    width:48px;
    height:60px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    border-width:0;
    transform-origin:top;
    transform: rotate(42deg);
}
.but:hover {	
  width: 170px;
  background-color: #3aa300;
}
</style>

<div class="container-butt">
    <p>Clube do Hardware</p>
    <button class="but"><p>Ver Cupom</p></button>
</div>

</body>

</html>

Com certeza tem uma forma melhor de se fazer isso, e se eu precisasse fazer isso em um site de um cliente, eu iria parar para pensar um pouco em uma solução mais estável.

Vamos aguardar para ver se algum outro colega tem uma opção melhor.

Abraços.

24 de julho de 2021

@EddK

Olá colega.

Não é exatamente igual, mas o código abaixo está funcionando aqui comigo no Google Chrome.

O modelo do botão do site deles (cuponomia.com.br), a ser copiado, é esse abaixo, para quem quiser ver:

<html>

<body>

<style>
.container-butt {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	background-color: #78bf9a;
	width: 240px;  
}

.container-butt p {
	text-align: right;
	color: black;
	margin-right: 2px;
}

.but {
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: #46C600;
  border: none;
  color: #337b0c;
  width: 200px;
  height: 50px;  
  z-index: 1;  
  transition: all 0.5s 0s ease;
}

.but:after {
    top: 5px;
    right: -17px;    
    background-image: linear-gradient(36deg, #b1cea8, #c6e8b8 38%, #c9e0be 47%, #c0e1b3 51%, rgba(255,255,255,0) 54%) !important;
    transform-origin: center top;
    border-radius: 5px;
    transform: rotate(35deg);
    position: absolute;
    margin-right: -27.5px;
    content: "";
    width: 43px;
    height: 55px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transform-origin: top;
    -webkit-transition: all 0.5s 0s ease;
    -moz-transition: all 0.5s 0s ease;
    transition: all 0.5s 0s ease;
}

.but:hover:after {        
    border-radius:5px;    
    top: 8px;
    right: -22px;    
    width:48px;
    height:60px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    border-width:0;
    transform-origin:top;
    transform: rotate(42deg);
}
.but:hover {	
  width: 170px;
}
</style>

<div class="container-butt">
    <p>Clube do Hardware</p>
    <button class="but"></button>
</div>

</body>

</html>

Digo que funciona comigo no Google Chrome, pois precisa testar para ver se funciona bem também em outros navegadores.

Não sei bem como eles fizeram o deles, que é muito bem feito e melhor que o meu, mas eu acho esse tipo de coisa muito invasiva, e antes de ser implementado no site de algum cliente profissionalmente, precisa ser bem testado.

Sei que não é exatamente o que você queria, mas você pode tentar implementar esse código meu acima, para ver se chega mais perto daquilo que você deseja.

Abraços e espero que tenha ficado pelo menos satisfatório.

15 de julho de 2021

@Felipe Trebino

Olá colega.

Este exemplo abaixo funciona bem comigo:

<html>

<body>

<form name="teste">		
		<input type="text" name="cpf" id="cpf" required pattern="\d{3}\.?\d{3}\.?\d{3}-?\d{2}" placeholder="Ex.: 000.000.000-00">
		<input type="submit" value="Enviar">
</form>

</body>

</html>

Espero que ajude.

Abraços

11 de julho de 2021

@XnaylsonX

Olá colega.

Para mim é a mesma coisa.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

Abraços.

11 de julho de 2021

@vini8603

Olá colega.

Vou falar aquilo que funciona para mim, no meu modelo de negócio.

Para mim, o que funciona é ser versátil.

Não adianta a pessoa se especializar em apenas uma linguagem, e tê-la como “linguagem de estimação”.

Não precisa ser um “Unicorn Designer” também, mas ter conhecimento de HTML, CSS, PHP, Python, Java Script e CMS´s será sempre desejável.

É difícil ser fluente em tudo isso a ponto de ser um expert em tudo, eu por exemplo sou carente em conhecimento de Python, que é uma deficiência minha e que no futuro preciso resolver.

Eu me considero um programador, mas quando aparece serviços em WordPress (CMS), que eu não gosto; eu faço, e procuro faze-los usando a WordPress Rest API, que achei mais parecido comigo, pois é uma parte do WordPress mais voltada ao desenvolvedor.

Você ainda é novo, vá com calma, mas mantenha a mente aberta para todos os tipos de caminhos a seguir.

Bons Estudos!!!

8 de julho de 2021

37 minutos atrás, joaopauloag disse:

@Marcelo Calazans seria essa opção, ao clicasse no botão me concedesse a opção de escolher o aplicativo

Fiz o teste com o seu exemplo deste tópico no meu celular, e acho que seria isso então:

Isso acontece também com o UOL e com o KaBum. Mas isso é um mecanismo que eu acho que é acionado pelo próprio sistema operacional (Android no caso), igual aquelas janelas de compartilhamento.

Vamos pegar o exemplo do KaBum, que faz isso também igual.

Quando eu vou clicar em um link no site do KaBum, navegando na web no Chrome Mobile, o sistema operacional Android exibe essa janela, porque ele tem a informação de que eu tenho no meu celular, o app do KaBum instalado, e que no app existe o mesmo link. Então neste caso, ele me pergunta se eu quero continuar abrindo o link no navegador web, ou se eu prefiro abrir no app do KaBum no caso.

Se for isso, não vejo que nada em HTML possa fazer o mesmo ou coisa parecida.

Vamos ver se alguém tem outra sugestão.

Abraços.

8 de julho de 2021

@joaopauloag

Olá colega.

Não entendi direito o que você está querendo dizer com:

Citação

inserir 2 links no href no mesmo botão

Seria isso abaixo?

Neste caso, abriram outras opções naquilo que era um link ao clicar com o botão direito.

Se for isso, eu creio que o ideal seria pensar em uma saída com JavaScript, a não ser que algum outro colega tenha alguma outra ideia.

Aguarde para ver se alguém tem alguma outra ideia.

Abraços.

8 de julho de 2021

@Paulo Henrique Carvalho

Olá colega.

Eu falo uma coisa bem parecida para os meus clientes. E não posso, portanto, dizer que eles estão te enrolando.

Na minha opinião profissional, um site em WordPress apenas se justifica no caso de pessoas que fazem inserção de conteúdo novo diariamente, como sites de notícias e blogs.

O site da sua empresa, sendo ele “100% em html”, como a empresa fala, não vai realmente possibilitar que vocês façam alterações, a não ser que exista na sua empresa alguma pessoa capacitada na área de desenvolvimento.

Existem pessoas no mercado de trabalho, que são ferrenhas defensoras do WordPress para tudo, eu já não sou, pois como programador eu sei como tudo funciona internamente, e sei como é penosa a rotina de processamento para montar sites dinâmicos.

O SEO do WordPress, apesar de ser um dos melhores na área de CMS, ainda é bem ruim na minha opinião, e eles tem razão.

Se o seu site está bem no Google hoje, convém não mexer nisso.

Respeito e sempre digo que conheço pessoas que trabalham com o WordPress, mas eu só indico o WordPress para casos de clientes que criam conteúdo novo diariamente, como blogs e sites de notícias, para os outros casos, não usar e a melhor saída.

Aguarde para ver se algum outro colega tem alguma opinião diferente.

Abraços e espero ter contribuído em algo.

6 de julho de 2021

44 minutos atrás, Fernando Cardoso de Melo disse:

Quando falo que a div está subindo quero dizer que ela se aproxima da imagem, sendo que a imagem está em porcentagem na altura. Só preciso que quando a div com o texto toque na base da imagem, entre a barra de rolagem sem que o texto cubra a imagem.

Imaginei que era isso que você queria, e por isso eu recomendei que houvesse uma reestruturação geral do modelo.

Primeiro, essa foto não é responsiva, você está alterando-a na largura (width), e a altura (height) está permanecendo a mesma. Com isso você está achatando e deformando a imagem apenas.

Quando a tela do navegador for redimensionada, simulando uma área menor (mobile), a imagem não pode distorcer, e a medida que a largura muda, a altura deve mudar também.

Veja o exemplo abaixo que você vai entender:

https://www.w3schools.com/howto/howto_css_image_responsive.asp

Depois disso, uma parte do seu problema se resolve, pois, a medida que a largura da tela do navegador diminui, a altura na imagem vai diminuir também, e ficar menos próxima da sua <div> do rodapé.

Mas não é só isso.

O texto na <div> do rodapé, pode diminuir à medida que a tela é redimensionada e fica menor (tente mudar o margin da tag <p> ou o tamanho da fonte se necessário). Para isso, você precisa melhorar seus conceitos de site responsivo, inserindo no modelo conceitos de Media Query, que está no exemplo abaixo:

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Com isso tudo, o seu modelo já deve melhorar um pouco.

Foi por isso que eu disse que a solução é uma restruturação geral melhor.

Abraços.

6 de julho de 2021

@Fernando Cardoso de Melo

Olá colega.

Você disse: (citação abaixo)

Citação

Quando redimensiono a janela na vertical, a div fica no rodapé mas vai subindo em direção a uma imagem

O seu problema na verdade não é o fato da <div> estar subindo.

A sua <div> é esta abaixo:

<div style="position: absolute; width: 100%; bottom: 30px; left: 0; z-index: 1" id="camada1" align="center">
&nbsp;
<p><font color="#FFFFFF"><span style="font-size: 22pt">"Nós, porém, segundo a sua promessa, esperamos novos céus e nova terra, nos quais habita justiça." 1 João 3:13</span></font></p>
<p>&nbsp;</p>
<p><font color="#FFFFFF"><span style="font-size: 22pt">"...porque todo o que é nascido de Deus vence o mundo; e esta é a vitória que vence o mundo: a nossa fé." 1 João 5:4</span></font></p>
</div>

Perceba que com a tela cheia (grande), a <div> está fixada no bottom: 30px;

Percebe agora, que com a tela mais reduzida (redimensionada na vertical como você disse), a <div> continua na mesma posição bottom: 30px;

Com isso, note que o seu problema não é o fato da <div> estar subindo, pois ela não está.

Eu creio que o seu modelo precisa de uma restruturação geral melhor para funcionar como você está querendo.

Abraços e espero que ajude em algo.

4 de julho de 2021

@Mizrain Phelipe Sá

Olá colega.

Não sei se isso pode te ajudar, mas vou narrar um pouco do meu problema com isso.

Eu também não gosto de CMS´s como WordPress, mas respeito e conheço pessoas que usam, e compreendo a sua utilidade.

Não gosto de criar blogs, mas as vezes, o cliente quer inserir um blog em seu website, e sou forçado a fazer.

O que eu faço é usar apenas o banco de dados do WordPress e utilizar também o painel de controle do WordPress, para que o cliente possa criar livremente as suas postagens de forma dinâmica.

Depois eu faço uma estrutura em PHP lendo o banco de dados do WordPress, e desenvolvo o site na mão, como eu gosto de fazer normalmente.

O pior desses CMS´s todos, não é nem o banco de dados, são os temas prontos (eu acho eles horríveis).

O WordPress também tem outra solução para isso, que é a WordPress REST API ( https://developer.wordpress.org/rest-api/ ), neste caso é até mais fácil, pois você pode criar seu site manualmente, e usar apenas o “core” do WordPress.

Para quem está neste dilema seu, acho que vale a pena analisar essas opções. Eu passei por uma coisa bem parecida e no meu caso ajudou.

Abraços e espero que esse ideia ajude em algo.

2 de julho de 2021

6 horas atrás, b.0463 disse:

eu ja tentei esse metodo e da "split não fefinido"

Aqui comigo, como eu havia dito, funciona perfeitamente usando uma cópia do seu próprio exemplo:

<!DOCTYPE html>

<html lang="pt-br">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- <link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/style.css">-->
	</head>
	
	<body>
		<div id="geral">
			<input type="text" value="comando" id="com"><br>
			<button id="mandar" onclick="testa()">mandar</button>
		</div>
		<!-- <script src="js/main.js"></script> -->
		
		
	<script>
  function testa(){
    var comando = document.getElementById('com').value;//pega a entrada de comando no html    
    
    const frase = comando;

    const palavra1 = frase.split(' ');
    
    var comandopr = palavra1[0];
    
    if(comandopr == "help" || comandopr == "HELP" || comandopr == "Help") {  alert("A primeira palavra é Help"); }    
     
  }
	</script>			
		
	</body>	
	
</html>

Abraços e espero ter ajudado.

1 de julho de 2021

@b.0463

Olá, colega.

Abaixo tem um exemplo prático:

<html>

<body>

<script>
const frase = 'Estamos todos unidos';

const palavra1 = frase.split(' ');
alert(palavra1[0]);
/* Primeira Palavra */

const palavra2 = frase.split(' ');
alert(palavra2[1]);
/* Segunda Palavra */

const palavra3 = frase.split(' ');
alert(palavra3[2]);
/* Terceira Palavra */

</script>

</body>

</html>

Foi testado aqui e funciona.

Espero que ajude.

Abraços.

25 de junho de 2021

1 hora atrás, Fernando Cardoso de Melo disse:
Amigos.

Obrigado a todos.

Consegui resolver. Não sei porque mas o arquivo de fonte que eu estava usando estava corrompido!! Troquei o arquivo e usei este código:
<style>
      @font-face { font-family: 'Old English'; src: url('fontes/Olde English Regular.ttf'); } 
      body {
         font-family: 'Old English'
      }
    </style>
Funcionou!

Que bom que deu certo amigo, esse é o mais importante.

Abraços.

22 de junho de 2021

50 minutos atrás, Fernando Cardoso de Melo disse:

Obrigado a todos que reponderam. Ainda não consegui ajustar. Mas to tentando.

Retorna depois se possível, e nos diga por favor se deu certo.

Boa sorte ai.

22 de junho de 2021

@Fernando Cardoso de Melo

Olá colega.

Apesar de ser fácil escrever esse código, existem sites online que nos ajudam.

Eu uso muito o site abaixo:

https://transfonter.org/

Acesse o site e adicione essa fonte em .ttf que você tem, após isso converta e faça o download.

Ele vai baixar um KIT em css. Depois é só pegar o KIT e adicionar em seu código.

Sugiro usar WOFF e WOFF2 nas opções, e certifique-se de que o arquivo da fonte (woff e woff2), estão na pasta do caminho certo.

"OBS: Só tome cuidado, pois algumas fontes possuem direitos autorais, e não podem ser usadas de qualquer forma. Veja sempre as declarações antes, para ver se pode ou não usar determinada fonte."

Abraços e espero ter ajudado.

21 de junho de 2021

2 horas atrás, Mizrain Phelipe Sá disse:

Olá pessoal, sou programador nível intermediário e atualmente costumo programar em C# (backend) e Angular (frontend).

Porém o que eu sei de C# ainda e muito básico, assim como o framework Angular.

Gostaria de saber na opinião ou experiência de vocês quanto tempo e estudando quantas horas por dia e o necessário para se dominar a linguagem C# ou ao menos já ter um bom conhecimento da linguagem?

Olá colega.

Trabalho com programação desde a década de 90, e já atuei como programador de várias linguagens no mercado.

Concordo com o colega @Rui Guilherme , pois até hoje, mesmo trabalhando nisso há muito tempo, aprendo coisas novas com muita frequência, e pensar assim facilita, pois a humildade sempre nos leva no caminho do aprendizado.

Eu sempre gostei muito de programação, e o fato de gostarmos muito de algo que fazemos ou pretendemos fazer, facilita bastante o estudo.

Sugiro que não estipule prazos: meses ou horas por dia de estudo. Siga sempre em frente lembrando que programar, além de ser um trabalho, é divertido. Pensando assim, creio que quando você menos esperar, já estará dominando bem a linguagem de programação que você deseja aprender.

Abraços e bons estudos.

17 de junho de 2021

A título de curiosidade, estudos ou “for fun", eu acho que isso é bem válido.

Pois ao desenvolver esse tipo de prática, conseguimos aprender bastante coisa. Eu mesmo já fiz algumas vezes a título de curiosidade apenas.

Mas nunca indiquei isso profissionalmente a nenhum dos meus clientes, pois profissionalmente nós precisamos de coisas mais práticas, estáveis e menos invasivas.

Abraços.

23 de abril de 2021

43 minutos atrás, EddK disse:

Boa noite,

Marcelo

Muito obrigado!

O segundo código é perfeito.

Grande ajuda...

Fico feliz em poder ajudar, que bom que deu certo.

Abraços colega.

22 de abril de 2021

@EddK

É fácil usar a ideia do @Adriano_web , mesclar com o seu próprio código sem muitas alterações.

Abaixo tem dois exemplos que foram testados aqui e funcionam:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>

<body>

<!doctype html>
<html lang="pt-br">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
  <link rel="stylesheet" href="style/main.css">
</head>

<body>



  <header class="header">
    <a href="index.html" class="logo-text">xxxxx</a>

    <button style="display: none;" class="header__btnMenu"> <i id="muda" class="fa fa-bars"></i> <span class="sr-only">Menu</span></button>

    <nav class="header__nav">
      <ul>
        <li><a href="#">xxxxx</a></li>
        <li><a href="#">xxxxx</a></li>
        <li><a href="#">xxxxx</a></li>
        <li><a href="#">xxxxx</a></li>
        <li><a href="#">xxxxx</a></li>
      </ul>
    </nav>
  </header>

  <script src="js/menu.js"></script>
</body>

</html>

<style>
body {
  margin: 0;
}

.header {
  background: #fff;
  width: 100%;
}

.logo-text {
  background-color: #333;
  margin: 0;
  padding: 20px;
  display: block;
  text-decoration: none;
  color: #fff;
  float: left;
  text-align: center;
}

.header__nav {
  clear: left;
}

.header__nav ul {
  margin: 0;
  padding: 0;
}

.header__nav li {
  list-style-type: none;
  background: #333;
  text-align: center;
}

.header__nav a {
  text-decoration: none;
  color: #999;
  display: block;
  padding: 25px 0;
}

.header__nav a:hover {
  color: #666;
}

.header__btnMenu {
  float: right;
  margin: 1.5em;
  border: none;
}

@media screen and (min-width: 1024px) {
  .logo-text {
    width: 25%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .header__btnMenu {
    display: none;
  }
  .header__nav {
    float: left;
    width: 75%;
    clear: none;
    max-width: 700px;
  }
  .header__nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
  .header__nav li {
    border-bottom: none;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
  }
  .header__nav a {
    background: white;
  }
}
</style>

<script>
(function() {
  var menu = new Menu({
    container: '.header__nav',
    toggleBtn: '.header__btnMenu',
    widthEnabled: 1024
  })
})()


function Menu(config) {
  this.nav = (typeof config.container === 'string') ? document.querySelector(config.container) : config.container

  this.btn = (typeof config.toggleBtn === 'string') ? document.querySelector(config.toggleBtn) : config.toggleBtn

  this.maxWidth = config.widthEnabled || false;

  var _opened = false;
  var _this = this;

  this.btn.removeAttribute('style')

  if (this.maxWidth) {
    window.addEventListener('resize', e => {
      if (window.innerWidth > _this.maxWidth) {
        _this.nav.removeAttribute('style')
        _opened = true;
      } else if (!this.nav.getAttribute('style')) {
        closeMenu();
      }
    })

    if (window.innerWidth <= _this.maxWidth) {
      closeMenu();
    }
  }

  this.btn.addEventListener('click', openOrClose)

  function openOrClose() {
    if (!_opened) {
      openMenu()
      
    } else {
      closeMenu()
      
    }
  }

  function openMenu() {
    document.getElementById("muda").className = "fa fa-window-close";
    var _top = _this.nav.getBoundingClientRect().top + 'px'

    var _style = {
      maxHeight: 'calc(100vh - ' + _top + ' )',
      overflow: 'hidden'
    }

    applyStyleToNav(_style)

    _opened = true;
  }

  function applyStyleToNav(_style) {
    Object.keys(_style).forEach(stl => {
      _this.nav.style[stl] = _style[stl]
    })
  }

  function closeMenu() {
    document.getElementById("muda").className = "fa fa-bars";
    var _style = {
      maxHeight: '0px',
      overflow: 'hidden'
    }

    applyStyleToNav(_style)

    _opened = false;
  }

}
</script>
</body>
</html>

Esse aqui também funciona, e altera menos ainda o seu código: (interagindo direto com o header__btnMenu)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>

<body>

<!doctype html>
<html lang="pt-br">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
  <link rel="stylesheet" href="style/main.css">
</head>

<body>



  <header class="header">
    <a href="index.html" class="logo-text">xxxxx</a>

    <button style="display: none;" class="header__btnMenu"> <i class="fa fa-bars"></i> <span class="sr-only">Menu</span></button>

    <nav class="header__nav">
      <ul>
        <li><a href="#">xxxxx</a></li>
        <li><a href="#">xxxxx</a></li>
        <li><a href="#">xxxxx</a></li>
        <li><a href="#">xxxxx</a></li>
        <li><a href="#">xxxxx</a></li>
      </ul>
    </nav>
  </header>

  <script src="js/menu.js"></script>
</body>

</html>

<style>
body {
  margin: 0;
}

.header {
  background: #fff;
  width: 100%;
}

.logo-text {
  background-color: #333;
  margin: 0;
  padding: 20px;
  display: block;
  text-decoration: none;
  color: #fff;
  float: left;
  text-align: center;
}

.header__nav {
  clear: left;
}

.header__nav ul {
  margin: 0;
  padding: 0;
}

.header__nav li {
  list-style-type: none;
  background: #333;
  text-align: center;
}

.header__nav a {
  text-decoration: none;
  color: #999;
  display: block;
  padding: 25px 0;
}

.header__nav a:hover {
  color: #666;
}

.header__btnMenu {
  float: right;
  margin: 1.5em;
  border: none;
}

@media screen and (min-width: 1024px) {
  .logo-text {
    width: 25%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .header__btnMenu {
    display: none;
  }
  .header__nav {
    float: left;
    width: 75%;
    clear: none;
    max-width: 700px;
  }
  .header__nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
  .header__nav li {
    border-bottom: none;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
  }
  .header__nav a {
    background: white;
  }
}
</style>

<script>
(function() {
  var menu = new Menu({
    container: '.header__nav',
    toggleBtn: '.header__btnMenu',
    widthEnabled: 1024
  })
})()


function Menu(config) {
  this.nav = (typeof config.container === 'string') ? document.querySelector(config.container) : config.container

  this.btn = (typeof config.toggleBtn === 'string') ? document.querySelector(config.toggleBtn) : config.toggleBtn

  this.maxWidth = config.widthEnabled || false;

  var _opened = false;
  var _this = this;

  this.btn.removeAttribute('style')

  if (this.maxWidth) {
    window.addEventListener('resize', e => {
      if (window.innerWidth > _this.maxWidth) {
        _this.nav.removeAttribute('style')
        _opened = true;
      } else if (!this.nav.getAttribute('style')) {
        closeMenu();
      }
    })

    if (window.innerWidth <= _this.maxWidth) {
      closeMenu();
    }
  }

  this.btn.addEventListener('click', openOrClose)

  function openOrClose() {
    if (!_opened) {
      openMenu()
      
    } else {
      closeMenu()
      
    }
  }

  function openMenu() {
    document.querySelector(".header__btnMenu i").className = "fa fa-window-close";
    var _top = _this.nav.getBoundingClientRect().top + 'px'

    var _style = {
      maxHeight: 'calc(100vh - ' + _top + ' )',
      overflow: 'hidden'
    }

    applyStyleToNav(_style)

    _opened = true;
  }

  function applyStyleToNav(_style) {
    Object.keys(_style).forEach(stl => {
      _this.nav.style[stl] = _style[stl]
    })
  }

  function closeMenu() {
    document.querySelector(".header__btnMenu i").className = "fa fa-bars";
    var _style = {
      maxHeight: '0px',
      overflow: 'hidden'
    }

    applyStyleToNav(_style)

    _opened = false;
  }

}
</script>
</body>
</html>

Abraços colega.

21 de abril de 2021

@EddK

Olá, colega.

Uma sugestão, é fazer o botão com imagens.

Pelo que entendi, seria basicamente trocar uma imagem pela outra ao clicar no ícone, no caso de você optar por usar uma imagem no botão.

Há várias maneiras de se fazer isso, e abaixo tem um código simples que executa essa tarefa.

Veja se você pode inclui-lo em seu código, e se fica bom no seu caso:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>

<body>

<script>
var onImg  = "https://ik.imagekit.io/vu1pwgp5n/fashion-6146328_1920_gQH9Z003_.jpg";
var offImg = "https://ik.imagekit.io/vu1pwgp5n/default-image.jpg";
</script>

<style> img {   
     cursor: pointer;
     position: absolute;
     top: 10px;
     left: 10px;
     width: 30px;
     height: 30px;
} 
</style>

<img src="https://ik.imagekit.io/vu1pwgp5n/fashion-6146328_1920_gQH9Z003_.jpg" onclick="this.src = this.src == offImg ? onImg : offImg;" alt="teste">

</body>
</html>

Outra opção, se não quiser usar imagens, é tentar com add class e remove class:

https://www.w3schools.com/howto/howto_js_add_class.asp

https://www.w3schools.com/howto/howto_js_remove_class.asp

Teste para ver se funciona no seu caso.

Como eu disse, há várias maneiras diferentes de se fazer isso, e se caso essa que eu sugeri não servir para você, aguarde para ver outras sugestões dos demais colegas.

Abraços.

19 de abril de 2021

@Dias_sz.11

Olá colega.

Além da umidade que você citou, que pode ser um problema, eu penso em outra situação:

• Sabemos que existe uma temperatura máxima, na qual os componentes eletrônicos podem ser expostos, e passando desta temperatura, o funcionamento ficaria comprometido.

Por isso que a CPU tem um cooler e muitos outros componentes eletrônicos usam dissipadores de calor.

• Mas, e quanto ao funcionamento em temperaturas muito baixas? Será que isso não seria um problema para os componentes eletrônicos?

Uma geladeira normal chega a 5° C aproximadamente, que não é uma temperatura normal de funcionamento da maioria dos componentes eletrônicos. Seria interessante saber como eles se comportariam funcionando por muito tempo em uma temperatura muito baixa.

Os desafios podem ser maiores do que você imagina, e para saber se daria certo, só testando mesmo.

Boa Sorte.

11 de abril de 2021

agora, Joel Martins disse:

@Marcelo Calazans Muito obrigado pela sua paciência e ajuda.Eu ainda não tinha percebido isto:

Se quiser pode ir vendo como está evoluindo e dar a sua opinião á cerca do meu "website". MUITO obrigado:)

Meu website-->https://p4ndast0re.000webhostapp.com/

Legal amigo, está ficando muito bom.

Continue assim e fico feliz em ajudar.

11 de abril de 2021

@Joel Martins

A primeira coisa que eu vou te sugerir, é que estude a estrutura do HTML.

Pelo que posso ver em seus comentários, você está pensando errado sobre a tag <head>.

Você não pode colocar cor ou imagem na tag <head>, veja a seguir o que é a tag <head> https://www.w3schools.com/tags/tag_head.asp

Com a estrutura que eu montei, usando a tag <header>, é possível sim fazer o que você quer, basta você fazer alterações no CSS que eu propus no código acima. Mas para saber o que alterar e como se comportam as alterações, você precisa se aprofundar um pouco no CSS.

CSS e HTML andam juntos, na criação de websites não há como separa-los, e a pessoa nunca vai ter o comportamento esperado do HTML, se não usar junto com ele de forma eficiente o CSS.

Veja o exemplo abaixo, ele é basicamente a mesma coisa que eu havia feito antes, com algumas alterações no CSS:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>

<body>

<!-- ESTE É O INÌCO DO CSS -->
<style>
body {
   margin: 0;
   padding: 0;
   background-image: url(https://ik.imagekit.io/vu1pwgp5n/fashion-6146328_1920_gQH9Z003_.jpg);
}
.cabecalho {
   width: 100%;
   height: 100px;
   background-color: rgba(255,255,255,0.60);
   position: relative;
}
h1 {
   position: absolute;
   top: 50%;
   left: 50%;
   -moz-transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   font-size: 40px;
   margin: 0;
   padding: 0;
}
</style>
<!-- ESTE É O FIM DO CSS -->

<div class="cabecalho">
     <h1>MEU SITE</h1>
</div>

</body>
</html>

Perceba que o CSS é muito importante para você fazer as coisas que você quer.

Abraços colega, e boa sorte nos estudos.

10 de abril de 2021

O que você acha deste?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>

<body>

<style>
body { margin: 0; padding: 0; }

.foto-capa { 
   width: 100%;
   height: 200px;
   background-color: rgba(126,126,126,1.00);
}

.container {
   width: 90%;
   margin: 0 auto;
}

.main {
   display: flex;
}

.esquerda {
   background-color: aqua;
}

.esquerda p {
   width: 100%;
}

.direita {
   background-color: darkseagreen;
}

.direita p {
   width: 100%;
}
  
</style>

<div class="foto-capa">
     FOTO DE CAPA 
</div>

<div class="container">
     <div class="main">
          <div class="esquerda">
               <p>APRESENTAÇÂO</p>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce posuere lorem eget eros efficitur, quis scelerisque ipsum efficitur. Morbi vehicula quis purus ac lobortis. Morbi cursus leo ornare dui faucibus porttitor. Vestibulum nisl nisl, dignissim et egestas eu, fermentum a ipsum. Maecenas in purus porta, laoreet velit ut, auctor magna. Donec eros massa, cursus vitae consequat vel, sollicitudin mollis nunc. Aliquam elementum metus in tortor cursus, eu dictum ipsum imperdiet. Sed euismod est iaculis diam cursus vestibulum. Nulla accumsan est velit, nec imperdiet enim blandit ac.</p>

               <p>Quisque eget lacus ac urna consequat laoreet vitae nec sapien. Fusce porttitor dolor ut tincidunt commodo. Cras sit amet massa enim. Aenean mattis sollicitudin massa, a condimentum ligula rhoncus et. Duis interdum ultrices feliz, id mollis nisl dictum vehicula. Vivamus id erat vel magna luctus elementum. Nunc vel viverra feliz. Sed sed velit sed lectus euismod fermentum eu vitae nibh. Aliquam efficitur in lacus eu cursus. Cras malesuada tincidunt lorem, vel vehicula risus lacinia eget. Vivamus hendrerit quis arcu quis cursus. Curabitur odio tortor, rhoncus non lectus in, malesuada rutrum lorem. Phasellus tincidunt mauris in auctor malesuada. In eu sollicitudin justo. Nulla tortor elit, venenatis id ornare porta, congue at tellus. Duis ut consequat neque.</p>
          </div>
          
          <div class="direita">
               <p>PUBLICAÇÔES</p>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce posuere lorem eget eros efficitur, quis scelerisque ipsum efficitur. Morbi vehicula quis purus ac lobortis. Morbi cursus leo ornare dui faucibus porttitor. Vestibulum nisl nisl, dignissim et egestas eu, fermentum a ipsum. Maecenas in purus porta, laoreet velit ut, auctor magna. Donec eros massa, cursus vitae consequat vel, sollicitudin mollis nunc. Aliquam elementum metus in tortor cursus, eu dictum ipsum imperdiet. Sed euismod est iaculis diam cursus vestibulum. Nulla accumsan est velit, nec imperdiet enim blandit ac.</p>

               <p>Quisque eget lacus ac urna consequat laoreet vitae nec sapien. Fusce porttitor dolor ut tincidunt commodo. Cras sit amet massa enim. Aenean mattis sollicitudin massa, a condimentum ligula rhoncus et. Duis interdum ultrices feliz, id mollis nisl dictum vehicula. Vivamus id erat vel magna luctus elementum. Nunc vel viverra feliz. Sed sed velit sed lectus euismod fermentum eu vitae nibh. Aliquam efficitur in lacus eu cursus. Cras malesuada tincidunt lorem, vel vehicula risus lacinia eget. Vivamus hendrerit quis arcu quis cursus. Curabitur odio tortor, rhoncus non lectus in, malesuada rutrum lorem. Phasellus tincidunt mauris in auctor malesuada. In eu sollicitudin justo. Nulla tortor elit, venenatis id ornare porta, congue at tellus. Duis ut consequat neque.</p>
          </div>
     </div>
</div>


</body>
</html>

Entrar

Artigos

Selos

Fabricantes

Livros

Cursos

Análises

Fórum

posts postados por Marcelo Calazans

Sobre o Clube do Hardware

Direitos autorais

Mais