fix

SofiV · Nov 30, 2021 · 12f50b8 · 12f50b8
commit 12f50b8
Show file tree

Hide file tree

Showing 145 changed files with 14,217 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+node_modules/
+.idea
+.IDEA
+package-lock.json
+.DS_Store
diff --git a/app/fonts/DM_Sans/DMSans-Bold.ttf b/app/fonts/DM_Sans/DMSans-Bold.ttf
diff --git a/app/fonts/DM_Sans/DMSans-BoldItalic.ttf b/app/fonts/DM_Sans/DMSans-BoldItalic.ttf
diff --git a/app/fonts/DM_Sans/DMSans-Italic.ttf b/app/fonts/DM_Sans/DMSans-Italic.ttf
diff --git a/app/fonts/DM_Sans/DMSans-Medium.ttf b/app/fonts/DM_Sans/DMSans-Medium.ttf
diff --git a/app/fonts/DM_Sans/DMSans-MediumItalic.ttf b/app/fonts/DM_Sans/DMSans-MediumItalic.ttf
diff --git a/app/fonts/DM_Sans/DMSans-Regular.ttf b/app/fonts/DM_Sans/DMSans-Regular.ttf
diff --git a/app/img/Hand-Drawn-Tropical-Floral-Bg.jpeg b/app/img/Hand-Drawn-Tropical-Floral-Bg.jpeg
diff --git a/app/img/Ordering Page _ PaperHelp.org.html b/app/img/Ordering Page _ PaperHelp.org.html
diff --git a/app/img/Tom-Grand-Matter.jpeg b/app/img/Tom-Grand-Matter.jpeg
diff --git a/app/img/arrow.svg b/app/img/arrow.svg
diff --git a/app/img/arrow2.svg b/app/img/arrow2.svg
diff --git a/app/img/casual-life-3d-10.png b/app/img/casual-life-3d-10.png
diff --git a/app/img/casual-life-3d-11.png b/app/img/casual-life-3d-11.png
diff --git a/app/img/casual-life-3d-16.png b/app/img/casual-life-3d-16.png
diff --git a/app/img/casual-life-3d-apple.png b/app/img/casual-life-3d-apple.png
diff --git a/app/img/casual-life-3d-cactus-Mirror.png b/app/img/casual-life-3d-cactus-Mirror.png
diff --git a/app/img/casual-life-3d-cactus.png b/app/img/casual-life-3d-cactus.png
diff --git a/app/img/casual-life-3d-freelancer-workspace-1.png b/app/img/casual-life-3d-freelancer-workspace-1.png
diff --git a/app/img/casual-life-3d-freelancer-workspace.png b/app/img/casual-life-3d-freelancer-workspace.png
diff --git a/app/img/casual-life-3d-hand-cursor.png b/app/img/casual-life-3d-hand-cursor.png
diff --git a/app/img/casual-life-3d-heart.png b/app/img/casual-life-3d-heart.png
diff --git a/app/img/casual-life-3d-likes-2.png b/app/img/casual-life-3d-likes-2.png
diff --git a/app/img/casual-life-3d-likes-6.png b/app/img/casual-life-3d-likes-6.png
diff --git a/app/img/casual-life-3d-likes.png b/app/img/casual-life-3d-likes.png
diff --git a/app/img/casual-life-3d-plant-1-Mirror.png b/app/img/casual-life-3d-plant-1-Mirror.png
diff --git a/app/img/casual-life-3d-plant-1.png b/app/img/casual-life-3d-plant-1.png
diff --git a/app/img/casual-life-3d-plant-2.png b/app/img/casual-life-3d-plant-2.png
diff --git a/app/img/casual-life-3d-plant-3.png b/app/img/casual-life-3d-plant-3.png
diff --git a/app/img/casual-life-3d-plant.png b/app/img/casual-life-3d-plant.png
diff --git a/app/img/casual-life-3d-reading.png b/app/img/casual-life-3d-reading.png
diff --git a/app/img/fbb.svg b/app/img/fbb.svg
diff --git a/app/img/heart_1.png b/app/img/heart_1.png
diff --git a/app/img/heart_2.png b/app/img/heart_2.png
diff --git a/app/img/heart_3.png b/app/img/heart_3.png
diff --git a/app/img/instab.svg b/app/img/instab.svg
diff --git a/app/img/mail.svg b/app/img/mail.svg
diff --git a/app/img/tomabbisssmithart.jpeg b/app/img/tomabbisssmithart.jpeg
diff --git a/app/includes/components/form-subscribe.html b/app/includes/components/form-subscribe.html
@@ -0,0 +1,18 @@
+<form id="contactUsForm" class="form-custom-modal form-custom">
+    <div class="row">
+        <div class="form-group col-12 wow animate__animated animate__fadeInUp">
+            <input class="form-control" id="inputName" type="text" name="user-name">
+            <label for="inputName">Your name</label>
+            <div class="error-text" style="display: none"></div>
+        </div>
+
+        <div class="form-group col-12 wow animate__animated animate__fadeInUp">
+            <input type="email" class="form-control" id="inputEmailAddress" name="email">
+            <label for="inputEmailAddress">Email</label>
+            <div class="error-text" style="display: none"></div>
+        </div>
+    </div>
+
+    <button type="submit" class="btn btn-main-color btn-send wow animate__animated animate__fadeInUp">Send</button>
+
+</form>
diff --git a/app/includes/components/nav-say-hi.html b/app/includes/components/nav-say-hi.html
@@ -0,0 +1,23 @@
+<button class="btn-main-color btn-hi hvr-buzz-out btn" data-say-hi="" type="button">Say Hi!</button>
+
+<div class="toggle-rigth-hi">
+    <button class="btn-hi-close btn" data-say-hi="" type="button">
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+    </button>
+
+    <div class="rigth-hi-inner">
+        <div class="toggle-hi-text">Hey! 👋 </div>
+        <div class="toggle-hi-contscts">
+            <div class="toggle-hi-welcome">
+                We are here for you!
+            </div>
+            Send an
+            <a href="mailto:[email protected]?subject=Hello!" class="link-2">email</a>
+            or
+            <a href="tel:+48011011011" class="link-3">call</a>
+            us.
+        </div>
+    </div>
+</div>
diff --git a/app/includes/components/plant-pot.html b/app/includes/components/plant-pot.html
@@ -0,0 +1,5 @@
+<div class="plant-canvas">
+    <div id="canvas_container_div">
+        <canvas id="canvas" width="1000" height="1000"></canvas>
+    </div>
+</div>
diff --git a/app/includes/components/services-arrow.html b/app/includes/components/services-arrow.html
@@ -0,0 +1,5 @@
+<svg class="" style="display: block; width: 90%; height: 100%;" width="897" height="833" viewBox="0 0 897 833" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path class="wow animate__animated animate__headShake" d="M331.103 480.232L40.0003 636.518C40.0003 636.518 320.652 787.192 330.82 792.651" stroke="#275768" stroke-width="80" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M857 40C857 369.562 570.215 636.24 215.804 636.24L40 636.227" stroke="#275768" stroke-width="80" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+
diff --git a/app/includes/footer.html b/app/includes/footer.html
@@ -0,0 +1,9 @@
+<script src="./libs/jquery/dist/jquery.min.js"></script>
+<script defer src="./libs/bootstrap/bootstrap.bundle.min.js"></script>
+<script defer src="./libs/animate/wow.min.js"></script>
+<script defer src="./js/scripts.min.js"></script>
+<script type="text/javascript">
+
+</script>
+</body>
+</html>
diff --git a/app/includes/header.html b/app/includes/header.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>Cape Morris Test</title>
+    <meta name="description" content="">
+
+    <link rel="stylesheet" href="./libs/bootstrap/bootstrap.min.css">
+    <link rel="stylesheet" href="./libs/animate/animate.min.css">
+    <link rel="stylesheet" href="./css/main.min.css">
+
+</head>
+<body>
+
diff --git a/app/includes/hero/hero.html b/app/includes/hero/hero.html
@@ -0,0 +1,39 @@
+<section class="hero-wrapper">
+    <div class="container-fluid position-relative container-animation">
+        <div class="plant-animation-wrap plant-animation--1 animate__animated animate__slideInLeft">
+            <div class="cloud-header-img-bg cloud-header-img-bg--1">
+                <img src="./img/casual-life-3d-plant-1-Mirror.png" alt="animation figure"
+                     class="object object--1" data-value="2">
+            </div>
+        </div>
+
+        <div class="plant-animation-wrap plant-animation--2 animate__animated animate__slideInDown">
+            <div class="cloud-header-img-bg cloud-header-img-bg--2">
+                <img src="./img/casual-life-3d-plant-3.png" alt="animation figure" class="object object--2" data-value="6">
+            </div>
+        </div>
+
+        <div class="plant-animation-wrap plant-animation--3 animate__animated animate__slideInUp">
+            <div class="cloud-header-img-bg cloud-header-img-bg--3">
+                <img src="./img/casual-life-3d-cactus-Mirror.png" alt="animation figure" class="object object--3" data-value="4">
+            </div>
+        </div>
+
+        <div class="plant-animation-wrap plant-animation--4 animate__animated animate__slideInUp">
+            <div class="cloud-header-img-bg cloud-header-img-bg--4">
+                <img src="./img/casual-life-3d-plant-2.png" alt="animation figure" class="object object--4" data-value="4">
+            </div>
+        </div>
+
+        <div class="hero-wrapper-inner">
+            <div class="hero-row">
+                <div class="hero-wrapper-left">
+                    <h1 class="hero-h1 animate__animated animate__slideInDown">What is<br> Lorem Ipsum?</h1>
+                    <div class="sub-title animate__animated animate__fadeIn">
+                        Lorem Ipsum is simply dummy text.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
diff --git a/app/includes/navbar/navbar.html b/app/includes/navbar/navbar.html
@@ -0,0 +1,24 @@
+<nav class="navbar navbar-expand-lg navbar-light navbar-top">
+    <div class="navbar-top-inner">
+        <a class="navbar-brand" href="/">Cape Morris</a>
+
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerHeader"
+                aria-controls="navbarTogglerHeader" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+    </div>
+
+    <div class="collapse navbar-collapse" id="navbarTogglerHeader">
+        <ul class="navbar-nav">
+            <li class="nav-item">
+                <a class="nav-link" href="#">Services</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#">About Us</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#">Contact Us</a>
+            </li>
+        </ul>
+    </div>
+</nav>
diff --git a/app/includes/sections/about-us.html b/app/includes/sections/about-us.html
@@ -0,0 +1,20 @@
+<section id="about_us" class="about-us-col col-12">
+    <div class="about-us section-general main-color-bg">
+
+        <div class="section-inside-title wow animate__animated animate__fadeInUp">about us</div>
+        <h2 class="section-title-h2 wow animate__animated animate__fadeInUp">What is Lorem Ipsum?</h2>
+
+        <div class="section-inside-text wow animate__animated animate__fadeInUp"> Lorem Ipsum is simply dummy text of
+            the printing and typesetting industry.
+            Lorem
+            Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
+            galley of
+            type and scrambled it to make a type specimen book.
+        </div>
+
+        <button class="btn-white btn wow animate__animated animate__fadeInUp" type="button">Lorem Ipsum!</button>
+        <div class="icon-about icon-about--1 wow animate__animated animate__slideInRight"></div>
+        <div class="icon-about icon-about--2 wow animate__animated animate__slideInRight"></div>
+        <div class="icon-about icon-about--3 wow animate__animated animate__slideInRight"></div>
+    </div>
+</section>
diff --git a/app/includes/sections/footer-section.html b/app/includes/sections/footer-section.html
@@ -0,0 +1,30 @@
+<footer class="footer-wrap">
+    <div class="container">
+        <div class="row">
+            <div class="footer-col col-md-4 col-12">
+                <div class="footer-caption">Contact Us</div>
+                <div class="footer-item">
+                    <a href="mailto:[email protected]?subject=Hello!" class="footer-link colorGrey">[email protected]</a>
+                </div>
+                <div class="footer-item">
+                    <a href="tel:+48011011011" class="footer-link colorGrey">+48 011 011 011</a>
+                </div>
+            </div>
+
+            <div class="footer-col col-md-4 col-12">
+                <div class="footer-caption">Come Visit</div>
+                <div class="colorGrey">1 Lorem Ipsum Street, Test</div>
+
+                <div class="d-flex social">
+                    <a class="social-icon" href="#">
+                        <img src="./img/fbb.svg" alt="">
+                    </a>
+                    <a class="social-icon" href="#">
+                        <img src="./img/instab.svg" alt="">
+                    </a>
+                </div>
+            </div>
+            <div class="col-12 colorGrey rigths-text">All rights reserved ©2021 Test&Test</div>
+        </div>
+    </div>
+</footer>
diff --git a/app/includes/sections/services.html b/app/includes/sections/services.html
@@ -0,0 +1,14 @@
+<section id="services" class="col">
+    <div class="services section-general second-main-color-bg text-center">
+        @@include('../components/plant-pot.html')
+
+        <div class="arrow-services  ">
+            @@include('../components/services-arrow.html')
+        </div>
+
+        <a class="section-services-link wow animate__animated animate__fadeInUp" href="#">View All Plants.</a>
+        <div class="section-inside-text wow animate__animated animate__fadeInUp">
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+        </div>
+    </div>
+</section>
diff --git a/app/includes/sections/stay-updated.html b/app/includes/sections/stay-updated.html
@@ -0,0 +1,10 @@
+<div id="stay_updated" class="stay-updated-col">
+    <div id="stay_updated_inner" class="stay-updated section-general section-col-6">
+        <h3 class="section-title-h3 wow animate__animated animate__fadeInUp">Stay Updated.</h3>
+        <div class="section-subtitle wow animate__animated animate__fadeInUp">Subscribe to our Newsletter</div>
+        @@include('../components/form-subscribe.html')
+        <div class="stay-updated-success mt-4" style="display: none">
+            Thank you! Your submission has been received! :)
+        </div>
+    </div>
+</div>
diff --git a/app/index.html b/app/index.html
@@ -0,0 +1,11 @@
+@@include('./includes/header.html')
+@@include('./includes/navbar/navbar.html')
+@@include('./includes/hero/hero.html')
+@@include('./includes/components/nav-say-hi.html')
+<div class="margin-col row">
+    @@include('./includes/sections/about-us.html')
+    @@include('./includes/sections/services.html')
+    @@include('./includes/sections/stay-updated.html')
+</div>
+@@include('./includes/sections/footer-section.html')
+@@include('./includes/footer.html')
diff --git a/app/js/common.js b/app/js/common.js
@@ -0,0 +1,42 @@
+$(document).ready(function () {
+    // add class on open header
+    $('.navbar-top .navbar-toggler').on('click', function () {
+        $(this).parents('.navbar-top').toggleClass('head-active-menu');
+    });
+    //END add class on open header
+
+    // label
+    $('.form-custom input').on('focus change blur', function () {
+        if ($(this).val() !== "") {
+            $(this).addClass("focus-label");
+        } else {
+            $(this).removeClass("focus-label");
+        }
+    });
+    //END label
+
+    //WOW init
+    new WOW().init();
+    //END WOW init
+
+    // Say HI BTN
+    $('[data-say-hi]').on('click', function () {
+        $(this).parents().find('.toggle-rigth-hi').siblings().not(".toggle-rigth-hi").toggleClass('blur');
+        $(this).parents().find('.toggle-rigth-hi').toggleClass('toggle-hi-active');
+    });
+    // END Say HI BTN
+
+    // HERO MOUSE MOVE
+    document.addEventListener("mousemove", parallax);
+    function parallax(e){
+        document.querySelectorAll(".object").forEach(function(move){
+
+            var moving_value = move.getAttribute("data-value");
+            var x = (e.clientX * moving_value) / 100;
+            var y = (e.clientY * moving_value) / 100;
+
+            move.style.transform = "translateX(" + x + "px) translateY(" + y + "px)";
+        });
+    }
+    // END HERO MOUSE MOVE
+});
diff --git a/app/js/custom-hover-animation.js b/app/js/custom-hover-animation.js
@@ -0,0 +1,32 @@
+let constrain = 30;
+let mouseOverContainer = document.getElementById("stay_updated");
+let rotateBlock = document.getElementById("stay_updated_inner");
+
+function transforms(x, y, el) {
+    let box = el.getBoundingClientRect();
+    let calcX = -(y - box.y - (box.height / 2)) / constrain;
+    let calcY = (x - box.x - (box.width / 2)) / constrain;
+
+    return "perspective(3000px) "
+        + "   rotateX(" + calcX + "deg) "
+        + "   rotateY(" + calcY + "deg) ";
+};
+
+function transformElement(el, xyEl) {
+    el.style.transform = transforms.apply(null, xyEl);
+}
+
+var onMouseLeaveHandler = function () {
+    rotateBlock.style = "transform: rotateX(0deg) rotateY(0deg)";
+};
+
+mouseOverContainer.onmousemove = function (e) {
+    let xy = [e.clientX, e.clientY];
+    let position = xy.concat([rotateBlock]);
+
+    window.requestAnimationFrame(function () {
+        transformElement(rotateBlock, position);
+    });
+};
+
+mouseOverContainer.onmouseleave = onMouseLeaveHandler;