diff --git a/icons/chevron-right.svg b/icons/chevron-right.svg new file mode 100644 index 0000000..aefb329 --- /dev/null +++ b/icons/chevron-right.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/icons/facebook.svg b/icons/facebook.svg new file mode 100644 index 0000000..e8d1443 --- /dev/null +++ b/icons/facebook.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/icons/whatsapp.svg b/icons/whatsapp.svg new file mode 100644 index 0000000..6242d05 --- /dev/null +++ b/icons/whatsapp.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/images/Narytha-logo.png b/images/Narytha-logo.png new file mode 100644 index 0000000..c7165d3 Binary files /dev/null and b/images/Narytha-logo.png differ diff --git a/images/cleaning.jpg b/images/cleaning.jpg new file mode 100644 index 0000000..313bf55 Binary files /dev/null and b/images/cleaning.jpg differ diff --git a/images/hair-1.jpeg b/images/hair-1.jpeg new file mode 100644 index 0000000..df9ae9d Binary files /dev/null and b/images/hair-1.jpeg differ diff --git a/images/hair-2.jpeg b/images/hair-2.jpeg new file mode 100644 index 0000000..02d3306 Binary files /dev/null and b/images/hair-2.jpeg differ diff --git a/images/hair-3.jpeg b/images/hair-3.jpeg new file mode 100644 index 0000000..b0cb137 Binary files /dev/null and b/images/hair-3.jpeg differ diff --git a/images/hair-4.jpeg b/images/hair-4.jpeg new file mode 100644 index 0000000..d814a5c Binary files /dev/null and b/images/hair-4.jpeg differ diff --git a/images/hair-5.jpeg b/images/hair-5.jpeg new file mode 100644 index 0000000..2b44627 Binary files /dev/null and b/images/hair-5.jpeg differ diff --git a/images/hair-6.jpeg b/images/hair-6.jpeg new file mode 100644 index 0000000..f65519f Binary files /dev/null and b/images/hair-6.jpeg differ diff --git a/images/hair-7.jpg b/images/hair-7.jpg new file mode 100644 index 0000000..f89dd28 Binary files /dev/null and b/images/hair-7.jpg differ diff --git a/images/hair-event.jpeg b/images/hair-event.jpeg new file mode 100644 index 0000000..114f6cb Binary files /dev/null and b/images/hair-event.jpeg differ diff --git a/images/viewing-images/hair-1.jpeg b/images/viewing-images/hair-1.jpeg new file mode 100644 index 0000000..e3f5d10 Binary files /dev/null and b/images/viewing-images/hair-1.jpeg differ diff --git a/images/viewing-images/hair-10.jpeg b/images/viewing-images/hair-10.jpeg new file mode 100644 index 0000000..fabd7c9 Binary files /dev/null and b/images/viewing-images/hair-10.jpeg differ diff --git a/images/viewing-images/hair-11.jpeg b/images/viewing-images/hair-11.jpeg new file mode 100644 index 0000000..54643f4 Binary files /dev/null and b/images/viewing-images/hair-11.jpeg differ diff --git a/images/viewing-images/hair-12.jpeg b/images/viewing-images/hair-12.jpeg new file mode 100644 index 0000000..788ecfd Binary files /dev/null and b/images/viewing-images/hair-12.jpeg differ diff --git a/images/viewing-images/hair-13.jpeg b/images/viewing-images/hair-13.jpeg new file mode 100644 index 0000000..71b886f Binary files /dev/null and b/images/viewing-images/hair-13.jpeg differ diff --git a/images/viewing-images/hair-14.jpeg b/images/viewing-images/hair-14.jpeg new file mode 100644 index 0000000..a6b5bfc Binary files /dev/null and b/images/viewing-images/hair-14.jpeg differ diff --git a/images/viewing-images/hair-15.jpeg b/images/viewing-images/hair-15.jpeg new file mode 100644 index 0000000..7917517 Binary files /dev/null and b/images/viewing-images/hair-15.jpeg differ diff --git a/images/viewing-images/hair-16.jpeg b/images/viewing-images/hair-16.jpeg new file mode 100644 index 0000000..d52402c Binary files /dev/null and b/images/viewing-images/hair-16.jpeg differ diff --git a/images/viewing-images/hair-2.jpeg b/images/viewing-images/hair-2.jpeg new file mode 100644 index 0000000..ebf9228 Binary files /dev/null and b/images/viewing-images/hair-2.jpeg differ diff --git a/images/viewing-images/hair-3.jpeg b/images/viewing-images/hair-3.jpeg new file mode 100644 index 0000000..93d8cf5 Binary files /dev/null and b/images/viewing-images/hair-3.jpeg differ diff --git a/images/viewing-images/hair-4.jpeg b/images/viewing-images/hair-4.jpeg new file mode 100644 index 0000000..bae6ce3 Binary files /dev/null and b/images/viewing-images/hair-4.jpeg differ diff --git a/images/viewing-images/hair-5.jpeg b/images/viewing-images/hair-5.jpeg new file mode 100644 index 0000000..25074ad Binary files /dev/null and b/images/viewing-images/hair-5.jpeg differ diff --git a/images/viewing-images/hair-6.jpeg b/images/viewing-images/hair-6.jpeg new file mode 100644 index 0000000..cc0c4c9 Binary files /dev/null and b/images/viewing-images/hair-6.jpeg differ diff --git a/images/viewing-images/hair-7.jpeg b/images/viewing-images/hair-7.jpeg new file mode 100644 index 0000000..8a434ee Binary files /dev/null and b/images/viewing-images/hair-7.jpeg differ diff --git a/images/viewing-images/hair-8.jpeg b/images/viewing-images/hair-8.jpeg new file mode 100644 index 0000000..5a3f1c3 Binary files /dev/null and b/images/viewing-images/hair-8.jpeg differ diff --git a/images/viewing-images/hair-9.jpeg b/images/viewing-images/hair-9.jpeg new file mode 100644 index 0000000..dfaf02b Binary files /dev/null and b/images/viewing-images/hair-9.jpeg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..af176a5 --- /dev/null +++ b/index.html @@ -0,0 +1,95 @@ + + + + + + + + + + + + Narytha's Services + + + + +
+
+ +
+

Narytha's Services

+
+
+ + + + + + +
+
+
+
+ +

Braids

+

Your day to day braids, in different styles and colours!

+
+
+ +

Hairdo's For Events

+

Anything from weddings to parties I'll make your hair look fabulous!

+
+
+ +

Cleaning Services

+

OKAMO GENERAL TRADING Offers cleaning servives at different prices. Contact Narytha for more!

+
+
+
+ +
+ +
+ +
+ +
+ + + + + diff --git a/index.js b/index.js new file mode 100644 index 0000000..7735d30 --- /dev/null +++ b/index.js @@ -0,0 +1,14 @@ +const panels = document.querySelectorAll('.panel'); + +panels.forEach((panel) =>{ + panel.addEventListener('click', () =>{ + removeActiveClasses(); + panel.classList.add('active'); + }) +}) + +function removeActiveClasses(){ + panels.forEach((panel) => { + panel.classList.remove('active'); + }) +} \ No newline at end of file diff --git a/services/braids.html b/services/braids.html new file mode 100644 index 0000000..11636fa --- /dev/null +++ b/services/braids.html @@ -0,0 +1,120 @@ + + + + + + + + + + + Braids + + + +
+
+ +
+

Narytha's Services

+
+
+ + + +

Different Braiding Styles

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+

Hair Services & Products:

+
+
+ +
    +
  • Haircut
    • +
  • Washing Hair(Shampoo)
    • +
  • Hair Dye
    • +
  • Highlights
    • +
  • Hair Extensions
    • +
  • Special ocassion Hairdo's
    • +
+ +
+
+ +
    +
  • R50
    • +
  • R80
    • +
  • R80
    • +
  • R300
    • +
  • R250
    • +
  • R300+
    • +
+
+ +
+

These prices vary based on style and price of products used!

+
+ +
+ +
+ + + + + \ No newline at end of file diff --git a/services/cleaning.html b/services/cleaning.html new file mode 100644 index 0000000..5aed08f --- /dev/null +++ b/services/cleaning.html @@ -0,0 +1,87 @@ + + + + + + + + + + + Cleaning Services + + + +
+
+ +
+

Narytha's Services

+
+
+ + + +
+

Contact Details:

+

Name: Narytha Okamo-Ankene

+

Email address:

+

Whatsapp + + /Cell: 084 796 2382

+

Availability: Mon-Sat (9am-6pm) + Sunday - Available by appointment +

+ + +
+ + + +
+ +
+ + + + + \ No newline at end of file diff --git a/services/hairdo.html b/services/hairdo.html new file mode 100644 index 0000000..d18d98b --- /dev/null +++ b/services/hairdo.html @@ -0,0 +1,111 @@ + + + + + + + + + + + Hairdo's for Events + + + +
+
+ +
+

Narytha's Services

+
+
+ + + +
+

Different Hairdo's

+

Different styles can be made on request with Narytha

+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+

Hair for all types of events including:

+
+
+ +
    +
  • Weddings👰🏿🤵🏿
    • +
  • Parties🥳
    • +
  • Professional Events📸
    • +
  • School/University Graduations🎓
    • +
  • Also willing to negotiate on group appointments🧑‍🤝‍🧑
    • +
+ +
+ +
+
+ +
+ +
+ + + + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..5613794 --- /dev/null +++ b/styles.css @@ -0,0 +1,217 @@ + +*{ + box-sizing: border-box; +} +body { + margin: 0; + font-family: 'Raleway', sans-serif; +} + +header, footer { + background: linear-gradient(to right, #f9d423 0%, #ff4e50 100%);; + padding: 10px; + color: white; + +} +.header{ +display: flex; +align-items: center; +justify-content: center; +font-size: 2rem; +padding: 0; +} +.logo { + max-width: 100%; + height: auto; + max-height: 200px; /* Adjust the maximum height as needed */ +} + +nav { + display: flex; + justify-content: center; + background: #e5412c; + padding: 10px; +} + +nav a { + color: white; + text-decoration: none; + margin: 0 15px; +} +span .contact-narytha{ + color: red; + font-weight: bold; + text-decoration: none; +} +span .contact-narytha:hover{ + color: rgb(23, 22, 22); + font-weight: bold; + text-decoration: none; + font-size: 20px; +} +.display-services{ + + margin: 50px; + display: flex; + align-items: center; + justify-content: center; + +} +h2.fw-normal, a.fw-normal{ + color: #e5412c; + font-weight: bold; + margin: 10px; + text-decoration: none; +} +h2.fw-normal:hover, a.fw-normal:hover{ + color: #000000; + font-weight: bold; + font-size: 30px; + margin: 10px; +} +.braid-div{ + text-align: center; +} +.braids-display{ + border-radius: 70%; + width: 200px; + height: 200px; +} +.cleaning-div{ + text-align: center; +} +.cleaning-display{ + border-radius: 50%; + height: 200px; + width: 200px; +} +.hair-div{ + text-align: center; +} +.hair-display{ + border-radius: 50%; + height: 200px; +} +.braids-images{ + margin: 50px; +} +svg{ + margin: 5px; +} +.braid-heading{ + text-align: center; + margin: 30px; +} +.expanding-cards{ + display: flex; + width: 90vw; +} +.panel{ + background-size: auto 100%; + background-position: center; + background-repeat: no-repeat; + height: 80vh; + border-radius: 43px; + cursor: pointer; + flex: 0.5; + margin: 10px; + position: relative; + transition:flex 0.7s ease-in ; +} +.panel.active{ + flex: 5; + } + @media(max-width: 480px){ + .container{ + width: 100vw; + } + .panel:nth-of-type(4),.panel:nth-of-type(5),.panel:nth-of-type(6){ + display: none; + } + } + + .whatsapp-tag{ + color: green; + + } + .email-tag{ + color: orange; + } + .availability .sunday-time{ + color: grey; + display: block; + + } + .monday-time{ + color: orange; + } + .hairServices-offered{ + display: flex; + justify-content: center; + align-items: center; + } + .events-offered{ + display: flex; + justify-content: center; + align-items: center; + } + .event-list{ + text-align: center; + list-style:none; + font-size: 20px; + } + .hair-list{ + text-align: center; + list-style:none; + font-size: 20px; + } + .hair-list li{ + padding: 20px; + margin: 0; + } + .event-list li{ + padding: 20px; + } + .hair-price{ + text-align: center; + list-style:none; + font-size: 20px; + } + .hair-price li{ + padding: 20px; + } + .warning{ + color: red; + text-align: center; + } + .event-heading{ + text-align: center; + } + + @media (max-width:600px){ + .hair-price li{ + padding-top: 31px; + } + .hair-list li{ + + padding-top: 15px; + margin: 0; + padding-bottom: 25px; + } + body{ + margin: 0; + } + + html,body{ + overflow-x: hidden; + } + .narytha-service{ + padding-top: 25px; + } + .second{ + padding-bottom: 0; + } + .third{ + padding: 0; + } + } \ No newline at end of file