Skip to content

Latest commit

 

History

History

product-landing-page

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
dist
dist
 
 
README.md
README.md
 
 
psd-screenshot.png
psd-screenshot.png
 
 
screencast.mp4
screencast.mp4
 
 

README.md

Product Landing Page

screencast.mp4

Live

Description

A product landing page purely in HTML/CSS and vanilla JS.

Note: This project is based on a test the goal was to "translate" a layout from a PSD file to a document using web technologies. The user stories are based on the instructions.

PSD screenshot:

Technologies & Tools

  • HTML
  • CSS
  • JavaScript (Vanilla)
  • GIMP, Photopea, and PSDTech to handle the PSD file, extracting images, and identifying fonts
  • pngquant to reduce images' sizes

User Stories

  • Convert the PSD to a HTML/CSS/JS website
  • Links should point to their respective sections
  • The website should be responsive
  • In the mobile view, the menu should be converted to an "accordion"

Bonus Features

  • Carousel should be functional
  • Team sections tabs should be functional
  • Resize extracted images to the appropriate proportion