Football Pitch | Pure CSS

\n \n

\n \n \n","deleted","label","children",[],[156],{"_104":177,"_96":100,"_157":178,"_159":-5,"_160":138,"_161":166,"_163":164,"_106":179,"_101":29,"_167":180,"_169":181,"_171":25,"_172":-5,"_173":182,"_99":183},"c779971e-4df6-11f0-a6e9-76b3cceeab13","75f24971-1669-4e09-87b7-553679f953e7",["D",1750438275165],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer(import.meta.url);",[],[100],{"_104":185,"_96":186,"_157":187,"_159":-5,"_160":138,"_161":166,"_163":164,"_106":188,"_101":29,"_167":189,"_169":190,"_171":25,"_172":-5,"_173":191,"_99":192},"c779999e-4df6-11f0-a6e9-76b3cceeab13","script.js","9f6733d9-5d37-4323-9b6c-08eea35cacf2",["D",1750438275165],"script","/* If you're feeling fancy you can add interactivity\n to your site with Javascript.\n Note: TypeScript won't work in this file. */\n\n// prints \"hi\" in the browser's dev tools console\nconsole.log(\"hi\");",[],[186],{"_104":194,"_96":195,"_157":196,"_159":-5,"_160":138,"_161":197,"_163":164,"_106":198,"_101":166,"_167":168,"_169":199,"_171":25,"_172":-5,"_173":200,"_99":201},"d29c314c-4df6-11f0-b1af-76b3cceeab13","style.css","80e6275b-81cb-44c4-8ebb-e3de568fb15a",2,["D",1750438293914],"/* CSS Reset */\n/* Resetting margins, paddings, and borders */\nhtml,\nbody,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\na,\np,\nspan,\nem,\nsmall,\nstrong,\nsub,\nsup,\nmark,\ndel,\nins,\nstrike,\nabbr,\ndfn,\nblockquote,\nq,\ncite,\ncode,\npre,\nol,\nul,\nli,\ndl,\ndt,\ndd,\ndiv,\nsection,\narticle,\nmain,\naside,\nnav,\nheader,\nhgroup,\nfooter,\nimg,\nfigure,\nfigcaption,\naddress,\ntime,\naudio,\nvideo,\ncanvas,\niframe,\ndetails,\nsummary,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd {\n border: 0;\n margin: 0;\n padding: 0;\n}\n\n/* Box sizing */\nhtml {\n box-sizing: border-box;\n}\n\n*, *:before, *:after {\n box-sizing: inherit;\n}\n\n/* Typography */\nbody {\n font-size: 1rem;\n line-height: 1.5;\n}\n\n* {\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n\na,\na:visited {\n color: inherit;\n}\n\n/* Resetting specific element styles */\nol,\nul {\n list-style: none;\n}\n\nimg,\nvideo {\n max-width: 100%;\n}\n\nimg {\n border-style: none;\n}\n\n/* General styles */\nbody {\n background: repeating-linear-gradient(\n to left,\n #88c054,\n #88c054 40px,\n #99c96c 40px,\n #99c96c 80px\n );\n}\n\n.container {\n align-items: center;\n display: flex;\n justify-content: center;\n min-height: 100vh;\n padding: 3rem 2rem;\n}\n\n.stadium {\n border: 2px solid #fff;\n height: 850px;\n flex-basis: 650px;\n position: relative;\n}\n\n.center-circle,\n.center-spot {\n border: 2px solid #fff;\n border-radius: 50%;\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n\n.center-circle {\n height: 70px;\n width: 70px;\n}\n\n.center-spot {\n background-color: #fff;\n height: 17%;\n width: 17%;\n}\n\n.top-half,\n.bottom-half {\n display: flex;\n height: 50%;\n justify-content: space-between;\n}\n\n.top-half {\n border-bottom: 2px solid #fff;\n}\n\n.bottom-half {\n align-items: flex-end;\n}\n\n.top-left-arc,\n.top-right-arc,\n.bottom-right-arc,\n.bottom-left-arc {\n height: 18px;\n width: 18px;\n}\n\n.top-left-arc,\n.bottom-right-arc {\n border-bottom: 2px solid #fff;\n border-left: 2px solid #fff;\n border-bottom-left-radius: 18px;\n}\n\n.top-right-arc,\n.bottom-left-arc {\n border-bottom: 2px solid #fff;\n border-right: 2px solid #fff;\n border-bottom-right-radius: 18px;\n}\n\n.top-left-arc,\n.bottom-left-arc {\n transform: rotate(-90deg);\n}\n\n.top-right-arc,\n.bottom-right-arc {\n transform: rotate(90deg);\n}\n\n.top-penalty-area,\n.bottom-penalty-area {\n align-items: center;\n border: 2px solid #fff;\n border-top: none;\n display: flex;\n flex-direction: column;\n height: 100px;\n width: 200px;\n}\n\n.bottom-penalty-area {\n transform: rotate(180deg);\n}\n\n.top-penalty-area::after,\n.bottom-penalty-area::after {\n backface-visibility: hidden;\n border-bottom: 2px solid #fff;\n border-right: 2px solid #fff;\n border-bottom-right-radius: 60px;\n content: \"\";\n height: 60px;\n position: absolute;\n top: 70px;\n transform: rotate(45deg);\n width: 60px;\n}\n\n.top-penalty-area::before,\n.bottom-penalty-area::before {\n border: 2px solid #fff;\n border-bottom: none;\n content: \"\";\n height: 18px;\n position: absolute;\n top: -20px;\n width: 40px;\n}\n\n.top-goal-area,\n.bottom-goal-area {\n border: 2px solid #fff;\n height: 50%;\n width: 50%;\n}\n\n.top-goal-area {\n border-top: none;\n}\n\n.bottom-goal-area {\n border-bottom: none;\n transform: rotate(180deg);\n}\n\n.penalty-mark {\n background-color: #fff;\n border: 1px solid #fff;\n border-radius: 50%;\n height: 7px;\n margin-top: 20px;\n width: 7px;\n}\n\n@media (max-width: 599px) {\n .stadium {\n height: 750px;\n }\n\n .center-circle {\n height: 50px;\n width: 50px;\n }\n\n .top-penalty-area,\n .bottom-penalty-area {\n height: 50px;\n width: 100px;\n }\n .top-penalty-area::after,\n .bottom-penalty-area::after {\n border-bottom-right-radius: 30px;\n height: 30px;\n top: 34px;\n width: 30px;\n }\n .top-penalty-area::before,\n .bottom-penalty-area::before {\n height: 9px;\n top: -11px;\n width: 20px;\n }\n\n .penalty-mark {\n height: 3.5px;\n margin-top: 10px;\n width: 3.5px;\n }\n\n .top-left-arc,\n .top-right-arc,\n .bottom-right-arc,\n .bottom-left-arc {\n height: 12px;\n width: 12px;\n }\n\n .top-left-arc,\n .bottom-right-arc {\n border-bottom-left-radius: 12px;\n }\n\n .top-right-arc,\n .bottom-left-arc {\n border-bottom-right-radius: 12px;\n }\n}\n\n@media (max-width: 399px) {\n .stadium {\n height: 600px;\n }\n\n .center-circle {\n height: 40px;\n width: 40px;\n }\n\n .top-penalty-area,\n .bottom-penalty-area {\n height: 40px;\n width: 80px;\n }\n\n .top-penalty-area::after,\n .bottom-penalty-area::after {\n border-bottom-right-radius: 24px;\n height: 24px;\n top: 28px;\n width: 24px;\n }\n\n .top-penalty-area::before,\n .bottom-penalty-area::before {\n height: 7.2px;\n top: -9px;\n width: 16px;\n }\n\n .penalty-mark {\n margin-top: 8px;\n }\n}",[],[195],"files",[154,176,184,193],"counts",{"_206":29,"_207":166,"_208":29,"_209":29},"pulls","branches","forks","envVars","contents",[],{"_104":177,"_160":138,"_157":178,"_96":100,"_169":181,"_167":180,"_101":29,"_159":-5,"_106":213,"_161":166,"_172":-5,"_99":214},["D",1750438275165],[100],"upstreamProject",{"_104":146,"_96":217,"_112":218,"_113":-5,"_110":111,"_19":219},"basic-html-starter","Basic HTML starter template based on Glitch's starter",{"_94":220,"_130":221},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","upstreamBranch",{"_104":141,"_106":224,"_225":226,"_96":40,"_139":146,"_101":227,"_140":-5,"_142":-5,"_228":229,"_108":-5,"_151":25,"_110":111,"_150":220,"_14":148,"_149":217},["D",1749070628054],"updatedAt",["D",1755695593278],70,"lockfileKey","1755695593572-esm.town_v_stevekrouse_basic-html-starter@70-main","emptyEnvVars","isNew","routes/_app.x.$handle.$name.code.$",{"_94":95,"_96":97,"_98":40,"_101":-7,"_99":100,"_102":234,"_152":239,"_202":252,"_168":253,"_210":256,"_257":258,"_261":25,"_262":-5,"_263":264,"_265":162,"_266":267},{"_104":105,"_96":97,"_106":235,"_108":-5,"_109":25,"_110":111,"_112":-5,"_113":-5,"_12":114,"_115":-5,"_116":25,"_117":-5,"_118":29,"_14":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_19":236,"_132":237,"_135":238,"_151":25},["D",1750438275165],{"_94":95,"_130":131},{"_94":95,"_134":131},{"_101":137,"_96":40,"_104":138,"_139":105,"_140":141,"_142":143,"_144":111,"_145":146,"_147":148,"_149":97,"_150":95},[240,243,246,249],{"_104":155,"_96":156,"_157":158,"_159":-5,"_160":138,"_161":162,"_163":164,"_106":165,"_101":166,"_167":168,"_169":170,"_171":25,"_172":-5,"_173":241,"_99":242},[],[156],{"_104":177,"_96":100,"_157":178,"_159":-5,"_160":138,"_161":166,"_163":164,"_106":179,"_101":29,"_167":180,"_169":181,"_171":25,"_172":-5,"_173":244,"_99":245},[],[100],{"_104":185,"_96":186,"_157":187,"_159":-5,"_160":138,"_161":166,"_163":164,"_106":188,"_101":29,"_167":189,"_169":190,"_171":25,"_172":-5,"_173":247,"_99":248},[],[186],{"_104":194,"_96":195,"_157":196,"_159":-5,"_160":138,"_161":197,"_163":164,"_106":198,"_101":166,"_167":168,"_169":199,"_171":25,"_172":-5,"_173":250,"_99":251},[],[195],[240,243,246,249],{"_104":177,"_160":138,"_157":178,"_96":100,"_169":181,"_167":180,"_101":29,"_159":-5,"_106":254,"_161":166,"_172":-5,"_99":255},["D",1750438275165],[100],[],"upstream",{"_104":141,"_106":259,"_225":260,"_96":40,"_139":146,"_101":227,"_140":-5,"_142":-5,"_228":229,"_108":-5,"_151":25,"_110":111,"_150":220,"_14":148,"_149":217},["D",1749070628054],["D",1755695593278],"showCompareCallout","pull","ahead",4,"behind","templates",[],"routes/_app","actionData","errors"]