Football Pitch | Pure CSS

\n \n

\n \n \n","deleted","label","children",[],[155],{"_103":176,"_96":177,"_156":178,"_158":-5,"_159":137,"_160":165,"_162":163,"_105":179,"_100":29,"_166":180,"_168":181,"_170":25,"_171":-5,"_172":182,"_99":183},"c779971e-4df6-11f0-a6e9-76b3cceeab13","main.tsx","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);",[],[177],{"_103":185,"_96":186,"_156":187,"_158":-5,"_159":137,"_160":165,"_162":163,"_105":188,"_100":29,"_166":189,"_168":190,"_170":25,"_171":-5,"_172":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],{"_103":194,"_96":195,"_156":196,"_158":-5,"_159":137,"_160":197,"_162":163,"_105":198,"_100":165,"_166":167,"_168":199,"_170":25,"_171":-5,"_172":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",[153,175,184,193],"counts",{"_206":29,"_207":165,"_208":29,"_209":29},"pulls","branches","forks","envVars","contents",[212,215,218,221],{"_103":154,"_96":155,"_156":157,"_158":-5,"_159":137,"_160":161,"_162":163,"_105":213,"_100":165,"_166":167,"_168":169,"_170":25,"_171":-5,"_99":214},["D",1750438322453],[155],{"_103":176,"_96":177,"_156":178,"_158":-5,"_159":137,"_160":165,"_162":163,"_105":216,"_100":29,"_166":180,"_168":181,"_170":25,"_171":-5,"_99":217},["D",1750438275165],[177],{"_103":185,"_96":186,"_156":187,"_158":-5,"_159":137,"_160":165,"_162":163,"_105":219,"_100":29,"_166":189,"_168":190,"_170":25,"_171":-5,"_99":220},["D",1750438275165],[186],{"_103":194,"_96":195,"_156":196,"_158":-5,"_159":137,"_160":197,"_162":163,"_105":222,"_100":165,"_166":167,"_168":199,"_170":25,"_171":-5,"_99":223},["D",1750438293914],[195],"upstreamProject",{"_103":145,"_96":226,"_111":227,"_112":-5,"_109":110,"_19":228},"basic-html-starter","Basic HTML starter template based on Glitch's starter",{"_94":229,"_129":230},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","upstreamBranch",{"_103":140,"_105":233,"_234":235,"_96":40,"_138":145,"_100":236,"_139":-5,"_141":-5,"_237":238,"_107":-5,"_150":25,"_109":110,"_149":229,"_14":147,"_148":226},["D",1749070628054],"updatedAt",["D",1755695593278],70,"lockfileKey","1755695593572-esm.town_v_stevekrouse_basic-html-starter@70-main","emptyEnvVars","isNew","routes/_app.x.$handle.$name._index",{"_94":95,"_96":97,"_98":-7,"_100":-7,"_101":243,"_210":248,"_257":-7,"_258":259,"_262":-5,"_202":263,"_276":277},{"_103":104,"_96":97,"_105":244,"_107":-5,"_108":25,"_109":110,"_111":-5,"_112":-5,"_12":113,"_114":-5,"_115":25,"_116":-5,"_117":29,"_14":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_19":245,"_131":246,"_134":247,"_150":25},["D",1750438275165],{"_94":95,"_129":130},{"_94":95,"_133":130},{"_100":136,"_96":40,"_103":137,"_138":104,"_139":140,"_141":142,"_143":110,"_144":145,"_146":147,"_148":97,"_149":95},[249,251,253,255],{"_103":154,"_96":155,"_156":157,"_158":-5,"_159":137,"_160":161,"_162":163,"_105":213,"_100":165,"_166":167,"_168":169,"_170":25,"_171":-5,"_99":250},[155],{"_103":176,"_96":177,"_156":178,"_158":-5,"_159":137,"_160":165,"_162":163,"_105":216,"_100":29,"_166":180,"_168":181,"_170":25,"_171":-5,"_99":252},[177],{"_103":185,"_96":186,"_156":187,"_158":-5,"_159":137,"_160":165,"_162":163,"_105":219,"_100":29,"_166":189,"_168":190,"_170":25,"_171":-5,"_99":254},[186],{"_103":194,"_96":195,"_156":196,"_158":-5,"_159":137,"_160":197,"_162":163,"_105":222,"_100":165,"_166":167,"_168":199,"_170":25,"_171":-5,"_99":256},[195],"readme","upstream",{"_103":140,"_105":260,"_234":261,"_96":40,"_138":145,"_100":236,"_139":-5,"_141":-5,"_237":238,"_107":-5,"_150":25,"_109":110,"_149":229,"_14":147,"_148":226},["D",1749070628054],["D",1755695593278],"pull",[264,267,270,273],{"_103":154,"_96":155,"_156":157,"_158":-5,"_159":137,"_160":161,"_162":163,"_105":164,"_100":165,"_166":167,"_168":169,"_170":25,"_171":-5,"_172":265,"_99":266},[],[155],{"_103":176,"_96":177,"_156":178,"_158":-5,"_159":137,"_160":165,"_162":163,"_105":179,"_100":29,"_166":180,"_168":181,"_170":25,"_171":-5,"_172":268,"_99":269},[],[177],{"_103":185,"_96":186,"_156":187,"_158":-5,"_159":137,"_160":165,"_162":163,"_105":188,"_100":29,"_166":189,"_168":190,"_170":25,"_171":-5,"_172":271,"_99":272},[],[186],{"_103":194,"_96":195,"_156":196,"_158":-5,"_159":137,"_160":197,"_162":163,"_105":198,"_100":165,"_166":167,"_168":199,"_170":25,"_171":-5,"_172":274,"_99":275},[],[195],"previews",[267],"routes/_app","actionData","errors"]