new overallC card

TCP-Tech · Sep 16, 2023 · 748520a · 748520a
1 parent f56982c
commit 748520a
Show file tree

Hide file tree

Showing 14 changed files with 158 additions and 144 deletions.
diff --git a/public/index.html b/public/index.html
@@ -37,7 +37,15 @@
         <div class="ghost__rip"></div>
       </div>
     </div>
-    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="gg">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      version="1.1"
+      style="
+        height: 0 !important;
+        width: 0 !important;
+        display: none !important;
+      "
+    >
       <defs>
         <filter id="goo">
           <feGaussianBlur

diff --git a/public/mouse.css b/public/mouse.css
@@ -31,11 +31,6 @@
   transform-origin: center bottom;
   overflow: hidden;
 }
-.gg {
-  height: 0 !important;
-  width: 0 !important;
-  display: none !important;
-}
 .ghost__tail {
   position: absolute;
   z-index: -1;

diff --git a/src/assets/data/speakersData.js b/src/assets/data/speakersData.js
@@ -1,6 +1,6 @@
-import speaker1 from '../images/speaker1.jpeg'
-import speaker2 from '../images/speaker2.jpg'
-import speaker3 from '../images/speaker3.jpeg'
+import speaker1 from '../images/speakers/speaker1.jpeg'
+import speaker2 from '../images/speakers/speaker2.jpg'
+import speaker3 from '../images/speakers/speaker3.jpeg'
 
 const speakers = [
   {

diff --git a/src/assets/images/14.png b/src/assets/images/14.png
diff --git a/src/assets/images/horrorpumpkin.svg b/src/assets/images/horrorpumpkin.svg
diff --git a/src/assets/images/speaker1.jpeg → src/assets/images/speakers/speaker1.jpeg b/src/assets/images/speaker1.jpeg → src/assets/images/speakers/speaker1.jpeg
diff --git a/src/assets/images/speaker2.jpg → src/assets/images/speakers/speaker2.jpg b/src/assets/images/speaker2.jpg → src/assets/images/speakers/speaker2.jpg
diff --git a/src/assets/images/speaker3.jpeg → src/assets/images/speakers/speaker3.jpeg b/src/assets/images/speaker3.jpeg → src/assets/images/speakers/speaker3.jpeg
diff --git a/src/components/speakerCard/SpeakerCard.css b/src/components/speakerCard/SpeakerCard.css
@@ -1,153 +1,157 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap");
 
-.codeutsava__section4-speaker-card{
-    background: #fef9ff;
-    box-shadow: var(--secondary-c) 0px 0px 12px;
-    border-radius: 16px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    padding: 1.5rem;
-    padding-bottom: 0.5rem;
-    max-width: 370px;
-}
-.codeutsava__section4-decor-web{
-    width: 98px;
-    height: 22px;
-    position: relative;
-    left: 140px;
-    top: -25px;
-}
-.codeutsava__section4-decor-web img{
-    height: 97px;
-    width: 105px;
-}
-.codeutsava__section4-decor-bat{
-    width: 100px;
-    height: 100px;
-    position: relative;
-    right: 54px;
-    top: -85px;
-    transform: rotate(-45deg);
-}
-.codeutsava__section4-decor-bat img{
-    height: 45px;
-    width: 45px;
-}
-#bat2{
-    position: relative;
-    top: 25px;
-    right: 40px;
-    transform: rotate(18deg);
-    height: 30px;
-    width: 30px;
-}
-.codeutsava__section4-decor-lantern img{
-    height: 55px;
-    width: 55px;
-    transition: all .3s ease-in-out; 
-}
-.codeutsava__section4-decor-lantern img:hover{
-    transform: scale(1.3);
-}
-.codeutsava__section4-speaker-img-container{
-    width: 240px;
-    height: 240px;
+.codeutsava__section4-speaker-card {
+  background: #fef9ff;
+  box-shadow: var(--secondary-c) 0px 0px 12px;
+  border-radius: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  padding: 1.5rem;
+  padding-bottom: 0.5rem;
+  max-width: 370px;
+}
+.codeutsava__section4-decor-web {
+  width: 98px;
+  height: 22px;
+  position: relative;
+  left: 160px;
+  top: -20px;
+}
+.codeutsava__section4-decor-web img {
+  height: auto;
+  width: 60px;
+}
+.codeutsava__section4-decor-bat {
+  width: 100px;
+  height: 100px;
+  position: relative;
+  right: 54px;
+  top: -85px;
+  transform: rotate(-45deg);
+}
+.codeutsava__section4-decor-bat img {
+  height: 45px;
+  width: 45px;
+}
+#bat2 {
+  position: relative;
+  top: 25px;
+  right: 40px;
+  transform: rotate(18deg);
+  height: 30px;
+  width: 30px;
+}
+.codeutsava__section4-decor-lantern img {
+  height: 55px;
+  width: 55px;
+  transition: all 0.3s ease-in-out;
+}
+.codeutsava__section4-decor-lantern img:hover {
+  transform: scale(1.3);
+}
+.codeutsava__section4-speaker-img-container {
+  width: 240px;
+  height: 240px;
 }
 
-.codeutsava__section4-speaker-img{
-    max-width: 100%;
-    height: auto;
-    border-radius: 20%;
+.codeutsava__section4-speaker-img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 20%;
 }
 
-.codeutsava__section4-speaker-menu{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
+.codeutsava__section4-speaker-menu {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
 }
 
-.codeutsava__section4-speaker-menu h1{
-    font-weight: 700;
-    font-size: 27px;
-    line-height: 33px;
-    text-transform: uppercase;
-    text-align: center;
-    color: black;
-    padding-top: 1rem;
+.codeutsava__section4-speaker-menu h1 {
+  font-weight: 700;
+  font-size: 27px;
+  line-height: 33px;
+  text-transform: uppercase;
+  text-align: center;
+  color: black;
+  padding-top: 1rem;
 }
 
-.codeutsava__section4-speaker-menu h3{
-    font-size: 20px;
-    line-height: 20px;
-    color: var(--secondary-c);
-    padding-top: 0.5rem;
+.codeutsava__section4-speaker-menu h3 {
+  font-size: 20px;
+  line-height: 20px;
+  color: var(--secondary-c);
+  padding-top: 0.5rem;
 }
 
-.codeutsava__section4-speaker-menu p{
-    font-style: normal;
-    font-size: 15px;
-    line-height: 18px;
-    text-align: center;
-    padding: 1rem 0;
+.codeutsava__section4-speaker-menu p {
+  font-style: normal;
+  font-size: 15px;
+  line-height: 18px;
+  text-align: center;
+  padding: 1rem 0;
 }
 
-.codeutsava__section4-speaker-divider{
-    border: 1px solid #D7D7D7;
-    width: 100%;
+.codeutsava__section4-speaker-divider {
+  border: 1px solid #d7d7d7;
+  width: 100%;
 }
 
-.codeutsava__section4-speaker-contact{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    padding: 1rem 0; 
+.codeutsava__section4-speaker-contact {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  padding: 1rem 0;
 }
 
-.codeutsava__section4-speaker-contact h3{
-    font-weight: 600;
-    font-size: 20px;
-    line-height: 24px;
-    color: #000000;
-    text-align: center;
+.codeutsava__section4-speaker-contact h3 {
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 24px;
+  color: #000000;
+  text-align: center;
 }
 
-.codeutsava__section4-speaker-contact-links{
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    gap: 0.8rem;
-    padding-top: 0.5rem; 
+.codeutsava__section4-speaker-contact-links {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 0.8rem;
+  padding-top: 0.5rem;
 }
 
-.codeutsava__section4-speaker-contact-links-image{
-    display: flex;
-    justify-content: center;
-    align-items: center;
+.codeutsava__section4-speaker-contact-links-image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.codeutsava__section4-speaker-contact-links img{
-    cursor: pointer;
-    width: 28px;
+.codeutsava__section4-speaker-contact-links img {
+  cursor: pointer;
+  width: 28px;
 }
-.codeutsava__section4-speaker-contact-links-image svg:hover{
-    fill: var(--primary-c);
+.codeutsava__section4-speaker-contact-links-image svg:hover {
+  fill: var(--primary-c);
 }
-.fadeIn{
-    animation-name: fadeIn;
-    animation-duration: 5000ms;
-    animation-fill-mode: forwards;
+.fadeIn {
+  animation-name: fadeIn;
+  animation-duration: 5000ms;
+  animation-fill-mode: forwards;
 }
 @keyframes fadeIn {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 @media screen and (max-width: 650px) {
-    .codeutsava__section4-speaker-card{
-        transform: scale(0.9);
-    }
-  }
+  .codeutsava__section4-speaker-card {
+    transform: scale(0.9);
+  }
+}
diff --git a/src/components/speakerCard/SpeakerCard.js b/src/components/speakerCard/SpeakerCard.js
@@ -1,7 +1,6 @@
 import React from "react";
 
 import "./SpeakerCard.css";
-import spiderweb from "../../assets/images/speakers/spiderweb.svg";
 import jackolantern from "../../assets/images/speakers/jack-o-lantern.svg";
 import bat from "../../assets/images/speakers/bat.svg";
 
@@ -18,7 +17,7 @@ const SpeakerCard = ({
 }) => {
   return (
     <div className="codeutsava__section4-speaker-card">
-    <div className="codeutsava__section4-decor-web"><img src={spiderweb} alt="spiderweb" /></div>
+    <div className="codeutsava__section4-decor-web"><img src={jackolantern} alt="spiderweb" /></div>
       <div className="codeutsava__section4-speaker-img-container">
         <img src={img} className="codeutsava__section4-speaker-img" />
         <div className="codeutsava__section4-decor-bat"><img src={bat} alt="bat" /><img id="bat2" src={bat} alt="bat" /></div>
@@ -124,7 +123,6 @@ const SpeakerCard = ({
           )}
         </div>
       </div>
-      <div className="codeutsava__section4-decor-lantern fadeIn"><img src={jackolantern} alt="jackolantern" /></div>
     </div>
   );
 };

diff --git a/src/components/team/Team.css b/src/components/team/Team.css
@@ -59,7 +59,8 @@
   font-size: 48px;
   text-align: center;
   letter-spacing: 1px;
-  margin: 4rem 0;
+  margin-top: 4rem;
+  margin-bottom: 8rem;
   color: white;
 }
 

diff --git a/src/components/teamCard/TeamCard.css b/src/components/teamCard/TeamCard.css
@@ -30,6 +30,7 @@
   background-color: var(--primary-c);
   position: absolute;
   bottom: 150%;
+  z-index: -1;
   right: 0;
   left: 0;
   opacity: 0.9;
@@ -42,7 +43,6 @@
   width: 100%;
   height: 100%;
   border-radius: 50%;
-
   background-color: var(--primary-c);
   position: absolute;
   top: 0;