A Webpage

box1

\n\n

box2

\n\n

box3

\n\n

box4

\n \n","deleted","label","children",[],[163],{"_104":183,"_97":184,"_164":117,"_166":-5,"_167":146,"_168":151,"_170":119,"_106":185,"_101":33,"_173":186,"_175":187,"_177":22,"_178":-5,"_179":188,"_100":189},"f645975e-05d0-11f1-a5b1-42dde27851f2","main.ts",["D",1770653046698],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer(import.meta.url);",[],[184],{"_104":191,"_97":192,"_164":193,"_166":-5,"_167":146,"_168":145,"_170":119,"_106":194,"_101":151,"_173":195,"_175":196,"_177":22,"_178":-5,"_179":197,"_100":198},"9659696a-05d5-11f1-8a0e-42dde27851f2","script.js","019c4325-580f-7109-8e35-a731ca5d1f05",["D",1770655033354],"script","const player = document.getElementById('player');\nlet positionX = 0; // Track the current position\nconst speed = 10; // Movement increment\n\ndocument.addEventListener('keydown', (event) => {\n if (event.key === 'ArrowLeft') {\n positionX -= speed;\n updatePosition();\n } else if (event.key === 'ArrowRight') {\n positionX += speed;\n updatePosition();\n }\n});\n\nfunction updatePosition() {\n // Use CSS transform to move the element\n player.style.transform = `translateX(${positionX}px)`;\n}",[],[192],{"_104":200,"_97":201,"_164":202,"_166":-5,"_167":146,"_168":203,"_170":119,"_106":204,"_101":205,"_173":174,"_175":206,"_177":22,"_178":-5,"_179":207,"_100":208},"61a4028e-05d5-11f1-9567-42dde27851f2","style.css","019c4325-580f-7109-8e35-a863682ea659",72,["D",1770654944939],55,"* {\n box-sizing: border-box; /* Ensures padding/border are included in the element's width calculation */\n}\n\nbody {\n background-color: white;\n}\n\ndiv {\n border: 10px solid #0f9131;\n width: 580px;\n background-color: #00ff44;\n margin-left: auto;\n margin-right: auto;\n margin-bottom: 20px\n}\n\n.box1 {\n padding-bottom: 2%;\n color: #f4fff8;\n font-family: EB Garamond, Eb Garamond;\n width: 300px;\n transition: all 0.5s ease-in-out; \n\n}\n\n.box2 {\n padding-bottom: 2%;\n color: #f4fff8;\n font-family: EB Garamond, Eb Garamond;\n width: 300px;\n transition: all 0.5s ease-in-out; \n\n}\n\n.box3 {\n padding-bottom: 2%;\n color: #f4fff8;\n font-family: EB Garamond, Eb Garamond;\n width: 300px;\n transition: all 0.5s ease-in-out; \n\n}\n\n.box4 {\n padding-bottom: 2%;\n color: #f4fff8;\n font-family: EB Garamond, Eb Garamond;\n width: 300px;\n transition: all 0.5s ease-in-out; \n}\n\np {\n text-align: center;\n}\n\ndiv:hover {\n background-color: #ff0000;\n border: 10px solid #9c2121;\n padding-top:20px;\n padding-bottom:20px;\n}",[],[201],"files",[161,182,190,199],"counts",{"_213":33,"_214":151,"_215":33,"_216":217,"_220":221},"pulls","branches","forks","envVars",{"_218":33,"_219":33},"count","emptyCount","connections",{"_218":33,"_222":33},"unfilledCount","contents",[225,228,231,234],{"_104":162,"_97":163,"_164":165,"_166":-5,"_167":146,"_168":169,"_170":119,"_106":226,"_101":172,"_173":174,"_175":176,"_177":22,"_178":-5,"_100":227},["D",1770653907942],[163],{"_104":183,"_97":184,"_164":117,"_166":-5,"_167":146,"_168":151,"_170":119,"_106":229,"_101":33,"_173":186,"_175":187,"_177":22,"_178":-5,"_100":230},["D",1770653046698],[184],{"_104":191,"_97":192,"_164":193,"_166":-5,"_167":146,"_168":145,"_170":119,"_106":232,"_101":151,"_173":195,"_175":196,"_177":22,"_178":-5,"_100":233},["D",1770655033354],[192],{"_104":200,"_97":201,"_164":202,"_166":-5,"_167":146,"_168":203,"_170":119,"_106":235,"_101":205,"_173":174,"_175":206,"_177":22,"_178":-5,"_100":236},["D",1770654944939],[201],"upstreamProject",{"_104":154,"_97":239,"_112":113,"_114":-5,"_110":111,"_23":240},"html-css-js-template",{"_95":96,"_136":137},"upstreamBranch",{"_104":149,"_106":243,"_244":245,"_97":45,"_147":154,"_101":151,"_148":246,"_150":247,"_248":249,"_108":-5,"_158":22,"_110":111,"_157":96,"_16":123,"_156":239},["D",1767712128081],"updatedAt",["D",1767712128081],"70f419a8-ea65-11f0-9dd5-42dde27851f2",8,"lockfileKey","1767712129072-esm.town_v_sammyk1234_html-css-js-template@1-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_95":96,"_97":98,"_99":-7,"_101":-7,"_102":256,"_223":261,"_270":-7,"_271":272,"_275":-5,"_209":276,"_289":280,"_290":203,"_291":33,"_292":22,"_293":22},{"_104":105,"_97":98,"_106":257,"_108":-5,"_109":22,"_110":111,"_112":113,"_114":-5,"_14":115,"_116":117,"_118":119,"_120":-5,"_121":-5,"_122":33,"_16":123,"_124":-5,"_125":-5,"_126":127,"_128":127,"_129":130,"_131":130,"_132":130,"_133":127,"_134":127,"_23":258,"_138":259,"_143":260,"_158":22},["D",1770653046698],{"_95":96,"_136":137},{"_95":96,"_140":137,"_14":115,"_141":142},{"_101":145,"_97":45,"_104":146,"_147":105,"_148":149,"_150":151,"_152":111,"_153":154,"_155":123,"_156":98,"_157":96},[262,264,266,268],{"_104":162,"_97":163,"_164":165,"_166":-5,"_167":146,"_168":169,"_170":119,"_106":226,"_101":172,"_173":174,"_175":176,"_177":22,"_178":-5,"_100":263},[163],{"_104":183,"_97":184,"_164":117,"_166":-5,"_167":146,"_168":151,"_170":119,"_106":229,"_101":33,"_173":186,"_175":187,"_177":22,"_178":-5,"_100":265},[184],{"_104":191,"_97":192,"_164":193,"_166":-5,"_167":146,"_168":145,"_170":119,"_106":232,"_101":151,"_173":195,"_175":196,"_177":22,"_178":-5,"_100":267},[192],{"_104":200,"_97":201,"_164":202,"_166":-5,"_167":146,"_168":203,"_170":119,"_106":235,"_101":205,"_173":174,"_175":206,"_177":22,"_178":-5,"_100":269},[201],"readme","upstream",{"_104":149,"_106":273,"_244":274,"_97":45,"_147":154,"_101":151,"_148":246,"_150":247,"_248":249,"_108":-5,"_158":22,"_110":111,"_157":96,"_16":123,"_156":239},["D",1767712128081],["D",1767712128081],"pull",[277,280,283,286],{"_104":162,"_97":163,"_164":165,"_166":-5,"_167":146,"_168":169,"_170":119,"_106":171,"_101":172,"_173":174,"_175":176,"_177":22,"_178":-5,"_179":278,"_100":279},[],[163],{"_104":183,"_97":184,"_164":117,"_166":-5,"_167":146,"_168":151,"_170":119,"_106":185,"_101":33,"_173":186,"_175":187,"_177":22,"_178":-5,"_179":281,"_100":282},[],[184],{"_104":191,"_97":192,"_164":193,"_166":-5,"_167":146,"_168":145,"_170":119,"_106":194,"_101":151,"_173":195,"_175":196,"_177":22,"_178":-5,"_179":284,"_100":285},[],[192],{"_104":200,"_97":201,"_164":202,"_166":-5,"_167":146,"_168":203,"_170":119,"_106":204,"_101":205,"_173":174,"_175":206,"_177":22,"_178":-5,"_179":287,"_100":288},[],[201],"preview","ahead","behind","showHomeCustomizationHint","showHTTPPreviewSettingsHint","actionData","errors"]

sammyk1234

Practice