Шаблон главной страницы

Автор: | 17.02.2016
  1. @import "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css";
  2. @import "animate.css";
  3. *{
  4. box-sizing:border-box;
  5. margin:0;
  6. padding:0;
  7. }
  8. body{
  9. background:url(images/crossword.png);
  10. font-family: 'calibri',sans-serif;
  11. font-size:1.25em;
  12. line-height:1.5em;
  13. }
  14. a{
  15. text-decoration:none;
  16. }
  17. #header,#content,#footer{
  18. width:100%;
  19. float:left;
  20. border:1px solid #FFF;
  21. }
  22. #header,#footer{
  23. background:rgba(0,0,0,0.7);
  24. }
  25. #content{
  26. margin-top:67px;
  27. }
  28. #up{
  29. position:fixed;
  30. width:50px;
  31. right:5%;
  32. bottom:5%;
  33. }
  34. .fix{
  35. position:fixed;
  36. top:0;
  37. left:0;
  38. width:100%;
  39. }
  40. h1,h2{
  41. text-align:center;
  42. margin:40px 0;
  43. border-bottom: 2px solid #ff0;
  44. line-height: 0;
  45. }
  46. .titl{
  47. background:#ff0;
  48. color:#000;
  49. }
  50. img{max-width:100%;
  51. width:auto;
  52. }
  53. .center{
  54. max-width:1140px;
  55. margin:0 auto;
  56. }
  57. .font{
  58. font-size:1.5em;
  59. margin:5%;
  60. color:#ff0;
  61. }
  62. .cntr{
  63. text-align:center;
  64. }
  65. .row{
  66. padding:20px;
  67. width:100%;
  68. float:left;
  69. }
  70. .logo{
  71. float:left;
  72. }
  73. .logo a{
  74. color:#fff;
  75. }
  76. .menu{
  77. float:right;
  78. }
  79. .menu li{
  80. float:left;
  81. }
  82. .menu a{
  83. padding:25px 20px;
  84. /*background:#888;*/
  85. color:#fff;
  86. }
  87. .menu a:hover{
  88. background:#ff0;
  89. color:#000;
  90. }
  91. .block{
  92. background:url(images/02.jpg) no-repeat;
  93. background-attachment:fixed;
  94. background-size: cover;
  95. float: left;
  96. width: 100%;
  97. /*height: 100vh;*/
  98. }
  99. .block2{
  100. background:url(images/02.jpg) no-repeat;
  101. background-attachment:fixed;
  102. background-size: cover;
  103. float: left;
  104. width: 100%;
  105. /*height: 100vh;*/
  106. }
  107. .col-2{
  108. width:50%;
  109. padding:1%;
  110. float:left;
  111. }
  112. .col-3{
  113. width:33.3%;
  114. padding:1%;
  115. float:left;
  116. }
  117. .col-4{
  118. width:25%;
  119. padding:1%;
  120. float:left;
  121. }
  122. .fon{background:rgba(0,0,0,0.5);
  123. color:#fff;
  124. box-shadow: 0 0 109px rgb(0, 0, 0);
  125. height:100vh;
  126. }
  127. .fon2{background:rgba(0,0,0,0.5);
  128. color:#fff;
  129. box-shadow: 0 0 109px rgb(0, 0, 0);
  130. }
  131. .head{
  132. margin:15vh 0;
  133. }
  134. .btnred{
  135. text-align: center;
  136. background: #EA1124;
  137. padding: 10px 20px;
  138. width: 200px;
  139. margin: 0 auto;
  140. transition:0.5s;
  141. }
  142. .btndark{
  143. text-align: center;
  144. background: #484848;
  145. padding: 10px 20px;
  146. width: 200px;
  147. margin: 0 auto;
  148. transition:0.5s;
  149. }
  150. .btnred:hover,.btndark:hover{
  151. background: #eee;
  152. color:#000;
  153. }
  154. #zakaz{
  155. padding:20px 0;
  156. background:url(images/12.jpg) no-repeat;
  157. background-size:cover;
  158. background-attachment:fixed;
  159. float:left;
  160. width:100%;
  161. }
  162. #portfolio .col-4{
  163. height:150px;
  164. transition:3s;
  165. }
  166. #block2{
  167. text-align:center;
  168. }
  169. #block3{
  170. margin: 40px 0;
  171. text-align: center;
  172. }
  173. input{
  174. width:100%;
  175. height:50px;
  176. font-size:20px;
  177. padding:10px;
  178. }
  179. input[type=submit]{
  180. background: #EA1124;
  181. padding: 10px 20px;
  182. width: 100%;
  183. margin: 0 auto;
  184. transition:0.5s;
  185. color:#fff;
  186. font-size:20px;
  187. }
  188. .blur img,.bw img,.sepia img,.contrast img
  189. {transition:3s;position:relative;-webkit-filter: grayscale(80%);}
  190. .blur img:hover {
  191. -webkit-filter: grayscale(0%);
  192. transform:rotate(360deg) scale(2) translate(100px);
  193. z-index:1;
  194. }
  195. .bw img:hover {
  196. -webkit-filter: grayscale(0%);
  197. transform:rotateY(360deg) scale(4) translate(-100px);
  198. z-index:1;
  199. }
  200. .icon{
  201. font-size:50px;
  202. margin:20px;
  203. text-align:center;
  204. }
  205. .i1{
  206. animation:i1 3s 0s;
  207. }
  208. .i2{
  209. animation:i2 3s 0s;
  210. }
  211. .i3{
  212. animation:i3 3s 0s;
  213. }
  214. @keyframes i1{
  215. 0%{transform:translate(-100%);}
  216. 100%{transform:translate(0%);}
  217. }
  218. @keyframes i2{
  219. 0%{transform:translateY(-100%);}
  220. 100%{transform:translateY(0%);}
  221. }
  222. @keyframes i3{
  223. 0%{transform:translate(100%);}
  224. 100%{transform:translate(0%);}
  225. }
  226. .sidebar{
  227. float:left;
  228. width:300px;
  229. }
  230. .contentr{
  231. float:left;
  232. width:calc(100% - 300px);
  233. }
  234. ul{list-style:none;}
  235. .ms a{
  236. background:#444;
  237. padding:10px 20px;
  238. color:#FFF;
  239. display:block;
  240. border-bottom:1px solid #eee;
  241. transition:0.5s;
  242. }
  243. .ms a:hover{
  244. padding:10px 20px 10px 40px;
  245. background:#666;
  246. }
  247. .mslist{
  248. position:relative;
  249. transition:3s;
  250. }
  251. .mslist:after{
  252. content:" ";
  253. border-left:10px solid #fff;
  254. border-top:5px solid transparent;
  255. border-bottom:5px solid transparent;
  256. position:absolute;
  257. top:20px;
  258. right:10px;
  259. transition:0.5s;
  260. }
  261. .mslist:hover:after{
  262. transform:rotate(180deg);
  263. }
  264. .msdrop{
  265. position:absolute;
  266. top:0;
  267. left:100%;
  268. width:100%;
  269. display:none;
  270. }
  271. .mslist:hover .msdrop {
  272. display:block;
  273. }
@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

  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>Блочная верстка</title>
  5. <link rel="stylesheet" href="style.css">
  6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  7. </head>
  8. <body>
  9. <div id="header" class="fix">
  10. <div class="center">
  11. <div class="row">
  12. <div class="logo animated bounceInLeft"><a href="index.html"><h3>IWebmaster.kz</h3></a></div>
  13. <div class="menu">
  14. <ul>
  15. <li><a href="">Меню1</a></li>
  16. <li><a href="">Меню2</a></li>
  17. <li><a href="">Меню1</a></li>
  18. <li><a href="">Меню1</a></li>
  19. </ul>
  20. </div>
  21. </div>
  22. </div>
  23. </div>
  24. <div id="content">
  25. <div class="block">
  26. <div class="center">
  27. <div class="row fon">
  28. <h1 class="head"><span class="titl">Академия IWebMaster.kz</span></h1>
  29. <h3 class="cntr">IWebMaster.kz - компания, обьединившая в себе талантливых профессиональных подрядчиков, они качественно и в срок исполнят любое задание по самым оптимальным ценам! <br></h3>
  30. <p class="cntr font"><span>Оставьте заявку и мы разработаем вам отличный сайт!</span></p>
  31. <div class="col-2"><div class="btnred i1">Заказать сайт</div></div>
  32. <div class="col-2"><div class="btndark i3">Вход/регистрация</div></div>
  33. </div>
  34. </div>
  35. </div>
  36. <div id="block2">
  37. <div class="center">
  38. <div class="row">
  39. <div class="col-3">
  40. <div class="icon mov1"><i class="fa fa-envelope-o"></i></div>
  41. <h3>Оставьте заявку</h3>
  42. <p>Зарегестрируйтесь в профиле и оставьте заявку<p>
  43. </div>
  44. <div class="col-3">
  45. <div class="icon mov2"><i class="fa fa-cogs"></i></div>
  46. <h3>Конкурс</h3>
  47. <p>Web-мастера рассмотрят вашу заявку, предложат свою цену за разработку сайта!<p>
  48. </div>
  49. <div class="col-3">
  50. <div class="icon mov3"><i class="fa fa-check"></i></div>
  51. <h3>Свобода выбора</h3>
  52. <p>Выберите своего Web-мастера, учитывая предложенную им цену и его профиль!<p>
  53. </div>
  54. </div>
  55. </div>
  56. </div>
  57. <div id="portfolio">
  58. <div class="center">
  59. <div class="row">
  60. <h2><span class="titl">Наши работы</span></h2>
  61. <div class="col-2 mov1">
  62. <img src="images/2.jpg">
  63. </div>
  64. <div class="col-4 mov3">
  65. <img src="images/5.jpeg">
  66. </div>
  67. <div class="col-4 mov3">
  68. <img src="images/6.jpeg">
  69. </div>
  70. <div class="col-4 mov3">
  71. <img src="images/7.jpeg">
  72. </div>
  73. <div class="col-4 mov3">
  74. <img src="images/8.jpeg">
  75. </div>
  76. </div>
  77. </div>
  78. </div>
  79. <div id="block3">
  80. <div class="center">
  81. <div class="row">
  82. <div class="col-4">
  83. <div class="icon mov1"><i class="fa fa-envelope-o"></i></div>
  84. <h3>Оставьте заявку</h3>
  85. <p>Зарегестрируйтесь в профиле и оставьте заявку<p>
  86. </div>
  87. <div class="col-4">
  88. <div class="icon mov2"><i class="fa fa-cogs"></i></div>
  89. <h3>Конкурс</h3>
  90. <p>Web-мастера рассмотрят вашу заявку, предложат свою цену за разработку сайта!<p>
  91. </div>
  92. <div class="col-4">
  93. <div class="icon mov3"><i class="fa fa-check"></i></div>
  94. <h3>Свобода выбора</h3>
  95. <p>Выберите своего Web-мастера, учитывая предложенную им цену и его профиль!<p>
  96. </div>
  97. <div class="col-4">
  98. <div class="icon mov2"><i class="fa fa-cogs"></i></div>
  99. <h3>Конкурс</h3>
  100. <p>Web-мастера рассмотрят вашу заявку, предложат свою цену за разработку сайта!<p>
  101. </div>
  102. </div>
  103. </div>
  104. </div>
  105. <div id="zakaz">
  106. <div class="center fon2">
  107. <div class="row">
  108. <form>
  109. <div class="col-3"><input type="text" name="name" placeholder="Введите Имя"></div>
  110. <div class="col-3"><input type="tel" name="tel" placeholder="Введите телефон"></div>
  111. <div class="col-3"><input class="btnred" type="submit" name="submit" value="Заказать звонок"></div>
  112. </form>
  113. </div>
  114. </div>
  115. </div>
  116. </div>
  117. <div id="footer">
  118. <div class="center">
  119. <div class="row">
  120. Футер
  121. </div>
  122. </div>
  123. </div>
  124. <div id="up"><a href="#"><img src="images/up.png"></a></div>
  125. <script>$(window).scroll(function() {
  126. $('.mov1').each(function(){
  127. var imagePos = $(this).offset().top;
  128. var topOfWindow = $(window).scrollTop();
  129. if (imagePos < topOfWindow+500) {
  130. $(this).addClass('i1');
  131. }
  132. });
  133. $('.mov2').each(function(){
  134. var imagePos = $(this).offset().top;
  135. var topOfWindow = $(window).scrollTop();
  136. if (imagePos < topOfWindow+500) {
  137. $(this).addClass('i2');
  138. }
  139. });
  140. $('.mov3').each(function(){
  141. var imagePos = $(this).offset().top;
  142. var topOfWindow = $(window).scrollTop();
  143. if (imagePos < topOfWindow+500) {
  144. $(this).addClass('i3');
  145. }
  146. });
  147. $('.mov4').each(function(){
  148. var imagePos = $(this).offset().top;
  149. var topOfWindow = $(window).scrollTop();
  150. if (imagePos < topOfWindow+500) {
  151. $(this).addClass('bounceInLeft');
  152. }
  153. });
  154. });
  155. </script>
  156. </body>
  157. </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>