app/src/App.jsx

@@ -10,9 +10,9 @@ const App = () => {
     <BrowserRouter>
       <div className='relative z-0 bg-lightgreen'>
         <div className='bg-hero-pattern bg-cover bg-no-repeat'>
-          <Navbar/>
+          <Navbar />
         </div>
-        <div className='relative z-0 w-full'>
+        <div className='relative z-0'>
          <Hero/>
         </div>
       </div>

app/src/assets/close.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="#FFF" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.4099 9L16.7099 2.71C16.8982 2.5217 17.004 2.2663 17.004 2C17.004 1.7337 16.8982 1.47831 16.7099 1.29C16.5216 1.1017 16.2662 0.995911 15.9999 0.995911C15.7336 0.995911 15.4782 1.1017 15.2899 1.29L8.99994 7.59L2.70994 1.29C2.52164 1.1017 2.26624 0.995911 1.99994 0.995911C1.73364 0.995911 1.47824 1.1017 1.28994 1.29C1.10164 1.47831 0.995847 1.7337 0.995847 2C0.995847 2.2663 1.10164 2.5217 1.28994 2.71L7.58994 9L1.28994 15.29C1.19621 15.383 1.12182 15.4936 1.07105 15.6154C1.02028 15.7373 0.994141 15.868 0.994141 16C0.994141 16.132 1.02028 16.2627 1.07105 16.3846C1.12182 16.5064 1.19621 16.617 1.28994 16.71C1.3829 16.8037 1.4935 16.8781 1.61536 16.9289C1.73722 16.9797 1.86793 17.0058 1.99994 17.0058C2.13195 17.0058 2.26266 16.9797 2.38452 16.9289C2.50638 16.8781 2.61698 16.8037 2.70994 16.71L8.99994 10.41L15.2899 16.71C15.3829 16.8037 15.4935 16.8781 15.6154 16.9289C15.7372 16.9797 15.8679 17.0058 15.9999 17.0058C16.132 17.0058 16.2627 16.9797 16.3845 16.9289C16.5064 16.8781 16.617 16.8037 16.7099 16.71C16.8037 16.617 16.8781 16.5064 16.9288 16.3846C16.9796 16.2627 17.0057 16.132 17.0057 16C17.0057 15.868 16.9796 15.7373 16.9288 15.6154C16.8781 15.4936 16.8037 15.383 16.7099 15.29L10.4099 9Z" fill="#FFFFFF"/>
+</svg>

app/src/assets/index.js

@@ -1,8 +1,62 @@
 import logo from "./logo.svg";
 import backend from "./backend.png";
+import creator from "./creator.png";
+import mobile from "./mobile.png";
+import web from "./web.png";
+import github from "./github.png";
+import menu from "./menu.svg";
+import close from "./close.svg";
 
+import css from "./tech/css.png";
+import docker from "./tech/docker.png";
+import figma from "./tech/figma.png";
+import git from "./tech/git.png";
+import html from "./tech/html.png";
+import javascript from "./tech/javascript.png";
+import mongodb from "./tech/mongodb.png";
+import nodejs from "./tech/nodejs.png";
+import reactjs from "./tech/reactjs.png";
+import redux from "./tech/redux.png";
+import tailwind from "./tech/tailwind.png";
+import typescript from "./tech/typescript.png";
+import threejs from "./tech/threejs.svg";
+
+import meta from "./company/meta.png";
+import shopify from "./company/shopify.png";
+import starbucks from "./company/starbucks.png";
+import tesla from "./company/tesla.png";
+
+import carrent from "./carrent.png";
+import jobit from "./jobit.png";
+import tripguide from "./tripguide.png";
 
 export {
   logo,
-  backend
+  backend,
+  creator,
+  mobile,
+  web,
+  github,
+  menu,
+  close,
+  css,
+  docker,
+  figma,
+  git,
+  html,
+  javascript,
+  mongodb,
+  nodejs,
+  reactjs,
+  redux,
+  tailwind,
+  typescript,
+  threejs,
+  meta,
+  shopify,
+  starbucks,
+  tesla,
+  carrent,
+  jobit,
+  tripguide,
 };

app/src/assets/menu.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="12" viewBox="0 0 20 12" fill="#FFF" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 2L19 2C19.2652 2 19.5196 1.89464 19.7071 1.70711C19.8946 1.51957 20 1.26522 20 1C20 0.734784 19.8946 0.480429 19.7071 0.292892C19.5196 0.105356 19.2652 0 19 0L9 0C8.73478 0 8.48043 0.105356 8.29289 0.292892C8.10536 0.480429 8 0.734784 8 1C8 1.26522 8.10536 1.51957 8.29289 1.70711C8.48043 1.89464 8.73478 2 9 2ZM19 10L1 10C0.734784 10 0.480429 10.1054 0.292892 10.2929C0.105356 10.4804 0 10.7348 0 11C0 11.2652 0.105356 11.5196 0.292892 11.7071C0.480429 11.8946 0.734784 12 1 12L19 12C19.2652 12 19.5196 11.8946 19.7071 11.7071C19.8946 11.5196 20 11.2652 20 11C20 10.7348 19.8946 10.4804 19.7071 10.2929C19.5196 10.1054 19.2652 10 19 10V10ZM1 7L19 7C19.2652 7 19.5196 6.89464 19.7071 6.70711C19.8946 6.51957 20 6.26522 20 6C20 5.73478 19.8946 5.48043 19.7071 5.29289C19.5196 5.10536 19.2652 5 19 5L1 5C0.734784 5 0.480429 5.10536 0.292892 5.29289C0.105356 5.48043 0 5.73478 0 6C0 6.26522 0.105356 6.51957 0.292892 6.70711C0.480429 6.89464 0.734784 7 1 7Z" fill="#FFFFFF"/>
+</svg>

app/src/assets/tech/threejs.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg fill="none" stroke-linecap="square" stroke-miterlimit="10" version="1.1" viewBox="0 0 226.77 226.77" xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(8.964 4.2527)" fill-rule="evenodd" stroke="#000" stroke-linecap="butt" stroke-linejoin="round" stroke-width="4">
+  <path d="m63.02 200.61-43.213-174.94 173.23 49.874z"/>
+  <path d="m106.39 50.612 21.591 87.496-86.567-24.945z"/>
+  <path d="m84.91 125.03-10.724-43.465 43.008 12.346z"/>
+  <path d="m63.458 38.153 10.724 43.465-43.008-12.346z"/>
+  <path d="m149.47 62.93 10.724 43.465-43.008-12.346z"/>
+  <path d="m84.915 125.06 10.724 43.465-43.008-12.346z"/>
+ </g>
+</svg>

app/src/components/Hero.jsx

@@ -2,6 +2,8 @@ import React, { useEffect, useState } from "react";
 import { styles } from "../style";
 import { ComputersCanvas } from "./canvas";
 import { Link } from "react-router-dom";
+import { navLinks } from "../constants";
+import { logo, menu, close } from "../assets";
 
 
 const Hero = () => {
@@ -21,7 +23,7 @@ const Hero = () => {
   let active_bbt = "bbt1";
   let number_of_defenders = 0;
   let number_of_strikers = 0;
-  let idCounter = 0;
+
   var shooterX = 0;
   var shooterY = 0;
   var eX = " ";
@@ -35,6 +37,7 @@ const Hero = () => {
     document.getElementById("bbt3").style.background = "#99FFCC";
     document.getElementById("bbt4").style.background = "#99FFCC";
     document.getElementById(a).style.background = "#00CC66";
+
     active_bbt = a
   }
   function changeLeg(a){
@@ -127,46 +130,6 @@ const Hero = () => {
       number_of_strikers = 0 
 
   }
-
-
-  //funkcja dodaje zawodnika do listy zawodnikow. zmienne x oraz y to wspolrzedne a position
-  // to pozycja zawodnika 0 - strzelec, 1 - bramkarz, 2 - broniacy, 3 napastnik
-  // ball - to odnosnik do punktu na boisku
-
-  function addPlayer(x,y, possition, ball){
-    
-    
-    //Zmiana stylu w zaleznosci czy zawodnik jest obronca/napastnikiem iyp.
-    var pName = "Strzelec"
-    var pColor = "white"
-    var bColor = "rgb(16, 46, 29)"
-    if(possition == 1){
-      var pName = "Bramkarz"
-      var pColor = "white"
-      var bColor = "rgb(16, 46, 29)"
-    }else if(possition == 2){
-      var pName = "Napastnik"
-      var pColor = "white"
-      var bColor = "rgb(16, 46, 29)"
-    }else if (possition ==3){
-      var pName = "Obrońca"
-      var pColor = "white"
-      var bColor = "rgb(16, 46, 29)"
-    }
-
-    var player = document.createElement('div');
-    player.className = 'player';
-    player.style.width = "inherit"
-
-    var list = document.getElementById("list")
-
-    var tekst = document.createElement('div')
-    tekst.style.fontSize = "10px";
-    tekst.innerHTML = pName;
-    player.appendChild(tekst)
-    list.appendChild(player)
-
-  }
   // Wysłanie zapytania do serwera
   const [data,setData] = useState([{}])
   function sentQuestion() {
@@ -196,6 +159,7 @@ const Hero = () => {
 
       shooterX = (x * 105)/600
       shooterY = ((400 - y) * 69)/ 400
+
       // Przypadek kiedy zaznaczamy strzelca
       if(active_bbt == "bbt1"){
         let existingBall = document.querySelector('.football');
@@ -205,8 +169,6 @@ const Hero = () => {
             ball.className = 'football';
             ball.style.left = x + 'px';
             ball.style.top = y + 'px';
-            ball.id = "ball_" + new Date().getTime().toString()
-            addPlayer(shooterX,shooterY,0,ball)
             footballField.appendChild(ball);
         } else {
             alert('Możesz dodać tylko jedną piłkę!');
@@ -220,7 +182,6 @@ const Hero = () => {
           ball.className = 'goalkeeper';
           ball.style.left = x + 'px';
           ball.style.top = y + 'px';
-          addPlayer(shooterX,shooterY,1,ball.id)
           footballField.appendChild(ball);
         } else {
           alert('Możesz dodać tylko jednego bramkarza!');
@@ -234,7 +195,6 @@ const Hero = () => {
         ball.style.left = x + 'px';
         ball.style.top = y + 'px';
         footballField.appendChild(ball);
-        addPlayer(shooterX,shooterY,3,ball.id)
         number_of_defenders = number_of_defenders + 1} else {alert("zbyt duza liczba obronców")}
      }else if(active_bbt == "bbt4"){
       // Przypadek kiedy zaznaczamy napastnika
@@ -244,7 +204,6 @@ const Hero = () => {
         ball.style.left = x + 'px';
         ball.style.top = y + 'px';
         footballField.appendChild(ball);
-        addPlayer(shooterX,shooterY,2,ball.id)
         number_of_strikers = number_of_strikers + 1 
       }else{alert("zbyt duza liczba obroncow")}}
 
@@ -284,7 +243,7 @@ const Hero = () => {
   /*zwracany komponent zawierajacy boisko*/
 
   return (
-<div>
+<body>
 
 <div className="container">
 {/* Listy zwijane */}
@@ -305,6 +264,13 @@ const Hero = () => {
             )}
         </div>
 
+      {/* old version */}
+     {/* <div className="ChoosingPlayer">
+                    <button className="cho-shooter" id = "bbt5">Noga Prawa</button>
+                    <button className="cho-goalkeeper"id = "bbt6">Noga Lewa</button>
+                    <button className="cho-defence" id = "bbt7">Głowa</button>
+                    <button className="cho-atack" id = "bbt8">Inna</button>
+        </div> */}
 
      <div className="dropdown">
             <button onClick={toggleDropdown} className="dropbtn">Technika strzału</button>
@@ -314,7 +280,6 @@ const Hero = () => {
                     <a href="#"> Wolej </a>
                     <a href="#"> Półwolej </a>
                     <a href="#"> Lob </a>
-      
                     <a href="#"> Szczupak </a>
                     <a href="#"> Kopnięcie z góry </a>
                     <a href="#"> Piętka </a>
@@ -361,15 +326,32 @@ const Hero = () => {
                 />
             </div>
           </div>
-      
+
-      <div className="main-content" id = "field">   
+          <div className="main-content" id = "field">   
-          <div className="player-list" id = "list">
+          <div className="field" id="footballField">
-            
+
-          </div>
+              <span className="left">
-          <div className="field" id="footballField">   
+                  <span className="halfway-line"></span>
-              <div className="field-pic"></div>
+                  <span className="centre-circle"></span>
+                  <span className="centre-mark"></span>
+                  <span className="penalty-area"></span>
+                  <span className="penalty-mark"></span>
+                  <span className="penalty-arc"></span>
+                  <span className="goal-area"></span>
+                  <span className="corner-arc"></span>
+              </span>
               
-        </div>
+              <span className="right">
+                  <span className="halfway-line"></span>
+                  <span className="centre-circle"></span>
+                  <span className="centre-mark"></span>
+                  <span className="penalty-area"></span>
+                  <span className="penalty-mark"></span>
+                  <span className="penalty-arc"></span>
+                  <span className="goal-area"></span>
+                  <span className="corner-arc"></span>
+              </span>
+      </div>
     </div>
 
 
@@ -404,7 +386,7 @@ const Hero = () => {
                 </b>
           </div>   
    </div>
-  </div>
+  </body>
   );
 };
 

app/src/components/Navbar.jsx

@@ -2,8 +2,8 @@ import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 
 import { styles } from "../style";
-
+import { navLinks } from "../constants";
-import { logo} from "../assets";
+import { logo, menu, close } from "../assets";
 
 const Navbar = () => {
   const [active, setActive] = useState("");
@@ -48,6 +48,20 @@ const Navbar = () => {
                 </span> 
         </Link>
 
+        <ul className='list-none hidden sm:flex flex-row gap-10'>
+          {navLinks.map((nav) => (
+            <li
+              key={nav.id}
+              className={`${
+                active === nav.title ? "text-white" : "text-secondary"
+              } hover:text-white text-[18px] font-medium cursor-pointer`}
+              onClick={() => setActive(nav.title)}
+            >
+              <a href={`#${nav.id}`}>{nav.title}</a>
+            </li>
+          ))}
+        </ul>
+
       </div>
     </nav>
   );

app/src/constants/index.js

@@ -1,7 +1,257 @@
 import {
-    
+    mobile,
     backend,
-   
+    creator,
+    web,
+    javascript,
+    typescript,
+    html,
+    css,
+    reactjs,
+    redux,
+    tailwind,
+    nodejs,
+    mongodb,
+    git,
+    figma,
+    docker,
+    meta,
+    starbucks,
+    tesla,
+    shopify,
+    carrent,
+    jobit,
+    tripguide,
+    threejs,
   } from "../assets";
   
-  export {  };
+  export const navLinks = [
+  ];
+  
+
+
+
+
+  const services = [
+    {
+      title: "Web Developer",
+      icon: web,
+    },
+    {
+      title: "React Native Developer",
+      icon: mobile,
+    },
+    {
+      title: "Backend Developer",
+      icon: backend,
+    },
+    {
+      title: "Content Creator",
+      icon: creator,
+    },
+  ];
+  
+  const technologies = [
+    {
+      name: "HTML 5",
+      icon: html,
+    },
+    {
+      name: "CSS 3",
+      icon: css,
+    },
+    {
+      name: "JavaScript",
+      icon: javascript,
+    },
+    {
+      name: "TypeScript",
+      icon: typescript,
+    },
+    {
+      name: "React JS",
+      icon: reactjs,
+    },
+    {
+      name: "Redux Toolkit",
+      icon: redux,
+    },
+    {
+      name: "Tailwind CSS",
+      icon: tailwind,
+    },
+    {
+      name: "Node JS",
+      icon: nodejs,
+    },
+    {
+      name: "MongoDB",
+      icon: mongodb,
+    },
+    {
+      name: "Three JS",
+      icon: threejs,
+    },
+    {
+      name: "git",
+      icon: git,
+    },
+    {
+      name: "figma",
+      icon: figma,
+    },
+    {
+      name: "docker",
+      icon: docker,
+    },
+  ];
+  
+  const experiences = [
+    {
+      title: "React.js Developer",
+      company_name: "Starbucks",
+      icon: starbucks,
+      iconBg: "#383E56",
+      date: "March 2020 - April 2021",
+      points: [
+        "Developing and maintaining web applications using React.js and other related technologies.",
+        "Collaborating with cross-functional teams including designers, product managers, and other developers to create high-quality products.",
+        "Implementing responsive design and ensuring cross-browser compatibility.",
+        "Participating in code reviews and providing constructive feedback to other developers.",
+      ],
+    },
+    {
+      title: "React Native Developer",
+      company_name: "Tesla",
+      icon: tesla,
+      iconBg: "#E6DEDD",
+      date: "Jan 2021 - Feb 2022",
+      points: [
+        "Developing and maintaining web applications using React.js and other related technologies.",
+        "Collaborating with cross-functional teams including designers, product managers, and other developers to create high-quality products.",
+        "Implementing responsive design and ensuring cross-browser compatibility.",
+        "Participating in code reviews and providing constructive feedback to other developers.",
+      ],
+    },
+    {
+      title: "Web Developer",
+      company_name: "Shopify",
+      icon: shopify,
+      iconBg: "#383E56",
+      date: "Jan 2022 - Jan 2023",
+      points: [
+        "Developing and maintaining web applications using React.js and other related technologies.",
+        "Collaborating with cross-functional teams including designers, product managers, and other developers to create high-quality products.",
+        "Implementing responsive design and ensuring cross-browser compatibility.",
+        "Participating in code reviews and providing constructive feedback to other developers.",
+      ],
+    },
+    {
+      title: "Full stack Developer",
+      company_name: "Meta",
+      icon: meta,
+      iconBg: "#E6DEDD",
+      date: "Jan 2023 - Present",
+      points: [
+        "Developing and maintaining web applications using React.js and other related technologies.",
+        "Collaborating with cross-functional teams including designers, product managers, and other developers to create high-quality products.",
+        "Implementing responsive design and ensuring cross-browser compatibility.",
+        "Participating in code reviews and providing constructive feedback to other developers.",
+      ],
+    },
+  ];
+  
+  const testimonials = [
+    {
+      testimonial:
+        "I thought it was impossible to make a website as beautiful as our product, but Rick proved me wrong.",
+      name: "Sara Lee",
+      designation: "CFO",
+      company: "Acme Co",
+      image: "https://randomuser.me/api/portraits/women/4.jpg",
+    },
+    {
+      testimonial:
+        "I've never met a web developer who truly cares about their clients' success like Rick does.",
+      name: "Chris Brown",
+      designation: "COO",
+      company: "DEF Corp",
+      image: "https://randomuser.me/api/portraits/men/5.jpg",
+    },
+    {
+      testimonial:
+        "After Rick optimized our website, our traffic increased by 50%. We can't thank them enough!",
+      name: "Lisa Wang",
+      designation: "CTO",
+      company: "456 Enterprises",
+      image: "https://randomuser.me/api/portraits/women/6.jpg",
+    },
+  ];
+  
+  const projects = [
+    {
+      name: "Car Rent",
+      description:
+        "Web-based platform that allows users to search, book, and manage car rentals from various providers, providing a convenient and efficient solution for transportation needs.",
+      tags: [
+        {
+          name: "react",
+          color: "blue-text-gradient",
+        },
+        {
+          name: "mongodb",
+          color: "green-text-gradient",
+        },
+        {
+          name: "tailwind",
+          color: "pink-text-gradient",
+        },
+      ],
+      image: carrent,
+      source_code_link: "https://github.com/",
+    },
+    {
+      name: "Job IT",
+      description:
+        "Web application that enables users to search for job openings, view estimated salary ranges for positions, and locate available jobs based on their current location.",
+      tags: [
+        {
+          name: "react",
+          color: "blue-text-gradient",
+        },
+        {
+          name: "restapi",
+          color: "green-text-gradient",
+        },
+        {
+          name: "scss",
+          color: "pink-text-gradient",
+        },
+      ],
+      image: jobit,
+      source_code_link: "https://github.com/",
+    },
+    {
+      name: "Trip Guide",
+      description:
+        "A comprehensive travel booking platform that allows users to book flights, hotels, and rental cars, and offers curated recommendations for popular destinations.",
+      tags: [
+        {
+          name: "nextjs",
+          color: "blue-text-gradient",
+        },
+        {
+          name: "supabase",
+          color: "green-text-gradient",
+        },
+        {
+          name: "css",
+          color: "pink-text-gradient",
+        },
+      ],
+      image: tripguide,
+      source_code_link: "https://github.com/",
+    },
+  ];
+  
+  export { services, technologies, experiences, testimonials, projects };

app/src/index.css

@@ -4,6 +4,7 @@
 @tailwind components;
 @tailwind utilities;
 
+
         .Ex{
            display: block; /* Może być inline-block, jeśli preferujesz */
           margin: 20px auto; /* Centralnie i z marginesem */
@@ -29,26 +30,12 @@
       .container {
           display: flex;
           flex-direction: column;
-          align-items: baseline;
-          justify-content: space-between;
           align-items: center;
+          justify-content: space-between;
           position: relative;
           font-size: 7px;
-          margin: 5px;
+          margin: 50 px;
-          width: 100%;
       }
-
-      .field-pic{
-        content:url(assets/bojo.png);
-        height: inherit;
-        width: inherit;
-      }
-      .field-pic img{
-        max-width: 100%;
-        max-height: 100%;
-      }
-
-     
         .container span {
             display: block;
         }
@@ -57,29 +44,21 @@
           display: flex;
           justify-content: space-between;
           align-items: center;
-         
+          width: 100%;
-          
 }
-        .player{
-          width: inherit;
-          height: 8vh;
-          background-color: rgb(16, 46, 29);
-          --line: 0.3em solid white;
-          border: var(--line);
-
-        }
 
         .field {
           --line: 0.3em solid white;
             border: var(--line);
             position: relative;
             overflow: hidden;
-            width: 50vw;
+            width: inherit;
-            height: calc(50vw*68/105);
+            height: inherit;
             z-index: 1;
             margin: 0;
-            background-image: url("img_tree.gif");
+            background-color:green; 
-            background-color: #cccccc;
+            width: 120em;
+            height: 80em;
             justify-content: space-between;
           }
           
@@ -93,19 +72,13 @@
             background-color: #f0f0f0; /* Example background color */
             z-index: 1000; /* Ensure it stays on top of other content */
         }
-        .player-list{
+        
-          background-color: rgb(61, 38, 38);
-          width: 10vw;
-          height: calc(50vw*68/105);
-
-
-        }
         .top-bar {
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 10px;
-          width: 60vw; /* Dostosuj szerokość zgodnie z potrzebami */
+          width: 100%; /* Dostosuj szerokość zgodnie z potrzebami */
           /* Możesz dodać dodatkowe style, jak tło, obramowanie itp. */
           z-index: 2;
         }
@@ -115,9 +88,106 @@
           justify-content: space-between; /* Rozmieszcza przyciski równomiernie */
           align-items: center;
           padding: 10px;
-          width: 50vw; /* Dostosuj szerokość zgodnie z potrzebami */
+          width: 100%; /* Dostosuj szerokość zgodnie z potrzebami */
           /* Możesz dodać dodatkowe style, jak tło, obramowanie itp. */
       }
+
+        .halfway-line {
+            width: 60em;
+            height: 80em;
+            border-right: var(--line);
+        }
+
+        .centre-circle,
+        .penalty-arc {
+            width: 20em;
+            height: 20em;
+            border: var(--line);
+            border-radius: 50%;
+            position: absolute;
+            top: 30em;
+        }
+
+        .centre-circle {
+            left: calc((120em - 20em - 0.3em) / 2);
+        }
+
+        .centre-mark {
+            width: 2em;
+            height: 2em;
+            background-color: white;
+            border-radius: 50%;
+            position: absolute;
+            top: calc(80em / 2 - 1em);
+            left: calc(120em / 2 - 1em + 0.3em / 2);
+        }
+
+        .penalty-mark {
+            width: 2em;
+            height: 2em;
+            background-color: white;
+            border-radius: 50%;
+            position: absolute;
+            top: calc(80em / 2 - 1em);
+            left: calc(12em - 2em / 2);
+        }
+
+        .penalty-area {
+            width: 18em;
+            height: 44em;
+            border: var(--line);
+            position: absolute;
+            top: calc((80em - 44em) / 2);
+            left: -0.3em;
+            background-color: green;
+        }
+
+        .penalty-arc {
+            left: calc(12em - 20em / 2);
+            z-index: -1;
+        }
+
+        .goal-area {
+            width: 6em;
+            height: 20em;
+            border: var(--line);
+            position: absolute;
+            top: calc((80em - 20em) / 2);
+            left: -0.3em;
+        }
+
+        .corner-arc {
+            border: 1px solid blue;
+            position: absolute;
+        }
+
+        .corner-arc::after,
+        .corner-arc::before {
+            content: '';
+            position: absolute;
+            width: 5em;
+            height: 5em;
+            border: 0.3em solid white;
+            border-radius: 50%;
+        }
+
+        .corner-arc::before {
+            top: 0;
+            left: 0;
+        }
+
+        .corner-arc::after {
+            bottom: 0;
+            right: 0;
+        }
+
+        .right {
+            position: absolute;
+            top: 0px;
+            left: 50%;
+            transform: rotateY(180deg);
+        }
+
         .football {
             width: 2em;
             height: 2em;