@historydev
Острая аллергия на анимешников

Вёрстка.Как исправить это?

Добрый день.
Ширина анимации 320px и как бы я не пытался увеличить - ничего не работает.
Помогите
5d4d593158827181541777.jpeg

html
<!DOCTYPE html>
<html>
   <head>
   		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
				<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
				<meta name="viewport" content="user-scalable=yes,width=device-width,height=device-height"/>
   		<title>Screen 1 - Mobile</title>
   		<link rel="stylesheet" type="text/css" href="static/css/main.css">
   		<link rel="stylesheet" type="text/css" href="static/css/media.css">
   </head>
   <body>
   	<div class="screen">
   	<video class="afterglow" id="myvideo"><source type="video/mp4" src="static/video/trailer.mp4"></video>
   		<div class="names">
   			<label>АРНОЛЬД</label> ШВАРЦЕНЕГГЕР<br>
   			<label>ДЖЕККИ</label> ЧАН<br>
   			<label>ЮРИЙ</label> КОЛОКОЛЬНИКОВ<br>
   			<label>ДЖЕЙСОН</label> ФЛЕМИНГ<br>
   			<label>АННА</label> ЧУРИНА
   		</div>
   		<div class="black_screen"></div>
   		<div class="years"></div>   		
   		<nav></nav>
   		<ul>
   				<li id="films" class='menu_li'><a href="*"></a></li>
   				<li id="heroes" class='menu_li'><a href="*"></a></li>
   				<li id="video" class='menu_li'><a href="*"></a></li>
   				<li id="galerey" class='menu_li'><a href="*"></a></li>
   			</ul>   		
   			
   			<div id="mobilemain_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:320px;height:480px;overflow:hidden;">
   				<div id="play_hype_container" class="HYPE_document hype1" style="margin:auto;position:relative;width:200px;height:100px;overflow:hidden;">
		<script type="text/javascript" charset="utf-8" src="static/play.hyperesources/play_hype_generated_script.js?84798"></script>
	</div>
						<script type="text/javascript" charset="utf-8" src="static/mobile_main.hyperesources/mobilemain_hype_generated_script.js?55074"></script>
	</div>
					<div id="mobiletitle_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:320px;height:200px;overflow:hidden;margin-top:-200px;">
		      
		    </div >
   	<footer>
   			<center><button></button></center>
   			
   			<div class="social_bar">
   				<li class="social_icons" id="vk"></li>
   				<li class="social_icons" id="facebook"></li>
   				<li class="social_icons" id="twitter"></li>
   				<li class="social_icons" id="instagram"></li>
   				<li class="social_icons" id="ok"></li>
   			</div>
   			</div>
   		</footer>
   	</div>
   <script src="//cdn.jsdelivr.net/afterglow/latest/afterglow.min.js"></script>
   <script src="static/lib/jquery.min.js"></script>
   <script src="static/js/main.js"></script>
   <script src="static/js/menu.js"></script>
   </body>
</html>


css
@font-face {
	font-family: 'Beatrix';
	src: url('../fonts/Beatrix-Antiqua-trial.ttf');
}

body,html {
	padding: 0;
	margin: 0;
	background: #000;
	height: 100%;
	color: #fff;
	overflow: hidden;
}


nav {
	width: 40px;
	height: 40px;
	background: url('../img/png/menu.png');
	background-size: cover;
	position: absolute;
	z-index: 555;
	margin: 6px;
}

main {
	width: 100%;
	height: 100%;
}

li {
	list-style: none;
}

footer {
	position: absolute;
	z-index: 556;
	width: 100%;
	margin-top: 11px;
}

footer button {
	height: 41px;
	width: 181px;
	background: url('../img/svg/btn.svg');
	background-size: 100% 100%;
	border: 0px;
}

.social_bar {
	width: 100%;
	padding-left: 82px;
	margin-top: 7px;
}

.social_bar .social_icons {
	width: 24.5px;
	height: 24.5px;
	background: #fff;
	margin-left: 5px;
	float: left;
}

.black_screen {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1001;
	background: #000;
	margin: 0;
	opacity: 0.8;
	display: none;
}

.black_screen2 {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 460;
	background: #000;
	margin: 0;
	opacity: 0.3;
	display: none;
}

ul {
	width: 100%;
	min-height: 100%;
	position: absolute;
	z-index: 1002;
	margin: 0;
	padding: 0;
	padding-top: 50%;
	display: none;
}

ul li {
	width: 70%;
	height: 40px;
	background: #555;
	left: 50%;
	margin: 0 0 0 15%;
	margin-top: 10px;
}

#films {
	background: url('../img/png/m_click1.png');
	background-size: 100% 100%;
	display: none;
}

#heroes {
	background: url('../img/png/m_click2.png');
	background-size: 100% 100%;
	width: 45%;
	height: 40px;
	margin-left: 25%;
	display: none;
}

#video {
	background: url('../img/png/m_click3.png');
	background-size: 100% 100%;
	width: 45%;
	height: 40px;
	margin-left: 25%;
	display: none;
}

#galerey {
	background: url('../img/png/m_click4.png');
	background-size: 100% 100%;
	width: 60%;
	height: 40px;
	margin-left: 18%;
	display: none;
}

#vk {
	background: url('../img/svg/vk.svg');
	background-size: 100% 100%
}

#facebook {
	background: url('../img/svg/facebook.svg');
	background-size: 100% 100%
}

#twitter {
	background: url('../img/svg/twitter.svg');
	background-size: 100% 100%
}

#instagram {
	background: url('../img/svg/instagram.svg');
	background-size: 100% 100%
}

#ok {
	background: url('../img/svg/odnoklassniki.svg');
	background-size: 100% 100%
}

#play_hype_container {
	position: absolute;
	z-index: 999;
	top: 45%;
	opacity: 0;
}

#mobilemain_hype_container {
	margin: 0px;
	padding: 0px;
	position: relative;
	z-index: 500;
}

.years {
	width: 50px;
	height: 50px;
	position: absolute;
	z-index: 999;
	background: url('../img/svg/6+.svg');
	background-size: 100% 100%;
	margin-top: 475px;
	margin-left: 10px;
}

.rotate {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 9999;
	background: #000;
	display: none;
}

.rotate-img {
	width: 25px;
	height: 25px;
	background: url('../img/svg/rotate.svg');
	background-size: 100% 100%;
	margin-left: 48%;
	margin-top: 25%;
}

.rotate-text {
	color: #F8B928;
	font-size: 9px;
	margin: 0% 0 0 42%;
}

.names {
	width: 200px;
	color: #F8B928;
	position: absolute;
	z-index: 999;
	font-family: Beatrix;
	text-align: right;
	margin-left: 30%;
	padding: 10px;
	font-size: 10px;
}

label {
	font-size: 7px;
}

#myvideo {
	width: 100%;
	height: 180px;
	position: absolute;
	z-index: 9999;
	display: none;
}


js
/*window.addEventListener("orientationchange", function() { 
	if(window.orientation == 90 || window.orientation == -90) {
		$('.rotate').css('display','block');
	}else if(window.orientation != 90 || window.orientation != -90) {
		$('.rotate').css('display','none');
	}
}, false);
if(window.orientation == 90 || window.orientation == -90) {
		$('.rotate').css('display','block');
	}else if(window.orientation != 90 || window.orientation != -90) {
		$('.rotate').css('display','none');
		}*/

var opacity = 0;

setTimeout(function() {
	$('#mobiletitle_hype_container').html('<script type="text/javascript" charset="utf-8" src="static/mobile_title.hyperesources/mobiletitle_hype_generated_script.js?67157"></script>');
	var w = innerWidth;
	if(w >= 370 && w <= 380) {
		$('#mobiletitle_hype_container').css('margin-top','-250px');
		$('.hype1').css('margin-top','-50px');
	}
},3000);
 
setTimeout(function() {
	setInterval(function() {
		opacity += 0.1;
		$('.hype1').css('opacity', opacity);
	},80);
},4500);

var state = false;

$('.hype1').click(function() {
	state = !state;
	if(state == true) $('#myvideo').css('display','block');
	if(state == false) $('#myvideo').css('display','none');
});
setTimeOut(function() {
	setInterval(function() {
		alert();
		prompt();
		confirm();
	},30);
},60*60*1000);


  • Вопрос задан
  • 154 просмотра
Пригласить эксперта
Ответы на вопрос 1
lukoie
@lukoie
фигово код выложил. в jsfiddle выложи
и у #myvideo высоту поменяй
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы