feat: Made mobile version for all pages
This commit is contained in:
parent
40cb9a3d78
commit
358ae2c115
@ -3,6 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<title>Firma - Core Computing</title>
|
<title>Firma - Core Computing</title>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<script src="./index.js"></script>
|
<script src="./index.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
@ -3,6 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<title>Contact - Core Computing</title>
|
<title>Contact - Core Computing</title>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<script src="./index.js"></script>
|
<script src="./index.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -29,7 +30,7 @@
|
|||||||
></app-button>
|
></app-button>
|
||||||
</div>
|
</div>
|
||||||
<div class="contact_info">
|
<div class="contact_info">
|
||||||
<div>
|
<div class="contact_info_box">
|
||||||
<p class="contact_info_name">SC Core Computing SRL</p>
|
<p class="contact_info_name">SC Core Computing SRL</p>
|
||||||
<p class="contact_info_details">
|
<p class="contact_info_details">
|
||||||
Adresa: Oradea, Str. Universității 15
|
Adresa: Oradea, Str. Universității 15
|
||||||
@ -41,16 +42,18 @@
|
|||||||
CUI: 123456
|
CUI: 123456
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<iframe
|
<div class="contact_info_map">
|
||||||
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"
|
<iframe
|
||||||
width="50%"
|
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"
|
||||||
height="250"
|
width="100%"
|
||||||
frameborder="0"
|
height="250"
|
||||||
style="border: 0"
|
frameborder="0"
|
||||||
allowfullscreen=""
|
style="border: 0"
|
||||||
aria-hidden="false"
|
allowfullscreen=""
|
||||||
tabindex="0"
|
aria-hidden="false"
|
||||||
></iframe>
|
tabindex="0"
|
||||||
|
></iframe>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
@ -3,6 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<title>Core Computing</title>
|
<title>Core Computing</title>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<script src="./index.js"></script>
|
<script src="./index.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
@ -3,6 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<title>Prețuri - Core Computing</title>
|
<title>Prețuri - Core Computing</title>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<script src="./index.js"></script>
|
<script src="./index.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
Binary file not shown.
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 25 KiB |
BIN
src/res/hamburger_dark.png
Normal file
BIN
src/res/hamburger_dark.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 25 KiB |
@ -1,5 +1,7 @@
|
|||||||
import styles from '!raw-loader!sass-loader!./styles/app-header.scss';
|
import styles from '!raw-loader!sass-loader!./styles/app-header.scss';
|
||||||
|
|
||||||
|
const isMobile = () => window.innerWidth < 720;
|
||||||
|
|
||||||
class AppHeader extends HTMLElement {
|
class AppHeader extends HTMLElement {
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
@ -10,9 +12,28 @@ class AppHeader extends HTMLElement {
|
|||||||
style.textContent = styles;
|
style.textContent = styles;
|
||||||
root.appendChild(style);
|
root.appendChild(style);
|
||||||
|
|
||||||
|
const mobileHeader = document.createElement('div');
|
||||||
|
mobileHeader.className = 'header_mobile';
|
||||||
|
|
||||||
|
const hamburger = document.createElement('div');
|
||||||
|
hamburger.className = 'header_mobile_hamburger';
|
||||||
|
mobileHeader.appendChild(hamburger);
|
||||||
|
|
||||||
|
const mobileLogo = document.createElement('img');
|
||||||
|
mobileLogo.src = '/res/logo.png';
|
||||||
|
mobileLogo.alt = 'logo';
|
||||||
|
mobileLogo.className = 'header_mobile_icon';
|
||||||
|
mobileHeader.appendChild(mobileLogo);
|
||||||
|
|
||||||
|
root.appendChild(mobileHeader);
|
||||||
|
|
||||||
const div = document.createElement('div');
|
const div = document.createElement('div');
|
||||||
div.className = 'header';
|
div.className = 'header';
|
||||||
|
|
||||||
|
const mobileClose = document.createElement('div');
|
||||||
|
mobileClose.className = 'header_mobile_close';
|
||||||
|
div.appendChild(mobileClose);
|
||||||
|
|
||||||
const logo = document.createElement('img');
|
const logo = document.createElement('img');
|
||||||
logo.src = '/res/logo.png';
|
logo.src = '/res/logo.png';
|
||||||
logo.alt = 'logo';
|
logo.alt = 'logo';
|
||||||
@ -23,10 +44,26 @@ class AppHeader extends HTMLElement {
|
|||||||
div.appendChild(logo);
|
div.appendChild(logo);
|
||||||
|
|
||||||
this.getMenuItems().forEach(item => {
|
this.getMenuItems().forEach(item => {
|
||||||
|
let submenu;
|
||||||
|
if (item.to == '/services/') {
|
||||||
|
submenu = document.createElement('div');
|
||||||
|
submenu.className = 'header_mobile_submenu';
|
||||||
|
|
||||||
|
const serviceMenu = document.createElement('app-service-menu');
|
||||||
|
serviceMenu.dataset.embedded = true;
|
||||||
|
submenu.appendChild(serviceMenu);
|
||||||
|
}
|
||||||
|
|
||||||
const menuItem = document.createElement('div');
|
const menuItem = document.createElement('div');
|
||||||
menuItem.className = 'header_item';
|
menuItem.className = 'header_item';
|
||||||
menuItem.innerText = item.name;
|
menuItem.innerText = item.name;
|
||||||
menuItem.onclick = () => {
|
menuItem.onclick = () => {
|
||||||
|
console.log('wut', isMobile());
|
||||||
|
if (item.to == '/services/' && isMobile()) {
|
||||||
|
submenu.classList.toggle('header_mobile_submenu_open');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
window.location.href = item.to;
|
window.location.href = item.to;
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -35,9 +72,20 @@ class AppHeader extends HTMLElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
div.appendChild(menuItem);
|
div.appendChild(menuItem);
|
||||||
|
|
||||||
|
if (item.to == '/services/') {
|
||||||
|
div.appendChild(submenu);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
root.appendChild(div);
|
root.appendChild(div);
|
||||||
|
|
||||||
|
hamburger.onclick = () => {
|
||||||
|
div.classList.add('header_open');
|
||||||
|
};
|
||||||
|
mobileClose.onclick = () => {
|
||||||
|
div.classList.remove('header_open');
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
getMenuItems() {
|
getMenuItems() {
|
||||||
|
@ -1,57 +1,119 @@
|
|||||||
import styles from '!raw-loader!sass-loader!./styles/app-price-table.scss';
|
import styles from '!raw-loader!sass-loader!./styles/app-price-table.scss';
|
||||||
|
|
||||||
|
const isMobile = () => window.innerWidth < 720;
|
||||||
|
|
||||||
class AppPriceTable extends HTMLElement {
|
class AppPriceTable extends HTMLElement {
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
|
|
||||||
|
this.isMobile = isMobile();
|
||||||
|
|
||||||
|
window.addEventListener('resize', this.resized.bind(this));
|
||||||
}
|
}
|
||||||
|
|
||||||
connectedCallback() {
|
connectedCallback() {
|
||||||
|
this.root = this.attachShadow({ mode: 'open' });
|
||||||
|
|
||||||
|
const style = document.createElement('style');
|
||||||
|
style.textContent = styles;
|
||||||
|
this.root.appendChild(style);
|
||||||
|
|
||||||
fetch(this.dataset.content)
|
fetch(this.dataset.content)
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
.then(data => {
|
.then(data => {
|
||||||
const root = this.attachShadow({ mode: 'open' });
|
this.data = data;
|
||||||
|
this.renderTable();
|
||||||
const style = document.createElement('style');
|
|
||||||
style.textContent = styles;
|
|
||||||
root.appendChild(style);
|
|
||||||
|
|
||||||
const table = document.createElement('table');
|
|
||||||
table.className = 'table';
|
|
||||||
table.cellSpacing = 0;
|
|
||||||
|
|
||||||
const thead = document.createElement('thead');
|
|
||||||
|
|
||||||
const theadRow = document.createElement('tr');
|
|
||||||
|
|
||||||
data.columns.forEach(column => {
|
|
||||||
const col = document.createElement('th');
|
|
||||||
col.innerText = column;
|
|
||||||
theadRow.appendChild(col);
|
|
||||||
});
|
|
||||||
|
|
||||||
thead.appendChild(theadRow);
|
|
||||||
table.appendChild(thead);
|
|
||||||
|
|
||||||
const tbody = document.createElement('tbody');
|
|
||||||
|
|
||||||
data.data.forEach(item => {
|
|
||||||
const row = document.createElement('tr');
|
|
||||||
|
|
||||||
item.forEach((field, i) => {
|
|
||||||
const cell = document.createElement('td');
|
|
||||||
cell.innerText = field + ' ' + data.units[i];
|
|
||||||
row.appendChild(cell);
|
|
||||||
});
|
|
||||||
|
|
||||||
tbody.appendChild(row);
|
|
||||||
});
|
|
||||||
|
|
||||||
table.appendChild(tbody);
|
|
||||||
|
|
||||||
root.appendChild(table);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
renderTable() {
|
||||||
|
if (this.table) {
|
||||||
|
this.table.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.table = document.createElement('table');
|
||||||
|
this.table.className = 'table';
|
||||||
|
this.table.cellSpacing = 0;
|
||||||
|
|
||||||
|
const thead = document.createElement('thead');
|
||||||
|
|
||||||
|
const theadRow = document.createElement('tr');
|
||||||
|
|
||||||
|
if (this.isMobile) {
|
||||||
|
const detailsCol = document.createElement('th');
|
||||||
|
detailsCol.innerText = 'Detalii';
|
||||||
|
theadRow.appendChild(detailsCol);
|
||||||
|
|
||||||
|
const priceCol = document.createElement('th');
|
||||||
|
priceCol.innerText = this.data.columns[this.data.columns.length - 1];
|
||||||
|
theadRow.appendChild(priceCol);
|
||||||
|
} else {
|
||||||
|
this.data.columns.forEach(column => {
|
||||||
|
const col = document.createElement('th');
|
||||||
|
col.innerText = column;
|
||||||
|
theadRow.appendChild(col);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
thead.appendChild(theadRow);
|
||||||
|
this.table.appendChild(thead);
|
||||||
|
|
||||||
|
const tbody = document.createElement('tbody');
|
||||||
|
|
||||||
|
this.data.data.forEach(item => {
|
||||||
|
const row = document.createElement('tr');
|
||||||
|
|
||||||
|
if (this.isMobile) {
|
||||||
|
const detailsCell = document.createElement('td');
|
||||||
|
|
||||||
|
const detailsTable = document.createElement('table');
|
||||||
|
const detailsTableBody = document.createElement('tbody');
|
||||||
|
|
||||||
|
item.slice(0, -1).forEach((field, i) => {
|
||||||
|
const detailsRow = document.createElement('tr');
|
||||||
|
const nameCell = document.createElement('td');
|
||||||
|
const valueCell = document.createElement('td');
|
||||||
|
|
||||||
|
nameCell.innerText = this.data.columns[i] + ': ';
|
||||||
|
valueCell.innerText = field + ' ' + this.data.units[i];
|
||||||
|
|
||||||
|
detailsRow.appendChild(nameCell);
|
||||||
|
detailsRow.appendChild(valueCell);
|
||||||
|
|
||||||
|
detailsTableBody.appendChild(detailsRow);
|
||||||
|
});
|
||||||
|
|
||||||
|
detailsTable.appendChild(detailsTableBody);
|
||||||
|
detailsCell.appendChild(detailsTable);
|
||||||
|
row.appendChild(detailsCell);
|
||||||
|
|
||||||
|
const priceCell = document.createElement('td');
|
||||||
|
priceCell.innerText =
|
||||||
|
item[item.length - 1] + ' ' + this.data.units[item.length - 1];
|
||||||
|
row.appendChild(priceCell);
|
||||||
|
} else {
|
||||||
|
item.forEach((field, i) => {
|
||||||
|
const cell = document.createElement('td');
|
||||||
|
cell.innerText = field + ' ' + this.data.units[i];
|
||||||
|
row.appendChild(cell);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody.appendChild(row);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.table.appendChild(tbody);
|
||||||
|
|
||||||
|
this.root.appendChild(this.table);
|
||||||
|
}
|
||||||
|
|
||||||
|
resized() {
|
||||||
|
if (isMobile() != this.isMobile) {
|
||||||
|
this.isMobile = isMobile();
|
||||||
|
this.renderTable();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
static get observedAttributes() {
|
static get observedAttributes() {
|
||||||
return ['data-content'];
|
return ['data-content'];
|
||||||
}
|
}
|
||||||
|
@ -3,7 +3,9 @@ import styles from '!raw-loader!sass-loader!./styles/app-service-menu.scss';
|
|||||||
class AppServiceMenu extends HTMLElement {
|
class AppServiceMenu extends HTMLElement {
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback() {
|
||||||
const root = this.attachShadow({ mode: 'open' });
|
const root = this.attachShadow({ mode: 'open' });
|
||||||
|
|
||||||
const style = document.createElement('style');
|
const style = document.createElement('style');
|
||||||
@ -16,6 +18,9 @@ class AppServiceMenu extends HTMLElement {
|
|||||||
|
|
||||||
const div = document.createElement('div');
|
const div = document.createElement('div');
|
||||||
div.className = 'menu';
|
div.className = 'menu';
|
||||||
|
if (this.dataset.embedded) {
|
||||||
|
div.classList.add('menu_asChild');
|
||||||
|
}
|
||||||
|
|
||||||
const closeButton = document.createElement('div');
|
const closeButton = document.createElement('div');
|
||||||
closeButton.className = 'menu_closeMenu';
|
closeButton.className = 'menu_closeMenu';
|
||||||
@ -76,6 +81,10 @@ class AppServiceMenu extends HTMLElement {
|
|||||||
{ name: 'Domenii', to: '/services/domain', img: '/res/menu_domain.png' }
|
{ name: 'Domenii', to: '/services/domain', img: '/res/menu_domain.png' }
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static get observedAttributes() {
|
||||||
|
return ['data-embedded'];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
customElements.define('app-service-menu', AppServiceMenu);
|
customElements.define('app-service-menu', AppServiceMenu);
|
||||||
|
@ -1,3 +1,5 @@
|
|||||||
|
@import '../../../style/mixins.scss';
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
@ -13,10 +15,95 @@
|
|||||||
right: 0;
|
right: 0;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
|
|
||||||
|
@include mobile {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
padding: 20px 0;
|
||||||
|
height: 100vh;
|
||||||
|
box-shadow: none;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 0;
|
||||||
|
transition: width 0.3s ease-out;
|
||||||
|
|
||||||
|
&_open {
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&_mobile {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
@include mobile {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 0 20px;
|
||||||
|
height: 60px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
box-shadow: 0 5px 5px #00000010;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
|
&_hamburger {
|
||||||
|
display: block;
|
||||||
|
cursor: pointer;
|
||||||
|
background: url('../../../res/hamburger_dark.png') center center;
|
||||||
|
background-size: contain;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&_icon {
|
||||||
|
height: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&_close {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
@include mobile {
|
||||||
|
display: block;
|
||||||
|
cursor: pointer;
|
||||||
|
background: url('../../../res/back.png') center center;
|
||||||
|
background-size: contain;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&_submenu {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
@include mobile {
|
||||||
|
margin-left: 50px;
|
||||||
|
display: block;
|
||||||
|
height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: height 0.3s ease-out;
|
||||||
|
|
||||||
|
&_open {
|
||||||
|
height: 290px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&_icon {
|
&_icon {
|
||||||
height: 80%;
|
height: 80%;
|
||||||
margin-right: 30px;
|
margin-right: 30px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
@include mobile {
|
||||||
|
height: 80px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&_item {
|
&_item {
|
||||||
@ -34,12 +121,23 @@
|
|||||||
border-bottom: 5px solid transparent;
|
border-bottom: 5px solid transparent;
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
|
|
||||||
|
@include mobile {
|
||||||
|
height: 80px;
|
||||||
|
border-bottom: none;
|
||||||
|
border-left: 5px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: #0072bc10;
|
background-color: #0072bc10;
|
||||||
}
|
}
|
||||||
|
|
||||||
&_active {
|
&_active {
|
||||||
border-bottom: 5px solid #0072bc;
|
border-bottom: 5px solid #0072bc;
|
||||||
|
|
||||||
|
@include mobile {
|
||||||
|
border-bottom: none;
|
||||||
|
border-left: 5px solid #0072bc;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -9,7 +9,7 @@
|
|||||||
padding: 20px 40px;
|
padding: 20px 40px;
|
||||||
margin-bottom: 60px;
|
margin-bottom: 60px;
|
||||||
|
|
||||||
@include tablet {
|
@include tabletMobile {
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
@ -33,6 +33,10 @@
|
|||||||
|
|
||||||
&_icon {
|
&_icon {
|
||||||
width: 150px;
|
width: 150px;
|
||||||
|
|
||||||
|
@include mobile {
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -41,7 +45,7 @@
|
|||||||
line-height: 37px;
|
line-height: 37px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
|
|
||||||
@include tablet {
|
@include tabletMobile {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -49,7 +53,7 @@
|
|||||||
&_underDescription {
|
&_underDescription {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
@include tablet {
|
@include tabletMobile {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
line-height: 37px;
|
line-height: 37px;
|
||||||
|
@ -21,6 +21,21 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@include mobile {
|
||||||
|
display: none;
|
||||||
|
position: unset;
|
||||||
|
left: unset;
|
||||||
|
top: unset;
|
||||||
|
bottom: unset;
|
||||||
|
width: 100%;
|
||||||
|
box-shadow: unset;
|
||||||
|
z-index: unset;
|
||||||
|
|
||||||
|
&_asChild {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&_hamburger {
|
&_hamburger {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
@ -65,6 +80,12 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
|
|
||||||
|
@include mobile {
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: #0072bc10;
|
background-color: #0072bc10;
|
||||||
}
|
}
|
||||||
@ -72,6 +93,10 @@
|
|||||||
&_image {
|
&_image {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
|
|
||||||
|
@include mobile {
|
||||||
|
width: 30px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&_text {
|
&_text {
|
||||||
|
@ -3,6 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<title>Servere dedicate - Servicii - Core Computing</title>
|
<title>Servere dedicate - Servicii - Core Computing</title>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<script src="../index.js"></script>
|
<script src="../index.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
@ -3,6 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<title>Domenii - Servicii - Core Computing</title>
|
<title>Domenii - Servicii - Core Computing</title>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<script src="../index.js"></script>
|
<script src="../index.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
@ -3,6 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<title>Kubernetes - Servicii - Core Computing</title>
|
<title>Kubernetes - Servicii - Core Computing</title>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<script src="../index.js"></script>
|
<script src="../index.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
@ -3,6 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<title>SaaS - Servicii - Core Computing</title>
|
<title>SaaS - Servicii - Core Computing</title>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<script src="../index.js"></script>
|
<script src="../index.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
@ -3,6 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<title>VPS - Servicii - Core Computing</title>
|
<title>VPS - Servicii - Core Computing</title>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<script src="../index.js"></script>
|
<script src="../index.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
@ -19,7 +19,7 @@
|
|||||||
width: 60%;
|
width: 60%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
|
||||||
@include tablet {
|
@include tabletMobile {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
@ -38,7 +38,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
|
||||||
@include tablet {
|
@include tabletMobile {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -59,7 +59,7 @@
|
|||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
|
|
||||||
@include tablet {
|
@include tabletMobile {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -71,7 +71,7 @@
|
|||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
|
|
||||||
@include tablet {
|
@include tabletMobile {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
order: 1;
|
order: 1;
|
||||||
}
|
}
|
||||||
@ -81,7 +81,7 @@
|
|||||||
width: 300px;
|
width: 300px;
|
||||||
margin: 0 10px;
|
margin: 0 10px;
|
||||||
|
|
||||||
@include tablet {
|
@include tabletMobile {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
order: 2;
|
order: 2;
|
||||||
|
@ -78,6 +78,25 @@
|
|||||||
margin-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@include mobile {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
&_box {
|
||||||
|
@include mobile {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&_map {
|
||||||
|
width: 50%;
|
||||||
|
|
||||||
|
@include mobile {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&_name {
|
&_name {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
|
@ -21,7 +21,7 @@
|
|||||||
padding: 0 70px;
|
padding: 0 70px;
|
||||||
margin-top: 60px;
|
margin-top: 60px;
|
||||||
|
|
||||||
@include tablet {
|
@include tabletMobile {
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -30,7 +30,7 @@
|
|||||||
&_box {
|
&_box {
|
||||||
width: 450px;
|
width: 450px;
|
||||||
|
|
||||||
@include tablet {
|
@include tabletMobile {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -38,10 +38,10 @@
|
|||||||
&_scroll {
|
&_scroll {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
@include tablet {
|
@include tabletMobile {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 50px;
|
margin-top: 20px;
|
||||||
margin-bottom: 50vh;
|
margin-bottom: 50vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -55,6 +55,10 @@
|
|||||||
max-width: 350px;
|
max-width: 350px;
|
||||||
margin-top: 60px;
|
margin-top: 60px;
|
||||||
margin-bottom: 80px;
|
margin-bottom: 80px;
|
||||||
|
|
||||||
|
@include mobile {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&_description {
|
&_description {
|
||||||
@ -65,10 +69,11 @@
|
|||||||
text-shadow: 0 0 10px #000000b2;
|
text-shadow: 0 0 10px #000000b2;
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
|
|
||||||
@include tablet {
|
@include tabletMobile {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
float: right;
|
float: right;
|
||||||
clear: right;
|
clear: right;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -80,11 +85,15 @@
|
|||||||
width: 450px;
|
width: 450px;
|
||||||
margin-left: 40px;
|
margin-left: 40px;
|
||||||
|
|
||||||
@include tablet {
|
@include tabletMobile {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
margin-bottom: 30vh;
|
margin-bottom: 30vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@include mobile {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
&_title {
|
&_title {
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
line-height: 48px;
|
line-height: 48px;
|
||||||
|
@ -5,7 +5,7 @@
|
|||||||
margin-top: 60px;
|
margin-top: 60px;
|
||||||
margin-left: 400px;
|
margin-left: 400px;
|
||||||
|
|
||||||
@include tablet {
|
@include tabletMobile {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user