diff --git a/src/components/loremipsum.tsx b/src/components/loremipsum.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..06a110cef02b54d8fecb9fa4cfd70413e5b5f4a7
--- /dev/null
+++ b/src/components/loremipsum.tsx
@@ -0,0 +1,13 @@
+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
diff --git a/src/components/testsvganimation.tsx b/src/components/testsvganimation.tsx
index c16363599367dd71798187331c833d030bdc0afb..086c81722d40ce692db3aba5943c48b39bba9e81 100644
--- a/src/components/testsvganimation.tsx
+++ b/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>
);
}
diff --git a/src/contents/engineering.tsx b/src/contents/engineering.tsx
index 4945fc03e30d129f27d89ec4d038203ca0a17337..3f0296f2ea35dbaf52356d65780ebf2d70348bd2 100644
--- a/src/contents/engineering.tsx
+++ b/src/contents/engineering.tsx
@@ -1,5 +1,6 @@
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%"
diff --git a/src/contents/example.css b/src/contents/example.css
index df7369fc894eeb1fc204c87c3291914ff525d6d0..bce2cdfe73b51bfdde7100a81bf82858d33ee550 100644
--- a/src/contents/example.css
+++ b/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
diff --git a/src/contents/example.tsx b/src/contents/example.tsx
index 96916625a8b770d7d3747ed50fca77e777041c27..23ca57649930f8320ede4934103a11d7a7059df8 100644
--- a/src/contents/example.tsx
+++ b/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>