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> <body style="background-color:#EDE2E8"> <title>What IxD Means To Me</title> <div> <h2 class="IXD">What IxD Means to Me</h2> <br/> <p class="good-ixd">What is Good Interaction Design?</p> <p class="good-ixd-meaning">Good Interaction Design, in my opinion is when a user has a successful and easy experience navigating through whatever it is they are working with. When someone is able to create something that can be solved fast but in a unique and interesting way I think they have succeeded in interaction design. </p> <hr class="style13"> <p class="good-ixd">If I was a coding/ interaction design guru what would you want create?</p> <p class="good-ixd-meaning"> If I was a coding / interaction design guru I would want to create an app that gives a person a better look into the food their eating. The app would be able to scan peoples food and give them information about where the food is coming from, the best time frame to eat the food, and how processed the food is. It would be able to help people live a healthier life.</p> <hr class="style13"> <p class="good-ixd"> Three Examples of Impressive Interaction Design</p> <figure> <img class="thin-border" src="https://i.imgur.com/LOHF6To.png" style="width:260px; height:200px;" > <figcaption class="good-ixd-meaning"> I like the website cycleman because it feels like you're taking a journey through different personalities as you scroll down the page looking at different bikes. Each bike is classified by the type of person who usually rides it and the color palette matches those personalities.</figcaption></figure> <figure> <img class="thin-border" src="https://i.imgur.com/n4sKMvk.png" style="width:260px; height:200px;"><figcaption class="good-ixd-meaning margin-top"> I really like the webiste glossier has because it's fresh and for me breaks a barrier of what a traditional makeup website would be styled like. The grid is inviting and the cursor changes shape every time you hover over different products. The cursor shapes relate back to the shapes of the stickers you get with your purchase. They have a limited but sophistacted color palette that I think works well for the company. </figcaption></figure> <figure> <img class="thin-border"src="https://i.imgur.com/PVN6Jsa.png" style="width:260px; height:200px;"> <figcaption class="good-ixd-meaning"> I recently came upon the website for the design studio Hort. It is a very modern website with monospaced fonts used. What I love most about this website is how you navigate through the work. Instead of being taken to a new page every project you click on you can just click through the work on the homepage. The design of the website perfectly matches with the personality of the studio and the kind of work they do. It is very cohesive.</figcaption></figure> </div> </body> </head>
h2 { font-family: Tahoma, Verdana, Segoe, sans-serif; text-align: center; text-shadow: 2px 2px 3px #511939; color: white; } .good-ixd{ font-family: Tahoma, Verdana, Segoe, sans-serif; font-weight: bold; text-indent: 2%; text-align-last: left; font-size: 13pt; text-shadow: 2px 2px 3px #511939; color: white; } .good-ixd-meaning{ text-indent: 2%; font-size: 11pt ; font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; color: #381027; margin-top: 10px; } .rectangle{ height: 10px; width: 1500px; background-color: #634255; } .font{ font-family: Tahoma, Verdana, Segoe, sans-serif; font-size: 12px;} .thin-border{ border-color: #634255; border-width: 7px; border-style: double; } .style13 { height: 40px; border: 0; box-shadow: 0 60px 60px -60px #634255 inset; }
// Write JavaScript here