Hair Studio

commit 427206d3a0aaabac6b6390957ac5bf81a7ae9f6a Author: sajad Date: Sat Jul 22 09:36:37 2023 +0330 complete site diff --git a/back2.jpg b/back2.jpg new file mode 100644 index 0000000..d879ce5 Binary files /dev/null and b/back2.jpg differ diff --git a/dollar-symbol.png b/dollar-symbol.png new file mode 100644 index 0000000..3f4444c Binary files /dev/null and b/dollar-symbol.png differ diff --git a/hair.jpg b/hair.jpg new file mode 100644 index 0000000..1c516c7 Binary files /dev/null and b/hair.jpg differ diff --git a/hair.png b/hair.png new file mode 100644 index 0000000..1f4bd38 Binary files /dev/null and b/hair.png differ diff --git a/html.html b/html.html new file mode 100644 index 0000000..0929bb3 --- /dev/null +++ b/html.html @@ -0,0 +1,577 @@ + + + + +Hair Studio + + + + + +

MY STUDIO

+ +

+ + + + +

+ +

Why Choose Us

Experienced Staff

Lorem ipsum ADXASDScAsCFACASCQWACFEWFQWFCEFQAdolor sit amdfwvsvceszfvzrvrsevwgerv

Pre Booking Online

Lorem ipsum ADXASDScAsCFACASCQWACFEWFQWFCEFQAdolor sit amdfwvsvceszfvzrvrsevwgerv

Afforable Cost

Lorem ipsum ADXASDScAsCFACASCQWACFEWFQWFCEFQAdolor sit amdfwvsvceszfvzrvrsevwgerv

We Provide Better

What Client Says

+ +

KEN BILLE

@sajad001184

Lorem ipsuLorem ipsum dolor sit amet

+ + + + \ No newline at end of file diff --git a/icons8-protect-24.png b/icons8-protect-24.png new file mode 100644 index 0000000..50c404e Binary files /dev/null and b/icons8-protect-24.png differ diff --git a/images (1).jpg b/images (1).jpg new file mode 100644 index 0000000..61d13e1 Binary files /dev/null and b/images (1).jpg differ diff --git a/images (2).jpg b/images (2).jpg new file mode 100644 index 0000000..f5c7f93 Binary files /dev/null and b/images (2).jpg differ diff --git a/images (3).jpg b/images (3).jpg new file mode 100644 index 0000000..e13cc9e Binary files /dev/null and b/images (3).jpg differ diff --git a/images (4).jpg b/images (4).jpg new file mode 100644 index 0000000..7c5a52a Binary files /dev/null and b/images (4).jpg differ diff --git a/images (5).jpg b/images (5).jpg new file mode 100644 index 0000000..e766b33 Binary files /dev/null and b/images (5).jpg differ diff --git a/images (6).jpg b/images (6).jpg new file mode 100644 index 0000000..3f8e47b Binary files /dev/null and b/images (6).jpg differ diff --git a/images.jpg b/images.jpg new file mode 100644 index 0000000..f44a775 Binary files /dev/null and b/images.jpg differ diff --git a/images.png b/images.png new file mode 100644 index 0000000..ec718c4 Binary files /dev/null and b/images.png differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..92dc1e9 --- /dev/null +++ b/style.css @@ -0,0 +1,560 @@ +@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:0; + } +.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; + + +} +.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:#00000; +} +.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; +} +.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; +} +.lorem{ + 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: 280px){ + html{ + font-size:20%; + } + } + .modal { + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100vh; + background-color: rgb(0,0,0); + 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:2vh; + overflow:hidden; +} + +.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; + /*margin-top:33vh;*/ + 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%; + /*height: 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{ + display:none; +} +#end-editing{ + display:none; +} +#close-btn2{ + display:none; +} +#end-editing2{ + display:none; +} +.text-box{ + border:none; + width:100%; + display:none; + height:51vh; + overflow-x:hidden; +} +.paragraph{ + width:50px; + display:none; +} +#lorem1{ + height:51vh; +} +#lorem2{ + height:51vh; +} +.user-box{ + display:none; + border:none; + height:3vw; + +} +#myfile{ + display:none; +} \ No newline at end of file diff --git a/twitter.png b/twitter.png new file mode 100644 index 0000000..22572a0 Binary files /dev/null and b/twitter.png differ