diff --git a/app.js b/app.js index 342488a..3b16dff 100644 --- a/app.js +++ b/app.js @@ -1,25 +1,31 @@ // get elements const D_image = document.querySelector(".DisplayImage") const IntroText = document.querySelector(".IntroText") - - +const MenuBtn = document.querySelector("#MenuBtn") +const Nav = document.querySelector("nav") /// animations // anime js 1. Display Image -anime({ - targets: '.DisplayImage', - border: ' solid #FFF', - borderRadius: ['0%', '50%', '0%'], - autoplay: true, - loop: true, - duration: 6000, - easing: 'easeInOutQuad' -}); +// anime({ +// targets: '.DisplayImage', +// border: ' solid #FFF', +// borderRadius: ['0%', '50%', '0%'], +// autoplay: true, +// loop: true, +// duration: 6000, +// easing: 'easeInOutQuad' +// }); // animate IntroText -ScrollReveal().reveal('.IntroText', { delay: 800}); -ScrollReveal().reveal('.HomeBtns', { delay: 1000}); +ScrollReveal().reveal('.IntroText', { delay: 500}); +ScrollReveal().reveal('.HomeBtns', { delay: 700}); +ScrollReveal().reveal('.DisplayImage', { delay: 800}); +ScrollReveal().reveal('.ProductCard', { delay: 1000}); +ScrollReveal().reveal('form', { delay: 1000}); +ScrollReveal().reveal('.SocialLinks', { delay: 1000}); +ScrollReveal().reveal('.Links', { delay: 700}); +ScrollReveal().reveal('#About', { delay: 900}); @@ -36,17 +42,30 @@ const Covers = [ "(./Images/cover3600.png) center center /contain no-repeat" ] -const cycleImages = (images, container, step) => { +const ChangeImage = (images, container, step) => { images.forEach((image, index) => ( setTimeout(() => { container.style.background = "url"+`${image}`; }, step * (index + 1)) )) - setTimeout(() => cycleImages(images, container, step), step * images.length) - } + setTimeout(() => ChangeImage(images, container, step), step * images.length) +} - cycleImages(Covers, D_image, 5000) +ChangeImage(Covers, D_image, 5000) + +// menu btn for small screens +MenuBtn.addEventListener("click", ()=>{ + Nav.classList.toggle('Show'); +}) +window.onclick = function(e){ + let NavClass = e.target.parentElement.classList + if(NavClass == "Show"){ + Nav.classList.toggle('Show'); +} +} +// give header background on scrolling +// window.onscroll = document.querySelector("header").classList.add("Scrolled") \ No newline at end of file diff --git a/index.html b/index.html index 762f238..508e00f 100644 --- a/index.html +++ b/index.html @@ -19,13 +19,13 @@
-
@@ -51,8 +51,125 @@
Free 12 Months Waranty on ALL Products.
+ - +
+
+

Our Products

+ + + +
+ + +
+
+ Loading Image +

Lorem ipsum dolor sit amet.

+

Lorem, ipsum.

+

2012 Brand New

+

Ksh. 2300

+ +
+ +
+ Loading Image +

Lorem ipsum dolor sit amet.

+

Lorem, ipsum.

+

2012 Brand New

+

Ksh. 2300

+ +
+ +
+ Loading Image +

Lorem ipsum dolor sit amet.

+

Lorem, ipsum.

+

2012 Brand New

+

Ksh. 2300

+ +
+ +
+ Loading Image +

Lorem ipsum dolor sit amet.

+

Lorem, ipsum.

+

2012 Brand New

+

Ksh. 2300

+ +
+ +
+ + + + +
+

About RichTonics

+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim atque impedit repellat, accusantium dolorem qui sint quam non cum culpa ut! Ipsum soluta explicabo ad corrupti, numquam voluptatibus? Incidunt, reiciendis. Nihil at maiores, mollitia deserunt voluptates magnam totam ab dolorum minus, hic cupiditate, ad pariatur quaerat possimus dignissimos qui deleniti. +

+ +

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo dicta obcaecati culpa recusandae incidunt voluptas officiis similique rem quam a consequuntur, corrupti non, aliquid fuga saepe suscipit natus quas inventore. +

+ +
+
+

Contact Form

+ + + + + + + + + + + +
+ + + + +
+
+ +
+ + \ No newline at end of file diff --git a/style.css b/style.css index cc406aa..1b0ccec 100644 --- a/style.css +++ b/style.css @@ -11,18 +11,26 @@ --dark2-color:#03396c; --mid-color:#005b96; --light2-color: #6497b1; + --light3-color: #6497b1dc; --light1-color:#9dccee; --btn-bg-color: rgba(233, 154, 7, 0.966); --btn-padding: 0 0.5rem; --btn-font: 1rem 500; + --card-bg-color:#0a91b3bd; } html{ scroll-behavior: smooth; + width: 100vw; } a{ text-decoration: none; + cursor: pointer; +} + +button{ + cursor: pointer; } body{ @@ -41,8 +49,9 @@ header{ align-items: center; text-align: center; align-content: center; - /* border-bottom: solid; */ position: fixed; + z-index: 5; + background: var(--light3-color); } #logo{ @@ -118,18 +127,17 @@ nav a{ .Home{ padding:1.0rem; + padding-bottom: 2rem; display: flex; width: 100%; align-self: center; align-items: center; justify-content: space-around; - border: solid 2px; height: 100vh; - + border-bottom: solid 1px var(--dark1-color); } .IntroText{ - /* border: solid; */ padding: 1.0rem; width: 500px; color: var(--dark1-color); @@ -149,6 +157,7 @@ nav a{ line-height: 1.4; padding: 0.25rem; margin-bottom: 1rem; + text-align: left; } .IntroText h3{ @@ -158,6 +167,7 @@ nav a{ .IntroText h5{ margin-bottom: 1rem; font: 1.5rem bold; + text-align: left; } .HomeBtns{ @@ -200,7 +210,183 @@ nav a{ } +.Products{ + padding:3.0rem 1rem 2rem 1rem; + display: flex; + flex-direction: column; + align-items: center; + border-bottom: 1px; + position: relative; +} + +.Products .ProductsHeader{ + margin: 1rem 0; + width: 99%; + border-bottom: solid black 1px; + align-items: center; + text-align: center; + padding-bottom: 0.5rem; +} + +.Products .ProductsHeader h1{ + margin: 0.5rem; + line-height: 1.5; + letter-spacing: 2px; + color: var(--dark2-color); +} + +.Products .ProductsHeader label{ + color: var(--dark1-color); + margin: 0 1rem; +} + +.Products .ProductsHeader select{ + height: 2rem; + width: 10rem; + background-color: var(--mid-color); + color: yellowgreen; +} + + +.CardsHolder{ + /* border: solid; */ + width: 99%; + display: flex; + flex-wrap: wrap; + align-content: center; + align-items: center; + justify-content: space-around; + padding: 0.5rem; +} + + +.ProductCard{ + width: 300px; + padding: 0.5rem; + margin: 0.5rem; + border: solid 1px; + /* background-color: var(--card-bg-color); */ + background: rgb(15,154,210); + background: linear-gradient(79deg, rgba(15,154,210,1) 41%, rgb(40, 71, 224) 63%); + color: var(--dark1-color); + border-radius: 10px; + align-items: center; + align-content: center; + text-align: left; + display: flex; + flex-direction: column; +} + +.ProductCard img{ + width: 200px; + height: 200px; + align-self: center; + margin: auto; +} + +.ProductCard h3{ + font-weight: bold; + margin: 0.25rem; +} + +#CartItem{ + cursor: grab; + width: 80%; + align-self: center; + margin: 0.5rem; +} + +.About{ + height: 90vh; + width: 99%; + padding: 3rem 1rem 1rem 1rem; + max-height: fit-content; +} + +.About h2{ + font-weight: bold; + line-height: 2; + letter-spacing: 1px; + text-decoration: underline 1px rgb(64, 64, 241); + margin: 0.5rem 0; +} + + +.About p{ + font-size: 1rem; + line-height: 1.4; + padding: 0.5rem; + margin: 0.5rem 0; +} + +.Contact{ + color: var(--dark1-color); + padding: 1rem; + display: flex; + width: 100%; +} + + +.Contact form{ + color: var(--dark1-color); + display: flex; + flex-direction: column; + width: 50%; + flex-wrap: wrap; + margin: 1rem; +} + +form input{ + height: 2rem; + outline: none; + border: none; + border-radius: 5px; + margin-top:0.25rem ; + padding: 0 0.75rem; + background: var(--light2-color); +} + +textarea{ + background: var(--light2-color ); +} + +form label{ + font-size: 1rem; +} + +form .btn{ + margin-top: 0.5rem; +} + + +.socialLinks{ + padding: 1rem; +} + +.socialLinks .Links{ + font-size: 1.5rem; + display: flex; + justify-content: space-around; + cursor: pointer; +} + +.footer{ + padding: 0.5rem; + margin: 1rem; +} + +.footer p{ + padding: unset; + margin: unset; +} + +ol{ + margin: 0.5rem; +} +ol li{ + margin: 0.25rem; +} /* ////////////////////////////////////////////////////////// */ /* media queries */ @@ -208,7 +394,44 @@ nav a{ /* tablets */ @media(max-width:800px){ + .Home{ + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + align-content: center; + padding-top: 3rem; + } + + .Home .IntroText{ + margin: unset; + margin-top: 3rem; + text-align: left; + width: 80%; + height: 50%; + display: flex; + flex-direction: column; + justify-content: space-evenly; + } + + .Home .DisplayImage{ + height: 40vh; + padding:0.5rem; + width: 70%; + } + + .IntroText .HomeBtns .btn{ + height: 3rem; + padding-top: unset; + padding:1rem; + margin: auto; + font-size: 1.2rem; + text-align: center; + } + + + } @@ -216,46 +439,89 @@ nav a{ /* /////////////////////////////////////////////////////////////////////////////////////////// */ /* Phones */ @media(max-width:600px){ + + *{ + box-shadow: none; + } + + html{ + max-width: 100vw; + padding:0 0.5rem; + } body{ position: relative; + min-width: 100%; + max-width: 100%; + left: 0; } #logo{ - width: 40%; + width: 30%; } header{ - position: relative; - padding-right: 1.5rem; + width: 100vw; + position: fixed; + /* padding: unset; */ + margin-bottom: unset; + left: 0; + z-index: 5; + } + + header.Scrolled{ + background-color: var(--mid-color); } nav{ - z-index: 5; position: absolute; - width: 100vw; + width: 0; left: 0; height: 50vh; color: whitesmoke; align-self: center; - top: 10vh; - display: flex; + top: 8vh; flex-direction: column; - background-color: var(--dark1-color); + background-color: var(--light2-color); margin: unset; padding: unset; - display: none; + transition: all 1s ease; + pointer-events: none; + z-index: -100; + opacity: 0; + border-bottom: none; + width: 100vw; + border-radius: 50%; + padding-bottom: 0; + transform: rotate(45deg); + transform-style:flat; + } + + + nav.Show{ + display: flex; + z-index: 5; + opacity: 1; + transform: rotate(0deg); + pointer-events: all; + transform: rotate(0deg); + width: 99%; + border-radius: unset; + margin: unset; } nav a{ display: block; width: 100%; color: whitesmoke; - border-bottom: solid blue 1px; padding: auto; margin: auto; + padding-bottom: 0; + font-size: 1.3rem; } - + header .btns{ + width: 45%; + } #MenuBtn{ display: unset; @@ -263,4 +529,154 @@ nav a{ cursor: pointer; } + .Home{ + padding: unset; + line-height: unset; + padding-top: 1.0rem; + align-items: center; + height: unset; + max-width: 99%; + border-bottom: none; + } + + .Home .IntroText{ + width: 100%; + height: fit-content; + } + + .IntroText h1{ + font-size: 1.8rem; + line-height: 1.1; + text-align: center; + } + + .IntroText p, .IntroText h5, .IntroText h3{ + text-align: center; + } + + .Home .DisplayImage{ + max-width: 90%; + } + + .HomeBtns{ + display: flex; + flex-direction: column; + justify-content: space-between; + flex-wrap: wrap; + height: unset; + padding: unset; + height: fit-content; + height: 200px; + width: 99%; + } + + .HomeBtns .btn{ + margin: 0.5rem; + width: 90%; + margin-bottom: 1rem; + } + + + .Products{ + padding-top: 2.0rem; + } + + .ProductCard{ + width: 310px; + } + + .About{ + height: unset; + width: 99%; + padding: 2rem 0.25rem 0.25rem 0.25rem; + max-height: fit-content; + margin: unset; + } + + .About h2{ + font-weight: bold; + line-height: 1; + letter-spacing: 1px; + margin: 0.25rem 0; + } + + + .About p{ + font-size: 1rem; + line-height: 1; + padding: 0.25rem; + margin: 0.25rem 0; + } + + .Contact{ + color: var(--dark1-color); + padding: 0.25rem; + display: flex; + flex-direction: column; + width: 99%; + align-items:center; + } + + + .Contact form{ + color: var(--dark1-color); + display: flex; + flex-direction: column; + width: unset; + max-width: 100%; + flex-wrap: wrap; + margin: 0rem; + } + + form input{ + width: 99%; + } + + textarea{ + background: var(--light2-color); + width: 99%; + } + + form label{ + font-size: 1rem; + } + + form .btn{ + margin-top: 0.25rem; + width: 80%; + align-self:center ; + } + + + .socialLinks{ + padding: 0.25rem; + width: 99%; + margin-top: 1rem; + } + + .socialLinks .Links{ + font-size: 1.0rem; + display: flex; + justify-content: space-around; + cursor: pointer; + } + + .footer{ + padding: 0.25rem; + margin: 0.5rem; + } + + .footer p{ + padding: unset; + margin: unset; + } + + ol{ + margin: 0.25rem; + } + + ol li{ + margin: 0.25rem; + } + } \ No newline at end of file