BEAUTIFUL RESPONSIVE WEB SITES

HTML + CSS + JAVASCRIPT


SIMULADOR DE VIAGENS NO TEMPO

INICIAR A SIMULAÇÃO

VOLTAR ÀS INSTRUÇÕES

VOLTAR À PAGINA INICIAL

CSS


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


function gravar() {

$('#divResultado').css('background', '#000');
$('#divResultado').css ('border', 'dashed 1px #fff');
$('#divResultado').css ('width', '90%');
$('#divResultado').css ('height', '180px');
$('#resp').show(1500);

var div = document.getElementById ("resp");
var c = 300000;
var idade = document.getElementById ("txtIdade").value;
var tempo = document.getElementById ("txtTempo").value;
var v = document.getElementById ("txtVelocidade").value;

var tf=(tempo*1/(Math.sqrt((c*c-v*v))*(1/c))) .toFixed(2);
var f = (idade*1)+ (tempo*1);
var tt = (idade*1)+ (tf*1);
var j = ((tt*1)-(f*1)) .toFixed(2);

div.innerText = "Dentro da nave espacial, a viagem durou: " +tempo+ " anos"+"\n"+ "Portanto, sua idade será de: " +f+ " anos"+"\n"+ "No entanto, o tempo decorrido no planeta Terra foi de: " +tf+ " anos"+"\n"+ "Seu irmão, que ficou à sua espera, completou " +tt+ " anos"+"\n"+ "E quando se reencontrarem, voce será " +j+ " anos mais jovem do que ele!";

}

function limpar() {
$('#divResultado') .css('background', 'none');
$('#divResultado') .css('border', 'none');
$('#divResultado') .css('width', '0');
$('#divResultado') .css('height', '0');
$('#resp').hide(1500);
}