From fb29c8f7ba4717840fb5c86f93b5360fa8807a88 Mon Sep 17 00:00:00 2001 From: Slava Biziuykin Date: Wed, 29 May 2019 22:51:15 +0300 Subject: [PATCH] Finish --- Js/index.js | 82 ++++++++++++++++++++++++ README.md | 1 - css/index.css | 168 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 44 +++++++++++++ 4 files changed, 294 insertions(+), 1 deletion(-) create mode 100644 Js/index.js delete mode 100644 README.md create mode 100644 css/index.css create mode 100644 index.html diff --git a/Js/index.js b/Js/index.js new file mode 100644 index 0000000..5c8239c --- /dev/null +++ b/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; +} diff --git a/README.md b/README.md deleted file mode 100644 index 0eb0049..0000000 --- a/README.md +++ /dev/null @@ -1 +0,0 @@ -# ORMEDIA \ No newline at end of file diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..7e8a7cc --- /dev/null +++ b/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; +} + diff --git a/index.html b/index.html new file mode 100644 index 0000000..7917189 --- /dev/null +++ b/index.html @@ -0,0 +1,44 @@ + + + + + + + + +
+
+ +
+
+
+
+
+ Пожалуйста, заполните все поля формы!
+ + + + + + +
+ +
+ + + \ No newline at end of file