Finished start element for only 1200px+ window
This commit is contained in:
parent
1d2274e4aa
commit
25e22c2a22
BIN
assets/images/subject-1-picture.png
Normal file
BIN
assets/images/subject-1-picture.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 863 KiB |
BIN
assets/images/subject-2-picture.png
Normal file
BIN
assets/images/subject-2-picture.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.1 MiB |
@ -75,7 +75,7 @@
|
|||||||
|
|
||||||
.navbar-hamburger:hover {
|
.navbar-hamburger:hover {
|
||||||
background-color: #ffffff14;
|
background-color: #ffffff14;
|
||||||
font-size: 22pt;
|
scale: 1.1;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
transition-duration: 0.3s;
|
transition-duration: 0.3s;
|
||||||
@ -119,8 +119,7 @@
|
|||||||
}
|
}
|
||||||
.navbar-item:hover {
|
.navbar-item:hover {
|
||||||
background-color: #ffffff14;
|
background-color: #ffffff14;
|
||||||
font-size: 13pt;
|
scale: 1.15;
|
||||||
font-weight: bold;
|
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
transition-duration: 0.3s;
|
transition-duration: 0.3s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -161,7 +160,7 @@
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0px;
|
padding-left: 7vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar {
|
.navbar {
|
||||||
@ -208,13 +207,14 @@
|
|||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
font-family: Poppins;
|
font-family: Poppins;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-item:hover {
|
.navbar-item:hover {
|
||||||
background-color: rgb(0, 0, 0, 0);
|
background-color: rgb(0, 0, 0, 0);
|
||||||
font-size: 12pt;
|
font-size: 12pt;
|
||||||
border-radius: 0px;
|
border-radius: 0px;
|
||||||
transition-duration: 0.0s;
|
transition-duration: 0.3s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.navbar-item-contact-us {
|
.navbar-item-contact-us {
|
||||||
@ -228,12 +228,12 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
height: 45px;
|
height: 64px;
|
||||||
width: 155px;
|
width: 155px;
|
||||||
|
|
||||||
padding: 25px 10px;
|
padding: 25px 10px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
margin-right: 30px;
|
margin-right: 7vw;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|
||||||
padding: 2px 10px;
|
padding: 2px 10px;
|
||||||
@ -242,4 +242,9 @@
|
|||||||
|
|
||||||
filter: drop-shadow(-15px 10px 50px rgba(76, 64, 247, 0.409));
|
filter: drop-shadow(-15px 10px 50px rgba(76, 64, 247, 0.409));
|
||||||
}
|
}
|
||||||
|
.navbar-item-contact-us:hover {
|
||||||
|
scale: 1.1;
|
||||||
|
transition-duration: 0.4s;
|
||||||
|
background-color: #8982f0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
178
css/start.css
Normal file
178
css/start.css
Normal file
@ -0,0 +1,178 @@
|
|||||||
|
.start-section-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
height: 600px;
|
||||||
|
padding: 0px 10vw;
|
||||||
|
}
|
||||||
|
.start-section-left-column {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: start;
|
||||||
|
min-width: 571px;
|
||||||
|
}
|
||||||
|
.start-section-left-column-title-nocolor {
|
||||||
|
font-family: Poppins;
|
||||||
|
font-size: 56px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
.start-section-left-column-title-colored {
|
||||||
|
font-family: Poppins;
|
||||||
|
font-size: 56px;
|
||||||
|
color: #FF6800;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
.start-section-left-column-description {
|
||||||
|
font-family: Poppins;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 32px;
|
||||||
|
color: #6B6B6B;
|
||||||
|
|
||||||
|
width: 365px;
|
||||||
|
margin: 24px 0px 30px 0px;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
.start-section-left-column-button {
|
||||||
|
background: #4C40F7;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-family: Poppins;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600px;
|
||||||
|
color: white;
|
||||||
|
padding: 20px;
|
||||||
|
width: 200px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.start-section-left-column-button:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
background: #8982f0;
|
||||||
|
|
||||||
|
scale: 1.1;
|
||||||
|
transition-duration: 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.start-section-right-column {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: start;
|
||||||
|
width: 100%;
|
||||||
|
height: 550px;
|
||||||
|
}
|
||||||
|
.start-section-right-column-canvas {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.start-section-right-column-art-top-left-pill {
|
||||||
|
position: absolute;
|
||||||
|
width: 250px;
|
||||||
|
height: 88px;
|
||||||
|
right: 200px;
|
||||||
|
top: 26px;
|
||||||
|
|
||||||
|
background: #4C40F7;
|
||||||
|
box-shadow: 0px 4px 21px rgba(15, 11, 83, 0.15);
|
||||||
|
border-radius: 80px;
|
||||||
|
|
||||||
|
animation-name: twitch;
|
||||||
|
animation-duration: 8s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-section-right-column-art-top-right-pill {
|
||||||
|
position: absolute;
|
||||||
|
width: 177px;
|
||||||
|
height: 400px;
|
||||||
|
right: 15px;
|
||||||
|
top: 0px;
|
||||||
|
|
||||||
|
background: #4C40F7;
|
||||||
|
border-radius: 80px;
|
||||||
|
|
||||||
|
animation-name: twitch;
|
||||||
|
animation-duration: 11s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-section-right-column-art-bottom-left-pill {
|
||||||
|
position: absolute;
|
||||||
|
width: 177px;
|
||||||
|
height: 400px;
|
||||||
|
right: 220px;
|
||||||
|
top: 150px;
|
||||||
|
|
||||||
|
background: #FFCC00;
|
||||||
|
border-radius: 80px;
|
||||||
|
|
||||||
|
animation-name: twitch;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-section-right-column-art-bottom-right-pill {
|
||||||
|
position: absolute;
|
||||||
|
width: 289px;
|
||||||
|
height: 88px;
|
||||||
|
right: -100px;
|
||||||
|
top: 440px;
|
||||||
|
|
||||||
|
background: #FFCC00;
|
||||||
|
box-shadow: 0px 4px 21px rgba(186, 149, 0, 0.15);
|
||||||
|
border-radius: 80px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-section-right-column-subject-1-title {
|
||||||
|
font-family: Poppins;
|
||||||
|
color: white;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: pre-line;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.start-section-right-column-subject-1-photo {
|
||||||
|
object-fit: contain;
|
||||||
|
width: 271px;
|
||||||
|
}
|
||||||
|
.start-section-right-column-subject-2-photo {
|
||||||
|
object-fit: cover;
|
||||||
|
width: 592px;
|
||||||
|
}
|
||||||
|
.start-section-right-column-subject-2-title {
|
||||||
|
font-family: Poppins;
|
||||||
|
color: #2D2D2D;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: pre-line;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes twitch {
|
||||||
|
0% {scale: 1;}
|
||||||
|
5% {scale: 1.1;}
|
||||||
|
10% {scale: 1;}
|
||||||
|
}
|
@ -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-90caa3eb84cccf93_bg.wasm', import.meta.url);
|
input = new URL('bl-frontend-8e3c467f4ff3a36a_bg.wasm', import.meta.url);
|
||||||
}
|
}
|
||||||
const imports = getImports();
|
const imports = getImports();
|
||||||
|
|
Binary file not shown.
BIN
dist/images/subject-1-picture.png
vendored
Normal file
BIN
dist/images/subject-1-picture.png
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 863 KiB |
BIN
dist/images/subject-2-picture.png
vendored
Normal file
BIN
dist/images/subject-2-picture.png
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.1 MiB |
9
dist/index.html
vendored
9
dist/index.html
vendored
@ -3,7 +3,8 @@
|
|||||||
<title>Blanco Lorenzo</title>
|
<title>Blanco Lorenzo</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="/body-999aba2b939d4090.css">
|
<link rel="stylesheet" href="/body-999aba2b939d4090.css">
|
||||||
<link rel="stylesheet" href="/navbar-59e9bb042f3c97e9.css">
|
<link rel="stylesheet" href="/navbar-75e2f3bf53a3fb21.css">
|
||||||
|
<link rel="stylesheet" href="/start-2df6eca8530d601.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,9 +12,9 @@
|
|||||||
<base href="/">
|
<base href="/">
|
||||||
|
|
||||||
|
|
||||||
<link rel="preload" href="/bl-frontend-90caa3eb84cccf93_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
|
<link rel="preload" href="/bl-frontend-8e3c467f4ff3a36a_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
|
||||||
<link rel="modulepreload" href="/bl-frontend-90caa3eb84cccf93.js"></head>
|
<link rel="modulepreload" href="/bl-frontend-8e3c467f4ff3a36a.js"></head>
|
||||||
<body><script type="module">import init from '/bl-frontend-90caa3eb84cccf93.js';init('/bl-frontend-90caa3eb84cccf93_bg.wasm');</script><script>(function () {
|
<body><script type="module">import init from '/bl-frontend-8e3c467f4ff3a36a.js';init('/bl-frontend-8e3c467f4ff3a36a_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;
|
||||||
|
@ -75,7 +75,7 @@
|
|||||||
|
|
||||||
.navbar-hamburger:hover {
|
.navbar-hamburger:hover {
|
||||||
background-color: #ffffff14;
|
background-color: #ffffff14;
|
||||||
font-size: 22pt;
|
scale: 1.1;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
transition-duration: 0.3s;
|
transition-duration: 0.3s;
|
||||||
@ -119,8 +119,7 @@
|
|||||||
}
|
}
|
||||||
.navbar-item:hover {
|
.navbar-item:hover {
|
||||||
background-color: #ffffff14;
|
background-color: #ffffff14;
|
||||||
font-size: 13pt;
|
scale: 1.15;
|
||||||
font-weight: bold;
|
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
transition-duration: 0.3s;
|
transition-duration: 0.3s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -161,7 +160,7 @@
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0px;
|
padding-left: 7vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar {
|
.navbar {
|
||||||
@ -208,13 +207,14 @@
|
|||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
font-family: Poppins;
|
font-family: Poppins;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-item:hover {
|
.navbar-item:hover {
|
||||||
background-color: rgb(0, 0, 0, 0);
|
background-color: rgb(0, 0, 0, 0);
|
||||||
font-size: 12pt;
|
font-size: 12pt;
|
||||||
border-radius: 0px;
|
border-radius: 0px;
|
||||||
transition-duration: 0.0s;
|
transition-duration: 0.3s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.navbar-item-contact-us {
|
.navbar-item-contact-us {
|
||||||
@ -228,12 +228,12 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
height: 45px;
|
height: 64px;
|
||||||
width: 155px;
|
width: 155px;
|
||||||
|
|
||||||
padding: 25px 10px;
|
padding: 25px 10px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
margin-right: 30px;
|
margin-right: 7vw;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|
||||||
padding: 2px 10px;
|
padding: 2px 10px;
|
||||||
@ -242,4 +242,9 @@
|
|||||||
|
|
||||||
filter: drop-shadow(-15px 10px 50px rgba(76, 64, 247, 0.409));
|
filter: drop-shadow(-15px 10px 50px rgba(76, 64, 247, 0.409));
|
||||||
}
|
}
|
||||||
|
.navbar-item-contact-us:hover {
|
||||||
|
scale: 1.1;
|
||||||
|
transition-duration: 0.4s;
|
||||||
|
background-color: #8982f0;
|
||||||
|
}
|
||||||
}
|
}
|
178
dist/start-2df6eca8530d601.css
vendored
Normal file
178
dist/start-2df6eca8530d601.css
vendored
Normal file
@ -0,0 +1,178 @@
|
|||||||
|
.start-section-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
height: 600px;
|
||||||
|
padding: 0px 10vw;
|
||||||
|
}
|
||||||
|
.start-section-left-column {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: start;
|
||||||
|
min-width: 571px;
|
||||||
|
}
|
||||||
|
.start-section-left-column-title-nocolor {
|
||||||
|
font-family: Poppins;
|
||||||
|
font-size: 56px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
.start-section-left-column-title-colored {
|
||||||
|
font-family: Poppins;
|
||||||
|
font-size: 56px;
|
||||||
|
color: #FF6800;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
.start-section-left-column-description {
|
||||||
|
font-family: Poppins;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 32px;
|
||||||
|
color: #6B6B6B;
|
||||||
|
|
||||||
|
width: 365px;
|
||||||
|
margin: 24px 0px 30px 0px;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
.start-section-left-column-button {
|
||||||
|
background: #4C40F7;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-family: Poppins;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600px;
|
||||||
|
color: white;
|
||||||
|
padding: 20px;
|
||||||
|
width: 200px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.start-section-left-column-button:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
background: #8982f0;
|
||||||
|
|
||||||
|
scale: 1.1;
|
||||||
|
transition-duration: 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.start-section-right-column {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: start;
|
||||||
|
width: 100%;
|
||||||
|
height: 550px;
|
||||||
|
}
|
||||||
|
.start-section-right-column-canvas {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.start-section-right-column-art-top-left-pill {
|
||||||
|
position: absolute;
|
||||||
|
width: 250px;
|
||||||
|
height: 88px;
|
||||||
|
right: 200px;
|
||||||
|
top: 26px;
|
||||||
|
|
||||||
|
background: #4C40F7;
|
||||||
|
box-shadow: 0px 4px 21px rgba(15, 11, 83, 0.15);
|
||||||
|
border-radius: 80px;
|
||||||
|
|
||||||
|
animation-name: twitch;
|
||||||
|
animation-duration: 8s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-section-right-column-art-top-right-pill {
|
||||||
|
position: absolute;
|
||||||
|
width: 177px;
|
||||||
|
height: 400px;
|
||||||
|
right: 15px;
|
||||||
|
top: 0px;
|
||||||
|
|
||||||
|
background: #4C40F7;
|
||||||
|
border-radius: 80px;
|
||||||
|
|
||||||
|
animation-name: twitch;
|
||||||
|
animation-duration: 11s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-section-right-column-art-bottom-left-pill {
|
||||||
|
position: absolute;
|
||||||
|
width: 177px;
|
||||||
|
height: 400px;
|
||||||
|
right: 220px;
|
||||||
|
top: 150px;
|
||||||
|
|
||||||
|
background: #FFCC00;
|
||||||
|
border-radius: 80px;
|
||||||
|
|
||||||
|
animation-name: twitch;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-section-right-column-art-bottom-right-pill {
|
||||||
|
position: absolute;
|
||||||
|
width: 289px;
|
||||||
|
height: 88px;
|
||||||
|
right: -100px;
|
||||||
|
top: 440px;
|
||||||
|
|
||||||
|
background: #FFCC00;
|
||||||
|
box-shadow: 0px 4px 21px rgba(186, 149, 0, 0.15);
|
||||||
|
border-radius: 80px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-section-right-column-subject-1-title {
|
||||||
|
font-family: Poppins;
|
||||||
|
color: white;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: pre-line;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.start-section-right-column-subject-1-photo {
|
||||||
|
object-fit: contain;
|
||||||
|
width: 271px;
|
||||||
|
}
|
||||||
|
.start-section-right-column-subject-2-photo {
|
||||||
|
object-fit: cover;
|
||||||
|
width: 592px;
|
||||||
|
}
|
||||||
|
.start-section-right-column-subject-2-title {
|
||||||
|
font-family: Poppins;
|
||||||
|
color: #2D2D2D;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: pre-line;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes twitch {
|
||||||
|
0% {scale: 1;}
|
||||||
|
5% {scale: 1.1;}
|
||||||
|
10% {scale: 1;}
|
||||||
|
}
|
@ -6,6 +6,7 @@
|
|||||||
|
|
||||||
<link data-trunk type="text/css" href="css/body.css" rel="css" />
|
<link data-trunk type="text/css" href="css/body.css" rel="css" />
|
||||||
<link data-trunk type="text/css" href="css/navbar.css" rel="css" />
|
<link data-trunk type="text/css" href="css/navbar.css" rel="css" />
|
||||||
|
<link data-trunk type="text/css" href="css/start.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>
|
||||||
|
30
locales/start/start.json
Normal file
30
locales/start/start.json
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"start.left-column.title-first-line": {
|
||||||
|
"en": "Make your business",
|
||||||
|
"es": "Haz tu negocio"
|
||||||
|
},
|
||||||
|
"start.left-column.title-second-line": {
|
||||||
|
"en": "more powerful",
|
||||||
|
"es": "mas fuerte"
|
||||||
|
},
|
||||||
|
"start.left-column.title-third-line": {
|
||||||
|
"en": "with us",
|
||||||
|
"es": "con nosotros"
|
||||||
|
},
|
||||||
|
"start.left-column-description": {
|
||||||
|
"en": "We provide various services to make your business grow and get bigger. Your satisfaction is our first priority.",
|
||||||
|
"es": "Ofrecemos una amplia variedad de soluciones para el desarrollo web y el marketing. Nuestra primera prioridad es garantizar la satisfacción de nuestros clientes."
|
||||||
|
},
|
||||||
|
"start.left-column-button-text": {
|
||||||
|
"en": "Get Started >",
|
||||||
|
"es": "Comencemos >"
|
||||||
|
},
|
||||||
|
"start.right-column-subject-1-title": {
|
||||||
|
"en": "Web Development &\nSystems",
|
||||||
|
"es": "Desarrollo Web & Sistemas"
|
||||||
|
},
|
||||||
|
"start.right-column-subject-2-title": {
|
||||||
|
"en": "Marketing & Ads",
|
||||||
|
"es": "Mercadeo & Publicidad"
|
||||||
|
}
|
||||||
|
}
|
@ -1,8 +1,47 @@
|
|||||||
|
use locales::t;
|
||||||
use yew::prelude::*;
|
use yew::prelude::*;
|
||||||
|
|
||||||
|
use crate::language::current_lang;
|
||||||
|
|
||||||
#[function_component(StartPage)]
|
#[function_component(StartPage)]
|
||||||
pub fn start_page() -> Html {
|
pub fn start_page() -> Html {
|
||||||
|
|
||||||
html! {}
|
html! {
|
||||||
|
<div class={"start-section-container"}>
|
||||||
|
<div class={"start-section-left-column"}>
|
||||||
|
<div class={"start-section-left-column-title-nocolor"}>
|
||||||
|
{t!("start.left-column.title-first-line", current_lang())}
|
||||||
|
</div>
|
||||||
|
<div class={"start-section-left-column-title-colored"}>
|
||||||
|
{t!("start.left-column.title-second-line", current_lang())}
|
||||||
|
</div>
|
||||||
|
<div class={"start-section-left-column-title-nocolor"}>
|
||||||
|
{t!("start.left-column.title-third-line", current_lang())}
|
||||||
|
</div>
|
||||||
|
<div class={"start-section-left-column-description"}>
|
||||||
|
{t!("start.left-column-description", current_lang())}
|
||||||
|
</div>
|
||||||
|
<div class={"start-section-left-column-button"}>
|
||||||
|
{t!("start.left-column-button-text", current_lang())}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class={"start-section-right-column"}>
|
||||||
|
<div class={"start-section-right-column-canvas"}>
|
||||||
|
<div class={"start-section-right-column-art-top-left-pill"}>
|
||||||
|
<div class={"start-section-right-column-subject-1-title"}>{t!("start.right-column-subject-1-title", current_lang())}</div>
|
||||||
|
</div>
|
||||||
|
<div class={"start-section-right-column-art-top-right-pill"}>
|
||||||
|
<img class={"start-section-right-column-subject-1-photo"} src={"images/subject-1-picture.png"}/>
|
||||||
|
</div>
|
||||||
|
<div class={"start-section-right-column-art-bottom-left-pill"}>
|
||||||
|
<img class={"start-section-right-column-subject-2-photo"} src={"images/subject-2-picture.png"}/>
|
||||||
|
</div>
|
||||||
|
<div class={"start-section-right-column-art-bottom-right-pill"}>
|
||||||
|
<div class={"start-section-right-column-subject-2-title"}>{t!("start.right-column-subject-2-title", current_lang())}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user