From 83b4e35af7eeaeeb2e72533cc6426f21c4037027 Mon Sep 17 00:00:00 2001 From: Maryna Date: Sun, 22 Oct 2023 23:54:13 +0300 Subject: [PATCH] fix some css --- css/global.css | 9 +- css/index.about-me.css | 10 +- css/index.cases.css | 14 +- css/index.contacts.css | 82 +++--- css/index.footer.css | 84 +++--- css/index.header.css | 251 +++++++++--------- css/index.nav.css | 96 +++---- css/index.services.css | 118 ++++---- html/index.about-me.partial.html | 26 +- html/index.cases.partial.html | 37 +-- html/index.contacts.partial.html | 35 +-- ....footer.html => index.footer.partial.html} | 10 +- html/index.header.html | 18 -- html/index.header.partial.html | 18 ++ ...{index.nav.html => index.nav.partial.html} | 22 +- html/index.services.partial.html | 77 ++---- index.html | 8 +- js/cases.js | 16 +- js/nav.js | 28 +- js/services.js | 96 +++---- 20 files changed, 484 insertions(+), 571 deletions(-) rename html/{index.footer.html => index.footer.partial.html} (70%) delete mode 100644 html/index.header.html create mode 100644 html/index.header.partial.html rename html/{index.nav.html => index.nav.partial.html} (78%) diff --git a/css/global.css b/css/global.css index c16a55f..eba4ad1 100644 --- a/css/global.css +++ b/css/global.css @@ -1,8 +1,8 @@ @import url('https://fonts.googleapis.com/css2?family=Jura:wght@600&family=Sofia+Sans:wght@200&family=Vollkorn+SC&display=swap'); /* - font-family: 'Jura', sans-serif; - font-family: 'Sofia Sans', sans-serif; - font-family: 'Vollkorn SC', serif; +font-family: 'Jura', sans-serif; +font-family: 'Sofia Sans', sans-serif; +font-family: 'Vollkorn SC', serif; */ * { @@ -33,8 +33,9 @@ img { } .container { + width: 100%; max-width: 1200px; - margin:auto; + margin: auto; padding: 30px; } diff --git a/css/index.about-me.css b/css/index.about-me.css index 830f4cc..b28ec1d 100644 --- a/css/index.about-me.css +++ b/css/index.about-me.css @@ -1,4 +1,4 @@ -#about-me h2{ +#about-me h2 { margin: 20px auto; } @@ -14,19 +14,17 @@ } .about-me-text { - padding: 30px; } @media (min-width: 774px) { - .about-me-content { display: flex; flex-direction: row; justify-content: space-between; } - .about-me-photo{ + .about-me-photo { flex: 1; } .about-me-text { @@ -35,10 +33,10 @@ } @media (min-width: 991px) { - .about-me-photo{ + .about-me-photo { flex: 1; } .about-me-text { flex: 2; } -} \ No newline at end of file +} diff --git a/css/index.cases.css b/css/index.cases.css index 54ae27b..7f2740d 100644 --- a/css/index.cases.css +++ b/css/index.cases.css @@ -2,7 +2,7 @@ padding: 18px; } -.cases-content{ +.cases-content { display: grid; grid-template-columns: auto auto; gap: 10px; @@ -11,8 +11,7 @@ } .cases-item-big { - /*grid-column: 1 / 3;*/ - grid-row: 1 / span 2; + grid-column: 1 / span 2; } .cases-item .cases-paragraph-hidden { @@ -21,11 +20,4 @@ .cases-item-big .cases-paragraph-hidden { display: block; -} - -/*@media (min-width: 774px) { - .cases-item-big { - grid-column: 1 / 1; - grid-row: 1 / span 2; - } -}*/ \ No newline at end of file +} diff --git a/css/index.contacts.css b/css/index.contacts.css index 0ffce94..ec6d7e3 100644 --- a/css/index.contacts.css +++ b/css/index.contacts.css @@ -1,61 +1,63 @@ - .contacts-form, .contacts-text { - margin: 24px; - text-align: left; + margin: 24px; + text-align: left; } .contacts-text p, .contacts-text h2, .contacts-text h3 { - margin-bottom: 18px; + margin-bottom: 18px; } -.contacts-form input[type=text], +.contacts-form input[type=text], .contacts-form input[type=tel], .contacts-form input[type=email], .contacts-form textarea { - width: 100%; - padding: 12px; - resize: vertical; - margin-bottom: 24px; - border: none; - border-bottom: 2px solid var(--text-color); - background-color: inherit; + width: 100%; + padding: 12px; + resize: vertical; + margin-bottom: 24px; + border: none; + border-bottom: 2px solid var(--text-color); + background-color: inherit; } -.contacts-form input[type=text]:focus, -.contacts-form input[type=tel]:focus, -.contacts-form input[type=email]:focus, -.contacts-form textarea:focus { - border: none; - border-bottom: 2px solid var(--color-warm); - background-color: inherit; - color: var(--text-color); +.contacts-form input[type=text]:valid, +.contacts-form input[type=tel]:valid, +.contacts-form input[type=email]:valid, +.contacts-form textarea:valid { + border: none; + border-bottom: 2px solid var(--color-warm); + background-color: inherit; + color: var(--text-color); } .contacts-form input[type=submit] { - background-color: inherit; - font-family: var(--font-sofia); - position: relative; - border: 2px solid var(--text-color); - color: var(--text-color); - padding: 0.75rem; + background-color: inherit; + font-family: var(--font-sofia); + position: relative; + border: 2px solid var(--text-color); + color: var(--text-color); + padding: 0.75rem; } +.contacts-form input[type=submit]:hover { + border: 2px solid var(--color-warm); + color: var(--color-warm); +} @media (min-width: 774px) { - - #contacts { - display: flex; - flex-direction: row; - justify-content: space-between; - } - - .contacts-form{ - flex: 1; - } - .contacts-text { - flex: 1; - } -} \ No newline at end of file + #contacts { + display: flex; + flex-direction: row; + justify-content: space-between; + } + + .contacts-form { + flex: 1; + } + .contacts-text { + flex: 1; + } +} diff --git a/css/index.footer.css b/css/index.footer.css index ae4f207..72d218f 100644 --- a/css/index.footer.css +++ b/css/index.footer.css @@ -3,67 +3,63 @@ .footer-menu-left, .footer-menu-right, .social_media { - display: flex; - flex-direction: column; - justify-content: center; -} - -.social_media { - flex-direction: row; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } -.footer_text, .social_media { - align-items: center; + flex-direction: row; } .footer_menu { - display: flex; - flex-direction: column; - max-width: 100%; - margin: 30px auto; + display: flex; + flex-direction: column; + max-width: 100%; + margin: 30px auto; } .footer_menu a { - font-size: 22px; - color: var(--text-color); - padding: 15px; - margin: auto; + font-size: 22px; + color: var(--text-color); + padding: 15px; + margin: auto; } .footer_menu a:hover { - color: var(--color-warm); - border-bottom: 2px solid var(--color-warm); + color: var(--color-warm); + border-bottom: 2px solid var(--color-warm); } @media (min-width: 774px) { + #footer, + .footer_menu { + display: flex; + flex-direction: row; + justify-content: space-between; + } - #footer, - .footer_menu { - display: flex; - flex-direction: row; - justify-content: space-between; - } + .footer_menu { + justify-content: center; + align-items: center; + } - .footer_menu{ - justify-content: center; - align-items: center; - } + .footer_text { + height: 300px; + align-items: flex-start; + flex: 1; + } - .footer_text { - height: 300px; - align-items: flex-start; - flex:1 - } + .footer_text h2 { + text-align: left; + } - .footer_text h2 { - text-align: left; - } + .footer_menu { + flex: 3; + } - .footer_menu { - flex: 3; - } - .social_media { - flex: 1; - } -} \ No newline at end of file + .social_media { + flex: 1; + } +} diff --git a/css/index.header.css b/css/index.header.css index 0cac214..0b42bea 100644 --- a/css/index.header.css +++ b/css/index.header.css @@ -27,22 +27,6 @@ letter-spacing: normal; } -/*.button_background { - position: relative; - transition-timing-function: cubic-bezier(0, 0, 0.2, 1); - transition-duration: 0.3s; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; - width: 226px; - height: 100%; - inset: 0px; - transform: translate( 0, 0) rotate(0) skewX(0) skewY(0) scaleX(0) scaleY(0); - background-color: rgb(252 165 165 / 1); -} - -.button_background:hover { - transform: translate( -0.5rem, -0.5rem) rotate(0) skewX(0) skewY(0) scaleX(0) scaleY(0); -}*/ - .header_content_button { font-family: var(--font-sofia); position: relative; @@ -57,119 +41,122 @@ } @media (min-width: 381px) { - .container-top, - .container-section { - max-width: 431px; - } - div .header_text h1 { - max-width: 431px; - } - } - - @media (min-width: 480px) { - .container-top, - .container-section { - max-width: 719px; - } - div .header_text h1 { - max-width: 530px; - } - } - @media (min-width: 768px) { - .container-top, - .container-section { - max-width: 785px; - } - - section div .header_text { - width: 50%; - } - div .header_text h1 { - font-size: 4.41rem; - line-height: 4.85rem; - margin-top: 0; - max-width: 301px; - } - } - @media (min-width: 846px) { - .container-top, - .container-section { - max-width: 926px; - } - - section div .header_text { - width: 50%; - max-width: 463px; - } - div .header_text h1 { - max-width: 422px; - } - } - - @media (min-width: 991px) { - .container-top, - .container-section { - max-width: 1120px; - margin: auto; - padding: 0 24px; - } - - section div .header_text { - width: 50%; - max-width: 472px; - } - div .header_text h1 { - font-size: 5.3rem; - line-height: 5.82rem; - margin-top: 0; - min-width: 301px; - max-width: 449px; - } - div .header_text p { - font-size: 1.11rem; - } - } - @media (min-width: 1025px) { - .container-top, - .container-section { - max-width: 1120px; - } - - section div .header_text { - width: 50%; - max-width: 560px; - } - div .header_text h1 { - font-size: 5.3rem; - line-height: 5.82rem; - margin-top: 0; - /* min-width: 449px; */ - max-width: 507px; - } - div .header_text p { - font-size: 1.11rem; - } - } - @media (min-width: 1280px) { - .container-top, - .container-section { - min-width: 1120px; - max-width: 60%; - } - .container-section { - padding: 0; - } - - section div .header_text { - width: 50%; - } - div .header_text h1 { - font-size: 5.3rem; - line-height: 5.82rem; - margin-top: 0; - width: 100%; - } - div .header_text p { - font-size: 1.11rem; - } - } \ No newline at end of file + .container-top, + .container-section { + max-width: 431px; + } + div .header_text h1 { + max-width: 431px; + } +} + +@media (min-width: 480px) { + .container-top, + .container-section { + max-width: 719px; + } + div .header_text h1 { + max-width: 530px; + } +} + +@media (min-width: 768px) { + .container-top, + .container-section { + max-width: 785px; + } + + section div .header_text { + width: 50%; + } + div .header_text h1 { + font-size: 4.41rem; + line-height: 4.85rem; + margin-top: 0; + max-width: 301px; + } +} + +@media (min-width: 846px) { + .container-top, + .container-section { + max-width: 926px; + } + + section div .header_text { + width: 50%; + max-width: 463px; + } + div .header_text h1 { + max-width: 422px; + } +} + +@media (min-width: 991px) { + .container-top, + .container-section { + max-width: 1120px; + margin: auto; + padding: 0 24px; + } + + section div .header_text { + width: 50%; + max-width: 472px; + } + div .header_text h1 { + font-size: 5.3rem; + line-height: 5.82rem; + margin-top: 0; + min-width: 301px; + max-width: 449px; + } + div .header_text p { + font-size: 1.11rem; + } +} + +@media (min-width: 1025px) { + .container-top, + .container-section { + max-width: 1120px; + } + + section div .header_text { + width: 50%; + max-width: 560px; + } + div .header_text h1 { + font-size: 5.3rem; + line-height: 5.82rem; + margin-top: 0; + max-width: 507px; + } + div .header_text p { + font-size: 1.11rem; + } +} + +@media (min-width: 1280px) { + .container-top, + .container-section { + min-width: 1120px; + max-width: 60%; + } + .container-section { + padding: 0; + } + + section div .header_text { + width: 50%; + } + div .header_text h1 { + font-size: 5.3rem; + line-height: 5.82rem; + margin-top: 0; + width: 100%; + } + div .header_text p { + font-size: 1.11rem; + } +} diff --git a/css/index.nav.css b/css/index.nav.css index 8d419d7..5966c50 100644 --- a/css/index.nav.css +++ b/css/index.nav.css @@ -6,24 +6,23 @@ height: 100%; background-color: var(--background-color); z-index: 2; - transition: top 0.3s ease-in; - padding: 15px 24px 50px 24px; transition: top 0.3s ease-in 0.1s; + padding: 15px 24px 50px 24px; overflow: hidden; margin: auto; } - + .navigation_wrapper.active { right: 0; } - + .navigation_content { display: flex; flex-direction: column; max-width: 100%; margin: 50px auto; } - + .navigation_content a, .social_media a, .social_media i { @@ -32,12 +31,12 @@ padding: 15px; margin: auto; } - + .navigation_content a:hover { color: var(--color-warm); border-bottom: 2px solid var(--color-warm); } - + nav .navigation_burger { display: block; position: relative; @@ -48,7 +47,7 @@ nav .navigation_burger { margin: 10px auto; z-index: 5; } - + nav .navigation_burger span, nav .navigation_burger::before, nav .navigation_burger::after { @@ -59,87 +58,90 @@ nav .navigation_burger::after { background-color: var(--text-color); transition: all 1.5s ease-in-out; } + nav .navigation_burger span { transform: scale(1); } + nav .navigation_burger::before, nav .navigation_burger::after { content: ""; } - + nav .navigation_burger::before { top: 0; } + nav .navigation_burger::after { bottom: 0; } - + nav .navigation_burger.active span { transform: scale(0); } + nav .navigation_burger.active::before { top: 50%; transform: rotate(-225deg); } + nav .navigation_burger.active::after { bottom: 40%; transform: rotate(225deg); } - + .lock { overflow: hidden; } - - + @media (min-width: 991px) { - #desktop_navbar { - display: flex; - flex-direction: row; - justify-content: space-between; - /*padding-top: 40px;*/ + display: flex; + flex-direction: row; + justify-content: space-between; } - + nav .navigation_burger { - display: none; + display: none; } .navigation_content, .social_media { - display: flex; + display: flex; } - + .navigation_wrapper { - position: relative; - left: 0; - display: flex; - justify-content: space-between; - align-items: center; - width: 75%; - height: auto; - padding: 0; + position: relative; + left: 0; + display: flex; + justify-content: space-between; + align-items: center; + width: 75%; + height: auto; + padding: 0; } - + .navigation_content { - min-width: 480px; - flex-direction: row; - justify-content: space-around; - height: auto; - margin: 0; + min-width: 480px; + flex-direction: row; + justify-content: space-around; + height: auto; + margin: 0; } - .navigation_content a + + .navigation_content a, .social_media a, .social_media i { - position: relative; - font-size: 0.91rem; - /*font-weight: 700;*/ - text-decoration: none; - line-height: 1.5rem; + position: relative; + font-size: 0.91rem; + text-decoration: none; + line-height: 1.5rem; } - + .social_media { - min-width: 150px; - display: flex; - justify-content: space-around; + min-width: 150px; + display: flex; + justify-content: space-around; } -} \ No newline at end of file +} + \ No newline at end of file diff --git a/css/index.services.css b/css/index.services.css index 27f29dc..c449dd5 100644 --- a/css/index.services.css +++ b/css/index.services.css @@ -1,53 +1,67 @@ +#services h2 { + padding: 20px; +} + .services-carousel-container { - overflow: hidden; - position: relative; - display: flex; - flex-direction: row; - justify-content: space-between; - } - - .services-carousel { - flex: 8; - list-style: none; - display: flex; - transition: transform 0.3s ease-in-out; - padding: 0; - margin: 0; - } - - .services-carousel-item { - flex: 0 0 calc(100% - 10px); - margin-right: 10px; - text-align: center; - /*display: flex; - justify-content: center; - align-items: center;*/ - } - - /*.services-carousel-item div { - text-align: center; - width: 80%; - display: block; - border: 2px solid var(--text-color); - }*/ - - .services-carousel-nav { - margin-top: 10px; - text-align: center; - } - - .prev-button, - .next-button { - padding: 5px 10px; - background-color: inherit; - color:var(--text-color); - border: none; - cursor: pointer; - flex: 1; - } - - .prev-button:hover, - .next-button:hover { - background-color: #555; - } - \ No newline at end of file + width: 100%; + height: auto; + overflow: hidden; + position: relative; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.services-carousel { + width: 90%; + list-style: none; + display: flex; + transition: transform 0.3s ease-in-out; + padding: 0; + margin: 0; + z-index: 2; +} + +.services-carousel-item { + flex: 0 0 100%; + min-width: 200px; + text-align: center; + position: relative; + display: flex; + flex-direction: column; + align-items: center; +} + +.services-carousel-item h3, +.services-carousel-item p { + padding: 5px 20px; +} + +.services-carousel-item a { + /*position: absolute;*/ + border: 2px solid var(--text-color); + color: var(--text-color); + padding: 0.75rem; + /*bottom: 20px;*/ + margin: 10px auto; +} + +.services-carousel-item a:hover { + border: 2px solid var(--color-warm); + color: var(--color-warm); +} + +.prev-button, +.next-button { + width: 5%; + background-color: inherit; + color: var(--text-color); + border: none; + cursor: pointer; + z-index: 3; +} + +.prev-button:hover, +.next-button:hover { + color: var(--color-warm); +} diff --git a/html/index.about-me.partial.html b/html/index.about-me.partial.html index 588db05..d8a9077 100644 --- a/html/index.about-me.partial.html +++ b/html/index.about-me.partial.html @@ -7,29 +7,29 @@

About me

Admitted:

-

New York State Bar (1996) - US District Court, Southern District of NY (1998) +

New York State Bar (1996)
+ US District Court, Southern District of NY (1998)
US District Court, Eastern District of NY (1999)

Licence:

The first and potentially most important decision regarding your case is choosing your attorney. - My vast experience helps to choose a win-win strategy and solve the case with the maximum benefit for you. - I represent my clients in legal proceedings in New York in family, administrative and property cases.

+ My vast experience helps me choose a winning strategy and solve the case with the maximum benefit for you. + I represent my clients in legal proceedings in New York in family, administrative, and property cases.

-

When hiring a lawyer, each client expects help in inducing a court decision in his favor. - This is the measure of the professionalism of a lawyer. For all my 20 years of law practice, - I had only 5 lost cases. Even in the most hopeless cases, - I try to help my client and honestly explain the chances that he has. - In addition, according to my standard contract, - I am ready to return my legal fee if I do not achieve the goal set.

+

When hiring a lawyer, each client expects help in inducing a court decision in their favor. + This is the measure of the professionalism of a lawyer. In my 20 years of law practice, + I have had only 5 lost cases. Even in the most hopeless cases, + I try to help my clients and honestly explain the chances they have. + According to my standard contract, + I am ready to return my legal fee if I do not achieve the set goal.

-
+ + diff --git a/html/index.cases.partial.html b/html/index.cases.partial.html index f7107a2..8e9689b 100644 --- a/html/index.cases.partial.html +++ b/html/index.cases.partial.html @@ -1,28 +1,17 @@

Best Cases

-
-

In favor of the plaintiff, $ 13,500 was recovered from the respondent - surgeon for improperly performing cosmetic surgery for correcting the shape of the plaintiff’s nose.

-

The plaintiff claimed that she, as a patient, had entered into a contract with the surgeon, - and he agreed to perform plastic surgery of her nose in order to increase her aesthetic appeal. - The appearance of the plaintiff didn't improve, actually, - her face was disfigured. I helped the woman to receive her pain and suffering money.

-
-
-

On 04.03.2017, the Family Court of the State of New York satisfied the claims of attorney William Rhoades. - in the interests of the Client about deprivation of parental rights.

-

The court recognized that the father must be deprived of parental rights, - as he does not fulfill his obligations to the child in accordance with the norms of the Family Law. - It was a difficult case, but I have proven that the presence of the father negatively affects the child, - causes aggression in him immediately and destroys the psyche.

-
-
-

In June 2019, the inheritance division case was considered at the Surrogate’s Court of the State of New York. - The plaintiff insisted that his father died without leaving a will, and the plaintiff is the primary heir.

-

I helped the plaintiff to prove to the court that he is the successor, and can count on 80% of the - entire inheritance, which included significant amounts in accounts in banks of America, - as well as 3 mansions in Hampton, a yacht fleet and 500 square meters of commercial real estate in NY.

-
+
+

In favor of the plaintiff, $13,500 was recovered from the respondent surgeon for improperly performing cosmetic surgery for correcting the shape of the plaintiff’s nose.

+

The plaintiff claimed that she, as a patient, had entered into a contract with the surgeon, and he agreed to perform plastic surgery on her nose to increase her aesthetic appeal. The plaintiff's appearance didn't improve; in fact, her face was disfigured. I helped the woman receive compensation for her pain and suffering.

+
+
+

On 04.03.2017, the Family Court of the State of New York satisfied the claims of attorney William Rhoades in the interests of the client about the deprivation of parental rights.

+

The court recognized that the father must be deprived of parental rights as he does not fulfill his obligations to the child in accordance with the norms of family law. It was a challenging case, but I proved that the presence of the father negatively affects the child, causing immediate aggression and psychological harm.

+
+
+

In June 2019, the inheritance division case was considered at the Surrogate’s Court of the State of New York. The plaintiff insisted that his father died without leaving a will, and the plaintiff is the primary heir.

+

I helped the plaintiff prove to the court that he is the rightful successor and is entitled to 80% of the entire inheritance, which included significant amounts in American bank accounts, as well as three mansions in the Hamptons, a fleet of yachts, and 500 square meters of commercial real estate in New York.

+
-
\ No newline at end of file + diff --git a/html/index.contacts.partial.html b/html/index.contacts.partial.html index ee8a673..cf482a2 100644 --- a/html/index.contacts.partial.html +++ b/html/index.contacts.partial.html @@ -4,44 +4,33 @@

Contacts

At the very moment when you are faced with the need to go to court or solve the problem in a pretrial order, call me or visit my office. You should not delay this decision - - the sooner you tell me about the case, the more likely I can help you.

+ - the sooner you tell me about the case, the more likely I can help you.

-
-

Address

-
-
-

241 East 86th St, New York, NY 10028, USA

-
+

Address

+

241 East 86th St, New York, NY 10028, USA

-
-

Hours

-
-
-

Monday - Saturday: 11 AM - 9 PM - Sunday: 11 AM - 7 PM

-
+

Hours

+

Monday - Saturday: 11 AM - 9 PM + Sunday: 11 AM - 7 PM

-
-

Contacts

-
-
-

+1 (234) 567 89 00 - lawyer@email.com

-
+

Contacts

+

+1 (234) 567 89 00 + lawyer@email.com

+

Get consultation:

-

+







- \ No newline at end of file + diff --git a/html/index.footer.html b/html/index.footer.partial.html similarity index 70% rename from html/index.footer.html rename to html/index.footer.partial.html index 452e3a9..ae7823b 100644 --- a/html/index.footer.html +++ b/html/index.footer.partial.html @@ -15,13 +15,13 @@

Tetiana's Kolomiiets

- + - - + + - +
- \ No newline at end of file + diff --git a/html/index.header.html b/html/index.header.html deleted file mode 100644 index 51d8eee..0000000 --- a/html/index.header.html +++ /dev/null @@ -1,18 +0,0 @@ - \ No newline at end of file diff --git a/html/index.header.partial.html b/html/index.header.partial.html new file mode 100644 index 0000000..db9f69a --- /dev/null +++ b/html/index.header.partial.html @@ -0,0 +1,18 @@ + diff --git a/html/index.nav.html b/html/index.nav.partial.html similarity index 78% rename from html/index.nav.html rename to html/index.nav.partial.html index ccf20e9..09193af 100644 --- a/html/index.nav.html +++ b/html/index.nav.partial.html @@ -6,24 +6,24 @@ Cases Contacts - - - + Logo + + --> +
- + - - + + - +
- \ No newline at end of file + diff --git a/html/index.services.partial.html b/html/index.services.partial.html index 18e2d4b..448c018 100644 --- a/html/index.services.partial.html +++ b/html/index.services.partial.html @@ -1,89 +1,62 @@
-

Services

- - - + - + - - - - -
\ No newline at end of file + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 254c9b6..2805aa3 100644 --- a/index.html +++ b/index.html @@ -8,18 +8,20 @@ + - -
+ +
- + + diff --git a/js/cases.js b/js/cases.js index 6c2cfa1..8a17b58 100644 --- a/js/cases.js +++ b/js/cases.js @@ -1,12 +1,12 @@ -const casesItem = document.querySelectorAll('.cases-item'); +const casesItem = document.querySelectorAll(".cases-item"); let previousCaseItem = null; casesItem.forEach((caseItem) => { - caseItem.addEventListener('mouseover', (_) => { - if (previousCaseItem !== null) { - previousCaseItem.classList.remove('cases-item-big'); - } - caseItem.classList.add('cases-item-big'); - previousCaseItem = caseItem; - }); + caseItem.addEventListener("mouseover", (_) => { + if (previousCaseItem !== null) { + previousCaseItem.classList.remove("cases-item-big"); + } + caseItem.classList.add("cases-item-big"); + previousCaseItem = caseItem; + }); }); diff --git a/js/nav.js b/js/nav.js index 614268a..3089903 100644 --- a/js/nav.js +++ b/js/nav.js @@ -1,18 +1,18 @@ -const iconBurger = document.querySelector('.navigation_burger'); -const navigationsBody = document.querySelector('.navigation_wrapper'); -iconBurger.addEventListener('click', function () { - document.body.classList.toggle('lock'); - iconBurger.classList.toggle('active'); - navigationsBody.classList.toggle('active'); +const iconBurger = document.querySelector(".navigation_burger"); +const navigationsBody = document.querySelector(".navigation_wrapper"); +iconBurger.addEventListener("click", function () { + document.body.classList.toggle("lock"); + iconBurger.classList.toggle("active"); + navigationsBody.classList.toggle("active"); }); -const navLinks = document.querySelectorAll('.navigation_link'); +const navLinks = document.querySelectorAll(".navigation_link"); navLinks.forEach((navLink) => { - navLink.addEventListener('click', (_) => { - if (iconBurger.classList.contains('active')) { - document.body.classList.remove('lock'); - iconBurger.classList.remove('active'); - navigationsBody.classList.remove('active'); - } - }); + navLink.addEventListener("click", (_) => { + if (iconBurger.classList.contains("active")) { + document.body.classList.remove("lock"); + iconBurger.classList.remove("active"); + navigationsBody.classList.remove("active"); + } + }); }); \ No newline at end of file diff --git a/js/services.js b/js/services.js index 1599ced..9985644 100644 --- a/js/services.js +++ b/js/services.js @@ -1,64 +1,32 @@ -/*document.addEventListener('DOMContentLoaded', function() { - const servicesCarousel = document.querySelector('.services-carousel'); - const servicesCarouselItems = document.querySelectorAll('.services-carousel-item'); - const prevButton = document.querySelector('.prev-button'); - const nextButton = document.querySelector('.next-button'); - const slideWidth = servicesCarouselItems[0].offsetWidth; - const visibleSlides = 3; - let currentPosition = 0; - - // Функція для перемикання каруселі вправо - function moveToNext() { - currentPosition -= slideWidth * visibleSlides; - if (currentPosition < -(slideWidth * (servicesCarouselItems.length - visibleSlides))) { - currentPosition = 0; - } - updateCarouselPosition(); - } - - // Функція для перемикання каруселі вліво - function moveToPrev() { - currentPosition += slideWidth * visibleSlides; - if (currentPosition > 0) { - currentPosition = -(slideWidth * (servicesCarouselItems.length - visibleSlides)); - } - updateCarouselPosition(); - } - - // Функція для оновлення положення каруселі - function updateCarouselPosition() { - servicesCarousel.style.transform = `translateX(${currentPosition}px)`; - } - - // Додавання обробників подій для кнопок - prevButton.addEventListener('click', moveToPrev); - nextButton.addEventListener('click', moveToNext); -});*/ -const servicesCarousel = document.querySelector('.services-carousel'); - const prevButton = document.querySelector('.prev-button'); - const nextButton = document.querySelector('.next-button'); - const slideWidth = servicesCarousel.querySelector('.services-carousel-item').offsetWidth; - let currentPosition = 0; - - function moveToNext() { - currentPosition += slideWidth; - if (currentPosition > 0) { - currentPosition = -(slideWidth * (servicesCarousel.children.length - 1)); - } - updateCarouselPosition(); - } - - function moveToPrev() { - currentPosition -= slideWidth; - if (currentPosition < -(slideWidth * (servicesCarousel.children.length - 1))) { - currentPosition = 0; - } - updateCarouselPosition(); - } - - function updateCarouselPosition() { - servicesCarousel.style.transform = `translateX(${currentPosition}px)`; - } - - prevButton.addEventListener('click', moveToPrev); - nextButton.addEventListener('click', moveToNext); \ No newline at end of file +const servicesCarousel = document.querySelector(".services-carousel"); +const prevButton = document.querySelector(".prev-button"); +const nextButton = document.querySelector(".next-button"); +const slideWidth = servicesCarousel.querySelector( + ".services-carousel-item", +).offsetWidth; +let currentPosition = 0; + +function moveToNext() { + currentPosition += slideWidth; + if (currentPosition > 0) { + currentPosition = -(slideWidth * (servicesCarousel.children.length - 1)); + } + updateCarouselPosition(); +} + +function moveToPrev() { + currentPosition -= slideWidth; + if ( + currentPosition < -(slideWidth * (servicesCarousel.children.length - 1)) + ) { + currentPosition = 0; + } + updateCarouselPosition(); +} + +function updateCarouselPosition() { + servicesCarousel.style.transform = `translateX(${currentPosition}px)`; +} + +prevButton.addEventListener("click", moveToPrev); +nextButton.addEventListener("click", moveToNext); \ No newline at end of file