Задать вопрос

Как выровнять блоки подряд?

Как сделать, чтобы на этой странице: dubrovsky.usite.pro Сначала шел блок .logo
затем .timer
затем .do
Код страницы:
<!DOCTYPE html><html class=''>
<head><meta charset='UTF-8'><meta name="robots" content="noindex">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
</head>

<style class="cp-pen-styles">@import url(http://fonts.googleapis.com/css?family=Righteous);
body,html{width:100%;height:100%;padding:0;margin:0}
body{display:-webkit-flex;-webkit-align-items:center;-webkit-justify-content:space-around;background:url('/background.jpg');background-size:cover;background-position:center;font-family:'Open Sans', sans-serif;}
span{font-size:5vw;color:#fff;margin:0 1vw;padding:2.1vw 2.1vw;display:inline-block;width:8vw;border-radius:10px;text-align:center;background:rgba(0,0,0,0.75);box-shadow:inset 0 -5px 0 rgba(0,0,0,0.5)}
span:after{font-size:1.5vw;display:block;margin:3px 0 -1px;opacity:.8}
span:nth-of-type(1):after{content:"дней"}  span:nth-of-type(2):after{content:"часов"}
span:nth-of-type(3):after{content:"минут"}   span:nth-of-type(4):after{content:"секунд"}
.logo{position:absolute;margin-top:-7vw;text-align:center;width:100%;left:0;font-size:4vw;color:#ffffff;font-weight:bold;text-shadow: 2px 2px #8ea8b9;}
.do{position:relative;text-align:center;width:100%;left:0;font-size:4vh;color:#ffffff;bottom:-4vw;text-shadow: 1px 1px #8ea8b9;}
  .timer {position:relative;}
h2{width:80vw;font-size:6vw;text-align:center}</style>
<body>
  <div class="logo">
    Котдаун
  </div>
<div class="timer">
  <span>$POWERED_BY$</span>
  <span></span>
  <span></span>
  <span></span>
</div>
    <div class="do">
    Технические работы до 30 Ноября 2016
  </div>
<script>var s = document.getElementsByTagName('span');
var oneDay = 24 * 60 * 60 * 1000;
var firstDate = new Date("Nov 30 2016 12:00:00");var secondDate = new Date();
var days = (firstDate.getTime() - secondDate.getTime()) / (oneDay);
var hrs = (days - Math.floor(days)) * 24;
var min = (hrs - Math.floor(hrs)) * 60;
s[0].innerHTML = Math.floor(days);
s[1].innerHTML = Math.floor(hrs);
s[2].innerHTML = Math.floor(min);
s[3].innerHTML = Math.floor((min - Math.floor(min)) * 60);
var i = setInterval(function() {n()}, 1000)
function f(d, x) {s[d].innerHTML = x;s[d - 1].innerHTML = Number(s[d - 1].innerHTML) - 1;}
function n() {s[3].innerHTML = Number(s[3].innerHTML) - 1;
if (s[3].innerHTML == -1) {f(3, 59)
if (s[2].innerHTML == -1) {f(2, 59)
if (s[1].innerHTML == -1) {f(1, 23)
}}}if(s[0].innerHTML <= -1) {clearInterval(i);document.getElementsByTagName('div')[0].innerHTML='<h2>  </h2>'}}
//# sourceURL=pen.js
</script>
</body></html>

Должно получиться что-то типа такого: d0302eeebced4f8ba3538a067ba6137e.PNG
  • Вопрос задан
  • 273 просмотра
Подписаться 1 Оценить Комментировать
Решения вопроса 1
evgeniy8705
@evgeniy8705
Повелитель вселенной
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы