Finished start element for only 1200px+ window
This commit is contained in:
Franklin
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 {
|
||||
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
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) {
|
||||
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();
|
||||
|
||||
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>
|
||||
|
||||
<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;
|
||||
|
||||
@ -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
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/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
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 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>
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user