feat: Made tablet version for all pages

src/contact.html

@@ -43,7 +43,7 @@
 				</div>
 				<iframe
 					src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1143.0965017714987!2d21.920660481729392!3d47.04499920169418!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47464794d87a183f%3A0x26127af0a86f755a!2sStrada%20Universit%C4%83%C8%9Bii%2015%2C%20Oradea%20417498!5e0!3m2!1shu!2sro!4v1609882271325!5m2!1shu!2sro"
-					width="300"
+					width="50%"
 					height="250"
 					frameborder="0"
 					style="border: 0"

src/index.html

@@ -16,7 +16,10 @@
 					unei infrastructurii cloud-native.
 				</p>
 			</div>
-			<div class="index_content_box">
+			<div class="index_content_scroll">
+				<app-scroll-button data-anchor="signupForm"></app-scroll-button>
+			</div>
+			<div id="signupForm" class="index_content_box">
 				<div class="index_content_signupForm">
 					<p class="index_content_signupForm_title">Începe astăzi!</p>
 					<input

src/script/components/app-scroll-button.js

@@ -0,0 +1,30 @@
+import styles from '!raw-loader!sass-loader!./styles/app-scroll-button.scss';
+
+class AppScrollButton extends HTMLElement {
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+		const root = this.attachShadow({ mode: 'open' });
+
+		const style = document.createElement('style');
+		style.textContent = styles;
+		root.appendChild(style);
+
+		const button = document.createElement('div');
+		button.className = 'button';
+		button.onclick = () => {
+			document
+				.getElementById(this.dataset.anchor)
+				.scrollIntoView({ behavior: 'smooth' });
+		};
+		root.appendChild(button);
+	}
+
+	static get observedAttributes() {
+		return ['data-anchor'];
+	}
+}
+
+customElements.define('app-scroll-button', AppScrollButton);

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() {

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() {

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;
+	}
+}

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;
+		}
 	}
 }

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;

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';

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;
+			}
 		}
 	}
 }

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;

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;

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;
+	}
+}

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%;
+			}
 		}
 	}
 }