bfh

src/App/App.css

@@ -3159,4 +3159,26 @@ a{
 .text-1-bfh{
   margin-top: auto !important;
   margin-bottom: auto !important;
+}
+
+.panel-talk-gallery{
+  padding: 0 !important;
+  margin-top: 10px !important;
+  margin-left: 20px !important;
+  margin-right: 20px !important;
+}
+.panel-talk-gallery div{
+  padding: 0 !important;
+}
+.panel-talk-gallery .col:nth-child(1), .panel-talk-gallery .col:nth-child(5){
+  margin-top: 60px !important;
+}
+.panel-talk-gallery .col:nth-child(2), .panel-talk-gallery .col:nth-child(4){
+  margin-top: 30px !important;
+}
+.panel-talk-gallery .col .middle{
+  margin-top: 15px !important;
+}
+.middle{
+  text-align: center;
 }
\ No newline at end of file

src/components/My-Timeline.tsx

@@ -30,7 +30,7 @@ export const TimelineItemPic  = ({ text, vorname, nachname, date, tag, color, ch
                     <figure className="snip1113 red">
                         <img src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" alt="pr-sample1" />
                         <figcaption>
-                            <h3>{vorname} <span>{nachname}</span></h3>
+                            <h3>{vorname} <br/> <span>{nachname}</span></h3>
                         </figcaption>
                     </figure>
                 </div>
@@ -63,6 +63,47 @@ export const TimelineItem  = ({ date, tag, color, children, csstag }:ItemProps)
     </div>
 );
 
+export const PanelTimelineItem  = () => (
+    <div className="timeline-item">
+        <div className="timeline-item-content">
+            <span className="tag" style={{ background: "var(--lightblue)" }}>
+                Talks
+            </span> 
+            <time>Panel Discussion</time>
+            <div className="row align-items-center panel-talk-gallery">
+                <div className="col">
+                    <img className="img-round" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" alt="pr-sample1" />
+                    <div className="small middle">Taci <br/> Haddock</div>
+                </div>
+                <div className="col">
+                    <img className="img-round"  src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" alt="pr-sample1" />
+                    <div className="small middle">Ana <br/> Sifuentes</div>
+                </div>
+                <div className="col">
+                    <img className="img-round"  src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" alt="pr-sample1" />
+                    <div className="small middle">Olivia <br/> Mozolewska</div>
+                </div>
+                <div className="col">
+                    <img className="img-round"   src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" alt="pr-sample1" />
+                    <div className="small middle">Lasse <br/> Middendorf</div>
+                </div>
+                <div className="col">
+                    <img className="img-round"  src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" alt="pr-sample1" />
+                    <div className="small middle">Nemanja <br/> Stijepovic</div>
+                </div>
+            </div>
+            <hr/>
+            <span>Panel Discussion</span>
+                    <div id="panel" style={{display: "none"}}>
+                        So much more
+                    </div>  
+            
+            <BFHMoreButton it="panel"></BFHMoreButton>
+            <span className="circle" />
+        </div>
+    </div>
+);
+
 
 
 export function MyTimeline () {
@@ -189,10 +230,9 @@ export function MyTimeline () {
                 csstag="safeworkshop"
                 vorname="Svenja"
                 nachname="Vinke"
+                text="Novel technologies opened possibilities and risks. Learn how you implement Safety and Security Strategies within your project and think more responsible in terms of Dual Use."
                 >
                     <h5>About Dual-use and Biosafety</h5>
-                    <span>Novel technologies opened possibilities and risks. Learn how you implement Safety and Security Strategies within your project and think more responsible in terms of Dual Use.
-                    </span>
                     <div id="safeworkshop" style={{display: "none"}}>
                         So much more
                     </div> 
@@ -269,17 +309,8 @@ export function MyTimeline () {
                         So much more
                     </div>  
                 </TimelineItemPic>
-                <TimelineItem
-                date='Panel Discussion'
-                tag= 'Talks'
-                color='var(--lightblue)'
-                csstag="panel"
-                >
-                    <span>Panel Discussion</span>
-                    <div id="panel" style={{display: "none"}}>
-                        So much more
-                    </div>  
-                </TimelineItem>
+                <PanelTimelineItem></PanelTimelineItem>
+ 
                 <TimelineItemPic
                 date='iGEMer Ted Talks'
                 tag= 'Talks'