Job application tests HTML/CSS

[AlbertXerta]

Just as a comment, I had to remove 'node-sass' and add 'sass' because it was deprecated and generated multiple errors on installs in newer devices.

[windsurf-bot]

Other comments (11)

• index.html (15-17) The Font Awesome version 7.0.1 referenced in the link tag doesn't exist. The latest stable version is 6.5.1 as of October 2025. This will cause the social media icons to fail to load.

  	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
  		integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
  		crossorigin="anonymous" referrerpolicy="no-referrer" />
  

• index.html (56-58) The legal links in the footer have empty href attributes. These should point to valid URLs for the respective legal pages to improve accessibility and SEO.
• src/scss/main.scss (2-5) The font-face declarations have incorrect syntax for the src attribute. URLs should be wrapped in the url() function and format values should be in quotes.

      font-family: 'Futura';
      src: url("../fonts/FuturaMedium.otf") format("opentype");
      font-weight: 500;
      font-style: normal;
  

• src/scss/main.scss (9-12) The second font-face declaration also has incorrect syntax. URLs should be wrapped in url() and the format should be 'opentype' instead of 'otf'.

      font-family: 'Futura';
      src: url("../fonts/FuturaBold.otf") format("opentype");
      font-weight: 700;
      font-style: normal;
  

• css/main.css (25-27) Applying transition to all elements with the universal selector (*) can cause performance issues and unexpected animations. Consider limiting transitions to specific elements that need them.
• index.html (35-35) The contact button has an empty href attribute which is not ideal for accessibility and SEO. Consider pointing it to a valid contact page URL or using javascript:void(0) if it's meant to trigger JavaScript functionality.
• index.html (63-80) The social media links in the footer have empty href attributes. These should point to the actual social media profiles of the company.
• src/scss/main.scss (31-31) Using `transition: all` on every element (*) can cause performance issues as it forces the browser to monitor all possible CSS property changes. Consider being more specific about which properties should transition.
• css/main.css (170-173) There's a duplicate border-radius property in the .btn-primary class (lines 170 and 173), with conflicting values (5px and 8px). The second value (8px) will override the first one, making the first declaration unnecessary.
• src/scss/main.scss (164-174) There's a duplicate border-radius property in the .btn-primary class. The first one (5px) will be overridden by the second one (8px).

                      font-family: 'Futura', sans-serif;
                      font-weight: 700;
                      font-size: 18px;
                      background-color: $ooptimo-green;
                      color: $ooptimo-blue;
                      padding: 17px 55px;
                      border: none;
                      text-decoration: none;
                      display: inline-block;
                      border-radius: 8px;
  

• src/scss/main.scss (70-72) The hardcoded color #6ed5b8 in .header-pill should use the $ooptimo-green variable for consistency and easier maintenance.

              background-color: $ooptimo-green;
              padding: 25px 20px;
              border-radius: 55px;
  

1 file skipped due to size limits:

• package-lock.json

💡 To request another review, post a new comment with "/windsurf-review".

[windsurf-bot]

The font file paths in the @font-face declarations are missing the url() wrapper, which will prevent the fonts from loading correctly.

Suggested change

	font-family: "Futura";
	src: "../fonts/FuturaMedium.otf" format("otf");
	font-family: "Futura";
	src: url("../fonts/FuturaMedium.otf") format("otf");
	font-weight: 500;

[windsurf-bot]

The font file path is missing the url() wrapper here as well.

Suggested change

	font-family: "Futura";
	src: "../fonts/FuturaBold.otf" format("otf");
	font-family: "Futura";
	src: url("../fonts/FuturaBold.otf") format("otf");
	font-weight: 700;

[windsurf-bot]

The format value for OTF fonts should be 'opentype' rather than 'otf' for better browser compatibility.

Suggested change

	font-family: "Futura";
	src: "../fonts/FuturaMedium.otf" format("otf");
	font-family: "Futura";
	src: url("../fonts/FuturaMedium.otf") format("opentype");
	font-weight: 500;