FINALLY working start section
This commit is contained in:
parent
24b72dac63
commit
c916328baf
5
css/language-picker.css
Normal file
5
css/language-picker.css
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
.language-picker-container {
|
||||||
|
position: fixed;
|
||||||
|
right: 0px;
|
||||||
|
top: 30vh;
|
||||||
|
}
|
@ -8,7 +8,8 @@
|
|||||||
}
|
}
|
||||||
.services-section-title {
|
.services-section-title {
|
||||||
font-family: Poppins;
|
font-family: Poppins;
|
||||||
font-size: 40;
|
font-size: clamp(21px, 3vw, 3vw);
|
||||||
|
font-weight: bold;
|
||||||
color: #111029;
|
color: #111029;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
@ -12,30 +12,31 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
width: clamp(360px, 60vw, 650px);
|
width: 100%
|
||||||
}
|
}
|
||||||
.start-section-left-column-title-nocolor {
|
.start-section-left-column-title-nocolor {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
font-family: Poppins;
|
font-family: Poppins;
|
||||||
font-size: clamp(30px, 4.5vw, 64px);
|
font-size: 8vw;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
.start-section-left-column-title-colored {
|
.start-section-left-column-title-colored {
|
||||||
|
white-space: nowrap;
|
||||||
font-family: Poppins;
|
font-family: Poppins;
|
||||||
font-size: clamp(30px, 4.5vw, 64px);
|
font-size: 8vw;
|
||||||
color: #FF6800;
|
color: #FF6800;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
.start-section-left-column-description {
|
.start-section-left-column-description {
|
||||||
font-family: Poppins;
|
font-family: Poppins;
|
||||||
font-size: clamp(12px, 1.5vw, 18px);
|
font-size: 2.8vw;
|
||||||
line-height: clamp(24px, 3vw, 36px);
|
line-height: 5vw;
|
||||||
|
|
||||||
color: #6B6B6B;
|
color: #6B6B6B;
|
||||||
|
|
||||||
width: clamp(200px, 30vw, 420px);
|
width: 80%;
|
||||||
margin: 24px 0px 30px 0px;
|
margin: 24px 0px 30px 0px;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
@ -62,13 +63,12 @@
|
|||||||
transition-duration: 0.4s;
|
transition-duration: 0.4s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.start-section-right-column {
|
.start-section-right-column {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: start;
|
justify-content: start;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 550px;
|
height: clamp(500px, 115vw, 700px);
|
||||||
}
|
}
|
||||||
.start-section-right-column-canvas {
|
.start-section-right-column-canvas {
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -77,9 +77,9 @@
|
|||||||
}
|
}
|
||||||
.start-section-right-column-art-top-left-pill {
|
.start-section-right-column-art-top-left-pill {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 200px;
|
width: clamp(120px, 37.5vw, 220px);
|
||||||
height: 65px;
|
height: clamp(50px, 15vw, 80px);
|
||||||
left: 40px;
|
right: clamp(120px, 43vw, 500px);
|
||||||
top: 26px;
|
top: 26px;
|
||||||
|
|
||||||
background: #4C40F7;
|
background: #4C40F7;
|
||||||
@ -93,13 +93,13 @@
|
|||||||
|
|
||||||
.start-section-right-column-art-top-right-pill {
|
.start-section-right-column-art-top-right-pill {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 177px;
|
width: clamp(80px, 25vw, 140px);
|
||||||
height: 400px;
|
height: clamp(270px, 75vw, 400px);
|
||||||
right: 115px;
|
left: clamp(120px, 43vw, 500px);
|
||||||
top: 0px;
|
top: 0px;
|
||||||
|
|
||||||
background: #4C40F7;
|
background: #4C40F7;
|
||||||
border-radius: 80px;
|
border-radius: 65px;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -108,13 +108,13 @@
|
|||||||
|
|
||||||
.start-section-right-column-art-bottom-left-pill {
|
.start-section-right-column-art-bottom-left-pill {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 177px;
|
width: clamp(80px, 25vw, 140px);
|
||||||
height: 400px;
|
height: clamp(270px, 75vw, 400px);
|
||||||
right: 0;
|
right: clamp(120px, 43vw, 500px);
|
||||||
top: 150px;
|
top: 120px;
|
||||||
|
|
||||||
background: #FFCC00;
|
background: #FFCC00;
|
||||||
border-radius: 80px;
|
border-radius: 65px;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -123,9 +123,10 @@
|
|||||||
|
|
||||||
.start-section-right-column-art-bottom-right-pill {
|
.start-section-right-column-art-bottom-right-pill {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 289px;
|
width: clamp(120px, 37.5vw, 220px);
|
||||||
height: 88px;
|
height: clamp(50px, 15vw, 80px);
|
||||||
top: 440px;
|
top: clamp(300px, 80vw, 450px);
|
||||||
|
left: clamp(120px, 43vw, 500px);
|
||||||
|
|
||||||
background: #FFCC00;
|
background: #FFCC00;
|
||||||
box-shadow: 0px 4px 21px rgba(186, 149, 0, 0.15);
|
box-shadow: 0px 4px 21px rgba(186, 149, 0, 0.15);
|
||||||
@ -139,25 +140,28 @@
|
|||||||
.start-section-right-column-subject-1-title {
|
.start-section-right-column-subject-1-title {
|
||||||
font-family: Poppins;
|
font-family: Poppins;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 18px;
|
font-size: clamp(10px, 3vw, 21px);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 20px;
|
line-height: clamp(18px, 4.5vw, 25px);
|
||||||
white-space: pre-line;
|
white-space: pre-line;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.start-section-right-column-subject-1-photo {
|
.start-section-right-column-subject-1-photo {
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
width: 271px;
|
width: clamp(128px, 40vw, 220px);
|
||||||
|
|
||||||
}
|
}
|
||||||
.start-section-right-column-subject-2-photo {
|
.start-section-right-column-subject-2-photo {
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
width: 260px;
|
width: clamp(128px, 40vw, 220px);
|
||||||
|
margin-right: 7px;
|
||||||
}
|
}
|
||||||
.start-section-right-column-subject-2-title {
|
.start-section-right-column-subject-2-title {
|
||||||
font-family: Poppins;
|
font-family: Poppins;
|
||||||
color: #2D2D2D;
|
color: #2D2D2D;
|
||||||
font-size: 18px;
|
font-size: clamp(10px, 3vw, 21px);
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: clamp(18px, 4.5vw, 25px);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
white-space: pre-line;
|
white-space: pre-line;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -171,10 +175,14 @@
|
|||||||
|
|
||||||
|
|
||||||
@media only screen and (min-width: 750px) {
|
@media only screen and (min-width: 750px) {
|
||||||
|
|
||||||
.start-section-container {
|
.start-section-container {
|
||||||
height: 600px;
|
height: 600px;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
.start-section-left-column {
|
||||||
|
width: clamp(360px, 60vw, 650px);
|
||||||
|
}
|
||||||
.start-section-left-column-title-nocolor {
|
.start-section-left-column-title-nocolor {
|
||||||
font-size: clamp(28px, 4.2vw, 64px);
|
font-size: clamp(28px, 4.2vw, 64px);
|
||||||
}
|
}
|
||||||
@ -211,7 +219,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.start-section-right-column-art-top-right-pill {
|
.start-section-right-column-art-top-right-pill {
|
||||||
width: clamp(150px, 18vw, 180px);
|
width: clamp(150px, 18vw, 165px);
|
||||||
height: clamp(380px, 45vw, 480px);
|
height: clamp(380px, 45vw, 480px);
|
||||||
left: initial;
|
left: initial;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
@ -219,8 +227,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.start-section-right-column-art-bottom-left-pill {
|
.start-section-right-column-art-bottom-left-pill {
|
||||||
width: clamp(150px, 18vw, 180px);
|
width: clamp(150px, 18vw, 165px);
|
||||||
height: clamp(350px, 42vw, 480px);
|
height: clamp(380px, 45vw, 480px);
|
||||||
left: initial;
|
left: initial;
|
||||||
right: min(200px, 20vw);
|
right: min(200px, 20vw);
|
||||||
top: 120px;
|
top: 120px;
|
||||||
@ -229,18 +237,23 @@
|
|||||||
.start-section-right-column-art-bottom-right-pill {
|
.start-section-right-column-art-bottom-right-pill {
|
||||||
width: clamp(120px, 20vw, 250px);
|
width: clamp(120px, 20vw, 250px);
|
||||||
height: clamp(60px, 7vw, 80px);
|
height: clamp(60px, 7vw, 80px);
|
||||||
|
left: initial;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
top: clamp(400px, 47vw, 500px);
|
top: clamp(400px, 47vw, 500px);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.start-section-right-column-subject-1-title {
|
.start-section-right-column-subject-1-title {
|
||||||
font-size: clamp(12px, 1.4vw, 21px);
|
font-size: clamp(12px, 1.4vw, 21px);
|
||||||
|
line-height: clamp(24px, 2.8vw, 35px);
|
||||||
}
|
}
|
||||||
.start-section-right-column-subject-1-photo {
|
.start-section-right-column-subject-1-photo {
|
||||||
width: clamp(220px, 27vw, 290px);
|
margin-bottom: -2px;
|
||||||
|
width: clamp(230px, 27vw, 290px);
|
||||||
}
|
}
|
||||||
.start-section-right-column-subject-2-photo {
|
.start-section-right-column-subject-2-photo {
|
||||||
width: clamp(220px, 23vw, 275px);
|
margin-bottom: -2.3px;
|
||||||
|
width: clamp(230px, 25vw, 290px);
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
}
|
}
|
||||||
.start-section-right-column-subject-2-title {
|
.start-section-right-column-subject-2-title {
|
||||||
|
@ -895,24 +895,24 @@ function getImports() {
|
|||||||
const ret = wasm.__wbindgen_export_2;
|
const ret = wasm.__wbindgen_export_2;
|
||||||
return addHeapObject(ret);
|
return addHeapObject(ret);
|
||||||
};
|
};
|
||||||
imports.wbg.__wbindgen_closure_wrapper3155 = function(arg0, arg1, arg2) {
|
imports.wbg.__wbindgen_closure_wrapper3240 = function(arg0, arg1, arg2) {
|
||||||
const ret = makeClosure(arg0, arg1, 429, __wbg_adapter_38);
|
const ret = makeClosure(arg0, arg1, 455, __wbg_adapter_38);
|
||||||
return addHeapObject(ret);
|
return addHeapObject(ret);
|
||||||
};
|
};
|
||||||
imports.wbg.__wbindgen_closure_wrapper3157 = function(arg0, arg1, arg2) {
|
imports.wbg.__wbindgen_closure_wrapper3242 = function(arg0, arg1, arg2) {
|
||||||
const ret = makeClosure(arg0, arg1, 431, __wbg_adapter_41);
|
const ret = makeClosure(arg0, arg1, 457, __wbg_adapter_41);
|
||||||
return addHeapObject(ret);
|
return addHeapObject(ret);
|
||||||
};
|
};
|
||||||
imports.wbg.__wbindgen_closure_wrapper9139 = function(arg0, arg1, arg2) {
|
imports.wbg.__wbindgen_closure_wrapper9224 = function(arg0, arg1, arg2) {
|
||||||
const ret = makeMutClosure(arg0, arg1, 765, __wbg_adapter_44);
|
const ret = makeMutClosure(arg0, arg1, 791, __wbg_adapter_44);
|
||||||
return addHeapObject(ret);
|
return addHeapObject(ret);
|
||||||
};
|
};
|
||||||
imports.wbg.__wbindgen_closure_wrapper9445 = function(arg0, arg1, arg2) {
|
imports.wbg.__wbindgen_closure_wrapper9530 = function(arg0, arg1, arg2) {
|
||||||
const ret = makeMutClosure(arg0, arg1, 779, __wbg_adapter_47);
|
const ret = makeMutClosure(arg0, arg1, 805, __wbg_adapter_47);
|
||||||
return addHeapObject(ret);
|
return addHeapObject(ret);
|
||||||
};
|
};
|
||||||
imports.wbg.__wbindgen_closure_wrapper10058 = function(arg0, arg1, arg2) {
|
imports.wbg.__wbindgen_closure_wrapper10143 = function(arg0, arg1, arg2) {
|
||||||
const ret = makeMutClosure(arg0, arg1, 834, __wbg_adapter_50);
|
const ret = makeMutClosure(arg0, arg1, 860, __wbg_adapter_50);
|
||||||
return addHeapObject(ret);
|
return addHeapObject(ret);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -951,7 +951,7 @@ function initSync(module) {
|
|||||||
|
|
||||||
async function init(input) {
|
async function init(input) {
|
||||||
if (typeof input === 'undefined') {
|
if (typeof input === 'undefined') {
|
||||||
input = new URL('bl-frontend-3471ad16c4b84cf4_bg.wasm', import.meta.url);
|
input = new URL('bl-frontend-12c340a7ed0ba3fc_bg.wasm', import.meta.url);
|
||||||
}
|
}
|
||||||
const imports = getImports();
|
const imports = getImports();
|
||||||
|
|
Binary file not shown.
11
dist/index.html
vendored
11
dist/index.html
vendored
@ -5,10 +5,11 @@
|
|||||||
<link rel="stylesheet" href="/body-e8d660df182d57de.css">
|
<link rel="stylesheet" href="/body-e8d660df182d57de.css">
|
||||||
<link rel="stylesheet" href="/navbar-561b968ed8df59d4.css">
|
<link rel="stylesheet" href="/navbar-561b968ed8df59d4.css">
|
||||||
<link rel="stylesheet" href="/footer-c920ca43256fdcb9.css">
|
<link rel="stylesheet" href="/footer-c920ca43256fdcb9.css">
|
||||||
<link rel="stylesheet" href="/start-bd1c7d143fbbfa68.css">
|
<link rel="stylesheet" href="/start-2b734412a31f63c3.css">
|
||||||
<link rel="stylesheet" href="/services-e3fac511f8ec30fa.css">
|
<link rel="stylesheet" href="/services-6d8bb354b32995c1.css">
|
||||||
<link rel="stylesheet" href="/call_to_action-c920ca43256fdcb9.css">
|
<link rel="stylesheet" href="/call_to_action-c920ca43256fdcb9.css">
|
||||||
<link rel="stylesheet" href="/service_card-1dcd0bfd8e0f3c95.css">
|
<link rel="stylesheet" href="/service_card-1dcd0bfd8e0f3c95.css">
|
||||||
|
<link rel="stylesheet" href="/language-picker-f4ed1ca52ddd0d5.css">
|
||||||
|
|
||||||
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
|
||||||
<script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script>
|
<script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script>
|
||||||
@ -16,9 +17,9 @@
|
|||||||
<base href="/">
|
<base href="/">
|
||||||
|
|
||||||
|
|
||||||
<link rel="preload" href="/bl-frontend-3471ad16c4b84cf4_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
|
<link rel="preload" href="/bl-frontend-12c340a7ed0ba3fc_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
|
||||||
<link rel="modulepreload" href="/bl-frontend-3471ad16c4b84cf4.js"></head>
|
<link rel="modulepreload" href="/bl-frontend-12c340a7ed0ba3fc.js"></head>
|
||||||
<body><script type="module">import init from '/bl-frontend-3471ad16c4b84cf4.js';init('/bl-frontend-3471ad16c4b84cf4_bg.wasm');</script><script>(function () {
|
<body><script type="module">import init from '/bl-frontend-12c340a7ed0ba3fc.js';init('/bl-frontend-12c340a7ed0ba3fc_bg.wasm');</script><script>(function () {
|
||||||
var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||||
var url = protocol + '//' + window.location.host + '/_trunk/ws';
|
var url = protocol + '//' + window.location.host + '/_trunk/ws';
|
||||||
var poll_interval = 5000;
|
var poll_interval = 5000;
|
||||||
|
5
dist/language-picker-f4ed1ca52ddd0d5.css
vendored
Normal file
5
dist/language-picker-f4ed1ca52ddd0d5.css
vendored
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
.language-picker-container {
|
||||||
|
position: fixed;
|
||||||
|
right: 0px;
|
||||||
|
top: 30vh;
|
||||||
|
}
|
@ -8,7 +8,8 @@
|
|||||||
}
|
}
|
||||||
.services-section-title {
|
.services-section-title {
|
||||||
font-family: Poppins;
|
font-family: Poppins;
|
||||||
font-size: 40;
|
font-size: clamp(21px, 3vw, 3vw);
|
||||||
|
font-weight: bold;
|
||||||
color: #111029;
|
color: #111029;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
@ -12,30 +12,31 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
width: clamp(360px, 60vw, 650px);
|
width: 100%
|
||||||
}
|
}
|
||||||
.start-section-left-column-title-nocolor {
|
.start-section-left-column-title-nocolor {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
font-family: Poppins;
|
font-family: Poppins;
|
||||||
font-size: clamp(30px, 4.5vw, 64px);
|
font-size: 8vw;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
.start-section-left-column-title-colored {
|
.start-section-left-column-title-colored {
|
||||||
|
white-space: nowrap;
|
||||||
font-family: Poppins;
|
font-family: Poppins;
|
||||||
font-size: clamp(30px, 4.5vw, 64px);
|
font-size: 8vw;
|
||||||
color: #FF6800;
|
color: #FF6800;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
.start-section-left-column-description {
|
.start-section-left-column-description {
|
||||||
font-family: Poppins;
|
font-family: Poppins;
|
||||||
font-size: clamp(12px, 1.5vw, 18px);
|
font-size: 2.8vw;
|
||||||
line-height: clamp(24px, 3vw, 36px);
|
line-height: 5vw;
|
||||||
|
|
||||||
color: #6B6B6B;
|
color: #6B6B6B;
|
||||||
|
|
||||||
width: clamp(200px, 30vw, 420px);
|
width: 80%;
|
||||||
margin: 24px 0px 30px 0px;
|
margin: 24px 0px 30px 0px;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
@ -62,13 +63,12 @@
|
|||||||
transition-duration: 0.4s;
|
transition-duration: 0.4s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.start-section-right-column {
|
.start-section-right-column {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: start;
|
justify-content: start;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 550px;
|
height: clamp(500px, 115vw, 700px);
|
||||||
}
|
}
|
||||||
.start-section-right-column-canvas {
|
.start-section-right-column-canvas {
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -77,9 +77,9 @@
|
|||||||
}
|
}
|
||||||
.start-section-right-column-art-top-left-pill {
|
.start-section-right-column-art-top-left-pill {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 200px;
|
width: clamp(120px, 37.5vw, 220px);
|
||||||
height: 65px;
|
height: clamp(50px, 15vw, 80px);
|
||||||
left: 40px;
|
right: clamp(120px, 43vw, 500px);
|
||||||
top: 26px;
|
top: 26px;
|
||||||
|
|
||||||
background: #4C40F7;
|
background: #4C40F7;
|
||||||
@ -93,13 +93,13 @@
|
|||||||
|
|
||||||
.start-section-right-column-art-top-right-pill {
|
.start-section-right-column-art-top-right-pill {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 177px;
|
width: clamp(80px, 25vw, 140px);
|
||||||
height: 400px;
|
height: clamp(270px, 75vw, 400px);
|
||||||
right: 115px;
|
left: clamp(120px, 43vw, 500px);
|
||||||
top: 0px;
|
top: 0px;
|
||||||
|
|
||||||
background: #4C40F7;
|
background: #4C40F7;
|
||||||
border-radius: 80px;
|
border-radius: 65px;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -108,13 +108,13 @@
|
|||||||
|
|
||||||
.start-section-right-column-art-bottom-left-pill {
|
.start-section-right-column-art-bottom-left-pill {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 177px;
|
width: clamp(80px, 25vw, 140px);
|
||||||
height: 400px;
|
height: clamp(270px, 75vw, 400px);
|
||||||
right: 0;
|
right: clamp(120px, 43vw, 500px);
|
||||||
top: 150px;
|
top: 120px;
|
||||||
|
|
||||||
background: #FFCC00;
|
background: #FFCC00;
|
||||||
border-radius: 80px;
|
border-radius: 65px;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -123,9 +123,10 @@
|
|||||||
|
|
||||||
.start-section-right-column-art-bottom-right-pill {
|
.start-section-right-column-art-bottom-right-pill {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 289px;
|
width: clamp(120px, 37.5vw, 220px);
|
||||||
height: 88px;
|
height: clamp(50px, 15vw, 80px);
|
||||||
top: 440px;
|
top: clamp(300px, 80vw, 450px);
|
||||||
|
left: clamp(120px, 43vw, 500px);
|
||||||
|
|
||||||
background: #FFCC00;
|
background: #FFCC00;
|
||||||
box-shadow: 0px 4px 21px rgba(186, 149, 0, 0.15);
|
box-shadow: 0px 4px 21px rgba(186, 149, 0, 0.15);
|
||||||
@ -139,25 +140,28 @@
|
|||||||
.start-section-right-column-subject-1-title {
|
.start-section-right-column-subject-1-title {
|
||||||
font-family: Poppins;
|
font-family: Poppins;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 18px;
|
font-size: clamp(10px, 3vw, 21px);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 20px;
|
line-height: clamp(18px, 4.5vw, 25px);
|
||||||
white-space: pre-line;
|
white-space: pre-line;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.start-section-right-column-subject-1-photo {
|
.start-section-right-column-subject-1-photo {
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
width: 271px;
|
width: clamp(128px, 40vw, 220px);
|
||||||
|
|
||||||
}
|
}
|
||||||
.start-section-right-column-subject-2-photo {
|
.start-section-right-column-subject-2-photo {
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
width: 260px;
|
width: clamp(128px, 40vw, 220px);
|
||||||
|
margin-right: 7px;
|
||||||
}
|
}
|
||||||
.start-section-right-column-subject-2-title {
|
.start-section-right-column-subject-2-title {
|
||||||
font-family: Poppins;
|
font-family: Poppins;
|
||||||
color: #2D2D2D;
|
color: #2D2D2D;
|
||||||
font-size: 18px;
|
font-size: clamp(10px, 3vw, 21px);
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: clamp(18px, 4.5vw, 25px);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
white-space: pre-line;
|
white-space: pre-line;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -171,10 +175,14 @@
|
|||||||
|
|
||||||
|
|
||||||
@media only screen and (min-width: 750px) {
|
@media only screen and (min-width: 750px) {
|
||||||
|
|
||||||
.start-section-container {
|
.start-section-container {
|
||||||
height: 600px;
|
height: 600px;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
.start-section-left-column {
|
||||||
|
width: clamp(360px, 60vw, 650px);
|
||||||
|
}
|
||||||
.start-section-left-column-title-nocolor {
|
.start-section-left-column-title-nocolor {
|
||||||
font-size: clamp(28px, 4.2vw, 64px);
|
font-size: clamp(28px, 4.2vw, 64px);
|
||||||
}
|
}
|
||||||
@ -211,7 +219,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.start-section-right-column-art-top-right-pill {
|
.start-section-right-column-art-top-right-pill {
|
||||||
width: clamp(150px, 18vw, 180px);
|
width: clamp(150px, 18vw, 165px);
|
||||||
height: clamp(380px, 45vw, 480px);
|
height: clamp(380px, 45vw, 480px);
|
||||||
left: initial;
|
left: initial;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
@ -219,8 +227,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.start-section-right-column-art-bottom-left-pill {
|
.start-section-right-column-art-bottom-left-pill {
|
||||||
width: clamp(150px, 18vw, 180px);
|
width: clamp(150px, 18vw, 165px);
|
||||||
height: clamp(350px, 42vw, 480px);
|
height: clamp(380px, 45vw, 480px);
|
||||||
left: initial;
|
left: initial;
|
||||||
right: min(200px, 20vw);
|
right: min(200px, 20vw);
|
||||||
top: 120px;
|
top: 120px;
|
||||||
@ -229,18 +237,23 @@
|
|||||||
.start-section-right-column-art-bottom-right-pill {
|
.start-section-right-column-art-bottom-right-pill {
|
||||||
width: clamp(120px, 20vw, 250px);
|
width: clamp(120px, 20vw, 250px);
|
||||||
height: clamp(60px, 7vw, 80px);
|
height: clamp(60px, 7vw, 80px);
|
||||||
|
left: initial;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
top: clamp(400px, 47vw, 500px);
|
top: clamp(400px, 47vw, 500px);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.start-section-right-column-subject-1-title {
|
.start-section-right-column-subject-1-title {
|
||||||
font-size: clamp(12px, 1.4vw, 21px);
|
font-size: clamp(12px, 1.4vw, 21px);
|
||||||
|
line-height: clamp(24px, 2.8vw, 35px);
|
||||||
}
|
}
|
||||||
.start-section-right-column-subject-1-photo {
|
.start-section-right-column-subject-1-photo {
|
||||||
width: clamp(220px, 27vw, 290px);
|
margin-bottom: -2px;
|
||||||
|
width: clamp(230px, 27vw, 290px);
|
||||||
}
|
}
|
||||||
.start-section-right-column-subject-2-photo {
|
.start-section-right-column-subject-2-photo {
|
||||||
width: clamp(220px, 23vw, 275px);
|
margin-bottom: -2.3px;
|
||||||
|
width: clamp(230px, 25vw, 290px);
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
}
|
}
|
||||||
.start-section-right-column-subject-2-title {
|
.start-section-right-column-subject-2-title {
|
@ -11,6 +11,7 @@
|
|||||||
<link data-trunk type="text/css" href="css/services.css" rel="css" />
|
<link data-trunk type="text/css" href="css/services.css" rel="css" />
|
||||||
<link data-trunk type="text/css" href="css/call_to_action.css" rel="css" />
|
<link data-trunk type="text/css" href="css/call_to_action.css" rel="css" />
|
||||||
<link data-trunk type="text/css" href="css/service_card.css" rel="css" />
|
<link data-trunk type="text/css" href="css/service_card.css" rel="css" />
|
||||||
|
<link data-trunk type="text/css" href="css/language-picker.css" rel="css" />
|
||||||
|
|
||||||
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
|
||||||
<script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script>
|
<script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script>
|
||||||
|
11
src/components/language_picker.rs
Normal file
11
src/components/language_picker.rs
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
use yew::prelude::*;
|
||||||
|
|
||||||
|
#[function_component(LanguagePicker)]
|
||||||
|
pub fn language_picker() -> Html {
|
||||||
|
|
||||||
|
html! {
|
||||||
|
<div class={"language-picker-container"}>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
@ -1,3 +1,4 @@
|
|||||||
pub mod nav_bar;
|
pub mod nav_bar;
|
||||||
pub mod footer;
|
pub mod footer;
|
||||||
pub mod service_card;
|
pub mod service_card;
|
||||||
|
pub mod language_picker;
|
@ -1,6 +1,6 @@
|
|||||||
use yew::prelude::*;
|
use yew::prelude::*;
|
||||||
|
|
||||||
use crate::{components::nav_bar::NavigationBar, pages::{start::StartPage, services::ServicesPage, about::AboutPage, call_to_action::CallToActionPage}};
|
use crate::{components::{nav_bar::NavigationBar, footer::PageFooter, language_picker::LanguagePicker}, pages::{start::StartPage, services::ServicesPage, about::AboutPage, call_to_action::CallToActionPage}};
|
||||||
|
|
||||||
#[derive(Debug, Clone, Copy, PartialEq, Eq, PartialOrd, Ord)]
|
#[derive(Debug, Clone, Copy, PartialEq, Eq, PartialOrd, Ord)]
|
||||||
pub enum Section {
|
pub enum Section {
|
||||||
@ -20,12 +20,14 @@ pub fn main_page() -> Html {
|
|||||||
html! {
|
html! {
|
||||||
<>
|
<>
|
||||||
<NavigationBar/>
|
<NavigationBar/>
|
||||||
|
<LanguagePicker/>
|
||||||
<div class={"page-container"}>
|
<div class={"page-container"}>
|
||||||
<StartPage/>
|
<StartPage/>
|
||||||
<ServicesPage/>
|
<ServicesPage/>
|
||||||
<AboutPage/>
|
<AboutPage/>
|
||||||
<CallToActionPage/>
|
<CallToActionPage/>
|
||||||
</div>
|
</div>
|
||||||
|
<PageFooter/>
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user