start element of the main page done (Still some imperfections though)
This commit is contained in:
parent
25e22c2a22
commit
b1b6ed620e
29
css/body.css
29
css/body.css
|
@ -4,9 +4,36 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-container {
|
.page-container {
|
||||||
padding-top: 83px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
|
padding-left: 5vw;
|
||||||
|
padding-right: 5vw;
|
||||||
|
padding-top: clamp(85px, 10vw, 160px)
|
||||||
}
|
}
|
||||||
|
/*
|
||||||
|
@media only screen and (min-width: 750px) {
|
||||||
|
.page-container {
|
||||||
|
padding: 0px 50px;
|
||||||
|
padding-top: 85px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (min-width: 1000px) {
|
||||||
|
.page-container {
|
||||||
|
padding: 0px 75px;
|
||||||
|
padding-top: 85px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (min-width: 1500px) {
|
||||||
|
.page-container {
|
||||||
|
padding: 0px 120px;
|
||||||
|
padding-top: 85px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (min-width: 1700px) {
|
||||||
|
.page-container {
|
||||||
|
padding: 0px 200px;
|
||||||
|
padding-top: 85px;
|
||||||
|
}
|
||||||
|
}*/
|
|
@ -218,9 +218,10 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.navbar-item-contact-us {
|
.navbar-item-contact-us {
|
||||||
font-size: 16px;
|
font-size: 13px;
|
||||||
font-family: Poppins;
|
font-family: Poppins;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
color: white;
|
color: white;
|
||||||
background-color: #4C40F7;
|
background-color: #4C40F7;
|
||||||
|
@ -228,23 +229,23 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
height: 64px;
|
height: 45px;
|
||||||
width: 155px;
|
width: 155px;
|
||||||
|
|
||||||
padding: 25px 10px;
|
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
margin-right: 7vw;
|
margin-right: 7vw;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|
||||||
padding: 2px 10px;
|
padding: 0px 5px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
filter: drop-shadow(-15px 10px 50px rgba(76, 64, 247, 0.409));
|
filter: drop-shadow(-10px 5px 15px rgba(76, 64, 247, 0.5));
|
||||||
}
|
}
|
||||||
.navbar-item-contact-us:hover {
|
.navbar-item-contact-us:hover {
|
||||||
scale: 1.1;
|
scale: 1.1;
|
||||||
transition-duration: 0.4s;
|
transition-duration: 0.4s;
|
||||||
background-color: #8982f0;
|
background-color: #8982f0;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
116
css/start.css
116
css/start.css
|
@ -5,35 +5,36 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
height: 600px;
|
height: 600px;
|
||||||
padding: 0px 10vw;
|
|
||||||
}
|
}
|
||||||
.start-section-left-column {
|
.start-section-left-column {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
min-width: 571px;
|
min-width: min(55vw, 800px);
|
||||||
}
|
}
|
||||||
.start-section-left-column-title-nocolor {
|
.start-section-left-column-title-nocolor {
|
||||||
font-family: Poppins;
|
font-family: Poppins;
|
||||||
font-size: 56px;
|
font-size: clamp(30px, 4.5vw, 64px);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
.start-section-left-column-title-colored {
|
.start-section-left-column-title-colored {
|
||||||
font-family: Poppins;
|
font-family: Poppins;
|
||||||
font-size: 56px;
|
font-size: clamp(30px, 4.5vw, 64px);
|
||||||
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: 18px;
|
font-size: clamp(12px, 1.5vw, 18px);
|
||||||
line-height: 32px;
|
line-height: clamp(24px, 3vw, 36px);
|
||||||
|
|
||||||
color: #6B6B6B;
|
color: #6B6B6B;
|
||||||
|
|
||||||
width: 365px;
|
width: clamp(200px, 30vw, 420px);
|
||||||
margin: 24px 0px 30px 0px;
|
margin: 24px 0px 30px 0px;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
@ -50,6 +51,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
filter: drop-shadow(10px 10px 15px rgba(76, 64, 247, 0.5));
|
||||||
}
|
}
|
||||||
.start-section-left-column-button:hover {
|
.start-section-left-column-button:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -76,17 +78,13 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 250px;
|
width: 250px;
|
||||||
height: 88px;
|
height: 88px;
|
||||||
right: 200px;
|
right: 300px;
|
||||||
top: 26px;
|
top: 26px;
|
||||||
|
|
||||||
background: #4C40F7;
|
background: #4C40F7;
|
||||||
box-shadow: 0px 4px 21px rgba(15, 11, 83, 0.15);
|
box-shadow: 0px 4px 21px rgba(15, 11, 83, 0.15);
|
||||||
border-radius: 80px;
|
border-radius: 80px;
|
||||||
|
|
||||||
animation-name: twitch;
|
|
||||||
animation-duration: 8s;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -96,16 +94,12 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 177px;
|
width: 177px;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
right: 15px;
|
right: 115px;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
|
|
||||||
background: #4C40F7;
|
background: #4C40F7;
|
||||||
border-radius: 80px;
|
border-radius: 80px;
|
||||||
|
|
||||||
animation-name: twitch;
|
|
||||||
animation-duration: 11s;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: end;
|
align-items: end;
|
||||||
|
@ -115,26 +109,21 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 177px;
|
width: 177px;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
right: 220px;
|
right: 0;
|
||||||
top: 150px;
|
top: 150px;
|
||||||
|
|
||||||
background: #FFCC00;
|
background: #FFCC00;
|
||||||
border-radius: 80px;
|
border-radius: 80px;
|
||||||
|
|
||||||
animation-name: twitch;
|
|
||||||
animation-duration: 10s;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.start-section-right-column-art-bottom-right-pill {
|
.start-section-right-column-art-bottom-right-pill {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 289px;
|
width: 289px;
|
||||||
height: 88px;
|
height: 88px;
|
||||||
right: -100px;
|
|
||||||
top: 440px;
|
top: 440px;
|
||||||
|
|
||||||
background: #FFCC00;
|
background: #FFCC00;
|
||||||
|
@ -151,6 +140,7 @@
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
line-height: 20px;
|
||||||
white-space: pre-line;
|
white-space: pre-line;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
@ -176,3 +166,81 @@
|
||||||
5% {scale: 1.1;}
|
5% {scale: 1.1;}
|
||||||
10% {scale: 1;}
|
10% {scale: 1;}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media only screen and (min-width: 850px) {
|
||||||
|
.start-section-left-column-title-nocolor {
|
||||||
|
font-size: clamp(30px, 4.5vw, 64px);
|
||||||
|
}
|
||||||
|
.start-section-left-column-title-colored {
|
||||||
|
font-size: clamp(30px, 4.5vw, 64px);
|
||||||
|
|
||||||
|
}
|
||||||
|
.start-section-left-column-description {
|
||||||
|
font-size: clamp(12px, 1.5vw, 18px);
|
||||||
|
line-height: clamp(24px, 3vw, 36px);
|
||||||
|
|
||||||
|
width: clamp(200px, 30vw, 420px);
|
||||||
|
|
||||||
|
margin: 20px 0px 26px 0px;
|
||||||
|
margin-top: clamp(20px, 2.5vw, 50px);
|
||||||
|
margin-bottom: clamp(26px, 3vw, 65px);
|
||||||
|
}
|
||||||
|
.start-section-left-column-button {
|
||||||
|
font-size: clamp(13px, 1.6vw, 20px);
|
||||||
|
padding: clamp(15px, 1.8vw, 25px);
|
||||||
|
width: clamp(150px, 17vw, 250px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-section-right-column {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 370px;
|
||||||
|
height: clamp(100%, 50vw, 750px)
|
||||||
|
}
|
||||||
|
.start-section-right-column-art-top-left-pill {
|
||||||
|
width: clamp(120px, 20vw, 250px);
|
||||||
|
height: clamp(60px, 7vw, 80px);
|
||||||
|
right: min(200px, 20vw);
|
||||||
|
top: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-section-right-column-art-top-right-pill {
|
||||||
|
width: clamp(150px, 18vw, 180px);
|
||||||
|
height: clamp(340px, 40vw, 480px);
|
||||||
|
right: 0px;
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-section-right-column-art-bottom-left-pill {
|
||||||
|
width: clamp(150px, 18vw, 180px);
|
||||||
|
height: clamp(340px, 40vw, 480px);
|
||||||
|
right: min(200px, 20vw);
|
||||||
|
top: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-section-right-column-art-bottom-right-pill {
|
||||||
|
width: clamp(120px, 20vw, 250px);
|
||||||
|
height: clamp(60px, 7vw, 80px);
|
||||||
|
left: clamp(0px, 16vw, 190px);
|
||||||
|
top: clamp(350px, 42vw, 500px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-section-right-column-subject-1-title {
|
||||||
|
font-size: clamp(12px, 1.4vw, 21px);
|
||||||
|
}
|
||||||
|
.start-section-right-column-subject-1-photo {
|
||||||
|
width: clamp(220px, 21vw, 280px);
|
||||||
|
}
|
||||||
|
.start-section-right-column-subject-2-photo {
|
||||||
|
width: clamp(500px, 60vw, 650px);
|
||||||
|
}
|
||||||
|
.start-section-right-column-subject-2-title {
|
||||||
|
font-size: clamp(12px, 1.4vw, 21px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (min-width: 1000px) {
|
||||||
|
}
|
||||||
|
@media only screen and (min-width: 1500px) {
|
||||||
|
}
|
||||||
|
@media only screen and (min-width: 1700px) {
|
||||||
|
}
|
|
@ -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-8e3c467f4ff3a36a_bg.wasm', import.meta.url);
|
input = new URL('bl-frontend-9f36eaf4ad59c9b9_bg.wasm', import.meta.url);
|
||||||
}
|
}
|
||||||
const imports = getImports();
|
const imports = getImports();
|
||||||
|
|
Binary file not shown.
|
@ -0,0 +1,39 @@
|
||||||
|
body {
|
||||||
|
margin: 0; /* Remove body margins */
|
||||||
|
background-color: rgb(250, 248, 248);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: stretch;
|
||||||
|
padding-left: 5vw;
|
||||||
|
padding-right: 5vw;
|
||||||
|
padding-top: clamp(85px, 10vw, 160px)
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
@media only screen and (min-width: 750px) {
|
||||||
|
.page-container {
|
||||||
|
padding: 0px 50px;
|
||||||
|
padding-top: 85px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (min-width: 1000px) {
|
||||||
|
.page-container {
|
||||||
|
padding: 0px 75px;
|
||||||
|
padding-top: 85px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (min-width: 1500px) {
|
||||||
|
.page-container {
|
||||||
|
padding: 0px 120px;
|
||||||
|
padding-top: 85px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (min-width: 1700px) {
|
||||||
|
.page-container {
|
||||||
|
padding: 0px 200px;
|
||||||
|
padding-top: 85px;
|
||||||
|
}
|
||||||
|
}*/
|
|
@ -1,12 +0,0 @@
|
||||||
body {
|
|
||||||
margin: 0; /* Remove body margins */
|
|
||||||
background-color: rgb(250, 248, 248);
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-container {
|
|
||||||
padding-top: 83px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: stretch;
|
|
||||||
}
|
|
|
@ -2,9 +2,9 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Blanco Lorenzo</title>
|
<title>Blanco Lorenzo</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="/body-999aba2b939d4090.css">
|
<link rel="stylesheet" href="/body-543b917958789c41.css">
|
||||||
<link rel="stylesheet" href="/navbar-75e2f3bf53a3fb21.css">
|
<link rel="stylesheet" href="/navbar-b9323c6a829e08b2.css">
|
||||||
<link rel="stylesheet" href="/start-2df6eca8530d601.css">
|
<link rel="stylesheet" href="/start-23334f07d784d520.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>
|
||||||
|
@ -12,9 +12,9 @@
|
||||||
<base href="/">
|
<base href="/">
|
||||||
|
|
||||||
|
|
||||||
<link rel="preload" href="/bl-frontend-8e3c467f4ff3a36a_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
|
<link rel="preload" href="/bl-frontend-9f36eaf4ad59c9b9_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
|
||||||
<link rel="modulepreload" href="/bl-frontend-8e3c467f4ff3a36a.js"></head>
|
<link rel="modulepreload" href="/bl-frontend-9f36eaf4ad59c9b9.js"></head>
|
||||||
<body><script type="module">import init from '/bl-frontend-8e3c467f4ff3a36a.js';init('/bl-frontend-8e3c467f4ff3a36a_bg.wasm');</script><script>(function () {
|
<body><script type="module">import init from '/bl-frontend-9f36eaf4ad59c9b9.js';init('/bl-frontend-9f36eaf4ad59c9b9_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;
|
||||||
|
|
|
@ -218,9 +218,10 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.navbar-item-contact-us {
|
.navbar-item-contact-us {
|
||||||
font-size: 16px;
|
font-size: 13px;
|
||||||
font-family: Poppins;
|
font-family: Poppins;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
color: white;
|
color: white;
|
||||||
background-color: #4C40F7;
|
background-color: #4C40F7;
|
||||||
|
@ -228,23 +229,23 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
height: 64px;
|
height: 45px;
|
||||||
width: 155px;
|
width: 155px;
|
||||||
|
|
||||||
padding: 25px 10px;
|
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
margin-right: 7vw;
|
margin-right: 7vw;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|
||||||
padding: 2px 10px;
|
padding: 0px 5px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
filter: drop-shadow(-15px 10px 50px rgba(76, 64, 247, 0.409));
|
filter: drop-shadow(-10px 5px 15px rgba(76, 64, 247, 0.5));
|
||||||
}
|
}
|
||||||
.navbar-item-contact-us:hover {
|
.navbar-item-contact-us:hover {
|
||||||
scale: 1.1;
|
scale: 1.1;
|
||||||
transition-duration: 0.4s;
|
transition-duration: 0.4s;
|
||||||
background-color: #8982f0;
|
background-color: #8982f0;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -5,35 +5,36 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
height: 600px;
|
height: 600px;
|
||||||
padding: 0px 10vw;
|
|
||||||
}
|
}
|
||||||
.start-section-left-column {
|
.start-section-left-column {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
min-width: 571px;
|
min-width: min(55vw, 800px);
|
||||||
}
|
}
|
||||||
.start-section-left-column-title-nocolor {
|
.start-section-left-column-title-nocolor {
|
||||||
font-family: Poppins;
|
font-family: Poppins;
|
||||||
font-size: 56px;
|
font-size: clamp(30px, 4.5vw, 64px);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
.start-section-left-column-title-colored {
|
.start-section-left-column-title-colored {
|
||||||
font-family: Poppins;
|
font-family: Poppins;
|
||||||
font-size: 56px;
|
font-size: clamp(30px, 4.5vw, 64px);
|
||||||
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: 18px;
|
font-size: clamp(12px, 1.5vw, 18px);
|
||||||
line-height: 32px;
|
line-height: clamp(24px, 3vw, 36px);
|
||||||
|
|
||||||
color: #6B6B6B;
|
color: #6B6B6B;
|
||||||
|
|
||||||
width: 365px;
|
width: clamp(200px, 30vw, 420px);
|
||||||
margin: 24px 0px 30px 0px;
|
margin: 24px 0px 30px 0px;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
@ -50,6 +51,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
filter: drop-shadow(10px 10px 15px rgba(76, 64, 247, 0.5));
|
||||||
}
|
}
|
||||||
.start-section-left-column-button:hover {
|
.start-section-left-column-button:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -76,17 +78,13 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 250px;
|
width: 250px;
|
||||||
height: 88px;
|
height: 88px;
|
||||||
right: 200px;
|
right: 300px;
|
||||||
top: 26px;
|
top: 26px;
|
||||||
|
|
||||||
background: #4C40F7;
|
background: #4C40F7;
|
||||||
box-shadow: 0px 4px 21px rgba(15, 11, 83, 0.15);
|
box-shadow: 0px 4px 21px rgba(15, 11, 83, 0.15);
|
||||||
border-radius: 80px;
|
border-radius: 80px;
|
||||||
|
|
||||||
animation-name: twitch;
|
|
||||||
animation-duration: 8s;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -96,16 +94,12 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 177px;
|
width: 177px;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
right: 15px;
|
right: 115px;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
|
|
||||||
background: #4C40F7;
|
background: #4C40F7;
|
||||||
border-radius: 80px;
|
border-radius: 80px;
|
||||||
|
|
||||||
animation-name: twitch;
|
|
||||||
animation-duration: 11s;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: end;
|
align-items: end;
|
||||||
|
@ -115,26 +109,21 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 177px;
|
width: 177px;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
right: 220px;
|
right: 0;
|
||||||
top: 150px;
|
top: 150px;
|
||||||
|
|
||||||
background: #FFCC00;
|
background: #FFCC00;
|
||||||
border-radius: 80px;
|
border-radius: 80px;
|
||||||
|
|
||||||
animation-name: twitch;
|
|
||||||
animation-duration: 10s;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.start-section-right-column-art-bottom-right-pill {
|
.start-section-right-column-art-bottom-right-pill {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 289px;
|
width: 289px;
|
||||||
height: 88px;
|
height: 88px;
|
||||||
right: -100px;
|
|
||||||
top: 440px;
|
top: 440px;
|
||||||
|
|
||||||
background: #FFCC00;
|
background: #FFCC00;
|
||||||
|
@ -151,6 +140,7 @@
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
line-height: 20px;
|
||||||
white-space: pre-line;
|
white-space: pre-line;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
@ -176,3 +166,81 @@
|
||||||
5% {scale: 1.1;}
|
5% {scale: 1.1;}
|
||||||
10% {scale: 1;}
|
10% {scale: 1;}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media only screen and (min-width: 850px) {
|
||||||
|
.start-section-left-column-title-nocolor {
|
||||||
|
font-size: clamp(30px, 4.5vw, 64px);
|
||||||
|
}
|
||||||
|
.start-section-left-column-title-colored {
|
||||||
|
font-size: clamp(30px, 4.5vw, 64px);
|
||||||
|
|
||||||
|
}
|
||||||
|
.start-section-left-column-description {
|
||||||
|
font-size: clamp(12px, 1.5vw, 18px);
|
||||||
|
line-height: clamp(24px, 3vw, 36px);
|
||||||
|
|
||||||
|
width: clamp(200px, 30vw, 420px);
|
||||||
|
|
||||||
|
margin: 20px 0px 26px 0px;
|
||||||
|
margin-top: clamp(20px, 2.5vw, 50px);
|
||||||
|
margin-bottom: clamp(26px, 3vw, 65px);
|
||||||
|
}
|
||||||
|
.start-section-left-column-button {
|
||||||
|
font-size: clamp(13px, 1.6vw, 20px);
|
||||||
|
padding: clamp(15px, 1.8vw, 25px);
|
||||||
|
width: clamp(150px, 17vw, 250px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-section-right-column {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 370px;
|
||||||
|
height: clamp(100%, 50vw, 750px)
|
||||||
|
}
|
||||||
|
.start-section-right-column-art-top-left-pill {
|
||||||
|
width: clamp(120px, 20vw, 250px);
|
||||||
|
height: clamp(60px, 7vw, 80px);
|
||||||
|
right: min(200px, 20vw);
|
||||||
|
top: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-section-right-column-art-top-right-pill {
|
||||||
|
width: clamp(150px, 18vw, 180px);
|
||||||
|
height: clamp(340px, 40vw, 480px);
|
||||||
|
right: 0px;
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-section-right-column-art-bottom-left-pill {
|
||||||
|
width: clamp(150px, 18vw, 180px);
|
||||||
|
height: clamp(340px, 40vw, 480px);
|
||||||
|
right: min(200px, 20vw);
|
||||||
|
top: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-section-right-column-art-bottom-right-pill {
|
||||||
|
width: clamp(120px, 20vw, 250px);
|
||||||
|
height: clamp(60px, 7vw, 80px);
|
||||||
|
left: clamp(0px, 16vw, 190px);
|
||||||
|
top: clamp(350px, 42vw, 500px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-section-right-column-subject-1-title {
|
||||||
|
font-size: clamp(12px, 1.4vw, 21px);
|
||||||
|
}
|
||||||
|
.start-section-right-column-subject-1-photo {
|
||||||
|
width: clamp(220px, 21vw, 280px);
|
||||||
|
}
|
||||||
|
.start-section-right-column-subject-2-photo {
|
||||||
|
width: clamp(500px, 60vw, 650px);
|
||||||
|
}
|
||||||
|
.start-section-right-column-subject-2-title {
|
||||||
|
font-size: clamp(12px, 1.4vw, 21px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (min-width: 1000px) {
|
||||||
|
}
|
||||||
|
@media only screen and (min-width: 1500px) {
|
||||||
|
}
|
||||||
|
@media only screen and (min-width: 1700px) {
|
||||||
|
}
|
|
@ -20,7 +20,7 @@
|
||||||
"es": "Comencemos >"
|
"es": "Comencemos >"
|
||||||
},
|
},
|
||||||
"start.right-column-subject-1-title": {
|
"start.right-column-subject-1-title": {
|
||||||
"en": "Web Development &\nSystems",
|
"en": "Web Design &\nDevelopment",
|
||||||
"es": "Desarrollo Web & Sistemas"
|
"es": "Desarrollo Web & Sistemas"
|
||||||
},
|
},
|
||||||
"start.right-column-subject-2-title": {
|
"start.right-column-subject-2-title": {
|
||||||
|
|
|
@ -2,3 +2,4 @@ pub mod not_found;
|
||||||
pub mod main_page;
|
pub mod main_page;
|
||||||
pub mod about;
|
pub mod about;
|
||||||
pub mod start;
|
pub mod start;
|
||||||
|
pub mod services;
|
|
@ -0,0 +1,8 @@
|
||||||
|
use yew::prelude::*;
|
||||||
|
|
||||||
|
#[function_component(ServicesPage)]
|
||||||
|
pub fn services_page() -> Html {
|
||||||
|
html! {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
|
@ -31,14 +31,14 @@ pub fn start_page() -> Html {
|
||||||
<div class={"start-section-right-column-art-top-left-pill"}>
|
<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 class={"start-section-right-column-subject-1-title"}>{t!("start.right-column-subject-1-title", current_lang())}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class={"start-section-right-column-art-top-right-pill"}>
|
<div class={"start-section-right-column-art-bottom-right-pill"}>
|
||||||
<img class={"start-section-right-column-subject-1-photo"} src={"images/subject-1-picture.png"}/>
|
<div class={"start-section-right-column-subject-2-title"}>{t!("start.right-column-subject-2-title", current_lang())}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class={"start-section-right-column-art-bottom-left-pill"}>
|
<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"}/>
|
<img class={"start-section-right-column-subject-2-photo"} src={"images/subject-2-picture.png"}/>
|
||||||
</div>
|
</div>
|
||||||
<div class={"start-section-right-column-art-bottom-right-pill"}>
|
<div class={"start-section-right-column-art-top-right-pill"}>
|
||||||
<div class={"start-section-right-column-subject-2-title"}>{t!("start.right-column-subject-2-title", current_lang())}</div>
|
<img class={"start-section-right-column-subject-1-photo"} src={"images/subject-1-picture.png"}/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue