@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css";
@import "animate.css";
*{
box-sizing:border-box;
margin:0;
padding:0;
}
body{
background:url(images/crossword.png);
font-family: 'calibri',sans-serif;
font-size:1.25em;
line-height:1.5em;
}
a{
text-decoration:none;
}
#header,#content,#footer{
width:100%;
float:left;
border:1px solid #FFF;
}
#header,#footer{
background:rgba(0,0,0,0.7);
}
#content{
margin-top:67px;
}
#up{
position:fixed;
width:50px;
right:5%;
bottom:5%;
}
.fix{
position:fixed;
top:0;
left:0;
width:100%;
}
h1,h2{
text-align:center;
margin:40px 0;
border-bottom: 2px solid #ff0;
line-height: 0;
}
.titl{
background:#ff0;
color:#000;
}
img{max-width:100%;
width:auto;
}
.center{
max-width:1140px;
margin:0 auto;
}
.font{
font-size:1.5em;
margin:5%;
color:#ff0;
}
.cntr{
text-align:center;
}
.row{
padding:20px;
width:100%;
float:left;
}
.logo{
float:left;
}
.logo a{
color:#fff;
}
.menu{
float:right;
}
.menu li{
float:left;
}
.menu a{
padding:25px 20px;
/*background:#888;*/
color:#fff;
}
.menu a:hover{
background:#ff0;
color:#000;
}
.block{
background:url(images/02.jpg) no-repeat;
background-attachment:fixed;
background-size: cover;
float: left;
width: 100%;
/*height: 100vh;*/
}
.block2{
background:url(images/02.jpg) no-repeat;
background-attachment:fixed;
background-size: cover;
float: left;
width: 100%;
/*height: 100vh;*/
}
.col-2{
width:50%;
padding:1%;
float:left;
}
.col-3{
width:33.3%;
padding:1%;
float:left;
}
.col-4{
width:25%;
padding:1%;
float:left;
}
.fon{background:rgba(0,0,0,0.5);
color:#fff;
box-shadow: 0 0 109px rgb(0, 0, 0);
height:100vh;
}
.fon2{background:rgba(0,0,0,0.5);
color:#fff;
box-shadow: 0 0 109px rgb(0, 0, 0);
}
.head{
margin:15vh 0;
}
.btnred{
text-align: center;
background: #EA1124;
padding: 10px 20px;
width: 200px;
margin: 0 auto;
transition:0.5s;
}
.btndark{
text-align: center;
background: #484848;
padding: 10px 20px;
width: 200px;
margin: 0 auto;
transition:0.5s;
}
.btnred:hover,.btndark:hover{
background: #eee;
color:#000;
}
#zakaz{
padding:20px 0;
background:url(images/12.jpg) no-repeat;
background-size:cover;
background-attachment:fixed;
float:left;
width:100%;
}
#portfolio .col-4{
height:150px;
transition:3s;
}
#block2{
text-align:center;
}
#block3{
margin: 40px 0;
text-align: center;
}
input{
width:100%;
height:50px;
font-size:20px;
padding:10px;
}
input[type=submit]{
background: #EA1124;
padding: 10px 20px;
width: 100%;
margin: 0 auto;
transition:0.5s;
color:#fff;
font-size:20px;
}
.blur img,.bw img,.sepia img,.contrast img
{transition:3s;position:relative;-webkit-filter: grayscale(80%);}
.blur img:hover {
-webkit-filter: grayscale(0%);
transform:rotate(360deg) scale(2) translate(100px);
z-index:1;
}
.bw img:hover {
-webkit-filter: grayscale(0%);
transform:rotateY(360deg) scale(4) translate(-100px);
z-index:1;
}
.icon{
font-size:50px;
margin:20px;
text-align:center;
}
.i1{
animation:i1 3s 0s;
}
.i2{
animation:i2 3s 0s;
}
.i3{
animation:i3 3s 0s;
}
@keyframes i1{
0%{transform:translate(-100%);}
100%{transform:translate(0%);}
}
@keyframes i2{
0%{transform:translateY(-100%);}
100%{transform:translateY(0%);}
}
@keyframes i3{
0%{transform:translate(100%);}
100%{transform:translate(0%);}
}
.sidebar{
float:left;
width:300px;
}
.contentr{
float:left;
width:calc(100% - 300px);
}
ul{list-style:none;}
.ms a{
background:#444;
padding:10px 20px;
color:#FFF;
display:block;
border-bottom:1px solid #eee;
transition:0.5s;
}
.ms a:hover{
padding:10px 20px 10px 40px;
background:#666;
}
.mslist{
position:relative;
transition:3s;
}
.mslist:after{
content:" ";
border-left:10px solid #fff;
border-top:5px solid transparent;
border-bottom:5px solid transparent;
position:absolute;
top:20px;
right:10px;
transition:0.5s;
}
.mslist:hover:after{
transform:rotate(180deg);
}
.msdrop{
position:absolute;
top:0;
left:100%;
width:100%;
display:none;
}
.mslist:hover .msdrop {
display:block;
}
HTML
<html>
<head>
<meta charset="utf-8">
<title>Блочная верстка</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div id="header" class="fix">
<div class="center">
<div class="row">
<div class="logo animated bounceInLeft"><a href="index.html"><h3>IWebmaster.kz</h3></a></div>
<div class="menu">
<ul>
<li><a href="">Меню1</a></li>
<li><a href="">Меню2</a></li>
<li><a href="">Меню1</a></li>
<li><a href="">Меню1</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="content">
<div class="block">
<div class="center">
<div class="row fon">
<h1 class="head"><span class="titl">Академия IWebMaster.kz</span></h1>
<h3 class="cntr">IWebMaster.kz - компания, обьединившая в себе талантливых профессиональных подрядчиков, они качественно и в срок исполнят любое задание по самым оптимальным ценам! <br></h3>
<p class="cntr font"><span>Оставьте заявку и мы разработаем вам отличный сайт!</span></p>
<div class="col-2"><div class="btnred i1">Заказать сайт</div></div>
<div class="col-2"><div class="btndark i3">Вход/регистрация</div></div>
</div>
</div>
</div>
<div id="block2">
<div class="center">
<div class="row">
<div class="col-3">
<div class="icon mov1"><i class="fa fa-envelope-o"></i></div>
<h3>Оставьте заявку</h3>
<p>Зарегестрируйтесь в профиле и оставьте заявку<p>
</div>
<div class="col-3">
<div class="icon mov2"><i class="fa fa-cogs"></i></div>
<h3>Конкурс</h3>
<p>Web-мастера рассмотрят вашу заявку, предложат свою цену за разработку сайта!<p>
</div>
<div class="col-3">
<div class="icon mov3"><i class="fa fa-check"></i></div>
<h3>Свобода выбора</h3>
<p>Выберите своего Web-мастера, учитывая предложенную им цену и его профиль!<p>
</div>
</div>
</div>
</div>
<div id="portfolio">
<div class="center">
<div class="row">
<h2><span class="titl">Наши работы</span></h2>
<div class="col-2 mov1">
<img src="images/2.jpg">
</div>
<div class="col-4 mov3">
<img src="images/5.jpeg">
</div>
<div class="col-4 mov3">
<img src="images/6.jpeg">
</div>
<div class="col-4 mov3">
<img src="images/7.jpeg">
</div>
<div class="col-4 mov3">
<img src="images/8.jpeg">
</div>
</div>
</div>
</div>
<div id="block3">
<div class="center">
<div class="row">
<div class="col-4">
<div class="icon mov1"><i class="fa fa-envelope-o"></i></div>
<h3>Оставьте заявку</h3>
<p>Зарегестрируйтесь в профиле и оставьте заявку<p>
</div>
<div class="col-4">
<div class="icon mov2"><i class="fa fa-cogs"></i></div>
<h3>Конкурс</h3>
<p>Web-мастера рассмотрят вашу заявку, предложат свою цену за разработку сайта!<p>
</div>
<div class="col-4">
<div class="icon mov3"><i class="fa fa-check"></i></div>
<h3>Свобода выбора</h3>
<p>Выберите своего Web-мастера, учитывая предложенную им цену и его профиль!<p>
</div>
<div class="col-4">
<div class="icon mov2"><i class="fa fa-cogs"></i></div>
<h3>Конкурс</h3>
<p>Web-мастера рассмотрят вашу заявку, предложат свою цену за разработку сайта!<p>
</div>
</div>
</div>
</div>
<div id="zakaz">
<div class="center fon2">
<div class="row">
<form>
<div class="col-3"><input type="text" name="name" placeholder="Введите Имя"></div>
<div class="col-3"><input type="tel" name="tel" placeholder="Введите телефон"></div>
<div class="col-3"><input class="btnred" type="submit" name="submit" value="Заказать звонок"></div>
</form>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="center">
<div class="row">
Футер
</div>
</div>
</div>
<div id="up"><a href="#"><img src="images/up.png"></a></div>
<script>$(window).scroll(function() {
$('.mov1').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+500) {
$(this).addClass('i1');
}
});
$('.mov2').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+500) {
$(this).addClass('i2');
}
});
$('.mov3').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+500) {
$(this).addClass('i3');
}
});
$('.mov4').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+500) {
$(this).addClass('bounceInLeft');
}
});
});
</script>
</body>
</html>