<%-include('./partials/header.ejs')%> 
<nav>
    <div class="logo">
        <span class="white">DEVELOPER</span>
        <img src="images/logo.png" > 
        <span class="danger">CREATIONS</span>
    </div>

    <div class="links">
        <ul>
            <li class="nav-link"><a class="active" href="#banner">Home</a></li>
            <li class="nav-link"><a  href="#about">About</a></li>
            <li class="nav-link"><a  href="#services">Services</a></li>
            <li class="nav-link"><a  href="#portifolio">Portifolio</a></li>
            <li class="nav-link"><a  href="#contact-us">Contacts</a></li>
        </ul>
    </div>
    <span class="material-symbols-outlined button menu">menu</span>
    <span class="material-symbols-outlined button close">close</span>
    
</nav> 

<section id="banner" data-yOffset="4.2" class="banner animate">
    <div class="left">
        <img src="/images/logoman.png" class="animate banner-image">
        <svg></svg>
    </div>
    <div class="right">
        <div class="container">
            <h3>
                Hello there, welcome to
            </h3>
            <h2 class="writer">
                Developer Creations!
            </h2>
            <h3>
                your go to software development<span class="danger writer"> Free Lance!</span>
            </h3>
            <p>
                We specialize in full stack web devolepment for a diverse number of web applications.
                In a nutshell, we create, develop and publish webSites and/or webApps at pocket friendly prices
                and timely schedules all which depends on the size and complexity the client requires. 
                Stamp your online presence with a customized webApp that suits your online needs.
            </p>
            <p>
                We also partner with other teams to create mobile applications and graphics design.
            </p>
            <h4><span class="danger">Something for Everybody!</span></h4>
            <div class="bcon">
                <span class="button">hire us</span>
            </div>
            <div class="socials">             
                <span><a href="https://www.instagram.com/developer_creations/"><svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24" id="instagram"><path fill="#6563FF" d="M17.34,5.46h0a1.2,1.2,0,1,0,1.2,1.2A1.2,1.2,0,0,0,17.34,5.46Zm4.6,2.42a7.59,7.59,0,0,0-.46-2.43,4.94,4.94,0,0,0-1.16-1.77,4.7,4.7,0,0,0-1.77-1.15,7.3,7.3,0,0,0-2.43-.47C15.06,2,14.72,2,12,2s-3.06,0-4.12.06a7.3,7.3,0,0,0-2.43.47A4.78,4.78,0,0,0,3.68,3.68,4.7,4.7,0,0,0,2.53,5.45a7.3,7.3,0,0,0-.47,2.43C2,8.94,2,9.28,2,12s0,3.06.06,4.12a7.3,7.3,0,0,0,.47,2.43,4.7,4.7,0,0,0,1.15,1.77,4.78,4.78,0,0,0,1.77,1.15,7.3,7.3,0,0,0,2.43.47C8.94,22,9.28,22,12,22s3.06,0,4.12-.06a7.3,7.3,0,0,0,2.43-.47,4.7,4.7,0,0,0,1.77-1.15,4.85,4.85,0,0,0,1.16-1.77,7.59,7.59,0,0,0,.46-2.43c0-1.06.06-1.4.06-4.12S22,8.94,21.94,7.88ZM20.14,16a5.61,5.61,0,0,1-.34,1.86,3.06,3.06,0,0,1-.75,1.15,3.19,3.19,0,0,1-1.15.75,5.61,5.61,0,0,1-1.86.34c-1,.05-1.37.06-4,.06s-3,0-4-.06A5.73,5.73,0,0,1,6.1,19.8,3.27,3.27,0,0,1,5,19.05a3,3,0,0,1-.74-1.15A5.54,5.54,0,0,1,3.86,16c0-1-.06-1.37-.06-4s0-3,.06-4A5.54,5.54,0,0,1,4.21,6.1,3,3,0,0,1,5,5,3.14,3.14,0,0,1,6.1,4.2,5.73,5.73,0,0,1,8,3.86c1,0,1.37-.06,4-.06s3,0,4,.06a5.61,5.61,0,0,1,1.86.34A3.06,3.06,0,0,1,19.05,5,3.06,3.06,0,0,1,19.8,6.1,5.61,5.61,0,0,1,20.14,8c.05,1,.06,1.37.06,4S20.19,15,20.14,16ZM12,6.87A5.13,5.13,0,1,0,17.14,12,5.12,5.12,0,0,0,12,6.87Zm0,8.46A3.33,3.33,0,1,1,15.33,12,3.33,3.33,0,0,1,12,15.33Z"></path></svg></a></span>
                <span><a href="https://web.facebook.com/profile.php?id=100009036314442"><svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24" id="facebook-f"><path fill="#6563FF" d="M15.12,5.32H17V2.14A26.11,26.11,0,0,0,14.26,2C11.54,2,9.68,3.66,9.68,6.7V9.32H6.61v3.56H9.68V22h3.68V12.88h3.06l.46-3.56H13.36V7.05C13.36,6,13.64,5.32,15.12,5.32Z"></path></svg></a></span>
                <span><a href="https://twitter.com/49848751978f41c/media"><svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 72 72" viewBox="0 0 72 72" id="twitter-x"><switch><g><path d="M42.5,31.2L66,6h-6L39.8,27.6L24,6H4l24.6,33.6L4,66
                    h6l21.3-22.8L48,66h20L42.5,31.2z M12.9,10h8l38.1,52h-8L12.9,10z"></path></g></switch></svg></a></span>
                <span><a href="https://github.com/melvinCodex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="github"><path d="M7.999 0C3.582 0 0 3.596 0 8.032a8.031 8.031 0 0 0 5.472 7.621c.4.074.546-.174.546-.387 0-.191-.007-.696-.011-1.366-2.225.485-2.695-1.077-2.695-1.077-.363-.928-.888-1.175-.888-1.175-.727-.498.054-.488.054-.488.803.057 1.225.828 1.225.828.714 1.227 1.873.873 2.329.667.072-.519.279-.873.508-1.074-1.776-.203-3.644-.892-3.644-3.969 0-.877.312-1.594.824-2.156-.083-.203-.357-1.02.078-2.125 0 0 .672-.216 2.2.823a7.633 7.633 0 0 1 2.003-.27 7.65 7.65 0 0 1 2.003.271c1.527-1.039 2.198-.823 2.198-.823.436 1.106.162 1.922.08 2.125.513.562.822 1.279.822 2.156 0 3.085-1.87 3.764-3.652 3.963.287.248.543.738.543 1.487 0 1.074-.01 1.94-.01 2.203 0 .215.144.465.55.386A8.032 8.032 0 0 0 16 8.032C16 3.596 12.418 0 7.999 0z"></path></svg></a></span>
            </div>
        </div>
    </div>
</section>

<section id="about" data-yOffset="4.2" class="about white animate">
    <div class="left">
        <h3 class="animate writer">About <span class="danger">Us</span></h3>
        <h2 class="success writer animate">
            FullStack Web Developers!
        </h2>
        <p class="animate">
            FullStack web development refers to the skills of both a frontEnd and backEnd developer.
            FrontEnd web Applications are those webSites that are static in nature,
            meaning their content remains the same and the website owner can't change any content without
            involving the web developer, in a nutshell they are hard-wired and would need new code and
            website publication to change. These sites are suitable for portifolio webSites <span>like this one</span>.
            BackEnd web Applications on the other hand are dynamic in nature, this means that the website
            owner can easily manipulate most if not all elements on their web Application without involving the 
            web developer or having to republish the webApp which needless to say is what most businesses,
            institutions and firms require.
        </p>
        <div class="bcon animate">
            <span class="button">Learn More</span>
        </div>
    </div>
    <div class="right">
        <img src="/images/logothree.png" class="animate">
        <svg></svg>
    </div>
</section>   

<section id="services" data-yOffset="13" class="services animate">
    <h2 class="animate">Our <span class="success">Services</span></h2>
    <div class="container animate">
        <div class="card service animate">
            <span class="icon"><img src="/images/frontend.png" ></span>
            <h3 class="success">Frontend Development</h3>
            <p>
                A static website consists of web pages with fixed content, meaning 
                the content doesn't change based on user interactions or external 
                data. These websites are typically built using FrontEnd technologies. 
                Unlike dynamic websites, static websites don't rely on server-side 
                processing or databases to generate content on the fly.
            </p>
            <a href="#static-web"><span class="button">Read More</span></a>
        </div>
        <div class="card service animate">
            <span class="icon"><img src="/images/backend.png"></span>
            <h3 class="success">Fullstack Development</h3>
            <p>
                Dynamic websites are websites that generate content on the fly, typically 
                by using server-side programming languages, databases, and client-side 
                scripting. Unlike static websites, dynamic websites can display different 
                content to users based on various factors such as user input, user preferences, 
                or real-time data.
            </p>
            <a href="#dynamic-web"><span class="button">Read More</span></a>
        </div>
        <div class="card service animate">
            <span class="icon"><img src="/images/graphics.png"></span>
            <h3 class="success">Graphics Design</h3>
            <p>
                Graphic design is the art and practice of planning and projecting ideas and 
                experiences with visual and textual content. Graphic designers use various 
                tools and techniques to create visual elements that convey a specific message 
                or evoke a particular emotion. We design a broad spectrum of graphics according 
                to client specifications.
            </p>
            <a href="#graphics"><span class="button">Read More</span></a>
        </div>
    </div>
</section>

<section id="portifolio" data-yOffset="16" class="portifolio animate white">
    <h2>Latest <span class="danger">Projects</span></h2>
    <div class="container">
        <div class="card project">
            <img src="/images/grilli.png">
            <div class="slider">
                <h3>Hotel Website</h3>
                <p>
                    Hotel website with menus on display, booking and reservation, staff details on current assignments and order and payment on deliveries made.
                </p>
            </div>
        </div>
        <div class="card project">
            <img src="/images/ballinston.png">
            <div class="slider">
                <h3>Ballinston Website</h3>
                <p>
                    Retailer for outfits,shoes and clothes official website with order, delivery and location features cutomised for a user friendly and unique experience.
                </p>
            </div>
        </div>
        <div class="card project">
            <img src="/images/instaweb.png">
            <div class="slider">
                <h3>Chat room Website</h3>
                <p>
                    Video conferencing website equiped with chat rooms and voice calling for virtual meetings and general communication.
                </p>
            </div>
        </div>
        <div class="card project">
            <img src="/images/blogsite.png">
            <div class="slider">
                <h3>Blog Website</h3>
                <p>
                    Blog news letter website for posting latest and trendy info on a blog page with liking, sharing and commenting.
                </p>
            </div>
        </div>
        <div class="card project">
            <img src="/images/school.png">
            <div class="slider">
                <h3>School Website</h3>
                <p>
                    Static school website with student details and staff details on display. Features a custome
                    google map pinning the location of the school.
                </p>
            </div>
        </div>
        <div class="card project">
            <img src="/images/kicks.png">
            <div class="slider">
                <h3>Shoe Website</h3>
                <p>
                    Shoe retailer website with order, cart and blog features for the ultimate customer experience. 
                    Includes inbuilt communication channels.
                </p>
            </div>
        </div>
    </div>
</section>

<section id="contact-us" data-yOffset="18" class="contact-us animate">
    <div class="container">
        <h2 class="animate">Get in <span class="success">touch</span></h2>
        <form class="animate" action="https://formspree.io/f/mrgnbenj" method="POST">
            <ul>
                <li>
                    <label for="first-name">First Name</label>
                    <input type="text" name="first-name" placeholder="Enter your first Name" required>
                </li>
                <li>
                    <label for="last-name">Last Name</label>
                    <input type="text" name="last-name" placeholder="Enter your last Name" required>
                </li>
                <li>
                    <label for="phone-no">Phone number</label>
                    <input type="number" name="phone-no" placeholder="Enter your Phone Number" required>
                </li>
                <li>
                    <label for="email">Email</label>
                    <input type="email" name="email" placeholder="Enter your Email" required>
                </li>
                
                    <label for="message">Send us a message</label>
                
                
                    <textarea name="message" id="" placeholder="Write your message here"></textarea>
                
                
                    <button>Submit</button>
                
            </ul>
        </form>
        <div class="contacts">
            <h4>Call us on: 0702692255</h4>
            <h4>Send us an email at: developercreationske@gmail.com</h4>
            <h4>
                Find us on the following social media platforms.
            </h4>
            <div class="socials">             
                <span><a href="https://www.instagram.com/developer_creations/"><svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24" id="instagram"><path fill="#6563FF" d="M17.34,5.46h0a1.2,1.2,0,1,0,1.2,1.2A1.2,1.2,0,0,0,17.34,5.46Zm4.6,2.42a7.59,7.59,0,0,0-.46-2.43,4.94,4.94,0,0,0-1.16-1.77,4.7,4.7,0,0,0-1.77-1.15,7.3,7.3,0,0,0-2.43-.47C15.06,2,14.72,2,12,2s-3.06,0-4.12.06a7.3,7.3,0,0,0-2.43.47A4.78,4.78,0,0,0,3.68,3.68,4.7,4.7,0,0,0,2.53,5.45a7.3,7.3,0,0,0-.47,2.43C2,8.94,2,9.28,2,12s0,3.06.06,4.12a7.3,7.3,0,0,0,.47,2.43,4.7,4.7,0,0,0,1.15,1.77,4.78,4.78,0,0,0,1.77,1.15,7.3,7.3,0,0,0,2.43.47C8.94,22,9.28,22,12,22s3.06,0,4.12-.06a7.3,7.3,0,0,0,2.43-.47,4.7,4.7,0,0,0,1.77-1.15,4.85,4.85,0,0,0,1.16-1.77,7.59,7.59,0,0,0,.46-2.43c0-1.06.06-1.4.06-4.12S22,8.94,21.94,7.88ZM20.14,16a5.61,5.61,0,0,1-.34,1.86,3.06,3.06,0,0,1-.75,1.15,3.19,3.19,0,0,1-1.15.75,5.61,5.61,0,0,1-1.86.34c-1,.05-1.37.06-4,.06s-3,0-4-.06A5.73,5.73,0,0,1,6.1,19.8,3.27,3.27,0,0,1,5,19.05a3,3,0,0,1-.74-1.15A5.54,5.54,0,0,1,3.86,16c0-1-.06-1.37-.06-4s0-3,.06-4A5.54,5.54,0,0,1,4.21,6.1,3,3,0,0,1,5,5,3.14,3.14,0,0,1,6.1,4.2,5.73,5.73,0,0,1,8,3.86c1,0,1.37-.06,4-.06s3,0,4,.06a5.61,5.61,0,0,1,1.86.34A3.06,3.06,0,0,1,19.05,5,3.06,3.06,0,0,1,19.8,6.1,5.61,5.61,0,0,1,20.14,8c.05,1,.06,1.37.06,4S20.19,15,20.14,16ZM12,6.87A5.13,5.13,0,1,0,17.14,12,5.12,5.12,0,0,0,12,6.87Zm0,8.46A3.33,3.33,0,1,1,15.33,12,3.33,3.33,0,0,1,12,15.33Z"></path></svg></a></span>
                <span><a href="https://web.facebook.com/profile.php?id=100009036314442"><svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24" id="facebook-f"><path fill="#6563FF" d="M15.12,5.32H17V2.14A26.11,26.11,0,0,0,14.26,2C11.54,2,9.68,3.66,9.68,6.7V9.32H6.61v3.56H9.68V22h3.68V12.88h3.06l.46-3.56H13.36V7.05C13.36,6,13.64,5.32,15.12,5.32Z"></path></svg></a></span>
                <span><a href="https://twitter.com/49848751978f41c"><svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 72 72" viewBox="0 0 72 72" id="twitter-x"><switch><g><path d="M42.5,31.2L66,6h-6L39.8,27.6L24,6H4l24.6,33.6L4,66
                    h6l21.3-22.8L48,66h20L42.5,31.2z M12.9,10h8l38.1,52h-8L12.9,10z"></path></g></switch></svg></a></span>
                <span><a href="https://github.com/melvinCodex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="github"><path d="M7.999 0C3.582 0 0 3.596 0 8.032a8.031 8.031 0 0 0 5.472 7.621c.4.074.546-.174.546-.387 0-.191-.007-.696-.011-1.366-2.225.485-2.695-1.077-2.695-1.077-.363-.928-.888-1.175-.888-1.175-.727-.498.054-.488.054-.488.803.057 1.225.828 1.225.828.714 1.227 1.873.873 2.329.667.072-.519.279-.873.508-1.074-1.776-.203-3.644-.892-3.644-3.969 0-.877.312-1.594.824-2.156-.083-.203-.357-1.02.078-2.125 0 0 .672-.216 2.2.823a7.633 7.633 0 0 1 2.003-.27 7.65 7.65 0 0 1 2.003.271c1.527-1.039 2.198-.823 2.198-.823.436 1.106.162 1.922.08 2.125.513.562.822 1.279.822 2.156 0 3.085-1.87 3.764-3.652 3.963.287.248.543.738.543 1.487 0 1.074-.01 1.94-.01 2.203 0 .215.144.465.55.386A8.032 8.032 0 0 0 16 8.032C16 3.596 12.418 0 7.999 0z"></path></svg></a></span>
            </div>
        </div>
    </div>
</section>

<section class="details none">
    <span class="material-symbols-outlined close">close</span>
    <div class="container trig">
        <h3 class="danger">
            What you need
        </h3>
        <div class="card-container">
            <div class="card">
                <h4>Web Hosting</h4>
                <p>
                    Every website or webApp on the internet is hosted by a computer which acts as a server.
                    There are many hosting companies available each having different prices, reliability and service
                    quality. The hosting can be charged monthly or yearly.
                </p>
                <span>Starts from ksh 500/- per month( Ksh5500/- anually )</span>
            </div>
            <div class="card">
                <h4>DNS Name (Name of website)</h4>
                <p>
                    DNS name refers to the address of your website e.g <a href="#">DeveloperCreations.co.ke</a>
                    This adddress has to be unique and is purchased from web Hosting companies in order to keep the right to reservation.
                </p>
                <span>Starts from Ksh 1500/- per year</span>
            </div>
            <div class="card">
                <h4>Paid web services</h4>
                <p>
                    Depending on the features you require in your webApp, there might be some additional charges.
                    This is usually not the case with smaller and medium sized websites but is fairly common on larger
                    web-applications. The charges depend on the type of features required.
                </p>
                <span>This is totally dependent on the type of features required</span>
            </div>
        </div>
    </div>
    <div class="pricing trig" >
        <h3 class="danger">Pricing</h3>
        <p>
            Pricing depends on What features you want on your website, 
            and any specific design preferences. We brodly categorise websites and webApps
            into the following main categories;
        </p>
        <ul>
            <li id="static-web">
                <h3>Static websites</h3>
                <p>
                    As the name suggests, these are mainly static websites whose content is not regulary changed
                    if at all. Changes must be done by the Website developer and rarely since they require the
                    whole webSite to be re-published. They include sites like wikipedia and this one.
                </p>
                <h4 >1-2 weeks</h4>
                <span> Ksh10000/- to 20000Ksh/-</span>
            </li>
            <li>
                 <h3>Dynamic websites</h3>
                <p>
                    They are sites whose content can easily be changed by the Website owner using a user-friendly User 
                    interface designed to your specifications and the website developer need not get involved. These include
                    School websites where grades, services and personel are regulary uploaded, booking and reservation services
                    like restaurants and lodgings, online saling platforms and more.
                </p>
                <h4>2-3 weeks</h4>
                <span> Ksh15000/- to Ksh30000/-</span>
            </li>
            <li id="dynamic-web">
                <h3>Dynamic sites with database attached</h3>
                <p>
                    These are dynamic sites which rely on a database to store and retrieve information. Most dynamic
                    websites will require a database but we only consider them part of this category if the database 
                    is the dominant part of the website or app.
                </p>
                <h4 >2-4 weeks</h4>
                <span> Ksh25000/- to Ksh40000/-</span>
            </li>
            <li>
                <h3>Web applications with additional features</h3>
                <p>
                    We develop a diverse range of websites with equally diverse sets of features which might cost slightly
                    more due to the paid services needed to make them a reality. An example is a web application with an 
                    interactive google map, user identification, video and/or voice calling, a live chat e.t.c
                </p>
                <h4>2-4 weeks</h4>
                <span> Ksh30000/- to Ksh50000/-</span>
            </li>
            <li id="graphics">
                <h3 >Graphics Design</h3>
                <p>
                    We also design graphics such as logos, magazine layouts, business cards, posters and book covers.
                </p>
                <h4>few days</h4>
                <span>From Ksh500/</span>
            </li>
            <li>
                <h3 >Mobile Applications</h3>
                <p>
                    We partner with other teams to design mobile applications due to the shear scale and complexity involved
                    in order to have managable schedules.
                </p>
                <h4>6 weeks</h4>
                <span>From Ksh60000/-</span>
            </li>
        </ul>
        <h4>Prices not cast in stone. Slightly negotiable</h4>
        <div class="contact">
            <p>
                Since you now know what you need, get in touch with us for hiring or more detailed enquiry.
                Click the link below to contact us.
            </p>
            <a id="hire-link" href="#contact-us">Contact us for hiring</a>
        </div>
    </div>
</section>
<%-include('./partials/footer.ejs')%>