Welcome page in HTML

Question

Good.

Before developing a website in C# Asp.net I created a sketch on Wix. Only now I don’t know how to put the first page of this kind, that is, a small window (with the index behind it) before entering the site. Can anyone help? I have to create a new view?

Answer 1

Dude I don’t know exactly what the structure you want etc is like, but here’s a very simple CSS that can help you. The principle here is that btn Close is actually a label linked in a input:radio that when checkadomakes the div downhill disappear with this CSS rule input[id="rd"]:checked + div.bg { }

Note that it has an animation that when entering the site takes 1 second for modal to appear. But if you want to take just remove the animation from the CSS, I left everything commented. Note also that when it is active you cannot select anything below, nor click anything (this for the layman).

I tried to make the model as simple as possible to make it easier to understand.

Take the example.

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#rd {
  display: none;
}
input[id="rd"]:checked + div.bg {
  display: none;
  z-index: -1000;
  opacity: 0;
}
.bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  /* remover animação se quiser que ele aparece direto sem delay  */
  -webkit-animation: tempo 500ms ease-in 1s forwards;
          animation: tempo 500ms ease-in 1s forwards;
}
.box {
  background-color: red;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box label {
  background-color: #fff;
  width: 50px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
}
/* remover se remover a animação do modal  */
@-webkit-keyframes tempo {
  to {
    opacity: 1;
  }
}
@keyframes tempo {
  to {
    opacity: 1;
  }
}

<!-- modal -->
<input type="radio" id="rd">
<div class="bg">
  <div class="box">
    <label for="rd">fechar</label>
  </div>
</div>
  
<!-- conteudo -->
<table border="1">
  <tr>
    <td>100px</td>
    <td>200px</td>
  </tr>
</table>
<input type="submit">
<input type="text">