diff --git a/devstory5.html b/devstory5.html new file mode 100644 index 0000000..1d0716c --- /dev/null +++ b/devstory5.html @@ -0,0 +1,614 @@ + + + + + + + 5: Know Your Neighbors + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ 1. What Is An HRA? + 2. Squiggy's Identity Crisis! + 3. Something's NOT Registering! +
+
+
+ + +
+

+
+ + + +
+
+ +
+
+ This is the story of two of them: Squiggy and CeCe. +
+
+ +
+ +
+

On this week's episode: 

+

Know Your Neighbors

+

In which...Neque porro quisquam est qui dolorem ipsum quia dolor. +

+ +
+
+ +
+ +
+ + +
+
+
Squiggy: You know, CeCe, I don't usually like to travel, but I do like our + visits to the kidneys to see our new friend Mac. +
+
+
+
CeCe: You said it, Squig old buddy! And I love it that Mac decided to finally + get to know his neighbors by throwing a tissue block party. +
+
+
+
Squiggy: I'm just so happy he's finally gotten over his shyness and is out meeting new cells! +
+
+
+
+ +
+ +
+
CeCe: Not so fast, Squig. Something tells me that Mac might not quite be over his social anxiety yet! +
+
+
+
Squiggy: Uh, Mac, is that you? +
+
+
+
Mac: Oh, drat! I've been discovered! +
+
+
+
CeCe: Mac, why are you in that ridiculous disguise? Aren't you supposed to be hosting a tissue block party to meet all your neighbors? +
+
+
+
Mac: But that's the problem! I had just started getting ready when I was hit by a number of disturbing questions. +
+
+ +
+
+ +
+ + +
+
+
Mac: Who were these cells that all lived on my tissue block? What did they do? What were they like? What could we talk about? +
+
+
+
Mac: In short, my friends, I suddenly realized I did not know my neighbors. +
+
+
+
Squiggy: That's not a problem, Mac. How about the three of us go door-to-door and meet all your neighbors one at a time? +
+
+
+
+
+
CeCe: No can do, Squiggy. Depending upon the size of Mac's tissue block and its location in the kidney, he could have millions of neighbors! +
+
+ +
+
+ +
+
+
Squiggy: Aargh! That's way too much walking! +
+
+
+
CeCe: Don't lose your ribosomes, Squiggy. I think I know something that will help us out. +
+
+
+
Squiggy: Oooh, I bet it has something to do with the Human Reference Atlas. +
+
+
+
Mac: What makes you say that, Squiggy? +
+
+
+
Squiggy: Exploring the HRA is kind of our thing, Mac. +
+
+
+
CeCe: Right you are, Squig! We're going to use the HRA to help Mac get to know his neighbors. +
+
+
+
CeCe: Follow me! +
+
+ +
+
+ +
+ +
+
CeCe: We just have to jump down here! +
+
+ +
+
CeCe: Let's go! +
+
+ +
+
+ +
+ +
+ +
+
And so down they went... +
+
+
+
+
+
+ +
+
+ + + + + + + + + + +
+
+ + +
+ +
+ External links + +
+
+ + +
+ + +
+ + + +
+ + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/.DS_Store b/img/.DS_Store index aeaf6ac..8f5c740 100644 Binary files a/img/.DS_Store and b/img/.DS_Store differ diff --git a/img/5-1.svg b/img/5-1.svg new file mode 100644 index 0000000..23cb3ea --- /dev/null +++ b/img/5-1.svg @@ -0,0 +1,16 @@ + + + + Artboard + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/img/5-2.svg b/img/5-2.svg new file mode 100644 index 0000000..96fc234 --- /dev/null +++ b/img/5-2.svg @@ -0,0 +1,75 @@ + + + + Artboard + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/5-3.svg b/img/5-3.svg new file mode 100644 index 0000000..c9c459c --- /dev/null +++ b/img/5-3.svg @@ -0,0 +1,74 @@ + + + + Artboard + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/5-4.svg b/img/5-4.svg new file mode 100644 index 0000000..566b7d9 --- /dev/null +++ b/img/5-4.svg @@ -0,0 +1,67 @@ + + + + Artboard + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/5-5.svg b/img/5-5.svg new file mode 100644 index 0000000..6a9b17f --- /dev/null +++ b/img/5-5.svg @@ -0,0 +1,86 @@ + + + + Artboard + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + RUI + + + + + + \ No newline at end of file diff --git a/img/5bubble1.svg b/img/5bubble1.svg new file mode 100644 index 0000000..916c77e --- /dev/null +++ b/img/5bubble1.svg @@ -0,0 +1,21 @@ + + + + 5bubble1 + Created with Sketch. + + + + + + + + ? + + + + ? + + + + \ No newline at end of file diff --git a/img/5bubble2.svg b/img/5bubble2.svg new file mode 100644 index 0000000..2ce20d9 --- /dev/null +++ b/img/5bubble2.svg @@ -0,0 +1,82 @@ + + + + 5bubble2 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/5falling.svg b/img/5falling.svg new file mode 100644 index 0000000..73584cd --- /dev/null +++ b/img/5falling.svg @@ -0,0 +1,73 @@ + + + + Artboard + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/5move1.svg b/img/5move1.svg new file mode 100644 index 0000000..26db384 --- /dev/null +++ b/img/5move1.svg @@ -0,0 +1,67 @@ + + + + 5move1 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/5sign.svg b/img/5sign.svg new file mode 100644 index 0000000..21fec07 --- /dev/null +++ b/img/5sign.svg @@ -0,0 +1,18 @@ + + + + Group 3 + Created with Sketch. + + + + + + + Kidneys + Up Ahead + + + + + \ No newline at end of file diff --git a/img/TestSeq/0246.png b/img/TestSeq/0246.png new file mode 100644 index 0000000..c973c42 Binary files /dev/null and b/img/TestSeq/0246.png differ diff --git a/img/TestSeq/0247.png b/img/TestSeq/0247.png new file mode 100644 index 0000000..d660d8c Binary files /dev/null and b/img/TestSeq/0247.png differ diff --git a/img/TestSeq/0248.png b/img/TestSeq/0248.png new file mode 100644 index 0000000..e0d21fb Binary files /dev/null and b/img/TestSeq/0248.png differ diff --git a/img/TestSeq/0249.png b/img/TestSeq/0249.png new file mode 100644 index 0000000..def78a7 Binary files /dev/null and b/img/TestSeq/0249.png differ diff --git a/img/TestSeq/0250.png b/img/TestSeq/0250.png new file mode 100644 index 0000000..a9a7f8c Binary files /dev/null and b/img/TestSeq/0250.png differ diff --git a/img/TestSeq/0251.png b/img/TestSeq/0251.png new file mode 100644 index 0000000..0d09c45 Binary files /dev/null and b/img/TestSeq/0251.png differ diff --git a/img/TestSeq/0252.png b/img/TestSeq/0252.png new file mode 100644 index 0000000..64aa8c7 Binary files /dev/null and b/img/TestSeq/0252.png differ diff --git a/img/TestSeq/0253.png b/img/TestSeq/0253.png new file mode 100644 index 0000000..cbdaaff Binary files /dev/null and b/img/TestSeq/0253.png differ diff --git a/img/TestSeq/0254.png b/img/TestSeq/0254.png new file mode 100644 index 0000000..9d44b87 Binary files /dev/null and b/img/TestSeq/0254.png differ diff --git a/img/TestSeq/0255.png b/img/TestSeq/0255.png new file mode 100644 index 0000000..5c9a29d Binary files /dev/null and b/img/TestSeq/0255.png differ diff --git a/img/TestSeq/0256.png b/img/TestSeq/0256.png new file mode 100644 index 0000000..cc7ea4e Binary files /dev/null and b/img/TestSeq/0256.png differ diff --git a/img/TestSeq/0257.png b/img/TestSeq/0257.png new file mode 100644 index 0000000..155794f Binary files /dev/null and b/img/TestSeq/0257.png differ diff --git a/img/TestSeq/0258.png b/img/TestSeq/0258.png new file mode 100644 index 0000000..b39c040 Binary files /dev/null and b/img/TestSeq/0258.png differ diff --git a/img/TestSeq/0259.png b/img/TestSeq/0259.png new file mode 100644 index 0000000..9cc5b72 Binary files /dev/null and b/img/TestSeq/0259.png differ diff --git a/img/TestSeq/0260.png b/img/TestSeq/0260.png new file mode 100644 index 0000000..ca45a10 Binary files /dev/null and b/img/TestSeq/0260.png differ diff --git a/img/TestSeq/0261.png b/img/TestSeq/0261.png new file mode 100644 index 0000000..9afaea2 Binary files /dev/null and b/img/TestSeq/0261.png differ diff --git a/img/TestSeq/0262.png b/img/TestSeq/0262.png new file mode 100644 index 0000000..2348041 Binary files /dev/null and b/img/TestSeq/0262.png differ diff --git a/img/TestSeq/0263.png b/img/TestSeq/0263.png new file mode 100644 index 0000000..b94f686 Binary files /dev/null and b/img/TestSeq/0263.png differ diff --git a/img/TestSeq/0264.png b/img/TestSeq/0264.png new file mode 100644 index 0000000..c0a0b77 Binary files /dev/null and b/img/TestSeq/0264.png differ diff --git a/img/TestSeq/0265.png b/img/TestSeq/0265.png new file mode 100644 index 0000000..5f013c9 Binary files /dev/null and b/img/TestSeq/0265.png differ diff --git a/img/TestSeq/0266.png b/img/TestSeq/0266.png new file mode 100644 index 0000000..2054cb1 Binary files /dev/null and b/img/TestSeq/0266.png differ diff --git a/img/TestSeq/0267.png b/img/TestSeq/0267.png new file mode 100644 index 0000000..2a2924b Binary files /dev/null and b/img/TestSeq/0267.png differ diff --git a/img/TestSeq/0268.png b/img/TestSeq/0268.png new file mode 100644 index 0000000..b095724 Binary files /dev/null and b/img/TestSeq/0268.png differ diff --git a/img/TestSeq/0269.png b/img/TestSeq/0269.png new file mode 100644 index 0000000..b2693d6 Binary files /dev/null and b/img/TestSeq/0269.png differ diff --git a/img/TestSeq/0270.png b/img/TestSeq/0270.png new file mode 100644 index 0000000..bc94dd8 Binary files /dev/null and b/img/TestSeq/0270.png differ diff --git a/img/TestSeq/0271.png b/img/TestSeq/0271.png new file mode 100644 index 0000000..6834af4 Binary files /dev/null and b/img/TestSeq/0271.png differ diff --git a/img/TestSeq/0272.png b/img/TestSeq/0272.png new file mode 100644 index 0000000..feae12f Binary files /dev/null and b/img/TestSeq/0272.png differ diff --git a/img/TestSeq/0273.png b/img/TestSeq/0273.png new file mode 100644 index 0000000..7bc7b70 Binary files /dev/null and b/img/TestSeq/0273.png differ diff --git a/img/TestSeq/0274.png b/img/TestSeq/0274.png new file mode 100644 index 0000000..6b5414c Binary files /dev/null and b/img/TestSeq/0274.png differ diff --git a/img/TestSeq/0275.png b/img/TestSeq/0275.png new file mode 100644 index 0000000..c91c924 Binary files /dev/null and b/img/TestSeq/0275.png differ diff --git a/story0.html b/story0.html index 63062a1..d0fb3a0 100644 --- a/story0.html +++ b/story0.html @@ -259,7 +259,7 @@

Drag and Drop Example

diff --git a/story1.html b/story1.html index a7af2ff..6b820cf 100644 --- a/story1.html +++ b/story1.html @@ -228,7 +228,7 @@

Putting It All Together

diff --git a/story2.html b/story2.html index f6a40a3..bd9c425 100644 --- a/story2.html +++ b/story2.html @@ -825,7 +825,7 @@

What Is Squiggy's Cell Type?

diff --git a/story3.html b/story3.html index 932eaf0..b0dc826 100644 --- a/story3.html +++ b/story3.html @@ -901,7 +901,7 @@

Something's NOT Registering!

diff --git a/style.css b/style.css index 5586396..44a7779 100644 --- a/style.css +++ b/style.css @@ -2224,6 +2224,364 @@ h1 { stroke-width: 5; } +/*story 5*/ + +#two .scene5-1 { + background-image: url("img/5-1.svg"); + background-color: white; + height: 100vh; + margin: 0; + overflow: hidden; + top: 0; + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + min-width: 100%; +} +#two .scene5-2 { + background-image: url("img/5-2.svg"); + background-color: white; + height: 100vh; + margin: 0; + overflow: hidden; + top: 0; + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + min-width: 100%; +} +#two .scene5-3 { + background-image: url("img/5-3.svg"); + background-color: white; + height: 100vh; + margin: 0; + overflow: hidden; + top: 0; + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + min-width: 100%; +} +#two .scene5-4 { + background-image: url("img/5-4.svg"); + background-color: white; + height: 100vh; + margin: 0; + overflow: hidden; + top: 0; + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + min-width: 100%; +} + +#two .scene5-5 { + background-image: url("img/5-5.svg"); + background-color: white; + height: 100vh; + margin: 0; + overflow: hidden; + top: 0; + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + min-width: 100%; +} + +#two .scene5-6 { + background-color: black; + height: 100vh; + overflow: hidden; + margin: auto; + top: 0; + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + min-width: 100%; + display: inline-block; + vertical-align: middle; +} + +#two .scene5-7 { + background-color: black; + height: 100vh; + overflow: hidden; + margin: auto; + top: 0; + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + min-width: 100%; + display: inline-block; + vertical-align: middle; +} + +#two #sign { + width:15%; + right: 20%; + bottom:9%; + max-width: 500px; + min-width: 100px; + overflow: hidden; +} +#two #move1 { + animation: MoveUpDown2 2s linear infinite; + width:50%; + left: 20%; + bottom:5%; + max-width: 500px; + min-width: 100px; +} +@keyframes MoveUpDown2 { + 0%, 100% { + transform: translateY(0); + } + 50% { + transform: translateY(5%); + } + } + +.falling5 { + animation: MoveUpDown 2s linear infinite; + width: 100%; + max-width: 800px; + display: flex; + margin: auto; + position: relative; + top: 35%; + } + @keyframes MoveUpDown { + 0%, 100% { + transform: translateY(0); + } + 50% { + transform: translateY(20%); + } + } + + .imgsequence5{ + position: relative; + + } + + storyimg5{ + width: 100%; + border-radius: 5px; + margin-bottom: 1rem; + height: auto; + display: block; + margin: auto; + margin-bottom: 10px; + } + + #two .imagepart5 { + position: absolute; + width: 100%; + } + +.cecetalk5 { + padding: 12px; + color: black !important; + max-width: 400px; + width: 80%; + background-color: rgb(243, 167, 167); + box-shadow: rgba(0, 0, 0, 0.54) 0px 3px 8px; + border-radius: 22px; + margin: auto; + position: relative; + margin-top: 30px; + margin-bottom: 30px; + left: 10%; + top: -10%; +} + +.cecetalk5:after { + content: ""; + position: absolute; + top: 38%; + right: 99%; + margin-top: -5px; + border-width: 15px; + border-style: solid; + border-color: transparent rgb(243, 167, 167) transparent transparent; +} + +.cecetalk6 { + padding: 12px; + color: black !important; + max-width: 400px; + width: 80%; + background-color: rgb(243, 167, 167); + box-shadow: rgba(0, 0, 0, 0.54) 0px 3px 8px; + border-radius: 22px; + margin: auto; + position: relative; + margin-top: 30px; + margin-bottom: 30px; + left: 2%; + top: 30%; +} + +.cecetalk6:after { + content: ""; + position: absolute; + top: 60%; + right: 100%; + margin-top: -5px; + border-width: 15px; + border-style: solid; + border-color: transparent rgb(243, 167, 167) transparent transparent; +} + +.squiggytalk5 { + padding: 12px; + color: black !important; + max-width: 400px; + width: 80%; + background-color: rgb(153, 202, 244); + box-shadow: rgba(0, 0, 0, 0.54) 0px 3px 8px; + border-radius: 22px; + margin: auto; + position: relative; + margin-top: 30px; + margin-bottom: 30px; + right: -6%; + top: -5%; +} + +.squiggytalk5:after { + content: ""; + position: absolute; + top: 100%; + left: 30%; + margin-left: -5px; + border-width: 18px; + margin-top: -1px; + border-style: solid; + border-color: rgb(153, 202, 244) transparent transparent transparent; +} + + +.squiggytalk6 { + padding: 12px; + color: black !important; + max-width: 400px; + width: 80%; + background-color: rgb(153, 202, 244); + box-shadow: rgba(0, 0, 0, 0.54) 0px 3px 8px; + border-radius: 22px; + margin: auto; + position: relative; + margin-top: 30px; + margin-bottom: 30px; + right: -6%; + top: 10%; +} + +.squiggytalk6:after { + content: ""; + position: absolute; + top: 100%; + left: 30%; + margin-left: -5px; + border-width: 18px; + margin-top: -1px; + border-style: solid; + border-color: rgb(153, 202, 244) transparent transparent transparent; +} + +.mactalk { + padding: 12px; + color: black !important; + max-width: 400px; + width: 80%; + background-color: rgb(244, 169, 196); + box-shadow: rgba(0, 0, 0, 0.54) 0px 3px 8px; + border-radius: 22px; + margin: auto; + position: relative; + margin-top: 30px; + margin-bottom: 30px; + left: 10%; + top: -7%; +} + +.mactalk:after { + content: ""; + position: absolute; + top: 100%; + left: 70%; + margin-left: -5px; + border-width: 18px; + margin-top: -1px; + border-style: solid; + border-color: rgb(244, 169, 196) transparent transparent transparent; +} + +.mactalk2 { + padding: 12px; + color: black !important; + max-width: 400px; + width: 80%; + background-color: rgb(244, 169, 196); + box-shadow: rgba(0, 0, 0, 0.54) 0px 3px 8px; + border-radius: 22px; + margin: auto; + position: relative; + margin-top: 30px; + margin-bottom: 30px; + left: -5%; + top: 34%; +} + +.mactalk2:after { + content: ""; + position: absolute; + top: 65%; + left: 99%; + margin-top: -5px; + border-width: 15px; + border-style: solid; + border-color: transparent transparent transparent rgb(244, 169, 196); +} + +#bubble1,#bubble2{ + opacity:0; +} + + + +.sceneEnd { + background-color: white; + height: auto; + overflow: hidden; + margin: 0; + top: 0; + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + min-width: 100%; +} + +.externalLinks { + background-color: #f1f1f1; + padding: 15px; + font-family: 'PT Sans', sans-serif; + max-width: 942px; + margin: auto; + margin-top: 100px; + margin-bottom: 50px; +} + +.externalLinks a { + color: #596ba1; + cursor: pointer; + text-decoration: underline; + z-index: 999; + position: relative; +} + + /*Table styles*/ .tableExample { margin-top: auto;