蘭韻植萃面膜新品搶先報(手機版)

專案需求

由企劃提供商品資料、曝光媒體、合作部落客、整體頁面的資訊架構，需出一頁式網頁視覺稿、切版與行銷版位Banner。

視覺設計

該品牌有提供主視覺圖故參考介紹以及品牌的概念萃取出幾個關鍵字：「有機」、「草本」、「大自然」而延伸出的風格，以包裝品上的手繪插畫感素材風格去搭配整體視覺。

切版技術

為了適應不同螢幕尺寸和顯示設備，使用CSS3 Flexbox去做RWD佈局，針對許多應用而言，不用 floats 的彈性盒子模型會比塊狀模型（block model）易用，而且彈性容器的邊緣也不會與內容的邊緣重疊。CSS以LESS 這套以 JavaScript 為基底的預處理器寫。

動態效果

利用css animate去做每個頁面區塊的進場動態以及物件漂浮的效果。