Add files via upload

bayan-almasri10 · Dec 28, 2023 · 8739b27 · 8739b27
1 parent b6a5f81
commit 8739b27
Show file tree

Hide file tree

Showing 23 changed files with 236 additions and 316 deletions.
diff --git a/css/slicez.css b/css/slicez.css
diff --git a/imgs/adCreactive.png b/imgs/adCreactive.png
diff --git a/imgs/brandIdentity.png b/imgs/brandIdentity.png
diff --git a/imgs/concept.png b/imgs/concept.png
diff --git a/imgs/digitalMarkiting.png b/imgs/digitalMarkiting.png
diff --git a/imgs/eBook.png b/imgs/eBook.png
diff --git a/imgs/email.png b/imgs/email.png
diff --git a/imgs/halfLogo.png b/imgs/halfLogo.png
diff --git a/imgs/illustration.png b/imgs/illustration.png
diff --git a/imgs/interior.png b/imgs/interior.png
diff --git a/imgs/landingBack.png b/imgs/landingBack.png
diff --git a/imgs/logo.png b/imgs/logo.png
diff --git a/imgs/mainBackground.png b/imgs/mainBackground.png
diff --git a/imgs/motionDesign.png b/imgs/motionDesign.png
diff --git a/imgs/packaging.png b/imgs/packaging.png
diff --git a/imgs/presentation.png b/imgs/presentation.png
diff --git a/imgs/printDesign.png b/imgs/printDesign.png
diff --git a/imgs/slicez-UXU.png b/imgs/slicez-UXU.png
diff --git a/imgs/socialMedia.png b/imgs/socialMedia.png
diff --git a/imgs/video.png b/imgs/video.png
diff --git a/imgs/webDesign.png b/imgs/webDesign.png
diff --git a/index.html b/index.html
@@ -15,11 +15,11 @@
     <title>Slicez</title>
 </head>
 <body>
-    <script src="./js/script.js"></script>
+
     <!-- start header -->
     <header>
         <div class="container">
-            <a href="#"> <img class="logo" src="./imgs/slicez-UXUI$.png"></a>
+            <a href="#"> <img class="logo" src="./imgs/logo.png"></a>
             <label class="bar">
                 <input type="checkbox" class="bar"/>
                 <i class="fa-solid fa-bars"></i>
@@ -37,7 +37,7 @@
                                 <a href="#services"><i class="fa-solid fa-building"></i>Services</a>
                             </li>
                             <li>
-                                <a href="#work"><i class="fa-solid fa-square-check"></i>Our Works</a>
+                                <a href="#portfolio"><i class="fa-solid fa-square-check"></i>Our Works</a>
                             </li>
                             <li>
                                 <a href="#clients"><i class="fa-solid fa-users"></i>Clients</a>
@@ -69,7 +69,7 @@
                                     <a href="#services"><i class="fa-solid fa-building"></i>Services</a>
                                 </li>
                                 <li>
-                                    <a href="#work"><i class="fa-solid fa-square-check"></i>Our Works</a>
+                                    <a href="#portfolio"><i class="fa-solid fa-square-check"></i>Our Works</a>
                                 </li>
                                 <li>
                                     <a href="#clients"><i class="fa-solid fa-users"></i>Clients</a>
@@ -114,87 +114,99 @@ <h2>Welcome To SLICEZ World</h2>
                 <h3 class="header">About US...</h3>
                 <p>In 2019, Slicez launched amidst the challenges of the COVID-19 pandemic, demonstrating resilience and determination. Despite the difficult circumstances, the company focused on providing effective digital marketing support to clients, helping them navigate the changing business landscape. Slicez emphasizes the importance of adaptability and remains committed to offering top-notch design and marketing solutions within any budget. Positioned in a dynamic industry, the company is dedicated to outshining the competition, guided by a strong management team that prioritizes ongoing education and innovation. Unlike others, Slicez refuses to settle for mediocrity and tirelessly pursues the triumph of its customers, recognizing the intertwining of their success with its own journey.</p>
             </div>
-            <!-- <a href="#home" class="go-up">
-                <i class="fa-solid fa-angles-up fa-2x"></i>     
-            </a> -->
         </div>
     </div>
     <!-- end About -->
 
     <!-- start Services -->
     <div class="services" id="services">
         <h2 class="main-title">Services</h2>
+        <h4>You Can Select The Service That You Need Here.</h4>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, fugiat? Iusto distinctio quam laborum laboriosam sed fuga illo quasi. Sint assumenda veniam libero dolore sapiente odio. Praesentium, nulla omnis? Officia!</p>
         <div class="container">
-            <div class="box">
-                <i class="fa-solid fa-bullhorn  fa-4x"></i>
-                <h3>Ad Creative</h3>
-                <a class="contButton" href="#contact">contact us</a>
-
+            <div class="adCreactive box">
+                <div class="info">
+                    <h2>Ad Creative</h2>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>       
+                </div>
             </div>
-            <div class="box">
-                <i class="fa-solid fa-hashtag fa-4x"></i> 
-                <h3>Social Media Creative</h3>
-                <a class="contButton" href="#contact">contact us</a>
+            <div class="socialMedia box">
+                <div class="info">
+                    <h2>Social Media Creative</h2>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>    
+                </div>
             </div>
-            <div class="box">
-                <i class="fa-solid fa-envelope fa-4x"></i>
-                <h3>Email Design</h3>
-                <a class="contButton" href="#contact">contact us</a>
+            <div class="email box">
+                <div class="info">
+                    <h2>Email Design</h2>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>  
+                </div>
             </div>
-            <div class="box">
-                <i class="fa-solid fa-display fa-4x"></i>
-                <h3>Web Design</h3>
-                <a class="contButton" href="#contact">contact us</a>
+            <div class="webDesign box">
+                <div class="info">
+                    <h2>Web Design</h2>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> 
+                </div>
             </div>
-            <div class="box">
-                <i class="fa-solid fa-person-chalkboard fa-4x"></i>
-                <h3>Presentation Design</h3>
-                <a class="contButton" href="#contact">contact us</a>
+            <div class="presentation box">
+                <div class="info">
+                    <h2>Presentation Design</h2>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>  
+                </div>
             </div>
-            <div class="box">
-                <i class="fa-solid fa-box-open"></i>
-                <h3>Packaging  Merch Design</h3>
-                <a class="contButton" href="#contact">contact us</a>
+            <div class="packaging box">
+                <div class="info">
+                    <h2>Packaging<br>Merch Design</h2>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>  
+                </div>
             </div>
-            <div class="box">
-                <i class="fa-solid fa-book fa-4x"></i>
-                <h3>eBook Digital Report Design</h3>
-                <a class="contButton" href="#contact">contact us</a>
+            <div class="eBook box">
+                <div class="info">
+                    <h2>eBook Digital<br>Report Design</h2>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>  
+                </div>
             </div>
-            <div class="box">
-                <i class="fa-solid fa-print fa-4x"></i>
-                <h3>Print Design</h3>
-                <a class="contButton" href="#contact">contact us</a>
+            <div class="printDesign box">
+                <div class="info">
+                    <h2>Print Design</h2>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+                </div>
             </div>
-            <div class="box">
-                <i class="fa-solid fa-clapperboard"></i>
-                <h3>Motion Design</h3>
-                <a class="contButton" href="#contact">contact us</a>
+            <div class="motionDesign box">
+                <div class="info">
+                    <h2>Motion Design</h2>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>  
+                </div>
             </div>
-            <div class="box">
-                <i class="fa-solid fa-people-group fa-4x"></i>
-                <h3>Illustration Design</h3>
-                <a class="contButton" href="#contact">contact us</a>
+            <div class="illustration box">
+                <div class="info">
+                    <h2>Illustration<br>Design</h2>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>  
+                </div>
             </div>
-            <div class="box">
-                <i class="fa-solid fa-address-card fa-4x"></i>
-                <h3>Brand Identity Design</h3>
-                <a class="contButton" href="#contact">contact us</a>
+            <div class="brandIdentity box">
+                <div class="info">
+                    <h2>Brand Identity Design</h2>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+                </div>
             </div>
-            <div class="box">
-                <i class="fa-solid fa-people-group fa-4x"></i>
-                <h3>Concept Creation</h3>
-                <a class="contButton" href="#contact">contact us</a>
+            <div class="concept box">
+                <div class="info">
+                    <h2>Concept<br>Creation</h2>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>  
+                </div>
             </div>
-            <div class="box">
-                <i class="fa-solid fa-video fa-4x"></i>
-                <h3>Video Production</h3>
-                <a class="contButton" href="#contact">contact us</a>
+            <div class="video box">
+            <div class="info">
+                <h2>Video<br>Production</h2>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> 
             </div>
-            <div class="box">
-                <i class="fa-solid fa-person-rays fa-4x"></i>
-                <h3>Digital Marketing <br> Consulting</h3>
-                <a class="contButton" href="#contact">contact us</a>
+            </div>
+            <div class="digitalMarkiting box">
+                <div class="info">
+                    <h2>Digital<br>Marketing<br> Consulting</h2>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>  
+                </div>
             </div>
         </div>
     </div>
@@ -320,10 +332,8 @@ <h3>Digital Marketing <br> Consulting</h3>
     <div class="feedback" id="feedback">
         <h2 class="main-title">FeedBacks</h2>
         <div class="container">
-
             <div class="sliderF-container">
                 <div class="sliderF">
-
                     <div class="slideF" id="slide1">
                     <div class="box">
                         <img src="./imgs/p5.jpg" alt="">
@@ -436,6 +446,7 @@ <h3>Mazaj food</h3>
     <!-- start Clients -->
     <div class="clients" id="clients">
         <img class="logos" src="./imgs/logos-slicez.png" alt="">
+        <img class="logosMobile" src="./imgs/slicez-UXU.png" alt="">
     </div>
     <!-- end Clients -->
 
@@ -457,39 +468,39 @@ <h3>Mazaj food</h3>
                     </li>
                     <li>
                         <a href="https://www.instagram.com/slice.z/?fbclid=IwAR0HUhjabW974hzEfc86_pwAp8ZssJE-bTjNbyCcyc3NGv-gcDShl_lQKfU"  target="_blank">
-                            <!-- <i class="fa-brands fa-instagram"></i> -->
                             <img class="ico" src="./imgs/SZ-19.png" alt="">
                         </a>
                     </li>
-                    <!-- <li>
+                    <li>
                         <a  href="https://www.linkedin.com/company/slicez/?viewAsMember=true"  target="_blank">
                             <i class="fa-brands fa-linkedin ico"></i>
                         </a>
-                    </li> -->
+                    </li>
                 </ul>
             </div>
             <div class="box">
                 <div class="line">
                     <i class="fa-solid fa-location-dot"></i>
-                    <div class="info">Algeria ,Eloude ,Moustafawi Center</div>
+                    <div class="info"><a href="https://maps.app.goo.gl/HKydJgj8XFLPg9Fk6" target="_blank">Algeria ,Eloude ,Moustafawi Center</a> </div>
                 </div>
                 <div class="line">
                     <i class="fa-solid fa-envelope"></i>
-                    <a href="mailto:[email protected]">[email protected]</a>
+                    <a href="mailto:[email protected]" target="_blank">[email protected]</a>
                 </div> 
                 <div class="line">
                     <i class="fa-solid fa-phone-volume"></i>
-                    <a href="tel:+213 775444324">+213 775444324</a>
+                    <a href="tel:+213 775444324" target="_blank">+213 775444324</a>
                 </div>
             </div>
         </div>
-        <p class="copyright">Made With <i class="fa-solid fa-heart"></i> By Bayan </p>
+        <p class="copyright">Made With <i class="fa-solid fa-heart"></i> By BayanDev </p>
     </div>
     <!-- end footer -->
 
     <!-- Back to Top -->
     <div class="container">
     <a href="#" class="btn btn-primary p-3 back-to-top"><i class="fa fa-angle-double-up"></i></a>
     </div>
+    <script src="./js/script.js"></script>
 </body>
 </html>
diff --git a/js/script.js b/js/script.js
@@ -67,6 +67,20 @@ document.querySelectorAll('.dot').forEach((dot, index) => {
 });
 
 
+ // Back to top button
+$(window).scroll(function () {
+    if ($(this).scrollTop() > 100) {
+        $('.back-to-top').fadeIn('slow');
+    } else {
+        $('.back-to-top').fadeOut('slow');
+    }
+});
+$('.back-to-top').click(function () {
+    $('html, body').animate({scrollTop: 0}, 1500, 'easeInOutExpo');
+    return false;
+});
+
+