.wrapper {
width: 100%;
height: 100%;
background: linear-gradient(to right, green 50%, red 50%);
}
<div class="wrapper">
<div class="left_block">
</div>
<div class="right_block">
<main>
<section class="box">
<h1>TEXT</h1>
</section>
<section class="box">
<h1>TEXT</h1>
</section>
<section class="box">
<h1>TEXT</h1>
</section>
<section class="box">
<h1>TEXT</h1>
</section>
<section class="box">
<h1>TEXT</h1>
</section>
<section class="box">
<h1>TEXT</h1>
</section>
<section class="box">
<h1>TEXT</h1>
</section>
<section class="box">
<h1>TEXT</h1>
</section>
<section class="box">
<h1>TEXT</h1>
</section>
<section class="box">
<h1>TEXT</h1>
</section>
<section class="box">
<h1>TEXT</h1>
</section>
<section class="box">
<h1>TEXT</h1>
</section>
<section class="box">
<h1>TEXT</h1>
</section>
<section class="box">
<h1>TEXT</h1>
</section>
<section class="box">
<h1>TEXT</h1>
</section>
<div class="clear"></div>
</main>
</div>
</div>
html, body{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
.wrapper{
min-height: 100%;
width: 100%;
background: grey;
}
.left_block{
width: 250px;
height: 100%;
float: left;
}
.right_block{
width: auto !important;
min-height: 100%;
background: gold;
margin-left: 250px;
}
.box{
width: 220px;
height: 170px;
float: left;
margin: 10px;
background-color: silver;
padding: 15px;
}
.clear {
clear: both;
}
.menu-item-has-children a:after {
content: "\f0d7";
margin: 2px 0px 0px 6px;
display: inline-block;
opacity: 0.5;
font-family: FontAwesome;
}
.menu-item-has-children a:after {
content: "\f0d7";
margin: 2px 0px 0px 6px;
opacity: 0.5;
font-family: FontAwesome;
}
<ul class="menu">
<li><a href="#tab1" data-toggle="modal" data-target="#myModal">О Компании</a></li>
<li><a href="#tab2" data-toggle="modal" data-target="#myModal">Доставка и оплата</a></li>
<li><a href="#tab3" data-toggle="modal" data-target="#myModal">Наши гарантии</a></li>
</ul>
<div class="modal-body">
<div id="tab1" class="tab__content">Tab1</div>
<div id="tab2" class="tab__content">Tab2</div>
<div id="tab3" class="tab__content">Tab3</div>
</div>
$(document).ready(function () {
var allBlocks = $('.tab__content');
$(document).on('click', '.menu a', function () {
var el = $(this), id = el.attr('href');
allBlocks.css('display', 'none');
$('.modal-body').find(id).css('display', 'block');
return false;
});
});
<ul class="menu">
<li><a href="#tab1" data-toggle="modal" data-target="#myModal">О Компании</a></li>
<li><a href="#tab2" data-toggle="modal" data-target="#myModal">Доставка и оплата</a></li>
<li><a href="#tab3" data-toggle="modal" data-target="#myModal">Наши гарантии</a></li>
</ul>
<div class="modal-body">
<div id="tab-content">По дефолту контент первого таба</div>
</div>
$(document).ready(function () {
var target = $('#tab-content');
$(document).on('click', '.menu a', function () {
var el = $(this), id = el.attr('href');
//тут либо get либо post
$.post('url', {'tabid': id}, function (response) {
target.html(response);
});
return false;
});
});
<div class="wrapper">
<div class="circle">
<i></i>
</div>
<div class="circle">
<i></i>
</div>
<div class="circle">
<i></i>
</div>
</div>
body, html {
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
text-align: justify;
background-color: #000;
&:after {
content: "";
display: inline-block;
width: 100%;
}
.circle {
display: inline-block;
vertical-align: top;
width: 23%;
height: 100%;
i {
display: block;
background-color: yellow;
width: 100%;
padding-bottom: 100%;
border-radius: 50%;
}
}
}
var latestKnownScrollY = $('html').scrollTop() || $('body').scrollTop();
$(window).on("scroll", function () {
latestKnownScrollY = $('html').scrollTop() || $('body').scrollTop();
});
$(window).on("mousewheel DOMMouseScroll", function(event) {
var scrollTo,
scrollDistance = 400,
delta;
if (event.type == 'mousewheel') {
delta = event.originalEvent.wheelDelta / 120;
} else if (event.type == 'DOMMouseScroll') {
delta = - event.originalEvent.detail / 3;
}
scrollTo = latestKnownScrollY - delta * scrollDistance;
if (scrollTo) {
event.preventDefault();
event.stopPropagation();
$('body,html').stop().animate( {
scrollTop : scrollTo
} , 500);
}
} );
<div class="wrapper"></div>
body,html {
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
transition: background 1s;
background: none;
}
(function (w, d) {
w.onload = function () {
var wp = d.querySelector('.wrapper'),
colors = ['yellow', 'red', 'green', 'blue'],
ln = colors.length;
var changeColor = function (i) {
if (i < ln) {
setTimeout(function () {
wp.style.cssText = "background: " + colors[i] +";";
i++;
changeColor(i);
}, 2000);
} else {
changeColor(0);
}
};
changeColor(0);
};
}(window, document));
<div class="treangle">
<div class="treangle--left"></div>
<div class="treangle--right"></div>
</div>
body, html {
height: 100%;
width: 100%;
}
.treangle {
width: 100%;
height: 100%;
position: relative;
background-color: #000;
overflow: hidden;
[class*='treangle--'] {
width: 100%;
height: 50%;
position: absolute;
background-color: yellow;
}
.treangle--left {
float: left;
left: -50%;
transform: rotate(20deg);
transform: matrix(-1, -0.2, 0, 1, 0, 0);
}
.treangle--right {
float: right;
right: -50%;
transform: rotate(-20deg);
transform: matrix(1, -0.2, 0, 1, 0, 0);
}
}
input:not([type="submit"]) {
display: block;
}