CodeYourFuture · Nasir89 · Jul 7, 2017 · Jul 14, 2017
diff --git a/background.png b/background.png
diff --git a/index.html b/index.html
@@ -0,0 +1,69 @@
+<!Doctype HTML>
+<html lang="en">
+
+<head>
+    <title>CYF-WDT</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="main.css">
+</head>
+
+<body>
+    <div class="container">
+        <div class="body-content">
+            <h1 class="logo" id="headLogo">CYF</h1>
+            <nav>
+
+                <ul class="links">
+                    <li><a href="#">Menu 1</a></li>
+                    <li><a href="#">Menu 2</a></li>
+                    <li><a href="#">Menue 2</a></li>
+                </ul>
+            </nav>
+            <article>
+                <h1 class="about-cyf">About CYF</h1>
+                <h2 class="what-we-do">What We Do</h2>
+                <p class="cyf-devintion">
+                    <strong>CYF</strong> 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.</p>
+                <h3 class="our-focus">Our focus</h3>
+                <ul class="links">
+                    <li>Interactive</li>
+                    <li>Mobile</li>
+                    <li>Technology</li>
+                </ul>
+                <h4 class="footer"><span> Clich here</span> to download a PDF of our recent work</h4>
+            </article>
+            <article>
+                <h1 class=" news">News </h1>
+
+                <h2 class="showHideHeader"> <span id="showHide">Show/Hide</span> news item</h2>
+                <div class="showNews hideNews">
+                    <div id="dynamicnews" class="show-hide-news"></div>
+                </div>
+            </article>
+            <section>
+                <h1>More Information</h1>
+                <h4 class="note">
+                    For more information about our product and services, please contact us using the for below.
+                </h4>
+                <h5 class="required-field">Items marked * are required field</h5>
+                <form action="index.html" method="post">
+                    <label>Conatct name *</label><br>
+                    <input type="text" id="name" value="" placeholder="Inter Your name"><br>
+                    <label>Conatct email address *</label><br>
+                    <input type="email" id="email" value="" placeholder="Inter Your Email"><br>
+                    <label>Conatct phone number *</label><br>
+                    <input type="number" id="phonenumber" value="" placeholder="phone number"><br>
+                    <button type="submit" id="submitForm">Submit</button>
+                </form>
+            </section>
+        </div>
+    </div>
+    <script type="text/javascript" src="main.js"></script>
+</body>
+
+</html>
diff --git a/main.css 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
@@ -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 += '<h3>' + news[i].title + '</h3>';
+                output += '<p>' + news[i].summary + '</p>';
+            }
+
+            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();
+})