Luxestate Template

This is the source code to Luxestate Template From Graphberry. Making projects and templates help you improve your coding skills by building realistic projects.

Note: PSD file is available at design directory, or you can use a direct download link.

Table of contents

• Overview
  • How To Run The Code
  • Screenshots
  • Links
• My process
  • Built with
  • Style
  • What I learned
  • Useful resources
• Author

Overview

Running Code

To run the code and see the final HTML page, you must follow these steps:

• Install all required dependencies using npm, write npm install in root directory with terminal.

• In the root directory type gulp in terminal to start the local server at port 9000.

• Open Your Browser and type localhost:9000 in the search bar, and that's it. enjoy!

Screenshots

Links

• Design URL: Graphberry
• Source Code URL: Github
• Live Site URL: Github Pages

My process

Built with

• Semantic HTML5 Markup
• Custom CSS3 Properties
• CSS3 Flexbox & Grid
• Vanilla Javascript + ES6
• JSON
• AJAX
• SCSS
• Pug.js
• Gulp.js @4.0.2
• Font Awesome Library @6.2.0
• Normalize.css Library @8.0.1
• Animate.css Library
• WOW.js Library

Styles

Colors

• Tangerine Yellow: #ffcc03
• Nordic: #1f383d
• Gray: #f2f2f2
• Dark Gray: #666666
• Foghorn: #919eb1
• White: #ffffff

Fonts

• Family: Montserrat

• Weights: 400, 500, 700

• Family: Qwitcher Grypen

• Weight: 400

What I learned

&:last-child {
    @media (min-width: 992px) {
        grid-column-end: -1;
    }
}

// Counters Start When Visible On Screen
const counters = document.querySelectorAll(".about .boxes-holder .box span");
const speed = 300;
window.addEventListener("scroll", () => {
    if (window.scrollY >= document.querySelector(".about").offsetTop - 250) {
        counters.forEach((counter) => {
            const updateCount = () => {
                const target = parseInt(+counter.dataset.count);
                const count = parseInt(+counter.innerText);
                const increment = Math.trunc(target / speed);
                if (count < target) {
                    counter.innerText = count + increment;
                    setTimeout(updateCount, 10);
                } else {
                    count.innerText = target;
                }
            };
            updateCount();
        });
    }
});

// Formating Currency And Removing Decimals
function formatCurrency(value) {
    return value
        .toLocaleString("en-US", {
            style: "currency",
            currency: "USD",
        })
        .slice(0, -3);
}

// Agents Names
agentName.innerHTML = `${agent.gender === "male" ? "Mr" : "Mrs"}. ${agent.name}`;

Apartment JSON Model:

[
    {
        "img": "images/apartment-4.webp",
        "address": "308 Negra Arroyo Lane, Albuquerque",
        "price": "4861",
        "bed": "3",
        "kitchen": "2",
        "shower": "1"
    }
]

Agent JSON Model:

[
    {
        "photo": "images/agent-4.webp",
        "job": "Frontend Developer",
        "name": "Sarah Jones",
        "gender": "female",
        "twitUser": "PhilopaterHany4",
        "githubUser": "PhilopaterHany",
        "linkedinUser": "philopater-hany"
    }
]

Useful Resources

• MDN: Fetch API
• Pug.js Documentation
• Sass Documentation
• Gulp.js Documentation
• npm Documenation
• Font Awesome Documentation
• Animate.css Documentation
• WOW.js Documentation

Author

• Website - Portfolio Is Coming Out Soon!
• Twitter - @PhilopaterHany4
• Facebook - Philopater Hany
• Discord - #8178