Finished start element for only 1200px+ window

css/navbar.css

@@ -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;
+    scale: 1.15;
-    font-weight: bold;
     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;
+    }
 }

css/start.css

@@ -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;}
+}

dist/bl-frontend-8e3c467f4ff3a36a.js

@@ -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();
 

dist/index.html

@@ -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="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 url = protocol + '//' + window.location.host + '/_trunk/ws';
     var poll_interval = 5000;

dist/navbar-75e2f3bf53a3fb21.css

@@ -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;
+    scale: 1.15;
-    font-weight: bold;
     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;
+    }
 }

dist/start-2df6eca8530d601.css

@@ -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;}
+}

index.html

@@ -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>

locales/start/start.json

@@ -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"
+    }
+}

src/pages/start.rs

@@ -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>
+    }
 }