commit 1435faf9a6a52b1989f110665f9a701a3313c128 Author: sajad Date: Tue Jul 18 00:54:51 2023 +0330 finished slider 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..c9e14f5 --- /dev/null +++ b/html.html @@ -0,0 +1,243 @@ + + + + +Hair Studio + + + + + +
+
+ logo-haircut + +
+ +
+ +
+
+
+ + +
+

Hair Studio

+

Style Your Hair Is Style Your Life

+
+ + +
+
+
+
+
+
+ + +
+
+
+
+logo-haircut +

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

+
+
+
+
+
+
+
+logo-haircut +

We Provide Better

+
+
+work +work +work +work +
+
+
+
+logo-haircut +

What Client Says

+
+ + +
+
+
+ client +
+
KEN BILLE
+

@sajad001184

+
+ twitter-logo +
+
+

Lorem ipsuLorem ipsum dolor sit amet

+
+
+
+
+ client +
+
KEN BILLE
+

@sajad001184

+
+ twitter-logo +
+
+

Lorem ipsuLorem ipsum dolor sit amet

+
+
+
+
+ client +
+
KEN BILLE
+

@sajad001184

+
+ twitter-logo +
+
+

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..3a9af2b --- /dev/null +++ b/style.css @@ -0,0 +1,410 @@ +@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; + } +.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:3; + +} +.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; +} +.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{ + margin-left:1vw; + margin-right:1vw; +} +.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:2vw; +} + +.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%; + } + } \ 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