Timeline (#41)

* timeline file added * Add timeline component * Add background image * Add line component in background * Add some reponsiveness * Delete unnecessary files * Change in svg files --------- Co-authored-by: Om Prasad <[email protected]>
Hackodisha · Jul 23, 2023 · a4fcea9 · a4fcea9
1 parent a42c473
commit a4fcea9
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 30 deletions.
diff --git a/src/components/Timeline/assets/Vector 3.svg b/src/components/Timeline/assets/Vector 3.svg
diff --git a/src/components/Timeline/assets/Vector 4.svg b/src/components/Timeline/assets/Vector 4.svg
diff --git a/src/components/Timeline/assets/Vector 5.svg b/src/components/Timeline/assets/Vector 5.svg
diff --git a/src/components/Timeline/timeline.css b/src/components/Timeline/timeline.css
@@ -17,10 +17,6 @@
 	height: auto;
   }
   body{
-	/* background-image: url(./assets/background.png);
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: cover; */
 	background-color: black;
   }
 
@@ -31,13 +27,44 @@
    .contentUl{
 	padding:0 20px;
    }
+   .svg3{
+	display: none;
+   }
+   .circularAnimation2{
+	position: relative;
+	left:50%;
+  }
+
   @media only screen and (max-width:550px) {
+	.circularAnimation1,.circularAnimation2,.circularAnimation3{
+		width:75%;
+		align-items: flex-start;
+		position: relative;
+		left:20%;
+	}
+	.contentUl{
+		grid-template-columns:1fr 3fr;
+		column-gap: 5px;
+		width: 100%;
+		margin-left:5px;
+
+	}
+	.contentUl ul li{
+		/* margin: ; */
+		/* text-align:left; */
+	}
 	.contentUl{
-     padding: 5px;
+     padding:2px;
+	}
+	.svg2{
+		display: none;
+	}
+	.svg3{
+		display: block;
 	}
 	.timeline{
 		background-image: url(./assets/Vector\ 1.svg);
-		background-position: center;
+		background-position-x:17%;
 		background-size: contain;
 		background-repeat: no-repeat;
 		margin-top: 2rem;
@@ -70,9 +97,9 @@
 	  height:18px;
 	}
 	.contentUl {
-	  text-align: justify;
+	  /* text-align: justify; */
 	  font-family: Syoog;
-	  font-size: 10.5px;
+	  font-size: 9.5px;
 	  font-style: normal;
 	  font-weight: 400;
 	  line-height: 180%;
@@ -131,7 +158,7 @@
 	}
 	.contentUl {
 	  /* color: #e7e7e7; */
-	  text-align: justify;
+	  /* text-align: justify; */
 	  font-family: Syoog;
 	  font-size: 12px;
 	  font-style: normal;
@@ -189,7 +216,7 @@
 	}
 	.contentUl {
 	  /* color: #e7e7e7; */
-	  text-align: justify;
+	  /* text-align: justify; */
 	  font-family: Syoog;
 	  font-size: 12px;
 	  font-style: normal;
@@ -245,7 +272,7 @@
 	}
 	.contentUl {
 	  /* color: #e7e7e7; */
-	  text-align: justify;
+	  /* text-align: justify; */
 	  font-family: Syoog;
 	  font-size: 18px;
 	  font-style: normal;
@@ -296,7 +323,7 @@
 	}
 	.contentUl {
 	  /* color: #e7e7e7; */
-	  text-align: justify;
+	  /* text-align: justify; */
 	  font-family: Syoog;
 	  font-size: 24px;
 	  font-style: normal;
@@ -316,7 +343,4 @@
 	}
   }
 
-  .circularAnimation2{
-	position: relative;
-	left:50%;
-  }
+
diff --git a/src/components/Timeline/timeline.jsx b/src/components/Timeline/timeline.jsx
@@ -31,6 +31,15 @@ const Timeline = () => {
       />
         <div className="circularAnimation1 w-1/2 mt-4 flex flex-col items-end">
           <div className="time-headSvg inline-flex items-center w-auto ">
+          <div className="svg3 flex items-center w-auto">
+              <Image
+                src={Image2}
+                width={350}
+                height={50}
+                alt="Image"
+                className="img3 opacity-60"
+              ></Image>
+            </div>
             <span className="svg1 flex flex-col shrink-0">
               <span>
                 <svg
@@ -236,10 +245,10 @@ const Timeline = () => {
           </div>
           <div className="content w-full">
             <span className="contentHead mx-auto">
-              <h3 className="mx-auto my-5 ">September 9, 2023</h3>
+              <h3 className="mx-auto mt-5 ">September 9, 2023</h3>
             </span>
             <div className="">
-              <ul className="contentUl grid grid-cols-2 w-fit justify-center gap-x-0 text-left ">
+              <ul className="contentUl grid grid-cols-2 w-fit justify-center gap-x-0 mb-5 mt-2">
                 {[
                   "7:30 AM",
                   "Check-in starts",
@@ -261,7 +270,7 @@ const Timeline = () => {
                   "Fun Event 2",
                 ].map((item, index) => (
                   <li
-                    className={`${index % 2 == 0 ? "w-fit" : "w-full"} m-auto `}
+                    className={`${index % 2 == 0 ? "w-fit" : "w-full"} m-auto text-left`}
                     key={index}
                   >
                     {item}
@@ -276,7 +285,7 @@ const Timeline = () => {
 
         <div className="circularAnimation2 w-1/2  flex flex-col items-start  px-0 mx-0">
           <div className="headSvg inline-flex items-center w-auto ">
-            <div className="svg2 flex items-center w-auto">
+            <div className="flex items-center w-auto">
               <Image
                 src={Image2}
                 width={350}
@@ -481,11 +490,10 @@ const Timeline = () => {
           </div>
           <div className="content w-full">
             <span className="contentHead mx-auto">
-              <h3 className="mx-auto my-5 ">September 10, 2023</h3>
+              <h3 className="mx-auto mt-5 ">September 10, 2023</h3>
             </span>
-
             <div className="">
-              <ul className="contentUl grid grid-cols-2 w-fit justify-center gap-x-0 text-left  ">
+              <ul className="contentUl grid grid-cols-2 w-fit justify-center gap-x-0 mb-5 mt-2">
                 {[
                   "12:00 AM",
                   "Discord Catch-up Session",
@@ -507,7 +515,7 @@ const Timeline = () => {
                   "Event Ends",
                 ].map((item, index) => (
                   <li
-                    className={`${index % 2 == 0 ? "w-fit" : "w-full"} m-auto `}
+                    className={`${index % 2 == 0 ? "w-fit" : "w-full"} m-auto text-left`}
                     key={index}
                   >
                     {item}
@@ -521,6 +529,15 @@ const Timeline = () => {
         {/* For Animation-3 */}
         <div className="circularAnimation3 w-1/2 mb-12 flex flex-col items-end">
           <div className="headSvg inline-flex items-center w-auto ">
+          <div className="svg3 flex items-center w-auto">
+              <Image
+                src={Image2}
+                width={350}
+                height={50}
+                alt="Image"
+                className="img3 opacity-60"
+              ></Image>
+            </div>
             <span className="svg1 flex flex-col shrink-0">
               <span>
                 <svg
@@ -726,13 +743,13 @@ const Timeline = () => {
           </div>
           <div className="content w-full">
             <span className="contentHead mx-auto">
-              <h3 className="mx-auto my-5 ">September 16, 2023</h3>
+              <h3 className="mx-auto mt-5 ">September 16, 2023</h3>
             </span>
             <div className="">
-              <ul className="contentUl grid grid-cols-2 w-fit justify-center gap-x-0 text-left  ">
+              <ul className="contentUl grid grid-cols-2 w-fit justify-center gap-x-0 text-left  mb-5 mt-2">
                 {["6:00 PM", "Winner Announcement"].map((item, index) => (
                   <li
-                    className={`${index % 2 == 0 ? "w-fit" : "w-full"} m-auto `}
+                    className={`${index % 2 == 0 ? "w-fit" : "w-full"} m-auto text-left`}
                     key={index}
                   >
                     {item}