Banner home, margenes home

CyberAula · May 31, 2024 · 5ca59bf · 5ca59bf
1 parent 45c47cb
commit 5ca59bf
Show file tree

Hide file tree

Showing 12 changed files with 276 additions and 89 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -90,6 +90,10 @@
 @import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i");
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
+@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
 @media (min-width: 150px) {
   .course {
     height: 100%;
@@ -271,6 +275,14 @@
   .lang_switcher svg {
     margin: 0rem 0.6rem 0 0;
   }
+  .lang_switcher a:last-child {
+    margin-left: 0.26rem;
+  }
+  .nav_bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
 }
 @media (min-width: 600px) {
   .lang_switcher {
@@ -1613,6 +1625,69 @@
   font-size: 12px;
 }
 
+.paper_link {
+  outline: none;
+  border: none;
+  background: none;
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  justify-content: left;
+  margin-top: 0.6rem;
+}
+.paper_link svg {
+  align-self: center;
+  margin-left: 0.6rem;
+}
+.paper_link a {
+  border: 1px solid #4f1be4;
+  color: #4f1be4;
+  border-radius: 24px;
+  padding: 0.5rem 1.2rem 0.7rem 1.4rem;
+  transition: 200ms ease-in-out;
+  display: flex;
+  align-content: center;
+}
+.paper_link a p {
+  font-weight: 500;
+}
+.paper_link a:hover {
+  color: white;
+  transition: 200ms ease-in-out;
+  background-color: #5441ff;
+}
+.paper_link a:active {
+  color: white;
+  transition: 200ms ease-in-out;
+  background-color: #5441ff;
+}
+
+@media (min-width: 150px) {
+  .group_description img {
+    width: 100%;
+    height: 25.6vw;
+    -o-object-fit: cover;
+       object-fit: cover;
+    -o-object-position: 50% 0;
+       object-position: 50% 0;
+  }
+}
+@media (min-width: 600px) {
+  .group_description img {
+    width: auto;
+    height: 25rem;
+  }
+}
+@media (min-width: 900px) {
+  .group_description img {
+    height: 35rem;
+  }
+}
+@media (min-width: 1400px) {
+  .group_description img {
+    height: 50rem;
+  }
+}
 @media screen and (min-width: 150px) {
   h1 {
     font-family: "Montserrat", sans-serif;
@@ -2049,9 +2124,6 @@ header li a:active {
   transition: none;
 }
 
-.home {
-  margin: 8rem 4rem 0 4rem;
-}
 .home a:hover {
   color: inherit;
 }
@@ -2061,7 +2133,6 @@ header li a:active {
 .home .head {
   display: flex;
   justify-content: left;
-  padding: 6rem 6rem 2rem 0rem;
 }
 .home .head .group_logo {
   display: inline-block;
@@ -2540,9 +2611,6 @@ RESPONSIVE
     justify-content: space-between;
     font-size: 1.2rem;
   }
-  .home {
-    margin: 0 4rem 0 4rem;
-  }
   .home .body {
     display: flex;
     flex-flow: column;
@@ -2558,20 +2626,11 @@ RESPONSIVE
   }
 }
 @media (max-width: 800px) {
-  .home {
-    margin: 0 2rem 0 2rem;
-  }
   .home .group_logo {
     width: 20%;
     height: 10%;
     border-radius: 50%;
   }
-  .home h1 {
-    font-size: 3rem;
-  }
-  .home h2 {
-    font-size: 1.5rem;
-  }
   .home .body {
     display: block;
     width: 100%;
@@ -2693,7 +2752,6 @@ RESPONSIVE
     left: 0;
   }
   .home {
-    margin: 0.4rem;
     padding: 1rem 0 0 0;
   }
   .home h2 {

diff --git a/app/globals.css.map b/app/globals.css.map
diff --git a/app/page.js b/app/page.js
@@ -12,6 +12,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faAward } from '@fortawesome/free-solid-svg-icons';
 import { faArrowRightLong } from '@fortawesome/free-solid-svg-icons';
 
+
 import { useTranslation } from 'react-i18next';
 
 
@@ -31,15 +32,18 @@ export default function Home() {
         <div className="parallax__layer parallax__layer--base">
           <main>
             <section className="home">
-              <div className="head">
-                <div className="group_description">
-                  <h1>
+              <div className="head ">
+                <div className="group_description block sm:flex sm:flew-row sm:justify-between sm:gap-8 sm:items-center ">
+                  <h1 className="ml-4 sm:ml-8 md:ml-12 lg:ml-16 xl:ml-20 2xl:ml-24">
                     <b>{t('front.title')}, </b>{t('front.title2')}
                   </h1>
+                  <img className="mt-4 sm:mt-0"
+                    src="/assets/img/banner_prov.svg"
+                  />
                 </div>
               </div>
 
-              <div className="body  sm:mx-2 md:mx-14  lg:mx-36 xl:mx-44 2xl:mx-60">
+              <div className="body lg:mx-36 md:mx-14 sm:mx-8 mx-4 lg:my-12 md:my-8 sm:my-4 my-4 xl:mx-44 2xl:mx-60">
                 <section className="award_section">
                   <h2> {t('front.awardH2')} </h2>
                   <div className="award_card">

diff --git a/app/sass/main.css b/app/sass/main.css
@@ -54,6 +54,10 @@
 @import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i");
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
+@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
 @media (min-width: 150px) {
   .course {
     height: 100%;
@@ -235,6 +239,14 @@
   .lang_switcher svg {
     margin: 0rem 0.6rem 0 0;
   }
+  .lang_switcher a:last-child {
+    margin-left: 0.26rem;
+  }
+  .nav_bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
 }
 @media (min-width: 600px) {
   .lang_switcher {
@@ -1577,6 +1589,69 @@
   font-size: 12px;
 }
 
+.paper_link {
+  outline: none;
+  border: none;
+  background: none;
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  justify-content: left;
+  margin-top: 0.6rem;
+}
+.paper_link svg {
+  align-self: center;
+  margin-left: 0.6rem;
+}
+.paper_link a {
+  border: 1px solid #4f1be4;
+  color: #4f1be4;
+  border-radius: 24px;
+  padding: 0.5rem 1.2rem 0.7rem 1.4rem;
+  transition: 200ms ease-in-out;
+  display: flex;
+  align-content: center;
+}
+.paper_link a p {
+  font-weight: 500;
+}
+.paper_link a:hover {
+  color: white;
+  transition: 200ms ease-in-out;
+  background-color: #5441ff;
+}
+.paper_link a:active {
+  color: white;
+  transition: 200ms ease-in-out;
+  background-color: #5441ff;
+}
+
+@media (min-width: 150px) {
+  .group_description img {
+    width: 100%;
+    height: 25.6vw;
+    -o-object-fit: cover;
+       object-fit: cover;
+    -o-object-position: 50% 0;
+       object-position: 50% 0;
+  }
+}
+@media (min-width: 600px) {
+  .group_description img {
+    width: auto;
+    height: 25rem;
+  }
+}
+@media (min-width: 900px) {
+  .group_description img {
+    height: 35rem;
+  }
+}
+@media (min-width: 1400px) {
+  .group_description img {
+    height: 50rem;
+  }
+}
 @media screen and (min-width: 150px) {
   h1 {
     font-family: "Montserrat", sans-serif;
@@ -2013,19 +2088,12 @@ header li a:active {
   transition: none;
 }
 
-.home {
-  margin: 8rem 4rem 0 4rem;
-}
-.home a:hover {
-  color: inherit;
-}
 .home h1 {
   font-weight: 500;
 }
 .home .head {
   display: flex;
   justify-content: left;
-  padding: 6rem 6rem 2rem 0rem;
 }
 .home .head .group_logo {
   display: inline-block;
@@ -2474,9 +2542,6 @@ a {
   text-decoration: none;
   color: inherit;
 }
-a:visited {
-  color: inherit;
-}
 
 /* &::selection {
       background-color: red;
@@ -2504,9 +2569,6 @@ RESPONSIVE
     justify-content: space-between;
     font-size: 1.2rem;
   }
-  .home {
-    margin: 0 4rem 0 4rem;
-  }
   .home .body {
     display: flex;
     flex-flow: column;
@@ -2522,20 +2584,11 @@ RESPONSIVE
   }
 }
 @media (max-width: 800px) {
-  .home {
-    margin: 0 2rem 0 2rem;
-  }
   .home .group_logo {
     width: 20%;
     height: 10%;
     border-radius: 50%;
   }
-  .home h1 {
-    font-size: 3rem;
-  }
-  .home h2 {
-    font-size: 1.5rem;
-  }
   .home .body {
     display: block;
     width: 100%;
@@ -2657,7 +2710,6 @@ RESPONSIVE
     left: 0;
   }
   .home {
-    margin: 0.4rem;
     padding: 1rem 0 0 0;
   }
   .home h2 {

diff --git a/app/sass/main.css.map b/app/sass/main.css.map