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>HTML, CSS and JavaScript demo</title> </head> <body> <!-- Start your code here --> <div class="paper"> <div class="header"> <span style="font-weight:900">I F A H</span><br>P A N T I T A N O N T A <br><span style="font-size:16;font-weight:300"><i>Interactive Designer based in New York City</i></span> </div> <div class="contact"> <p>929-422-8501<br>ipantitanonta@gmail.com<br>ifah.work</p> </div> <div class="spacer"></div> <div class="info-container"> <div class="grid-container"> <div class="hide-column"></div> <div class="visible-column"> <div class="information-container"> <div> <h2>EDUCATION</h2> <div class="flexbox-container"> <div class="date-box">2015 - present </div> <div class="info-box"> <b>SCHOOL OF VISUAL ARTS</b><span>| New York, NY</span> <br>BFA Graphic Design, Class of 2019 <br><i>Dean’s List </i> </div> </div> </div> </div> <div class="information-container"> <div> <h2>EXPERIENCES</h2> <div class="flexbox-container"> <div class="date-box">2018 - present</div> <div class="info-box"> <b>WEB INTERN</b><br><i>VISUAL ARTS PRESS </i><span>| New York, NY</span> <ul> <li>Worked at SVA’s in-house design studio creating frontend and backend wireframes websites </li> <li> Built interactive prototypes in Framer and Sketch for website redesign and e-learning tools</li> <li>Designed new look and feel for institutional e-learning tool</li> </ul> </div> <div class="date-box">2018</div> <div class="info-box"> <b>GRAPHIC DESIGN INTERN</b><br><i>NOMSTER CHEF </i><span>| New York, NY</span> <ul> <li>Designed merchandise, created illustrations, for store, website, and social media. </li> <li> Photo editing and retouching for social media</li> <li>Graphic design of recipes meant for children </li> </ul> </div> <div class="date-box">2016</div> <div class="info-box"> <b>RESEARCH TRAINING</b><br><i>EDEN CAPITAL </i><span>| New York, NY</span> <ul> <li> Facebook and Twitter social media strategy research </li> </ul> </div> </div> </div> </div> <div class="information-container"> <div> <h2>SKILLS</h2> <div class="flexbox-container"> <div class="date-box">Professional</div> <div class="info-box"> <p>Adobe CC Suites, <br>Sketch, Framer, InVision <br>HTML/CSS, familiarity with JavaScript</p> </div> <div class="date-box">Languages</div> <div class="info-box"> <p>Thai (Native) <br>Fluent in English</p> </div> </div> </div> </div> </div> </div> </div> </div> <!-- End your code here --> </body> </html>
html{ font-family: 'Chivo', sans-serif; } h1{font-weight: 900;} h2{font-weight: 700;font-size:20px;} h3{font-weight: 400;} h4{font-weight: 300;} li{ font-size: 14; font-weight: 300; } .paper{ max-width: 850px; margin: 0px auto; border: 1px solid black; padding: 30px; } .header{ font-size: 30pt; } .contact{ font-weight: 300; } .spacer{ height: 20px; /* border: 1px solid red; */ } .grid-container{ display: grid; grid-template-columns: 15% 85%; /* border: 1px solid blue; */ } .information-container{ /* border: 1px solid green; */ font-weight: 700; } .information-container b{ font-weight: 700; font-size:16px ; } .flexbox-container{ display: flex; flex-direction: row; flex-flow: row wrap; align-items: baseline; } .date-box{ width: 150px; /* border: 1px solid orange; */ padding-right: 20px; font-size: 14; font-weight: 700; text-align: right; } .info-box{ width: 500px; /* border: 1px solid purple; */ padding-bottom: 10px; font-size: 14; font-weight: 400; } .info-box p{ font-weight: 300; } /* Responsive */ @media screen and (max-width: 768px) { .hide-column{ display: none; } .grid-container{ display: grid; grid-template-columns: 100%; } .date-box{ text-align: left; } } @media screen and (max-width: 375px) { .header{ font-size: 24px; } .info-container span{ display: none; } }
// Write JavaScript here