build up css grids

https://codepen.io/stephanmax/pen/odyxWE https://codepen.io/dphrag/pen/JeayLw https://www.youtube.com/watch?v=TUD1AWZVgQ8

TODO: Create multiple layouts based on the following designs or urls. Else all the layouts are mobile responsive

Design Reference:

Side Sticky Scroll

1. https://www.airbnb.com/rooms/1016153?check_in=2023-03-27&check_out=2023-04-02&guests=1&adults=1&s=67&unique_share_id=90a5db6f-3283-4576-a9e0-b333d161b749
2. https://my.secretlab.co/products/titan-evo-2022-series?sku=R22PU-Stealth
3. https://www.ikea.com/my/en/p/torgny-shelf-white-10259579/
4. https://malaysia.indeed.com/jobs?q=job&l=Selangor&from=searchOnHP&vjk=fb50512068814ca3
5. https://www.kickstarter.com/projects/insitushortfilm/in-situ-0?ref=section-homepage-projectcollection-2-staff-picks-newest
6. https://www.kaggle.com/code/andls555/accountant-receivables-prediction-days-late

CSS Grid Implementation: ./sticky-scroll.html

Listing Design Reference:

1. https://www.airbnb.com/
2. https://www.ikea.com/my/en/new/new-products/?filters=f-subcategories%3Ast001

Implementation:

3 Column Scroll Design Reference: https://stackoverflow.com/questions/33956813/independent-scroll-between-3-columns Implementation:

Central Main page Design Reference:

1. https://www.99.co/singapore/condos-apartments/riviere
2. https://www.ikea.com/my/en/

Implementation:

In all the implementation, create the boxes and dummy content to showcase how the elements will look like

References CSS Grid Layouts

https://web.dev/one-line-layouts/ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout https://www.quackit.com/css/grid/examples/css_grid_website_layout_examples.cfm

References Position Sticky

https://elad.medium.com/css-position-sticky-how-it-really-works-54cd01dc2d46

References Responsive Layouts without Media queries with Grid & Flexbox

https://css-tricks.com/responsive-layouts-fewer-media-queries/