@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;
}
- @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;
- }
@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>
- <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>
<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>