Coca Cola website redesign project

(Overview)

ThisprojectreimaginestheCoca-Colawebsiteasanimmersive,motion-drivenexperiencethatcapturestheenergy,nostalgia,andjoyofthebrand.BuiltwithHTML,CSS,JavaScript,andGSAP,theredesignreplacesastaticbrowsingexperiencewithafluid,story-ledjourneywhereeveryscroll,hover,andclickfeelsalivedesigncentersonCoca-Colaiconicred,boldtypography,andthefizzandsparkleofthedrinkitself.Theherosectionopenswithadramaticproductreveal:thebottleglidesintoviewasbubblesrise,theheadlineanimatesinlinebyline.

(Architecture)

Structure(HTML):Semanticsections(header,hero,story,products,campaigns,footer)withdataattributesthathookintoanimations,somarkupstayscleanandJavaScriptstaysdecoupledfromstylingclasses.Presentation(CSS):CSScustompropertiesdefinetheCoca-Colacolorpalette,spacingscale,andtypesysteminoneplace.FlexboxandGridhandlelayout,andamobile-firstapproachwithbreakpointskeepsthedesignresponsive.Behavior(JavaScript):EachfeatureisanESmodulewithasingleresponsibility,initializedfrommain.js.Thiskeepsthecodeorganizedandmakesindividualanimationseasytotestorreplace..