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 - Grace</title> <link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet"> </head> <body> <div class="section_1"> <h6>Ixd Week 3 <span style="float:right;">Grace</span></h6> <h1>What <span style="color:#3e7eff">IxD</span> Means To Me</h1> </div> <div class="padding"> </div> <div class="section_1" > <h3>What Is <span style="color:#3e7eff">GOOD</span> Interaction Design To Me</h3> <p>Good interactive design to me is bringing a positive value to people through most simple and intuitive actions. <br>Good interactive design always has to serve people's needs and help to achieve their goal. I have seen a lot of interactive design that is just bragging their cool, cutting-edge technology and missing what users truly need.<br> Having a giant display and pretty interface, or making a new app and more apps aren't a solution. I think that is what we always have to beware of. For example, why do we have to spend 5 minutes to open and start a car with new, cool mobile app while we can just put the traditional physical key and start a car within 2 minutes? Technologies and cool motions, micro-interactions are all means, not a goal. I love and value the design that has a lot of thoughts about users and has a dedication to humanity.</p> </div> <div class="padding_2"> </div> <div class="section_1"> <h3>This <span style="color:#3e7eff">would be</span> cool</h3> <blockquote style="font-family: 'PT Serif', serif;font-size:9px;">"If you were a coding and design guru who could create anything singlehandedly, what would you make?"</blockquote> <p>Beside my ambition to make my portfolio website looking terrific, I would like to make a simple interactive page that I can hang on a website like google doodle.</p> <img src="https://media.giphy.com/media/yPyyu2nqaYbiU/giphy.gif" width=50% align="middle" style="padding-left:20%;border:2px" > <p>I LOVE exploring google doodles, and I always enjoy their mini-games. They looks simple and casual, but it is stronglt effective way to deliver messages in intuitive way. It instantly grab users' attention, and allow them to interact with webpage. It is delightful. I would love to make use of coding and design for articulating my thoughts and mood into visual.</p> <img src="https://media.giphy.com/media/f7rDDvcOV9n8I/giphy.gif"style="padding-top:10%; padding-left:60%; border:2px" width="30%"> <p style="font-family: 'Coming Soon', cursive; font-size:8px, padding-bottom:30%; padding-left:60%"> " One of the most cool part of it is sometimes doodle is just purely for fun! Doing for fun is fun"</p> </div> <div class="padding_2"> </div> <div class="section_1"> <h3>These <span style="color:#3e7eff">are</span> cool</h3> <blockquote style="font-family: 'PT Serif', serif;font-size:9px;">"Interaction design that you find cool,meaningful,important, or beautiful"</blockquote> <div class="Section_1_child"> <h4>1. Please feed the lion</h4> <video src="https://youtu.be/T8RWjtNUOuU" style="padding:2px;border:2px " width="320" height="240" controls> Your browser does not support the video tag. </video> <p> This is an interactive sculpture project that showcases the combination of public art and technology. When people feed the words, it generates the poem that is written by machine learning. This is interesting in the way that the public actually can participate in the project.</p> </div> <div class="Section_1_child"> <h4>2. Notable Women Project</h4> <a href="https://notablewomen.withgoogle.com/100/jane-johnston-schoolcraft" target="_blank"><h6>explore the website</h6></a> <video src="https://youtu.be/1peWF8ThC8Y" style="padding:2px;border:2px" width="320" height="240" controls> Your browser does not support the video tag. </video> <p>This is Notable Women by Rosie Rios. This is an AR experience that allows you to see 100 historic American women where they’ve historically been left out over U.S. currency. This project is interesting because it delivers its message very clear by utilizing the technology that can convey its concept most powerful way. </p> </div> <div class="Section_1_child"> <h4>3. Wiblr</h4> <a href="http://lawriecape.co.uk/wiblr/" target="_blank"> <h6>explore the website</h6> </a> <img src="https://lh3.googleusercontent.com/Xh5DgZ8TYPVOE-WfSNcxbhfigwgeowdqWsuf-Ab-tqcjbd6btj8cOZwrtnROIRt8GNDCx2wHpqsF3LYdQnINRpTawC1r5pQby-OL=s850" height="240"> <p>This is just a fun and might be a little silly website that I found oddly satisfying. This is basically the website that turns any photo into a Jell-O formula. If you wiggle it too hard, it gets a little creepy and weird, but still, it guarantees an amusement for 30 seconds.</p> </div> </div> </body> </html>
<!--font--> .lw { font-size: 60px; } h1{ font-family: 'Montserrat', sans-serif; font-size: 30px; } h3{ font-family: 'Montserrat', sans-serif; font-size: 15px; } h4{ font-family: 'Montserrat', sans-serif; font-size: 11px; } h6{ font-family: 'Montserrat', sans-serif; font-size: 6px; } p { font-size: 10px; font-family: 'Montserrat', sans-serif; line-height: 150%; } .section_1 { width: 50%; background-color: white; padding-left: 20%; padding-right: 20% } .section_1_child{ width: 80%; background-color: white; padding-left: 10%; padding-right: 10%; } .padding{ height:50px; background-color: white; } .padding_2{ height:20px; background-color: white; }
// Write JavaScript here