Greens Project

Green is a test landing page for ordering organic products.
In the future, this is a multi-page online store
with an application for mobile devices.

Technologies:

• Tailwind CSS
• HTML / SCSS / Javascript
• Webpack 5

Plugins:

• fslightbox
• gsap
• swiper

Design:

• figma

Example code:

HTML:

<picture>
  <source
    srcset="<%=require('../images/webp/img-1.webp')%>"
    type="image/webp"
  >
  <source
    srcset="<%=require('../images/img-1.png')%>"
    type="image/png"
  >
  <img
    src="<%=require('../images/img-1.png')%>"
    alt=""
    class="
      select-none
      max-w-full
      lg:max-w-auto
      lg:animate-move-bounce-y
    "
  >
</picture>

<h6
  class="
    gs_reveal
    text-sm
    sm:text-base
    sm:leading-tight
    md:text-xl
    md:leading-tight
    lg:text-2xl
    lg:leading-7
    font-medium
    lg:font-semibold
    uppercase
    tracking-[2px]
    text-white
    mb-2
    md:mb-4
    lg:mb-6
  ">
    100% Organic Products
</h6>

SCSS:

@apply text-dark;

background-color: theme('colors.orange.600');

Installation

Clone this repo and npm install.

npm i

Usage

Development server

npm start

You can view the development server at localhost:8080.

Production build

npm run build