The Entire Site

app.js

@@ -0,0 +1,619 @@
+const slide = [
+	{ img: "back2.jpg" },
+	{ img: "images (2).jpg" },
+	{ img: "images (3).jpg" },
+	{ img: "images (4).jpg" }
+];
+let elem = document.getElementById('slideshow-container')
+let dot = document.getElementById("dot")
+const a = slide.map(value => {
+	return `
+	 <div class="mySlides">
+            <img src="${value.img}" style="width:100%;height:100%">          
+        </div>
+	`;
+})
+const b = slide.map((vL, index) => {
+	return `
+	 <span class="dot" onclick="currentSlide(${index + 1})"></span>
+	`;
+})
+elem.innerHTML = a.join("");
+dot.innerHTML = b.join("");
+let n = 0;
+let slideIndex = 1;
+
+function showSlides(n) {
+	let i;
+	let slides = document.getElementsByClassName("mySlides");
+	let dots = document.getElementsByClassName("dot");
+	if (n > slides.length) {
+		slideIndex = 1
+	}
+	if (n < 1) {
+		slideIndex = slides.length
+	}
+	for (i = 0; i < slides.length; i++) {
+		slides[i].style.display = "none";
+	}
+	for (i = 0; i < dots.length; i++) {
+		dots[i].className = dots[i].className.replace(" active", "");
+	}
+	slides[slideIndex - 1].style.display = "block";
+	dots[slideIndex - 1].className += " active";
+}
+showSlides(slideIndex);
+
+function plusSlides(n) {
+	showSlides(slideIndex += n);
+}
+
+function currentSlide(n) {
+	showSlides(slideIndex = n);
+}
+
+setInterval(function () {
+	n++;
+	if (n > slide.length - 1) {
+		n = 0;
+	}
+	showSlides(slideIndex = n);
+}, 1500);
+const infoUser = [
+	{ img: "images (6).jpg", des: "Lorem ipsuLoremssekx eld elk ke dwefnkwfkjn  wifh iowf h ouwaofuupowa hfdhfihedfohiohd fohawih f hbewfoihawfiwehfiyweghfi f iuhe fuh weiu f hip uwe hfiuhwefphiuawfi kem l mecddddd dddddd ddddddd dddddd dddddde ce cec", name: "KEN BILLE", id: "@sajad001184", twitter: "twitter.png" },
+	{ img: "hair.jpg", des: "Lorem ipsx as hia uhouasjpo iujasioh casocisajp aremssekx eld elk ke dwefnkwfkjn  wifh iowf h ouwaofuupowaremssekx eld elk ke dwefnkwfkjn  wifh iowf h ouwaofuupowaremssekx eld elk ke dwefnkwfkjn  wifh iowf h ouwaofuupowasjisouijias jpjj xaosuLoremssekx eld elk ke d kem l mece ce cec", name: "KEN BILLE", id: "@sajad001184", twitter: "twitter.png" },
+	{ img: "download.jpg", des: "Lorem ipsuLiuashc oac osjcioasj oajefnkwfkjn  wifh iowf h ouwaofuupowa hfdhfihedfohiohd fohawih f hbewfoihawfiwehfiyweghfi f iuhe fuh weiu f hip uwe hfiuhwefphiuawfi kem l mecdddddoiasjio casjajscosacjoic jasjc ocosajcsi co asjoscj oremssekx eld elk ke d kem l remssekx eld elk ke dwefnkwfkjn  wifh iowf h ouwaofuupowamee ce cec", name: "KEN BILLE", id: "@sajad001184", twitter: "twitter.png" }
+];
+
+// function elementGet(i) {
+// 	let imgclient  = document.getElementById(`imgclient${i}`);
+// 	let title  = document.getElementById(`title${i}`);
+// 	let subtitle  = document.getElementById(`subtitle${i}`);
+// 	let twitter  = document.getElementById(`twitter${i}`);
+// 	let lorem  = document.getElementById(`lorem${i}`);
+// }
+// console.log(imgclient[1]);
+
+let imgclient4 = document.getElementById("imgclient4");
+let imgclient1 = document.getElementById("imgclient1");
+let subtitle1 = document.getElementById("subtitle1");
+let title1 = document.getElementById("title1");
+let para1 = document.getElementById("lorem1");
+let title = document.getElementById("title");
+let subtitle = document.getElementById("subtitle");
+let imgclient = document.getElementById("imgclient");
+let twitter = document.getElementById("twitter");
+let lorem = document.getElementById("lorem");
+let title2 = document.getElementById("title2");
+let subtitle2 = document.getElementById("subtitle2");
+let imgclient2 = document.getElementById("imgclient2");
+let twitter2 = document.getElementById("twitter2");
+let lorem2 = document.getElementById("lorem2");
+let title3 = document.getElementById("title3");
+let subtitle3 = document.getElementById("subtitle3");
+let imgclient3 = document.getElementById("imgclient3");
+let twitter3 = document.getElementById("twitter3");
+let lorem3 = document.getElementById("lorem3");
+let edit_button = document.getElementById("edit-button");
+let twitter1 = document.getElementById("twitter1");
+const close_buttom = document.getElementById("close-button");
+const modal = document.getElementById("myModal");
+let title_box = document.getElementById("title-box");
+let user_box = document.getElementById("user-box");
+let text_box = document.getElementById("text-box");
+let myfile = document.getElementById("myfile");
+const end_button = document.getElementById("end-editing");
+const span = document.getElementById("close-button");
+const close_btn = document.getElementById("close-btn");
+const modalValue = [];
+
+title.innerHTML = infoUser[0].name;
+subtitle.innerHTML = infoUser[0].id;
+imgclient.src = infoUser[0].img;
+twitter.src = infoUser[0].twitter;
+lorem.innerHTML = infoUser[0].des;
+title2.innerHTML = infoUser[1].name;
+subtitle2.innerHTML = infoUser[1].id;
+imgclient2.src = infoUser[1].img;
+twitter2.src = infoUser[1].twitter;
+lorem2.innerHTML = infoUser[1].des;
+title3.innerHTML = infoUser[2].name;
+subtitle3.innerHTML = infoUser[2].id;
+imgclient3.src = infoUser[2].img;
+twitter3.src = infoUser[2].twitter;
+lorem3.innerHTML = infoUser[2].des;
+-
+
+	function closee() {
+		imgclient1.src = infoUser[0].img;
+		imgclient1.style.position = "relative";
+		myfile.style.display = "none";
+		subtitle1.style.display = "block";
+		title_box.style.display = "none";
+		subtitle1.textContent = modalValue[1];
+
+		title1.style.display = "block";
+		user_box.style.display = "none";
+		title1.textContent = modalValue[0];
+
+		para1.style.display = "block";
+		text_box.style.display = "none";
+		para1.textContent = modalValue[2];
+		edit_button.style.display = "block";
+		end_button.style.display = "none";
+		close_btn.style.display = "none";
+
+	}
+	let imgurl;
+function appendImgEdit() {
+	
+	const reader = new FileReader();
+	reader.onload = (e) => {
+
+		imgclient1.src = e.target.result;
+
+	}
+	reader.readAsDataURL(myfile.files[0]);
+}
+
+window.onclick = function (event) {
+	if (event.target == modal) {
+		modal.style.display = "none";
+		closee();
+	}
+}
+
+function openmodal(i) {
+	modal.style.display = "block";
+	subtitle1.innerHTML = infoUser[i].id;
+	imgclient1.src = infoUser[i].img;
+	title1.innerHTML = infoUser[i].name;
+	para1.innerHTML = infoUser[i].des;
+	twitter1.src = infoUser[i].twitter;
+
+}
+
+function close_button() {
+	modal.style.display = "none";
+	closee();
+}
+
+
+edit_button.onclick = function () {
+	imgclient1.style.position = "absolute";
+	myfile.style.display = "block";
+
+
+	myfile.onclick = function () {
+		myfile.addEventListener('change', () => {
+
+			appendImgEdit();
+
+		})
+
+	}
+
+
+
+	subtitle1.style.display = "none";
+	user_box.style.display = "block";
+	user_box.value = subtitle1.textContent;
+	modalValue[1] = user_box.value;
+	subtitle1.textContent = "";
+
+
+	title1.style.display = "none";
+	title_box.style.display = "block";
+	title_box.value = title1.textContent;
+	modalValue[0] = title_box.value;
+	title1.textContent = "";
+
+	para1.style.display = "none";
+	text_box.style.display = "block";
+	text_box.value = para1.textContent;
+	modalValue[2] = text_box.value;
+	para1.textContent = "";
+	edit_button.style.display = "none";
+	end_button.style.display = "block";
+	close_btn.style.display = "block";
+}
+
+
+
+end_button.addEventListener("click", function () {
+	myfile.style.display = "none";
+	imgclient1.style.position = "relative";
+
+
+
+	title1.textContent = title_box.value;
+
+	title1.style.display = "block";
+	title_box.style.display = "none";
+
+	subtitle1.textContent = user_box.value;
+
+	subtitle1.style.display = "block";
+	user_box.style.display = "none";
+
+	para1.textContent = text_box.value;
+
+	para1.style.display = "block";
+	text_box.style.display = "none";
+	edit_button.style.display = "block";
+	end_button.style.display = "none";
+	close_btn.style.display = "none";
+	subtitle1.style.backgroundColor = "pink";
+	title1.style.backgroundColor = "pink";
+
+})
+
+
+/*function card_value(i){
+	title[i].innerHTML=infoUser[i].name;
+	subtitle[i].innerHTML=infoUser[i].id;
+	imgclient[i].src=infoUser[i].img;
+	twitter[i].src=infoUser[i].twitter;
+	lorem[i].innerHTML=infoUser[i].des;
+}/*
+	
+	
+	
+	
+editEmail.value = result[i].email;
+editTitle.value  = result[i].title;
+editArea.innerHTML = result[i].discriction ;
+editImg.src= result[i].img
+
+	
+
+	
+
+	
+
+const username = document.getElementById("username");
+lorem.innerHTML=infoUser[0].des;
+lorem1.innerHTML=infoUser[0].des;
+title.innerHTML=infoUser[0].name;
+title1.innerHTML=infoUser[0].name;
+	subtitle.innerHTML=infoUser[0].id;
+subtitle1.innerHTML=infoUser[0].id;
+imgclient.setAttribute("src",infoUser[0].img);
+imgclient1.setAttribute("src",infoUser[0].img);
+twitter.setAttribute("src",infoUser[0].twitter);
+twitter1.setAttribute("src",infoUser[0].twitter);
+	
+
+
+
+    
+
+
+const btn = document.getElementById("myBtn");
+
+
+let myfile=document.getElementById("myfile");
+
+
+
+
+
+
+btn.onclick = function() {
+modal.style.display = "block";
+}
+
+
+
+	
+	
+
+
+edit_button.addEventListener("click", function() {
+	
+myfile.style.display="block";
+myfile.onclick=function(){	
+myfile.addEventListener('change', () => {
+if (myfile.files && myfile.files[0]) {
+const reader = new FileReader();
+reader.onload = (e) => {
+  imgclient1.src = e.target.result;
+}
+reader.readAsDataURL(myfile.files[0]);
+}
+})
+}
+
+
+
+
+	
+	
+subtitle1.style.display="none";
+title1_box.style.display="block";
+title1_box.value=subtitle1.textContent;
+subtitle1.textContent="";
+
+
+title1.style.display="none";
+user_box.style.display="block";
+user_box.value=title1.textContent;
+title1.textContent="";
+
+para1.style.display="none";
+text_box.style.display="block";
+text_box.value=para1.textContent;
+para1.textContent="";
+edit_button.style.display="none";
+end_button.style.display="block";
+close_btn.style.display="block";
+} );
+
+
+
+
+close_buttom.onclick=function(){
+edit_button.style.display="block";
+end_button.style.display="none";
+close_btn.style.display="none";
+modal.style.display = "none";
+
+}
+
+
+
+
+
+
+
+let para2=document.getElementById("lorem2");
+let title2=document.getElementById("title2");
+let title3=document.getElementById("title3");
+let subtitle2=document.getElementById("subtitle2");
+let subtitle3=document.getElementById("subtitle3");
+let twitter2=document.getElementById("twitter2");
+let twitter3=document.getElementById("twitter3");
+let lorem2=document.getElementById("lorem2");
+let imgclient2=document.getElementById("imgclient2");
+let imgclient3=document.getElementById("imgclient3");
+lorem2.innerHTML=infoUser[1].des;
+lorem3.innerHTML=infoUser[1].des;
+title2.innerHTML=infoUser[1].name;
+title3.innerHTML=infoUser[1].name;
+	subtitle2.innerHTML=infoUser[1].id;
+subtitle3.innerHTML=infoUser[1].id;
+imgclient2.setAttribute("src",infoUser[1].img);
+imgclient3.setAttribute("src",infoUser[1].img);
+twitter2.setAttribute("src",infoUser[1].twitter);
+twitter3.setAttribute("src",infoUser[1].twitter);
+	
+let title1_box2=document.getElementById("title1-box2");
+	
+let user_box2=document.getElementById("user-box2");
+let edit_button2 = document.getElementById("edit-button2");
+const end_button2 = document.getElementById("end-editing2");
+	const modal2 = document.getElementById("myModal2");
+let text_box2=document.getElementById("text-box2");
+
+const btn2 = document.getElementById("myBtn2");
+const close_btn2 = document.getElementById("close-btn2");
+const span2 = document.getElementById("close2");
+const close_buttom2 = document.getElementById("close-button2");
+let myfile1=document.getElementById("myfile1");
+
+btn2.onclick = function() {
+modal2.style.display = "block";
+}
+
+
+
+
+	
+
+
+	
+
+
+edit_button2.addEventListener("click", function() {
+	
+	
+myfile1.style.display="block";
+myfile1.onclick=function()	{
+myfile1.addEventListener('change', () => {
+if (myfile1.files && myfile1.files[0]) {
+const reader = new FileReader();
+reader.onload = (e) => {
+  imgclient2.src = e.target.result;
+}
+reader.readAsDataURL(myfile1.files[0]);
+}
+})
+} 
+	
+subtitle2.style.display="none";
+title1_box2.style.display="block";
+title1_box2.value=subtitle2.textContent;
+subtitle2.textContent="";
+
+
+title2.style.display="none";
+user_box2.style.display="block";
+user_box2.value=title2.textContent;
+title2.textContent="";
+
+para2.style.display="none";
+text_box2.style.display="block";
+text_box2.value=para2.textContent;
+para2.textContent="";
+edit_button2.style.display="none";
+end_button2.style.display="block";
+close_btn2.style.display="block";
+} );
+end_button2.addEventListener("click", function() {
+subtitle2.textContent=title1_box2.value;
+subtitle2.style.display="block";
+title1_box2.style.display="none";
+
+title2.textContent=user_box2.value;
+title2.style.display="block";
+user_box2.style.display="none";
+
+para2.textContent=text_box2.value;
+para2.style.display="block";
+text_box2.style.display="none";
+edit_button2.style.display="block";
+end_button2.style.display="none";
+close_btn2.style.display="none";
+title2.style.backgroundColor="pink";
+ 
+} )
+close_btn2.onclick=function(){
+subtitle2.style.display="block";
+title1_box2.style.display="none";
+subtitle2.textContent=infoUser[1].id;
+
+title2.style.display="block";
+user_box2.style.display="none";
+title2.textContent=infoUser[1].title;
+
+para2.style.display="block";
+text_box2.style.display="none";
+para2.textContent=infoUser[1].des;
+edit_button2.style.display="block";
+end_button2.style.display="none";
+close_btn2.style.display="none";
+
+}
+close_buttom2.onclick=function(){
+modal2.style.display = "none";
+edit_button2.style.display="block";
+end_button2.style.display="none";
+close_btn2.style.display="none";
+
+
+}
+
+
+
+
+let para4=document.getElementById("lorem4");
+let title4=document.getElementById("title4");
+let title5=document.getElementById("title5");
+let subtitle4=document.getElementById("subtitle4");
+let subtitle5=document.getElementById("subtitle5");
+let twitter4=document.getElementById("twitter4");
+let twitter5=document.getElementById("twitter5");
+let lorem5=document.getElementById("lorem5");
+let imgclient4=document.getElementById("imgclient4");
+let imgclient5=document.getElementById("imgclient5");
+lorem4.innerHTML=infoUser[2].des;
+lorem5.innerHTML=infoUser[2].des;
+title4.innerHTML=infoUser[2].name;
+title5.innerHTML=infoUser[2].name;
+	subtitle4.innerHTML=infoUser[2].id;
+subtitle5.innerHTML=infoUser[2].id;
+imgclient4.setAttribute("src",infoUser[2].img);
+imgclient5.setAttribute("src",infoUser[2].img);
+twitter4.setAttribute("src",infoUser[2].twitter);
+twitter5.setAttribute("src",infoUser[2].twitter);
+	
+let title1_box3=document.getElementById("title1-box3");
+	
+let user_box3=document.getElementById("user-box3");
+let edit_button3 = document.getElementById("edit-button3");
+const end_button3 = document.getElementById("end-editing3");
+	const modal3 = document.getElementById("myModal3");
+let text_box3=document.getElementById("text-box3");
+
+const btn3 = document.getElementById("myBtn3");
+const close_btn3 = document.getElementById("close-btn3");
+const span3 = document.getElementById("close3");
+const close_buttom3 = document.getElementById("close-button3");
+let myfile2=document.getElementById("myfile2");
+
+btn3.onclick = function() {
+modal3.style.display = "block";
+}
+
+
+
+
+
+	
+
+
+edit_button3.addEventListener("click", function() {
+	
+myfile2.style.display="block";
+myfile2.onclick=function()	{
+myfile2.addEventListener('change', () => {
+if (myfile2.files && myfile2.files[0]) {
+const reader = new FileReader();
+reader.onload = (e) => {
+  imgclient4.src = e.target.result;
+}
+reader.readAsDataURL(myfile2.files[0]);
+}
+})
+} 
+subtitle4.style.display="none";
+title1_box3.style.display="block";
+title1_box3.value=subtitle4.textContent;
+subtitle4.textContent="";
+
+
+title4.style.display="none";
+user_box3.style.display="block";
+user_box3.value=title4.textContent;
+title4.textContent="";
+
+para4.style.display="none";
+text_box3.style.display="block";
+text_box3.value=para4.textContent;
+para4.textContent="";
+edit_button3.style.display="none";
+end_button3.style.display="block";
+close_btn3.style.display="block";
+} );
+end_button3.addEventListener("click", function() {
+subtitle4.textContent=title1_box3.value;
+subtitle4.style.display="block";
+title1_box3.style.display="none";
+
+title4.textContent=user_box3.value;
+title4.style.display="block";
+user_box3.style.display="none";
+
+para4.textContent=text_box3.value;
+para4.style.display="block";
+text_box3.style.display="none";
+edit_button3.style.display="block";
+end_button3.style.display="none";
+close_btn3.style.display="none";
+title4.style.backgroundColor="pink";
+ 
+} )
+close_btn3.onclick=function(){
+subtitle4.style.display="block";
+title1_box3.style.display="none";
+subtitle4.textContent=infoUser[2].id;
+
+title4.style.display="block";
+user_box3.style.display="none";
+title4.textContent=infoUser[2].name;
+
+para4.style.display="block";
+text_box3.style.display="none";
+para4.textContent=infoUser[2].des;
+edit_button3.style.display="block";
+end_button3.style.display="none";
+close_btn3.style.display="none";
+
+}
+close_buttom3.onclick=function(){
+modal3.style.display = "none";
+edit_button3.style.display="block";
+end_button3.style.display="none";
+close_btn3.style.display="none";
+}
+*/

html.html

@@ -0,0 +1,238 @@
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1,0">
+<title>Hair Studio</title>
+<link rel="stylesheet" href="style.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
+</head>
+<body>
+<input type="checkbox" id="check">
+	<header>
+		<div class="logoimg">
+		<img src="images.png" alt="logo-haircut">
+		<h3 class="logo">MY STUDIO</h3>
+		</div>
+		<nav>
+		<ul class="menu">
+		<li><a href="#home" class="list">Home</a></li>
+		<li><a href="#hair" class="list">About Us</a></li>
+		<li><a href="#logomain" class="list">Call Us</a></li>
+		</ul>
+		</nav>
+		<div class="meenu">
+		     <label for="check">
+        <i class="fas fa-bars menu-btn"></i>
+        <i class="fas fa-times close-btn"></i>
+        </label>
+		</div>
+	</header>
+<section class="header" id="home">
+
+	
+	<div class="hair">
+		<h1 class="stu">Hair Studio</h1>
+		<p>Style Your Hair Is Style Your Life</p>
+		<div>
+		<button class="btn">Find Out</button>
+		<button class="btn">Read More</button>
+		</div>
+		<div class="doot" id="dot" >
+      </div>
+	</div>
+    <div id="slideshow-container">
+    </div>
+	<a class="prev" onclick="plusSlides(-1)">❮</a>
+        <a class="next" onclick="plusSlides(1)">❯</a>
+    <br>
+</section>
+<main>
+<div class="logomain" id="hair">
+<img src="hair.png" alt="logo-haircut">
+<h2 class="choose">Why Choose Us</h2>
+</div>
+<div class="divmain">
+<div class="submain">
+<h2>Experienced Staff</h2>
+<div class="subone">
+<img class="tik" src="icons8-protect-24.png" >
+<p>Lorem ipsum ADXASDScAsCFACASCQWACFEWFQWFCEFQAdolor sit amdfwvsvceszfvzrvrsevwgerv</p>
+</div>
+<h2>Pre Booking Online</h2>
+<div class="subone">
+<img class="tik" src="icons8-protect-24.png" >
+<p>Lorem ipsum ADXASDScAsCFACASCQWACFEWFQWFCEFQAdolor sit amdfwvsvceszfvzrvrsevwgerv</p>
+</div>
+<h2>Afforable Cost</h2>
+<div class="subone">
+<img class="tik" src="icons8-protect-24.png" >
+<p>Lorem ipsum ADXASDScAsCFACASCQWACFEWFQWFCEFQAdolor sit amdfwvsvceszfvzrvrsevwgerv</p>
+</div>
+</div>
+<div class="imgmain">
+</div>
+</div>
+<div class="better">
+<div class="logomain">
+<img src="hair.png" alt="logo-haircut">
+<h2 class="choose">We Provide Better</h2>
+</div>
+<div class="work">
+<img src="images (3).jpg" alt="work" class="workimg">
+<img src="images (2).jpg" alt="work" class="workimg">
+<img src="images (4).jpg" alt="work" class="workimg">
+<img src="images (5).jpg" alt="work" class="workimg">
+</div>
+</div>
+<div class="clientsays">
+<div class="logomain">
+<img src="hair.png" alt="logo-haircut">
+<h2 class="choose">What Client Says</h2>
+</div>
+<div class="clients" >
+	<div class="client" id="myBtn" >
+	<div id="myModal" class="modal" >
+  <div class="modal-content">
+    <div class="clientes cliimg" id="header-modal">
+	<div>
+	<img  alt="client" class="cli-img" id="imgclient1">
+
+	<input type="file" id="myfile" class="myfile" name="myfile" accept=".jpg, .jpeg, .png" >
+	</div>
+	<div class="div-username1">
+	<div class="user-font" id="title1">
+		
+			</div>
+			<input type="text" class="user-box" id="title-box">
+			<div class="user-font" id="subtitle1">
+		
+			</div>
+			<input type="text" class="user-box" id="user-box">
+		</div>	
+			
+			<img  alt="twitter-logo" class="imgtwitter" id="twitter1">
+			</div>
+			<div id="lorem1">
+			
+		</div>
+		
+		<textarea class="text-box" id="text-box">
+			</textarea>
+  
+		<div class="eslah-div">
+		<button class="eslah2" id="close-button" onclick="close_button()">بازگشت</button>
+		<button class="eslah1" id="edit-button">اصلاح</button>
+		  <button  id="close-btn" class="edit-button" onclick="closee()">انصراف</button>
+  <button id="end-editing" class="edit-button">تایید</button>
+		</div>
+	</div>
+
+</div>
+<div id="usersay" onclick="openmodal(0)">
+		<div class="clientes" id="clientes" >
+			<img  alt="client" class="imgclient" id="imgclient">
+			<div class="div-username">
+			<div class="username" id="title">
+				
+			</div>
+			
+			<div class="username" id="subtitle">
+				
+			</div>
+			</div>
+			<img  alt="twitter-logo" class="imgtwitter" id="twitter">
+		</div>
+		<div class="lorem " id="lorem">
+			
+		</div>
+	</div>
+	</div>
+			<div class="client" id="myBtn2" >
+<div id="usersay1"  onclick="openmodal(1)">
+		<div class="clientes" id="clientes">
+			<img  alt="client" class="imgclient" id="imgclient2">
+			<div class="div-username">
+			<div class="username" id="title2">
+				
+			</div>
+			
+			<div class="username" id="subtitle2">
+				
+			</div>
+			</div>
+			<img  alt="twitter-logo" class="imgtwitter" id="twitter2">
+		</div>
+		<div class="lorem " id="lorem2">
+			
+		</div>
+	</div>
+	</div>
+		<div class="client" id="myBtn3" >
+<div id="usersay2" onclick="openmodal(2)">
+		<div class="clientes" id="clientes">
+			<img  alt="client" class="imgclient" id="imgclient3">
+			<div class="div-username">
+			<div class="username" id="title3">
+				
+			</div>
+			
+			<div class="username" id="subtitle3">
+				
+			</div>
+			</div>
+			<img  alt="twitter-logo" class="imgtwitter" id="twitter3">
+		</div>
+		<div class="lorem " id="lorem3">
+			
+		</div>
+	</div>
+	</div>
+</div>
+</div>
+</main>
+<footer>
+<div class="logomain" id="logomain">
+<img src="hair.png" alt="logo-haircut">
+<h2 class="choose">Visit Our Salon Today</h2>
+</div>
+<div class="footer">
+<div class="address">
+<h2>Opening Hour</h2>
+<div class="week">
+<img src="dollar-symbol.png" class="time">
+<p>Monday Yo Friday - 9am to 9pm</p>
+</div>
+<div class="week">
+<img src="dollar-symbol.png" class="time">
+<p>Saturday Yo Sunday - 8am to 11pm</p>
+</div>
+</div>
+<div class="address">
+<h2>Get In Touch</h2>
+<div class="week">
+<p>Ward#6,hayderabord,sindh</p>
+<img src="dollar-symbol.png" class="time">
+</div>
+<div class="week">
+<p>anyname@gmail.com</p>
+<img src="dollar-symbol.png" class="time">
+</div>
+<div class="week">
+<p>+985165151854</p>
+<img src="dollar-symbol.png" class="time">
+</div>
+</div>
+</div>
+<div class="icon">
+<img src="dollar-symbol.png" class="icons">
+<img src="twitter.png" class="icons">
+<img src="twitter.png" class="icons">
+<img src="twitter.png" class="icons">
+</div>
+<div class="copyright">
+<p>Copyright - zehra Khuwaja</p>
+</div>
+</footer>
+    <script src="app.js"></script>
+</body>
+</html>

style.css

@@ -0,0 +1,572 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
+html{
+	font-size:62.5%;
+}
+*{
+	margin:0;
+	padding:0;
+	box-sizing:border-box;
+}
+header{
+	position:fixed;
+	display:flex;
+	justify-content:center;
+	align-items:center;
+	padding:0.3vw;
+	margin-top:0;
+	background-color:pink;
+	width:100vw;
+	z-index:3;
+}
+
+.menu{
+	list-style:none;
+	display:flex;
+	margin-left:45vw;
+	font-size:1.5rem;
+}
+.list{ 
+    position:relative;
+	text-decoration:none;
+	margin-left:100px;
+	display:flex;
+	align-items:center;
+	color:black;
+	padding:10px;
+	border-radius:20%;
+}
+.list:hover{
+	background-color:#FF9EAA;
+}
+img{
+	width:40px;
+	height:auto;
+	max-width:100%;
+}
+.logo{
+	font-size:2rem;
+}
+.logoimg{
+	display:flex;
+	justify-content:center;
+	align-items:center;	
+}
+
+
+.header{
+	position:relative;
+	background-image:linear-gradient( transparent, pink);
+	max-width:100%;
+	height:50vh;
+	background-size: cover;
+  background-position: center;
+  margin-bottom:5vh;
+display:flex;
+overflow:hidden;
+justify-content:center;
+ 
+}
+
+ .mySlides {
+           display: none;
+			z-index:-1;
+			position:absolute;
+			width:100%;
+	         height:100%;
+			}
+
+        
+
+     
+        #slideshow-container {
+            width: 100%;
+            position: absolute;
+            height: 100%;
+			
+        }
+
+     
+        .prev,
+        .next {
+            cursor: pointer;
+            position: absolute;
+            top: 50%;
+            
+            padding: 16px;
+            margin-top: -22px;
+            color: white;
+            font-weight: bold;
+            font-size: 18px;
+            
+            border-radius: 0 3px 3px 0;
+          
+        }
+        .next {
+            right: 0;
+            border-radius: 3px 0 0 3px;
+        }
+        .prev:hover,
+        .next:hover {
+            background-color: rgba(0, 0, 0, 0.8);
+        }
+        .dot {
+			width:1.5rem;
+			height:1.5rem;
+            cursor: pointer;
+          font-size:5rem;
+           display:flex;
+            background-color: #bbb;
+            border-radius: 50%;
+            z-index:3
+         
+        }
+		.doot{
+			margin-top:10vh;
+			display:flex;
+			z-index:1;
+		}
+.prev{
+	left:10px;
+}
+.next{
+	right:10px
+}
+        .active,
+        .dot:hover {
+            background-color: #717171;
+        }
+
+        @media only screen and (max-width: 300px) {
+
+            .prev,
+            .next,
+            .text {
+                font-size: 11px
+            }
+        }
+.hair{
+	position:absolute;
+	display:flex;
+	flex-direction: column;
+	justify-content:center;
+	align-items:center;
+	margin-top:0;
+	padding-top:10vh;
+	z-index:1;
+	
+}
+.hair p{
+	font-size:2rem;
+	margin-bottom:2vh;
+}
+.stu{
+	font-size:6rem;
+	font-family:cursive;
+	margin-bottom:3vh;
+}
+.btn{
+	background:none;
+	padding-right:2vw;
+	padding-left:2vw;
+	padding-top:0.5vh;
+	padding-bottom:0.5vh;
+	margin:0.2vw;
+	z-index:3;
+}
+.btn:hover{
+	background-color:#FF9EAA;
+}
+.logomain{
+	display:flex;
+	flex-direction:column;
+	align-items:center;
+	padding-top:2vw;
+}
+.choose{
+	margin-top:0.5rem;
+	font-size:3rem;
+	margin-bottom:5vw;
+}
+.divmain{
+	display:flex;
+	align-items:center;
+	flex-wrap:wrap;
+	justify-content:space-around;
+	margin-bottom:5vw;
+	
+}
+.imgmain{
+	width:20rem;
+	height:25rem;
+	border-radius:20px;
+	background-image:linear-gradient( transparent, pink), url(hair.jpg);
+	background-repeat: no-repeat;
+}
+.subone{
+	display:flex;
+	align-items:flex-start;
+	flex-wrap:wrap;
+	margin-top:1vw;
+	margin-bottom:2vw;
+}
+.subone p{
+	font-size:1.5rem;
+	width:50vw;
+}
+.tik{
+	width:2vw;
+	height:auto;
+}
+h3{
+	color:#000000;
+}
+.better{
+	background-color:#d9d7d7;
+}
+.work{
+	display:flex;
+	align-items:center;
+	justify-content:space-evenly;
+	flex-wrap:wrap;
+}
+.workimg{
+	width:33vw;
+	height:20vw;
+	margin-bottom:2vw;
+	border-radius:10px;
+}
+.clients{
+	display:flex;
+	align-items:center;
+	justify-content:space-around;
+	flex-direction:row;
+	font-size:1.5rem;
+}
+.client{
+	display:flex;
+	flex-direction:column;
+	box-shadow:3px 3px 10px #FF9EAA;
+	padding:1vw;
+	height:24vh;
+}
+.clientes{
+	display:flex;
+	flex-direction:row;
+	flex-wrap:wrap;
+}
+.lorm p{
+	width:12rem;
+}
+.imgtwitter{
+	width:1vw;
+	height:1.5vw;
+}
+.username{
+	font-size:1.5rem;
+	margin-left:1vw;
+	margin-right:1vw;
+}
+.div-username{
+	width:50%
+}
+.div-username1{
+	width:25%
+}
+.imgclient{
+	width:2vw;
+	height:auto;
+}
+footer{
+	margin-top:10vw;
+	background-color:#d9d7d7;
+	font-size:1.5rem;
+}
+.time{
+	width:1.5vw;
+	height:1.5vw;
+}
+.week{
+	display:flex;
+	margin-top:1vw;
+}
+
+
+.footer{
+	display:flex;
+	align-items:center;
+	justify-content:space-around;
+}
+.icon{
+	display:flex;
+	justify-content:center;
+	margin-top:3vw;
+	
+}
+.icons{
+	width:2vw;
+	height:auto;
+	margin-left:0.5vw;
+	margin-right:0.5vw;
+	border:2px solid black;
+	padding:0.2vw;
+	
+}
+.copyright{
+	display:flex;
+	justify-content:center;
+	margin-top:2vw;
+	font-size:0.8rem;
+	padding-bottom:1vw;
+}
+.but{
+	display:none;
+	margin-left:45vw;
+	font-size:20px;
+	background-color:#F09EAA;
+	border:0;
+	padding:0.4vw 0.6vw 0.4vw 0.6vw;
+}
+#check{
+  z-index: 3;
+  display: none;
+}
+	.meenu{
+		display:none;
+	}
+ @media (max-width: 1203px){
+	.menu{
+		display:none;
+		width:21vw;
+	}
+	header{
+		display:flex;
+		justify-content:space-around;
+	}
+.meenu{
+		display:flex;
+		align-items:center;
+	}
+	
+	label{
+    display: flex;
+	align-items:center;
+	justify-content:space-between;
+    font-size: 25px;
+    cursor: pointer;
+    transition: 0.3s;
+    transition-property: color;
+	
+  }
+   label:hover{
+    color: #fff;
+  }
+  label .close-btn{
+    display: none;
+  }
+  #check:checked ~ header .menu{
+    z-index: 2;
+    position: fixed;
+    top: 3vh;
+    right: 0;
+    background: pink;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+	width:54vw;
+	
+  }
+ #check:checked ~  header .menu a{
+    font-weight: 700;
+    margin-right: 0;
+    margin-bottom: 50px;
+    letter-spacing: 2px;
+  }
+
+  #check:checked ~ header label .close-btn{
+    z-index: 2;
+    position: fixed;
+    display: block;
+  }
+
+  #check:checked ~ header label .menu-btn{
+    display: none;
+  }
+
+  label .menu-btn{
+    position: absolute;
+  }
+	
+	
+ }
+@media (max-width: 960px){
+	html{
+		font-size:50%;
+	}
+
+ 
+}
+  @media (max-width: 700px){
+	html{
+		font-size:35%;
+	}
+  }
+   @media (max-width: 415px){
+	html{
+		font-size:25%;
+	}
+  }
+	  @media (max-width: 280px){
+	html{
+		font-size:20%;
+	}
+	  }
+	  .modal {
+  display: none; 
+  position: fixed; 
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%; 
+  height: 100vh; 
+  background-color: rgba(0,0,0,0.4); 
+}
+
+
+.modal-content {
+  background-color: #fefefe;
+  margin: 5% auto ;
+margin-bottom:50px;  
+  padding: 20px;
+  border: 1px solid #888;
+  width: 60%; 
+  height:75%;
+  
+}
+.lorem {
+	width:20vw;
+	height:10vh;
+	overflow:hidden;
+	margin-top:1vw;
+}
+
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+.cli-img{
+	width:5vw;
+	height:10vh;
+	border-radius:100%;
+	margin-left:1vw;
+
+	
+}
+.cliimg{
+	background:pink;
+	padding:1vh 0 1vh 0;
+	
+}
+.user-font{
+	font-size:2rem;
+	margin-left:1vw;
+}
+
+.eslah-div{
+	display:flex;
+	align-items:center;
+	justify-content:center;
+	background:pink;
+	padding:1vh 0 1vh 0;
+	
+	
+}
+.eslah1{
+	margin-left:2vw;
+	padding:1vh 2.5vw 1vh 2.5vw;
+	}
+.eslah2{
+	margin-right:2vw;
+	padding:1vh 2.5vw 1vh 2.5vw;
+}
+#container {
+  width: 100%;
+  padding: 10px;
+}
+
+#edit {
+  padding: 5px;
+  outline: none;
+}
+
+.edit-button {
+  width: 80px;
+  padding: 5px;
+  margin: 0 3px;
+  background-color: #ff7e00;
+  outline: none;
+  border: 1px solid #ff7e00;
+  box-shadow: 2px 2px 2px #3f3f3f;
+}
+
+.edit-button:hover {
+  box-shadow: 2px 2px 3px ;
+}
+
+.edit-button:active {
+  box-shadow: 1px 1px 3px ;
+}
+#close-btn,#close-btn2,#close-btn3{
+	display:none;
+}
+#end-editing,#end-editing2,#end-editing3{
+	display:none;
+}
+
+.text-box{
+	border:none;
+	width:100%;
+	display:none;
+	height:51vh;
+	overflow-x:hidden;
+}
+.paragraph{
+	width:50px;
+	display:none;
+}
+#lorem1{
+	height:51vh;
+}
+.user-box{
+	display:none;
+	height:2vw;
+	
+}
+#myfile{
+	display:none;
+	z-index:0;
+    width: 5vw;
+    height: 10vh;
+    border-radius: 100%;
+    margin-left: 1vw;
+	font-size:0;
+}
+
+.showModal{
+	display: block;
+}
+.cli-img:hover + .myfile{
+	position:relative;
+display:block;
+	z-index:10;
+	background-color:rgba(0,0,0,0.4)
+}