HTML/SCSS

Hello @BurakOzcancf , Congratulation on completing your first project . Your solution is really nice . I have few suggestions :

• whenever you include interactive elements( button, links, input, textarea), make sure you include clearly visible focus-visible styles as well as hover ones. This will make the users can navigate this website using keyboard (by using Tab key) easily. For future use , you have to specify the type of button .

• To get rid of the accessibility issues you can add a <h1> with class="sr-only"(Hidden visually, but present for assistive tech).

.sr-only {

	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
	-webkit-clip-path: inset(50%) !important;
		clip-path: inset(50%) !important;  /* 2 */
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;       
    
}

This fairly modern technique will hide or clip content that does not fit into a 1-pixel visible area. Like off-screen content, it will be visually hidden but still readable by modern screen readers.

• You can replace the <div > by <h2> as they are heading .

• Don't use nesting css selectors. Really important to keep css specificity as low/flat as possible. The best way to do that is single class selectors.

I really hope this feedback helps , happy and keep coding