Începe astăzi!
{
+ document
+ .getElementById(this.dataset.anchor)
+ .scrollIntoView({ behavior: 'smooth' });
+ };
+ root.appendChild(button);
+ }
+
+ static get observedAttributes() {
+ return ['data-anchor'];
+ }
+}
+
+customElements.define('app-scroll-button', AppScrollButton);
diff --git a/src/script/components/app-service-header.js b/src/script/components/app-service-header.js
index 5f94e0c..ddce4b2 100644
--- a/src/script/components/app-service-header.js
+++ b/src/script/components/app-service-header.js
@@ -37,6 +37,11 @@ class AppServieHeader extends HTMLElement {
div.appendChild(info);
root.appendChild(div);
+
+ const underDescription = document.createElement('p');
+ underDescription.className = 'header_underDescription';
+ underDescription.innerText = this.dataset.description;
+ root.appendChild(underDescription);
}
static get observedAttributes() {
diff --git a/src/script/components/app-service-menu.js b/src/script/components/app-service-menu.js
index 17d03f2..5f79827 100644
--- a/src/script/components/app-service-menu.js
+++ b/src/script/components/app-service-menu.js
@@ -10,9 +10,17 @@ class AppServiceMenu extends HTMLElement {
style.textContent = styles;
root.appendChild(style);
+ const hamburger = document.createElement('div');
+ hamburger.className = 'menu_hamburger';
+ root.appendChild(hamburger);
+
const div = document.createElement('div');
div.className = 'menu';
+ const closeButton = document.createElement('div');
+ closeButton.className = 'menu_closeMenu';
+ div.appendChild(closeButton);
+
this.getMenuItems().forEach(item => {
const menuItem = document.createElement('div');
menuItem.className = 'menu_item';
@@ -35,6 +43,16 @@ class AppServiceMenu extends HTMLElement {
});
root.appendChild(div);
+
+ hamburger.onclick = () => {
+ div.classList.add('menu_open');
+ hamburger.classList.add('menu_hamburger_open');
+ };
+
+ closeButton.onclick = () => {
+ div.classList.remove('menu_open');
+ hamburger.classList.remove('menu_hamburger_open');
+ };
}
getMenuItems() {
diff --git a/src/script/components/styles/app-scroll-button.scss b/src/script/components/styles/app-scroll-button.scss
new file mode 100644
index 0000000..831c5a4
--- /dev/null
+++ b/src/script/components/styles/app-scroll-button.scss
@@ -0,0 +1,22 @@
+.button {
+ background: url('../../../res/scroll.png') center center;
+ background-size: contain;
+ width: 40px;
+ height: 40px;
+ border-radius: 20px;
+ cursor: pointer;
+ margin: auto;
+ animation: ripple 4s infinite ease-out;
+}
+
+@keyframes ripple {
+ 0% {
+ box-shadow: 0 0 0 #ffffff7b;
+ }
+ 30% {
+ box-shadow: 0 0 15px #ffffff7b;
+ }
+ 100% {
+ box-shadow: 0 0 10px #ffffff00;
+ }
+}
diff --git a/src/script/components/styles/app-service-header.scss b/src/script/components/styles/app-service-header.scss
index 93f6617..fdc3546 100644
--- a/src/script/components/styles/app-service-header.scss
+++ b/src/script/components/styles/app-service-header.scss
@@ -1,3 +1,5 @@
+@import '../../../style/mixins.scss';
+
.header {
background: url('../../../res/services_header_bg.png') center center;
background-repeat: no-repeat;
@@ -7,6 +9,11 @@
padding: 20px 40px;
margin-bottom: 60px;
+ @include tablet {
+ justify-content: flex-end;
+ margin-bottom: 20px;
+ }
+
&_info {
display: flex;
flex-direction: column;
@@ -33,5 +40,21 @@
font-size: 28px;
line-height: 37px;
color: #ffffff;
+
+ @include tablet {
+ display: none;
+ }
+ }
+
+ &_underDescription {
+ display: none;
+
+ @include tablet {
+ display: block;
+ font-size: 28px;
+ line-height: 37px;
+ margin-bottom: 60px;
+ padding: 0 20px;
+ }
}
}
diff --git a/src/script/components/styles/app-service-menu.scss b/src/script/components/styles/app-service-menu.scss
index f2bc001..3d99b55 100644
--- a/src/script/components/styles/app-service-menu.scss
+++ b/src/script/components/styles/app-service-menu.scss
@@ -1,3 +1,5 @@
+@import '../../../style/mixins.scss';
+
.menu {
position: fixed;
left: 0;
@@ -9,6 +11,51 @@
box-shadow: 3px 0 3px #00000010;
z-index: 999;
+ @include tablet {
+ overflow: hidden;
+ width: 0;
+ transition: width 0.3s ease-out;
+
+ &_open {
+ width: 400px;
+ }
+ }
+
+ &_hamburger {
+ display: none;
+
+ @include tablet {
+ display: block;
+ position: absolute;
+ cursor: pointer;
+ top: 80px;
+ left: 20px;
+ background: url('../../../res/hamburger.png') center center;
+ background-size: contain;
+ width: 40px;
+ height: 40px;
+
+ &_open {
+ display: none;
+ }
+ }
+ }
+
+ &_closeMenu {
+ display: none;
+
+ @include tablet {
+ display: block;
+ cursor: pointer;
+ background: url('../../../res/back.png') center center;
+ background-size: contain;
+ width: 40px;
+ height: 40px;
+ margin-left: 320px;
+ margin-bottom: 20px;
+ }
+ }
+
&_item {
padding: 20px 10px;
display: flex;
@@ -16,6 +63,7 @@
align-items: center;
justify-content: flex-start;
cursor: pointer;
+ width: 400px;
&:hover {
background-color: #0072bc10;
diff --git a/src/script/index.js b/src/script/index.js
index 4f7288e..b379179 100644
--- a/src/script/index.js
+++ b/src/script/index.js
@@ -14,3 +14,4 @@ import './components/app-button';
import './components/app-service-menu';
import './components/app-service-header';
import './components/app-price-table';
+import './components/app-scroll-button';
diff --git a/src/style/about.scss b/src/style/about.scss
index 4639757..8c20aa9 100644
--- a/src/style/about.scss
+++ b/src/style/about.scss
@@ -1,3 +1,5 @@
+@import './mixins.scss';
+
.about {
&_bg {
position: fixed;
@@ -16,6 +18,11 @@
padding-top: 40px;
width: 60%;
margin: auto;
+
+ @include tablet {
+ width: 100%;
+ padding: 20px;
+ }
}
&_header {
@@ -31,6 +38,10 @@
display: flex;
justify-content: flex-start;
+ @include tablet {
+ flex-wrap: wrap;
+ }
+
&__center {
justify-content: space-between;
}
@@ -47,17 +58,34 @@
width: 40%;
font-size: 24px;
line-height: 36px;
+
+ @include tablet {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ }
}
&_text {
width: 60%;
font-size: 24px;
line-height: 36px;
+
+ @include tablet {
+ width: 100%;
+ order: 1;
+ }
}
&_img {
width: 300px;
margin: 0 10px;
+
+ @include tablet {
+ width: 100%;
+ margin: 10px 0;
+ order: 2;
+ }
}
}
}
diff --git a/src/style/contact.scss b/src/style/contact.scss
index 07a6760..335ad05 100644
--- a/src/style/contact.scss
+++ b/src/style/contact.scss
@@ -1,3 +1,5 @@
+@import './mixins.scss';
+
.contact {
&_bg {
position: fixed;
@@ -21,6 +23,12 @@
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
+
+ @include tabletMobile {
+ padding-right: 20px;
+ padding-left: 20px;
+ flex-wrap: wrap;
+ }
}
&_form {
@@ -29,6 +37,11 @@
border-radius: 16px;
width: 450px;
+ @include tabletMobile {
+ width: 100%;
+ margin-bottom: 40px;
+ }
+
&_title {
font-size: 24px;
line-height: 36px;
@@ -59,6 +72,12 @@
justify-content: space-between;
margin-left: 40px;
+ @include tabletMobile {
+ width: 100%;
+ margin-left: 0;
+ margin-bottom: 40px;
+ }
+
&_name {
font-size: 18px;
line-height: 24px;
diff --git a/src/style/index.scss b/src/style/index.scss
index e908fe4..1fa9418 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -1,3 +1,5 @@
+@import './mixins.scss';
+
.index {
&_bg {
position: fixed;
@@ -19,8 +21,29 @@
padding: 0 70px;
margin-top: 60px;
+ @include tablet {
+ padding: 0 20px;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+
&_box {
- max-width: 450px;
+ width: 450px;
+
+ @include tablet {
+ width: 100%;
+ }
+ }
+
+ &_scroll {
+ display: none;
+
+ @include tablet {
+ display: block;
+ width: 100%;
+ margin-top: 50px;
+ margin-bottom: 50vh;
+ }
}
&_slogan {
@@ -29,7 +52,7 @@
line-height: 133px;
color: #ffffff;
text-shadow: 5px 5px 16px #ffffff7f;
-
+ max-width: 350px;
margin-top: 60px;
margin-bottom: 80px;
}
@@ -40,6 +63,13 @@
line-height: 48px;
color: #ffffff;
text-shadow: 0 0 10px #000000b2;
+ max-width: 500px;
+
+ @include tablet {
+ text-align: right;
+ float: right;
+ clear: right;
+ }
}
&_signupForm {
@@ -48,6 +78,12 @@
border-radius: 16px;
margin-top: 200px;
width: 450px;
+ margin-left: 40px;
+
+ @include tablet {
+ margin: auto;
+ margin-bottom: 30vh;
+ }
&_title {
font-size: 32px;
diff --git a/src/style/mixins.scss b/src/style/mixins.scss
new file mode 100644
index 0000000..f473578
--- /dev/null
+++ b/src/style/mixins.scss
@@ -0,0 +1,20 @@
+$desktop-width: 1120px;
+$tablet-width: 720px;
+
+@mixin tablet {
+ @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
+ @content;
+ }
+}
+
+@mixin mobile {
+ @media (max-width: #{$tablet-width - 1px}) {
+ @content;
+ }
+}
+
+@mixin tabletMobile {
+ @media (max-width: #{$desktop-width - 1px}) {
+ @content;
+ }
+}
diff --git a/src/style/services.scss b/src/style/services.scss
index db18c61..3162255 100644
--- a/src/style/services.scss
+++ b/src/style/services.scss
@@ -1,7 +1,13 @@
+@import './mixins.scss';
+
.services {
&_content {
margin-top: 60px;
margin-left: 400px;
+
+ @include tablet {
+ margin-left: 0;
+ }
}
&_images {
@@ -10,11 +16,19 @@
justify-content: space-between;
padding: 0 30px;
+ @include tabletMobile {
+ flex-wrap: wrap;
+ }
+
&_image {
width: 30%;
height: 400px;
object-fit: contain;
margin-bottom: 20px;
+
+ @include tabletMobile {
+ width: 100%;
+ }
}
}
}