Initializing
Liveweave
Web
expand_more
home
Home
data_object
CSS Explorer
arrow_outward
Palette
Color Explorer
arrow_outward
Polyline
Graphics Editor
arrow_outward
outbox_alt
Generative AI
arrow_outward
frame_source
Python Playground
New
arrow_outward
build
Tools
expand_more
restart_alt
Load "Hello Weaver!"
post_add
Generate Lorem ipsum...
code
Format HTML
code_blocks
Format CSS
data_object
Format JavaScript
library_add
Library
expand_more
A
Algolia JS
Animate CSS
Apex Charts JS
B
Bulma CSS
Bootstrap
C
Chart JS
Chartist
Create JS
D
D3
Dojo
F
Foundation
Fullpage JS
G
Granim JS
Google Charts
H
Halfmoon
J
jQuery
M
Materialize
Moment JS
Masonry JS
Milligram CSS
P
Pure CSS
Primer CSS
Popper JS
Pattern CSS
Picnic CSS
R
React JS
Raphael JS
Raisin CSS
S
Semantic UI
Skeleton CSS
Spectre CSS
Tachyons CSS
T
Tailwind
Three JS
U
UI Kit
Vis JS
W
Water CSS
download
Download
expand_more
developer_mode
Download as HTML
folder_zip
Download as .ZIP
cloud_upload
Save
account_circle
Login
settings
Settings
expand_more
14
px
Live mode
Night mode
Line number
Mini map
Word wrap
sync_alt
Reset Settings
smart_display
Run
<!DOCTYPE html> <html> <head> <title>What IXD Means to Me</title> </head> <body> <div class="header"> <img src="https://i.imgur.com/Y8Q8Wnd.gif"/> <br/> <h1><strong>IxD? <br/> Huh? What?</strong></h1><br/> </div> <div class="intro"> <p>Disclaimer: <strong> I'M NOT A DESIGNER.</strong> I’ve studied design principles and tried to familiarize myself with what is “good designâ€, but just because I took a couple of courses and appreciate good aesthetics doesn’t suddenly make me a designer.<br/>I'm more of an <span class="hiddentxt"><a href="https://i.imgur.com/K1ViSNZ.gif"class="gif">ad woman</a></span><span class="hiddenimg"><img src="https://i.imgur.com/K1ViSNZ.gif"class="gif" width="250" /></span></p> </div> <div class="good-ixd"> <h2>Ok, so what is <span class="hiddentxt"><a href="https://i.imgur.com/7eB7iD4.gif"class="gif">good interaction design?</a></span><span class="hiddenimg"><img src="https://i.imgur.com/7eB7iD4.gif"class="gif" width="250" /></span></h2> <p>I think it's similar to advertising. Good interactive design would be exploring and identifying the most functional, communicative, informative and also aesthetic solutions to how a user interacts with a product, system, or whatever it may be.</p> </div> <div class="guru"> <h2>But <span class="hiddentxt"><a href="https://i.imgur.com/Wg0gUP1.gif"class="gif">IF</a></span><span class="hiddenimg"><img src="https://i.imgur.com/Wg0gUP1.gif"class="gif" width="250" /></span> I was a coding / design?</h2> <p>Well obviously I wouldn't be taking a coding class? But seriously, I would create my own website from scrath and it wouldn't be "under contruction" as it always is now.</p> </div> <h2>Here's some ~Amazing~ Websites:</h2> <table> <tr> <td ><a href="https://www.craigslist.org"><img src="https://i.imgur.com/PxidKqA.png"class="table-img"></a></td> <td class="description"><p><strong>Craigslist:</strong><br/>So this one might seem crazy but scratch the norms of a “beautiful aesthetic†and just focus on the functionality for a while. It’s super easy to use and so direct. It’s Craigslist.</p> </td> </tr> <tr> <td><a href="https://www.glossier.com"><img src="https://i.imgur.com/tYvn0Zt.png"class="table-img"></a></td> <td class="description"><p><strong>Glossier:</strong><br/>This one is just my kind of aesthetics. It’s cute, all pink and ~hip~</p> </td> </tr> <tr> <td><a href="https://www.netflix.com"><img src="https://i.imgur.com/vSTjhJL.jpg"class="table-img"></a></td> <td class="description"><p><strong>Netflix:</strong><br/>They figured out the perfect website for people to stay on (like forever). It's very easy to use and so addictive.</p> </td> </tr> </table> </body> </html>
.lw { font-size: 60px; } .header{ padding-bottom: 60px; } h1 { font-size: 100px; font-style: italic; font-family: Gill Sans; } h2 { font-style: italic; font-family: Gill Sans; } .hiddenimg { display: none; } .hiddentxt { font-weight: bold; color: #F00; } .hiddentxt a { color: #F00; text-decoration: none; } .hiddentxt:hover ~ .hiddenimg { display: block; } body{ width: 1080px; background-color: #fccfc2; color: #000000; font-family: sans-serif; padding-left: 50px; padding-right: 50px; padding-top: 30px; padding-bottom: 50; } .intro{ padding-bottom: 50px; } .good-ixd{ padding-bottom: 50px; } .guru{ padding-bottom: 50px; } .gif{ width: 600px; } p{ width: 600px; /* padding-right: 30px; padding-left: 70px;*/ } img{ width: 150px; } .table-img{ width: 250; } td p{ width: 300px; font-size: 14px; } .description{ text-align: left; font-size: 15px; padding: 20px; }
// Write JavaScript here