danilst.esy.es/one-page
тестирую через screenfly и там выглядит все нормально.
Но на моем телефоне все выглядит вот так
вот код
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-widt">
<title>Anhiora</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/onepage-scroll.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/media.css">
</head>
<body>
<div class="main">
<section class="first">
<div class="container first-con">
<div class="header row">
<div class="logo col-sm-6">
<img src="https://v.dreamwidth.org/962489/545320" alt="sdf">
<h1>Лечение заикания <br>у детей и взрослых <br>в сербии</h1>
</div>
<div class="tel col-sm-6">
<a href="#">9999999</a>
<a href="#">Заказать звонок</a>
</div>
</div>
<div class="header-info row">
<div class="img col-sm-6 hidden-xs">
<img src="http://i.imgur.com/mrfX4F1.png" alt="">
</div>
<div class="info col-sm-6">
<h2>Хотите разговаривать свободно?</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>
Nobis, mollitia ex omnis est cum eligendi quibusdam ab numquam vitae modi!</p>
<a href="#">Записаться на презентацию</a>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="info col-sm-4">
<h2>Хотите разговаривать свободно?</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>
Nobis, mollitia ex omnis est cum eligendi quibusdam ab numquam vitae modi!</p>
<a href="#">Записаться на презентацию</a>
</div>
<div class="info col-sm-4">
<h2>Хотите разговаривать свободно?</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>
Nobis, mollitia ex omnis est cum eligendi quibusdam ab numquam vitae modi!</p>
<a href="#">Записаться на презентацию</a>
</div>
<div class="info col-sm-4">
<h2>Хотите разговаривать свободно?</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>
Nobis, mollitia ex omnis est cum eligendi quibusdam ab numquam vitae modi!</p>
<a href="#">Записаться на презентацию</a>
</div>
</div>
</div>
</section>
</div>
<script src="js/jquery.js"></script>
<script src="js/script.js"></script>
<script src="js/jquery.onepage-scroll.min.js"></script>
<script>
$(".main").onepage_scroll({
sectionContainer: "section", // sectionContainer accepts any kind of selector in case you don't want to use section
easing: "ease", // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in",
// "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
animationTime: 1000, // AnimationTime let you define how long each section takes to animate
pagination: true, // You can either show or hide the pagination. Toggle true for show, false for hide.
updateURL: false, // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
loop: true, // You can have the page loop back to the top/bottom when the user navigates at up/down on the first/last page.
keyboard: true, // You can activate the keyboard controls
});
</script>
</body>
</html>
style.css
* {
box-sizing: border-box;
}
body {
background-color: #666;
color: white;
}
a {
color: #fff;
}
.first {
/*background: url(http://i.imgur.com/mrfX4F1.png) no-repeat left 20% bottom;
-webkit-background-size: 40%;
background-size: 40%;*/
overflow: hidden;
height: 100%;
}
.first-con {
height: 100%;
}
.header {
margin-bottom: 60px;
}
.logo {
}
.logo img {
float: left;
vertical-align: top;
width: 100px;
height: 100px;
}
.logo h1 {
display: inline-block;
vertical-align: top;
font-size: 12px;
}
.tel {
text-align: right;
}
.header-info {
}
.info {
text-align: center;
}
.info h2 {
font-size: 12px;
}
.info p {
font-size: 12px;
}
.img {
position: relative;
}
.img img {
position: absolute;
top: 0;
left: 10%;
text-align: center;
width: 100%;
height: auto;
}
media.css
@media screen and (orientation:landscape) and (max-device-width: 767px) {
html{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
position: absolute;
top: 100%;
left: 0
}
}
@media (max-width: 767px) {
.first {
background: none;
}
.tel {
clear: both;
}
a {
color: #fff;
}
.header {
margin-bottom: 10px;
}
.logo img {
width: 50px;
height: 50px;
}
.logo h1 {
font-size: 10px;
}
.info h2 {
font-size: 10px;
}
.info p {
font-size: 10px;
}
}
Средний
Простой