PopUp open on click using js?

Question

JavaScript

Good day, I found a cool pop-up window on codepen, everything works great, but I don’t understand how to make it so that it was closed by standard (when you open the page)
https://codepen.io/amirsaleem/pen/LxJzgJ

Answer 1

#1
#2
#3

Answer 2

Checked through Google service:
All elements are in place, but the text is unreadable

Answer 3

the only thing you can get to is:
both the lack of figure and figcaption tags
and YOU underestimated the power of lists
and what kind of buzz YOU send the Get' om form

Answer 4

Sliced ​​top and bottom letters in input fields, no min-width:

Answer 5

I'll add a few more screenshots:
1. https://yadi.sk/i/GF4lco0w37ofzk
On ff, the text in the input looks cropped and the textarea is not fixed sizes.
2. https://yadi.sk/i/bxlx7D7s37oh4p
Why use a picture if you can fill it with a regular color
3. https://validator.w3.org/nu/?doc=https%3A%2F%2Fole...
Tag img must have alt.
4. The .wrapper class is useless. Apply a fill to the body and that's it.
5. IMHO you should not prescribe the .gallery display: inline-block;
6. In textarea, when checking through chrome and ff, the font is different. One with serifs, the other without.
A similar situation with outline.
7. Isn't the default footer a block? If it's wrong, correct it.
8. It is better to do such things as a list
https://yadi.sk/i/LfSdmtb237ospk
9. For non-closed tags like input,img, link - it is worth prescribing at the end "/"
10. https://yadi.sk/i/ _tQ2_Tw037ovTC
This, of course, is a trifle, and does not play any serious role, but with the release of html5, you can no longer prescribe type when connecting css
11. Specifically, I can’t say anything special about css. it's up to everyone what styles to prescribe which not, but the only thing is that you need to be able to format it correctly. Read about it on the Internet.

Answer 6

1. textarea stretches both vertically and horizontally.
2. Body is already set, color: #9b9b9b;why set it several more times for Welcome to my portfolio?
3. There are cool tags section, article, figure, figcaption, main
4. The submit button should have a "palm" cursor and it would be nice to have some kind of hover change.
5. I don't know exactly how it should be done in BEM, but personally I'm pissed off by the classes for h1 and h2, etc. if they are the same everywhere.
6. Why is the name on the form written in red and the rest in gray?
7. I think that placeholder should disappear when getting focus. (It's 50/50, there are different opinions)
8. .gallery-wrapper why is the background a picture?
enough :)