svg texte

src/components/loremipsum.tsx

+export function LoremMedium(){
+    return(
+        <>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   
+
+Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   
+
+Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.   
+
+Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
+</>
+    )
+}
\ No newline at end of file

src/components/testsvganimation.tsx

@@ -3,6 +3,7 @@ import { useGSAP } from "@gsap/react";
 import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
 import { useRef } from 'react';
 import { MotionPathPlugin } from "gsap/dist/MotionPathPlugin";
+import { LoremMedium } from "./loremipsum";
 
 
 
@@ -56,31 +57,40 @@ console.log("Started TestSVG")
 
  
   return (
-    <div className="col-8">
-      
-      <svg id="svg" xmlns="" viewBox="0 0 1980 4400">
-        
-        <path className="theLine" d="
-        M 50 50 S 540 200 540 1000 S -300 1200 540 2000 S -600 2200 540 3000 S 0 4000 540 4000 L 540 4500"
-        /* file="none" */ stroke="white" strokeWidth="10px"></path>
+    <div className="row col">
+       <svg id="svg"   viewBox="0 0 1500 1000">
+            {/* 
+          <path className="theLine" d="S 50"
+          stroke="white" strokeWidth="10px"></path>
 
-        
+          <path className="theLine2" d="M 300 50 S 50 200"
+            stroke="white" strokeWidth="10px" width="10px"></path>
+          */}
+               <foreignObject x="5vw" y="5vh" className="box1">
+                  <h2>Mutation canidates</h2>
+                  <p >
+                  <LoremMedium></LoremMedium>
+                  </p>
+              </foreignObject> 
+              <foreignObject className="box2">
+                  <h2>Mutation canidates</h2>
+                  <p>
+                  <LoremMedium></LoremMedium>
+                  </p>
+              </foreignObject>
 
-        <path className="theLine2" d="
-        M 1030 50 S 540 200 540 1000 S -300 1200 540 2000 S -600 2200 540 3000 S 540 4000 540 4000 L 540 3500"
-        /* file="none" */ stroke="white" strokeWidth="10px"></path>
+          {/* <path className="theLine3" d="M 300"
+            stroke="white" strokeWidth="10px"></path> */}
 
-
-
-        <path className="theLine3" d="
-        M 2000 600 S -300 1200 540 2000 S -600 2200 540 3000 S 540 4000 -100 4000 L -100 4200"
-        /* file="none" */ stroke="white" strokeWidth="10px"></path>
-
-      </svg>
-      <img ref={vectorRef} src="https://static.igem.wiki/teams/5247/scientific-figures/antibiotics-capsule.svg" alt="vectorImg"/>
-      <img ref={payloadRef} src="https://static.igem.wiki/teams/5247/scientific-figures/antibiotics-inhaler.svg" alt="payloadImg"/>
-      <img ref={inhalatorRef} src="https://static.igem.wiki/teams/5247/scientific-figures/albuterol.svg" alt="inhalatorImg"/>
-    </div>
+        </svg>
+      {/* </svg> */}
+      {/* <text ref={vectorRef}>H</text>
+      <text ref={payloadRef}>B</text> */}
+      {/* <img ref={vectorRef} src="https://static.igem.wiki/teams/5247/scientific-figures/antibiotics-capsule.svg" alt="vectorImg"/>
+       */}{/* <img ref={payloadRef} src="https://static.igem.wiki/teams/5247/scientific-figures/antibiotics-inhaler.svg" alt="payloadImg"/>
+     */}
+    {/*  <img className="test2" ref={inhalatorRef} src="https://static.igem.wiki/teams/5247/scientific-figures/antibiotics-capsule.svg" alt="vectorImg" />
+    */} </div>
   );
 }
 

src/contents/engineering.tsx

 
 import { openIt } from "../components/Buttons";
+import { LoremMedium } from "../components/loremipsum";
 
 export function Engineering() {
 
@@ -9,9 +10,10 @@ export function Engineering() {
           <div className="col">
             <br/>
             <br/>
-            <div className="row align-items-center">
+
+{/*             <div className="row align-items-center">
              <div className="col-3">
-              <EngineeringCycleTab/>
+
              
              </div>
              <div className="col">
@@ -36,20 +38,21 @@ export function Engineering() {
              <hr/>
              </div>
              </div>
-            </div>
-
-            <section id="RNAbindingprotein">
-              
-            </section>
-            <section id="RNAbindingprotein">
-              
-            </section>
-            <section id="RNAbindingprotein">
-              
+            </div> */}
+            <section id="one">
+               <section id="mutations">
+                  <h3>Mutation canidates</h3>
+                  <LoremMedium/>
+               </section>
+               <section id="508del">
+                  <h3>508del</h3>
+                  <LoremMedium/>
+               </section>
             </section>
             <section id="RNAbindingprotein">
               
             </section>
+
           </div>
   
         </div>
@@ -59,7 +62,7 @@ export function Engineering() {
 
   
 
-function EngineeringCycleTab(){
+export function EngineeringCycleTab(){
     return(
  <svg className="rotate-linear-infinite"
     width="100%"

src/contents/example.css

@@ -57,4 +57,36 @@
 .example-advanced-tag{
     background-color: orangered;
     width: fit-content;
+}
+
+
+.st196{fill:none;stroke:black;stroke-miterlimit:10;}
+.st455{font-size:auto;}
+
+/* .d-none{
+    background-color: red;
+} */
+
+
+
+.relative{
+    position: relative;
+}
+.flex{
+    position: flex;
+}
+
+:root{
+    --nhb1: 400px; 
+    --nhb2: 400px;
+    --hb2: calc(var(--nhb1) + var(--nhb2));
+}
+.box1{
+    height: var(--nhb1);
+    width: 90%;  
+}
+.box2{
+    transform: translate(5vw, var(--nhb1));
+    width: 90%;
+    height: var(--nhb2);
 }
\ No newline at end of file

src/contents/example.tsx

@@ -6,10 +6,9 @@ import TestSVG from "../components/testsvganimation";
 export function Example() {
     return (
       <>
-      <div className="col">
         <div className="col">
         <TestSVG></TestSVG>
-            <h3 className="example">Exercises</h3>
+{/*             <h3 className="example">Exercises</h3>
             <i><h6>By Your name</h6></i>
             <div className="example-exercise">
                 <p> All components should be in this file. The extra css has to be put into exapmle.css. Turn to Liliana if you need or want a scss file, too.</p>
@@ -171,7 +170,7 @@ export function Example() {
             <p> See DocuBox component.  </p>
             </div>
         </div>
-        <hr/> 
+        <hr/>  */}
 {/*         <div className="col exercise">
             <div className="row align-items-center">
                 <div className="col"><h4> </h4></div>