Welcome page in HTML

Question

Welcome page in HTML

Navigation

#1 by (1 votes)

2

Good.

Before developing a website in C # asp.net I created a sketch in Wix. I just do not know how to put the first page of this genre , that is, a small window (indexed by back) before entering the site. Can anyone help? Do I have to create a new view?

html c# asp.net

asked by anonymous 18.05.2018 / 12:51

1 answer

Problems with Realloc Check that all elements are equal

score 1 · Accepted Answer

Dude I do not know exactly what the structure is that you want etc, 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 checkado makes div that comes down 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 pro modal appear. But if you want to remove it just remove the animation from the CSS, I left everything commented. Note that when it is active you can not select anything that is below, nor click anything (this is for the lay user).

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

See 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">