@jasurkurbanov
Posted
The first tip
naming.
If you webpage is one page only why you're putting name for class like this ** class="pop-up-container**. Put names that's relevant to you project. In your case I am not seeing any popup ? Because this can be anything similar to popup. For example it can be, class="modal-container" or class="submittion-container", or "class=""feedback-container". I guess for this particular project will be enough to use just
<div class="container">
.....
</div>
So, change class="pop-up-container" to class="container" Also, change **class="page1" to "class="slide1" or other than page. Since this is not page, just single component which is switching. Page means whole webpage.
I mentioning these things in order to emphasizing importance of naming while create webpage or any other small scale projects. Since, after you there will be other developers who will get involved in project. Make for them easy as well to ready code.
The second tip
check your code before submitting to production level. I came across a duplication and comments in your code which should not be neglected before making you project live.
Inside HTML,
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="main.css" />
there is two linking in CSS.
Moreover, you connected font inside HTML.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@700&display=swap" rel="stylesheet">
but code connecting font inside CSS is not removed. main.css
/* @import url(https://fonts.googleapis.com/css?family=Overpass); */
/* @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@700&display=swap'); */
In addition, inside .main.css I observed other comments
margin: 0;
padding: 0;
font-family: 'Overpass', sans-serif;
/* font-size: 93.75%; */
font-size: 15px;
font-weight: 400;
color: var(--mediumGrey);
}
#page1 {
/* display: flex; */
}
#page2 {
/* display: flex; */
display: none;
}
Why I am mention them, because when you're applying for code review or want to get feedback. You should do all cleanups, this makes code review faster and shows your respect to person who is checking your code.
Third tip
Why you need class theme for body ? If you try to make dark mode and light mode. I would think it is better to do it with some wrapper. Example:
<body>
<div class="wrapper">
.....
</div>
</body>
Marked as helpful
