Football Pitch | Pure CSS

\n \n

\n \n \n","deleted","label","children",[],[154],{"_102":175,"_95":176,"_155":177,"_157":-5,"_158":136,"_159":164,"_161":162,"_104":178,"_99":32,"_165":179,"_167":180,"_169":22,"_170":-5,"_171":181,"_98":182},"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);",[],[176],{"_102":184,"_95":185,"_155":186,"_157":-5,"_158":136,"_159":164,"_161":162,"_104":187,"_99":32,"_165":188,"_167":189,"_169":22,"_170":-5,"_171":190,"_98":191},"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\");",[],[185],{"_102":193,"_95":194,"_155":195,"_157":-5,"_158":136,"_159":196,"_161":162,"_104":197,"_99":164,"_165":166,"_167":198,"_169":22,"_170":-5,"_171":199,"_98":200},"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}",[],[194],"files",[152,174,183,192],"counts",{"_205":32,"_206":164,"_207":32,"_208":209},"pulls","branches","forks","envVars",{"_210":32,"_211":32},"count","emptyCount","contents",[214,217,220,223],{"_102":153,"_95":154,"_155":156,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":215,"_99":164,"_165":166,"_167":168,"_169":22,"_170":-5,"_98":216},["D",1750438322453],[154],{"_102":175,"_95":176,"_155":177,"_157":-5,"_158":136,"_159":164,"_161":162,"_104":218,"_99":32,"_165":179,"_167":180,"_169":22,"_170":-5,"_98":219},["D",1750438275165],[176],{"_102":184,"_95":185,"_155":186,"_157":-5,"_158":136,"_159":164,"_161":162,"_104":221,"_99":32,"_165":188,"_167":189,"_169":22,"_170":-5,"_98":222},["D",1750438275165],[185],{"_102":193,"_95":194,"_155":195,"_157":-5,"_158":136,"_159":196,"_161":162,"_104":224,"_99":164,"_165":166,"_167":198,"_169":22,"_170":-5,"_98":225},["D",1750438293914],[194],"upstreamProject",{"_102":144,"_95":228,"_110":229,"_111":-5,"_108":109,"_23":230},"basic-html-starter","Basic HTML starter template based on Glitch's starter",{"_93":231,"_128":232},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","upstreamBranch",{"_102":139,"_104":235,"_236":237,"_95":43,"_137":144,"_99":238,"_138":-5,"_140":-5,"_239":240,"_106":-5,"_149":22,"_108":109,"_148":231,"_16":146,"_147":228},["D",1749070628054],"updatedAt",["D",1762117885911],72,"lockfileKey","1762117886076-esm.town_v_stevekrouse_basic-html-starter@72-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_93":94,"_95":96,"_97":-7,"_99":-7,"_100":247,"_212":252,"_261":-7,"_262":263,"_266":-5,"_201":267,"_280":281,"_282":283,"_284":135},{"_102":103,"_95":96,"_104":248,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":-5,"_114":22,"_115":-5,"_116":32,"_16":117,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":119,"_23":249,"_130":250,"_133":251,"_149":22},["D",1750438275165],{"_93":94,"_128":129},{"_93":94,"_132":129,"_14":112},{"_99":135,"_95":43,"_102":136,"_137":103,"_138":139,"_140":141,"_142":109,"_143":144,"_145":146,"_147":96,"_148":94},[253,255,257,259],{"_102":153,"_95":154,"_155":156,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":215,"_99":164,"_165":166,"_167":168,"_169":22,"_170":-5,"_98":254},[154],{"_102":175,"_95":176,"_155":177,"_157":-5,"_158":136,"_159":164,"_161":162,"_104":218,"_99":32,"_165":179,"_167":180,"_169":22,"_170":-5,"_98":256},[176],{"_102":184,"_95":185,"_155":186,"_157":-5,"_158":136,"_159":164,"_161":162,"_104":221,"_99":32,"_165":188,"_167":189,"_169":22,"_170":-5,"_98":258},[185],{"_102":193,"_95":194,"_155":195,"_157":-5,"_158":136,"_159":196,"_161":162,"_104":224,"_99":164,"_165":166,"_167":198,"_169":22,"_170":-5,"_98":260},[194],"readme","upstream",{"_102":139,"_104":264,"_236":265,"_95":43,"_137":144,"_99":238,"_138":-5,"_140":-5,"_239":240,"_106":-5,"_149":22,"_108":109,"_148":231,"_16":146,"_147":228},["D",1749070628054],["D",1762117885911],"pull",[268,271,274,277],{"_102":153,"_95":154,"_155":156,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":163,"_99":164,"_165":166,"_167":168,"_169":22,"_170":-5,"_171":269,"_98":270},[],[154],{"_102":175,"_95":176,"_155":177,"_157":-5,"_158":136,"_159":164,"_161":162,"_104":178,"_99":32,"_165":179,"_167":180,"_169":22,"_170":-5,"_171":272,"_98":273},[],[176],{"_102":184,"_95":185,"_155":186,"_157":-5,"_158":136,"_159":164,"_161":162,"_104":187,"_99":32,"_165":188,"_167":189,"_169":22,"_170":-5,"_171":275,"_98":276},[],[185],{"_102":193,"_95":194,"_155":195,"_157":-5,"_158":136,"_159":196,"_161":162,"_104":197,"_99":164,"_165":166,"_167":198,"_169":22,"_170":-5,"_171":278,"_98":279},[],[194],"previews",[271],"ahead",4,"behind","actionData","errors"]

ivobg

football-pitch-css-pure