Merge pull request #55 from cel3ntano/about-section

aboutme-update-2
cel3ntano · Jun 17, 2024 · 95f35c8 · 95f35c8
2 parents 6a58729 + c05c3a0
commit 95f35c8
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 16 deletions.
diff --git a/src/css/about.css b/src/css/about.css
@@ -51,21 +51,25 @@
  margin-bottom: 24px;
 }
 
-.learn-more-button {
+
+.load-more-button {
+
  display: inline-block;
  padding: 10px 20px;
  margin: 10px 0;
- font-size: 16px;
  font-weight: 500;
  color: #fff;
  background-color: var(--Accent-primary);
  border: none;
- border-radius: 5px;
+ border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
 }
 
-.learn-more-button:hover {
+
+.load-more-button:hover {
+
+
  background-color: var(--Accent-hover);
 }
 
@@ -145,8 +149,7 @@
  }
 
  .about-img {
- margin: 408px 32px 60px 0;
- /* margin: 148px 32px 60px 0; */
+ margin: 80px 32px 60px 0;
  }
 
  .bio-text {
@@ -185,7 +188,7 @@
  background-image: url(/img/about/decor-peach-1x-tab-min.png);
  background-repeat: no-repeat;
  background-size: 336px 252px;
- background-position: 364px 728px;
+ background-position: 372px 655px;
  }
 
  .about-img-decor.change-them {
@@ -199,7 +202,7 @@
  background-image: url(/img/about/decor-peach-2x-tab-min.png);
  background-size: 336px 252px;
  background-repeat: no-repeat;
- background-position: 364px 728px;
+ background-position: 372px 655px;
  }
  .about-img-decor.change-them {
  background-image: url(/img/about/decor-blue-2x-tab-min.png);
@@ -211,8 +214,7 @@
 
 @media screen and (min-width: 1280px) {
  .about-img {
- margin: 312px 136px 80px 208px;
- /* margin: 110px 136px 80px 208px; */
+ margin: 110px 136px 80px 208px;
  }
 
  .bio-text {
@@ -224,7 +226,7 @@
  background-image: url(/img/about/decor-peach-1x-dsk-min.png);
  background-repeat: no-repeat;
  background-size: 384px 288px;
- background-position: 835px 562px;
+ background-position: 839px 401px;
  }
 
  .education-text {
@@ -250,7 +252,7 @@
  background-image: url(/img/about/decor-peach-2x-dsk-min.png);
  background-size: 384px 288px;
  background-repeat: no-repeat;
- background-position: 835px 562px;
+ background-position: 839px 401px;
  }
  .about-img-decor.change-them {
  background-image: url(/img/about/decor-blue-2x-dsk-min.png);

diff --git a/src/js/about.js b/src/js/about.js
@@ -1,5 +1,7 @@
 const pgf = document.querySelector('.hidden-text');
-const button = document.querySelector('.learn-more-button');
+
+const button = document.querySelector('.load-more-button');
+
 
 document.addEventListener('DOMContentLoaded', e => {
  pgf.style.display = 'none';
@@ -8,9 +10,11 @@ document.addEventListener('DOMContentLoaded', e => {
 button.addEventListener('click', () => {
  if (pgf.style.display === 'none') {
  pgf.style.display = 'block';
- button.textContent = 'Show less';
+
+ button.textContent = 'Chow less';
  } else if (pgf.style.display === 'block') {
  pgf.style.display = 'none';
- button.textContent = 'Learn more';
+ button.textContent = 'Load more';
+
  }
 });
diff --git a/src/partials/about.html b/src/partials/about.html
@@ -61,7 +61,9 @@ <h3 class="about-subtitle">bio</h3>
  actively engage in studying new technologies and practices to stay
  current with the latest innovations in the field.
  </p>
- <button class="learn-more-button">Learn More</button>
+
+ <button class="load-more-button">Learn More</button>
+
  </div>
  <div class="education-text">
  <h3 class="about-subtitle">education</h3>