Homework№6.OR-Media.Pre-front

Js/index.js

@@ -0,0 +1,82 @@
+var Triangle = document.getElementById("Triangle");
+var Nav = document.getElementById("Navigation");
+Triangle.onclick = function () {
+    var pos = -180;
+    var id = setInterval(frame, 5);
+    function frame() {
+        if (pos == 0) {
+            clearInterval(id);
+        }
+        else {
+            pos++;
+            Nav.style.marginLeft = pos + "px";
+        }
+    }
+}
+var Close = document.getElementById("Close")
+Close.onclick = function () {
+    var pos = 0;
+    var id = setInterval(frame, 5);
+    function frame() {
+        if (pos == -180) {
+            clearInterval(id);
+        }
+        else {
+            pos--;
+            Nav.style.marginLeft = pos + "px";
+        }
+    }
+}
+document.getElementsByClassName("Button1")[0].onclick = function () {
+    Nav.style.top = "50%";
+}
+document.getElementsByClassName("Button2")[0].onclick = function () {
+    Nav.style.top = "50%";
+}
+document.getElementsByClassName("Button3")[0].onclick = function () {
+    Nav.style.top = "50%";
+}
+document.getElementsByClassName("Button4")[0].onclick = function () {
+    Nav.style.top = "50%";
+}
+document.getElementsByClassName("Button5")[0].onclick = function () {
+    Nav.style.top = "50%";
+}
+document.getElementsByClassName("button-submit")[0].onclick = function () {
+    var userName = document.getElementById("FooterName").value;
+    var email = document.getElementById("FooterEmail").value;
+    var regx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    event.preventDefault();
+    if (!userName) {
+        var labelName = document.getElementsByClassName("ForName")[0];
+        labelName.innerHTML = "Введите имя";
+        labelName.style.color="red";
+        labelName.style.fontSize="20px"
+        return false;
+    }
+    if (userName.length <3) {
+        document.getElementsByClassName("button-submit")[0].className = "button";
+        var labelName = document.getElementsByClassName("ForName")[0];
+        labelName.innerHTML = "Имя слишком короткое";
+        labelName.style.color="red";
+        labelName.style.fontSize="20px"
+        return false;
+    }
+    if (!email) {
+        var labelEmail = document.getElementsByClassName("ForEmail")[0];
+        labelEmail.innerHTML = "Введите email";
+        labelEmail.style.color="red";
+        labelEmail.style.fontSize="20px"
+        return false;
+    }
+    if (!regx.test(email) ) {
+        document.getElementsByClassName("button-submit")[0].className = "button";
+        var labelEmail = document.getElementsByClassName("ForEmail")[0];
+        labelEmail.innerHTML = "Email введён неправильно";
+        labelEmail.style.color="red";
+        labelEmail.style.fontSize="20px"
+        return false;
+    }
+
+    return true;
+}

css/index.css

@@ -0,0 +1,168 @@
+*{
+    margin: 0;
+    border: 0;  
+}
+body{
+    min-width: 1000px;
+}
+.container{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    flex-flow: wrap;
+}
+.ContainerPictureNav{
+    display: flex;
+    justify-content: flex-start;
+    width: 100%;
+    height: 70%;
+    background-color: rgba(255,211,0,0.4);
+}
+.picture{
+    position: absolute;
+    top:80px;
+    left: 50%;
+    margin-left: -150px;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    height: 300px;
+    width: 300px;
+    background-image: url("https://w-dog.ru/wallpapers/1/17/508269182452224.jpg");
+    transition: transform 1s ease;
+}
+.picture:hover{
+    transform: scale(1.5);
+}
+#Navigation{
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    width: 180px;
+    height: 280px;
+    margin-left: -180px;
+}
+#Triangle{
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 50px 0 50px 30px;
+    border-color: transparent transparent transparent rgba(0,0,0,0.3);
+}
+#Triangle:hover{
+    border-color: transparent transparent transparent green;
+}
+.TriangleText{
+    margin-left: -27px;
+    margin-top: -22px;
+}
+.Text{
+    font-size: 13px;
+}
+.Bar{
+    width: 190px;
+    height: 280px;
+    background-color: rgba(0,0,0,0.3);
+}
+.Button1,.Button2,.Button3,.Button4,.Button5{
+    border: 1px solid black;
+    margin-left:10px;
+    margin-right:10px;
+    margin-top: 20px;
+    height: 30px;
+    width: 160px;
+    background-color: rgba(0,0,0,0.5);
+    cursor: pointer;
+}
+.ImgClose{
+    width: 15px;
+    height: 15px;
+}
+.Footer{
+    position: relative;
+    width: 100%;
+    height: 30%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(0,0,0,0.3);
+}
+.FooterInfoTextbox{
+    width: 50%;
+    height: 90%;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    flex-direction: column;
+    background-color: rgba(0,0,0,0.4);
+}
+#FooterName{
+    color: white;
+    font-family: 'Maven Pro', sans-serif;
+    font-size: 12px;
+    padding-left: 14px;
+    width: 99.3%;
+    height: 30px;
+    margin-bottom: 10px;
+    background-color: #454545;
+}
+#FooterEmail{
+    font-family: 'Maven Pro', sans-serif;
+    font-size: 12px;
+    padding-left: 14px;
+    width: 99.3%;
+    height: 30px;
+    margin-bottom: 10px;
+    background-color: #454545;
+    colro:white
+}
+#FooterSubject{
+    color: white;
+    font-family: 'Maven Pro', sans-serif;
+    font-size: 12px;
+    padding-left: 14px;
+    width: 99.3%;
+    height: 30px;
+    margin-bottom: 10px;
+    background-color: #454545;
+}
+
+.button-submit{
+    width: 90px;
+    height: 37px;
+    background-color: black;
+    font-family: 'Maven Pro', sans-serif;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1;
+    color: rgba(215, 252, 245, 255);
+    text-align: center;
+    align-self: flex-end;
+    margin-right:4px;
+    cursor: pointer;
+}
+.button{
+
+    width: 90px;
+    height: 37px;
+    background-color: black;
+    font-family: 'Maven Pro', sans-serif;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1;
+    color: rgba(215, 252, 245, 255);
+    text-align: center;
+    align-self: flex-end;
+    margin-right:4px;
+}
+.button-submit:hover{
+    background-color: rgba(255,211,0,0.4);
+}
+.ForName{
+    display: hide;
+    width: 200px;
+    height: 20px;;
+    margin-bottom: 10px;
+}
+

index.html

@@ -0,0 +1,44 @@
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="./css/index.css">
+</head>
+
+<body>
+    <div class="container">
+        <div class="ContainerPictureNav">
+            <div id="Navigation">
+                <div class="Bar">
+                    <button id="Close"><img class="ImgClose"
+                            src="https://cdn.pixabay.com/photo/2012/04/15/19/12/cross-34976_640.png"></button>
+                    <button class="Button1">Fix</button>
+                    <button class="Button2">Fix</button>
+                    <button class="Button3">Fix</button>
+                    <button class="Button4">Fix</button>
+                    <button class="Button5">Fix</button>
+                </div>
+                <div id="Triangle">
+                    <div class="TriangleText">
+                        <span class="Text">N<br>A<br>V</span>
+                    </div>
+                </div>
+            </div>
+            <div class="picture">
+            </div>
+        </div>
+        <div class="Footer">
+            <form action="" class="FooterInfoTextbox">
+                <span id="message" >Пожалуйста, заполните все поля формы!</span><br>
+                <label class="ForName"></label>  
+                <input type="text" id="FooterName" placeholder="Name">
+                <label class="ForEmail"></label>  
+                <input type="text" id="FooterEmail" placeholder="Email">
+                <!--<input id="FooterSubject" type="number" pattern="[0-9]{11}" placeholder="Phone number ( 80(29) )" >-->
+                <button type="submit" class="button-submit">SEND</button>
+            </form>
+            <script src="./Js/index.js"></script>
+        </div>
+</body>
+
+</html>