feat: Services pages

2021-01-05 21:55:45 +02:00 · 2021-01-05 21:55:45 +02:00 · d0fcc4392f
commit d0fcc4392f
parent 4f62f859f7
50 changed files with 820 additions and 375 deletions
--- a/src/about.html
+++ b/src/about.html
@ -1,43 +1,93 @@
 <!DOCTYPE html>
 <html>
-<head>
-	<title>Core Computing</title>
+	<head>
+		<title>Firma - Core Computing</title>
 		<meta charset="utf-8" />
 		<script src="./index.js"></script>
-</head>
-<body>
+	</head>
+	<body>
 		<app-header></app-header>
 		<div class="about_bg"></div>
 		<div class="about_content">
 			<p class="about_header">Ce facem</p>
 			<div class="about_col2 about_col2__center">
 				<div class="about_col2_col">
-				<p>Core Computing este o companie de IT înființată în 2020, care, până în prezent, a dezvoltat o echipa de specialiști cu o vastă experiență în domeniu. Prin tot ceea ce facem, ne asumăm rolul de a eficientiza munca partenerilor noștri prin dezvoltarea de soluții tehnice customizate după nevoile lor</p>
-<p>Suntem mereu la curent cu cele mai noi tehnologii și ne adaptăm fiecărui proiect, respectând cerințele specifice. Dăm dovadă de eficiență și răspundem cu promptitudine cererilor tuturor clienților noștri.</p>
+					<p>
+						Core Computing este o companie de IT înființată în 2020, care, până
+						în prezent, a dezvoltat o echipa de specialiști cu o vastă
+						experiență în domeniu. Prin tot ceea ce facem, ne asumăm rolul de a
+						eficientiza munca partenerilor noștri prin dezvoltarea de soluții
+						tehnice customizate după nevoile lor
+					</p>
+					<p>
+						Suntem mereu la curent cu cele mai noi tehnologii și ne adaptăm
+						fiecărui proiect, respectând cerințele specifice. Dăm dovadă de
+						eficiență și răspundem cu promptitudine cererilor tuturor clienților
+						noștri.
+					</p>
 				</div>
 				<div class="about_col2_col">
-				<p>Colaborăm cu companii mici, medii și mari, atât la nivel național cât și global. În munca noastră de dezvoltare software, ne place să facem lucrurile diferit. Nu folosim platforme predefinite sau șabloane standard. Realizăm, de la zero, codul brut pentru toate proiectele pe care le dezvoltăm. Astfel, obținem de fiecare dată rezultate unice, personalizate pentru fiecare client.</p>
-<p>Dăm dovadă de flexibilitate și ne adaptăm cu ușurință cerințelor, oferind soluții de dezvoltare menite să ajute la o mai bună organizare, dar și la creșterea afacerilor partenerilor noștri.</p>
+					<p>
+						Colaborăm cu companii mici, medii și mari, atât la nivel național
+						cât și global. În munca noastră de dezvoltare software, ne place să
+						facem lucrurile diferit. Nu folosim platforme predefinite sau
+						șabloane standard. Realizăm, de la zero, codul brut pentru toate
+						proiectele pe care le dezvoltăm. Astfel, obținem de fiecare dată
+						rezultate unice, personalizate pentru fiecare client.
+					</p>
+					<p>
+						Dăm dovadă de flexibilitate și ne adaptăm cu ușurință cerințelor,
+						oferind soluții de dezvoltare menite să ajute la o mai bună
+						organizare, dar și la creșterea afacerilor partenerilor noștri.
+					</p>
 				</div>
 			</div>
 			<p class="about_header">Centrul de date</p>
 			<div>
 				<div class="about_col2 about_col2__imgtext">
-				<p class="about_col2_text">Sistem Emerson SmartAisle Containment ce controleaza intregul ansamblu CRAC in vederea securizarii SLA-ului garantat pe temperatura. Procent de umiditate controlat si constant.</p>
+					<p class="about_col2_text">
+						Sistem Emerson SmartAisle Containment ce controleaza intregul
+						ansamblu CRAC in vederea securizarii SLA-ului garantat pe
+						temperatura. Procent de umiditate controlat si constant.
+					</p>
 					<img class="about_col2_img" src="../res/dc1.jpg" />
 				</div>
 				<div class="about_col2 about_col2__imgtext">
 					<img class="about_col2_img" src="../res/dc2.jpg" />
-				<p class="about_col2_text">Sistem de detectie incendiu format din detectori adresabili (fum si temperatura). Sistem VESDA de aspiratie pentru detectia timpurie a fumului in camere de colocare si camera tehnica. Sistem de stingere cu gaz inert (INERGEN). Acesta este un amestec de gaze naturale prezente in mod obisnuit in atmosfera - astfel, gazul inergen nu contribuie la fenomenul de incalzire globala si nu are impact asupra stratului de ozon.</p>
+					<p class="about_col2_text">
+						Sistem de detectie incendiu format din detectori adresabili (fum si
+						temperatura). Sistem VESDA de aspiratie pentru detectia timpurie a
+						fumului in camere de colocare si camera tehnica. Sistem de stingere
+						cu gaz inert (INERGEN). Acesta este un amestec de gaze naturale
+						prezente in mod obisnuit in atmosfera - astfel, gazul inergen nu
+						contribuie la fenomenul de incalzire globala si nu are impact asupra
+						stratului de ozon.
+					</p>
 				</div>
 				<div class="about_col2 about_col2__imgtext">
-				<p class="about_col2_text">Sistemul de control access biometric (scanare amprenta faciala, fingerprint, cod si card) asigura un nivel inalt de securitate. Sistem de monitorizare video(camere IP 3mp) cu circuit intern ce monitorizeaza interiorul si exteriorul, detectoare de miscare, indicatoare de usi deschise, senzori de inundatie, sisteme de acces cu cardul. In inspectiile de rutina, efectuate de agentii de securitate, sunt incluse toate punctele de intrare/iesire ale cladirii, precum si zonele interne securizate.</p>
+					<p class="about_col2_text">
+						Sistemul de control access biometric (scanare amprenta faciala,
+						fingerprint, cod si card) asigura un nivel inalt de securitate.
+						Sistem de monitorizare video(camere IP 3mp) cu circuit intern ce
+						monitorizeaza interiorul si exteriorul, detectoare de miscare,
+						indicatoare de usi deschise, senzori de inundatie, sisteme de acces
+						cu cardul. In inspectiile de rutina, efectuate de agentii de
+						securitate, sunt incluse toate punctele de intrare/iesire ale
+						cladirii, precum si zonele interne securizate.
+					</p>
 					<img class="about_col2_img" src="../res/dc3.jpg" />
 				</div>
 				<div class="about_col2 about_col2__imgtext">
 					<img class="about_col2_img" src="../res/dc4.jpg" />
-				<p class="about_col2_text">Protectie standard pentru fiecare rack: 16A, 32A, 63A, sau chiar mai mult, daca este necesar. Alimentarea cu energie de 380VAC, 230VAC, 48VDC. Fiecare rack beneficiaza de doua circuite separate de curent. Putere instalata de 1.25 MW. UPS si generatoare diesel pentru backup. </p>
+					<p class="about_col2_text">
+						Protectie standard pentru fiecare rack: 16A, 32A, 63A, sau chiar mai
+						mult, daca este necesar. Alimentarea cu energie de 380VAC, 230VAC,
+						48VDC. Fiecare rack beneficiaza de doua circuite separate de curent.
+						Putere instalata de 1.25 MW. UPS si generatoare diesel pentru
+						backup.
+					</p>
 				</div>
 			</div>
-</body>
-</head>
+		</div>
+	</body>
+</html>
--- a/src/contact.html
+++ b/src/contact.html
@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html>
-<head>
+	<head>
 		<title>Core Computing</title>
 		<meta charset="utf-8" />
 		<script src="./index.js"></script>
-</head>
-<body>
+	</head>
+	<body>
 		<app-header />
-</body>
-</head>
+	</body>
+</html>
--- a/src/index.html
+++ b/src/index.html
@ -1,25 +1,36 @@
 <!DOCTYPE html>
 <html>
-<head>
+	<head>
 		<title>Core Computing</title>
 		<meta charset="utf-8" />
 		<script src="./index.js"></script>
-</head>
-<body>
+	</head>
+	<body>
 		<app-header></app-header>
 		<div class="index_bg"></div>
 		<div class="index_content">
 			<div class="index_content_box">
 				<p class="index_content_slogan">Mută-te în Cloud!</p>
-			<p class="index_content_description">Core Computing îți oferă toate serviciile necesare pentru realizarea unei infrastructurii cloud-native.</p>
+				<p class="index_content_description">
+					Core Computing îți oferă toate serviciile necesare pentru realizarea
+					unei infrastructurii cloud-native.
+				</p>
 			</div>
 			<div class="index_content_box">
 				<div class="index_content_signupForm">
 					<p class="index_content_signupForm_title">Începe astăzi!</p>
-				<input id="su_email" type="email" class="index_content_signupForm_field" placeholder="Email" />
-				<app-button onclick="alert('Sign up using: ' + document.getElementById('su_email').value)" data-text="Crează un cont"></app-button>
+					<input
+						id="su_email"
+						type="email"
+						class="index_content_signupForm_field"
+						placeholder="Email"
+					/>
+					<app-button
+						onclick="alert('Sign up using: ' + document.getElementById('su_email').value)"
+						data-text="Crează un cont"
+					></app-button>
 				</div>
 			</div>
 		</div>
-</body>
-</head>
+	</body>
+</html>
--- a/src/prices.html
+++ b/src/prices.html
@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html>
-<head>
+	<head>
 		<title>Core Computing</title>
 		<meta charset="utf-8" />
 		<script src="./index.js"></script>
-</head>
-<body>
+	</head>
+	<body>
 		<app-header />
-</body>
-</head>
+	</body>
+</html>
--- a/src/res/h_dedicated.png
+++ b/src/res/h_dedicated.png
--- a/src/res/h_domain.png
+++ b/src/res/h_domain.png
--- a/src/res/h_k8.png
+++ b/src/res/h_k8.png
--- a/src/res/h_saas.png
+++ b/src/res/h_saas.png
--- a/src/res/h_vps.png
+++ b/src/res/h_vps.png
--- a/src/res/menu_dedicated.png
+++ b/src/res/menu_dedicated.png
--- a/src/res/menu_domain.png
+++ b/src/res/menu_domain.png
--- a/src/res/menu_k8.png
+++ b/src/res/menu_k8.png
--- a/src/res/menu_saas.png
+++ b/src/res/menu_saas.png
--- a/src/res/menu_vps.png
+++ b/src/res/menu_vps.png
--- a/src/res/services/dedicated1.jpg
+++ b/src/res/services/dedicated1.jpg
--- a/src/res/services/dedicated2.jpg
+++ b/src/res/services/dedicated2.jpg
--- a/src/res/services/dedicated3.jpg
+++ b/src/res/services/dedicated3.jpg
--- a/src/res/services/domain1.png
+++ b/src/res/services/domain1.png
--- a/src/res/services/domain2.png
+++ b/src/res/services/domain2.png
--- a/src/res/services/domain3.png
+++ b/src/res/services/domain3.png
--- a/src/res/services/k81.jpg
+++ b/src/res/services/k81.jpg
--- a/src/res/services/k82.png
+++ b/src/res/services/k82.png
--- a/src/res/services/k83.png
+++ b/src/res/services/k83.png
--- a/src/res/services/saas1.jpg
+++ b/src/res/services/saas1.jpg
--- a/src/res/services/saas2.png
+++ b/src/res/services/saas2.png
--- a/src/res/services/saas3.jpg
+++ b/src/res/services/saas3.jpg
--- a/src/res/services/vps1.png
+++ b/src/res/services/vps1.png
--- a/src/res/services/vps2.png
+++ b/src/res/services/vps2.png
--- a/src/res/services/vps3.jpg
+++ b/src/res/services/vps3.jpg
--- a/src/res/services_header_bg.png
+++ b/src/res/services_header_bg.png
--- a/src/script/components/app-button.js
+++ b/src/script/components/app-button.js
@ -1,27 +1,26 @@
 import styles from '!raw-loader!sass-loader!./styles/app-button.scss';

 class AppButton extends HTMLElement {
-	constructor () {
+	constructor() {
 		super();
+	}

-		const root = this.attachShadow({mode: 'open'});
+	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';
-		this.button = button
+		button.className = 'button';
+		button.innerText = this.dataset.text;
+
 		root.appendChild(button);
 	}

-	connectedCallback() {
-		this.button.innerText = this.dataset.text;
-	}
-
 	static get observedAttributes() {
-		return ['data-text', 'onclick'];
+		return ['data-text'];
 	}
 }

--- a/src/script/components/app-header.js
+++ b/src/script/components/app-header.js
@ -1,12 +1,12 @@
 import styles from '!raw-loader!sass-loader!./styles/app-header.scss';

 class AppHeader extends HTMLElement {
-	constructor(){
+	constructor() {
 		super();

-		const root = this.attachShadow({mode: 'open'});
+		const root = this.attachShadow({ mode: 'open' });

-		const style =document.createElement('style');
+		const style = document.createElement('style');
 		style.textContent = styles;
 		root.appendChild(style);

@ -24,28 +24,28 @@ class AppHeader extends HTMLElement {

 		this.getMenuItems().forEach(item => {
 			const menuItem = document.createElement('div');
-			menuItem.className='header_item';
-			menuItem.innerText=item.name;
-			menuItem.onclick=() => {
+			menuItem.className = 'header_item';
+			menuItem.innerText = item.name;
+			menuItem.onclick = () => {
 				window.location.href = item.to;
 			};

-			if(window.location.pathname == item.to){
+			if (window.location.pathname.includes(item.to)) {
 				menuItem.classList.add('header_item_active');
 			}

 			div.appendChild(menuItem);
-		})
+		});

 		root.appendChild(div);
 	}

 	getMenuItems() {
 		return [
-		{name:'Firma', to: '/about'},
-		{name: 'Servicii', to: '/services'},
-		{name: 'Prețuri', to: '/prices'},
-		{name: 'Contact', to: '/contact'}
+			{ name: 'Firma', to: '/about' },
+			{ name: 'Servicii', to: '/services/' },
+			{ name: 'Prețuri', to: '/prices' },
+			{ name: 'Contact', to: '/contact' }
 		];
 	}
 }
--- a/src/script/components/app-service-header.js
+++ b/src/script/components/app-service-header.js
@ -0,0 +1,47 @@
+import styles from '!raw-loader!sass-loader!./styles/app-service-header.scss';
+
+class AppServieHeader extends HTMLElement {
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+		const root = this.attachShadow({ mode: 'open' });
+
+		const style = document.createElement('style');
+		style.textContent = styles;
+		root.appendChild(style);
+
+		const div = document.createElement('div');
+		div.className = 'header';
+
+		const info = document.createElement('div');
+		info.className = 'header_info';
+
+		const title = document.createElement('p');
+		title.className = 'header_info_title';
+		title.innerText = this.dataset.title;
+		info.appendChild(title);
+
+		const icon = document.createElement('img');
+		icon.className = 'header_info_icon';
+		icon.src = this.dataset.icon;
+		icon.alt = 'icon';
+		info.appendChild(icon);
+
+		const description = document.createElement('p');
+		description.className = 'header_description';
+		description.innerText = this.dataset.description;
+		div.appendChild(description);
+
+		div.appendChild(info);
+
+		root.appendChild(div);
+	}
+
+	static get observedAttributes() {
+		return ['data-title', 'data-icon', 'data-description'];
+	}
+}
+
+customElements.define('app-service-header', AppServieHeader);
--- a/src/script/components/app-service-menu.js
+++ b/src/script/components/app-service-menu.js
@ -0,0 +1,63 @@
+import styles from '!raw-loader!sass-loader!./styles/app-service-menu.scss';
+
+class AppServiceMenu extends HTMLElement {
+	constructor() {
+		super();
+
+		const root = this.attachShadow({ mode: 'open' });
+
+		const style = document.createElement('style');
+		style.textContent = styles;
+		root.appendChild(style);
+
+		const div = document.createElement('div');
+		div.className = 'menu';
+
+		this.getMenuItems().forEach(item => {
+			const menuItem = document.createElement('div');
+			menuItem.className = 'menu_item';
+			menuItem.onclick = () => {
+				window.location.href = item.to;
+			};
+
+			const img = document.createElement('img');
+			img.className = 'menu_item_image';
+			img.src = item.img;
+			img.alt = item.name;
+			menuItem.appendChild(img);
+
+			const text = document.createElement('span');
+			text.className = 'menu_item_text';
+			text.innerText = item.name;
+			menuItem.appendChild(text);
+
+			div.appendChild(menuItem);
+		});
+
+		root.appendChild(div);
+	}
+
+	getMenuItems() {
+		return [
+			{
+				name: 'Servere virtuale',
+				to: '/services/vps',
+				img: '/res/menu_vps.png'
+			},
+			{
+				name: 'Servere dedicate',
+				to: '/services/dedicated',
+				img: '/res/menu_dedicated.png'
+			},
+			{ name: 'Kubernetes', to: '/services/k8', img: '/res/menu_k8.png' },
+			{
+				name: 'Software as a Service',
+				to: '/services/saas',
+				img: '/res/menu_saas.png'
+			},
+			{ name: 'Domenii', to: '/services/domain', img: '/res/menu_domain.png' }
+		];
+	}
+}
+
+customElements.define('app-service-menu', AppServiceMenu);
--- a/src/script/components/styles/app-button.scss
+++ b/src/script/components/styles/app-button.scss
@ -1,5 +1,5 @@
 .button {
-	background-color: #0072BC;
+	background-color: #0072bc;
 	color: #ffffff;
 	padding: 15px 45px;
 	font-size: 24px;
--- a/src/script/components/styles/app-header.scss
+++ b/src/script/components/styles/app-header.scss
@ -1,4 +1,4 @@
-.header{
+.header {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
@ -26,7 +26,7 @@
 		line-height: 35px;
 		padding: 0 30px;
 		text-align: center;
-		color: #0072BC;
+		color: #0072bc;
 		cursor: pointer;
 		height: 100%;
 		display: flex;
@ -35,11 +35,11 @@
 		padding-top: 5px;

 		&:hover {
-			background-color: #0072BC10;
+			background-color: #0072bc10;
 		}

 		&_active {
-			border-bottom: 5px solid #0072BC;
+			border-bottom: 5px solid #0072bc;
 		}
 	}
 }
--- a/src/script/components/styles/app-service-header.scss
+++ b/src/script/components/styles/app-service-header.scss
@ -0,0 +1,37 @@
+.header {
+	background: url('../../../res/services_header_bg.png') center center;
+	background-repeat: no-repeat;
+	background-size: cover;
+	display: flex;
+	justify-content: space-between;
+	padding: 20px 40px;
+	margin-bottom: 60px;
+
+	&_info {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		align-items: flex-end;
+		margin-left: 50px;
+
+		&_title {
+			font-size: 36px;
+			line-height: 48px;
+			margin-top: 0;
+			margin-bottom: 40px;
+			color: #ffffff;
+			width: 250px;
+			text-align: right;
+		}
+
+		&_icon {
+			width: 150px;
+		}
+	}
+
+	&_description {
+		font-size: 28px;
+		line-height: 37px;
+		color: #ffffff;
+	}
+}
--- a/src/script/components/styles/app-service-menu.scss
+++ b/src/script/components/styles/app-service-menu.scss
@ -0,0 +1,35 @@
+.menu {
+	position: fixed;
+	left: 0;
+	top: 60px;
+	bottom: 0;
+	width: 400px;
+	background-color: #ffffff;
+	padding: 20px 0;
+	box-shadow: 3px 0 3px #00000010;
+	z-index: 999;
+
+	&_item {
+		padding: 20px 10px;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: flex-start;
+		cursor: pointer;
+
+		&:hover {
+			background-color: #0072bc10;
+		}
+
+		&_image {
+			width: 50px;
+			margin-right: 20px;
+		}
+
+		&_text {
+			font-size: 26px;
+			line-height: 35px;
+			color: #0072bc;
+		}
+	}
+}
--- a/src/script/index.js
+++ b/src/script/index.js
@ -1,10 +1,13 @@
-import "@webcomponents/webcomponentsjs";
+import '@webcomponents/webcomponentsjs';

 // load styles
 import '../style/main.scss';
 import '../style/index.scss';
 import '../style/about.scss';
+import '../style/services.scss';

 // load components
 import './components/app-header';
 import './components/app-button';
+import './components/app-service-menu';
+import './components/app-service-header';
--- a/src/services.html
+++ b/src/services.html
@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<title>Core Computing</title>
-	<meta charset="utf-8" />
-	<script src="./index.js"></script>
-</head>
-<body>
-	<app-header />
-</body>
-</head>
--- a/src/services/dedicated.html
+++ b/src/services/dedicated.html
@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Servere dedicate - Servicii - Core Computing</title>
+		<meta charset="utf-8" />
+		<script src="../index.js"></script>
+	</head>
+	<body>
+		<app-header></app-header>
+		<app-service-menu></app-service-menu>
+		<div class="services_content">
+			<app-service-header
+				data-title="Servere dedicate"
+				data-icon="/res/h_dedicated.png"
+				data-description="Serverul dedicat reprezintă soluţia optimă pentru afacerile mici şi mijlocii, cum ar fi un magazin online sau un reseller cu un număr mediu sau mare de clienţi. Soluţiile noastre pentru servere dedicate cuprind atât configuraţii standard, cât şi configuraţii preferenţiale. Performanţa şi stabilitatea aplicaţiilor sunt asigurate de configuraţiile hardware premium."
+			></app-service-header>
+			<div class="services_images">
+				<img
+					class="services_images_image"
+					src="../res/services/dedicated1.jpg"
+					alt="dedicated"
+				/>
+				<img
+					class="services_images_image"
+					src="../res/services/dedicated2.jpg"
+					alt="dedicated"
+				/>
+				<img
+					class="services_images_image"
+					src="../res/services/dedicated3.jpg"
+					alt="dedicated"
+				/>
+			</div>
+		</div>
+	</body>
+</html>
--- a/src/services/domain.html
+++ b/src/services/domain.html
@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Domenii - Servicii - Core Computing</title>
+		<meta charset="utf-8" />
+		<script src="../index.js"></script>
+	</head>
+	<body>
+		<app-header></app-header>
+		<app-service-menu></app-service-menu>
+		<div class="services_content">
+			<app-service-header
+				data-title="Domenii"
+				data-icon="/res/h_domain.png"
+				data-description=".ro, .eu sau .com? .tech, .to, .fit sau .guide? La noi ai toate șansele să găsești un nume de domeniu internet disponibil și potrivit pentru proiectul tău."
+			></app-service-header>
+			<div class="services_images">
+				<img
+					class="services_images_image"
+					src="../res/services/domain1.png"
+					alt="domain"
+				/>
+				<img
+					class="services_images_image"
+					src="../res/services/domain2.png"
+					alt="domain"
+				/>
+				<img
+					class="services_images_image"
+					src="../res/services/domain3.png"
+					alt="domain"
+				/>
+			</div>
+		</div>
+	</body>
+</html>
--- a/src/services/index.html
+++ b/src/services/index.html
@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Services - redirect</title>
+	</head>
+	<body>
+		<script>
+			window.location.href = '/services/vps';
+		</script>
+	</body>
+</html>
--- a/src/services/k8.html
+++ b/src/services/k8.html
@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Kubernetes - Servicii - Core Computing</title>
+		<meta charset="utf-8" />
+		<script src="../index.js"></script>
+	</head>
+	<body>
+		<app-header></app-header>
+		<app-service-menu></app-service-menu>
+		<div class="services_content">
+			<app-service-header
+				data-title="Kubernetes"
+				data-icon="/res/h_k8.png"
+				data-description="Kubernetes este o tehnologie de ultimă generație, recent lansată de Google și adoptată cu entuziasm de majoritatea platformelor mari de hosting (Amazon Web Services, Microsoft Azure și Google Computer Cloud). Fiind scalabil, în perioadele de trafic redus (cum ar fi noaptea), costurile sunt și ele optimizate, fără a compromite însă target-ul de 100% redundanță."
+			></app-service-header>
+			<div class="services_images">
+				<img
+					class="services_images_image"
+					src="../res/services/k81.jpg"
+					alt="kubernetes"
+				/>
+				<img
+					class="services_images_image"
+					src="../res/services/k82.png"
+					alt="kubernetes"
+				/>
+				<img
+					class="services_images_image"
+					src="../res/services/k83.png"
+					alt="kubernetes"
+				/>
+			</div>
+		</div>
+	</body>
+</html>
--- a/src/services/saas.html
+++ b/src/services/saas.html
@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>SaaS - Servicii - Core Computing</title>
+		<meta charset="utf-8" />
+		<script src="../index.js"></script>
+	</head>
+	<body>
+		<app-header></app-header>
+		<app-service-menu></app-service-menu>
+		<div class="services_content">
+			<app-service-header
+				data-title="SaaS"
+				data-icon="/res/h_saas.png"
+				data-description="Software-ul ca serviciu este un model de furnizare a software-ului bazat pe cloud, în care noi dezvoltăm și întreținem software-ul pentru aplicații cloud, oferăm actualizări de software automate și punem software-ul la dispoziția clienților cu plata în funcție de utilizare. Noi gestionăm toate componentele hardware, middleware, software-ul pentru aplicațiile și securitatea. Astfel, clienții SaaS pot reduce dramatic costurile; pot implementa, scala și moderniza soluțiile de afaceri mai repede decât dacă ar întreține sisteme și software local; și pot prezice costul total al proprietății cu o precizie mai mare."
+			></app-service-header>
+			<div class="services_images">
+				<img
+					class="services_images_image"
+					src="../res/services/saas1.jpg"
+					alt="saas"
+				/>
+				<img
+					class="services_images_image"
+					src="../res/services/saas2.png"
+					alt="saas"
+				/>
+				<img
+					class="services_images_image"
+					src="../res/services/saas3.jpg"
+					alt="saas"
+				/>
+			</div>
+		</div>
+	</body>
+</html>
--- a/src/services/vps.html
+++ b/src/services/vps.html
@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>VPS - Servicii - Core Computing</title>
+		<meta charset="utf-8" />
+		<script src="../index.js"></script>
+	</head>
+	<body>
+		<app-header></app-header>
+		<app-service-menu></app-service-menu>
+		<div class="services_content">
+			<app-service-header
+				data-title="Servere virtuale"
+				data-icon="/res/h_vps.png"
+				data-description="VMware este cel mai raspandit mediu de virtualizare. Fiind sustinut de marii integratori de tehnologie, ca IBM si HP, VMware s-a lansat ca cea mai stabila solutie pentru sistemele Linux. Serverele virtuale sunt instalate pe o infrastructura de tip SAN (storage area network) si sunt echipate cu discuri SSD Enterprise. Astfel, la acest tip de serviciu garantam un SLA de 99,985%."
+			></app-service-header>
+			<div class="services_images">
+				<img
+					class="services_images_image"
+					src="../res/services/vps1.png"
+					alt="vps"
+				/>
+				<img
+					class="services_images_image"
+					src="../res/services/vps2.png"
+					alt="vps"
+				/>
+				<img
+					class="services_images_image"
+					src="../res/services/vps3.jpg"
+					alt="vps"
+				/>
+			</div>
+		</div>
+	</body>
+</html>
--- a/src/style/about.scss
+++ b/src/style/about.scss
@ -38,7 +38,7 @@
 		&__imgtext {
 			align-items: center;

-			&:nth-child(2n){
+			&:nth-child(2n) {
 				justify-content: flex-end;
 			}
 		}
--- a/src/style/index.scss
+++ b/src/style/index.scss
@ -39,7 +39,7 @@
 			font-weight: bold;
 			line-height: 48px;
 			color: #ffffff;
-			text-shadow: 0 0 10px #000000b2
+			text-shadow: 0 0 10px #000000b2;
 		}

 		&_signupForm {
@ -54,7 +54,7 @@
 				line-height: 48px;
 				text-align: center;
 				margin-bottom: 40px;
-				color: #0072BC;
+				color: #0072bc;
 			}

 			&_field {
--- a/src/style/services.scss
+++ b/src/style/services.scss
@ -0,0 +1,20 @@
+.services {
+	&_content {
+		margin-top: 60px;
+		margin-left: 400px;
+	}
+
+	&_images {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		padding: 0 30px;
+
+		&_image {
+			width: 30%;
+			height: 400px;
+			object-fit: contain;
+			margin-bottom: 20px;
+		}
+	}
+}