From 40cb9a3d78ea477bf24d81aac365e5aeacef6321 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A1ndly=20Gerg=C5=91?= <gergo@systemtest.tk>
Date: Wed, 6 Jan 2021 11:29:30 +0200
Subject: [PATCH] feat: Made tablet version for all pages

---
 src/contact.html                              |   2 +-
 src/index.html                                |   5 +-
 src/res/back.png                              | Bin 0 -> 21219 bytes
 src/res/hamburger.png                         | Bin 0 -> 24363 bytes
 src/res/scroll.png                            | Bin 0 -> 18519 bytes
 src/script/components/app-scroll-button.js    |  30 +++++++++++
 src/script/components/app-service-header.js   |   5 ++
 src/script/components/app-service-menu.js     |  18 +++++++
 .../components/styles/app-scroll-button.scss  |  22 ++++++++
 .../components/styles/app-service-header.scss |  23 +++++++++
 .../components/styles/app-service-menu.scss   |  48 ++++++++++++++++++
 src/script/index.js                           |   1 +
 src/style/about.scss                          |  28 ++++++++++
 src/style/contact.scss                        |  19 +++++++
 src/style/index.scss                          |  40 ++++++++++++++-
 src/style/mixins.scss                         |  20 ++++++++
 src/style/services.scss                       |  14 +++++
 17 files changed, 271 insertions(+), 4 deletions(-)
 create mode 100644 src/res/back.png
 create mode 100644 src/res/hamburger.png
 create mode 100644 src/res/scroll.png
 create mode 100644 src/script/components/app-scroll-button.js
 create mode 100644 src/script/components/styles/app-scroll-button.scss
 create mode 100644 src/style/mixins.scss

diff --git a/src/contact.html b/src/contact.html
index efa9fb4..8b212b7 100644
--- a/src/contact.html
+++ b/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"
diff --git a/src/index.html b/src/index.html
index c7cc96c..15f8732 100644
--- a/src/index.html
+++ b/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
diff --git a/src/res/back.png b/src/res/back.png
new file mode 100644
index 0000000000000000000000000000000000000000..858ad99e811e910c595d0c4cb7b420b1d6f79170
GIT binary patch
literal 21219
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
Ia|l}Ve@ESWIsgCw

literal 0
HcmV?d00001

diff --git a/src/res/hamburger.png b/src/res/hamburger.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce515a5bd371fd8c2b16ebf494f1006eccf6eb11
GIT binary patch
literal 24363
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

literal 0
HcmV?d00001

diff --git a/src/res/scroll.png b/src/res/scroll.png
new file mode 100644
index 0000000000000000000000000000000000000000..8c0cb1de58c9e0d6c9b1f1baa0d92543016a78d9
GIT binary patch
literal 18519
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%0Ad)}TvSvkDv4
z(iB3xpI$TUrpji>gbLA_@E&rn@e0^!wi*zG#XY+-(D+E;O$=Iq1%?^Li|1wymFySK
z@nEZa3kYt?G|uWPS@tLpl2xc<!d^UAux4F9WrIv8@)*l#_w10o2W_WeTZSbURig4!
zTO!v!E^1AxDob|7j#U^H7TDMgUdxL1^6??b7^4kTU;B(s=d@dKmeJ$aqRgXhu5mt2
zJU*afDEDN2rc{(vQutfX2``0>9IV)u=ttR=ZTHJshs7fRR;=W7!#(+#>Ad6I%-Dxr
z{5*k)6u#}wpX9hK*s(n4a~@*HCNs`n?pA^|Q?&Q-iL+l7<e-V?STKomo1b0OLADCO
z>dw#3O^W5mMsbCXjsyL39D+)#sV4Tl{<VwwAGAN+nG_HwY=@cYI9-@7-?JlZS@?d2
zxBv$YF_hFzy<3Wih}?8^6(V=yvC4$^*{$VGfMAzi*+|(eqDTovdktVo&z5%(w-{Bl
z>T1=5a#3|&5Ce!$5}A{#j<r>TDd*N;S++(ON=8ZD4oW#YQut9XgcJfGp1;$z%-+$3
zcz*(0EZ4D)nwgXT<ncM1zm|2!Crl1KVy2=ad$wG{X`jX<X&*bL8pZW~u1xB}B$Z_-
zah=9an3=`&W7VZyIjPBRdVrutyok<tYVq+_0GpdPuk4@L;8r+R-r0vlCKlZb@CgkH
zA`N?<V3t@|TwG?S)n4xj3ADQ^*miKYnOgJ5j}`9?2R18MQ@bgeZf_{<tBRhz;l)o&
zI%ZeCc^|%5m|j{@SYrGsPL9ClCcdtJKz@4(ySc~R%F2Kp-H8X|j>NC=G|^l56!wg*
zzqR#b=*019PBDH2+hqyP{=5S=KGb<INWb}|ldsPKDNjD|Q<ox}|77cb@+2+PL-<6v
z<~|+%&I}3mexp6qLD>7Hx$ICOq?>8C8chsUat-#rC1LvpL=yI7cJ>Y)v(gJZ*bP$q
z5mfI{{j;l6nvpG8_`zW;&%oL+Hk50}nJB^|E2=)tksO-l^}xnAOrOO<13OT^|ETWx
zIq|8f+9U_FQc3I~<VNoP(g$3q{fOSd8(pHDPq{X5qLK(#97V|o5AM<&JIv%MCOVmV
zYR876BB@AKoy5@n-AbdmW<@GA$Jb60x;^vd0+^P`$?Kuf1tkwzdkyAXJN0$OL!8BR
z#~+@3v$T|QZCg9ak{Vp#=>{XSn(xBOEW4b^usAV~&8KcSps;~z4J2;E4p&9C7b8+v
zA#~#!g%P`|{f<n5m+g<IjfGP5Sp^deFx-L?uBy5L;o)f>B4MVq)kqAdprR{}D4E;$
z$<WZJE$nZ(X&FviQM%*IvL~qh8Gp7R1h`s?4!`1q#j$Nxr-d<r>;~$xial=znrv1v
z-5prit6s;Vu#dXL(vp8V=gvWE-f(+neK#J~q2fgik!uP1v@qsUp=#LFJ>y55!}Gq`
z=k8HUgW{1GCPCopu*d;x3wai+j4hW&$8<|%Iz^dXBNmz}KgzWw9x@nneE{@vP^3LS
zVIF45WqHJHEIu56$RLhQP%7D_eY8mT+09K2`1P0Tl~~NB_M4lrRcrJlNUPsXIC&hE
zYUogMQ-^b{pp=7bJ8@<m%`r|ng^TD)>`Xj8LQCX|Vtp-D85oA0{BWFWzbwtQrj~oT
zSZAtAluU^*CiHKeoOsKoF!Or*A;BotgUpLcI%DA+C(h34xt;enk29oN6ts4;MzMyS
z?mtjBOugI4YID(IY9PZTiI<5yzo$G>EqE@cI)kaeaSYQlUnPv_y?(Ug4|@j%!0=((
zAIA=!(mv9%{rx?w59-|wF$QKLvJ;DarZmUUvFs4s5rbxCS+AqU?Nyu3NCfa5GhlY*
zMc=TK=IMP#P@VtakkAcu01o{24R)&K&KXZ~T?EO@(wnLs2S_*67l)3Q`dCG=RTmYy
z%{VPy(lxYlarf)LXqzUg%49h5>VWd~_UlO!nU0NvQv2QcTkZx-ZM(|T5LOE|wJSeX
z=}J&2ZM7Qbg+V2=dj`!LWP4fSDb5WiVa0*wI}%j(OWJoJZoAq_AS?2F4Q8}~%S;8y
z6RBK;Td{vxQmvC8c1^U{FiT@N`Rk7tEQyki0R<hVBRa$4_a*yy&pF-{^oUEm%eqZY
z_(F*;7k^H3f2wbZ=UryQS^j}H=Ioh63+rFhfDPfj(U*m}9DSP>tvH761d>DRa=hF9
zNbktat46S$fWQk?t+`bwJG&jc+8vd%z-AzB#9HWRWkN&jZUI7&N(Ug|#I|?Sp5Pn8
zt5Nsg=tZ+tk8U}hqrDJrF9MR$P*Z=$>-9KO;O?V!r6>JJs|5}pyFJhI*YukfUsYc5
zkKKEdy&Abo$}pjq{grR!pA1!BCiPY>5pk*s>nGN3mg;j^^YV0I8YMqh5?;8>3~)y+
zMfBV`me!X%diswtCa^WZN=_Sh?rfP2o>C{iyv!sUsl^<7fWPc5^N_~@urd20-m=^N
z)#<L<5YwV}kv#@?c%Ieulg)Dcl`RJ!$n<&KIw`%jr3v(#nUyU%t=U_`r=qL1l14l7
z96s_!F+X9Wh){Y}uYlLc2HAm(%BJo!3I1gn5kb044(6All9o#*Tb%AJTq$fzJ<XKp
zRw*;N-5oh+m+?Sv=p!)1e;K^7JlLUxuVOVgDqq%-aD20{gF=pNb-A9q^yBytMH`V1
zYq>+yr*4|bVAIRBw=9+)u6;23K)oeY6GLq%^k$>6hU-4f3e?c9()+MLb^lb|q$?^f
zzV!5dl6!&Z^`^rz$+tEB)ZKa|=CxIAez(rnt=6K&!cAr_*N?rlH=!imGi55+NfjIo
z5y8g5XyqsCbL`_wsrq`uvzB_fe<;lq?0nEI$;Rg!eh$?dHZmtw-@<SD?x3rA*{NGr
zogY>DaBF-e1tVwg(!2-ST)W@q!in;mI2$<-_n%gU!By_@&7BBeDs`3{b|r`wFTOU~
zh?EtP&hx4iaXan3{yuo6YBGw>?n1t}Z)`#i@_j;mWVIz)ODy8NpZlsNWU&J+{>p{e
z)qSHi&$f9*r1g=k)=|B4mDEIRsr@s;Rtwg1^9g-B4A)WRPGy=5s`xxsXhp9+JrbHg
zHH<mZ$t@)Q%CPYy<>p37^2YjbX$yUw1zO~c^za%Mn_-txQF-C!j<O@u5@m$QoAc@I
zh)n4oXUF0L;^%n6?DkG8BT~#4Fiwvo>Z{Jg5SA#4@%mnx_NGq85p~^^aG|+fcN*7p
zCxuxi<c(PyUhQ;{q_o|Z1h2bg`IBQ-F9=TJtl4{Qh-}-C6ZeGq417^`-6lEA3gBTu
z!Ga7P$WW-nDz`h2)g5j%+qSvKHbnkqnA1hkv@zw5&A79x`SlGj%m^u{3+&NADf`&$
z+W{=1|C0Ik_u%0LjG!X4_Vls35o_>(0-iE5yO12l*Rg786J39tv9UA`ms@XrCa+0p
zDd<!eJjC)$$k5Jri#l$#=MCzv-azmXG&p%g@|!NUZRJ=kT2o(|OnX_5OFP_KI?Xgh
zAT==;A$3q~OsE>sHSuMuuwi5|*29XmeQ0E9;d^cU3-@?I5JrOQVdMqV#+<gqS3PHJ
zRMyar@SPfe7jeNd`<_&@d=x7!TIr;<snfNoE4HSZZbE!8%>1dnrcQ6u_l+%a^s(DU
zna9iU$EATsJ@A%juzJOBXYBR7JWG|^C2Ux$qC11&iFKb{cdq7h=Ur^zc~3Hv%`|r|
z3%|CL!b#QXb*Nhk`()r%p?;yY(sKLRkNt!NJFg05kZ<*x8kc23K<7%PFR${GZ18vw
Nm>5{<=j*yg{~vn6Npk=I

literal 0
HcmV?d00001

diff --git a/src/script/components/app-scroll-button.js b/src/script/components/app-scroll-button.js
new file mode 100644
index 0000000..78247c1
--- /dev/null
+++ b/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);
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%;
+			}
 		}
 	}
 }