second practice

css/common.css

@@ -0,0 +1,625 @@
+* {
+    margin: 0;
+    padding: 0;
+    vertical-align: top;
+    color: inherit;
+    font-family: 'Roboto', sans-serif;
+    -webkit-transition: all .3s ease;
+    -moz-transition: all .3s ease;
+    transition: all .3s ease;
+    background-repeat: no-repeat;
+    font-size: 100%;
+}
+
+input::-moz-placeholder {
+    color: #fff;
+}
+
+textarea::-moz-placeholder {
+    color: #fff;
+}
+
+textarea::-webkit-input-placeholder {
+    color: #fff;
+}
+
+input::-webkit-input-placeholder {
+    color: #fff;
+}
+
+img {
+    max-width: 100%;
+}
+
+.container {
+    width: 1200px;
+    max-width: 90%;
+    margin: 0 auto;
+    /*position: relative;*/
+}
+
+.sm {
+    display: none !important;
+}
+
+a {
+    text-decoration: none;
+}
+
+section {
+    margin-top: 60px;
+}
+
+.left, .right {
+    display: inline-block;
+    width: 49%;
+}
+
+.left {
+    text-align: left;
+}
+
+.right {
+    /*text-align: right;*/
+}
+
+.quater {
+    display: inline-block;
+    width: 24.5%;
+    text-align: center;
+}
+
+.three {
+    width: 48%;
+    display: inline-block;
+    vertical-align: top;
+}
+
+.small-three {
+    width: 25%;
+}
+
+.border-btn {
+    width: 180px;
+    max-width: 90%;
+    height: 50px;
+    line-height: 50px;
+    display: inline-block;
+    text-align: center;
+    color: #33aefd;
+    border: 1px solid #33aefd;
+    text-transform: uppercase;
+}
+
+.phone {
+    font-size: 27px;
+}
+
+/*header styles*/
+
+header {
+    background-image: url(../img/bg.png);
+    border-bottom: 1px solid #fff;
+    background-size: 100%;
+    background-size: cover;
+    background-position: center center;
+    position: relative;
+}
+
+header .top-mnu {
+    min-height: 130px;
+    line-height: 130px;
+    background-color: rgba(255, 255, 255, .7);
+    width: 100%;
+    top: 0;
+    left: 0;
+    z-index: 99;
+}
+
+header .top-mnu .logo {
+    vertical-align: middle;
+}
+
+nav ul li {
+    text-transform: uppercase;
+    display: inline-block;
+    color: #000;
+    font-size: 17px;
+    text-align: center;
+    width: 30%;
+}
+
+nav ul li:hover {
+    color: #33aefd;
+}
+
+nav ul li:last-child:after {
+    display: none;
+}
+
+.top-mnu .contacts {
+    text-align: right;
+    line-height: 50px;
+}
+
+/*//slider*/
+.slider {
+    padding: 250px 0;
+    background-color: rgba(0, 0, 0, .6);
+    /*padding: 55px 0 60px;*/
+}
+
+.slider .slide-item {
+    text-align: center;
+}
+
+h1 {
+    text-transform: uppercase;
+    color: #fff;
+    font-size: 30px;
+    line-height: 80px;
+    font-weight: 200;
+}
+
+.slider h2 {
+    font-size: 23px;
+    color: #fff;
+    font-weight: 200;
+
+}
+
+img.stripe-block {
+    position: absolute;
+    top: 10%;
+    width: 90%;
+    z-index: -1;
+}
+
+.em {
+    color: #33aefd;
+}
+
+.common-h2 {
+    text-align: center;
+    font-size: 30px;
+    margin: 40px auto;
+    max-width: 80%;
+    width: 740px;
+
+}
+
+.common-h2 .em {
+    font-size: 100%;
+    text-transform: uppercase;
+}
+
+/*chess*/
+
+.chess-item {
+    text-align: center;
+    display: inline-block;
+    font-size: 23px;
+    position: relative;
+    box-sizing: padding-box;
+    margin-top: 40px;
+}
+
+.row.top .chess-item {
+    width: 32%;
+}
+
+.row.bottom .chess-item {
+    width: 49%;
+}
+
+.chess-item p:before {
+    content: " ";
+    display: block;
+    width: 140px;
+    height: 140px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    background-image: url(../img/l-stripe.png);
+    background-repeat: no-repeat;
+}
+
+.advs .chess-item p:before {
+    display: none;
+}
+
+.advs .chess-item:before {
+    content: " ";
+    display: block;
+    width: 140px;
+    height: 140px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    background-repeat: no-repeat;
+    color: #b0e0ff;
+    font-size: 200px;
+    line-height: 140px;
+    font-weight: 900;
+}
+
+.advs .row.top .chess-item:nth-child(1):before {
+    content: "1 ";
+}
+
+.advs .row.top .chess-item:nth-child(2):before {
+    content: "2";
+}
+
+.advs .row.top .chess-item:nth-child(3):before {
+    content: "3 ";
+}
+
+.advs .row.bottom .chess-item:nth-child(1):before {
+    content: "4 ";
+}
+
+.advs .row.bottom .chess-item:nth-child(2):before {
+    content: "5";
+}
+
+.chess-item p {
+    position: relative;
+    max-width: 400px;
+    margin: 0 auto;
+    padding: 40px 0;
+    text-align: left;
+    padding-left: 40px;
+}
+
+section h1 {
+    position: relative;
+    display: inline-block;
+    color: #000;
+
+}
+
+section h1:after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 90px;
+    height: 1px;
+    background-color: #33aefd;
+    top: 50%;
+    right: -50%;
+}
+
+section h1.rev:after {
+    left: -50%;
+}
+
+.accept,
+.advs {
+    background-image: url(../img/bg2.png);
+    -webkit-background-size: cover;
+    background-size: cover;
+    padding-bottom: 20px;
+
+}
+
+.accept .common-h2 {
+    font-weight: 100;
+}
+
+.border-btn.rev {
+    color: #fff;
+    background-color: #33aefd;
+    display: block;
+    margin: 0 auto;
+}
+
+.nine-item {
+    text-align: center;
+    display: inline-block;
+    width: 19.5%;
+    margin-top: 50px;
+    vertical-align: text-bottom;
+
+}
+
+.nine-item img {
+    max-width: 40%;
+}
+
+.nine-p {
+    font-size: 16px;
+    margin-top: 20px;
+}
+
+.row.bottom-9 .nine-item .img {
+    transform: translateX(50%);
+}
+
+.advs h2 {
+    text-align: left;
+    font-weight: 400;
+}
+
+.advs .chess-item p {
+    padding-top: 20px;
+    font-size: 16px;
+}
+
+.advs .chess-item p.h2 {
+    padding-bottom: 0;
+    padding-top: 40px;
+    text-transform: uppercase;
+    font-size: 28px;
+}
+
+.advs .row.bottom .chess-item {
+    width: 33%;
+    transform: translateX(50%);
+}
+
+.async .row.top,
+.async .row.bottom {
+    position: relative;
+
+}
+
+.async .text-img {
+    background-image: url(../img/bg3.png);
+    -webkit-background-size: cover;
+    background-size: cover;
+    display: inline-block;
+    margin: 100px 0;
+    width: 700px;
+    max-width: 60%;
+    min-height: 500px;
+    text-align: left;
+
+}
+
+.async .row.top img,
+.async .row.bottom img {
+    position: absolute;
+    top: 0;
+    max-width: 48%;
+    z-index: -1;
+}
+
+.async .row.top img {
+    right: 0;
+}
+
+.async .row.bottom img {
+    left: 0;
+}
+
+.async .row.bottom {
+    text-align: right;
+}
+
+.text-img {
+    padding: 40px;
+}
+
+.text-img .head {
+    font-size: 50px;
+    font-weight: bold;
+    text-transform: uppercase;
+    width: 50%;
+
+}
+
+.container.h1-rev {
+    text-align: right;
+
+}
+
+.content {
+    max-width: 70%;
+    padding-left: 100px;
+    position: relative;
+    margin-top: 20px;
+    /*font-size: 20px;*/
+    max-width: 370px;
+
+}
+
+.content:after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 70px;
+    height: 1px;
+    background-color: #33aefd;
+    top: 17px;
+    left: 0%;
+}
+
+.content * {
+    padding-top: 10px;
+    font-size: 17px;
+}
+
+.serv-type {
+    margin-top: 10px;
+    list-style-type: none;
+}
+
+.serv-type li:before {
+    content: " ";
+    display: inline-block;
+    width: 5px;
+    height: 5px;
+    background-color: #33aefd;
+    margin-right: 10px;
+    margin-left: 10px;
+    vertical-align: middle;
+}
+
+.icons-item {
+    display: inline-block;
+    width: 24%;
+    text-align: center;
+    vertical-align: bottom;
+    margin-top: 30px;
+}
+
+.icons-item img {
+    max-width: 80%;
+}
+
+.clients {
+    padding-bottom: 50px;
+}
+
+footer {
+    background-color: #33aefd;
+    color: #fff;
+    padding-top: 30px;
+}
+
+.sign {
+    border-top: 1px solid #fff;
+    text-align: center;
+    padding: 10px 0;
+    margin-top: 20px;
+}
+
+.city {
+    font-weight: 100;
+    font-size: 24px;
+}
+
+.addr,
+.mail,
+.phone {
+    font-size: 17px;
+    margin-top: 15px;
+    max-width: 330px;
+    font-weight: 100;
+}
+
+.phone {
+    max-width: 100%;
+}
+
+.num {
+    font-size: 30px;
+    margin-top: 15px;
+}
+
+form {
+    margin-top: 20px;
+    max-width: 330px;
+
+}
+
+.field:focus {
+    border: 1px solid #fff;
+    outline: none;
+}
+
+.field {
+    border: 1px solid #fff;
+    width: 300px;
+    height: 50px;
+    background-color: transparent;
+    box-sizing: border-box;
+    padding-left: 5px;
+    margin-top: 10px;
+    -webkit-appearance: none;
+}
+
+.field.sub {
+    color: #33aefd;
+    background-color: #fff;
+}
+
+.center {
+    display: inline-block;
+    text-align: left;
+    position: relative;
+}
+
+footer .left,
+footer .right {
+    text-align: center;
+    position: relative;
+}
+
+footer .left .center:after {
+    content: "";
+    display: block;
+    margin-top: 225px;
+    width: 90px;
+    height: 2px;
+    background-color: #FFF;
+}
+
+.content.lh {
+    line-height: 35px;
+}
+
+.error {
+    border: 1px solid lightcoral !important;
+}
+
+.popup {
+    background-color: #363739;
+    min-height: 70vh;
+    /*width: 380px;*/
+    position: fixed;
+    top: 0;
+    right: 0;
+    padding: 3% 5%;
+    max-width: 50%;
+    display: none;
+    color: #fff;
+}
+
+.popup .close {
+    width: 30px;
+    height: 30px;
+    float: right;
+    color: #fff;
+    font-size: 40px;
+}
+
+.popup .submit {
+    width: 100%;
+    background-color: #009bfe;
+    margin-top: 40px;
+    color: #fff;
+    border: none;
+    outline: none;
+    height: 50px;
+    line-height: 50px;
+    text-transform: uppercase;
+}
+
+.popup .title {
+    font-size: 30px;
+    color: #fff;
+    text-align: center;
+    margin-top: 60px;
+    margin-bottom: 5px;
+}
+
+.popup .nameText {
+    color: #6a98b0;
+    font-size: 20px;
+    text-align: left;
+    margin-top: 35px;
+    margin-bottom: 12px;
+}
+
+.popup .textArea {
+    width: 100%;
+    background-color: #363739;
+    border: solid 2px #fff;
+    line-height: 36px;
+}
+
+.popup form {
+    max-width: 100%;
+}

css/media.css

@@ -0,0 +1,408 @@
+@media all and (max-width: 1400px) {
+    .slider {
+        padding: 220px 0;
+    }
+
+    .text-img .head {
+        font-size: 40px;
+    }
+}
+
+@media all and (max-width: 1200px) {
+    .slider {
+        padding: 180px 0;
+    }
+
+    .common-h2 {
+        font-size: 24px;
+    }
+
+    .chess-item p {
+        position: relative;
+        max-width: 320px;
+        font-size: 20px;
+    }
+
+    .phone {
+        font-size: 23px;
+    }
+}
+
+@media all and (max-width: 1000px) {
+    .text-img .head {
+        font-size: 35px;
+        width: 100%;
+    }
+
+    .row.top .chess-item {
+        width: 49%;
+        margin-top: 40px;
+    }
+
+    .row.top .chess-item:last-child {
+        margin-left: 25%;
+        text-align: center;
+    }
+
+    h1 {
+        font-size: 25px;
+    }
+
+    .slider h2 {
+        font-size: 20px;
+    }
+
+    .slider {
+        padding: 120px 0;
+    }
+
+    .common-h2 {
+        font-size: 22px;
+    }
+
+    .phone {
+        font-size: 20px;
+    }
+
+    .border-btn {
+        width: 150px;
+        font-size: 14px;
+    }
+
+    nav ul li {
+        font-size: 15px;
+    }
+
+    header .top-mnu .logo {
+        max-width: 140px;
+    }
+
+    .advs .row.bottom .chess-item {
+        width: 49%;
+        transform: translateX(0%);
+    }
+
+    .advs .chess-item p.h2 {
+        font-size: 24px;
+    }
+
+    .async .row.bottom,
+    .async .row.top {
+        text-align: center;
+    }
+
+    .async .text-img {
+        margin-bottom: 0;
+        padding: 20px;
+        min-height: 400px;
+
+    }
+
+    .async .row.top img,
+    .async .row.bottom img {
+        opacity: 0.8;
+        max-width: 65%;
+    }
+
+    .content.lh {
+        line-height: 30px;
+    }
+}
+
+@media all and (max-width: 800px) {
+    .icons-item {
+        width: 49%;
+    }
+
+    .async .text-img {
+        margin: 50px auto;
+    }
+
+    .text-img .head {
+        font-size: 30px;
+    }
+
+    .text-img {
+        min-height: auto;
+    }
+
+    .text-img .head {
+        width: 90%;
+    }
+
+    header .top-mnu .logo {
+        max-width: 100px;
+    }
+
+    .border-btn {
+        width: 140px;
+        font-size: 11px;
+        height: 35px;
+        line-height: 34px;
+    }
+
+    .phone {
+        font-size: 17px;
+    }
+
+    header .top-mnu {
+        min-height: 100px;
+        line-height: 100px;
+    }
+
+    .common-h2 {
+        font-size: 18px;
+        max-width: 80%;
+    }
+
+    .chess-item p {
+        position: relative;
+        max-width: 260px;
+        font-size: 16px;
+    }
+
+    .chess-item p::before {
+        width: 100px;
+        height: 100px;
+    }
+
+    h1 {
+        font-size: 23px;
+    }
+
+    .slider h2 {
+        font-size: 18px;
+    }
+
+    .slider {
+        padding: 100px 0;
+    }
+
+    .top-mnu .contacts {
+        text-align: right;
+        line-height: 30px;
+    }
+
+    header .top-mnu {
+        line-height: 60px;
+    }
+
+    .three.nav {
+        display: none;
+    }
+
+    .small-three {
+        width: 49%;
+    }
+
+    .three.nav {
+        display: none;
+    }
+
+    .row.bottom-9 .nine-item .img {
+        transform: translateX(0%);
+    }
+
+    .row.top-9 .nine-item:nth-child(4),
+    .row.top-9 .nine-item:nth-child(5) {
+        transform: translateX(50%);
+    }
+
+    .row.bottom-9 .nine-item:last-child {
+        margin-left: auto;
+        margin-right: auto;
+        display: block;
+    }
+
+    .sm {
+        display: block !important;
+        width: 100%;
+        margin: 0 auto;
+    }
+
+    .chess-item p {
+        padding-left: 20px;
+    }
+
+    .nine-item {
+        text-align: center;
+        display: inline-block;
+        width: 32%;
+        margin-top: 50px;
+    }
+
+    .content * {
+        padding-top: 10px;
+        font-size: 15px;
+    }
+
+    footer .left,
+    footer .right {
+        width: 100%;
+    }
+
+    footer .left .center:after {
+        content: "";
+        margin-top: 40px;
+        margin-bottom: 20px;
+    }
+
+    .popup .title {
+        margin-top: 55px;
+        font-size: 16px;
+    }
+
+    .popup .nameText {
+        font-size: 15px;
+        margin-top: 20px;
+    }
+
+    .popup .close {
+        font-size: 24x;
+    }
+
+    .popup .submit {
+        font-size: 14px;
+        height: 40px;
+        line-height: 40px;
+    }
+}
+
+@media all and (max-width: 550px) {
+    .nine-p {
+        font-size: 13px;
+        margin-top: 15px;
+    }
+
+    .async .text-img {
+        max-width: 90%;
+    }
+
+    .popup .title {
+        margin-top: 55px;
+        font-size: 16px;
+    }
+
+    .popup .nameText {
+        font-size: 15px;
+    }
+
+    .popup .close {
+        font-size: 24x;
+    }
+
+    .addr, .mail, .phone, .field {
+        font-size: 13px;
+    }
+
+    .field {
+        height: 40px;
+    }
+
+    .sign {
+        font-size: 12px;
+    }
+
+    .num {
+        font-size: 25px;
+    }
+
+    section {
+        margin-top: 40px;
+    }
+
+    .advs .chess-item p {
+        font-size: 15px;
+    }
+
+    .advs .chess-item p.h2 {
+        font-size: 18px;
+    }
+
+    .advs .chess-item::before {
+        font-size: 130px;
+        line-height: 110px;
+        left: 60px;
+    }
+
+    .async .text-img {
+        width: 90%;
+        margin: 20px auto;
+    }
+
+    .content {
+        max-width: 100%;
+        padding-left: 10px;
+    }
+
+    .content::after {
+        display: none;
+    }
+
+    .text-img .head {
+        font-size: 20px;
+    }
+
+    .content * {
+        padding-top: 10px;
+        font-size: 12px;
+    }
+
+    .chess-item {
+        width: 100% !important;
+        margin-top: 20px;
+        margin-left: 0 !important;
+    }
+
+    .common-h2 {
+        font-size: 15px;
+    }
+
+    .slider {
+        padding: 70px 0;
+    }
+
+    h1 {
+        font-size: 20px;
+        line-height: 40px;
+    }
+
+    .slider h2 {
+        font-size: 16px;
+    }
+
+    nav ul li {
+        font-size: 13px;
+    }
+
+    .phone {
+        font-size: 15px;
+    }
+
+    .border-btn {
+        width: 110px;
+        font-size: 10px;
+        height: 30px;
+        line-height: 30px;
+    }
+
+    section h1:after {
+        width: 40px;
+        right: -35%;
+    }
+
+    section h1.rev:after {
+        left: -35%;
+    }
+
+    section h1 {
+        font-size: 16px;
+    }
+}
+
+@media all and (max-width: 480px) {
+    .popup {
+        height: 400px;
+        max-width: 90%;
+    }
+}

handler.php

@@ -0,0 +1,23 @@
+<?php
+
+ini_set('error_reporting', E_ALL);
+ini_set('display_errors', 1);
+ini_set('display_startup_errors', 1);
+
+require_once('lib/CallbackForm.php');
+include_once('lib/FormWithEmail.php');
+require_once('lib/FormFactory.php');
+
+$name = isset($_POST['name']) ? trim($_POST['name']) : '';
+$phone = isset($_POST['phone']) ? trim($_POST['phone']) : '';
+$email = isset($_POST['email']) ? trim($_POST['phone']) : ' ';
+$uploadFile = isset($_FILES['uploadFile']) ? ($_FILES['uploadFile']) : [];
+$formType = isset($_POST['formType']) ? trim($_POST['formType']) : '';
+
+$form = FormFactory::getForm($formType, $name, $phone, $email, $uploadFile);
+if ($form->validate()) {
+    $form->send();
+    $form->uploadFile();
+} else {
+    echo 'Введите корректные данные';
+}

index.html

@@ -0,0 +1,277 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+    <link rel="stylesheet" href="css/common.css">
+    <link rel="stylesheet" href="css/media.css">
+    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
+          integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+
+</head>
+<body>
+<header id="header">
+    <div class="top-mnu">
+        <div class="container">
+            <div class="three small-three">
+                <img class="logo" src="img/logo.png" alt="logo">
+            </div>
+            <div class="three nav">
+                <nav>
+                    <ul>
+                        <li class="naw-item" data-to="about">Услуги</li>
+                        <li class="naw-item" data-to="clients">Интернет</li>
+                        <li class="naw-item" data-to="contact">Контакты</li>
+                    </ul>
+                </nav>
+            </div>
+            <div class="three contacts small-three">
+                <p class="phone">+7 777 777 77 77 </p>
+                <a href="#" class="call border-btn">Заказать звонок</a>
+            </div>
+            <div class="three nav sm">
+                <nav>
+                    <ul>
+                        <li class="naw-item" data-to="about">Услуги</li>
+                        <li class="naw-item" data-to="clients">Интернет</li>
+                        <li class="naw-item" data-to="contact">Контакты</li>
+                    </ul>
+                </nav>
+            </div>
+        </div>
+    </div>
+    <div class="slider">
+        <div class="container">
+            <div class="slide-item active slide-menu">
+                <h1>Больше чем просто провайдер </h1>
+                <h2>Подключение беспроводного Интернета <br> для бизнеса и дома</h2>
+            </div>
+        </div>
+        <img src="img/stripes.png" alt="#" class="stripe-block">
+    </div>
+</header>
+<section class="wifi container" id="about">
+    <h2 class="common-h2"><span class="em">INTOUCH wifi</span> - подключение беспроводного Интернета
+        в доме, офисе, общественных местах</h2>
+    <article class="chess-block">
+        <div class="row top">
+            <div class="chess-item"><p>Организация wifi сетей, корпоративный wifi </p></div>
+            <div class="chess-item"><p>Гостевой wifi, подключение приветственной wifi страницы </p></div>
+            <div class="chess-item"><p>Wifi маркетинг, реклама, анкеты, опросы </p></div>
+        </div>
+        <div class="row bottom">
+            <div class="chess-item"><p>Wifi телевидение, более 50 бесплатных каналов </p></div>
+            <div class="chess-item"><p>Wifi авторизация пользователей, выполнение постановления Правительства РФ</p>
+            </div>
+        </div>
+    </article>
+</section>
+<section class=" accept">
+    <div class="container">
+        <h1>Где можно применить</h1>
+        <article class="ways">
+            <div class="row top-9">
+                <div class="nine-item">
+                    <img src="img/v-4.png" alt="">
+                    <p class="nine-p">Офисы </p>
+                </div>
+                <div class="nine-item">
+                    <img src="img/v-1.png" alt="">
+                    <p class="nine-p">Дома</p>
+                </div>
+                <div class="nine-item">
+                    <img src="img/v-7.png" alt="">
+                    <p class="nine-p">Рестораны </p>
+                </div>
+                <div class="nine-item">
+                    <img src="img/v-8.png" alt="">
+                    <p class="nine-p">Клиники</p>
+                </div>
+                <div class="nine-item">
+                    <img src="img/v-2.png" alt="">
+                    <p class="nine-p">Отели</p>
+                </div>
+            </div>
+            <div class="row bottom-9">
+                <div class="nine-item">
+                    <div class="img">
+                        <img src="img/v-1.png" alt="">
+                        <p class="nine-p">АЗС</p>
+                    </div>
+                </div>
+                <div class="nine-item">
+                    <div class="img">
+                        <img src="img/v-6.png" alt="">
+                        <p class="nine-p">Автосалоны</p>
+                    </div>
+                </div>
+                <div class="nine-item">
+                    <div class="img">
+                        <img src="img/v-5.png" alt="">
+                        <p class="nine-p">Кинотеатры</p>
+                    </div>
+                </div>
+                <div class="nine-item">
+                    <div class="img">
+                        <img src="img/v-9.png" alt="">
+                        <p class="nine-p">Торговые центры</p>
+                    </div>
+                </div>
+            </div>
+        </article>
+        <h2 class="common-h2">Мы готовы подключить Вас к интернету даже в чистом поле
+            и дать вам комфортные условия пользования</h2>
+        <a href="#" class="border-btn rev call">Заказать звонок</a>
+    </div>
+</section>
+<section class="async" id="clients">
+    <div class="container h1-rev">
+        <h1 class="rev">интернет <span class="em">INTOUCH</span></h1>
+    </div>
+    <div class=" row top">
+        <div class="container">
+            <div class="text-img">
+                <div class="head">
+                    Интернет для бизнеса
+                </div>
+                <div class="content">
+                    <p><b>Быстрый интернет</b></p>
+                    <p>Скорость до 50 Мбит/с, без ограничения по трафику, работает в любой точке России.</p>
+                    <p>Мы сделаем все сами, Вам остается только пользоваться быстрым интернетом</p>
+                    <p>Подключим сервисы:</p>
+                    <ul class="serv-type">
+                        <li>гостевой WIFI</li>
+                        <li>wifi маркетинг</li>
+                        <li>wifi телевидение</li>
+                        <li>авторизация пользователей</li>
+                    </ul>
+                </div>
+            </div>
+            <img src="img/g1.png" alt="#">
+        </div>
+    </div>
+    <div class=" row bottom">
+        <div class="container">
+            <div class="text-img">
+                <div class="head">
+                    Интернет для дома
+                </div>
+                <div class="content lh">
+                    <p>Интернет за городом может быть необходим по многим причинам. Он удобен и для работы, и для
+                        развлечений, и просто для того, чтобы поддерживать связь с родными и близкими.</p>
+                    <p>Безлимитный интернет за городом позволяет не только наслаждаться фильмами, играми и музыкой, но и
+                        заказывать необходимые вещи, совершать оплату различных услуг и мгновенно получать всю нужную
+                        информацию.</p>
+
+
+                </div>
+            </div>
+            <img src="img/g2.png" alt="#">
+        </div>
+    </div>
+</section>
+<section class="advs ">
+    <div class="container">
+        <h1>Приемущества <span class="em">INTOUCH</span></h1>
+        <article class="chess-block">
+            <div class="row top">
+                <div class="chess-item">
+                    <p class="h2">Гарантия 1 год</p>
+                    <p>Наша компания предоставляет гарантию сроком на один год</p>
+                </div>
+                <div class="chess-item">
+                    <p class="h2">Выезд специалиста</p>
+                    <p>Выезд нашего специалиста в течении суток в любом регионе России</p>
+                </div>
+                <div class="chess-item">
+                    <p class="h2">Комплекс услуг</p>
+                    <p>Интерент, телевидиние, видеонаблюдение</p>
+                </div>
+            </div>
+            <div class="row bottom">
+                <div class="chess-item">
+                    <p class="h2">Оборудование и монтаж</p>
+                    <p>Готовое оборудование, монтаж, настройка</p></div>
+                <div class="chess-item">
+                    <p class="h2">Техническая поддержка</p>
+                    <p>Мы осуществляем техническую и сервисную поддержку наших клиентов в формате 24/7</p></div>
+            </div>
+        </article>
+    </div>
+</section>
+<section class="clients ">
+    <div class="container h1-rev">
+        <h1 class="rev">Клиенты <span class="em">INTOUCH</span></h1>
+    </div>
+    <div class="container icons">
+        <div class="icons-item"><img src="img/liko.png" alt=""></div>
+        <div class="icons-item"><img src="img/le-click.png" alt=""></div>
+        <div class="icons-item"><img src="img/megafon.png" alt=""></div>
+        <div class="icons-item"><img src="img/biline.jpg" alt=""></div>
+    </div>
+
+</section>
+<footer id="contact">
+    <div class="container">
+        <div class="left">
+            <div class="center">
+                <p class="city">
+                    Россия, Москва
+                </p>
+                <p class="addr">
+                    г. Москва, ул.Улица 7, бизнес центр ”Бизнес”
+                </p>
+                <p class="mail">
+                    Email: email@email.ru
+                </p>
+            </div>
+        </div>
+        <div class="right">
+            <div class="center">
+                <div class="phone">Контактный телефон:</div>
+                <div class="num">+7 777 7777 77 77</div>
+                <form id="form" class="form" action="handler.php" method="Post" enctype="multipart/form-data">
+                    <input class="field name-f" name="name" id="name" type="text" placeholder="Ваше имя *">
+                    <input class="field num-f" name="phone" id="num" type="text" placeholder="Номер телефона *">
+                    <input class="field mail-f" name="email" id="mail" type="text" placeholder="Почта *">
+                    <input type="hidden" name="MAX_FILE_SIZE" value="5242880">
+                    <input type="file" name="sendFile">
+                    <input type="hidden" name="formType" value="request">
+                    <input class="field sub" type="submit" value="Отправить Заявку">
+                </form>
+            </div>
+        </div>
+        <div class="sign">
+            © 2016 Все права защищены. ООО “Название сервис”
+        </div>
+    </div>
+</footer>
+
+<article class="callback popup">
+    <span class="close" id="callbackCloseBtn"><i class="fa fa-times" aria-hidden="true"></i></span>
+
+    <form action="handler.php" method="POST" id="form-popup" class="form">
+        <h3 class="title"> Заказать звонок </h3>
+        <p class="nameText">Введите имя</p>
+        <input type="text" class="textArea name-pop" name="name" id="name-pop"/>
+        <p class="nameText">Введите телефон </p>
+        <input type="text" class="textArea number-pop" name="phone" id="number-pop"/>
+        <input type="hidden" name="formType" value="callback">
+        <input type="submit" value="Заказать звонок" class="submit" id="submit"/>
+    </form>
+</article>
+
+<article class="letter popup">
+    <span class="close" id="callbackCloseBtn"><i class="fa fa-times" aria-hidden="true"></i></span>
+    <h3 class="title"></h3>
+</article>
+<script
+        src="http://code.jquery.com/jquery-3.2.1.min.js"
+        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+        crossorigin="anonymous"></script>
+<script src='js/common.js'></script>
+
+</body>
+</html>
+

js/common.js

@@ -0,0 +1,27 @@
+$(document).ready(function () {
+
+    $(".call").click(function (e) {
+        e.preventDefault();
+        $(".callback.popup").css("display", "block");
+    });
+    $(".close").click(function (e) {
+        e.preventDefault();
+        $(".popup").css("display", "none");
+    });
+
+    var scroll = function (e) {
+        var id = "#" + $(e.target).attr("data-to");
+        var mnuH = $('header .top-mnu').height();
+        var top = $(id).offset().top - mnuH;
+        $('body,html').animate({scrollTop: top}, 1500);
+    };
+
+    var increase = function (e) {
+        $(this).find('.hover-img').toggleClass("big");
+    };
+
+    $('.top-mnu nav').on('click', scroll);
+    $('#contact-us').on('click', scroll);
+    $("#up").on('click', scroll);
+    $('.hover-block').on('mouseenter mouseleave', increase);
+});

js/sliders.js

@@ -0,0 +1,93 @@
+var sliderMain = document.getElementsByClassName("slider")[0];
+var divs = sliderMain.getElementsByClassName("slide-menu");
+var next = document.getElementById("next");
+var prev = document.getElementById("prev");
+var timer = setInterval(slider, 3000);
+var flagForT = true;
+
+function startTime() {
+    timer = setInterval(slider, 3000);
+    flagForT = true
+}
+function pauseTimer() {
+    if (flagForT) {
+        clearInterval(timer);
+        setTimeout(startTime, 5000);
+        flagForT = false;
+    }
+}
+
+next.onclick = function () {
+    pauseTimer();
+    return slider();
+};
+
+prev.onclick = function () {
+    pauseTimer();
+    return slider(true);
+};
+// default direction to right. If you want to change on left you can write true in variable "changeOfDirection"
+function slider(changeOfDirection) {
+    var active = sliderMain.getElementsByClassName("active");
+    var nextElem;
+    if (changeOfDirection) {
+        nextElem = active[0].previousElementSibling;
+    } else {
+        nextElem = active[0].nextElementSibling;
+    }
+    var indexOf = [].indexOf;
+
+    if (nextElem == null || !nextElem.classList.contains("slide-menu")) {
+        nextElem = divs[divs.length - 1 - indexOf.call(divs, active[0])];
+    }
+    active[0].classList.remove("active");
+    nextElem.classList.add("active");
+}
+
+/*Second slider for partner*/
+var sliderPartner = document.getElementsByClassName("multtiple-slider")[0];
+var divsPartner = sliderPartner.getElementsByClassName("slide-item");
+var timer2 = setInterval(nextPartner, 3000);
+
+function nextPartner() {
+    var activElements = sliderPartner.getElementsByClassName("acitve");
+    var lastElemen = divsPartner[divsPartner.length - 1];
+
+    activElements[activElements.length - 1].classList.remove("acitve");
+    sliderPartner.removeChild(lastElemen);
+    lastElemen.classList.add("acitve");
+    sliderPartner.insertBefore(lastElemen, activElements[0]);
+}
+
+var activDiv = document.getElementsByClassName("comment")[0];
+var divs_target = document.getElementsByClassName("comment");
+
+function createBtn(i) {
+    var btn = document.createElement("input");
+    btn.setAttribute("type", "button");
+    btn.setAttribute("name", i);
+    btn.className = 'ctrl';
+
+    return btn;
+}
+
+function countDiv(idNameWhen) {
+    var target_div = document.getElementsByClassName(idNameWhen)[0];
+    for (var i = 0; i < divs_target.length; i++) {
+        var btn = createBtn(i);
+        target_div.appendChild(btn);
+        btn.addEventListener("click", normal);
+
+    }
+
+}
+
+function normal(e) {
+    var div = divs_target[e.target.name];
+    activDiv.classList.remove("active");
+    div.classList.add("active");
+    activDiv = div;
+};
+
+
+countDiv("points-ctrl");

js/team.js

@@ -0,0 +1,28 @@
+var quater = document.getElementsByClassName("team-pic");
+var triangle_team = document.getElementsByClassName("point")[0].getElementsByClassName("quater");
+var team_description = document.getElementsByClassName("single-team");
+
+var active_triangle = triangle_team[0];
+var active_description = team_description[0];
+
+function addListTeam() {
+    for (var i = 0; i < quater.length; i++) {
+        quater[i].setAttribute("data", i);
+        quater[i].addEventListener("click", change_member);
+    }
+}
+
+function change_member(e) {
+    var value = this.getAttribute("data");
+
+    active_triangle.classList.remove("active");
+    active_description.classList.remove("active");
+
+    active_triangle = triangle_team[value];
+    active_description = team_description[value];
+
+    active_triangle.classList.add("active");
+    active_description.classList.add("active");
+}
+
+addListTeam();

lib/CallbackForm.php

@@ -0,0 +1,41 @@
+<?php
+
+/**
+ * Created by PhpStorm.
+ * User: artem
+ * Date: 18.05.17
+ * Time: 19:30
+ */
+
+require_once('FormAbstract.php');
+
+class CallbackForm extends FormAbstract
+{
+    public $name;
+    public $phone;
+
+    public function __construct(string $name, string $phone)
+    {
+        $this->name = $name;
+        $this->phone = $phone;
+    }
+
+    public function validate(): bool
+    {
+        if (empty($this->name) || strlen($this->name) > 20 || strlen($this->name) < 2) {
+            return false;
+        }
+        if (empty($this->phone) || strlen($this->phone) < 7 || strlen($this->phone) > 15) {
+            return false;
+        }
+
+        return true;
+    }
+
+    public function send()
+    {
+        echo 'Name: ' . $this->name;
+        echo '<br>';
+        echo 'Phone: ' . $this->phone;
+    }
+}

lib/FormAbstract.php

@@ -0,0 +1,15 @@
+<?php
+
+/**
+ * Created by PhpStorm.
+ * User: artem
+ * Date: 18.05.17
+ * Time: 19:28
+ */
+
+abstract class FormAbstract
+{
+    abstract public function validate();
+
+    abstract public function send();
+}

lib/FormFactory.php

@@ -0,0 +1,16 @@
+<?php
+
+class FormFactory
+{
+    public static function getForm($formType, $name, $phone, $email = null, $uploadFile = null):FormAbstract
+    {
+        if ($formType === 'callback'){
+            return new CallbackForm($name, $phone);
+        }
+        elseif($formType === 'EmailForm'){
+            return new CallbackEmail($name, $phone, $email, $uploadFile);
+        } else {
+            return null;
+        }
+    }
+}

lib/FormWithEmail.php

@@ -0,0 +1,55 @@
+<?php
+
+class FormWithEmail extends CallbackForm
+
+{
+    public $email;
+    public $sendFile;
+
+
+    public function __construct(string $name, string $phone, string $email, array $sendFile)
+    {
+        parent::__construct($name, $phone);
+        $this->email = $email;
+        $this->sendFile = $sendFile;
+    }
+
+    public function validate(): bool
+    {
+
+        if (!empty($this->email) && !filter_var($this->email, FILTER_VALIDATE_EMAIL)) {
+            return false;
+        }
+        if ($this->sendFile['size'] > 5242880) {
+            echo "Недопустимо большой размер файла";
+            return false;
+        }
+        if (!empty($this->sendFile['name']) && $this->sendFile['type'] !== 'application/pdf') {
+            echo "Используйте файл с расширением *.pdf";
+            return false;
+        }
+        return parent::validate();
+    }
+
+    public function uploadFiles(): void
+    {
+        $uploadDirectory = dirname(__DIR__, 1) . '/file/';
+        if (!file_exists($uploadDirectory)) {
+            mkdir($uploadDirectory, 0777);
+            $way = $uploadDirectory . time() . $this->sendFile['name'];
+            move_uploaded_file($this->sendFile['tmp_name'], $way);
+        } else {
+            $way = $uploadDirectory . time() . $this->sendFile['name'];
+            move_uploaded_file($this->sendFile['tmp_name'], $way);
+        }
+    }
+
+    public function send()
+    {
+        parent::send();
+        if (!empty($this->email)) {
+            echo '<br>';
+            echo 'Email: ' . $this->email;
+        }
+    }
+}