diff --git a/README.md b/README.md index a7ac464..8deacb4 100644 --- a/README.md +++ b/README.md @@ -1 +1,2 @@ -# rsschool-cv \ No newline at end of file +# rsschool-cv +https://Sollar2022.github.io/rsschool-cv/ diff --git a/assets/favicon.ico b/assets/favicon.ico new file mode 100644 index 0000000..69f9208 Binary files /dev/null and b/assets/favicon.ico differ diff --git a/assets/img/contact_woman.png b/assets/img/contact_woman.png new file mode 100644 index 0000000..f207af4 Binary files /dev/null and b/assets/img/contact_woman.png differ diff --git a/assets/img/fb.svg b/assets/img/fb.svg new file mode 100644 index 0000000..a21868f --- /dev/null +++ b/assets/img/fb.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/garden_care.png b/assets/img/garden_care.png new file mode 100644 index 0000000..fe95977 Binary files /dev/null and b/assets/img/garden_care.png differ diff --git a/assets/img/garden_care_two.png b/assets/img/garden_care_two.png new file mode 100644 index 0000000..1b388da Binary files /dev/null and b/assets/img/garden_care_two.png differ diff --git a/assets/img/houseplant_one.jpg b/assets/img/houseplant_one.jpg new file mode 100644 index 0000000..36ed09c Binary files /dev/null and b/assets/img/houseplant_one.jpg differ diff --git a/assets/img/inst.svg b/assets/img/inst.svg new file mode 100644 index 0000000..887f5e3 --- /dev/null +++ b/assets/img/inst.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/lawn_care.png b/assets/img/lawn_care.png new file mode 100644 index 0000000..bb20af0 Binary files /dev/null and b/assets/img/lawn_care.png differ diff --git a/assets/img/leafs.png b/assets/img/leafs.png new file mode 100644 index 0000000..284dd0e Binary files /dev/null and b/assets/img/leafs.png differ diff --git a/assets/img/leafs_two.jpg b/assets/img/leafs_two.jpg new file mode 100644 index 0000000..247587f Binary files /dev/null and b/assets/img/leafs_two.jpg differ diff --git a/assets/img/logo.png b/assets/img/logo.png new file mode 100644 index 0000000..33314d0 Binary files /dev/null and b/assets/img/logo.png differ diff --git a/assets/img/logo_vector.svg b/assets/img/logo_vector.svg new file mode 100644 index 0000000..29718f8 --- /dev/null +++ b/assets/img/logo_vector.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/img/photo.jpg b/assets/img/photo.jpg new file mode 100644 index 0000000..dcc3d4b Binary files /dev/null and b/assets/img/photo.jpg differ diff --git a/assets/img/pinterest.svg b/assets/img/pinterest.svg new file mode 100644 index 0000000..b4703f4 --- /dev/null +++ b/assets/img/pinterest.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/planting_one.png b/assets/img/planting_one.png new file mode 100644 index 0000000..3a60598 Binary files /dev/null and b/assets/img/planting_one.png differ diff --git a/assets/img/planting_three.png b/assets/img/planting_three.png new file mode 100644 index 0000000..2e4cedc Binary files /dev/null and b/assets/img/planting_three.png differ diff --git a/assets/img/planting_two.png b/assets/img/planting_two.png new file mode 100644 index 0000000..f39b16e Binary files /dev/null and b/assets/img/planting_two.png differ diff --git a/assets/img/tw.svg b/assets/img/tw.svg new file mode 100644 index 0000000..eee1bab --- /dev/null +++ b/assets/img/tw.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/svg/1.svg b/assets/svg/1.svg new file mode 100644 index 0000000..17f4aec --- /dev/null +++ b/assets/svg/1.svg @@ -0,0 +1,5 @@ + + +1 + + \ No newline at end of file diff --git a/assets/svg/2.svg b/assets/svg/2.svg new file mode 100644 index 0000000..5a3bce4 --- /dev/null +++ b/assets/svg/2.svg @@ -0,0 +1,5 @@ + + +2 + + \ No newline at end of file diff --git a/assets/svg/3.svg b/assets/svg/3.svg new file mode 100644 index 0000000..2ad3a06 --- /dev/null +++ b/assets/svg/3.svg @@ -0,0 +1,5 @@ + + +3 + + \ No newline at end of file diff --git a/assets/svg/4.svg b/assets/svg/4.svg new file mode 100644 index 0000000..ca002f8 --- /dev/null +++ b/assets/svg/4.svg @@ -0,0 +1,5 @@ + + +4 + + \ No newline at end of file diff --git a/assets/svg/5.svg b/assets/svg/5.svg new file mode 100644 index 0000000..79bc0d4 --- /dev/null +++ b/assets/svg/5.svg @@ -0,0 +1,5 @@ + + +5 + + \ No newline at end of file diff --git a/assets/svg/6.svg b/assets/svg/6.svg new file mode 100644 index 0000000..ff880fe --- /dev/null +++ b/assets/svg/6.svg @@ -0,0 +1,5 @@ + + +66 + + \ No newline at end of file diff --git a/assets/svg/accordion_btn.svg b/assets/svg/accordion_btn.svg new file mode 100644 index 0000000..124d904 --- /dev/null +++ b/assets/svg/accordion_btn.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/svg/accordion_btn_active.svg b/assets/svg/accordion_btn_active.svg new file mode 100644 index 0000000..adee47f --- /dev/null +++ b/assets/svg/accordion_btn_active.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/svg/accordion_btn_one.svg b/assets/svg/accordion_btn_one.svg new file mode 100644 index 0000000..180dcb2 --- /dev/null +++ b/assets/svg/accordion_btn_one.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/svg/leafs.svg b/assets/svg/leafs.svg new file mode 100644 index 0000000..e85c410 --- /dev/null +++ b/assets/svg/leafs.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/planting_two.svg b/assets/svg/planting_two.svg new file mode 100644 index 0000000..c5c0add --- /dev/null +++ b/assets/svg/planting_two.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/svg/rs_school_js.svg b/assets/svg/rs_school_js.svg new file mode 100644 index 0000000..3b80540 --- /dev/null +++ b/assets/svg/rs_school_js.svg @@ -0,0 +1 @@ +rs_school_js \ No newline at end of file diff --git a/assets/svg/rss.svg b/assets/svg/rss.svg new file mode 100644 index 0000000..8484dfc --- /dev/null +++ b/assets/svg/rss.svg @@ -0,0 +1,5 @@ + + +rss + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..e4799ea --- /dev/null +++ b/index.html @@ -0,0 +1,216 @@ + + + + + + Plants + + + + + + + + +
+
+
+ Plants + +
+
+
+
+
+
+
+
+
+ +
+
+
+ leafs +
+

We grow plants and give you oxygen

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

+ +
+
+
+
+
+
+

We are professional experienced gardeners

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

+
+
houseplant
+ +
+
+
+
+
+

Service and our projects

+
    +
    • +
    • +
    • +
+
+
+ +
+
+
+
+
+
+

Prices

+
+
+ + +
+
+

Release of Letraset sheets containing Lorem Ipsum passages, and more recently

+

$15 / per hour

+ Order +
+
+
+
+ + +
+
+

Release of Letraset sheets containing Lorem Ipsum passages, and more recently

+

$25 / per hour

+ Order +
+
+
+
+ + +
+
+

Release of Letraset sheets containing Lorem Ipsum passages, and more recently

+

$35 / per hour

+ Order +
+
+
+
+
+
+

Our best gardeners are ready to help you

+ + leafs +
+
+
+
+
+ contact woman +
+

Contact us

+
+ City +
arrow up
+
+ + + +
+
+
+ +
+ + + + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..39e4056 --- /dev/null +++ b/index.js @@ -0,0 +1,16 @@ +console.log('1. Вёрстка соответствует макету при ширине экрана 768px +24'); +console.log('2. Вёрстка соответствует макету при ширине экрана 380px +24'); +console.log('3. Ни на одном из разрешений до 320px включительно не появляется горизонтальная полоса прокрутки. +15'); +console.log('4. На ширине экрана 380рх и меньше реализовано адаптивное меню +18 '); +console.log('4.1 Не сделано: при клике по ссылке в адаптивном меню адаптивное меню плавно скрывается, также скрытие меню происходит если сделать клик вне данного окна -4 '); +console.log('Общий итог 71 балл'); + + let menuBtn = document.querySelector('.toggle'); +let menu = document.querySelector('.nav-list'); + +menuBtn.addEventListener('click', function(){ + menuBtn.classList.toggle('active'); + menu.classList.toggle('active'); +}) + + diff --git a/plants/assets/favicon.ico b/plants/assets/favicon.ico new file mode 100644 index 0000000..69f9208 Binary files /dev/null and b/plants/assets/favicon.ico differ diff --git a/plants/assets/img/contact_woman.jpg b/plants/assets/img/contact_woman.jpg new file mode 100644 index 0000000..30e4f14 Binary files /dev/null and b/plants/assets/img/contact_woman.jpg differ diff --git a/plants/assets/img/fb.svg b/plants/assets/img/fb.svg new file mode 100644 index 0000000..a21868f --- /dev/null +++ b/plants/assets/img/fb.svg @@ -0,0 +1,3 @@ + + + diff --git a/plants/assets/img/garden_care.jpg b/plants/assets/img/garden_care.jpg new file mode 100644 index 0000000..bafc0ba Binary files /dev/null and b/plants/assets/img/garden_care.jpg differ diff --git a/plants/assets/img/garden_care_two.jpg b/plants/assets/img/garden_care_two.jpg new file mode 100644 index 0000000..6fab638 Binary files /dev/null and b/plants/assets/img/garden_care_two.jpg differ diff --git a/plants/assets/img/houseplant 1.jpg b/plants/assets/img/houseplant 1.jpg new file mode 100644 index 0000000..36ed09c Binary files /dev/null and b/plants/assets/img/houseplant 1.jpg differ diff --git a/plants/assets/img/inst.svg b/plants/assets/img/inst.svg new file mode 100644 index 0000000..887f5e3 --- /dev/null +++ b/plants/assets/img/inst.svg @@ -0,0 +1,3 @@ + + + diff --git a/plants/assets/img/lawn _care.jpg b/plants/assets/img/lawn _care.jpg new file mode 100644 index 0000000..1d1e2a7 Binary files /dev/null and b/plants/assets/img/lawn _care.jpg differ diff --git a/plants/assets/img/leafs.jpg b/plants/assets/img/leafs.jpg new file mode 100644 index 0000000..532e8ab Binary files /dev/null and b/plants/assets/img/leafs.jpg differ diff --git a/plants/assets/img/leafs_two.jpg b/plants/assets/img/leafs_two.jpg new file mode 100644 index 0000000..247587f Binary files /dev/null and b/plants/assets/img/leafs_two.jpg differ diff --git a/plants/assets/img/logo_vector.svg b/plants/assets/img/logo_vector.svg new file mode 100644 index 0000000..29718f8 --- /dev/null +++ b/plants/assets/img/logo_vector.svg @@ -0,0 +1,4 @@ + + + + diff --git a/plants/assets/img/pinterest.svg b/plants/assets/img/pinterest.svg new file mode 100644 index 0000000..b4703f4 --- /dev/null +++ b/plants/assets/img/pinterest.svg @@ -0,0 +1,3 @@ + + + diff --git a/plants/assets/img/planting_one.jpg b/plants/assets/img/planting_one.jpg new file mode 100644 index 0000000..4c64818 Binary files /dev/null and b/plants/assets/img/planting_one.jpg differ diff --git a/plants/assets/img/planting_three.jpg b/plants/assets/img/planting_three.jpg new file mode 100644 index 0000000..e715166 Binary files /dev/null and b/plants/assets/img/planting_three.jpg differ diff --git a/plants/assets/img/planting_two.jpg b/plants/assets/img/planting_two.jpg new file mode 100644 index 0000000..df325b0 Binary files /dev/null and b/plants/assets/img/planting_two.jpg differ diff --git a/plants/assets/img/tw.svg b/plants/assets/img/tw.svg new file mode 100644 index 0000000..eee1bab --- /dev/null +++ b/plants/assets/img/tw.svg @@ -0,0 +1,3 @@ + + + diff --git a/plants/index.html b/plants/index.html new file mode 100644 index 0000000..68f5bdf --- /dev/null +++ b/plants/index.html @@ -0,0 +1,137 @@ + + + + + + Plants + + + + + +
+
+ + + +
+
+
+
+
+ leafs +
+

We grow plants and give you oxygen

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

+ +
+
+
+

We are professional experienced gardeners

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

+ houseplant +
+
+

Service and our projects

+
    +
    • +
    • +
    • +
+
+ +
+
+
+

Prices

+

Our best gardeners are ready to help you

+ + leafs +
+ + + +
+
+
+

Contact us

+ contact woman + + +
+
+
+ + + + + diff --git a/plants/style.css b/plants/style.css new file mode 100644 index 0000000..3b189d8 --- /dev/null +++ b/plants/style.css @@ -0,0 +1,290 @@ +* { + box-sizing: border-box; + } + + html { + scroll-behavior: smooth; + } + + body { + min-height: 100vh; + min-width: 320px; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.link { + text-decoration: none; +} + +.list { + list-style: none; +} + +.container { + max-width: 1440px; + margin: 0 auto; + min-height: 50px; + } +.head-container { + /* display: flex; + + justify-content: space-around; + /* flex-flow: row nowrap; */ + flex-direction: row; + flex-wrap: nowrap; + align-content: stretch; +} + .header { + height: 134px; + background-color: #EDF2EC; + + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; + } + +.nav { + flex-grow: 1; +} + +.nav-list { + display: flex; + flex-flow: row nowrap; + margin: 0; + padding: 0; +} + +.nav-link { + padding: 0 20px; + line-height: 50px; + font-family: 'Inika'; +font-style: normal; +font-weight: 400; +font-size: 16px; +line-height: 50px; +color: ##010201; +transition: .3s; +} + +.nav-link:hover { + color: #E06733; +} + +/*Section Welcome*/ +.welcome { + display: flex; + justify-content: center; + align-items: center; + background-color: #EDF2EC; +} + +h1 { + font-family: 'Inter'; +font-style: normal; +font-weight: 700; +font-size: 45px; +line-height: 50px; +color: #717171; +} + +span { + color: #499A18; +} +.welcome-text { + font-family: 'Inter'; +font-style: normal; +font-weight: 400; +font-size: 20px; +line-height: 35px; +color: #636060; +} +.main-btn { + width: 158px; +height: 44px; + font-family: 'Inter'; +font-style: normal; +font-weight: 400; +font-size: 16px; +line-height: 20px; +text-transform: uppercase; +background-color: #EDF2EC; +border: 2px solid #E06733; +border-radius: 10px; +color: #000000; +} +/*Section About*/ +.about-title { +font-family: 'Inika'; +font-style: normal; +font-weight: 400; +font-size: 40px; +line-height: 52px; +color: #E06733; +} +.about-text { + font-family: 'Inter'; +font-style: normal; +font-weight: 400; +font-size: 20px; +line-height: 30px; +color: #636060; +} +/*Section Service*/ + +.service { +background-color: #EDF2EC; +} +.service-title { +font-family: 'Inika'; +font-style: normal; +font-weight: 400; +font-size: 40px; +line-height: 52px; +color: #499A18; +} + +.service-list { + display: flex; + justify-content: space-between; + align-items: center; +} +.service-btn { + box-sizing: border-box; +width: 161px; +height: 50px; +font-family: 'Inika'; +font-style: normal; +font-weight: 400; +font-size: 20px; +line-height: 26px; +color: #E06733; +background-color: #EDF2EC; +border: 1px solid #E06733; +border-radius: 5px; +} + +/*.card-item { +background: url(pexels-gary-barnes-6231690.jpg); +border-radius: 20px 20px 0px 0px; +}*/ +/*Карточка : border: 1px solid #E3E1D5; +border-radius: 0px 0px 20px 20px;*/ +.service-item { + font-family: 'Inter'; +font-style: normal; +font-weight: 700; +font-size: 20px; +line-height: 20px; +/*text-align: center;*/ +color: #E06733; +} + +.service-text { +font-family: 'Inter'; +font-style: normal; +font-weight: 400; +font-size: 16px; +line-height: 20px; +color: #717171; +} + +/*Section Prices*/ + +.prices-title { +font-family: 'Inter'; +font-style: normal; +font-weight: 700; +font-size: 40px; +line-height: 48px; + +color: #000000; +} +.prices-text { +font-family: 'Inter'; +font-style: normal; +font-weight: 700; +font-size: 40px; +line-height: 50px; +text-align: right; +} +.prices-btn { + font-family: 'Inika'; +font-style: normal; +font-weight: 700; +font-size: 20px; +line-height: 26px; + +text-align: center; + +color: #E06733; +box-sizing: border-box; +width: 162px; +height: 50px; +border: 1px solid #E06733; +border-radius: 5px; +background-color: #FFFFFF; +} + +form { + font-family: 'Inter'; +font-style: normal; +font-weight: 700; +font-size: 20px; +line-height: 20px; +color: #000000; +background-color: #EDF2EC; +} + +.contacts { + background-color: #EDF2EC; +} +.contacts-title { + font-family: 'Inika'; +font-style: normal; +font-weight: 700; +font-size: 40px; +line-height: 52px; + +color: #499A18; +} +.contacts-btn { + font-family: 'Inter'; +font-style: normal; +font-weight: 400; +font-size: 20px; +line-height: 40px; +letter-spacing: 0.05em; +width: 450px; +height: 50px; + +color: #717171; +background-color: #D6E7D2; +filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); +} + +.footer-data { + font-family: 'Inter'; +font-style: normal; +font-weight: 400; +font-size: 20px; +line-height: 50px; +color: #000000; +} +.footer-link { + top: calc(50% - 50px/2); + +font-family: 'Inter'; +font-style: normal; +font-weight: 400; +font-size: 20px; +line-height: 50px; +color: #000000; +} +.social-list { + display: inline-block; +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..e8c03e5 --- /dev/null +++ b/style.css @@ -0,0 +1,1360 @@ +*, *:after, *:before { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; +} + +body { + display: flex; + flex-direction: column; + justify-content: space-between; + + min-height: 100vh; + min-width: 320px; + margin: 0; + padding: 0; + + font-family: 'Inter', sans-serif; + font-style: normal; + font-weight: 400; +} + +.link { + text-decoration: none; +} + +.list { + list-style: none; + padding: 0; + margin: 0; +} + +.container { + max-width: 1440px; + margin: 0 auto; +} + +@media screen and (max-width: 380px) { + .container { + width: 100%; + } +} +@media screen and (max-width: 768px) { + .container { + width: 768px; + } +} + +.header { + width: 100%; + background-color: #edf2ec; +} + +.header-container { + padding: 42px 110px; +} + +@media screen and (max-width: 768px) { + .header-container { + padding: 0; + } +} +.nav-bar { + max-width: 1220px; + height: 50px; + display: flex; + justify-content: space-between; + align-items: center; + flex-flow: row nowrap; +} + +@media screen and (max-width: 768px) { + .nav-bar { + width: 668px; + margin: 33.5px auto; + } +} + +@media screen and (max-width: 380px) { + .nav-bar { + width: 330px; + height: 24px; + margin: 36px 25px; + } +} + +.nav-list { + display: flex; + justify-content: flex-end; + margin-left: 47px; + gap: 0 47px; +} +@media screen and (max-width: 380px) { + .nav-list { + display: flex; + flex-direction: column; + align-items: center; + padding-top: 0px; + justify-content: center; + position: fixed; + top: 84px; + left: 0; + width: 380px; + height: 300px; + transform: translateX(-100%); + transition: transform 0.5s; + background-color: #edf2ec; + gap: 10px 0; + margin-left: 0; + } + .nav-list.active { + transform: translateX(0); +} + } + +.nav-link { + font-family: 'Inika', serif; + font-size: 16px; + line-height: 3.13; + color: #010201; + transition: .5s; +} + +@media screen and (max-width: 768px) { + .nav-link { + line-height: 1.3; + } +} + +.current, +.nav-link:hover { + font-weight: 700; + color: #e06733; +} + + +/*Section Welcome*/ +.welcome { + background-color: #edf2ec; +} + +.welcome-container { + display: flex; + padding: 62px 109px; +} + +@media screen and (max-width: 768px) { + .welcome-container { + flex-direction:row-reverse; + padding: 40px 50px 70px; + } +} + +@media screen and (max-width: 380px) { + .welcome-container { + max-width: 380px; + align-items: center; + padding: 34px 25px 31px; + } +} + +.welcome-img { + display: block; + width: 449px; + height: 407px; +} + +@media screen and (max-width: 768px) { + .welcome-img { + width: 280px; + height: 254px; + } +} + +@media screen and (max-width: 380px) { + .welcome-img { + display: none; + } +} + +.welcome-info { + width: 549px; + margin: 36px 0 32px auto; +} + +@media screen and (max-width: 768px) { + .welcome-info { + width: 388px; + margin: 0; + padding-right: 42px; + } +} + +@media screen and (max-width: 380px) { + .welcome-info { + width: 100%; + margin: 0; + padding-right: 0; + + } +} +.welcome-title { + margin-bottom: 42px; + font-weight: 700; + font-size: 45px; + line-height: 1.11; + color: #717171; +} + +@media screen and (max-width: 768px) { + .welcome-title { + margin-bottom: 30px; + font-size: 35px; + line-height: 1.43; + } +} + +@media screen and (max-width: 380px) { + .welcome-title { + max-width: 330px; + margin-bottom: 20px; + font-size: 25px; + line-height: 1.4; + } +} + +span { + color: #499a18; +} +.welcome-text { + margin-right: 39px; + margin-bottom: 48px; + padding: 3px 0 3px 6px; + font-size: 20px; + line-height: 1.75; + color: #636060; +} + +@media screen and (max-width: 768px) { + .welcome-text { + margin-bottom: 30px; + padding: 0; + margin-right: 0; + font-size: 16px; + line-height: 1.56; + } +} + +@media screen and (max-width: 380px) { + .welcome-text { + max-width: 330px; + margin-bottom: 28px; + padding: 0; + margin-right: 0; + } +} + +.main-btn { + width: 158px; + height: 44px; + margin-bottom: 32px; + font-family: inherit; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 1.25; + text-transform: uppercase; + background-color: #edf2ec; + border: 2px solid #e06733; + border-radius: 10px; + color: #000000; + transition: .5s; +} + +@media screen and (max-width: 768px) { + .main-btn { + width: 158px; + height: 44px; + margin-bottom: 0; + font-size: 16px; + line-height: 1.56; + padding: 9px 23px; + } +} + +@media screen and (max-width: 380px) { + .main-btn { + width: 100px; + height: 34px; + margin-bottom: 0; + font-size: 10px; + line-height: 2; + padding: 6px 14px; + } +} + +.main-btn:hover { + background-color: #E06733; + color: #ffffff; + cursor: pointer; +} + +/*Section About*/ +.about-container { + display: flex; + justify-content: space-between; + padding: 93px 109px; +} + +@media screen and (max-width: 768px) { + .about-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 40px 50px; + } +} + +@media screen and (max-width: 380px) { + .about-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 21px 25px 32px; + width: 100%; + } +} + +.about-info { + width: 600px; +} + +@media screen and (max-width: 768px) { + .about-info { + width: 668px; + } +} + +@media screen and (max-width: 380px) { + .about-info { + width: 100%; + } +} + +.about-title { + margin-bottom: 51px; + font-family: 'Inika', serif; + font-weight: 400; + font-size: 40px; + line-height: 1.3; + color: #e06733; +} + +@media screen and (max-width: 768px) { + .about-title { + margin-bottom: 40px; + padding: 0 110px; + font-size: 35px; + line-height: 1.31; + text-align: center; + } +} + +@media screen and (max-width: 380px) { + .about-title { + margin-bottom: 13.5px; + padding: 0 11px; + font-size: 25px; + line-height: 1.32; + text-align: center; + } +} + +.about-text { + font-size: 20px; + line-height: 1.5; + color: #636060; +} + +@media screen and (max-width: 768px) { + .about-text { + margin-bottom: 83px; + } +} + +@media screen and (max-width: 380px) { + .about-text { + margin-bottom: 0px; + font-size: 15px; + line-height: 1.67; + } +} +.about-img { + display: block; + width: 464px; + height: 479px; + margin-bottom: 20px; +} + +@media screen and (max-width: 768px) { + .about-img { + display: block; + width: 250px; + height: 258px; + margin-bottom: 55px; + } +} + +@media screen and (max-width: 380px) { + .about-img { + display: block; + width: 150px; + height: 147px; + margin-bottom: 0px; + } +} + +/*Section Service*/ + +.service { + background-color: #edf2ec; +/* padding: 38px 26px 130px 110px;*/ +} + +.service-container { + padding: 62px 109px 121px 109px; +} + +@media screen and (max-width: 768px) { + .service-container { + padding: 60px 50px 70px 50px; + } +} + +@media screen and (max-width: 380px) { + .service-container { + width: 100%; + padding: 34px 25px 18px 25px; + } +} + +.service-header { + display: flex; + margin-right: 208px; + margin-bottom: 80px; +} + +@media screen and (max-width: 768px) { + .service-header { + display: flex; + flex-direction: column; + margin-right: 159px; + margin-bottom: 40px; + } +} + +@media screen and (max-width: 380px) { + .service-header { + margin-right: 0; + margin-bottom: 33px; + } +} +.service-title { + margin-right: 140px; + font-family: 'Inika',serif; + font-size: 40px; + line-height: 1.3; + color: #499A18; +} + +@media screen and (max-width: 768px) { + .service-title { + width: 306px; + margin-bottom: 44px; + font-size: 35px; + line-height: 1.31; + } +} + +@media screen and (max-width: 380px) { + .service-title { + width: 187px; + margin-bottom: 40px; + font-size: 25px; + line-height: 1.32; + } +} + +.service-list { + display: flex; + gap: 38px; + justify-content: space-between; + align-items: center; +} +@media screen and (max-width: 380px) { + .service-list { + display: flex; + flex-direction: row; + gap: 9px 10px; + justify-content: space-between; + flex-wrap: wrap; + align-items: center; + width: 252px; + } +} +.service-btn { + box-sizing: border-box; + width: 161px; + height: 50px; + font-family: 'Inika', serif; + font-size: 20px; + line-height: 1.3; + color: #e06733; + background-color: #edf2ec; + border: 1px solid #e06733; + border-radius: 5px; + transition: .5s; +} + +@media screen and (max-width: 380px) { + .service-btn { + width: 121px; + height: 35px; + font-size: 15px; + line-height: 1.33; + } +} + +.service-btn:hover, +.service-btn:focus, +.service-btn:active { + color: #ffffff; + background-color: #e06733; +} + +.service-btn:hover { + box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.12); +} + +.card-list { + display: flex; + flex-wrap: wrap; + gap: 60px 113px; + +} + +@media screen and (max-width: 768px) { + .card-list { + gap: 38px 103px; + } +} + +@media screen and (max-width: 380px) { + .card-list { + flex-direction: column; + justify-content: center; + align-items: center; + gap: 32.5px 0px; + } +} +.card-item { + border-radius: 20px; + border: 1px solid #e3e1d5; +} + +.card-item:hover { + box-shadow: 5px 5px 5px #7777772d; + transition: 0.2s; +} + +.card_img { + width: 329px; + height: 350px; +} + +@media screen and (max-width: 768px) { + .card_img { + width: 280px; + height: 350px; + } +} + +.img_one { + background: url(./assets/img/garden_care.png); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + border-radius: 20px 20px 0 0; +} + +.img_two { + background: url(./assets/img/planting_one.png); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + border-radius: 20px 20px 0 0; +} + +.img_three { + background: url(./assets/img/lawn_care.png); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + border-radius: 20px 20px 0 0; +} + +.img_four { + background: url(./assets/img/planting_two.png); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + border-radius: 20px 20px 0 0; +} + +.img_five { + background: url(./assets/img/garden_care_two.png); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + border-radius: 20px 20px 0 0; +} + +.img_six { + background: url(./assets/img/planting_three.png); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + border-radius: 20px 20px 0 0; +} + + +.service-item { + margin-top: 6px; + margin-bottom: 12px; + font-weight: 700; + font-size: 20px; + line-height: 1; + text-align: center; + color: #e06733; +} + +@media screen and (max-width: 768px) { + .service-item { + margin: 10px 0; + } +} + +.service-text { + margin-bottom: 30px; + font-size: 16px; + line-height: 1.25; + text-align: center; + color: #717171; +} + +@media screen and (max-width: 768px) { + .service-text { + text-align: center; + width: 201px; + padding: 0; + margin: 0 auto 18px; + } +} + +/*Section Prices*/ + +.prices-container { + display: flex; + justify-content: space-between; + padding: 36px 109px 115px 109px; +} + +@media screen and (max-width: 768px) { + .prices-container { + padding: 40px 50px 88px 50px; + } +} + +@media screen and (max-width: 380px) { + .prices-container { + padding-top: 25px; + padding-bottom: 42px; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + } +} + +.prices-title { + margin-bottom: 60px; + font-weight: 700; + font-size: 40px; + line-height: 1.2; + color: #000000; +} + +@media screen and (max-width: 768px) { + .prices-title { + margin-left: 14px; + margin-bottom: 56px; + font-size: 35px; + } +} + +@media screen and (max-width: 380px) { + .prices-title { + margin-bottom: 38px; + font-size: 25px; + text-align: center; + } +} + +/*accordion*/ + +.accordion { + width: 332px; + border: 1px solid #e3e1d5; + border-radius: 20px; + padding: 34px 41px 30px; + display: flex; + flex-direction: column; + gap: 34px 0; +} + +@media screen and (max-width: 380px) { + .accordion { + width: 224px; + margin-bottom: 14px; + padding: 29px 22px; + gap: 14px 0; + } +} + +.tab input, +.tab__content { + display: none; +} + +.tab { + width: 250px; + height: 50px; + background: #edf2ec; + border-radius: 20px; +} + +@media screen and (max-width: 380px) { + .tab { + width: 180px; + height: 50px; + } +} + +.tab__title { + display: block; + font-family: 'Inter', sans-serif; + font-weight: 700; + font-size: 20px; + padding: 14px 40px; + line-height: 1; + cursor: pointer; +} + +@media screen and (max-width: 380px) { + .tab__title { + font-size: 15px; + padding: 13px 40px 13px 30px; + line-height: 1.33; + } +} + +.tab__title::after { + content: url(./assets/svg/accordion_btn_one.svg); + float: right; +} + +.tab__content { + margin-top: -10px; + font-family: 'Inter', sans-serif; + font-weight: 300; + font-size: 10px; + line-height: 1; + color: #717171; + background-color: #d6e7d2; + border-radius: 0 0 20px 20px; + position: relative; +} + +.tab__contentInfo { + margin: 6px 46px 12px 40px; + padding-bottom: 12px; + border-top: 0.5px solid #aea1a1; +} +@media screen and (max-width: 380px) { + .tab__contentInfo { + margin: 6px 30px 12px; + } +} + +.tab__descript { + margin-top: 6px; + margin-bottom: 6px; +} + +.tab__cost { + margin-top: 0; + margin-bottom: 12px; + font-weight: 700; + font-size: 16px; + line-height: 1.25; + color: #000000; +} + +.tab__cost>span { + color: #e06733; +} + +.tab__link { + padding: 4px 24px; + border-radius: 10px; + font-family: 'Inter', sans-serif; + font-weight: 700; + font-size: 14px; + line-height: 1.43; + color: #717171; + background-color: #ffffff; +} + +.tab :checked + .tab__title { + background-color: #d6e7d2; + border-radius: 20px 20px 0 0; +} + +.tab :checked + .tab__title::after { + content: url(./assets/svg/accordion_btn_active.svg); +} + +.tab :checked ~ .tab__content { + display: block; +} + +/*end*/ + +.prices-info { + padding-left: 421px; +} + +@media screen and (max-width: 768px) { + .prices-info { + width: 336px; + padding-left: 40px; + padding-top: 100px; + } +} + +@media screen and (max-width: 380px) { + .prices-info { + width: 100%; + padding-left: 0; + padding-top: 0; + } +} + +.prices-text { + margin-bottom: 43px; + font-family: 'Inter'; + font-weight: 700; + font-size: 40px; + line-height: 1.25; + text-align: right; +} + +@media screen and (max-width: 768px) { + .prices-text { + font-weight: 700; + margin-bottom: 28.5px; + font-size: 25px; + line-height: 1.4; + } +} + +@media screen and (max-width: 380px) { + .prices-text { + font-weight: 700; + margin-bottom: 19px; + font-size: 20px; + line-height: 1.75; + text-align: center; + } +} +.prices-btn { + padding: 11px 32px; + margin-left: 307px; + margin-bottom: 20px; + font-family: 'Inika', serif; + font-weight: 700; + font-size: 20px; + line-height: 1.3; + text-align: center; + color: #e06733; + box-sizing: border-box; + border: 1px solid #E06733; + border-radius: 5px; + background-color: #FFFFFF; + transition: .5s; +} + +@media screen and (max-width: 768px) { + .prices-btn { + margin-left: 134px; + margin-bottom: 34px; + } +} + +@media screen and (max-width: 380px) { + .prices-btn { + padding: 7px 24px; + margin: 0 79px; + font-size: 15px; + line-height: 1.33; + text-align: center; + } +} + +.prices-btn:hover, +.prices-btn:focus, +.prices-btn:active { + color: #ffffff; + background-color: #e06733; +} + +.prices-btn:hover { + box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.12); +transition: .5s; +} + +.prices-img { + display: block; + width: 152px; + height: 175px; + margin-top: 18px; + margin-left: 317px; +} + +@media screen and (max-width: 768px) { + .prices-img { + width: 152px; + height: 175px; + margin-top: 0px; + margin-left: 144px; + } +} + +@media screen and (max-width: 380px) { + .prices-img { + display: none; + } +} + +.contacts { + + background-color: #edf2ec; +/* padding: 46px 72px 0 109px;*/ +} + +.contacts-container { + display: flex; + justify-content: space-between; + padding: 46px 109px 0 109px; +} + +@media screen and (max-width: 768px) { + .contacts-container { + display: flex; + flex-direction: column-reverse; + justify-content: center; + align-items: center; + padding-top: 40px; + padding-bottom: 0; + } +} + +@media screen and (max-width: 380px) { + .contacts-container { + width: 100%; + padding: 24px 41.5px 0; + } +} + +.contacts__img { + width: 400px; + height: 497px; + margin-top: 7px; +} + +@media screen and (max-width: 768px) { + .contacts__img { + width: 200px; + height: 248px; + margin-left: 20px; + } +} + +@media screen and (max-width: 380px) { + .contacts__img { + width: 100px; + height: 124px; + } +} + +.contacts__info { + margin-left: 113px; + margin-bottom: 37px; +} + +@media screen and (max-width: 768px) { + .contacts__info { + margin-left: 0; + margin-bottom: 0; + } +} +.contacts-title { + font-family: 'Inika', serif; + font-weight: 700; + font-size: 40px; + line-height: 1.3; + margin-top: 14px; + margin-bottom: 37px; + color: #499a18; +} + +@media screen and (max-width: 768px) { + .contacts-title { + margin-top: 0; + margin-bottom: 100px; + text-align: center; + } + +} + +@media screen and (max-width: 380px) { + .contacts-title { + font-size: 25px; + line-height: 1.32; + margin-bottom: 80px; + } + +} + +.select__header { + display: flex; + margin-left: 259px; + padding-left: 8px; + font-family: 'Inter', sans-serif; + font-size: 20px; + line-height: 2; + letter-spacing: 0.05em; + width: 450px; + height: 50px; + + color: #717171; + background-color: #d6e7d2; + filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); + cursor: pointer; + transition: .5s; +} + +@media screen and (max-width: 768px) { + .select__header { + margin-left: 0; + margin-bottom: 242px; + padding-left: 10px; + } +} + +@media screen and (max-width: 380px) { + .select__header { + width: 296px; + margin-bottom: 125px; + } +} + +.select__header:hover, +.select__header:focus, +.select__header:active { + background-color: #c1e698; +} +.select__header>span { + margin-left: 6px; + color: #717171; +} +.select__current { + font-size: 16px; + line-height: 2.5; + padding: 5px; +} +.select__icon { + align-items: center; + display: flex; + flex-shrink: 0; + justify-content: center; + height: 50px; + margin-left: auto; + margin-right: 23px; + text-align: center; + width: 40px; +} + +@media screen and (max-width: 380px) { + .select__icon { + margin-right: 10.5px; + } +} + +/*.footer { + padding: 20px; + } + */ +.footer-container { + display: flex; + justify-content: space-between; + align-items: center; + margin: 0 auto; + padding: 40px 109px; + } + + +@media screen and (max-width: 768px) { + .footer-container { + display: flex; + flex-direction: column; + align-items: center; + margin: 0 auto; + padding: 33px 278px 18px; + } +} + +@media screen and (max-width: 380px) { + .footer-container { + max-width: 380px; + padding: 22px 80px 7px; + } +} +.footer-data { + font-size: 20px; + line-height: 2.5; + color: #000000; +} + +@media screen and (max-width: 768px) { + .footer-data { + line-height: 1.2; + margin-bottom: 16px; + } +} + +.footer-data>span { + margin-left: 12px; + color: #000000; +} + +.footer-data>a { + margin-left: 14px; + font-family: 'Inter', sans-serif; + font-size: 16px; + line-height: 2.5; + color: #000000; + transition: .5s; +} + +@media screen and (max-width: 768px) { + .footer-data>a { + margin-left: 20px; + line-height: 1.2; + } + } + +.footer-data>a:hover, +.rss:hover { +color: #e06733; +/*transition: .5s;*/ +} + +.footer-link { + font-size: 20px; + line-height: 2.5; + color: #000000; + margin-left: 18px; +} + +@media screen and (max-width: 768px) { + .footer-link { + font-size: 20px; + line-height: 1.2; + margin-left: 0; + margin-bottom: 25px; + } +} +@media screen and (max-width: 380px) { + .footer-link { + margin-bottom: 12px; + } +} +.social-list { + display: flex; + justify-content: space-between; + align-items: center; + flex-shrink: 0; + gap: 0 21px; +} + +.social-img { + width: 29px; + height: 29px; + border-radius: 50%; +/* transition: .2s;*/ +} + +@media screen and (max-width: 768px) { + .social-list { + margin-bottom: 9px; + } +} +.social-img:hover { +background-color: #f9814d; +transition: .2s; +} + + +.toggle { + display: none; + flex-direction: column; + justify-content: center; + align-items: center; + width: 40px; + height: 24px; + margin-left: auto; + cursor: pointer; + user-select: none; + z-index: 15; + } + + .toggle div { + width: 40px; + height: 0; + border: 2px solid #717171; + margin: 2px 0; + z-index: 15; + } + + .toggle.active .line1 { + transform: rotate(-45deg) translate(-8px, 9px); + transition: 0.3s; + } + + .toggle.active .line2 { + opacity: 0; + } + + .toggle.active .line3 { + opacity: 0; + } + + .toggle.active .line4 { + transform: rotate(45deg) translate(-8px, -9px); + transition: 0.3s; + } + + + + @media screen and (max-width: 380px) { + .toggle { + display: flex; + } + } + + +/*.select { + margin: 0 auto; + position: relative; + width: 250px; + height: 50px; +} +.select.is-active .select__body { + display: block;} + +.select__header { + display: flex; + margin-left: 252px; + font-family: inherit; + padding-left: 20px; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 2; + letter-spacing: 0.05em; + width: 450px; + height: 50px; + + color: #717171; + background-color: #c1e698; + filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); + cursor: pointer; + +}*/ +/*.select__header>span { + margin-left: 7px; +} +.select__current { + font-size: 16px; + line-height: 2.5; + padding: 8px; +} +.select__icon { + align-items: center; + display: flex; + flex-shrink: 0; + justify-content: center; + height: 50px; + margin-left: auto; + margin-right: 40px; + text-align: center; + width: 40px; +} + +.select__body { + position: absolute; + border-top: 0; + display: none; + top: 100%; + left: 252px; + right: -452px; + +} + +.items { + background-color: #dce9d9; +} +.select__item { + margin: 0 35px; + cursor: pointer; + font-family: 'Inter', sans-serif; + font-size: 16px; + line-height: 2.5; + letter-spacing: 0.05em; + + color: #499a18; + border-bottom: 1px solid #d9d9d9; +} + +.select__item:hover { + color: #717171; + border-bottom: 1px solid #717171; +}*/ + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..87aa2ad --- /dev/null +++ b/styles.css @@ -0,0 +1,402 @@ +:root { + --main-color: #2D826E; + --main-text-color: #16B78F; + --main-white-color: #fff; + --border-bottom-color: #08345D; + --profile-border-color: #98A6AD; + --subtitle-color: #878680; +} + +* { + box-sizing: border-box; + } + + html { + scroll-behavior: smooth; + } + + body { + display: flex; + flex-direction: column; + justify-content: space-between; + min-width: 320px; + min-height: 100vh; + margin: 0; + padding: 0; + font-family: 'Roboto', sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 1.5; + color: var(--main-text-color); + background-color: #FCEDBA; + } + + .container { + max-width: 1440px; + margin: 0 auto; + min-height: 50px; + } + + .header { + background-color: var(--main-color); + } + + .header-container { + display: flex; + flex-flow: row nowrap; + justify-content: flex-end; + align-items: center; + } + + .nav-logo { + width: 5vw; + height: 2.5vw; + } + + .logo { + margin-right: 200px; + } + + .nav-list { + display: flex; + justify-content: flex-end; + align-items: center; + list-style: none; + } + + .nav-link { + position: relative; + padding: 0 12px; + text-decoration: none; + font-size: 20px; + font-weight: 300; + line-height: 2.5; + color: var(--main-white-color); + } + + .nav-link::after { + content: ""; + position: absolute; + left: 12px; + bottom: -5px; + width: calc(100% - 24px); + height: 2px; + background-color: var(--main-white-color); + opacity: 0; + transition: .3s; + } + + .nav-link:hover::after { + opacity: 1; + animation-name: slidein; + animation-duration: 1s; + animation-fill-mode: forwards; + } + + @keyframes slidein { + from { + width: 0; + } + to { + width: calc(100% - 24px); + } + } + + .main { + margin-bottom: auto; + } + + .main-container { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + + .section { + width: calc(50% - 20px); + padding: 10px; + padding-bottom: 35px; + border-bottom: 1px solid var(--border-bottom-color); + } + + .section-title { + margin-bottom: 20px; + font-size: 20px; + font-weight: 400; + text-transform: uppercase; + letter-spacing: 5px; + color: var(--main-color); + } + + .section-profile { + display: flex; + justify-content: space-around; + width: 100%; + padding: 50px 30px 35px; + border-bottom: 8px solid var(--profile-border-color); + } + + .pre { + padding: 0; + margin: 0; + } + + .section-profile-title { + display: flex; + flex-direction: column; + justify-content: center; + align-content: center; + text-align: center; + text-transform: uppercase; + } + + .main-title { + position: relative; + padding: 0; + margin-bottom: 20px; + color: var(--main-text-color); + font-size: 32px; + font-weight: 300; + letter-spacing: 10px; + line-height: 1.56; + word-spacing: 3px; + } + + .main-title::after { + content: ""; + position: absolute; + bottom: -19px; + left: 50%; + margin-left: -70px; + width: 140px; + height: 2px; + background-color: var(--main-color); + } + + .section-subtitle { + margin-top: 20px; + color: var(--subtitle-color); + font-weight: 400; + font-size: 22px; + line-height: 2.27; + letter-spacing: 2px; + } + + .section-profile-logo { + width: 250px; + height: 250px; + object-fit: cover; + border-radius: 50%; + box-shadow: 0 1px 4px rgba(0, 0, 0, .6); + filter: grayscale(0.2) brightness(1.05); + transition: .3s; + } + + .section-profile-logo:hover { + filter: none; + } + + .section-list { + margin: 0; + padding: 0; + list-style: none; + } + + .section-item { + position: relative; + margin: 0; + margin-bottom: 10px; + padding: 0; + padding-left: 30px; + } + + .section-item::before { + content: ""; + position: absolute; + top: 5px; + left: 2px; + width: 14px; + height: 14px; + background-size: 14px 14px; + background-image: url("assets/svg/6.svg"); + } + + .section-item span { + color: var(--subtitle-color); + } + + .section-item a { + text-decoration: none; + color: var(--subtitle-color); + transition: color 0.5s; + } + + .section-item a:hover { + color: var(--main-text-color); + } + + .contacts-item:before { + content: ""; + position: absolute; + top: 1px; + left: 0px; + width: 24px; + height: 24px; + background-size: contain; + background-repeat: no-repeat; + } + + .contacts-item:nth-child(1):before { + background-image: url("assets/svg/1.svg"); + } + + .contacts-item:nth-child(2):before { + top: 3px; + left: 0px; + width: 21px; + height: 21px; + background-image: url("assets/svg/2.svg"); + } + + .contacts-item:nth-child(3):before { + top: 4px; + left: 0px; + width: 19px; + height: 19px; + background-image: url("assets/svg/3.svg"); + } + + .contacts-item:nth-child(4):before { + top: 3px; + left: 0px; + width: 21px; + height: 21px; + background-image: url("assets/svg/4.svg"); + } + + .contacts-item:nth-child(5):before { + background-image: url("assets/svg/5.svg"); + } + + .section-education, + .section-english { + border-bottom: 0; + } + + .footer { + background-color: var(--main-color); + padding: 20px; + } + + .footer-container { + display: flex; + justify-content: space-between; + align-items: center; + margin: 0 auto; + color: var(--main-white-color); + } + + .github { + color: var(--link-color); + text-decoration: none; + line-height: 45px; + } + + .rss { + width: 121px; + height: 45px; + background-image: url("./assets/svg/rss.svg"); + background-size: contain; + background-repeat: no-repeat; + } + + .toggle { + display: none; + flex-direction: column; + justify-content: center; + align-items: center; + width: 40px; + height: 40px; + margin-top: 5px; + margin-left: auto; + cursor: pointer; + user-select: none; + z-index: 15; + } + + .toggle div { + width: 80%; + height: 2px; + background: #fff; + margin: 3px 0; + z-index: 15; + } + + .toggle.collapsed .line1 { + transform: rotate(-45deg) translate(-5px, 6px); + } + + .toggle.collapsed .line2 { + opacity: 0; + } + + .toggle.collapsed .line3 { + transform: rotate(45deg) translate(-5px, -6px); + } + + @media (max-width: 1440px) { + .container { + padding: 0 20px; + } + } + + @media (max-width: 768px) { + .section { + width: 100%; + } + .section-profile { + flex-direction: column; + align-items: center; + } + .section-education { + border-bottom: 1px solid var(--border-bottom-color); + } + .footer-container { + flex-direction: column; + align-items: center; + } + .nav { + display: none; + } + .toggle { + display: flex; + } + .nav.collapsed { + position: absolute; + left: 0; + top: 0; + z-index: 2; + display: flex; + width: 100%; + height: 100vh; + min-height: 525px; + flex-direction: column; + background-color: var(--main-color); + } + .nav-list.collapsed { + display: flex; + align-items: center; + justify-content: flex-start; + width: 100%; + height: 100%; + flex-direction: column; + padding-top: 50px; + } + } + + @media (max-width: 410px) { + .main-title { + font-size: 24px; + letter-spacing: 4px; + } + } \ No newline at end of file