Finished start element for only 1200px+ window

This commit is contained in:
Franklin 2023-04-09 10:41:19 -04:00
parent 1d2274e4aa
commit 25e22c2a22
15 changed files with 457 additions and 20 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 863 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

View File

@ -75,7 +75,7 @@
.navbar-hamburger:hover {
background-color: #ffffff14;
font-size: 22pt;
scale: 1.1;
font-weight: bold;
border-radius: 3px;
transition-duration: 0.3s;
@ -119,8 +119,7 @@
}
.navbar-item:hover {
background-color: #ffffff14;
font-size: 13pt;
font-weight: bold;
scale: 1.15;
border-radius: 3px;
transition-duration: 0.3s;
cursor: pointer;
@ -161,7 +160,7 @@
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0px;
padding-left: 7vw;
}
.navbar {
@ -208,13 +207,14 @@
padding-bottom: 10px;
font-family: Poppins;
font-weight: bold;
cursor: default;
}
.navbar-item:hover {
background-color: rgb(0, 0, 0, 0);
font-size: 12pt;
border-radius: 0px;
transition-duration: 0.0s;
transition-duration: 0.3s;
cursor: pointer;
}
.navbar-item-contact-us {
@ -228,12 +228,12 @@
flex-direction: column;
justify-content: center;
height: 45px;
height: 64px;
width: 155px;
padding: 25px 10px;
margin-top: 10px;
margin-right: 30px;
margin-right: 7vw;
margin-bottom: 10px;
padding: 2px 10px;
@ -242,4 +242,9 @@
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
View 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;}
}

View File

@ -951,7 +951,7 @@ function initSync(module) {
async function init(input) {
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();

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

9
dist/index.html vendored
View File

@ -3,7 +3,8 @@
<title>Blanco Lorenzo</title>
<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">
<script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script>
@ -11,9 +12,9 @@
<base href="/">
<link rel="preload" href="/bl-frontend-90caa3eb84cccf93_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
<link rel="modulepreload" href="/bl-frontend-90caa3eb84cccf93.js"></head>
<body><script type="module">import init from '/bl-frontend-90caa3eb84cccf93.js';init('/bl-frontend-90caa3eb84cccf93_bg.wasm');</script><script>(function () {
<link rel="preload" href="/bl-frontend-8e3c467f4ff3a36a_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
<link rel="modulepreload" href="/bl-frontend-8e3c467f4ff3a36a.js"></head>
<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 url = protocol + '//' + window.location.host + '/_trunk/ws';
var poll_interval = 5000;

View File

@ -75,7 +75,7 @@
.navbar-hamburger:hover {
background-color: #ffffff14;
font-size: 22pt;
scale: 1.1;
font-weight: bold;
border-radius: 3px;
transition-duration: 0.3s;
@ -119,8 +119,7 @@
}
.navbar-item:hover {
background-color: #ffffff14;
font-size: 13pt;
font-weight: bold;
scale: 1.15;
border-radius: 3px;
transition-duration: 0.3s;
cursor: pointer;
@ -161,7 +160,7 @@
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0px;
padding-left: 7vw;
}
.navbar {
@ -208,13 +207,14 @@
padding-bottom: 10px;
font-family: Poppins;
font-weight: bold;
cursor: default;
}
.navbar-item:hover {
background-color: rgb(0, 0, 0, 0);
font-size: 12pt;
border-radius: 0px;
transition-duration: 0.0s;
transition-duration: 0.3s;
cursor: pointer;
}
.navbar-item-contact-us {
@ -228,12 +228,12 @@
flex-direction: column;
justify-content: center;
height: 45px;
height: 64px;
width: 155px;
padding: 25px 10px;
margin-top: 10px;
margin-right: 30px;
margin-right: 7vw;
margin-bottom: 10px;
padding: 2px 10px;
@ -242,4 +242,9 @@
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
View 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;}
}

View File

@ -6,6 +6,7 @@
<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/start.css" rel="css" />
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script>

30
locales/start/start.json Normal file
View 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"
}
}

View File

@ -1,8 +1,47 @@
use locales::t;
use yew::prelude::*;
use crate::language::current_lang;
#[function_component(StartPage)]
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>
}
}