diff --git a/Thumbs.db b/Thumbs.db new file mode 100644 index 0000000..6b89a3a Binary files /dev/null and b/Thumbs.db differ diff --git a/creative.png b/creative.png deleted file mode 100644 index b1fe5f6..0000000 Binary files a/creative.png and /dev/null differ diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..8a307e0 --- /dev/null +++ b/css/style.css @@ -0,0 +1,153 @@ +/*============ Start Global ==============*/ +body{ + color: #cccccc; + font-family: 'Philosopher', sans-serif; + text-align: left; +} +*{ + margin: 0; + padding: 0; +} +.container{ + width: 85%; + margin-left: auto; + margin-right: auto; +} +.body-content{ + background-image: url('../images/containtBackground.png'); + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + background-repeat: no-repeat; + padding: 0 1em; + padding-bottom: 2em; +} +/*============ Start Header ==============*/ +.logo{ + padding: .6em 0 .8em 0.5em; + font-size: 4em; +} +nav .links{ + list-style: none; + margin-bottom: 1em; +} +nav .links li{ + display: inline-block; +} +nav .links li a{ + text-decoration: none; + background: #131313; + color: #fff; + padding: .2em 1em; + font-size: 1em; + box-shadow: 0 -0.2em 0.1em #e2d3d3; +} +/*=============== first article ==============*/ +article .about-cyf{ + color: #e91a57; + margin-bottom: .5em; + font-size: 2em; + margin-top: 0.8em; +} +article .what-we-do{ + margin-bottom: 0.6em; +} +article .cyf-devintion{ + line-height: 1.6em; + margin-bottom: 1em; + margin-right: 5em; +} +article .our-focus{ + color: #ebdd00; + margin-bottom: 0.6em; +} +article .links{ + color: #fff; + margin-left: 2em; +} +article .footer{ + color: #ebdd00; + margin: 2em 0; +} +article .footer >a{ + text-decoration: none; + color: #fff; +} +/*================= Second article ======================*/ +article .news{ + margin-bottom: .8em; +} +.hiddenShow{ + display: none; +} + +article #showAndHide{ + cursor: pointer; +} +article .showHideHeader{ + color: #e91a57; + margin-bottom: .5em; +} +article .news-first-pragraph{ + margin-right: 5em; +} +article .news-second-pragraph{ + margin: 1em 0 0 4em; +} +/*================= Start Section ======================*/ +section h1:first-child{ + margin: .8em 0; +} +section .note{ + margin-bottom: 1.5em; +} +section .required-field{ + margin: .8em 0; +} +.error{ + background: #f00; +} +section form input[type='text']{ + padding: .4em .5em; + margin: .5em 0; +} +section form input[type='email']{ + padding: .4em 10em .4em .5em; + margin: .5em 0; +} +section form input[type='number']{ + padding: .4em 10em .4em .5em; + margin: 5px 0; +} +section form button{ + padding: .3em .4em; + margin: .5em 0; +} +/*=============== Media query ================*/ +@media (max-width : 39em){ + nav .links li a{ + padding: .3em .3em; +} +section form input[type='email'], +section form input[type='number']{ + padding: .4em 6em .4em .5em; +} +/*============ Max-wdth 592 =============*/ +} +@media (max-width : 59.2em){ + .container{ + width: 100%; + margin-left: auto; + margin-right: auto; +} +article .cyf-devintion{ + margin-right: 0; +} +article .news-first-pragraph{ + margin-right: 0; +} +article .news-second-pragraph{ + margin: 1.5em 0 1.5em 1em; +} +} \ No newline at end of file diff --git a/images/Thumbs.db b/images/Thumbs.db new file mode 100644 index 0000000..2eb80b5 Binary files /dev/null and b/images/Thumbs.db differ diff --git a/assets/background.png b/images/containtBackground.png similarity index 100% rename from assets/background.png rename to images/containtBackground.png diff --git a/index.html b/index.html new file mode 100644 index 0000000..1e0a203 --- /dev/null +++ b/index.html @@ -0,0 +1,82 @@ + + + + CYF-WDT + + + + + +
+
+

CYF

+ +
+

About CYF

+

What We Do

+

+ CYF is a long established fact that a reader will be distracted by the readable content + of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal + distribution of letters, as opposed to using 'Content here, content here', making it look like readable + English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model + text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions + have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like. +

+

Our focus

+ + +
+ +
+

News

+

>> Show/Hide news item

+
+

+ There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by + injected humour, or randomised words which don't look even slightly believable. If you are going to use + a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle + of text. All the Lorem Ipsum generators on the Internet. +

+

+ "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. + The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed + sometimes by accident, sometimes on purpose (injected humour and the like." +


+
+ +

+
+
+
+

More Information

+

+ For more information about our product and services, please contact us using the for below. +

+
Items market * are required field
+
+
+
+
+
+ +
+
+ + +
+
+
+
+ + + \ No newline at end of file diff --git a/js/customer.js b/js/customer.js new file mode 100644 index 0000000..c3393bd --- /dev/null +++ b/js/customer.js @@ -0,0 +1,73 @@ +/*================= Form validation =================*/ +window.addEventListener('load', function () { + submitForm.addEventListener('click', function (event) { + event.preventDefault(); + const name = document.getElementById('name'); + const email = document.getElementById('email'); + const phoneNumber = document.getElementById('phoneNumber'); + function validName(name) { + return name.value !== ""; + } + function validEmail(email) { + const pattern = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/; + return pattern.test(email.value); + } + function validPhoneNumber(phoneNumber) { + return phoneNumber.value !== "" && phoneNumber.value.length < 12; + } + if (validName(name) && validName(name) && validPhoneNumber(phoneNumber)) { alert('Thank you for register with us')} + + if (validName(name)) { + return true; + name.classList.remove('error'); + }else{ + name.classList.add('error'); + } + + if (validName(name)) { + alert('yeas'); + return true; + email.classList.remove('error'); + }else{ + email.classList.add('error'); + } + + if (validPhoneNumber(phoneNumber)) { + phoneNumber.classList.remove('error'); + return true; + }else{ + phoneNumber.classList.add('error'); + } + + }); +}, false); +/*==================== Start AJAX Get Data===================*/ +window.addEventListener('load', function () { +const resivedNews = document.getElementById('resivedNews'); + +const request = new XMLHttpRequest(); +request.onreadystatechange = function () { + if (request.readyState === 4 ){ + if (request.status === 200) { + const data = JSON.parse(request.responseText); + for (i = 0; i < data.length; i++) { + resivedNews.innerHTML += "

"+data[i].title+"

"+"
"+ "

"+data[i].summary+".


"; + } + }else { + resivedNews.innerHTML = 'An error occurred during your request: '; + } + } + } + const url = "https://private-e99507-kabaros.apiary-mock.com/news"; + request.open("GET", url); + request.send(); + const showAndHide = document.querySelector('#showAndHide'); + showAndHide.addEventListener('click', function (event) { + event.preventDefault(); + resivedNews.classList.toggle('hiddenShow'); + }); +}); + + + +