diff --git a/Assignment_js/Apis.js b/Assignment_js/Apis.js
new file mode 100644
index 00000000..2534cb1d
--- /dev/null
+++ b/Assignment_js/Apis.js
@@ -0,0 +1,62 @@
+
+//callback function
+
+// Define the dummy API endpoint
+const apiEndpoint = "https://jsonplaceholder.typicode.com/users";
+
+// Function to make the API call
+function fetchData(callback) {
+    fetch(apiEndpoint)
+        .then(response => response.json())
+        .then(data => {
+            // Call the callback function with the data
+            callback(null, data);
+        })
+        .catch(error => {
+            // Call the callback function with the error
+            callback(error, null);
+        });
+}
+
+// Define a callback function to handle the response
+function handleResponse(error, data) {
+    if (error) {
+        console.error("Error fetching data:", error);
+    } else {
+        console.log("Data fetched successfully:", data);
+    }
+}
+
+// Make the API call with the callback function
+fetchData(handleResponse);
+
+//promises
+function fetchApi(){
+    let url = 'https://jsonplaceholder.typicode.com/todos/1'
+    console.log("fetching api 1.....")
+    return new Promise((resolve)=>{
+        setTimeout(() => {
+            fetch('https://jsonplaceholder.typicode.com/todos/1')
+            .then((url)=>url.json())
+            .then((url)=>console.log(url.json))
+        resolve("resolve successfull...")
+        resolve();
+        }, 3000);
+    })
+}
+
+function fetchApi1(){
+    let url = 'https://jsonplaceholder.typicode.com/todos/2'
+    console.log("fetching api 2.....")
+    return new Promise((resolve)=>{
+        setTimeout(() => {
+            fetch('https://jsonplaceholder.typicode.com/todos/2')
+            .then((url)=>url.json())
+            .then((url)=>console.log(url.json))
+        resolve("resolve successfull...")
+        resolve();
+        }, 3000);
+    })
+}
+
+
diff --git a/Assignment_js/arrays.js b/Assignment_js/arrays.js
new file mode 100644
index 00000000..22fa7a16
--- /dev/null
+++ b/Assignment_js/arrays.js
@@ -0,0 +1,60 @@
+//First array in we can change values and add attributes
+var arr1 = [22,
+    true,
+    "Hello",
+    obj={
+        name : "Kashan",age: 34,cgpa:3.5,
+}]
+console.log(arr1);
+// Add a new property to the object inside the array
+arr1[3].grade = 'A';
+console.log(arr1);
+//change value of name
+arr1[3].name = "ALI"
+console.log(arr1)
+arr1.push("New value")
+console.log(arr1)
+
+
+//Array second in which we are not able to add new value and cannot modify existing value
+"use strict";
+let arr2 = [22,
+    true,
+    "Hello",
+    {
+        name : "Kashan",
+        age: 34,
+        cgpa:3.5,
+    }];
+
+Object.freeze(arr2[3]);
+Object.freeze(arr2);
+// arr1[3].grade = 'B'; //cannot modify
+// arr1[3].name = "Muhammad" // cannot modify
+console.log(arr2);
+
+//Third arry in which we are able to add new attributes but cant modify the existing values
+
+const arr3 = [
+    22,
+    true,
+    "Hello",
+    {
+        name: "Kashan",
+        age: 34,
+        cgpa: 3.5,
+    }
+];
+Object.defineProperty({},"name",{writable: false})
+Object.defineProperty({},"age",{writable: false})
+Object.defineProperty({},"cgpa",{writable: false})
+
+arr3.push('Hello world'); //Adding new element in an array
+console.log(arr3);
+
+arr3[3].grade = "A"; //Adding new attributes in object inside array
+console.log(arr3)
+
+// arr3[3].age = 45; //This will throw an error we cannot modify existing value 
+// console.log(arr3);
+
diff --git a/Assignment_js/functions.js b/Assignment_js/functions.js
new file mode 100644
index 00000000..d00f3316
--- /dev/null
+++ b/Assignment_js/functions.js
@@ -0,0 +1,47 @@
+//Different type function
+
+function fun1 (x) {
+    for(let i = 0; i<=x; i++){
+        console.log(i);
+    }
+}
+fun1(5); //function call
+
+//errow function
+
+const fun2 = ((y)=>{
+    for(let j = 0; j<=y; j++){
+        if(j%2==0){
+            console.log("Even numbers are : ","\t",j);
+        }
+    }
+})
+fun2(10); //function call
+
+//function which return some value
+
+const fun3 = ((a,b)=>{
+    return(a+b);
+})
+let sum = fun3(3,4);
+console.log("Sum : ",sum)
+
+//forEach function for array 
+
+let arr = [1,2,3,4,5];
+arr.forEach((val)=>{
+    console.log(val);
+});
+
+//callBack function
+
+function calSum(r, s) {
+    return r + s;
+}
+
+function display(sum) {
+    console.log(sum);
+}
+
+let su = calSum(2, 3);
+display(sum);
\ No newline at end of file
diff --git a/Assignment_js/methd.js b/Assignment_js/methd.js
new file mode 100644
index 00000000..1b418208
--- /dev/null
+++ b/Assignment_js/methd.js
@@ -0,0 +1,43 @@
+//Object 
+let myObj = {
+    name: "Muhammad Nadeem",
+    age: 22,
+    isFollow: true,
+    percentage: 75.5,
+    newObj: {
+        remarks: true,
+        cgpa: 3.5,
+        institution: "Netbots"
+    }
+};
+
+console.log(myObj);
+
+let arr = Object.values(myObj);
+console.log(arr);
+
+//try to pront dataType of boolean
+console.log(typeof(myObj.isFollow));
+//store a boolean value in a variable and print typeOf variable that is string
+let follow = "true";
+console.log(typeof(follow));
+//Try to onvert all values in uppercase
+console.log(myObj.name.toUpperCase());
+console.log(myObj.newObj.institution.toUpperCase());//object inside object 
+//try to print all boolean value in an object
+function collectBooleans(obj) {
+    let booleans = [];
+    for (let key in obj) {
+        if (typeof obj[key] === 'boolean') {
+            booleans.push(obj[key]);
+        } else if (typeof obj[key] === 'object' && obj[key] !== null) {
+            booleans = booleans.concat(collectBooleans(obj[key]));
+        }
+    }
+    return booleans;
+}
+
+let booleanValues = collectBooleans(myObj);
+console.log(booleanValues);
+
+
diff --git a/Assignment_js/objct.js b/Assignment_js/objct.js
new file mode 100644
index 00000000..097d3266
--- /dev/null
+++ b/Assignment_js/objct.js
@@ -0,0 +1,67 @@
+//This object allow to add new attributes and modification of values
+var student = {
+    name : "Ali",
+    age : 22,
+    remarks : true,
+    arr : [1,2,3,4],
+    obj : {a : 6, b : 7, c : 8, d : 9},
+}
+console.log(student);
+
+student.newKey = "New key added in objct";
+console.log(student);
+
+student.age = 23 //modify age value
+console.log(student);
+
+ student.arr.push(5,6); //add new value in array 
+ console.log(student);
+
+ student.obj.e = 88;   //add new key value pair in object
+ console.log(student);
+
+
+ //object two 
+
+ //this object is freez we cannot modify the values and cannot add new attributes 
+
+ "use strict";
+ let obj1 = Object.freeze({
+    name : "Nadeem",
+    age : 22,
+    remarks : true,
+    arr : [1,2,3,4],
+    obj : {a : 6, b : 7, c : 8, d : 9},
+ })
+
+obj1.newKey = 'New value';//Here this key value is not added to the obj1 because the obj1 is freez and immutable
+ console.log(obj1)
+
+
+ //object 3
+
+ //This code allow to add new attributes in the object but cannot allow to modify the existing value
+
+ const student77 = {
+    name : "sajid",
+    age : 55,
+    arr : ['a','b','c','d'],
+    objct : {k:33,r:44,t:77}
+ }
+ Object.defineProperty(student77, "name", {writable: false});
+ Object.defineProperty(student77, "age", {writable: false});
+ Object.defineProperty(student77, "arr", {writable: false});
+ Object.defineProperty(student77, "objct", {writable: false});
+
+ student77.newKey = "newValue"; //adding new value 
+  console.log(student77);
+
+ student77.name = "ali"; //cannot modify value 
+ console.log(student77);
+
+
+
+
+
+
+    
diff --git a/Assignment_js/operator.js b/Assignment_js/operator.js
new file mode 100644
index 00000000..f11b105c
--- /dev/null
+++ b/Assignment_js/operator.js
@@ -0,0 +1,37 @@
+//operator in js
+
+//pre operator
+
+let num = 5;
+console.log(num);
+++num;
+console.log(++num); //increment before exicution
+console.log(num++);//increment after exicution exicution
+console.log(num)
+
+console.log("**************************************************");
+
+//post operator in js
+let num2 = 11;
+num2++;
+console.log(num2++) //increment after exicution
+console.log(num2);
+console.log(++num2); //increment before exicution
+console.log("**************************************************");
+
+//Double equal only check value in this case same is print
+let value = 10;
+let str = "10";
+if(value==str){
+    console.log("same");
+}else{
+    console.log("Different");
+}
+//Triple equal check value as well as datatype in this case different is print
+let val = 10;
+let strng = "10";
+if(value===str){
+    console.log("same");
+}else{
+    console.log("Different");
+}
\ No newline at end of file
diff --git a/Assignment_js/rest_spread.js b/Assignment_js/rest_spread.js
new file mode 100644
index 00000000..111c5cbb
--- /dev/null
+++ b/Assignment_js/rest_spread.js
@@ -0,0 +1,60 @@
+//Rest operator example 1
+
+function myFunc(...values){
+    console.log(values);
+}
+myFunc(12,12,12);
+
+//Example 2
+
+function func2(...num) {
+    let sum = 0; // Initialize sum outside the loop
+    
+    for (let i = 0; i < num.length; i++) {
+        sum = sum + num[i]; // Update sum with each element
+    }
+    
+    console.log(sum);
+}
+
+func2(1, 2, 3, 4, 5);
+
+//Spread operator
+
+let arr1 = [1,2,3];
+let arr2 = [4,5,6];
+let arr3 = [...arr1,...arr2];
+console.log(...arr3);
+
+//Example 2
+
+//spread operator on object
+
+let obj1 = {a:1,b:2,c:3};
+let obj2 = {d:4,e:5,f:6};
+let obj3 = {...obj1,...obj2};
+console.log(obj3);
+
+
+//Destructring 
+
+let arr = [1,2,3,4,5];
+let [a,b,...rest] = arr;
+console.log(a);
+console.log(b);
+console.log(rest);
+console.log(...arr);
+
+//example 2
+
+let obj = { name: "Nadeem", age: 22, hobbies: ["cricket", "football"] };
+let { name, age, hobbies } = obj;
+console.log(name);
+console.log(age);
+console.log(...hobbies);
+
+//example 3
+
+let arr6 = [1,5,7,9,5];
+let [x,y,...val] = arr6;
+console.log(x,y,val);
\ No newline at end of file
diff --git a/Assignment_js/variables.js b/Assignment_js/variables.js
new file mode 100644
index 00000000..959d019f
--- /dev/null
+++ b/Assignment_js/variables.js
@@ -0,0 +1,32 @@
+//var variable 
+var name = "Nadeem";
+console.log(name);
+
+//var variable can be reinitialize and can be modify
+var name = "Muhammad";
+console.log(name);
+
+//let variable 
+
+let num ;
+num = 22
+console.log(num);
+
+//let variable can be modify but cannot reinitialize
+
+num = 34
+console.log(num);
+
+//this line throw an error because we trying to reinitialize it
+// let num = 33
+// console.log(num)
+
+//const variable
+
+const value = 11;
+console.log(value);
+
+//const value cannot be reinitialize and cannot modify 
+
+// const value = 12     //throw an error
+// console.log(value)
\ No newline at end of file
diff --git a/DumyFile.js b/DumyFile.js
new file mode 100644
index 00000000..2d7fadba
--- /dev/null
+++ b/DumyFile.js
@@ -0,0 +1,103 @@
+function fetchApi1(){
+    let url = 'https://jsonplaceholder.typicode.com/todos/2'
+    console.log("fetching api 2.....")
+    return new Promise((resolve)=>{
+        setTimeout(() => {
+            fetch('https://jsonplaceholder.typicode.com/todos/2')
+            .then((url)=>url.json())
+            .then((url)=>console.log(url.json))
+        resolve("resolve successfull...")
+        resolve();
+        }, 3000);
+    })
+}
+
+async function All(){
+    await fetchApi();
+    await fetchApi1();
+}
+
+//First array in we can change values and add attributes
+var arr1 = [22,
+    true,
+    "Hello",
+    obj={
+        name : "Kashan",age: 34,cgpa:3.5,
+}]
+console.log(arr1);
+// Add a new property to the object inside the array
+arr1[3].grade = 'A';
+console.log(arr1);
+//change value of name
+arr1[3].name = "ALI"
+console.log(arr1)
+arr1.push("New value")
+console.log(arr1)
+
+//Example 2
+
+function func2(...num) {
+    let sum = 0; // Initialize sum outside the loop
+    
+    for (let i = 0; i < num.length; i++) {
+        sum = sum + num[i]; // Update sum with each element
+    }
+    
+    console.log(sum);
+}
+
+func2(1, 2, 3, 4, 5);
+
+//function which print even number
+console.log("***************************************");
+
+function fun2 (y){
+    for(let i=0;i<=y;i++){
+        if(i%2==0){
+            console.log(i);
+        }
+    }
+   
+}
+fun2(20);
+
+
+//Destructring 
+
+let arr = [1,2,3,4,5];
+let [a,b,...rest] = arr;
+console.log(a);
+console.log(b);
+console.log(rest);
+console.log(...arr);
+
+let student = {//This is an object variable which store key value pair.
+    name : "Muhammad Nadeem",
+    fatherName : "AbluHassan",
+    age : 22,
+    city : "skardu",
+    institution : "NetBots",
+}
+console.log("Hello my name is " + student.name + " my father Name is " + student.fatherName + " and i am " + student.age + " year old. ");
+
+let num = 5;
+console.log(num);
+++num;
+console.log(++num); //increment before exicution
+console.log(num++);//increment after exicution exicution
+console.log(num)
+
+console.log("**************************************************");
+//var variable can be reinitialize and can be modify
+var name = "Muhammad";
+console.log(name);
+//errow function
+
+const fun2 = ((y)=>{
+    for(let j = 0; j<=y; j++){
+        if(j%2==0){
+            console.log("Even numbers are : ","\t",j);
+        }
+    }
+})
+fun2(10); //function call
\ No newline at end of file
diff --git a/array-method.js b/array-method.js
new file mode 100644
index 00000000..322bd59e
--- /dev/null
+++ b/array-method.js
@@ -0,0 +1,86 @@
+//Array Methods
+//1-Array length
+const fruits = ["Banana", "Orange", "Apple", "Mango", "kiwi"];
+let size = fruits.length;
+console.log(size);
+
+//toString it convert the array to string
+let arr2 = ["Banana", "Orange", "Apple", "Mango", "kiwi"];
+console.log(arr2.toString());
+
+//Array at() this is used to print the array value at any index
+let arr3  = ["Banana", "Orange", "Apple", "Mango", "kiwi"];
+console.log(arr3.at(3));
+
+//Array join method is used to join array element
+
+let arr4 = ["Banana", "Orange"];
+let arr5 = ["Mango", "kiwi"];
+let arr6 = arr4.join(arr5);
+console.log(arr6);
+
+//Array pop is used to delete last element in array
+
+let arr7 = ["Banana", "Orange", "Apple", "Mango", "kiwi"];
+console.log(arr7);
+let D = arr7.pop();
+console.log("pop element from arrar : ",D);
+
+//Array push is used to add element in last of array
+
+let arr8 = ["Banana", "Orange", "Apple", "Mango", "kiwi"];
+let p = arr8.push("charee");
+console.log("push new element : ",p);
+console.log(arr8);
+
+//Array shift method is used to delete first element of array
+
+let arr9 = ["Orange", "Apple", "Mango", "kiwi"];
+console.log(arr9);
+let s = arr9.shift();
+console.log("shift element : ",s);
+
+//Array unshift is used to add element at starting of array
+
+let arr10 = ["Orange", "Apple", "Mango", "kiwi"];
+let uns = arr10.unshift("Lemon");
+console.log(arr10);
+
+//Array length  property provides an easy way to append a new element to an array
+
+let arr11 = ["Orange", "Apple", "Mango", "kiwi"];
+arr11[arr11.length] = "Nimboo";
+console.log(arr11);
+
+//Delete methode is used to delete eny element from array using index but it leaves undefined holes in the array
+
+let arr12 = ["Orange", "Apple", "Mango", "kiwi"];
+delete arr12[2];
+console.log(arr12);
+
+//concat method is used to concatenate to arrays
+
+let arr13 = ["Orange", "Apple"];
+let arr14 = ["Mango", "kiwi"];
+let arr15 = arr13.concat(arr14);
+console.log(arr15);
+
+//flat is used to convert a multi-dimensional array into a one-dimensional array.
+
+const myArr = [[1,2],[3,4],[5,6],[5,9]];
+const newArr = myArr.flat();
+console.log(newArr);
+
+//The splice() method adds new items to an array.first we give index no where we wnat to add element and second no is used to delete rest of values if we want no delete we give 0 .
+const fruit = ["Banana", "Orange", "Apple", "Mango"];
+fruit.splice(2, 0, "Lemon", "Kiwi");
+console.log(fruit);
+
+//slice method is used to take pice of an array
+const cruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
+const citrus = cruits.slice(1, 3);
+console.log(citrus);
+
+
+
+
diff --git a/array.js b/array.js
new file mode 100644
index 00000000..37fffc36
--- /dev/null
+++ b/array.js
@@ -0,0 +1,17 @@
+//Array
+let arr = [2,"xyz",3,"Nadeem",
+{
+    //Inside array we create an object
+    name : "Muhammad Nadeem",
+    regNo : "S22BSCS005",
+    institution : "NetBots",
+}
+]
+
+
+console.log(arr);
+
+let arr2 = [1,2,3,4,5]
+arr2.push(9)       //adding new element in aray using pop
+console.log(arr2);
+
diff --git a/destructring.js b/destructring.js
new file mode 100644
index 00000000..283b4a89
--- /dev/null
+++ b/destructring.js
@@ -0,0 +1,36 @@
+
+//Destructring 
+
+let arr = [1,2,3,4,5];
+let [a,b,...rest] = arr;
+console.log(a);
+console.log(b);
+console.log(rest);
+console.log(...arr);
+
+//example 2
+
+let obj = { name: "Nadeem", age: 22, hobbies: ["cricket", "football"] };
+let { name, age, hobbies } = obj;
+console.log(name);
+console.log(age);
+console.log(...hobbies);
+
+//example 3
+
+let arr6 = [1,5,7,9,5];
+let [x,y,...val] = arr6;
+console.log(x,y,val);
+
+
+//example 4
+let arr7 = [3, 4, 5, 6, 7];
+let [f, g, h, ...res] = arr7;
+let firstThree = [f, g, h];
+let [j, e] = res;
+
+console.log(firstThree); // [3, 4, 5]
+console.log(j);          // 6
+console.log(e);
+
+
diff --git a/fetchApi.js b/fetchApi.js
new file mode 100644
index 00000000..d87a72d8
--- /dev/null
+++ b/fetchApi.js
@@ -0,0 +1,118 @@
+
+//callback function
+
+// function FetchingApi1(callback) {
+//     console.log("Fetching data 1 .........");
+//     fetch('https://jsonplaceholder.typicode.com/todos/1')
+//         .then((res)=>res.json())
+//         .then((res)=>console.log(res.json))
+//         setTimeout(() => {
+//             console.log("Data 1 fetched : ")
+//             callback();
+//         }, 2000);
+// }
+
+// function FetchingApi2(callback) {
+//     console.log("Fetching data 2 .........");
+//     fetch('https://jsonplaceholder.typicode.com/todos/2')
+//         .then((res)=>res.json())
+//         .then((res)=>console.log(res.json))
+//         setTimeout(() => {
+//             console.log("Data 2 fetched : ")
+//             callback();
+//         }, 2000);
+// }
+
+// function FetchingApi3(callback) {
+//     console.log("Fetching data 3 .........");
+//     fetch('https://jsonplaceholder.typicode.com/todos/3')
+//         .then((res)=>res.json())
+//         .then((res)=>console.log(res.json))
+//         setTimeout(() => {
+//             console.log("Data 3 fetched : ")
+//             callback();
+//         }, 2000);
+//     }
+
+// FetchingApi1(()=>{
+//     FetchingApi2(()=>{
+//         FetchingApi3(()=>{
+//             console.log("All done")
+//         })
+//     })
+// });
+
+
+// promises function
+
+// function fetchApi(){
+//     let url = 'https://jsonplaceholder.typicode.com/todos/1'
+//     console.log("fetching api 1.....")
+//     return new Promise((resolve)=>{
+//         setTimeout(() => {
+//             fetch('https://jsonplaceholder.typicode.com/todos/1')
+//             .then((url)=>url.json())
+//             .then((url)=>console.log(url.json))
+//         resolve("resolve successfull...")
+//         resolve();
+//         }, 3000);
+//     })
+// }
+
+// function fetchApi1(){
+//     let url = 'https://jsonplaceholder.typicode.com/todos/2'
+//     console.log("fetching api 2.....")
+//     return new Promise((resolve)=>{
+//         setTimeout(() => {
+//             fetch('https://jsonplaceholder.typicode.com/todos/2')
+//             .then((url)=>url.json())
+//             .then((url)=>console.log(url.json))
+//         resolve("resolve successfull...")
+//         resolve();
+//         }, 3000);
+//     })
+// }
+
+// fetchApi(()=>{
+//     fetchApi1(()=>{
+
+//     })
+    
+// })
+
+//async await
+
+
+function fetchApi(){
+    let url = 'https://jsonplaceholder.typicode.com/todos/1'
+    console.log("fetching api 1.....")
+    return new Promise((resolve)=>{
+        setTimeout(() => {
+            fetch('https://jsonplaceholder.typicode.com/todos/1')
+            .then((url)=>url.json())
+            .then((url)=>console.log(url.json))
+        resolve("resolve successfull...")
+        resolve();
+        }, 3000);
+    })
+}
+
+function fetchApi1(){
+    let url = 'https://jsonplaceholder.typicode.com/todos/2'
+    console.log("fetching api 2.....")
+    return new Promise((resolve)=>{
+        setTimeout(() => {
+            fetch('https://jsonplaceholder.typicode.com/todos/2')
+            .then((url)=>url.json())
+            .then((url)=>console.log(url.json))
+        resolve("resolve successfull...")
+        resolve();
+        }, 3000);
+    })
+}
+
+async function All(){
+    await fetchApi();
+    await fetchApi1();
+}
+
diff --git a/first.js b/first.js
new file mode 100644
index 00000000..01a38d3a
--- /dev/null
+++ b/first.js
@@ -0,0 +1,31 @@
+var x = 10;
+
+    console.log(x);//Global scope use in anywhere in the program.
+
+
+let y = 20;
+
+    console.log(y);//local scope use in this block.
+
+
+const z = 30;
+
+    console.log(z);//local scope use in this block.
+
+
+let v;
+console.log(v);
+//This variable is declared but not assigne vale so this variable type is undefined.
+
+let w = null;
+console.log(w);
+//This is a variable which initialized by null or assigned null to it so this variable type is null.
+
+let student = {//This is an object variable which store key value pair.
+    name : "Muhammad Nadeem",
+    fatherName : "AbluHassan",
+    age : 22,
+    city : "skardu",
+    institution : "NetBots",
+}
+console.log("Hello my name is " + student.name + " my father Name is " + student.fatherName + " and i am " + student.age + " year old. ");
\ No newline at end of file
diff --git a/function.js b/function.js
new file mode 100644
index 00000000..4917eab1
--- /dev/null
+++ b/function.js
@@ -0,0 +1,40 @@
+//function which print 0 to any number which you want
+console.log("***************************************");
+function fun (x){
+
+for(let i=0;i<=x;i++){
+    console.log(i);
+}
+
+}
+fun(5);
+
+//function which print even number
+console.log("***************************************");
+
+function fun2 (y){
+    for(let i=0;i<=y;i++){
+        if(i%2==0){
+            console.log(i);
+        }
+    }
+   
+}
+fun2(20);
+
+//function which print odd number
+console.log("***************************************");
+
+function fun3 (z){
+    for(let i=0;i<=z;i++){
+        if(i%2!=0){
+            console.log(i);
+        }
+    }
+   
+}
+fun3(10);
+
+
+
+
diff --git a/images/61LSMvvo+OL._SX3000_.jpg b/images/61LSMvvo+OL._SX3000_.jpg
new file mode 100644
index 00000000..2e8da380
Binary files /dev/null and b/images/61LSMvvo+OL._SX3000_.jpg differ
diff --git a/images/amazon-logo.webp b/images/amazon-logo.webp
new file mode 100644
index 00000000..53ac6255
Binary files /dev/null and b/images/amazon-logo.webp differ
diff --git a/images/download.jfif b/images/download.jfif
new file mode 100644
index 00000000..22abbb08
Binary files /dev/null and b/images/download.jfif differ
diff --git a/images/ima.box1.jpg b/images/ima.box1.jpg
new file mode 100644
index 00000000..a27f0551
Binary files /dev/null and b/images/ima.box1.jpg differ
diff --git a/images/img.box2.jpg b/images/img.box2.jpg
new file mode 100644
index 00000000..4d668264
Binary files /dev/null and b/images/img.box2.jpg differ
diff --git a/images/img.box3.jpg b/images/img.box3.jpg
new file mode 100644
index 00000000..2109ff51
Binary files /dev/null and b/images/img.box3.jpg differ
diff --git a/images/img.box4.jpg b/images/img.box4.jpg
new file mode 100644
index 00000000..cd8592b3
Binary files /dev/null and b/images/img.box4.jpg differ
diff --git a/images/img.box5.jpg b/images/img.box5.jpg
new file mode 100644
index 00000000..904ad55f
Binary files /dev/null and b/images/img.box5.jpg differ
diff --git a/images/img.box6.jpg b/images/img.box6.jpg
new file mode 100644
index 00000000..9a4885fb
Binary files /dev/null and b/images/img.box6.jpg differ
diff --git a/images/img.box7.jpg b/images/img.box7.jpg
new file mode 100644
index 00000000..bbadc9ef
Binary files /dev/null and b/images/img.box7.jpg differ
diff --git a/images/img.box8.jpg b/images/img.box8.jpg
new file mode 100644
index 00000000..fac0c301
Binary files /dev/null and b/images/img.box8.jpg differ
diff --git a/login.html b/login.html
new file mode 100644
index 00000000..829e426d
--- /dev/null
+++ b/login.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>login page</title>
+</head>
+<body>
+    <center>
+        <form style="background-color: black;" height="300px" width="300px">
+            <h2 style="color: blue;">Facebook login page</h2>
+             <input type="text" placeholder="Email or Mobile no">
+             <br><br>
+             <input type="password" placeholder="password" required>
+             <br><br>
+             <button>
+             <a href="#" style="color: blue;">Login</a>
+            </button>
+             <br><br>
+                <a href="">Forget password</a>
+             <br><br>
+             <input type="text" placeholder="Create New Account">
+
+        </form>
+
+           
+
+
+
+    </center>
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/object_objectMethod.js b/object_objectMethod.js
new file mode 100644
index 00000000..2de8d6e3
--- /dev/null
+++ b/object_objectMethod.js
@@ -0,0 +1,38 @@
+
+//Object decleration
+
+let person = {
+    name : "Muhammad Nadeem",
+    age : 22,
+    id : 101,
+    phone_no : "03421713449",
+
+};
+console.log(person);
+
+//Nested Object
+
+ myObj = {
+    name:"John",
+    age:30,
+    myCars: {
+      car1:"Ford",
+      car2:"BMW",
+      car3:"Fiat"
+    }
+  };
+  console.log(myObj);
+  console.log(myObj.myCars);
+
+  //example assign method
+  let Myobj2 = {
+    name: "ali",
+    age: 22,
+    DOB: 2005
+};
+
+let newObject = Object.assign({}, Myobj2);
+console.log(newObject);
+
+ 
+
diff --git a/operators.js b/operators.js
new file mode 100644
index 00000000..a33eb5ef
--- /dev/null
+++ b/operators.js
@@ -0,0 +1,69 @@
+//Arthematic operators
+
+let x = 2;
+let y = 3;
+console.log("x + y = ",x + y);//addition
+console.log("x - y = ",x - y);//subtraction
+console.log("x * y = ",x * y);//multiplication
+console.log("x / y = ",x / y);//division
+console.log("x % y = ",x % y);//modules
+console.log("x++",x++);//post increment
+console.log("--x",--x);//pre increment
+console.log("y--",y--);//post decrement
+console.log("--y",--y);//pre decrement
+console.log((x + y)-(x-y));//grouping
+
+//conditional operators
+// 1- 
+
+let a = 10;
+let b = 20;
+
+if(a==b)
+{
+    console.log("a is equal to b");
+}
+else if(a>b)
+{
+    console.log("a is greater then  b");
+}
+
+else (a!=b)
+{
+    console.log("a is greater then  b");
+}
+
+//logical operators
+//1-logical AND
+let marks = 75;
+if(marks<=100 && marks>=80)
+{
+    console.log("You remarks is grade A+");
+}
+
+else if(marks<=79 && marks>=70)
+{
+    console.log("You remarks is grade A");
+}
+
+else if(marks<=69 && marks>=60)
+{
+    console.log("You remarks is grade B");
+}
+
+else if(marks<=59 && marks>=50)
+{
+    console.log("You remarks is grade B");
+}
+
+else
+{
+    console.log("You are failed:");
+}
+
+
+
+
+
+
+
diff --git a/practice.html b/practice.html
new file mode 100644
index 00000000..cfb79562
--- /dev/null
+++ b/practice.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>practice of html</title>
+    <style>
+        #box1{
+            height: 100px;
+            width: 100px;
+            background-color: blue;
+           border: 2px solid black;
+            text-align: center;
+            margin: 2px;
+            display: block;
+        }
+        .class1{
+            height: 100px;
+            width: 100px;
+            background-color: blue;
+           border: 2px solid black;
+            text-align: center;
+            margin: 2px;
+            display: block;
+
+
+        }
+    </style>
+</head>
+<body>
+    <p>This is a three div which have same id:</p>
+    <div id="box1">box 1</div>
+    <div id="box1">box 2</div>
+    <div id="box1">box 3</div>
+    <br>
+    <p>This is another three div which have same class name:</p>
+    <div class="class1">box 1</div>
+    <div class="class1">box 2</div>
+    <div class="class1">box 3</div>
+    <br>
+ 
+</body>
+</html>
\ No newline at end of file
diff --git a/project.html b/project.html
new file mode 100644
index 00000000..78e157bd
--- /dev/null
+++ b/project.html
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Amazone clone</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header>
+        <div class="nav-bar">
+            <div class="nav-logo border">
+                <div class="logo">
+
+                </div>
+            </div>
+
+            <div class="box2 border">
+            <div class="delever">
+                <p>Delever to</p>
+            </div>
+            <div class="location">
+                <i class="fa fa-map-marker" aria-hidden="true"></i>
+                <p class="para">Pakistan</p>
+            </div>
+        </div>
+
+        <div class="nav-search">
+         <select class="nav-select">
+            <option>All</option>
+         </select>
+         <input type="text" placeholder="Search Amazone" class="search-amazone">
+
+            <div class="nav-icon1">
+            <i class="fa fa-search" aria-hidden="true" class="nav-icon"></i>
+        </div>
+
+        </div>
+
+        
+        <div class="nav-box4 border">
+        <p><span>Banjour,identifiez-vous</span></p>
+        <p class="para2">Compte et listes</p>
+        
+        </div>
+
+        <div class="box5 border">
+           <p><span>Retours</span></p>
+           <p class="para2">et commandes</p>
+        </div>
+
+        <div class="cart border">
+            <div class="cartimg">
+                <i class="fa fa-shopping-cart" aria-hidden="true"></i>
+                <p class="a123">Cart</p>
+            </div>
+        </div>
+            </div>
+
+            <div class="panel">
+                <div class="panel-menu border">
+                    <i class="fa fa-bars" aria-hidden="true"></i>
+                    <p>Toutes</p>
+                </div>
+
+             
+                   <div class="ancher ">  
+                    <div class="ancher-tag ">
+                   <p class="border"><a href="#">Meilleures ventes</a></p>
+                    <p class="border"><a href="#">Amazone Basics</a></p>
+                    <p class="border"><a href="#">Derniers Novueautes</a></p>
+                   <p class="border"> <a href="#">Vantes Flash</a></p>
+                    <p class="border"><a href="#">Idees Cadeaux</a></p>
+                    <p class="border"><a href="#">Vendre sur Amazone</a></p>
+                </div> 
+                </div>
+
+                <div class="deals border">
+                   <a href="#"> Deals Now</a>
+                </div>
+
+            </div>
+    </header>
+
+    <div class="hero">
+            <div class="parag">
+                <p>This is about the delivery things in amazone you can shop now.<a href="#">See more about it.</a></p>
+            </div>
+           
+    </div>
+        
+   <div class="shop-section">
+    <div class="box1 box">
+    <h4>Home Applinces</h4>
+    <div class="back-img" style="background-image: url(images/ima.box1.jpg);"></div>
+    <a href="#" class="angTag">See more</a>
+    </div>
+    <div class="box1 box">
+        <h4>Home Applinces</h4>
+    <div class="back-img" style="background-image: url(images/img.box2.jpg);"></div>
+    <a href="#" class="angTag">See more</a>
+    </div>
+    <div class="box1 box">
+        <h4>Home Applinces</h4>
+    <div class="back-img" style="background-image: url(images/img.box3.jpg);"></div>
+    <a href="#" class="angTag">See more</a>
+    </div>
+    <div class="box1 box">
+        <h4>Home Applinces</h4>
+    <div class="back-img" style="background-image: url(images/img.box4.jpg);"></div>
+    <a href="#" class="angTag">See more</a>
+    </div>
+    <div class="box1 box">
+        <h4>Mobile phone</h4>
+        <div class="back-img" style="background-image: url(images/img.box5.jpg);"></div>
+        <a href="#" class="angTag">See more</a>
+        </div>
+        <div class="box1 box">
+            <h4>Medicine</h4>
+        <div class="back-img" style="background-image: url(images/img.box6.jpg);"></div>
+        <a href="#" class="angTag">See more</a>
+        </div>
+        <div class="box1 box">
+            <h4>LED</h4>
+        <div class="back-img" style="background-image: url(images/img.box7.jpg);"></div>
+        <a href="#" class="angTag">See more</a>
+        </div>
+        <div class="box1 box">
+            <h4>Mobile phone</h4>
+        <div class="back-img" style="background-image: url(images/img.box8.jpg);"></div>
+        <a href="#" class="angTag">See more</a>
+        </div>
+   </div>
+
+   <footer>
+    <div class="back"> <a href="#">Back to top</a></div>
+    <div class="footer">
+        
+        <div class="list1">
+            
+           <div class="item">
+            <ul>
+            <h4>Make friend with amazone</h4>
+            <li>contact us</li>
+            <li>Rate us</li>
+            <li>follow us</li>
+            <li>search us</li>
+        </ul>
+    </div>
+
+    <div class="item">
+        <ul>
+        <h4>Make friend with amazone</h4>
+        <li>contact us</li>
+        <li>Rate us</li>
+        <li>follow us</li>
+        <li>search us</li>
+    </ul>
+</div>
+
+<div class="item">
+    <ul>
+    <h4>Make friend with amazone</h4>
+    <li>contact us</li>
+    <li>Rate us</li>
+    <li>follow us</li>
+    <li>search us</li>
+</ul>
+</div>
+        </div>
+
+    </div>
+    
+
+    
+   </footer>
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/promises.js b/promises.js
new file mode 100644
index 00000000..1af73b26
--- /dev/null
+++ b/promises.js
@@ -0,0 +1,163 @@
+//Promises in javascript
+
+let p = new Promise((resolve, rejected) =>{
+    let a = 1+2;
+    if (a==2){
+        resolve("successfull")
+    }
+    else{
+        rejected("Failed")
+}})
+
+p.then((message) => {
+    console.log("This is then " + message)
+})
+.catch((message) => 
+{
+    console.log("This is catch " + message)
+})
+
+//example 2
+
+async function fun (){
+    await setTimeout(() =>{
+        console.log("Hello one")
+    },3000);
+}
+
+function fun2(){
+    console.log("Hello two")
+}
+
+function fun3(){
+    console.log("Hello three")
+}
+
+fun();
+fun2();
+fun3();
+
+//Example 3
+
+let pro = new Promise((resolve, rejected)=>{
+    setTimeout((func)=>{
+        let Promise = true
+        if(Promise==true)
+        resolve("success")
+        else{
+            rejected("some thing went wrong!")
+        }
+    },3000)
+    
+}) 
+
+pro.then((res)=>{
+    console.log("Then ",res)
+})
+.catch((res)=>{
+    console.log("Catch ",res)
+})
+
+//Example 4
+
+let proms = new Promise((resolve, rejected) =>{
+    console.log("Fetching data 1 .............")
+    setTimeout((func4)=>{
+       resolve( console.log("Data 1"))
+    },4000)
+})
+
+//Example 5
+
+function getData(DataID,NextData){
+    setTimeout(()=>{
+        console.log("Data ",DataID)
+        if(NextData){
+            NextData();
+        }
+    },3000)
+}
+getData(1,()=>{
+    console.log("getting data 2........");
+    getData(2,()=>{
+        console.log("getting data 3........");
+        getData(3)
+    })
+})
+
+// Example 6 
+
+function asyncFun1(){
+    return new Promise((resolve, rejected)=>{
+        setTimeout(()=>{
+            console.log("Data 1 ")
+            resolve("success")
+        },5000)
+    })
+}
+
+function asyncFun2(){
+    return new Promise((resolve, rejected)=>{
+        setTimeout(()=>{
+            console.log("Data 2 ")
+            resolve("success")
+        },5000)
+    })
+}
+
+console.log("Fetching data 1...........");
+let p1 = asyncFun1();
+p1.then((res)=>{
+    console.log("Fetching data 2.........");
+    let p2 = asyncFun2();
+    p2.then((res)=>{
+        console.log(res);
+    })
+})
+
+//Example 7
+
+function GetData(data){
+    return new Promise((resolve, rejected)=>{
+        setTimeout(()=>{
+            console.log("Data ",data);
+            resolve("Success");
+        },3000)
+    })
+}
+console.log("Geting data 1......")
+GetData(5).then((res)=>{
+    console.log(res);
+    console.log("Geting data 2......")
+    GetData(6).then((res)=>{
+        console.log(res);
+        console.log("Geting data 3......")
+        GetData(7).then((res)=>{
+            console.log(res);
+        })
+    })
+})
+
+//Example 8 async await in javaScript
+
+function Dataget(dataA){
+    return new Promise((resolve, rejected)=>{
+        setTimeout(()=>{
+            console.log("Data : ",dataA);
+            resolve("Success");
+        },3000)
+    });
+}
+
+async function getAllData() {
+        console.log("Fetching data 1........");
+        Dataget(1);
+       console.log("Fetching data 2........");
+        Dataget(2);
+       console.log("Fetching data 3........");
+        Dataget(3);  
+    }
+    getAllData();
+
+
+
diff --git a/restOperator.js b/restOperator.js
new file mode 100644
index 00000000..55e4695e
--- /dev/null
+++ b/restOperator.js
@@ -0,0 +1,71 @@
+//Rest operator example 1
+
+function myFunc(...values){
+    console.log(values);
+}
+myFunc(12,12,12);
+
+//Example 2
+
+function func2(...num) {
+    let sum = 0; // Initialize sum outside the loop
+    
+    for (let i = 0; i < num.length; i++) {
+        sum = sum + num[i]; // Update sum with each element
+    }
+    
+    console.log(sum);
+}
+
+func2(1, 2, 3, 4, 5);
+
+//example 3
+
+function func3(...argu) {
+    let sum = 0;
+    for(let i = 0; i < argu.length; i++) {
+        sum = sum + argu[i];
+    }
+
+    let avg = sum / argu.length; // Calculate average by dividing sum by the number of arguments
+    console.log("Total sum ", sum);
+    console.log("Average ", avg);
+}
+
+func3(10, 20, 30, 40, 50);
+
+//example 4
+//Find max number of array
+
+
+function func4(...numbers) {
+    let maximum = numbers[0]; // Initialize maximum with the first number
+
+    for(let i = 1; i < numbers.length; i++) { // Start from the second number
+        if (numbers[i] > maximum) {
+            maximum = numbers[i]; // Update maximum if the current number is greater
+        }
+    }
+
+    console.log("Maximum ", maximum);
+}
+
+func4(1, 2, 3, 4, 5);
+
+//example 5
+//Find min number of array
+
+
+function func5(...numb) {
+    let min = numb[0]; // Initialize minimum with the first number
+
+    for(let i = 1; i < numb.length; i++) { // Start from the second number
+        if (numb[i] < min) {
+            min = numb[i]; // Update minimum if the current number is less
+        }
+    }
+
+    console.log("Maximum ", min);
+}
+
+func5(1, 2, 3, 4, 5);
\ No newline at end of file
diff --git a/spreadOPerator.js b/spreadOPerator.js
new file mode 100644
index 00000000..5fbb19a4
--- /dev/null
+++ b/spreadOPerator.js
@@ -0,0 +1,75 @@
+//spread operator on array
+
+let arr1 = [1,2,3];
+let arr2 = [4,5,6];
+let arr3 = [...arr1,...arr2];
+console.log(...arr3);
+
+
+//spread operator on object
+
+let obj1 = {a:1,b:2,c:3};
+let obj2 = {d:4,e:5,f:6};
+let obj3 = {...obj1,...obj2};
+console.log(obj3);
+
+//convert array into object
+
+let array = [5,6,7,8,9];
+let object = {...array};
+console.log(object);
+
+//object changing
+
+let myobj = {name:"ALI",
+            age:22,
+            remarks:"pass"
+};
+
+console.log({...myobj,name:"john"});
+
+//calculate sum
+
+let arr5 = [2,3,5,6];
+
+function calSum(v1,v2,v3,v4){
+    return v1+v2+v3+v4;
+}
+
+console.log(calSum(...arr5));
+
+// //Task
+
+let arr7 = [3, 4, 5, 6, 7];
+let [f, g, h, ...res] = arr7;
+let firstThree = [f, g, h];
+let [j, e] = res;
+
+console.log(firstThree); // [3, 4, 5]
+console.log(j);          // 6
+console.log(e);          
+
+// //Task
+
+let arr8 = [1,2,3,4,5,6];
+let [ k,l,...m] = arr8;
+let newarr = arr8.slice(0,4);
+console.log("New arr : ",newarr);
+ k = arr8.slice(4,5);
+ l = arr8.slice(5)
+console.log("value of k : ",...k," value of l : ",...l);
+
+
+//Task
+
+let detail = {
+    title: "Mern stack course",
+    auther: "Saqlain shah"
+};
+
+let {title: courseTitle, auther: name} = detail;
+
+console.log(courseTitle);
+console.log(name);
+
+
diff --git a/string-Method.js b/string-Method.js
new file mode 100644
index 00000000..8be9531b
--- /dev/null
+++ b/string-Method.js
@@ -0,0 +1,40 @@
+
+            //string Methods
+
+console.log("*********************************************************************************");
+let name = "Muhammad Nadeem";
+console.log("The length of string is : ",name.length);
+console.log("The string is convert into uppercase : ",name.toUpperCase());
+console.log("The string is convert into uppercase : ",name.toLowerCase());
+
+console.log("*********************************************************************************");
+let myName = "    my name is muhammad nadeem      ";
+console.log(myName.trim());//The trim keyword id used to remove white spaces in strat and last of string 
+
+//slice
+console.log("*********************************************************************************");
+let  institution = "University of Baltistan";
+console.log("Slice is used to cut the string into pieces : ",institution.slice(0,10));
+
+//concat
+console.log("*********************************************************************************");
+let firstName = "Muhammad Nadeem ";
+let lastName = "Momeni";
+console.log("concat is used to concatenate two strings : ",firstName.concat(lastName));
+
+//replace
+console.log("*********************************************************************************");
+let myHobbys = "cricket,football,hockey";
+console.log("The replace keyword is used to replace the string : ",myHobbys.replace("football","voleball"));
+
+console.log("*********************************************************************************");
+
+//charAt
+let myChar = "I love java script";
+console.log("To check which character is at any index : ",myChar.charAt(5));
+
+console.log("*********************************************************************************");
+
+
+
+
diff --git a/style.css b/style.css
index e0ee6198..853eef83 100644
--- a/style.css
+++ b/style.css
@@ -1,6 +1,349 @@
 *{
-    background: none;
+    margin: 0px;
+    padding: 0px;
+    border: border-box;
+    font-family: Arial, Helvetica, sans-serif;
+
 }
-#body{
-    background-image: none;
-}
\ No newline at end of file
+.nav-bar{
+    height: 60px;
+    background-color: #0f1111;
+    display: flex;
+    color: white;
+    align-items: center;
+    justify-content: space-evenly;
+    
+
+
+}
+
+.nav-logo{
+    height: 50px;
+    width: 100px;
+    background-size:contain;
+    align-items: center;
+}
+
+.logo{
+    background-image: url(images/amazon-logo.webp);
+    background-image: cover;
+    height: 46px;
+    width: 73%px;
+    background-size: cover;
+    background-color: #008175;
+    align-items: center;
+    margin:2px;
+    padding: 1px 8px 0px 6px;
+    
+    
+}
+
+.border{
+    border: 1.5px solid transparent;
+}
+.border:hover{
+    border: 1.5px solid white;
+    
+}
+
+/*----------------Box2------------------*/
+.delever p{
+    font-size: 12px;
+    color: #cccccc;
+    margin-left: 15px;
+}
+.location{
+    display: flex;
+    margin-left: 3px;
+}
+.para{
+    font-size: 14px;
+    color: #ffffff;
+}
+
+/*----------------Box3------------------*/
+
+.nav-search{
+    height: 50px;
+    width: 500px;
+    background-color: #0f1111;
+    display: flex;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 5px;
+}
+.nav-select{
+    height: 35px;
+    width: 50px;
+    text-align: center;
+    
+}
+.search-amazone{
+    height: 35px;
+    width: 100%px;
+    text-align: center;
+    border:none;
+
+}
+
+.nav-icon1{
+    height: 35px;
+    width: 35px;
+    display: flex;
+    justify-content:center;
+    align-items: center;
+    color: #0f1111;
+    background-color: rgba(219, 189, 14, 0.877);
+
+
+}
+.nav-icon{
+    height:35px;
+    width: 35px;
+    color: #0f1111;
+    background-color: rgba(219, 189, 14, 0.877);
+   border: 2px solid red;
+   align-items: center;
+   display: flex;
+   text-align: center;
+   
+}
+
+    /*box 4*/
+
+
+    .nav-box4{
+        height: 50px;
+        width: 140px;
+        color: #d6d6d6;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+
+    }
+
+    span{
+        font-size: 12px;
+        color: #ffffff;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+    }
+
+    .para2{
+        font-size: 14px;
+        color: #ffffff;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+    }
+
+
+    /*Box 5 */
+
+    .cart{
+        height: 50px;
+        width: 120px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+    }
+
+    .cartimg{
+        font-size: 1.5rem;
+        display: flex;
+        margin-left: 5px;
+        text-align: center;
+
+    }
+
+    .a123{
+        font-size: 14px;
+        color: #ffffff;
+        text-align: center;
+
+        /* panel */
+
+    }
+    .panel{
+        height: 40px;
+        background-color: #0f2c2c;
+        display: flex;
+        /* justify-content: space-evenly; */
+        
+   
+
+    }
+    .panel-menu{
+        display: flex;
+        height: 40px;
+        width: 80px;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        color: white;
+        margin-left: 3px;
+
+    }
+    .panel-menu p{
+        font-size: 14px;
+        margin-left: 3px;
+        color: white;
+        
+
+
+    }
+
+    /* panel ancher tages */
+    .ancher{
+        height: 30px;
+        color: #ffffff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .ancher-tag{
+        height: 28px;
+       width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .ancher-tag p,a{
+        text-decoration: none;
+        color: white;
+        justify-content: center;
+        align-items: center;  justify-content: center;
+        align-items: center;
+        font-size: 0.75rem;
+        margin-left: 0.5rem;
+    }
+    .deals{
+        display: flex;
+        align-items:right;
+        justify-content: center;
+        align-items: center;
+        color: white;
+        margin-left: 30rem;
+    }
+
+    /* Hero section */
+    .hero{
+        display: flex;
+        height: 400px;
+        background-image: url(images/61LSMvvo+OL._SX3000_.jpg);
+        background-size: cover;
+        display: flex;
+        justify-content: center;
+        align-items: flex-end;
+        
+
+        
+
+    }
+
+   .parag{
+    height: 38px;
+    width: 85%;
+    background-color: white;
+    font-size: 14px;
+    color: black;
+    display: flex;
+    align-items:center;
+    justify-content: center;
+    margin-bottom: 25px;
+    
+   }
+   .parag a{
+   color:  #19c736;
+   font-size: 14px;
+   font-weight: 700;
+
+   }
+
+   /* shop section */
+
+   .shop-section{
+    display: flex;
+    background-color:rgba(224, 95, 21, 0.411);
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+    
+   }
+   .box{
+    height: 300px;
+    width: 23%;
+    background-color: white;
+    margin-top: 12px;
+    margin-bottom: 12px;
+    padding: 20px 0px 15px;
+    
+   }
+   .box h4{
+    margin-left: 10px;
+   }
+   .back-img{
+    height: 265px;
+    background-size: cover;
+    margin-top: 2px;
+    margin-bottom: 10px;
+    display: flex;
+    margin-left: 15px;
+    margin-right: 15px;
+   }
+   .angTag{
+    font-weight: 700;
+    font-size: 14px;
+    color: #19c736;
+    margin-bottom: 8px;
+    
+   }
+
+   /* Footer section */
+
+   .back{
+    height: 40px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color:#1b232c;
+    color: white;
+    font-weight: 700;
+    font-size: 14px;
+    
+   
+   }
+
+   .footer{
+    height: 400px;
+    width: 100%;
+    background-color:#0f1111;
+    display: flex;
+  
+
+   }
+   .list1{
+    height: 250px;
+    color: white;
+    display: flex;
+    padding: 20px;
+
+    
+   }
+   .item{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 30px;
+
+   }
+   
+   /* logo */
+
+  
+
+
diff --git a/variable.js b/variable.js
new file mode 100644
index 00000000..3f913a32
--- /dev/null
+++ b/variable.js
@@ -0,0 +1,18 @@
+let x = 20;
+console.log(x);
+ x = 30;
+ console.log(x);
+
+ const student = {
+    name : "Muhammad Nadeem",
+    regNo : "s22bscs005",
+    semester : "fifth semester",
+    section : "A",
+    session : 2022_2026,
+
+ }
+ console.log(student);
+ console.log(typeof(student.session))
+
+ console.log(student.regNo = 5);
+ console.log(student);