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> <!-- Start your code here --> <h1>What IxD means to me</h1> <div id="good-interaction-design"> <p class="good">Interaction design also known as IxD, is the design of experience and flow between different media platforms and the user. It can be digital as websites and mobile apps or physical as kids toys and coffee makers. It is the key connection between the product and the user.</p> <p class="good">I believe good interaction designs are the ones that truly understand user’s needs and create experiences that combine with proper style and smooth flow. Design and be simple but the product should get their selling points showing; design can also be complex but the users should not be confused when they are in the experience.</p> </div> <div id="if-im-a-guru"> <h2>Things that I Would Made If I'm A Guru</h2> <ul> <li>A key gets you into any computer and any system</li> <img class="guru" src="http://www.digiflak.com/images/cms/content/howto/df_attach2.gif"/> <li>A search engine that doesn't letf any kind of trach marks</li> <img class="guru" src="https://media.giphy.com/media/l3vR6dCA3mkF9eXgQ/giphy.gif"/> </ul> </div> <div id="designs-that-i-like"> <h2>Designs that I Like</h2> <h3>OFF WHITE</h3> <p>Unique style, fits the brand, clear instructions for the users.</p> <a href="https://www.off---white.com/en/US"><img class="like" src="https://pbs.twimg.com/media/CiQ6eTzUYAYjNOe.jpg:large"/></a> <a href="https://www.off---white.com/en/US"><img class="like" src="https://mir-s3-cdn-cf.behance.net/project_modules/1400/4ac64857203317.59d01f5dbb7c1.jpg"/></a> <h3>1833MARCIVE</h3> <p>The “calling†and “prefer to read†features combined digital and physical design created a different path of solution for different needs. </p> <a href="http://1833marcive.com/"><img class="like" src="https://images1.the-dots.com/1136789/call-marc-11.gif?p=projectImage"/></a> <a href="http://1833marcive.com/"><img class="like" src="https://images1.the-dots.com/1136793/call-marc-12.gif?p=projectImageFullJpg"></a> <h3>YOUTUBE</h3> <p>I'm not a fan of how the Youtube website looks like but there is one thing I really like about Youtube or any other big websites like Google, I like that these websites can learn from you base on your searching history or your personal preferences. The longer you use these websites they know more about you and they become more “customizedâ€. </p> <a href="https://www.youtube.com/"><img class="like" src="https://media.giphy.com/media/13Nc3xlO1kGg3S/source.gif"></a> </div> <!-- End your code here --> </body> </html>
.like{width: 1000px;display: block; margin-left: auto; margin-right: auto;} .guru{width: 500px;} .good{font-size: 16px; font-family: Futura, "Trebuchet MS", Arial, sans-serif;color: #808080;text-align:left;} p { font-size: 16px; font-family: Futura, "Trebuchet MS", Arial, sans-serif;color: #808080;text-align: center; } h1 { font-family: Futura, "Trebuchet MS", Arial, sans-serif;color: #FF7F50; font-size: 50; } h2 { font-family: Futura, "Trebuchet MS", Arial, sans-serif;color: #FFA500; } h3 { font-family: Futura, "Trebuchet MS", Arial, sans-serif;color: #8A2BE2; text-align: center; } li { font-family: Futura, "Trebuchet MS", Arial, sans-serif;color: #808080; } body{ background-color: #FAEBD7;}
// Write JavaScript here