diff --git a/README.md b/README.md new file mode 100644 index 0000000..a87868c --- /dev/null +++ b/README.md @@ -0,0 +1,127 @@ +π Landing_Figma + +Landing_Figma β ΡΡΠΎ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π»Π΅Π½Π΄ΠΈΠ½Π³, ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π½ΡΠΉ ΠΏΠΎ ΠΌΠ°ΠΊΠ΅ΡΡ ΠΈΠ· Figma. +ΠΡΠΎΠ΅ΠΊΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΠ΅Ρ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΠΏΡΠΈΡΠΌΡ Π²ΡΡΡΡΠΊΠΈ ΠΈ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ Π½Π° ΡΠΈΡΡΠΎΠΌ HTML, CSS ΠΈ JavaScript β Π±Π΅Π· ΡΡΠΎΡΠΎΠ½Π½ΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ ΠΈ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠ². +ΠΠ»Π°Π²Π½ΡΠΉ Π°ΠΊΡΠ΅Π½Ρ ΡΠ΄Π΅Π»Π°Π½ Π½Π° ΠΌΠΈΠΊΡΠΎΠ°Π½ΠΈΠΌΠ°ΡΠΈΡΡ , ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ ΠΈ ΡΠΈΡΡΠΎΠΉ ΡΡΡΡΠΊΡΡΡΠ΅ ΠΊΠΎΠ΄Π°, ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ Π»ΡΠ³ΠΊΠΎΠΉ ΠΈ Π±ΡΡΡΡΠΎΠΉ. + +π§± ΠΡΠ½ΠΎΠ²Π½Π°Ρ ΠΈΠ΄Π΅Ρ ΠΏΡΠΎΠ΅ΠΊΡΠ° + +Π‘Π°ΠΉΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½ ΠΊΠ°ΠΊ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΊΠΎΡΠΏΠΎΡΠ°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π»Π΅Π½Π΄ΠΈΠ½Π³Π° SEO-Π°Π³Π΅Π½ΡΡΡΠ²Π°. +ΠΠ½ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ Π² ΡΠ΅Π±Π΅ ΡΠ΅ΡΠΊΡΡ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΡ, ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΠ·ΠΌ, Π»ΠΎΠ³ΠΈΡΠ½ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΈ ΠΆΠΈΠ²ΠΎΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ. +ΠΠ°ΠΆΠ΄Π°Ρ ΡΠ΅ΠΊΡΠΈΡ β ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ Π°ΠΊΡΠ΅Π½Ρ, ΠΎΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π΄ΠΎ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΊΠ°ΡΡΠΎΡΠ΅ΠΊ Ρ ΡΡΠ»ΡΠ³Π°ΠΌΠΈ. + +π Π‘ΡΡΡΠΊΡΡΡΠ° ΠΏΡΠΎΠ΅ΠΊΡΠ° +project/ +β +βββ index.html # ΠΡΠ½ΠΎΠ²Π½Π°Ρ HTML-ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ° (ΡΡΡΡΠΊΡΡΡΠ° Π²ΡΠ΅Ρ Π±Π»ΠΎΠΊΠΎΠ²) +βββ reset.css # Π‘Π±ΡΠΎΡ Π±Π°Π·ΠΎΠ²ΡΡ ΡΡΠΈΠ»Π΅ΠΉ Π±ΡΠ°ΡΠ·Π΅ΡΠ° +βββ style.css # ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ: ΡΠ΅ΡΠΊΠ°, Π°Π΄Π°ΠΏΡΠΈΠ², Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΌΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΡ +βββ main.js # JS-ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»: Π±ΡΡΠ³Π΅Ρ, ΡΠ»Π°ΠΉΠ΄Π΅ΡΡ, Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Ρ, ΡΠ²Π°ΠΉΠΏΡ +βββ /images/ # ΠΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (Π»ΠΎΠ³ΠΎΡΠΈΠΏ, ΡΠΎΠ½Ρ, ΠΈΠΊΠΎΠ½ΠΊΠΈ, ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ) + +βοΈ ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π» +πΉ ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ + +ΠΠ²Π° ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Ρ Π΅Π΄Π΅ΡΠ°: ΠΎΠ±ΡΡΠ½ΡΠΉ ΠΈ ΠΊΠΎΠΌΠΏΠ°ΠΊΡΠ½ΡΠΉ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² + +ΠΠΊΡΠΈΠ²Π½ΠΎΠ΅ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΠΏΡΠ½ΠΊΡΠ° ΠΌΠ΅Π½Ρ + +ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ βΠΠΎΠ»ΡΡΠ΅ ΡΡΠ»ΡΠ³β Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠΌ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ ΡΠ΅ΠΊΡΡΠ° (βΠΠ΅Π½ΡΡΠ΅ ΡΡΠ»ΡΠ³β / βΠΠΎΠ»ΡΡΠ΅ ΡΡΠ»ΡΠ³β) + +πΉ ΠΡΡΠ³Π΅Ρ-ΠΌΠ΅Π½Ρ + +Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π½Π° JavaScript + +ΠΡΠΈ ΠΎΡΠΊΡΡΡΠΈΠΈ Π±Π»ΠΎΠΊΠΈΡΡΠ΅ΡΡΡ ΡΠΊΡΠΎΠ»Π» ΡΡΡΠ°Π½ΠΈΡΡ + +ΠΠ΄Π°ΠΏΡΠΈΡΠΎΠ²Π°Π½ΠΎ ΠΏΠΎΠ΄ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Ρ ΠΏΠ»Π°Π²Π½ΡΠΌ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ΠΌ + +πΉ ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½-ΡΠ»Π°ΠΉΠ΄Π΅Ρ + +ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠΊΡΡΠ²Π°Π΅ΡΡΡ ΠΊΠ»ΠΈΠΊΠΎΠΌ Ρ ΠΏΠ»Π°Π²Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ + +ΠΡΠΈ ΡΠ°ΡΠΊΡΡΡΠΈΠΈ Π°ΠΊΡΠΈΠ²Π½Π°Ρ ΠΊΠ°ΡΡΠΎΡΠΊΠ° ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅ΡΡΡ, ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°ΡΡΡΡ + +ΠΠ° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ ΠΏΡΠ΅Π²ΡΠ°ΡΠ°Π΅ΡΡΡ Π² ΡΠ²Π°ΠΉΠΏ-ΡΠ»Π°ΠΉΠ΄Π΅Ρ Ρ ΡΠΎΡΠΊΠ°ΠΌΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ + +πΉ Π‘Π²Π°ΠΉΠΏ-ΡΠ»Π°ΠΉΠ΄Π΅Ρ (mobile) + +Π Π°Π±ΠΎΡΠ°Π΅Ρ ΠΏΡΠΈ ΡΠΈΡΠΈΠ½Π΅ ΡΠΊΡΠ°Π½Π° Π΄ΠΎ 600px + +ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΏΠ΅ΡΠ΅Π»ΠΈΡΡΡΠ²Π°Π½ΠΈΠ΅ ΠΆΠ΅ΡΡΠ°ΠΌΠΈ + +ΠΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡΡ-ΡΡΠ΅ΡΡ (dots) ΡΠΎΠ·Π΄Π°ΡΡΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ + +Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ ΡΠ΅ΡΠ΅Π· Π½Π°ΡΠΈΠ²Π½ΡΠ΅ JS-ΡΠΎΠ±ΡΡΠΈΡ touchstart, touchmove, touchend + +πΉ ΠΡΠΎΡΠΎΠΉ ΡΠ»Π°ΠΉΠ΄Π΅Ρ (ΡΠ°Π·Π΄Π΅Π» ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²) + +ΠΠ²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΎΡΠ΅ΠΊ + +Π Π΅Π°ΠΊΡΠΈΡ Π½Π° ΠΊΠ»ΠΈΠΊΠΈ ΠΈ ΡΠ²Π°ΠΉΠΏΡ + +Π’ΠΎΡΠΊΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ + +ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΠ»Π°Π²Π½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ΅ΡΠ΅Π· transform: translateX() + +π‘ Π’Π΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΈ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Ρ +Π’Π΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡ ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ +HTML5 Π‘Π΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠ°Ρ ΠΈ ΠΌΠΎΠ΄ΡΠ»ΡΠ½Π°Ρ ΡΡΡΡΠΊΡΡΡΠ° +CSS3 / Flexbox / Grid ΠΠΈΠ±ΠΊΠ°Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ ΡΠ΅ΡΠΊΠ° +JavaScript (Vanilla) ΠΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΡ, Π»ΠΎΠ³ΠΈΠΊΠ° ΠΌΠ΅Π½Ρ ΠΈ ΡΠ»Π°ΠΉΠ΄Π΅ΡΠΎΠ² +Media Queries ΠΠ΄Π°ΠΏΡΠΈΠ² ΠΏΠΎΠ΄ ΡΠ°Π·Π½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° +Google Fonts (Roboto) ΠΠ΄ΠΈΠ½Π°Ρ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠ° Π²ΠΎ Π²ΡΡΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅ +SVG ΠΠΊΠΎΠ½ΠΊΠΈ Π±Π΅Π· ΠΏΠΎΡΠ΅ΡΠΈ ΠΊΠ°ΡΠ΅ΡΡΠ²Π° + +π§© ΠΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ + +ΠΠ»Π°Π²Π½ΡΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈ ΠΊΠ»ΠΈΠΊΠ°Ρ + +ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ transform, opacity, transition Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² + +ΠΠΎΠ»Π½Π°Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΡ: ΠΎΡ Π΄Π΅ΡΠΊΡΠΎΠΏΠ° Π΄ΠΎ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΠΊΡΠ°Π½ΠΎΠ² + +ΠΡΠ΅ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π±Π΅Π· ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ + +ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π²Π½Π΅ΡΠ½ΠΈΡ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠ΅ΠΉ β ΡΠΈΡΡΡΠΉ ΠΊΠΎΠ΄ ΠΈ Π²ΡΡΠΎΠΊΠ°Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ + +Π€Π°ΠΉΠ»ΠΎΠ²Π°Ρ ΡΡΡΡΠΊΡΡΡΠ° ΡΠΏΡΠΎΡΠ°Π΅Ρ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ + +π ΠΠ°ΠΊ Π·Π°ΠΏΡΡΡΠΈΡΡ ΠΏΡΠΎΠ΅ΠΊΡ + +πΈ ΠΠ°ΡΠΈΠ°Π½Ρ 1: ΠΡΠΊΡΡΡΡ Π½Π°ΠΏΡΡΠΌΡΡ + +Π‘ΠΊΠ°ΡΠ°ΠΉ ΠΈΠ»ΠΈ ΠΊΠ»ΠΎΠ½ΠΈΡΡΠΉ ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΉ + +ΠΡΠΊΡΠΎΠΉ index.html Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ + +πΈ ΠΠ°ΡΠΈΠ°Π½Ρ 2: Π§Π΅ΡΠ΅Π· Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅ΡΠ²Π΅Ρ + +Π§ΡΠΎΠ±Ρ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΠΈΡΡ ΠΏΡΡΠΈ ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ: + +# Π΅ΡΠ»ΠΈ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ Node.js +npx http-server . -p 8080 + +# ΠΈΠ»ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Live Server Π² VS Code +# ΠΠΠ β "Open with Live Server" + + +ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ ΡΠ°ΠΉΡ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΡΠΏΠ΅Π½ ΠΏΠΎ Π°Π΄ΡΠ΅ΡΡ: +π http://localhost:8080 + +π± ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΡ +Π£ΡΡΡΠΎΠΉΡΡΠ²ΠΎ ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° +π₯οΈ ΠΠ΅ΡΠΊΡΠΎΠΏ ΠΠΎΠ»Π½ΠΎΡΠ΅Π½Π½Π°Ρ Π²Π΅ΡΡΠΈΡ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ +π» ΠΠ»Π°Π½ΡΠ΅Ρ ΠΠ΅ΡΠ΅ΡΡΡΠΎΠ΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ², ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ +π± Π‘ΠΌΠ°ΡΡΡΠΎΠ½ Π‘Π²Π°ΠΉΠΏ-ΡΠ»Π°ΠΉΠ΄Π΅ΡΡ, Π±ΡΡΠ³Π΅Ρ, ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΡΡΡΡΠΊΡΡΡΠ° +π§βπ» ΠΠ²ΡΠΎΡ ΠΏΡΠΎΠ΅ΠΊΡΠ° + +ΠΠ²ΡΠΎΡ: [ΠΠ»ΡΠ½Π° Π’ΡΡΡΡΠ²Π° / plx112] +Email: [plx112@homyk.space] +Git: [[https://git.homyk.space/Alena](https://git.homyk.space/Alena)] +Π ΠΎΠ»Ρ: Frontend-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ +Π¦Π΅Π»Ρ: ΠΡΠ°ΠΊΡΠΈΠΊΠ° Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ Π²ΡΡΡΡΠΊΠΈ, JS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ ΠΈ UX-ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²ΠΎΠ² + +π ΠΠΈΡΠ΅Π½Π·ΠΈΡ + +ΠΡΠΎΡ ΠΏΡΠΎΠ΅ΠΊΡ ΡΡΠ΅Π±Π½ΡΠΉ. \ No newline at end of file diff --git a/html01/html/css.css b/html01/html/css.css deleted file mode 100644 index ee4f337..0000000 --- a/html01/html/css.css +++ /dev/null @@ -1,196 +0,0 @@ -body { - margin: 0 auto; - max-width: 1230px; - } - .row { - width: 100%; - min-width: 1230px; - display: flex; - flex-direction: row-reverse; - } - .accordion { - display: flex; - width: 40%; /* 40% ΡΡΡΠ°Π½ΠΈΡΡ */ - height: 348px; - gap: 10px; /* ΠΎΡΡΡΡΠΏ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ */ - } - .accordion-item { - flex: 1; - border-radius: 30px; /* Π·Π°ΠΊΡΡΠ³Π»Π΅Π½ΠΈΠ΅ ΠΊΡΠ°ΡΠ² */ - overflow: hidden; - cursor: pointer; - display: flex; - justify-content: space-between; - flex-direction: column-reverse; - align-items: center; - } -.accordion-item.active{ - display: flex; - flex: 5; /* ΡΠ°ΡΠΊΡΡΡΠ°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° */ - width: 100%; - height: 100%; - } -.accordion-item.active .accordion_index{ - display: none; - } -.accordion-item.active .accordion_title{ - display: none; - } -.accordion-item.active .img-open { - display: none; - width: 0; - height: 0; -} -.accordion_index { - display: flex; - align-items: center; - justify-content: center; - padding: 15px; - border-radius: 50%; - background-color: #fff; - font-weight: 600; - width: 10px; - height: 10px; - margin-bottom: 10px; -} -.accordion_title { - color: white; - display: flex; - align-items: center; - writing-mode: vertical-lr; - transform: rotate(-180deg); -} -/* not-actine */ - -#item1 { - background-color: #0C47A0; -} -#item2 { - background-color: #A5C6F6; -} -#item3 { - background-color: #0C47A0; -} -#item4 { - background-color: #A5C6F6; -} -#item5 { - background-color: #0C47A0; -} - -/* active */ - -#item1.active { - background: url("/main/001.png") 100% 100% / cover; -} -#item2.active { - background: url("/main/002.png") 100% 100% / cover; -} -#item3.active { - background: url("/main/003.png") 100% 100% / cover; -} -#item4.active { - background: url("/main/004.png") 100% 100% / cover; -} -#item5.active { - background: url("/main/005.png") 100% 100% / cover; -} -.img-open { - display: block; - object-fit: cover; - width: 100%; - height: 100%; -} -.img-open { - display: none; -} -.accordion-item.active .blue-square { - display: block; - height: 100%; - width: 82%; - margin: 20px; - background-color: rgba(2, 76, 187, 0.259); - border-radius: 33px; -} -/* not-active */ -.item_wrapper_index { - display: none; -} -.item_wrapper { - display: none; -} -/* active */ -.accordion-item.active .item_wrapper { - display: flex; - flex-direction: column; - padding: 15px; - height: 92%; -} -.accordion-item.active .wrapper_row_first { - display: flex; - justify-content: space-between; - width: 100%; - margin-bottom: 15px; - height: 30%; -} -.accordion-item.active .item_wrapper_index { - display: flex; - align-items: center; - justify-content: center; - font-weight: 700; - padding: 10px; - border-radius: 50%; - background-color: #fff; - width: 20px; - height: 20px; - font-size: 18px; -} -.item_wrapper_icon { - background-color: #fff; - border-radius: 50%; -} -.item_wrapper_icon svg { - display: block; - width: 42px; - height: 42px; - padding: 18px; -} -.wrapper_row_middle { - display: flex; - flex-direction: column; - justify-content: space-between; - height: 100%; -} -.row_middle_title { - color: #fff; - font-weight: 500; - font-size: 24px; - text-transform: uppercase; -} -.row_middle_text { - font-size: 16px; - color: #fff; - margin-bottom: 15px; -} -.wrapper_row_botton { - height: 20%; -} -.wrapper_row_botton { - display: flex; - justify-content: end; -} -.wrapper_row_btn { - display: flex; - align-items: center; - gap: 5px; - padding: 8px; - border-radius: 16px; - border: none; - font-size: 14px; - cursor: pointer; -} -.wrapper_row_btn svg { - display: block; - width: 14px; - height: 16px; -} \ No newline at end of file diff --git a/html01/html/index.html b/html01/html/index.html deleted file mode 100644 index 95d0e2c..0000000 --- a/html01/html/index.html +++ /dev/null @@ -1,153 +0,0 @@ - - -
- - -