start element of the main page done (Still some imperfections though)

css/body.css

@@ -4,9 +4,36 @@ body {
 }
 
 .page-container {
-    padding-top: 83px;
     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;
+    }
+}*/

css/navbar.css

@@ -218,9 +218,10 @@
         cursor: pointer;
     }
     .navbar-item-contact-us {
-        font-size: 16px;
+        font-size: 13px;
         font-family: Poppins;
         text-align: center;
+        font-weight: 600;
 
         color: white;
         background-color: #4C40F7;
@@ -228,23 +229,23 @@
         flex-direction: column;
         justify-content: center;
 
-        height: 64px;
+        height: 45px;
         width: 155px;
 
-        padding: 25px 10px;
         margin-top: 10px;
         margin-right: 7vw;
         margin-bottom: 10px;
         
-        padding: 2px 10px;
+        padding: 0px 5px;
         border-radius: 8px;
         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 {
         scale: 1.1;
         transition-duration: 0.4s;
         background-color: #8982f0;
+        
     }
 }

css/start.css

@@ -5,35 +5,36 @@
     align-items: center;
     
     height: 600px;
-    padding: 0px 10vw;
 }
 .start-section-left-column {
     display: flex;
     flex-direction: column;
     justify-content: center;
+    align-items: center;
     align-items: start;
-    min-width: 571px;
+    min-width: min(55vw, 800px);
 }
 .start-section-left-column-title-nocolor {
     font-family: Poppins;
-    font-size: 56px;
+    font-size: clamp(30px, 4.5vw, 64px);
     font-weight: 600;
     cursor: default;
 }
 .start-section-left-column-title-colored {
     font-family: Poppins;
-    font-size: 56px;
+    font-size: clamp(30px, 4.5vw, 64px);
     color: #FF6800;
     font-weight: 600;
     cursor: default;
 }
 .start-section-left-column-description {
     font-family: Poppins;
-    font-size: 18px;
+    font-size: clamp(12px, 1.5vw, 18px);
-    line-height: 32px;
+    line-height: clamp(24px, 3vw, 36px);
+
     color: #6B6B6B;
 
-    width: 365px;
+    width: clamp(200px, 30vw, 420px);
     margin: 24px 0px 30px 0px;
     cursor: default;
 }
@@ -50,6 +51,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    filter: drop-shadow(10px 10px 15px rgba(76, 64, 247, 0.5));
 }
 .start-section-left-column-button:hover {
     cursor: pointer;
@@ -76,17 +78,13 @@
     position: absolute;
     width: 250px;
     height: 88px;
-    right: 200px;
+    right: 300px;
     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;
@@ -96,16 +94,12 @@
     position: absolute;
     width: 177px;
     height: 400px;
-    right: 15px;
+    right: 115px;
     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;
@@ -115,26 +109,21 @@
     position: absolute;
     width: 177px;
     height: 400px;
-    right: 220px;
+    right: 0;
     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;
+    align-items: end;
 }
 
 .start-section-right-column-art-bottom-right-pill {
     position: absolute;
     width: 289px;
     height: 88px;
-    right: -100px;
     top: 440px;
 
     background: #FFCC00;
@@ -151,6 +140,7 @@
     color: white;
     font-size: 18px;
     font-weight: 600;
+    line-height: 20px;
     white-space: pre-line;
     text-align: center;
 }
@@ -176,3 +166,81 @@
     5% {scale: 1.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) {
+}

dist/bl-frontend-9f36eaf4ad59c9b9.js

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

dist/body-543b917958789c41.css

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

dist/body-999aba2b939d4090.css

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

dist/index.html

@@ -2,9 +2,9 @@
         <meta charset="utf-8">
         <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">
         <script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script>
@@ -12,9 +12,9 @@
         <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 url = protocol + '//' + window.location.host + '/_trunk/ws';
     var poll_interval = 5000;

dist/navbar-b9323c6a829e08b2.css

@@ -218,9 +218,10 @@
         cursor: pointer;
     }
     .navbar-item-contact-us {
-        font-size: 16px;
+        font-size: 13px;
         font-family: Poppins;
         text-align: center;
+        font-weight: 600;
 
         color: white;
         background-color: #4C40F7;
@@ -228,23 +229,23 @@
         flex-direction: column;
         justify-content: center;
 
-        height: 64px;
+        height: 45px;
         width: 155px;
 
-        padding: 25px 10px;
         margin-top: 10px;
         margin-right: 7vw;
         margin-bottom: 10px;
         
-        padding: 2px 10px;
+        padding: 0px 5px;
         border-radius: 8px;
         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 {
         scale: 1.1;
         transition-duration: 0.4s;
         background-color: #8982f0;
+        
     }
 }

dist/start-23334f07d784d520.css

@@ -5,35 +5,36 @@
     align-items: center;
     
     height: 600px;
-    padding: 0px 10vw;
 }
 .start-section-left-column {
     display: flex;
     flex-direction: column;
     justify-content: center;
+    align-items: center;
     align-items: start;
-    min-width: 571px;
+    min-width: min(55vw, 800px);
 }
 .start-section-left-column-title-nocolor {
     font-family: Poppins;
-    font-size: 56px;
+    font-size: clamp(30px, 4.5vw, 64px);
     font-weight: 600;
     cursor: default;
 }
 .start-section-left-column-title-colored {
     font-family: Poppins;
-    font-size: 56px;
+    font-size: clamp(30px, 4.5vw, 64px);
     color: #FF6800;
     font-weight: 600;
     cursor: default;
 }
 .start-section-left-column-description {
     font-family: Poppins;
-    font-size: 18px;
+    font-size: clamp(12px, 1.5vw, 18px);
-    line-height: 32px;
+    line-height: clamp(24px, 3vw, 36px);
+
     color: #6B6B6B;
 
-    width: 365px;
+    width: clamp(200px, 30vw, 420px);
     margin: 24px 0px 30px 0px;
     cursor: default;
 }
@@ -50,6 +51,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    filter: drop-shadow(10px 10px 15px rgba(76, 64, 247, 0.5));
 }
 .start-section-left-column-button:hover {
     cursor: pointer;
@@ -76,17 +78,13 @@
     position: absolute;
     width: 250px;
     height: 88px;
-    right: 200px;
+    right: 300px;
     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;
@@ -96,16 +94,12 @@
     position: absolute;
     width: 177px;
     height: 400px;
-    right: 15px;
+    right: 115px;
     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;
@@ -115,26 +109,21 @@
     position: absolute;
     width: 177px;
     height: 400px;
-    right: 220px;
+    right: 0;
     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;
+    align-items: end;
 }
 
 .start-section-right-column-art-bottom-right-pill {
     position: absolute;
     width: 289px;
     height: 88px;
-    right: -100px;
     top: 440px;
 
     background: #FFCC00;
@@ -151,6 +140,7 @@
     color: white;
     font-size: 18px;
     font-weight: 600;
+    line-height: 20px;
     white-space: pre-line;
     text-align: center;
 }
@@ -176,3 +166,81 @@
     5% {scale: 1.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) {
+}

locales/start/start.json

@@ -20,7 +20,7 @@
         "es": "Comencemos >"
     },
     "start.right-column-subject-1-title": {
-        "en": "Web Development &\nSystems",
+        "en": "Web Design &\nDevelopment",
         "es": "Desarrollo Web & Sistemas"
     },
     "start.right-column-subject-2-title": {

src/pages/mod.rs

@@ -1,4 +1,5 @@
 pub mod not_found;
 pub mod main_page;
 pub mod about;
-pub mod start;
+pub mod start;
+pub mod services;

src/pages/services.rs

@@ -0,0 +1,8 @@
+use yew::prelude::*;
+
+#[function_component(ServicesPage)]
+pub fn services_page() -> Html {
+    html! {
+        
+    }
+}

src/pages/start.rs

@@ -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-subject-1-title"}>{t!("start.right-column-subject-1-title", current_lang())}</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 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-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>