Browse Source

The Entire Site

master
sajad 1 year ago
commit
64a7554723
  1. 619
      app.js
  2. BIN
      back2.jpg
  3. BIN
      dollar-symbol.png
  4. BIN
      download.jpg
  5. BIN
      hair.jpg
  6. BIN
      hair.png
  7. 238
      html.html
  8. BIN
      icons8-protect-24.png
  9. BIN
      images (1).jpg
  10. BIN
      images (2).jpg
  11. BIN
      images (3).jpg
  12. BIN
      images (4).jpg
  13. BIN
      images (5).jpg
  14. BIN
      images (6).jpg
  15. BIN
      images.jpg
  16. BIN
      images.png
  17. 572
      style.css
  18. BIN
      twitter.png

619
app.js

@ -0,0 +1,619 @@ @@ -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";
}
*/

BIN
back2.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 216 KiB

BIN
dollar-symbol.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
download.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
hair.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

BIN
hair.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

238
html.html

@ -0,0 +1,238 @@ @@ -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>

BIN
icons8-protect-24.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 362 B

BIN
images (1).jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
images (2).jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
images (3).jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
images (4).jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
images (5).jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

BIN
images (6).jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

BIN
images.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
images.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

572
style.css

@ -0,0 +1,572 @@ @@ -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)
}

BIN
twitter.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Loading…
Cancel
Save