PC homes section added Animation

richardkanai123 · Aug 10, 2021 · 60fe3f5 · 60fe3f5
commit 60fe3f5
Show file tree

Hide file tree

Showing 64 changed files with 376 additions and 0 deletions.
diff --git a/Images/Camera1.png b/Images/Camera1.png
diff --git a/Images/Canon Camera1.png b/Images/Canon Camera1.png
diff --git a/Images/Commputer4.png b/Images/Commputer4.png
diff --git a/Images/ComputerA1.png b/Images/ComputerA1.png
diff --git a/Images/ComputerA2.png b/Images/ComputerA2.png
diff --git a/Images/ComputerA3.png b/Images/ComputerA3.png
diff --git a/Images/ComputerG1.png b/Images/ComputerG1.png
diff --git a/Images/ComputerG2.png b/Images/ComputerG2.png
diff --git a/Images/ComputerG3.png b/Images/ComputerG3.png
diff --git a/Images/ComputerG4.png b/Images/ComputerG4.png
diff --git a/Images/ComputerG5.png b/Images/ComputerG5.png
diff --git a/Images/ComputerG6.png b/Images/ComputerG6.png
diff --git a/Images/HdCamera1.png b/Images/HdCamera1.png
diff --git a/Images/HdCamera2 Canon.png b/Images/HdCamera2 Canon.png
diff --git a/Images/Headphone1.png b/Images/Headphone1.png
diff --git a/Images/Headphone10.png b/Images/Headphone10.png
diff --git a/Images/Headphone2.png b/Images/Headphone2.png
diff --git a/Images/Headphone3.png b/Images/Headphone3.png
diff --git a/Images/Headphone4.png b/Images/Headphone4.png
diff --git a/Images/Headphone5.png b/Images/Headphone5.png
diff --git a/Images/Headphone6.png b/Images/Headphone6.png
diff --git a/Images/Headphone7.png b/Images/Headphone7.png
diff --git a/Images/Headphone8.png b/Images/Headphone8.png
diff --git a/Images/Headphone9.png b/Images/Headphone9.png
diff --git a/Images/Nikon Camera1.png b/Images/Nikon Camera1.png
diff --git a/Images/Nikon Camera2.png b/Images/Nikon Camera2.png
diff --git a/Images/Phone1.png b/Images/Phone1.png
diff --git a/Images/Phone10.png b/Images/Phone10.png
diff --git a/Images/Phone2.png b/Images/Phone2.png
diff --git a/Images/Phone3.png b/Images/Phone3.png
diff --git a/Images/Phone4.png b/Images/Phone4.png
diff --git a/Images/Phone5.png b/Images/Phone5.png
diff --git a/Images/Phone6.png b/Images/Phone6.png
diff --git a/Images/Phone7.png b/Images/Phone7.png
diff --git a/Images/Phone8.png b/Images/Phone8.png
diff --git a/Images/Phone9.png b/Images/Phone9.png
diff --git a/Images/PortableCamera1.png b/Images/PortableCamera1.png
diff --git a/Images/Printer1.png b/Images/Printer1.png
diff --git a/Images/Printer10.png b/Images/Printer10.png
diff --git a/Images/Printer3.png b/Images/Printer3.png
diff --git a/Images/Printer4.png b/Images/Printer4.png
diff --git a/Images/Printer5.png b/Images/Printer5.png
diff --git a/Images/Printer6.png b/Images/Printer6.png
diff --git a/Images/Printer7.png b/Images/Printer7.png
diff --git a/Images/Printer8.png b/Images/Printer8.png
diff --git a/Images/Printer9.png b/Images/Printer9.png
diff --git a/Images/PrintersG.png b/Images/PrintersG.png
diff --git a/Images/Samsung Camera1.png b/Images/Samsung Camera1.png
diff --git a/Images/Samsung Camera2.png b/Images/Samsung Camera2.png
diff --git a/Images/SonyCamera1.png b/Images/SonyCamera1.png
diff --git a/Images/computermidicon.ico b/Images/computermidicon.ico
diff --git a/Images/computersmall icon.ico b/Images/computersmall icon.ico
diff --git a/Images/cover3600.png b/Images/cover3600.png
diff --git a/Images/cover400.png b/Images/cover400.png
diff --git a/Images/cover4600.png b/Images/cover4600.png
diff --git a/Images/cover5600.png b/Images/cover5600.png
diff --git a/Images/cover6600.png b/Images/cover6600.png
diff --git a/Images/coverimage2600.png b/Images/coverimage2600.png
diff --git a/Images/coveroriginal.png b/Images/coveroriginal.png
diff --git a/Images/logo.png b/Images/logo.png
diff --git a/Images/printer2.png b/Images/printer2.png
diff --git a/app.js b/app.js
@@ -0,0 +1,52 @@
+// get elements
+const D_image = document.querySelector(".DisplayImage")
+const IntroText = document.querySelector(".IntroText")
+
+
+/// animations
+
+// anime js 1. Display Image
+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});
+
+
+
+
+
+
+
+// display image changer every 5s
+const Covers = [
+    "(./Images/coveroriginal.png) center center /contain no-repeat",
+    "(./Images/cover6600.png) center center /contain no-repeat",
+    "(./Images/cover5600.png) center center /contain no-repeat",
+    "(./Images/cover4600.png) center center /contain no-repeat",
+    "(./Images/cover3600.png) center center /contain no-repeat"
+]
+
+const cycleImages = (images, container, step) => {
+      images.forEach((image, index) => (
+      setTimeout(() => {
+          container.style.background = "url"+`${image}`;
+      }, step * (index + 1))
+    ))
+    setTimeout(() => cycleImages(images, container, step), step * images.length)
+  }
+
+  cycleImages(Covers, D_image, 5000)
+
+
+
+
diff --git a/index.html b/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="shortcut icon" href="./Images/computermidicon.ico" type="image/x-icon">
+    <title>Rich Electriclas</title>
+        <script src="https://unpkg.com/scrollreveal"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">  
+    <link rel="stylesheet" href="style.css">
+
+</head>
+<body>
+    <header>
+        <div  id="logo" >
+            <img href="#" src="./Images/logo.png" alt="logo">
+        </div>
+
+        <nav>
+            <a href="#">Home</a>
+            <a href="#About">About us</a>
+            <a href="#Contact">Contact us</a>
+        </nav>
+
+        <div class="btns">
+            <i id="Cartbtn" class="bi bi-cart4"></i>
+            <i id="Modebtn" class="bi bi-brightness-high"></i>
+            <i id="MenuBtn" class="bi bi-list"></i>
+        </div>
+    </header>
+
+
+    <!-- Home DiV -->
+    <div class="Home" id="Home">
+
+        <div class="IntroText">
+            <h1>Convinience At Your Door Step.</h1>
+            <p>Get Best Electronics at an Affordable Price.</p>
+            <h3>Quality is Guaranteed.</h3>
+            <h5>Free 12 Months Waranty on ALL Products.</h5>
+
+            <div class="HomeBtns">
+                <a class="btn" href="#Products">Products</a>
+                <a class="btn" href="#Contact">Talk to Us</a>
+            </div>
+
+        </div>
+
+        <div class="DisplayImage"></div>
+
+    </div>
+
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js" integrity="sha512-LfB+BcvR3zBt7ebVskhSWiSbEUiG3p5EcCprkieldsKhBeR6wpnLi0VpWC2GNgVGWP2n/skO8Bx2oKNjUhXCkw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,266 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
+
+*{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+/* root variables */
+:root{
+    --dark1-color:#011738 ;
+    --dark2-color:#03396c;
+    --mid-color:#005b96;
+    --light2-color: #6497b1;
+    --light1-color:#9dccee;
+    --btn-bg-color: rgba(233, 154, 7, 0.966);
+    --btn-padding: 0 0.5rem;
+    --btn-font: 1rem 500;
+}
+
+html{
+    scroll-behavior: smooth;
+}
+
+a{
+    text-decoration: none;
+}
+
+body{
+    background-color: var(--light1-color);
+    font-family: 'Roboto', sans-serif;
+    position: relative;
+}
+
+header{
+    width: 100%;
+    height: 10vh;
+    display: flex;
+    padding: 1.0rem;
+    margin-bottom:1rem;
+    justify-content: space-between;
+    align-items: center;
+    text-align: center;
+    align-content: center;
+    /* border-bottom: solid; */
+    position: fixed;
+}
+
+#logo{
+    max-width: 200px;
+    pointer-events: all;
+    cursor: pointer;
+}
+
+
+#logo img{
+    width: 100%;
+    height: 100%;
+}
+
+nav{
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    text-align: center;
+    align-content: center;
+    width: 50rem;
+    height: 100%;
+}
+
+nav a{
+    color: var(--dark1-color);   
+    font-size: 1.0rem;
+    text-decoration: none;
+    text-transform: capitalize;
+    letter-spacing: 1px;
+    padding: 1rem;
+    margin: 0.5rem;
+    transition: all 0.5s ease;
+    justify-content: center;    
+}
+
+.btns{
+    display: flex;
+    justify-content: space-evenly;
+    width: 15rem;
+    min-height: 100%;
+    align-self: center;
+    text-align: center;
+    color: var(--dark2-color);
+}
+
+.btns i{
+    pointer-events: all;
+    cursor: pointer;
+    font-size: 1.5rem;
+    margin:0.5rem;
+    align-self: center;
+    text-align: center;
+    transition: all 1s ease;
+    padding: var(--btn-padding)
+}
+
+.btns i:hover, nav a:hover{
+    opacity: 0.7;
+    color: bisque;
+    transform: translateY(5px);
+}
+
+
+#Cartbtn:hover{
+    color: rgba(223, 150, 15, 0.87);
+}
+
+#MenuBtn{
+    display: none;
+}
+
+
+.Home{
+    padding:1.0rem;
+    display: flex;
+    width: 100%;
+    align-self: center;
+    align-items: center;
+    justify-content: space-around;
+    border: solid 2px;
+    height: 100vh;
+
+}
+
+.IntroText{
+    /* border: solid; */
+    padding: 1.0rem;
+    width: 500px;
+    color: var(--dark1-color);
+}
+
+
+.IntroText h1{
+    font-size: 3rem;
+    letter-spacing: 1px;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+    color: var(--dark1-color);
+}
+
+.IntroText p{
+    font-size: 1.5rem;
+    line-height: 1.4;
+    padding: 0.25rem;
+    margin-bottom: 1rem;
+}
+
+.IntroText h3{
+    font-size: 2rem;
+}
+
+.IntroText h5{
+    margin-bottom: 1rem;
+    font: 1.5rem bold;
+}
+
+.HomeBtns{
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    padding: (--btn-padding);
+    margin:0.5rem;
+}
+
+.DisplayImage{
+    width: 600px;
+    height: 90%;
+    margin-top: auto;
+    transition: all;
+    z-index: 2;
+    background: url(./Images/coveroriginal.png) center center /contain no-repeat;
+}
+
+.btn{
+    background-color: var(--btn-bg-color);
+    padding: 0.5rem 0.5rem;
+    font-size: 1rem;
+    font-weight: bold;
+    letter-spacing: 1px;
+    border-radius: 5px;
+    outline: none;
+    border: none;
+    cursor: pointer;
+    text-align: center;
+    margin:0 1.0rem;
+    color: var(--dark1-color);
+    width: 15rem;
+    transition: all 1s ease;
+}
+
+.btn:hover{
+    transform: translateY(10px);
+    border: solid 1px rgba(2, 88, 88, 0.589)  ;
+}
+
+
+
+
+/* ////////////////////////////////////////////////////////// */
+/* media queries */
+/* ///////////////////////////////////////////////////////////////////////////// */
+/* tablets */
+
+@media(max-width:800px){
+
+}
+
+
+
+/* /////////////////////////////////////////////////////////////////////////////////////////// */
+/* Phones */
+@media(max-width:600px){
+     body{
+        position: relative;
+     }
+
+     #logo{
+        width: 40%;
+     }
+
+     header{
+         position: relative;
+         padding-right: 1.5rem;
+     }
+
+     nav{
+        z-index: 5;
+        position: absolute;
+        width: 100vw;
+        left: 0;
+        height: 50vh;
+        color: whitesmoke;
+        align-self: center;
+        top: 10vh;
+        display: flex;
+        flex-direction: column;
+        background-color: var(--dark1-color);
+        margin: unset;
+        padding: unset;
+        display: none;
+    }
+
+    nav a{
+        display: block;
+        width: 100%;
+        color: whitesmoke;
+        border-bottom: solid blue 1px;
+        padding: auto;
+        margin: auto;
+    }
+
+
+
+    #MenuBtn{
+        display: unset;
+        pointer-events: all;
+        cursor: pointer;
+    }
+
+}