From 89ecb158889bc008551622c56e7bded4e83784ca Mon Sep 17 00:00:00 2001
From: Irene Nabila Saputri <irenenabilasaputri01@gmail.com>
Date: Sat, 8 Jun 2024 00:15:18 +0700
Subject: [PATCH] selesai

---
 css/aboutus.css    | 531 +++++++++++++++++++++++---------------
 css/sidebar.css    |   4 +
 index.css          | 622 +++++++++++++++++++++------------------------
 index.html         |  98 +------
 js/dom.js          |  16 +-
 pages/aboutus.html |  14 +-
 6 files changed, 620 insertions(+), 665 deletions(-)

diff --git a/css/aboutus.css b/css/aboutus.css
index 5101409..e42ea15 100644
--- a/css/aboutus.css
+++ b/css/aboutus.css
@@ -1,100 +1,110 @@
 @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
 
 *{
-    margin: 0;
-    padding: 0;
-    border: none;
-    outline: none;
-    box-sizing: border-box;
-    font-family: "Lato", sans-serif;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  box-sizing: border-box;
+  font-family: "Lato", sans-serif;
 }
 
 body{
   display: flex;
 }
 
-.aboutus-content{
-    /* background-color: #fff;  */
-    /* background-color: #EBD9B4; */
-    background-color: wheat;
-    border-radius: 20px 20px 0px 0px;
+.content{
+  display: flex;
 }
 
-.team-content{
-    display: flex;
-    justify-content: center;
+.aboutus-content{
+  background-color: wheat;
+  border-radius: 20px 20px 0px 0px;
 }
 
-/* .margin{
-  padding: 15px;
-} */
+.team-content,
+.team-content-1,
+.team-content-2{
+  display: flex;
+  /* place-items: stretch; */
+  justify-content: center;
+}
 
 .name-pic h1{
-	  color: black;
-	  font-size: 30px;
-    font-weight: 700;
-	  text-align: center;
-    padding: 30px;
-    padding-bottom: 1px;
+	color: black;
+	font-size: 30px;
+  font-weight: 700;
+	text-align: center;
+  padding: 30px;
+  padding-bottom: 1px;
 }
 
 .box{
-    width: 25%;
-    height: 30%;
-    margin: 20px;
-    padding: 20px;
-    padding-top: 10px;
-    text-align: center;
-    /* border: 1px solid #ccc; */
-    border-radius: 20px 20px 0px 0px;
-    border: 3px solid black;
-    box-shadow: 0 0 10px rgba(0, 0, 0.1, 0.3);
-    transition: all .38s ease;
-    background: linear-gradient(to bottom, #FFF, #EBD9B4);
-    /* background: white; */
-	  /* background: #D77E19; */
-    /* background: repeating-linear-gradient(to bottom, #D77E19, #FED7A5); */
+  width: 25%;
+  height: 30%;
+  margin: 20px;
+  padding: 20px;
+  padding-top: 10px;
+  text-align: center;
+  /* border: 1px solid #ccc; */
+  border-radius: 20px 20px 0px 0px;
+  border: 3px solid black;
+  box-shadow: 0 0 10px rgba(0, 0, 0.1, 0.3);
+  transition: all .38s ease;
+  background: linear-gradient(to bottom, #FFF, #EBD9B4);
 }
 
 .box-1{
-    width: 25%;
-    height: 30%;
-    margin: 20px;
-    padding: 20px;
-    padding-top: 10px;
-    text-align: center;
-    /* border: 1px solid #ccc; */
-    border-radius: 20px 20px 0px 0px;
-    border: 3px solid black;
-    box-shadow: 0 0 10px rgba(0, 0, 0.1, 0.3);
-    transition: all .38s ease;
-    background: linear-gradient(to bottom, #FFF, #EBD9B4);
-    /* background: white; */
-    /* background: #F5BA5E; */
-    /* background: repeating-linear-gradient(to bottom, #F5BA5E, #FED7A5); */
+  width: 25%;
+  height: 30%;
+  margin: 20px;
+  padding: 20px;
+  padding-top: 10px;
+  text-align: center;
+  /* border: 1px solid #ccc; */
+  border-radius: 20px 20px 0px 0px;
+  border: 3px solid black;
+  box-shadow: 0 0 10px rgba(0, 0, 0.1, 0.3);
+  transition: all .38s ease;
+  background: linear-gradient(to bottom, #FFF, #EBD9B4);
 }
 
 .box-2{
-    width: 25%;
-    height: 30%;
-    margin: 20px;
-    padding: 20px;
-    padding-top: 10px;
-    text-align: center;
-    /* border: 4px solid #ccc; */
-    border-radius: 20px 20px 0px 0px;
-    border: 3px solid black;
-    box-shadow: 0 0 10px rgba(0, 0, 0.1, 0.3);
-    transition: all .38s ease;
-    background: linear-gradient(to bottom, #FFF, #EBD9B4);
-    /* background: white; */
-    /* background: #E3A36F; */
-    /* background: repeating-linear-gradient(to bottom, #E3A36F, #FED7A5); */
+  width: 25%;
+  height: 30%;
+  margin: 20px;
+  padding: 20px;
+  padding-top: 10px;
+  text-align: center;
+  /* border: 4px solid #ccc; */
+  border-radius: 20px 20px 0px 0px;
+  border: 3px solid black;
+  box-shadow: 0 0 10px rgba(0, 0, 0.1, 0.3);
+  transition: all .38s ease;
+  background: linear-gradient(to bottom, #FFF, #EBD9B4);
+  /* background: white; */
+  /* background: #E3A36F; */
+  /* background: repeating-linear-gradient(to bottom, #E3A36F, #FED7A5); */
+}
+
+.box-3{
+  width: 25%;
+  height: 30%;
+  margin: 20px;
+  padding: 20px;
+  padding-top: 10px;
+  text-align: center;
+  /* border: 1px solid #ccc; */
+  border-radius: 20px 20px 0px 0px;
+  border: 3px solid black;
+  box-shadow: 0 0 10px rgba(0, 0, 0.1, 0.3);
+  transition: all .38s ease;
+  background: linear-gradient(to bottom, #FFF, #EBD9B4);
 }
 
 .box:hover{
-    transform: scale(1.1) translate(10px);
-    transition: transform 0.5s ease;
+  transform: scale(1.1) translate(10px);
+  transition: transform 0.5s ease;
 }
 
 .box-1:hover{
@@ -107,11 +117,16 @@ body{
   transition: transform 0.5s ease;
 }
 
+.box-3:hover{
+  transform: scale(1.1) translate(10px);
+  transition: transform 0.5s ease;
+}
+
 .box h2{
-    font-size: 18px;
-    font-weight: 600;
-    color: black;
-    padding-bottom: 5px;
+  font-size: 18px;
+  font-weight: 600;
+  color: black;
+  padding-bottom: 5px;
 }
 
 .box-1 h2{
@@ -129,11 +144,18 @@ body{
   padding-bottom: 5px;
 }
 
+.box-3 h2{
+  font-size: 18px;
+  font-weight: 600;
+  color: black;
+  padding-bottom: 5px;
+}
+
 .box p{
-    font-size: 12px;
-    font-weight: 300;
-    color: black;
-    margin-bottom: 3px;
+  font-size: 12px;
+  font-weight: 300;
+  color: black;
+  margin-bottom: 3px;
 }
 
 .box-1 p{
@@ -150,131 +172,138 @@ body{
   margin-bottom: 3px;
 }
 
+.box-3 p{
+  font-size: 12px;
+  font-weight: 300;
+  color: black;
+  margin-bottom: 3px;
+}
+
 .satu{
   padding-bottom: 5px;
 }
 
 img{
-    width: 100%;
-    border-radius: 50%;
-    padding: 7px;
-    border: 3px solid black;
+  width: 100%;
+  border-radius: 50%;
+  padding: 7px;
+  border: 3px solid black;
 }
 
 .card{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
 }
 
 .card a{
-    display: inline-block;
-    font-size: 1.5rem;
-    color: #333;
-    transition: color 0.3s;
+  display: inline-block;
+  font-size: 1.5rem;
+  color: #333;
+  transition: color 0.3s;
 }
 
 .card i{
-    font-size: 25px;
-    color: #000;
+  font-size: 25px;
+  color: #000;
 }
 
 .footer {
-    background-color: #E3A36F;
-    padding: 30px 0;
-    position: relative;
-    overflow: hidden;
+  background-color: #E3A36F;
+  padding: 30px 0;
+  position: relative;
+  overflow: hidden;
 }
 
 .footer-container {
-    display: flex;
-    justify-content: space-between;  
-    max-width: 1200px;
-    margin: 0 auto;        
-    padding: 0 20px;                      
+  display: flex;
+  justify-content: space-between;  
+  max-width: 1200px;
+  margin: 0 auto;        
+  padding: 0 20px;                      
 }        
 
 .footer-column {
-    display: flex;
-    flex-direction: column;
-    margin: 0 20px;
-    padding: 20px;
-    width: 50%;
+  display: flex;
+  flex-direction: column;
+  margin: 0 20px;
+  padding: 20px;
+  width: 50%;
 }
 
 .footer-column-1 {
-    display: flex;
-    flex-direction: column;
-    margin: 0 20px;
-    padding: 20px;
+  display: flex;
+  flex-direction: column;
+  margin: 0 20px;
+  padding: 20px;
 }
 
 .footer-column-2 {
-    display: flex;
-    flex-direction: column;
-    margin: 0 20px;
-    padding: 20px;
+  display: flex;
+  flex-direction: column;
+  margin: 0 20px;
+  padding: 20px;
 }
 
 .footer-title {
-    font-size: 1.2rem;
-    font-weight: bold;
-    color: #333;
-    margin-bottom: 10px;
+  font-size: 1.2rem;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 10px;
 }
 
 .pertama{
-    margin-bottom: 10px;
-    text-align: justify;
+  margin-bottom: 10px;
+  text-align: justify;
 }
 
 .kedua{
-    text-align: justify;
-    margin-bottom: 10px;
+  text-align: justify;
+  margin-bottom: 10px;
 }
 
 .ketiga{
-    text-align: justify;
+  text-align: justify;
 }
 
 .footer-links {
-    list-style: none;
-    padding: 0;
+  list-style: none;
+  padding: 0;
 }
 
 .footer-links li {
-    margin-bottom: 5px;
-    font-size: 0.9rem;
-    color: #555;
+  margin-bottom: 5px;
+  font-size: 0.9rem;
+  color: #555;
 }
 
 .footer-links a {
-    color: #555;
-    text-decoration: none;
-    transition: color 0.3s;
+  color: #555;
+  text-decoration: none;
+  transition: color 0.3s;
 }
 
 .footer-links a:hover {
-    color: #333;
+  color: #333;
 }
 
 .social-links {
-    display: flex;
-    align-items: center;
-    gap: 10px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 
 .social-links a {
-    display: inline-block;
-    font-size: 1.5rem;
-    color: #333;
-    transition: color 0.3s;
+  display: inline-block;
+  font-size: 1.5rem;
+  color: #333;
+  transition: color 0.3s;
 }
 
 .social-links a:hover {
-    color: #222;
+  color: #222;
 }
 
 @media (max-width: 450px) {
@@ -282,102 +311,94 @@ img{
     background-color: #EBD9B4;
   }
 
-  .box{
-    width: 30%;
-    height: 30%;
-    margin: 10px;
-    padding: 10px;
-  }
-
-  .box-1{
-    width: 50%;
-    height: 30%;
-    margin: 10px;
-    padding: 10px;
+  .team-content,
+  .team-content-1,
+  .team-content-2{
+    display: grid;
+    grid-template-columns: 1fr;
+    justify-items: center;
   }
 
-  .box-2 {
-    width: 30%;
-    height: 30%;
+  .box,
+  .box-1,
+  .box-2,
+  .box-3{
+    width: 70%;
+    height: 400px;
     margin: 10px;
+    display: grid;
+    grid-template-rows: repeat(5, auto);
+    justify-items: center;
     padding: 10px;
   }
 
   .box:hover,
   .box-1:hover,
-  .box-2:hover {
+  .box-2:hover,
+  .box-3:hover{
     transform: none;
   }
 
   .name-pic h1 {
-    font-size: 15px;
-    padding: 20px;
+    font-size: 20px;
   }
 
-  .box h2{
-    font-size: 8px;
-    font-weight: 500;
+  .box h2,
+  .box-1 h2,
+  .box-2 h2,
+  .box-3 h2{
+    font-size: 20px;
+    font-weight: 600;
     color: black;
     padding-bottom: 5px;
-}
-
-.box-1 h2{
-  font-size: 8px;
-  font-weight: 500;
-  color: black;
-  padding-bottom: 5px;
-}
-
-.box-2 h2{
-  font-size: 8px;
-  font-weight: 500;
-  color: black;
-  padding-bottom: 5px;
-}
+  }
 
-.box p{
-    font-size: 8px;
+  .box p,
+  .box-1 p,
+  .box-2 p,
+  .box-3 p{
+    font-size: 12px;
     font-weight: 300;
     color: black;
-    margin-bottom: 3px;
-}
+    margin-bottom: 5px;
+  }
 
-.box-1 p{
-  font-size: 8px;
-  font-weight: 300;
-  color: black;
-  margin-bottom: 3px;
-}
+  .satu{
+    padding-bottom: 5px;
+  }
 
-.box-2 p{
-  font-size: 8px;
-  font-weight: 300;
-  color: black;
-  margin-bottom: 3px;
-}
+  img{
+    width: 100%;
+    border-radius: 50%;
+    padding: 7px;
+    border: 3px solid black;
+  }
 
-.satu{
-  padding-bottom: 5px;
-}
+  .card{
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
 
-img{
-  width: 100%;
-  border-radius: 50%;
-  padding: 7px;
-  border: 3px solid black;
-}
+  .card i{
+    font-size: 30px;
+    color: #000;
+    align-self: end;
+  }
 
-.card{
-  display: flex;
-  justify-content: center;
-  /* align-items: center; */
-  flex-wrap: wrap;
-}
+  .pertama{
+    margin-bottom: 10px;
+    text-align: left;
+  }
 
-.card i{
-  font-size: 8px;
-  color: #000;
-}
+  .kedua{
+    text-align: left;
+    margin-bottom: 10px;
+  }
+
+  .ketiga{
+    text-align: left;
+  }
 
   .footer-container {
     flex-direction: column;
@@ -391,4 +412,90 @@ img{
     padding: 10px;
     width: 100%;
   }
+}
+
+@media screen and (min-width: 451px) and (max-width: 1024px) {
+  .footer {
+    background-color: #E3A36F;
+    padding: 30px 0;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .aboutus-content{
+    padding: 20px;
+  }
+
+  .team-content{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    justify-items: center;
+  }
+
+  .team-content-1{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    justify-items: center;
+    row-gap: 15px;
+  }
+
+  .box{
+    width: 80%;
+    height: 97%;
+    margin: 10px;
+    display: grid;
+    grid-template-rows: repeat(5, auto);
+    justify-items: center;
+    padding: 10px;
+  }
+
+  .box-1{
+    width: 80%;
+    height: 97%;
+    margin: 10px;
+    display: grid;
+    grid-template-rows: repeat(5, auto);
+    justify-items: center;
+    padding: 10px;
+    gap: 10px;
+  }
+
+  .box-2{
+    width: 80%;
+    height: 97%;
+    margin: 10px;
+    display: grid;
+    grid-template-rows: repeat(5, auto);
+    justify-items: center;
+    padding: 10px;
+  }
+
+  .box-3{
+    width: 40%;
+    height: 94%;
+    margin: 10px;
+    display: grid;
+    grid-template-rows: repeat(5, auto);
+    justify-items: center;
+    padding: 10px;
+  }
+
+  .footer-container {
+    flex-direction: column;
+    align-items: center;
+    }
+  .footer-column,
+  .footer-column-1,
+  .footer-column-2 {
+        margin: 10px;
+        padding: 10px;
+        width: 100%;
+    }
+  
+  .footer-title {
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 10px;
+  }
 }
\ No newline at end of file
diff --git a/css/sidebar.css b/css/sidebar.css
index f411313..1ad6ae6 100644
--- a/css/sidebar.css
+++ b/css/sidebar.css
@@ -9,6 +9,10 @@
     font-family: 'Lato', sans-serif;
 }
 
+/* body{
+    display: flex;
+} */
+
 .sidebar-kiri {
     position: sticky;
     top: 0;
diff --git a/index.css b/index.css
index ab83eca..20e62c9 100644
--- a/index.css
+++ b/index.css
@@ -1,413 +1,425 @@
 @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
 
 *{
-    margin: 0;
-    padding: 0;
-    border: none;
-    outline: none;
-    box-sizing: border-box;
-    font-family: "Lato", sans-serif;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  box-sizing: border-box;
+  font-family: "Lato", sans-serif;
 }
 
 body{
-    background-color: #E8E8E8;
+  background-color: #E8E8E8;
 }
 
 .content{
-    display: flex;
+  display: flex;
 }
 
 .isi-home{
-    display: flex;
-    flex-direction: column;
-    color: black;
-    margin: 0px;
-    padding: 5px;
+  display: flex;
+  flex-direction: column;
+  color: black;
+  margin: 0px;
+  padding: 5px;
 }
 
 .isi-main-content{
-    display: flex;
+  display: flex;
 }
 
 .main-content{
-    width: 70%;
-    margin-left: 0px;
-    display: flex;
+  width: 100%;
+  margin-left: 0px;
+  display: flex;
 }
 
 .main-content-1{
-    width: 50%;
+  width: 50%;
 }
 
 .main-content-2{
-    width: 50%;
+  width: 50%;
 }
 
 .main-content ul{
-    margin-top: 0px;
+  margin-top: 0px;
 }
 
 .main-content ul li{
-    list-style: none;
-    display: flex;
-    transition: transform 0.5s ease;
-    padding: 0px 10px 0px 10px;
-    border-radius: 20px;
-    align-items: center;
+  list-style: none;
+  display: flex;
+  transition: transform 0.5s ease;
+  padding: 0px 10px 0px 10px;
+  border-radius: 20px;
+  align-items: center;
 }
 
 .main-content ul li:hover{
-    transform: scale(1.1) translate(10px);
-    width: auto;
-    height: auto;
+  transform: scale(1.1) translate(10px);
+  width: auto;
+  height: auto;
 }
 
 .business-problem{
-    background-color: #D77E19;
-    border-radius: 20px;
-    font-size: 13px;
-    font-weight: 300;
-    margin: 20px;
-    padding: 15px;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 38vh;
-    box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
-    -webkit-box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
-    -moz-box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
+  background-color: #D77E19;
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 300;
+  margin: 20px;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 55vh;
+  box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
+  -webkit-box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
+  -moz-box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
 }
 
 .business-problem h1{
-    margin: 10px;
-    margin-bottom: 20px;
-    align-items: center;
+  margin: 10px;
+  margin-bottom: 20px;
+  align-items: center;
 }
 
 .button{
-    width: 15%;
-    height: 15%;
-    background: none;
-    margin-left: 80%;
-    margin-top: 38%;
+  width: 15%;
+  height: 15%;
+  background: none;
+  margin-left: 80%;
+  margin-top: 38%;
 }
 
 .button-1{
-    background: none;
-    margin-left: 80%;
-    margin-top: 35%;
+  background: none;
+  margin-left: 80%;
+  margin-top: 35%;
 }
 
 .button-2{
-    background: none;
-    margin-left: 80%;
-    margin-top: 35%;
+  background: none;
+  margin-left: 80%;
+  margin-top: 35%;
 }
 
 .button-3{
-    background: none;
-    margin-left: 80%;
-    margin-top: 15%;
+  background: none;
+  margin-left: 80%;
+  margin-top: 15%;
 }
 
 .button-4{
-    background: none;
-    margin-left: 80%;
-    margin-top: 15%;
+  background: none;
+  margin-left: 80%;
+  margin-top: 15%;
 }
 
 .button:hover,
 .button:focus{
-    color: grey;
-    text-decoration: none;
-    cursor: pointer;
+  color: grey;
+  text-decoration: none;
+  cursor: pointer;
 }
 
 .button-1:hover,
 .button-1:focus{
-    color: grey;
-    text-decoration: none;
-    cursor: pointer;
+  color: grey;
+  text-decoration: none;
+  cursor: pointer;
 }
 
 .button-2:hover,
 .button-2:focus{
-    color: grey;
-    text-decoration: none;
-    cursor: pointer;
+  color: grey;
+  text-decoration: none;
+  cursor: pointer;
 }
 
 .button-3:hover,
 .button-3:focus{
-    color: grey;
-    text-decoration: none;
-    cursor: pointer;
+  color: grey;
+  text-decoration: none;
+  cursor: pointer;
 }
 
 .button-4:hover,
 .button-4:focus{
-    color: grey;
-    text-decoration: none;
-    cursor: pointer;
+  color: grey;
+  text-decoration: none;
+  cursor: pointer;
 }
 
 .popup-modal {
-    display: none;
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    background-color: rgba(0,0,0,0.4);
-    z-index: 999;
+  display: none;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: rgba(0,0,0,0.4);
+  z-index: 999;
 }
 
 .modal{
-    position: fixed; 
-    z-index: 9999; 
-    padding-top: 100px; 
-    left: 0;
-    top: 0;
-    width: 100%; 
-    height: 100%; 
-    background-color: rgba(0,0,0,0.4); 
+  position: fixed; 
+  z-index: 9999; 
+  padding-top: 100px; 
+  left: 0;
+  top: 0;
+  width: 100%; 
+  height: 100%; 
+  background-color: rgba(0,0,0,0.4); 
 }
 
 /* Modal Content */
 .modal-content{
-    background-color: #fefefe;
-    margin: auto;
-    padding: 20px;
-    border: 1px solid #888;
-    width: 80%;
-    font-size: 20px;
-    font-weight: 600;
+  background-color: #fefefe;
+  margin: auto;
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%;
+  font-size: 20px;
+  font-weight: 600;
 }
 
 .modal-content img{
-    height: 30%;
-    width: 50%;
-    padding-top: 15px;
-    gap: 20px;
+  height: 30%;
+  width: 50%;
+  padding-top: 15px;
+  gap: 20px;
 }
   
-/* The Close Button */
 .close{
-    color: #aaaaaa;
-    float: right;
-    font-size: 28px;
-    font-weight: bold;
+  color: #aaaaaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
 }
   
 .close:hover,
 .close:focus{
-    color: #000;
-    text-decoration: none;
-    cursor: pointer;
+  color: #000;
+  text-decoration: none;
+  cursor: pointer;
 }
 
 .problem-statement{
-    background-color: #F5BA5E;
-    border-radius: 20px;
-    font-size: 13px;
-    font-weight: 300;
-    margin: 20px;
-    padding: 15px;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 35vh;
-    box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
-    -webkit-box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
-    -moz-box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
+  background-color: #F5BA5E;
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 300;
+  margin: 20px;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 50vh;
+  box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
+  -webkit-box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
+  -moz-box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
 }
 
 .problem-statement h1{
-    margin: 10px;
-    margin-bottom: 20px;
-    align-items: center;
+  margin: 10px;
+  margin-bottom: 20px;
+  align-items: center;
 }
 
 .scope{
-    background-color: #E3A36F;
-    border-radius: 20px;
-    font-size: 13px;
-    font-weight: 300;
-    margin: 20px;
-    padding: 15px;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 35vh;
-    box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
-    -webkit-box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
-    -moz-box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
+  background-color: #E3A36F;
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 300;
+  margin: 20px;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 50vh;
+  box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
+  -webkit-box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
+  -moz-box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
 }
 
 .scope h1{
-    margin: 10px;
-    margin-bottom: 20px;
-    align-items: center;
+  margin: 10px;
+  margin-bottom: 20px;
+  align-items: center;
 }
 
 .whys{
-    background-color: #D77E19;
-    border-radius: 20px;
-    font-size: 13px;
-    font-weight: 300;
-    margin: 20px;
-    padding: 15px;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 25vh;
-    box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
-    -webkit-box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
-    -moz-box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
+  background-color: #D77E19;
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 300;
+  margin: 20px;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 35vh;
+  box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
+  -webkit-box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
+  -moz-box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
 }
 
 .whys h1{
-    margin: 10px;
-    margin-bottom: 20px;
-    align-items: center;
+  margin: 10px;
+  margin-bottom: 20px;
+  align-items: center;
 }
 
 .metric{
-    background-color: #F5BA5E;
-    border-radius: 20px;
-    font-size: 13px;
-    font-weight: 300;
-    margin: 20px;
-    padding: 15px;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 25vh;
-    box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
-    -webkit-box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
-    -moz-box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
+  background-color: #F5BA5E;
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 300;
+  margin: 20px;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 35vh;
+  box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
+  -webkit-box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
+  -moz-box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
 }
 
 .metric h1{
-    margin: 10px;
-    margin-bottom: 20px;
-    align-items: center;
+  margin: 10px;
+  margin-bottom: 20px;
+  align-items: center;
 }
 
 .image{
-    background-color: #E3A36F;
-    border-radius: 20px;
-    font-size: 13px;
-    font-weight: 300;
-    display: flex;
-    flex-direction: column;
-    width: 92%;
-    margin-left: 20px;
-    margin-top: 20px;
-    box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
-    -webkit-box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
-    -moz-box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
+  background-color: #E3A36F;
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 300;
+  display: flex;
+  flex-direction: column;
+  width: 92%;
+  margin-left: 20px;
+  margin-top: 20px;
+  box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
+  -webkit-box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
+  -moz-box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
 }
 
 .image img{
-    border-radius: 20px;
-    height: 58vh;
+  border-radius: 20px;
+  height: 85vh;
 }
 
 .image ul li{
-    list-style: none;
+  list-style: none;
 }
 
 .image ul li img{
-    width: 69vh;
-    height: 30vh;
-    border-radius: 20px;
+  width: 69vh;
+  height: 30vh;
+  border-radius: 20px;
+}
+
+.content{
+  width: 100%;
+  margin-left: 0px;
+  display: flex;
 }
 
 .sidebar-kanan{
-    background-color: #FFFFFF;
-    display: flex;
-    flex-direction: column;
-    width: 30%;
-    height: 119vh;
-    margin: 20px;
-    padding: 40px;
-    border-radius: 10px;
-    color: black;
-    align-items: center;
-    right: 20px;
-    box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
-    -webkit-box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
-    -moz-box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
+  background-color: #FFFFFF;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  margin: 20px;
+  padding: 40px;
+  border-radius: 10px;
+  color: black;
+  align-items: center;
+  right: 20px;
+  box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
+  -webkit-box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
+  -moz-box-shadow: -1px 1px 10px 0px rgba(0,0,0,0.51);
 }
 
 .sidebar-kanan-judul {
-    padding-bottom: 20px;
-    font-size: 15px;
-    font-weight: 500;
+  padding-bottom: 20px;
+  font-size: 15px;
+  font-weight: 500;
+  text-align: center;
+}
+
+.list-team ul{
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 5px;
 }
 
 .sidebar-kanan ul li{
-    list-style: none;
-    display: flex;
-    margin: 5px 10px 5px 10px;
-    transition: transform 0.5s ease;
-    padding: 0px 10px 0px 10px;
-    border-radius: 20px;
-    align-items: center;
-    font-size: 13px;
-    font-weight: 400;
+  list-style: none;
+  display: flex;
+  margin: 5px 10px 5px 10px;
+  transition: transform 0.5s ease;
+  padding: 0px 10px 0px 10px;
+  border-radius: 20px;
+  align-items: center;
+  font-size: 13px;
+  font-weight: 400;
 }
 
 .sidebar-kanan ul li:hover{
-    background-color: #F5BA5E;
-    transform: scale(1.1) translate(30px);
-    width: auto;
-    height: auto;
+  background-color: #F5BA5E;
+  transform: scale(1.1) translate(15px);
+  width: auto;
+  height: auto;
 }
 
 .sidebar-kanan ul li img{
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
 }
 
 .kartu-nama{
-    margin: 0 20px 0 20px;
+  margin: 0 20px 0 20px;
 }
 
 .modal-content-1{
-    background: #D77E19;
-    max-width: 90%;
-    margin: 0 auto;
-    padding: 15px;
-    border-radius: 20px;
+  background: #D77E19;
+  max-width: 90%;
+  margin: 0 auto;
+  padding: 15px;
+  border-radius: 20px;
 }
 
 .modal-content-1 h1{
-    font-size: 25px;
-    font-weight: 600;
-    margin-bottom: 20px;
-    text-align: center;
+  font-size: 25px;
+  font-weight: 600;
+  margin-bottom: 20px;
+  text-align: center;
 }
 
 .modal-content-1 img{
-    max-width: 100%;
-    max-height: 100%;
-    border-radius: 10px;
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: 10px;
 }
 
 .modal-content-1 ul{
-    list-style: none;
-    display: flex;
-    justify-content: center;
-    margin-top: 20px;
+  list-style: none;
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
 }
 
 .modal-content-1 ul li{
-    margin: 0 10px;
-    width: 50%;
-    border-radius: 10px;
+  margin: 0 10px;
+  width: 50%;
+  border-radius: 10px;
 }
 
 .modal-content-2{
@@ -461,7 +473,7 @@ body{
 
 .modal-content-3 img{
   max-width: 100%;
-  max-height: 100%;
+  height: 300px;
   border-radius: 10px;
 }
 
@@ -478,7 +490,7 @@ body{
   border-radius: 10px;
 }
 
-  @media screen and (max-width: 450px) {
+  @media (max-width: 450px) {
     body {
       font-size: 10px;
     }
@@ -494,6 +506,10 @@ body{
     .main-content {
       width: 100%;
     }
+
+    .main-content-1{
+      width: 100%;
+    }
     
     .main-content ul li {
       flex-direction: column;
@@ -504,59 +520,13 @@ body{
       transform: none;
     }
 
-    .sidebar-kiri {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 70%;
-      height: 80px;
-      background-color: #FFFFFF;
-      padding: 10px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      z-index: 999;
-      transition: width 0.3s ease-out;
-    }
-
-    .sidebar-kiri.collapsed {
-      width: 80px;
-    }
-    
-    .sidebar-kiri.collapsed ul {
-      display: none;
-    }
-    
-    .sidebar-kiri.collapsed ul.show {
-      display: flex;
-    }
-
-    .sidebar-kiri ul {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-    }
-
-    .sidebar-kiri ul li {
-      margin: 0 10px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    .sidebar-kiri ul li img {
-      width: 30px;
-      height: 30px;
-      border-radius: 50%;
-    }
-
     .business-problem {
       width: 100%;
       height: 100%;
       font-size: 7px;
       font-weight: 300;
       margin-bottom: 0;
+      margin-left: 0;
     }
 
     .problem-statement{
@@ -565,6 +535,7 @@ body{
       font-size: 7px;
       font-weight: 300;
       margin-bottom: 0;
+      margin-left: 0;
     }
 
     .scope{
@@ -572,6 +543,7 @@ body{
       height: 80%;
       font-size: 7px;
       font-weight: 300;
+      margin-left: 0;
     }
 
     .whys{
@@ -580,6 +552,7 @@ body{
       font-size: 7px;
       font-weight: 300;
       margin-bottom: 0;
+      margin-left: 0;
     }
 
     .metric{
@@ -588,12 +561,14 @@ body{
       font-size: 7px;
       font-weight: 300;
       margin-bottom: 0;
+      margin-left: 0;
     }
 
     .image{
       width: 100%;
       height: 100%;
       margin-bottom: 0;
+      margin-left: 0;
     }
 
     .image img{
@@ -601,23 +576,23 @@ body{
     }
 
     .button{
-      font-size: 8px;
+      font-size: 7px;
     }
 
     .button-1{
-      font-size: 8px;
+      font-size: 7px;
     }
 
     .button-2{
-      font-size: 8px;
+      font-size: 7px;
     }
 
     .button-3{
-      font-size: 8px;
+      font-size: 7px;
     }
 
     .button-4{
-      font-size: 8px;
+      font-size: 7px;
     }
 
     .sidebar-kanan {
@@ -631,7 +606,7 @@ body{
     }
   }
 
-  @media screen and (min-width: 768px) and (max-width: 1024px) {
+  @media screen and (min-width: 451px) and (max-width: 1024px) {
     .isi-home {
       flex-direction: row;
     }
@@ -640,8 +615,13 @@ body{
       flex-direction: row;
     }
 
+    .team-content{
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+    }
+
     .main-content {
-      width: 5100%;
+      width: 100%;
     }
 
     .main-content ul li {
@@ -656,73 +636,43 @@ body{
     }
 
     .business-problem {
-      width: 100%;
+      width: 500px;
       height: 100%;
-      font-size: 8px;
-      font-weight: 300;
       margin-bottom: 0;
     }
 
     .problem-statement {
       width: 100%;
       height: 100%;
-      font-size: 8px;
-      font-weight: 300;
       margin-bottom: 0;
     }
 
     .scope {
       width: 100%;
       height: 100%;
-      font-size: 8px;
-      font-weight: 300;
     }
 
     .whys {
       width: 100%;
       height: 100%;
-      font-size: 8px;
-      font-weight: 300;
       margin-bottom: 0;
     }
 
     .metric {
       width: 100%;
       height: 100%;
-      font-size: 8px;
-      font-weight: 300;
       margin-bottom: 0;
     }
 
     .image {
-      width: 85%;
+      width: 90%;
       height: 100%;
       margin-bottom: 0;
     }
     
     .image img {
       width: 100%;
-      height: 245px;
-    }
-
-    .button {
-      font-size: 8px;
-    }
-
-    .button-1 {
-      font-size: 8px;
-    }
-
-    .button-2 {
-      font-size: 8px;
-    }
-
-    .button-3 {
-      font-size: 8px;
-    }
-
-    .button-4 {
-      font-size: 8px;
+      height: 360px;
     }
 
     .sidebar-kanan {
diff --git a/index.html b/index.html
index 2e09f07..4412dfa 100644
--- a/index.html
+++ b/index.html
@@ -68,103 +68,7 @@ <h1>Metric</h1>
                             </ul>
                         </div>
                     </div>
-                
-                    <!-- sidebar-kanan -->
-                    <div class="sidebar-kanan">
-                        <div class="sidebar-kanan-judul">
-                            <h1>Our Team</h1>
-                        </div>
-                        <div class="list-team">
-                            <ul>
-                                <li>
-                                    <img src="image/Team/Praditya.jpg" alt="">
-                                    <div class="kartu-nama">
-                                        <p>I Gede Praditya Maha Wiguna</p>
-                                        <p>pradityamw@gmail.com</p>
-                                    </div>
-                                </li>
-                                <li>
-                                    <img src="image/Team/Aghni Al Ghifari .JPG" alt="">
-                                    <div class="kartu-nama">
-                                        <p>Aghni Al Ghifari</p>
-                                        <p>aghnialghifari27@gmail.com</p>
-                                    </div>
-                                </li>
-                                <li>
-                                    <img src="image/Team/Ahmad Fauzan.jpg" alt="">
-                                    <div class="kartu-nama">
-                                        <p>Ahmad Fauzan</p>
-                                        <p>ahmaddfauzann23@gmail.com</p>
-                                    </div>
-                                </li>
-                                <li>
-                                    <img src="image/Team/Cicilia Angelica Siadari.png" alt="">
-                                    <div class="kartu-nama">
-                                        <p>Cicilia Angelica Siadari</p>
-                                        <p>ciciliangelica@gmail.com</p>
-                                    </div>
-                                </li>
-                                <li>
-                                    <img src="image/Team/Deavin Alexander Gareso Tonapa.jpeg" alt="">
-                                    <div class="kartu-nama">
-                                        <p>Deavin Alexander Gareso Tonapa</p>
-                                        <p>deavinagt@gmail.com</p>
-                                    </div>
-                                </li>
-                                <li>
-                                    <img src="image/Team/Fitri Indriani.JPG" alt="">
-                                    <div class="kartu-nama">
-                                        <p>Fitri Indriani</p>
-                                        <p>indrianifitri532@gmail.com</p>
-                                    </div>
-                                </li>
-                                <li>
-                                    <img src="image/Team/Ika Nur Wahyu Octaviyana Jamali.png" alt="">
-                                    <div class="kartu-nama">
-                                        <p>Ika Nur Wahyu Octaviyana Jamali</p>
-                                        <p>ikanurwahyuoj@gmail.com</p>
-                                    </div>
-                                </li>
-                                <li>
-                                    <img src="image/Team/Irene Nabila Saputri.jpg" alt="">
-                                    <div class="kartu-nama">
-                                        <p>Irene Nabila Saputri</p>
-                                        <p>irenenabilasaputri01@gmail.com</p>
-                                    </div>
-                                </li>
-                                <li>
-                                    <img src="image/Team/Liyani.jpg" alt="">
-                                    <div class="kartu-nama">
-                                        <p>Liyani</p>
-                                        <p>liyanichaniago751@gmail.com</p>
-                                    </div>
-                                </li>
-                                <li>
-                                    <img src="image/Team/Mita Mukaromah.jpg" alt="">
-                                    <div class="kartu-nama">
-                                        <p>Mita Mukaromah</p>
-                                        <p>mitamukaromah71@gmail.com</p>
-                                    </div>
-                                </li>
-                                <li>
-                                    <img src="image/Team/Nina Lathifa Azalia.png" alt="">
-                                    <div class="kartu-nama">
-                                        <p>Nina Lathifa Azalia</p>
-                                        <p>ninaa31.az@gmail.com</p>
-                                    </div>
-                                </li>
-                                <li>
-                                    <img src="image/Team/Prasetya Danarputra.jpg" alt="">
-                                    <div class="kartu-nama">
-                                        <p>Prasetya Danarputra</p>
-                                        <p>prasetyadanar92@gmail.com</p>
-                                    </div>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-            </div>
-            </div>
+                </div>
         </div>
         <div id="myModal" class="modal">
             <div class="modal-content-1">
diff --git a/js/dom.js b/js/dom.js
index ea8c4c2..a00be0f 100644
--- a/js/dom.js
+++ b/js/dom.js
@@ -1,12 +1,3 @@
-// const toggleButton = document.querySelector('.navbar-toggle');
-//     const navbarMenu = document.querySelector('.navbar-menu');
-
-//     toggleButton.addEventListener('click', () => {
-//         navbarMenu.classList.toggle('active');
-//     });
-
-//
-
 const buttons = {
   "myBtn": "myModal",
   "myBtn-1": "myModal-1",
@@ -24,9 +15,7 @@ for (let btnId in buttons) {
     modal.style.display = "block";
   };
 
-  modal.style.display = "none"; // Add this line to hide the modal by default
-
-  // Add an event handler to close the modal when the user clicks outside of it
+  modal.style.display = "none"; 
   modal.addEventListener("click", function(event) {
     if (event.target === modal) {
       modal.style.display = "none";
@@ -41,5 +30,4 @@ for (let i = 0; i < closeElements.length; i++) {
     let modal = closeElements[i].closest(".modal");
     modal.style.display = "none";
   };
-}
-
+}
\ No newline at end of file
diff --git a/pages/aboutus.html b/pages/aboutus.html
index 6c89e5a..ab6bd0a 100644
--- a/pages/aboutus.html
+++ b/pages/aboutus.html
@@ -9,7 +9,8 @@
         <title>About Us</title>
     </head>
     <body>
-        <!-- Sidebar Kiri -->
+        <!-- Sidebar Kiri --> 
+        <div class="content">
         <div class="sidebar-kiri">
             <ul class="menu">
                 <li>
@@ -37,8 +38,8 @@ <h1>Welcome, <span>Medan Team 23!</span></h1>
             <div class="name-pic">
                 <h1>Project Leader</h1>
             </div>
-            <div class="team-content">
-                <div class="box">
+            <div class="team-content-2">
+                <div class="box-3">
                     <img src="../image/Team/Praditya.jpg" alt="">
                     <h2>I Gede Praditya Maha W</h2>
                     <p>Project Leader</p>
@@ -58,7 +59,7 @@ <h2>I Gede Praditya Maha W</h2>
             <div class="name-pic">
                 <h1>Front End Engineer</h1>
             </div>
-            <div class="team-content">
+            <div class="team-content-1">
                 <div class="box-1">
                     <img src="../image/Team/Cicilia Angelica Siadari.png" alt="">
                     <h2>Cicilia Angelica S</h2>
@@ -196,7 +197,7 @@ <h2>Mita Mukaromah</h2>
             <div class="name-pic">
                 <h1>Pitch Deck Team</h1>
             </div>
-            <div class="team-content">
+            <div class="team-content-1">
                 <div class="box-1">
                     <img src="../image/Team/Aghni Al Ghifari .JPG" alt="">
                     <h2>Aghni Al Ghifari</h2>
@@ -231,7 +232,7 @@ <h2>Ahmad Fauzan</h2>
                     <img src="../image/Team/Fitri Indriani.JPG" alt="">
                     <h2>Fitri Indriani</h2>
                     <p>PIC Pitch Deck Team</p>
-                    <p class="satu">Universitas Bina Bangsa</p>
+                    <p class="satu">Universitas Bina Bangsa</p>
                     <div class="card">
                         <a href="https://www.instagram.com/ftr.ia_?igsh=MXF3MDN3eWtod3lyNQ==" target="_blank">
                             <i class="fa-brands fa-square-instagram"></i></a>
@@ -270,5 +271,6 @@ <h3 class="footer-title">Follow us</h3>
               </div>
             </div>
           </footer>
+        </div>
     </body>
 </html>
\ No newline at end of file