# data[].attributes.body
jake

piper

evan

wesley

naeem

reed

brooksley

bryn

montgomery-brown

lukas

zachary

ethan

leon

thomas

garrett

jacob

# data[].attributes.body
mercedes

aria

# data[].attributes.body
alani

owen

camila

kaitlin

# data[].attributes.body
elliot

lucia

kyla

jacob

milo

# data[].attributes.body
zadig

godson

zander

emily

henry

natalie

patrick

brooklyn

elijah

# data[].attributes.attachment_link.readable_text
 <body> <h2>What Can JavaScript Do?</h2> <p>1. JavaScript can change HTML attribute values. In this case JavaScript changes the value of the src (source) attribute of an image.</p> <button onclick="document.getElementById('Designer').src='https://www.giallozafferano.com/images/255-25549/Guacamole_1200x800.jpg'">Click for Guac </button> <img id="Designer" src="https://cdn.loveandlemons.com/wp-content/uploads/2021/04/green-salad.jpg" style="width:150px" alt="img"> <button onclick="document.getElementById('Designer').src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSmj9bJfjm9l-dKPGY-mwESdkIvDCZpHTOyvg&s'">Click for other salad</button> <p id="textchange">2. JavaScript can change HTML content.</p> <button type="button" onclick="document.getElementById('textchange').innerHTML='Words have changed!'">Click me to change the words</button> <p id="font">3. JavaScript can change the style of an HTML element.</p> <button type="button" onclick="document.getElementById('font').style.backgroundColor='red'">Click Me to change the Background-Color!</button> <p id="hide">4. JavaScript can hide HTML elements.</p> <button type="button" onclick="document.getElementById('hide').style.display='none'">Click Me to hide the whole element above!</button> <p id="undo">5. Click me to undo code!</p> <button type="button" onclick="document.getElementById('undo').style.display:inline;">Click me to undo code!</button> </body>

# data[].attributes.attachment_link.readable_text
 <body> <h2>What Can JavaScript Do?</h2> <p>1. JavaScript can change HTML attribute values. In this case JavaScript changes the value of the src (source) attribute of an image.</p> <button onclick="document.getElementById('Designer').src='https://media3.giphy.com/media/SDeVLvFCqFsSA/200w.gif?cid=6c09b9529stjlqkv9y50wdknabyevtgeij6c4apqx0cem2k0&ep=v1_gifs_search&rid=200w.gif&ct=g'">click for Monkey </button> <img id="Designer" src="https://media.tenor.com/QDioC32oTV8AAAAM/war-thunder-asu57.gif" style="width:150px" alt="img"> <button onclick="document.getElementById('Designer').src='https://i.redd.it/e10vp23csjd81.gif'">click for fire</button> <p id="textchange">2. JavaScript can change HTML content.</p> <button type="button" onclick="document.getElementById('textchange').innerHTML='wegeuwifkefuhwei fg'">Click me to change the skibidy</button> <p id="font">3. JavaS5e 6wcript can change the style of an HTML element. nuh uh</p> <button type="button" onclick="document.getElementById('font').style.fontSize='30px'">Click Me thrw rSize!</button> <p id="hide">4. yejyej qhide HTML cq55ents.</p> <button type="button" onclick="document.getElementById('hide').style.display='none'">Click Me to h3y4qbove!</button> </body>

# data[].attributes.headline
Lex's Javascript website that doesn't have anything in the javascript section

# data[].attributes.subject
Lex's Javascript website that doesn't have anything in the javascript section

# data[].attributes.attachment_link.readable_text
 <body> <h2>What Can JavaScript Do?</h2> <p>1. JavaScript can change HTML attribute values. In this case JavaScript changes the value of the src (source) attribute of an image.</p> <button onclick="document.getElementById('Designer').src='https://v1.padlet.pics/3/image.webp?t=c_limit%2Cdpr_1%2Ch_202%2Cw_250&url=https%3A%2F%2Fu1.padletusercontent.com%2Fuploads%2Fpadlet-uploads%2F2155902525%2F9dd5266367bc09f38dde1d769a182fdb%2Fdownload__43_.jpeg%3Fexpiry_token%3D5WaHZRdGG3LkUVQGy3SZ-zdRtq89aJeottSBaF_Hii8EGDVBG-vnLc5ZfL_2GiKosWMOCkHArMcc8LorETHcZ93iMqfV1KhU1_PJiO7ASlIU2oqhJlN8DtNH28Zh6JtUskdnlj8SJl1AgiDztI_0oPGsNgPNQt2RZMPjykb4GyK80R9_DrceZK3rtnkzC-9bnIOSHdGmPRAxX0WTS9vbLznNLVrONjovhf5DXVRQHiM%3D'">click for Crep </button> <img id="Designer" src="https://v1.padlet.pics/3/image.webp?t=c_limit%2Cdpr_1%2Ch_597%2Cw_597&url=https%3A%2F%2Fu1.padletusercontent.com%2Fuploads%2Fpadlet-uploads%2F2155902525%2F3514b6c8e75928607b79f76631ba8117%2Fmain_qimg_f66d9bec6e852d5f94b3bb58cf86beff.jpeg%3Fexpiry_token%3D5WaHZRdGG3LkUVQGy3SZ-zdRtq89aJeottSBaF_Hii8EGDVBG-vnLc5ZfL_2GiKosWMOCkHArMcc8LorETHcZ9BoWfGlUQrlHnA4aW9pHY_r2qEAnqGXcZZyBUgY3yy8Wbqk1ZmMbeY6xyDZwHoyxf-PDg11CPDnTIPFd4z3_osXORDK_NPcK1n-nMtXf00aBJIyYUKlvvmKcuOUggKfpFAiV-_MAtCZ7ImInFq1HLRV4OjujbCt-SnVvn2vUI2P" style="width:150px" alt="img"> <button onclick="document.getElementById('Designer').src='https://v1.padlet.pics/3/image.webp?t=c_limit%2Cdpr_1%2Ch_246%2Cw_205&url=https%3A%2F%2Fu1.padletusercontent.com%2Fuploads%2Fpadlet-uploads%2F2155902525%2F6fca2321e35b9e775062f931aad4b9da%2Fdownload__77_.jpeg%3Fexpiry_token%3D5WaHZRdGG3LkUVQGy3SZ-zdRtq89aJeottSBaF_Hii8EGDVBG-vnLc5ZfL_2GiKosWMOCkHArMcc8LorETHcZ9zWvPW9ZhwOtSnhNBrwJCMrnkVYs7J5bm0U711RtdBMkMd0ddLJRStBiyX7BZgXyaeKYyRb-bqKHyqW8EbEIAZZ9gi22Yc7s2Goatj40WBi3DdHWI-1cIm1Vpx4CGMqmU8HLnWBQJh9bI8S5bXGsGI%3D'">click for Salsa</button> <p id="textchange">2. JavaScript can change HTML content.</p> <button type="button" onclick="document.getElementById('textchange').innerHTML='New words just dropped'">Click me to change the words</button> <p id="font">3. JavaScript can change the style of an HTML element.</p> <button type="button" onclick="document.getElementById('font').style.fontSize='1px'">Click Me to change the FontSize!</button> <p id="hide">4. JavaScript can hide HTML elements.</p> <button type="button" onclick="document.getElementById('hide').style.display='none'">Click Me to hide the whole element above!</button> <button type="button" onclick="document.getElementById('hide').style.display='block'">Click Me to Reverse time!!</button> </body>

# data[].attributes.attachment_link.readable_text
 <body> <h2>What Can JavaScript Do?</h2> <p>1. JavaScript can change HTML attribute values. In this case JavaScript changes the value of the src (source) attribute of an image.</p> <button onclick="document.getElementById('Designer').src='https://science.nasa.gov/wp-content/uploads/2019/05/pia07997-spirit-sunset-at-gusav-crater-16x9-1.jpg?w=4096&format=jpeg'">Sunsets </button> <img id="Designer" src="https://starwalk.space/gallery/images/mars-the-ultimate-guide/1920x1080.jpg" style="width:150px" alt="img"> <button onclick="document.getElementById('Designer').src='https://upload.wikimedia.org/wikipedia/commons/d/dc/PIA17944-MarsCuriosityRover-AfterCrossingDingoGapSanddune-20140209.jpg'">Surface</button> <p id="textchange">2. JavaScript can change HTML content.</p> <button type="button" onclick="document.getElementById('textchange').innerHTML='Words have changed!'">Click me to change the words</button> <p id="font">3. JavaScript can change the style of an HTML element.</p> <button type="button" onclick="document.getElementById('font').style.color='blue'">Click Me to change the FontSize!</button> <p id="hide">4. JavaScript can hide HTML elements.</p> <button type="button" onclick="document.getElementById('hide').style.display='none'">Click Me to hide the whole element above!</button> <button type="button" onclick="document.getElementbyId('hide').style.display='block'"> CLick me to show the element that disappeared! </button> </body>

# data[].attributes.body
ABSOLUTELY BEAUTIFUL

# data[].attributes.attachment_link.readable_text
GYATT, EDWARD E.

Washington, Oct. 8-(UP)-Marine Pvt. Edward E. Gyatt, 22-year-old son of Mrs. Hilda Morell, of Syracuse, has been awarded the Silver Star Medal posthumously for bravery in action during the seizure of Tulagi from Jap forces.

Assigned to duty in a listening post, Gyatt reported the approach of a Japanese counterattack to his platoon commander. Then with disregard for his own safety, he remained at his post, inflicting a heavy toll on the enemy until he was killed by a grenade [August 7, 1942].

The official citation reads:

"For conspicuous gallantry and intrepidity in action while serving with a Marine battalion during the seizure of Tulagi, Solomon Islands, from enemy Japanese forces, on the night of August 7-8, 1942.

"Assigned to duty in a listening post to the right flank and forward of his company's position, Private Gyatt reported the approach of a hostile counterattack to his platoon commander and then, with utter disregard for his own personal safety, remained at his post, inflicting a heavy toll upon the infiltrating Japanese until he was killed by an enemy hand grenade.

"By his skill, courage, and indomitable fighting spirit, he contributed to the eventual repulse of the enemy and upheld the highest traditions of the United States naval service. He gallantly gave his life in the defense of his country."

# data[].attributes.attachment_link.title
GYATT, EDWARD E. - US Marine Raider Association

# data[].attributes.attachment_link.description
Washington, Oct. 8-(UP)-Marine Pvt. Edward E. Gyatt, 22-year-old son of Mrs. Hilda Morell, of Syracuse, has been awarded the Silver Star Medal posthumously for bravery in action during the seizure of Tulagi from Jap forces. Assigned to duty in a listening post, Gyatt reported the approach of a Japanese counterattack to his platoon commander.

# data[].attributes.body
EVEN DARES TO ADVERTISE AS GOOD >:(

# data[].attributes.attachment_link.title
The All-in-one for 1:1, at school or remote

# data[].attributes.attachment_link.description
The All-in-one for 1:1- at school or remote.

# data[].attributes.attachment_link.readable_text
 body{ background-color: #31A44F} Div.sticky { Position: -webkit-sticky; top: 0; Background-Color:lightblue; position: sticky; text-align: center; font-size: 50px; border-style: inset; z-index: 1; padding: 4px; margin-bottom: 10px} Div.static {position: Static; background-color: #E04B29; border-style: solid; font-size: 45px; text-align: center; padding: 50px;} Div.relative {Background-color: #9C690A; border: solid; font-size: 40px; text-align: center; Position: Relative; padding: 20px; } Div.absolute {Background-color: orchid; border: solid; font-size: 30px; text-align: center; Position: absolute; top: 223px; padding: 100px} Div.fixed {Position: fixed; bottom: 0; right: 0; background-color: lightblue; font-size: 20px; border: solid; }

# data[].attributes.attachment_link.readable_text
 .sticky { position: sticky; font-size: 150px; text-align: center; Background: blue; Border-style: dotted; top: 0; padding: 20px; } .relative { position: relative; font-size: 120px; text-align: center; Background: lightgreen; Border-style: solid; border-width: 10px; padding: 20px; margin: 30; } .fixed { position: fixed; font-size: 75px; background-color: violet; padding: 20px; border: double; border-width: 10px; width: 350; } .absolute { position: absolute; font-size: 100px; padding: 45px; right:0; background-color: skyblue; border-style: dotted; } .static { position: absolute; font-size: 90px; text-align: center; right: 10; bottom:0; background: orange; border-style: inset; border-color: red; padding: 20px; } body { background-color: yellow }

# data[].attributes.attachment_link.readable_text
 h1 {position: sticky; background-color: forestGreen; border-style: dotted; text-align: center; font-size: 50px; top: 0; padding: 20px; } h2 {position:static; background-color: skyblue; border-style: dotted; text-align: center; font-size: 50px; padding: 20px; bottom: 0; } h3 { position: relative; text-align: center; border-style: dotted; background-color: peru; font-size: 50px; padding: 20px; right: 0; left-margin: 500px; width: 200px; } h4 {position: absolute; text-size: 100px; border-style: dotted; background-color: aquamarine; text-align: center; font-size: 50px; margin-bottom: 800px; top: 350px; width: 350px; padding: 20px; right: 0; } h5 {position: fixed; width: 350; bottom: 0; margin: 10px; font-size: 50px; border-style: dotted; background-color: pink; right: 0px}

# data[].attributes.body
yippeeee

# data[].attributes.attachment_link.readable_text
 h1{ width: 100%; padding: 15px; font-family: arial; font-size: 32px; background-color:cyan; border-style: solid; position:static; } h2{ width: 50%; padding: 15px; font-family: arial; font-size: 25; background-color:orange; border-style: dotted; position:relative; } aside{ width: 20%; padding: 10px; font-family: arial; font-size: 15px; background-color:red; border-style: solid; position:fixed; right:0; height:40% } footer{ width: 20%; padding: 10px; font-family: arial; font-size: 15px; background-color:green; border-style: solid; position:sticky; margin:30px; } body{ border-style:dotted; height:50%; backround-color:gray; position:absolute; }

# data[].attributes.body
es ok 👍

# data[].attributes.attachment_link.readable_text
 <body> <div class="sticky"> many sticky things like honey and goo </div> <div class="static">static</div> <div class="fixed">this is a verry still spot on the page</div> <div class="absilute"> theese are amany words for absilut theese are amany words for absilut theese are amany words for absilut theese are amany words for absilut theese are amany words for absilut theese are amany words for absilut theese are amany words for absilut theese are amany words for absilut theese are amany words for absilut theese are amany words for absilut theese are amany words for absilut theese are amany words for absilut </div> <div class="relitive">relitive stuff like your cousins</div> </body>

# data[].attributes.body
Did it once but I wasn't signed in, and I did it again and it was broken :(

# data[].attributes.attachment_link.readable_text
 body{background-color: darkgray} .Absolute { position: absolute; right: 0; font-size: 72px; font-family: courier; border-style: dotted; border-color:red; background-color: orange; border-width: 5px;} .Fixed { position: fixed; left: 0; font-size: 72px; font-family: courier; border-style: dotted; border-color:blue; background-color: lightblue; border-width: 5px;} .Relative{ position: Relative; bottom: 0; font-size: 72px; font-family: courier; border-style: dotted; border-color:lavender; background-color: purple; border-width: 5px;} .Static{ position: static; right: 0; font-size: 72px; font-family: courier; border-style: dotted; border-color:green; background-color: lightgreen; border-width: 5px;} .Sticky{ position: sticky; bottom:0; font-size: 72px; font-family: courier; border-style: dotted; border-color:orange; background-color: yellow; border-width: 5px;}

# data[].attributes.headline
it looked a lot better but i forgot to save and now i'm left with this

# data[].attributes.subject
it looked a lot better but i forgot to save and now i'm left with this

# data[].attributes.attachment_link.readable_text
Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

JavaScript

JavaScript Preprocessor
Babel includes JSX processing.
Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

# data[].attributes.body
I love dr house

# data[].attributes.attachment_link.readable_text
 .sticky {position: sticky; background-color: lightyellow; border-style: inset; border-color: lightblue; border-width: 15px; font-family: Theano Didot; font-size: 10px; height: 100px; font-size: 50px;} .static {position: static; background-color: tan; border-style: double; border-color: sienna; border-width: 5px; font-family: arial; font-size: 15px; padding:5px; margin: 20px;} body {background-color: pink;} .Relative {position: relative; background-color: brown; border-style: solid; border-color: black; border-width: 2px; font-family: arial; font-size: 15px; font-color: white; height: 70px;} .absolute {position: absolute; background-color:lightgreen; border-style: solid; border-color: grey; border-width:5px; font-family: arial; font-size: 20px; height:250px; padding: 10px;} .fixed {position: fixed; background-color: orange; border-style: solid; border-color: black; border-width: 1px; font-family:arial; font-size: 20px; height: 40px; font-color: white; right:0; bottom: 0;}

# data[].attributes.body
DO NOT LOOK AT MY BIO!!

# data[].attributes.attachment_link.readable_text
 div.sticky {position: sticky; top: 0; z-index: 1; background-color: blue; Border-style: dotted; border-color: red; border-width: 6px; text-align: right;} div.static {position: static; top: 30px; border: 3px solid #73AD21; background-color: violet; margin-top: 100px;} div.fixed {position: fixed; bottom: 0; right: 0; width: 300px; border: 3px; border-color: black; border-style: dotted; background-color: pink;} div.relative {position: relative; left: 30px; border: 3px; border-color: orange; border-style: groove; margin-top: 70px; background-color: white; color: lawngreen; text-align: center;} div.absolute {position: absolute; top: 80px; right: 0; width: 200px; height: 100px; border: 3px; background-color: green; } body {background-color: gold;}

# data[].attributes.attachment_link.readable_text
 body { background-color: #5555ff; } .sticky { position: sticky; top: 0px; background-color: #00ffff; border-style: ridge; border-color: #00ff00; border-width: 20px; font-family: arial; font-size: 20px; text-align: center; } .static { position: static; background-color: #ffff00; border-style: ridge; border-color: #0f0000; border-width: 20px; font-family: arial; font-size: 20px; text-align: center; } .relative { position: relative; top: 10px; left: 5px; background-color: #0fff00; border-style: ridge; border-color: #0000ff; border-width: 20px; font-family: arial; font-size: 20px; text-align: center; } .absolute { position: absolute; top: 600px; background-color: #ffff00; border-style: ridge; border-color: #0f0000; border-width: 10px; font-family: arial; font-size: 20px; text-align: center; } .fixed { position: fixed; top: 500px; left: 850px; background-color: #ffff00; border-style: ridge; border-color: #0f0000; border-width: 10px; font-family: arial; font-size: 20px; text-align: center; }

# data[].attributes.attachment_link.readable_text
 .sticky { z-index: 1; position: sticky; top: 0; background-color: red; border-style: dashed; border-color: maroon; border-width: 9px; font-family: Arial, sans-serif; font-size: 30px; text-align: center; } .static { position: static; border: 10px solid orange; background-color: blue; text-align: center; } .relative { position: relative; left: 40px; border: 15px solid brown; background-color: gray; font-size: 50px; } .absolute { color: white; position: absolute; top: 550px; left: 0; width: 400px; height: 800px; border: 10px solid lightpink; } .fixed { position: fixed; bottom: 0; right: 0; width: 300px; border: 3px solid green; background-color: navy; }

# data[].attributes.attachment_link.title
5 positions- Sticky, Fixed, Absolute, Static, and Relative

# data[].attributes.attachment_link.readable_text
 .sticky {position: sticky; background-color: blue; border-style: inset; border-color: gold; border-width: 5px; font-family: arial; font-size: 10px; height: 100px; font-size: 50px;} .static {position: static; background-color: red; border-style: double; border-color: sienna; border-width: 5px; font-family: arial; font-size: 15px; padding:5px; margin: 20px;} body {background-color: green;} .Relative {position: relative; background-color: brown; border-style: solid; border-color: black; border-width: 2px; font-family: arial; font-size: 15px; font-color: white; height: 70px;} .absolute {position: absolute; background-color:lightblue; border-style: solid; border-color: grey; border-width:5px; font-family: arial; font-size: 20px; height:250px; padding: 10px;} .fixed {position: fixed; background-color: magenta; border-style: solid; border-color: black; border-width: 1px; font-family:arial; font-size: 20px; height: 40px; font-color: white; right:0; bottom: 0;}

# data[].attributes.body
yeah

# data[].attributes.attachment_link.readable_text
Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

JavaScript

JavaScript Preprocessor
Babel includes JSX processing.
Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

# data[].attributes.body
this is for period 1 btw

# data[].attributes.attachment_link.readable_text
Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

JavaScript

JavaScript Preprocessor
Babel includes JSX processing.
Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

# data[].attributes.attachment_link.readable_text
Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

JavaScript

JavaScript Preprocessor
Babel includes JSX processing.
Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

# data[].attributes.attachment_link.readable_text
Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

JavaScript

JavaScript Preprocessor
Babel includes JSX processing.
Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

# data[].attributes.body
wompwomp

# data[].attributes.attachment_link.readable_text
Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

JavaScript

JavaScript Preprocessor
Babel includes JSX processing.
Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

# data[].attributes.body
I had to make it twice because it reloaded without saving

# data[].attributes.attachment_link.readable_text
 body { background-color: lavender } h1 { background-color:lightblue; border-style: solid; border-color: orange; text-align: center; height: 50px; } ul { background-color: lightgreen; width: 100px; border-style: solid; border-color: orange; } ol { background-color: tomato; width: 100px; height 200px; border-style: solid; border-color: orange; } img { width: 300px; border-style: solid; border-color: orange; }

# data[].attributes.attachment_link.readable_text
Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

JavaScript

JavaScript Preprocessor
Babel includes JSX processing.
Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

# data[].attributes.attachment_link.readable_text
Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

JavaScript

JavaScript Preprocessor
Babel includes JSX processing.
Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

# data[].attributes.attachment_link.readable_text
Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

JavaScript

JavaScript Preprocessor
Babel includes JSX processing.
Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

# data[].attributes.body
hoorah

# data[].attributes.attachment_link.readable_text
Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

JavaScript

JavaScript Preprocessor
Babel includes JSX processing.
Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

# data[].attributes.attachment_link.readable_text
Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

JavaScript

JavaScript Preprocessor
Babel includes JSX processing.
Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

# data[].attributes.headline
Please add screenshot of Accuracy results 

# data[].attributes.subject
Please add screenshot of Accuracy results 

# data[].attributes.body
Funfunfunfunfunfunfunfunfunfunfun

# data[].attributes.attachment_link.readable_text
 h1 {background-color: mediumpurple; text-align: center; font-family: arial; color: purple; font-size: 72px; border-style: solid;} footer {color: white; background-color: lightblue; border-style: solid; border-color: black; font-size: 42px} aside{width: 30%; padding: 15px; margin: 15px; float: right; background-color: lightgreen; border-style: solid; border-width: 1px; height: 300px; font-style: italic;} body{background-color: orange; width; 100%; padding: 15px; margin: 15px; font-family: arial; font-size: 32px; border-style: dotted}

# data[].attributes.headline
I maxed out a bunch of things and called it a day

# data[].attributes.subject
I maxed out a bunch of things and called it a day

# data[].attributes.body
I got bored and decided to die on level 42

# data[].attributes.headline
I just did squirrels and upgrade them once. :)- Cedes

# data[].attributes.subject
I just did squirrels and upgrade them once. :)- Cedes

# data[].attributes.body
Yes

# data[].attributes.body
I'ma start off the rip

# data[].attributes.body
the side bar is to the side but it is for some reasen blowe everything else

# data[].attributes.body
really difficult

# data[].attributes.body
emoticon

# data[].attributes.attachment_link.readable_text
 <h1><h1 style="color:magenta">h1 header in purple, Airil font 72px background color, medimum, center alin</h1> <aside>aside {width 30%</aside> <Body>iulfgnoeruh ouwerh iue niouwhf iurh grhg iuern guirig iug iu34h iureh fui 3huith i giu87 734iu e ie guwr fukru gu hgu4 giurwh giuehg ierhguierh ger gerh giuerh gihfiu eger gueqhf ouqfh oq huo uirh uer e gyug hj 4y g fy guy gj htr h4 r oiuiuehio ufhoeigh niouehgnouq o7yu</Body> <footer>KJ HDo8iuhefiure hgoi</footer>

# data[].attributes.body
womp womp

# data[].attributes.attachment_link.readable_text
 <header> <h1> h1 header in white, Arial font, 73px background-color: green </h1> </header> <aside> weeeeeeeeeeeeeeeeeeeeeeeeeeeee eewee ewewe w e e e kwe e e e e e e e e w e e w e eweeeeeeeeeeeeeeeeeeeeeeeeeeeee eewee ewewe w e e e kwe e e e e e e e e w e e w e eweeeeeeeeeeeeeeeeeeeeeeeeeeeee eewee ewewe w e e e kwe e e e e e e e e w e e w e eweeeeeeeeeeeeeeeeeeeeeeeeeeeee eewee ewewe w e e e kwe e e e e e e e e w e e w e eweeeeeeeeeeeeeeeeeeeeeeeeeeeee eewee ewewe w e e e kwe e e e e e e e e w e e w e eweeeeeeeeeeeeeeeeeeeeeeeeeeeee eewee ewewe w e e e kwe e e e e e e e e w e e w e eweeeeeeeeeeeeeeeeeeeeeeeeeeeee eewee ewewe w e e e kwe e e e e e e e e w e e w e e </aside> <body> weeeeeeeeeeeeeeeeeeeeweeeeeeeeeeeeeeeeeeeeweeeeeee </body> <footer> womp womp supper sigma </footer>

# data[].attributes.attachment_link.readable_text
 <body> <header> <h1> h1 header in yellow, Arial font, 73px background-color: red </h1> </header> <aside> weeeeeeeeeeeeeeeeeeeeeeeeeeeee eewee ewewe w e e e kwe e e e e e e e e w e e w e eweeeeeeeeeeeeeeeeeeeeeeeeeeeee eewee ewewe w e e e kwe e e e e e e e e w e e w e eweeeeeeeeeeeeeeeeeeeeeeeeeeeee eewee ewewe w e e e kwe e e e e e e e e w e e w e eweeeeeeeeeeeeeeeeeeeeeeeeeeeee eewee ewewe w e e e kwe e e e e e e e e w e e w e eweeeeeeeeeeeeeeeeeeeeeeeeeeeee eewee ewewe w e e e kwe e e e e e e e e w e e w e eweeeeeeeeeeeeeeeeeeeeeeeeeeeee eewee ewewe w e e e kwe e e e e e e e e w e e w e eweeeeeeeeeeeeeeeeeeeeeeeeeeeee eewee ewewe w e e e kwe e e e e e e e e w e e w e e eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee </aside> <footer> <h3> womp womp supper sigma sigma ohio rizz skibidi slicers fettus </footer> </body>

# data[].attributes.attachment_link.readable_text
 h1 { background-color:mediumpurple; font-family:arial; font-size:72px; border-style:solid } body {width:100%; padding:15px; margin:15px; font-family:arial; font-size:32px; background-color:orange; border-style:dotted; } aside { width:30%; padding:15px; margin:50px; float:right; font-style:italic; background-color:lightgreen; border-style:solid; } footer { color:white; font-size:42px; border-style:solid; background-color:lightblue; border-color:black; }

# data[].attributes.attachment_link.readable_text
 <h1> Harlow's design</h1> <aside>This is Harlow's aside blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah </aside> <body> I don't know what to put in my body. blah blah blah blahblah blah blah blah blah blah blah blahblah blah blah blahblah blah blah blah blah blah blah blahblah blah blah blahblah blah blah blah blah blah blah blahblah blah blah blahblah blah blah blah blah blah blah blahblah blah blah blahblah blah blah blah blah blah blah blahblah blah blah blahblah blah blah blah blah blah blah blahblah blah blah blahblah blah blah blah blah blah blah blahblah blah blah blahblah blah </body> <footer>blah blah blah</footer>

# data[].attributes.attachment_link.readable_text
 body { background-color:orange; width:100%; padding:15px; margin:15px; font-family:arial; font-size:32px; border-style:solid; } h1{ border-style:solid; background-color:purple; text-align:center; } footer{ border-style:solid; background-color:lightblue; color:white; border-color:black; text-align:center; } aside{ float:right; border-style:solid; background-color:lightgreen; width:30%; padding:15px; margin:50; font-style:italic; }

# data[].attributes.body
i changed it so the header and footer were in the middle but for some reason its not saving that

# data[].attributes.attachment_link.readable_text
 h1{ background-color:purple; family-font:arial text-size:72px; border-style:solid; :30%; } body { width:100%; padding:15px; margin:15px; font-family:arial; font-size:32px; background-color:darkorange; border-style:dotted; } aside{ width:30%; padding:15px; margin:15px; float:right; font-style:italic; background-color:lightgreen; border-style:solid } footer { color: white; font-size: 42px; border-style: solid; background-color: lightblue; border-color:black; }

# data[].attributes.attachment_link.readable_text
Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

JavaScript

JavaScript Preprocessor
Babel includes JSX processing.
Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

# data[].attributes.attachment_link.readable_text
 <div> <h1>HEADER with purple background in arial font</h1> <body>BODY with orange background, arial font, size 32px</body> <aside>ASIDE with green background, arial font, size 15px</aside> <br><br><br><br><br><br><br><br><br> <footer>FOOTER with blue background, arial font, size 42px</footer>

# data[].attributes.body
(Emma helped like a lot)

# data[].attributes.attachment_link.readable_text
Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

JavaScript

JavaScript Preprocessor
Babel includes JSX processing.
Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

# data[].attributes.attachment_link.readable_text
The world's oldest webcam. Live San Francisco views since 1994.

FogCam sprang to life in 1994 as a student project in the Department of Instructional Technologies at San Francisco State University. Fogcam! is the oldest continuously operating webcam in the world.

Wikipedia confirms we are the oldest operating webcam. You can even see FogCam on Wikipedia's list of oldest websites.

We've slightly changed campus locations a few times as necessary over the years, to prevent being shut down by the university.

Historically, the first webcam actually predated the web. The Trojan Room coffee pot cam at the University of Cambridge came online way back in 1991. It was retired in 2001.

News articles about FogCam:

FogCam! created by Jeff Schwartz (aka Webdog) and Dan Wong (aka Danno).
Operated by Academic Technology at San Francisco State University. Follow us on Twitter.

Last updated: March 23, 2021

# data[].attributes.attachment_link.description
The world's oldest webcam. Live San Francisco views since 1994. FogCam sprang to life in 1994 as a student project in the Department of Instructional Technologies at San Francisco State University. Fogcam! is the oldest continuously operating webcam in the world. Wikipedia confirms we are the oldest operating webcam.

# data[].attributes.headline
Mine (disclaimer it has purple background padlet just wont update for some reason even when link is opened)

# data[].attributes.subject
Mine (disclaimer it has purple background padlet just wont update for some reason even when link is opened)

# data[].attributes.body
Its mine and i am not proud of it

# data[].attributes.attachment_link.readable_text
Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

JavaScript

JavaScript Preprocessor
Babel includes JSX processing.
Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

# data[].attributes.attachment_link.readable_text
 <h1>header</h1> <aside>this is on da side this is on da side this is on da side this is on da side this is on da side </aside> <Body>this is the body this is the body this is the body this is the body this is the body this is the body this is the body this is the body this is the body this is the body this is the body this is the body this is the body this is the body this is the body this is the body this is the body this is the body this is the body this is the body </Body> <footer>this is the footer</footer>

# data[].attributes.body
womp womp (pls follow me too!!)

# data[].attributes.attachment_link.readable_text
Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

JavaScript

JavaScript Preprocessor
Babel includes JSX processing.
Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

# data[].attributes.attachment_link.readable_text
 <body> <h1> H1 header in purple, arial</h1> <aside> aside { width padding margin float font-style background-color border-style hi hi hi hi ji hi hi hi hi hi hi bah blah blah blah blah blah balh </aside> this is a body paragraph hcbhwbfchjfbchjrsdbv hejcfndbv erhfnvbuerfhdnmvbeurhfdmn bvreiu uhjfndmbchjref jcerhbfvjhrvjev ejhrbvhregbehrjhv ehbvhejv hjrbvhetv hjehvbebgbghgbvherbggerh <footer> footer </footer> <body> </body>

# data[].attributes.attachment_link.readable_text
Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

JavaScript

JavaScript Preprocessor
Babel includes JSX processing.
Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

# data[].attributes.body
yay

# data[].attributes.attachment_link.readable_text
Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

JavaScript

JavaScript Preprocessor
Babel includes JSX processing.
Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

# data[].attributes.attachment_link.readable_text
 <h1> h1 header in purple, Arial font, 72px background-color: lightpurple </h1> <body>body { width: 100%; padding: 15px; margin: 15px; font-family: arial; font-size; 32px; background-color: orange; border-style: dotted; }</body> <aside> aside { width 30%; padding; 15px; margin: 15px; float: right; font-style: Italic; background-color: lightgreen; border-style: solid; }</aside> <footer>footer { bordor-style: solid; background-color: lightblue; }</footer>

# data[].attributes.body
my fire padlet

# data[].attributes.attachment_link.readable_text
 <body> <header> <h1> h1 header in yellow, Arial font, 73px background-color: red </h1> </header> <aside> weeeeeeeeeeeeeeeeeeeeeeeeeeeee eewee ewewe w e e e kwe e e e e e e e e w e e w e eweeeeeeeeeeeeeeeeeeeeeeeeeeeee eewee ewewe w e e e kwe e e e e e e e e w e e w e eweeeeeeeeeeeeeeeeeeeeeeeeeeeee eewee ewewe w e e e kwe e e e e e e e e w e e w e eweeeeeeeeeeeeeeeeeeeeeeeeeeeee eewee ewewe w e e e kwe e e e e e e e e w e e w e eweeeeeeeeeeeeeeeeeeeeeeeeeeeee eewee ewewe w e e e kwe e e e e e e e e w e e w e eweeeeeeeeeeeeeeeeeeeeeeeeeeeee eewee ewewe w e e e kwe e e e e e e e e w e e w e eweeeeeeeeeeeeeeeeeeeeeeeeeeeee eewee ewewe w e e e kwe e e e e e e e e w e e w e e eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee </aside> <footer> <h3> womp womp supper sigma sigma ohio rizz skibidi slicers fettus </footer> </body>

# data[].attributes.body
yay

# data[].attributes.body
the icon isn't loading everything i added, it looks better in codepen. To see the better version click on it.

# data[].attributes.attachment_link.readable_text
Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

JavaScript

JavaScript Preprocessor
Babel includes JSX processing.
Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

# data[].attributes.body
fortnite battle pass butted up my pc cause i need me to get the fortnite battle pass

# data[].attributes.attachment_link.readable_text
 body { width: 100%; padding:5px; margin:15px font-family: arial; font-size: 30px; background-color: orange; border-style: dotted; text-align: center; } aside{width: 30%; padding: 20px; float: right; font-style: italic; background-color: green; border-style: solid; } h1{ font-family: arial; font-size: 40px; background-color: purple; border-style: solid; text-align: center; } footer { font-size: 50px; border-style: solid; background-color: lightblue; color: white; border-color: black; font-size: 42px; }