diff --git a/background.png b/background.png new file mode 100644 index 0000000..58c6531 Binary files /dev/null and b/background.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..52b5c48 --- /dev/null +++ b/index.html @@ -0,0 +1,69 @@ + + + + + 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

+
    +
  • Interactive
    • +
  • Mobile
    • +
  • Technology
    • +
+

Clich here to download a PDF of our recent work

+
+
+

News

+ +

Show/Hide news item

+
+
+
+
+
+

More Information

+

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

+
Items marked * are required field
+
+
+
+
+
+
+
+ +
+
+
+
+ + + + \ No newline at end of file diff --git a/main.css b/main.css new file mode 100644 index 0000000..9d2dda0 --- /dev/null +++ b/main.css @@ -0,0 +1,90 @@ + +body{ + background-image: url("background.png"); + background-size: cover; + color: white; + +}; + + +#headLogo{ + font-family: 'Apple-Chancery', cursive; + font-style: italic; + font-size: 60px; +} +.container{ + width: 75%; + margin-left: auto; + margin-right: auto;} + nav .links li{ + display: inline-block; + + } + nav .links li a{ + text-decoration: none; + background: #131313; + color: #fff; + padding: 3px 15px; + font-size: 18px; + box-shadow: 0px -4px 3px #e2d3d3; + } + article .about-cyf{ + color: #e91a57; + margin-bottom: 20px; + font-size: 30px; + } + article .what-we-do{ + margin-bottom: 15px; + + } + article .cyf-devintion{ + line-height: 1.6em; + margin-bottom: 10px; + margin-right: 120px; + } + .our-focus{ + color: #ebdd00; + margin-bottom: 15px; + } + .footer{ + color: #ebdd00; + } + .footer >span{ + font-style: italic; + color: blue; + cursor: pointer; + } + #showHide{ + cursor: pointer; + } + .show-hide-news{ + display: none; + + } + .showHideHeader{ + color: #e91a57; + } + .Itaic.news-second-pragraph{ + position: relative; + left: 60px; +} + + + /*============ Max-wdth 592 =============*/ + @media (max-width : 592px){ + .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: 15px 0 15px 10px; + } + } + diff --git a/main.js b/main.js new file mode 100644 index 0000000..c40189d --- /dev/null +++ b/main.js @@ -0,0 +1,58 @@ +var menus = document.querySelector('#submitForm'); +menus.addEventListener('click', dosomething); + +function dosomething() { + var menu = document.querySelector('#name'); + var menuvalue = menu.value; + if (menuvalue.length == 0) { + alert("please enter a Name"); + return + } + var menu1 = document.querySelector('#email'); + var menu1value = menu1.value; + if (menu1value.indexOf("@") === -1) { + alert("enter an email"); + return + } + var menu2 = document.querySelector('#phonenumber'); + var menu2value = menu2.value; + if (menu2value.length > 11) { + alert("enter a phone number"); + return; + } + alert("Thank you for completing your information."); +} +var request = new XMLHttpRequest(); //creating a request object +var box = document.querySelector('#dynamicnews'); +request.onreadystatechange = function () { + if (request.readyState === 4) { // check if a response was sent back + + if (request.status === 200) { // check if request was successful + var news = JSON.parse(request.responseText); + var output = ''; + for (i = 0; i < news.length; i++) { + output += '

' + news[i].title + '

'; + output += '

' + news[i].summary + '

'; + } + + box.innerHTML = output; + } else { + box.innerHTML = 'An error occurred during your request: ' + request.status + ' ' + request.statusText; + } + } +} +var url = "https://private-e99507-kabaros.apiary-mock.com/news"; //server location +request.open("GET", url); // adding it to the request + +request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //header info +request.send(); + // sending the request + // sending the request + + +const showHide =document.getElementById("showHide"); +const showHideNews=document.getElementsByClassName("show-hide-news"); +showHide.addEventListener("click",function (event) { + box.classList.toggle("show-hide-news"); + event.preventDefault(); +}) \ No newline at end of file