19-12-2023

andremmsilva · Dec 19, 2023 · c50f20f · c50f20f
1 parent 8c5bd9b
commit c50f20f
Show file tree

Hide file tree

Showing 4 changed files with 130 additions and 89 deletions.
diff --git a/index.html b/index.html
@@ -11,6 +11,7 @@
   <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap"
     rel="stylesheet">
   <link rel="stylesheet" href="./static/style.css">
+  <link rel="stylesheet" href="./static/carousel.css">
   <link rel="stylesheet" href="./static/custom_buttons.css">
   <link href="./images/biv.ico" rel="icon">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
@@ -59,36 +60,36 @@
     </div>
   </nav>
 
-  <div class="container-fluid elipses">
+  <div class="container-fluid elipses pb-5">
     <div class="container col-xxl-8 px-4 py-5">
-      <div class="row d-flex flex-lg-row align-items-center justify-content-between g-5 py-5">
+      <div class="row d-flex flex-lg-row align-items-center justify-content-between g-5 pt-5">
         <div class="col-12 col-sm-10 col-lg-6">
           <img src="./images/BIV_newlogo_blue.png" class="d-block mx-auto img-fluid" alt="BIV Logo" loading="lazy">
         </div>
         <div class="col-lg-6">
           <div class="row">
             <div class="container mx-md-4 my-4 text-center">
               <div id="open-cerimony-card" class="p-4 rounded-4 shadow text-light">
-                <h1>Open Cerimony</h1>
-                <h1 class="mt-4">20 de fevereiro</h1>
+                <h1 class="fs-1">Cerimónia de abertura</h1>
+                <h1 class="mt-4 fs-2">22 de fevereiro</h1>
               </div>
             </div>
           </div>
           <div class="row">
             <div class="container mx-md-4 my-4 text-center">
               <div id="inside-days-card" class="p-4 rounded-4 shadow text-light">
-                <h1>Inside Days</h1>
-                <h1 class="mt-4">Maio e Junho</h1>
+                <h1 class="fs-1">Inside Days</h1>
+                <h1 class="mt-4 fs-2">Maio e Junho</h1>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
 
-    <div class="text-center pb-5">
-      <h1 class="display-4 biv-color-text wide-letter-spacing">What is BIV?</h1>
-      <div class="col-lg-6 col-xl-4 mx-auto bg-body-secondary p-5 rounded-4">
+    <div class="px-4 py-5 mt-3 text-center">
+      <h1 class="display-4 fw-semibold mb-4 biv-color-text">What is BIV?</h1>
+      <div id="what-is-biv-box" class="col-lg-6 mx-auto p-5 rounded-4">
         <p class="lead biv-color-text">
           BEST Inside View (BIV) is a job shadowing event brought to you by BEST Lisbon.
           This event is divided into an opening cerimony which will take place on x and the Inside Days in
@@ -109,52 +110,67 @@ <h1 class="display-4 biv-color-text wide-letter-spacing">What is BIV?</h1>
     </div>
   </div>
 
-  <div id="why-participate" class="p-5">
-    <div class="container-lg my-5">
-      <div class="text-end mb-5">
-        <h1 class="display-1 fw-bold text-light">Why participate?</h1>
+  <div id="why-participate" class="container-fluid py-5">
+    <div class="container-lg" style="background-color: rgb(67, 83, 163); padding: 1rem;">
+      <div class="row text-center mb-5">
+        <div class="col text-end">
+          <h1 class="display-4 fw-bold text-light">Why participate?</h1>
+        </div>
       </div>
       <div class="row">
-        <div class="col-md">
-          <div class="p-4 m-5 text-center text-wrap text-light border border-2 rounded-4">
-            <p class="fs-5 fw-light">Learn more about what your favorite company actually does.</p>
+        <div class="col-lg col-md-12 col-sm-12 m-4">
+          <div class="card h-100 border-white border-2 rounded rounded-4 text-white bg-transparent">
+            <div class="card-body text-center">
+              <p class="fs-5">Learn more about what your favorite company actually does.</p>
+            </div>
           </div>
         </div>
-        <div class="col-md">
-          <div class="p-4 m-5 text-center text-wrap text-light border border-2 rounded-4">
-            <p class="fs-5 fw-light">Learn more about what your favorite company actually does.</p>
+        <div class="col-lg col-md-12 col-sm-12 m-4">
+          <div class="card h-100 border-white border-2 rounded rounded-4 text-white bg-transparent">
+            <div class="card-body text-center">
+              <p class="fs-5">Get an insight into the working life and culture of companies.</p>
+            </div>
           </div>
         </div>
-        <div class="col-md">
-          <div class="p-4 m-5 text-center text-wrap text-light border border-2 rounded-4">
-            <p class="fs-5 fw-light">Learn more about what your favorite company actually does.</p>
+        <div class="col-lg col-md-12 col-sm-12 m-4">
+          <div class="card h-100 border-white border-2 rounded rounded-4 text-white bg-transparent">
+            <div class="card-body text-center">
+              <p class="fs-5">Obtain a different perspective on your future work from others.
+              </p>
+            </div>
           </div>
         </div>
       </div>
       <div class="row">
-        <div class="col-md">
-          <div class="p-4 m-5 text-center text-wrap text-light border border-2 rounded-4">
-            <p class="fs-5 fw-light">Learn more about what your favorite company actually does.</p>
+        <div class="col-lg col-md-12 col-sm-12 m-4">
+          <div class="card h-100 border-white border-2 rounded rounded-4 text-white bg-transparent">
+            <div class="card-body text-center">
+              <p class="fs-5">Expands your network and helps you make professional contacts.</p>
+            </div>
           </div>
         </div>
-        <div class="col-md">
-          <div class="p-4 m-5 text-center text-wrap text-light border border-2 rounded-4">
-            <p class="fs-5 fw-light">Learn more about what your favorite company actually does.</p>
+        <div class="col-lg col-md-12 col-sm-12 m-4">
+          <div class="card h-100 border-white border-2 rounded rounded-4 text-white bg-transparent">
+            <div class="card-body text-center">
+              <p class="fs-5">Practice your interpersonal skills in a professional setting.</p>
+            </div>
           </div>
         </div>
-        <div class="col-md">
-          <div class="p-4 m-5 text-center text-wrap text-light border border-2 rounded-4">
-            <p class="fs-5 fw-light">Learn more about what your favorite company actually does.</p>
+        <div class="col-lg col-md-12 col-sm-12 m-4">
+          <div class="card h-100 border-white border-2 rounded rounded-4 text-white bg-transparent">
+            <div class="card-body text-center">
+              <p class="fs-5">Discover your potential and the challenges you'll face everyday.</p>
+            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 
-  <section id="past-editions" class="text-center py-5">
+  <section id="past-editions" class="text-center elipses py-5">
     <h1 class="display-4 biv-color-text wide-letter-spacing">Past Editions</h1>
     <div class="position-relative">
-      <div id="imgcarousel-container" class="position-relative mt-5">
+      <div id="imgcarousel-container" class="position-relative my-5">
         <div id="imgcarousel">
           <div class="itemcarousel">
             <img class="carousel-image" src="./images/carousel/biv2019_1.png" alt="Image 1">
@@ -222,13 +238,13 @@ <h1 class="display-1 biv-color-text">Partners</h1>
     </div>
   </div>
 
-  <div id="testimonials" class="py-5 container-fluid">
+  <div id="testimonials" class="pt-5 container-fluid elipses">
     <div class="container-lg text-center pt-4">
-      <h1 class="display-3 fw-semibold biv-color-text wide-letter-spacing">Testimonials</h1>
+      <h1 class="display-3 fw-semibold biv-color-text wide-letter-spacing mb-5">Testimonials</h1>
     </div>
     <img src="images/testemunhocarrossel.png" alt="Testemunhos" class="p-4 d-block mx-auto img-fluid">
-    <div class="container-lg">
-      <h1 class="mt-5 display-1 fw-semibold biv-color-text">FAQS</h1>
+    <div class="container-lg mt-5">
+      <h1 class="mt-5 mb-0 display-1 fw-semibold biv-color-text">FAQS</h1>
     </div>
   </div>
 

diff --git a/scripts/index.js b/scripts/index.js
@@ -28,8 +28,12 @@ function renderCarousel() {
     carouselContainer.style.width = carouselWidth.toString().concat("px");
     if (w < 768) {
         carouselItemWidth = carouselWidth - 8;
+        prevBtn.children[0].className = "bi bi-arrow-left-square-fill text-light";
+        nextBtn.children[0].className = "bi bi-arrow-right-square-fill text-light";
     } else {
         carouselItemWidth = Math.floor(carouselWidth / 3) - 8;
+        prevBtn.children[0].className = "bi bi-chevron-left text-dark";
+        nextBtn.children[0].className = "bi bi-chevron-right text-dark";
     }
     carouselItemHeight = Math.min(carouselItemWidth, maxImageHeight);
     for (let i = 0; i < carousel.children.length; i++) {

diff --git a/static/carousel.css b/static/carousel.css
@@ -0,0 +1,59 @@
+#imgcarousel-container {
+    margin-left: auto;
+    margin-right: auto;
+    overflow: hidden !important;
+    width: 0px;
+    max-width: 95%;
+}
+
+#imgcarousel {
+    display: flex;
+    transition: transform 0.5s ease-in-out;
+}
+
+.itemcarousel {
+    width: 0px;
+    /* Adjust the width as needed */
+    height: 0px;
+    /* Adjust the height as needed */
+    margin: 4px;
+    /* Adjust the margin as needed */
+}
+
+.carousel-image {
+    object-fit: cover;
+}
+
+.carousel-btn {
+    display: none;
+    border-radius: 15px;
+    /* box-shadow: 10px 10px 5px black; */
+    cursor: pointer;
+    border: none;
+    background: none;
+    outline: none;
+    position: absolute;
+    z-index: 1;
+    margin: 4px;
+    transition: font-size 0.3s ease-out;
+}
+
+#carousel-prev-btn {
+    bottom: 50%;
+    transform: translateY(50%);
+    left: 5%;
+}
+
+#carousel-prev-btn:active {
+    font-size: calc(0.663rem + .9vw) !important;
+}
+
+#carousel-next-btn {
+    bottom: 50%;
+    transform: translateY(50%);
+    right: 5%;
+}
+
+#carousel-next-btn:active {
+    font-size: calc(0.663rem + .9vw) !important;
+}
diff --git a/static/style.css b/static/style.css
@@ -61,64 +61,25 @@ body {
     background: rgba(255, 255, 255, .9);
 }
 
-#imgcarousel-container {
-    margin-left: auto;
-    margin-right: auto;
-    overflow: hidden !important;
-    width: 0px;
-    max-width: 95%;
+/* Add custom CSS for transparent cards with a white border */
+.card {
+    /* Semi-transparent background */
+    background-color: rgba(255, 255, 255, 0.1) !important;
+    height: 100% !important;
 }
 
-#imgcarousel {
+/* This ensures the cards have equal height and width regardless of the content */
+.row-equal>div[class*='col-']>.card {
     display: flex;
-    transition: transform 0.5s ease-in-out;
+    flex-direction: column;
 }
 
-.itemcarousel {
-    width: 0px;
-    /* Adjust the width as needed */
-    height: 0px;
-    /* Adjust the height as needed */
-    margin: 4px;
-    /* Adjust the margin as needed */
+.card-body {
+    flex-grow: 1;
 }
 
-.carousel-image {
-    object-fit: cover;
-}
-
-.carousel-btn {
-    display: none;
-    border-radius: 15px;
-    /* box-shadow: 10px 10px 5px black; */
-    cursor: pointer;
-    border: none;
-    background: none;
-    outline: none;
-    position: absolute;
-    z-index: 1;
-    margin: 4px;
-    transition: font-size 0.5s ease-out;
-}
-
-#carousel-prev-btn {
-    bottom: 50%;
-    transform: translateY(50%);
-    left: 5%;
-}
-
-#carousel-prev-btn:active {
-    font-size: calc(1.05rem + .9vw) !important;
-}
-
-#carousel-next-btn {
-    bottom: 50%;
-    transform: translateY(50%);
-    right: 5%;
-}
-
-#carousel-next-btn:active {
-    font-size: calc(1.05rem + .9vw) !important;
+#what-is-biv-box {
+    background: rgba(220, 220, 220, 0.4);
 }
 
 #click-here {
@@ -131,7 +92,8 @@ body {
 }
 
 #open-cerimony-card {
-    background: -webkit-linear-gradient(0deg, #785A88, #D8B2B6);
+    background: -webkit-linear-gradient(0deg, #D8B2B6, #785A88);
+    opacity: 80%;
 }
 
 #inside-days-card {