BEAUTIFUL RESPONSIVE WEB SITES

HTML + CSS + JAVASCRIPT


SIMULADOR DE VIAGENS NO TEMPO

INSTRUÇÕES DO SIMULADOR:

  1. O simulador foi programado com base na teoria restrita da relatividade, de Albert Einstein.
  2. Assim como a teoria, o simulador considera, apenas, o movimento uniforme.
  3. O simulador considera, como absoluta, a natureza da velocidade da luz; portanto sua intensidade é de 300.000 km/s, e nada é capaz de atingir a mesma velocidade.
  4. A unidade de tempo das viagens, são os anos, e sua intensidade são números reais positivos.
  5. As unidades de velocidade, são os km/s, e sua intensidade é um numero real positivo menor que 300.000 km/s.
  6. Como a teoria, o simulador considera possível, apenas, as viagens ao futuro.
  7. Considere a hipótese de possuir um irmão gêmeo, que aguarda seu retorno ao planeta terra, após sua viagem.
INICIAR A SIMULAÇÃO
VOLTAR

CSSs


div#principal {
margin:0 auto;
width:60%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding:10px;
}

div#principal #h2 {
text-align:center;
margin: 10px auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
width:60%;
}

section#secao01 {
margin:10px auto;
width:80%;
box-shadow: 0px 8px 16px 0px rgba (0,0,0,0.2);
}

section#secao01 h3 {
text-align:center;
}

section#secao01 a {
color:red;
text-decoration:none;
}

section#secao01 img {
margin:auto;
margin-bottom:15px;
height:300px;
width:50%;
margin-left:25%;
box-shadow: 10px 10px 10px 5px black;
}

CSS - Responsivo


@media only screen and (max-width: 1300px) {
div#principal {
width:80%;
}}

@media only screen and (max-width: 1100px) {
div#principal {
width:85%;
}}

@media only screen and (max-width: 1000px) {
div#principal {
width:95%;
}}

@media only screen and (max-width: 900px) {
div#principal {
width:100%;
}
div#principal #h2 {
width:70%;
}}

@media only screen and (max-width: 800px) {
section#secao01 {
width:90%;
}
section#secao01 img {
height:300px;
width:55%;
margin-left:22%;
}}

@media only screen and (max-width: 700px) {
div#principal #h2 {
font-size: .8em;
}
section#secao01 img { height:300px; width:65%;
margin-left:17%;
}
section#secao01 h3 {
font-size: .9em;
}}

JAVASCRIPT