SALT-NLP/Design2Code
This dataset consists of 484 webpages from the C4 validation set, serving the purpose of testing multimodal LLMs on converting visual designs into code implementations. Each example is a pair of source HTML and screenshot ({id}.html and {id}.png). See the dataset in the huggingface format here. Note that all images in these webpages are replaced by a placeholder image (rick.jpg) Please refer to our project page and our paper for more information. Example Usage For example, you… See the full description on the dataset page: https://huggingface.co/datasets/SALT-NLP/Design2Code.
221.8k
1<!DOCTYPE html>2<html>3 <head>4 <style>5 body{margin:0;font-family:AvenirNextLTW01-Regular,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.5;color:#333}h1,h2,h3,h4,h5,h6{font-family:Avenir Next LT W01 Bold,Helvetica Neue,Helvetica,Arial,sans-serif;margin:0 0 .5em;font-weight:800;line-height:1.5}h1{font-size:2rem;line-height:1.25}a{color:#1d5be1;text-decoration:none}a:hover{color:#0051ff!important}a:visited{color:#588dff}strong{font-family:Avenir Next LT W01 Bold,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:800}hr{width:100px;margin:20px auto}@media(min-width:400px){body{font-size:16px}}@import "//fast.fonts.net/t/1.css?apiType=css&projectid=b18b286e-c3ca-4571-bad1-73fd6e67b6a6";@font-face{font-family:avenirnextltw01-regular;src:url(/fonts/2cd55546-ec00-4af9-aeca-4a3cd186da53.woff2) format("woff2"),url(/fonts/1e9892c0-6927-4412-9874-1b82801ba47a.woff) format("woff")}@font-face{font-family:avenirnextltw01-italic;src:url(/fonts/7377dbe6-f11a-4a05-b33c-bc8ce1f60f84.woff2) format("woff2"),url(/fonts/92b66dbd-4201-4ac2-a605-4d4ffc8705cc.woff) format("woff")}@font-face{font-family:avenir next lt w01 bold;src:url(/fonts/14c73713-e4df-4dba-933b-057feeac8dd1.woff2) format("woff2"),url(/fonts/b8e906a1-f5e8-4bf1-8e80-82c646ca4d5f.woff) format("woff")}*{box-sizing:border-box}6 7 8.page-container.svelte-88o8v4.svelte-88o8v4{padding:0 10px;margin:0;max-width:100vw}main.svelte-88o8v4.svelte-88o8v4{margin:0 auto;max-width:100vw;padding:10px 0;position:relative}.content.svelte-88o8v4.svelte-88o8v4{margin:10px 0}@media(min-width:600px){.content.svelte-88o8v4.svelte-88o8v4{margin:20px 0}.page-container.svelte-88o8v4.svelte-88o8v4{margin:0 auto;max-width:56em}main.svelte-88o8v4.svelte-88o8v4{margin:0 auto;max-width:56em;padding:10px 20px;position:relative}}footer.svelte-88o8v4.svelte-88o8v4{text-align:center;margin:40px 0 0}footer.svelte-88o8v4 ul.svelte-88o8v4{margin:0 auto;padding:0;text-align:center}footer.svelte-88o8v4 h3.svelte-88o8v4{margin-top:20px}footer.svelte-88o8v4 li.svelte-88o8v4{color:#888;list-style:none;display:inline-block;padding:4px 8px}.last-text.svelte-88o8v4 p.svelte-88o8v4{font-size:14px}.disclaimer.svelte-88o8v4.svelte-88o8v4{font-size:10px;color:#aaa}.amazon-euro.svelte-1rf4rl6.svelte-1rf4rl6{font-size:32px;margin:10px 0 20px}h2.svelte-1rf4rl6.svelte-1rf4rl6{font-size:18px}@media(min-width:600px){.amazon-euro.svelte-1rf4rl6.svelte-1rf4rl6{font-size:64px;margin:40px 0 20px}h2.svelte-1rf4rl6.svelte-1rf4rl6{font-size:24px}}.home-search.svelte-1rf4rl6 h1.svelte-1rf4rl6,.home-search.svelte-1rf4rl6 h2.svelte-1rf4rl6{text-align:center}.whats-new.svelte-1rf4rl6.svelte-1rf4rl6{margin-bottom:20px}.product-list.svelte-1rf4rl6.svelte-1rf4rl6{display:flex;flex-wrap:wrap;justify-content:space-around;padding:0;margin:0}@media(min-width:815px){.product-list.svelte-1rf4rl6.svelte-1rf4rl6{flex-wrap:nowrap}}.product-list.svelte-1rf4rl6 li.svelte-1rf4rl6{list-style:none;width:50%}@media(min-width:600px){.product-list.svelte-1rf4rl6 li.svelte-1rf4rl6{width:14em}}.product-list.svelte-1rf4rl6 .image.svelte-1rf4rl6{display:flex;align-items:center;justify-content:center;height:13em;width:100%}@media(min-width:600px){.product-list.svelte-1rf4rl6 .image.svelte-1rf4rl6{height:13em;width:13em}}.product-list-img{max-height:12em;max-width:10em}@media(min-width:600px){.product-list-img{max-width:12em}}.product-list.svelte-1rf4rl6 .info.svelte-1rf4rl6{max-width:10em;text-align:center;margin:0 auto 1em}.cart-list.svelte-1rf4rl6.svelte-1rf4rl6{display:flex;flex-wrap:wrap;justify-content:left;padding:0;margin:0}.cart-list.svelte-1rf4rl6 li.svelte-1rf4rl6{list-style:none;margin:10px;max-width:5em;width:100%}.cart-list.svelte-1rf4rl6 img.svelte-1rf4rl6{max-height:4em;max-width:4em}.saved-for-later.svelte-wf8ook{margin-top:40px}.total.svelte-wf8ook{margin:40px 0 20px;text-align:right}.purchase.svelte-wf8ook{margin:20px 0;text-align:right}.uktotal.svelte-wf8ook{font-family:AvenirNextLTW01-Regular,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400}div.svelte-19ij1il{background-color:#c3ffb6;border-color:#c3ffb6;border-radius:5px;display:flex;align-items:center;flex-wrap:wrap;padding:10px;margin:10px}img.svelte-19ij1il{margin:4px 10px 0 5px;width:32px}.button.svelte-19ij1il{width:100%;margin:0;padding:0}p.svelte-19ij1il{width:calc(100% - 52px)}@media(min-width:600px){div.svelte-19ij1il{flex-wrap:nowrap}.button.svelte-19ij1il{margin-left:auto;width:auto}p.svelte-19ij1il{width:auto}}div.svelte-sgmduk{display:flex;flex-direction:column;align-items:center;height:100vh}svg.svelte-sgmduk{animation:svelte-sgmduk-cart 2s 1s cubic-bezier(.5,-1,.5,1.5) infinite;opacity:0}h3.svelte-sgmduk{animation:svelte-sgmduk-pulse 6s .25s ease-out infinite;color:#1d5be1;opacity:0;margin:20px 0}@keyframes svelte-sgmduk-cart{0%{opacity:0;transform:skew(20deg) translateX(-120px);animation-timing-function:cubic-bezier(0,1,.5,1)}40%,50%{opacity:1;transform:none}100%{opacity:0;transform:skew(-15deg) translateX(120px)}}@keyframes svelte-sgmduk-pulse{0%{opacity:0}40%,60%{opacity:.6}100%{opacity:0}}section.svelte-cyi0wn{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:5px}@media(min-width:600px){section.svelte-cyi0wn{margin-top:10px}}.logo.svelte-cyi0wn{flex-shrink:0;order:1;margin-bottom:10px}@media(min-width:600px){.logo.svelte-cyi0wn{margin:0}}.cart-icon.svelte-cyi0wn{flex-shrink:0;order:2}.center.svelte-cyi0wn{order:3;width:100%}@media(min-width:600px){section.svelte-cyi0wn{flex-wrap:nowrap}.cart-icon.svelte-cyi0wn{flex-shrink:0}.center.svelte-cyi0wn{order:2}}h1.svelte-y8p2dn{font-size:32px;margin:40px 0 20px;text-align:center}p.svelte-y8p2dn{font-size:24px;margin:20px 0 40px;text-align:center}h1.svelte-y8p2dn{font-size:32px;margin:40px 0 20px;text-align:center}p.svelte-y8p2dn{font-size:24px;margin:20px 0 40px;text-align:center}.button.svelte-lkmlwh{color:#333;font-family:AvenirNextLTW01-Regular,Helvetica Neue,Helvetica,Arial,sans-serif;display:inline-block;padding:15px 20px;border:1px solid #eee;font-size:12px;background-color:#eee;border-radius:5px;transition:all .2s ease-out;white-space:nowrap}@media(min-width:600px){.button.svelte-lkmlwh{font-size:16px}}.button.svelte-lkmlwh:hover{background-color:#fefefe;cursor:pointer;color:#111}.small.svelte-lkmlwh{padding:5px 10px;font-size:14px}.delete.svelte-lkmlwh{background-color:#ffbdbd;border-color:#ffbdbd}.delete.svelte-lkmlwh:hover{background-color:#ffa8a8;border-color:#ffa8a8}.primary.svelte-lkmlwh{background-color:#fe0;border-color:#fe0;border-radius:10px;font-family:Avenir Next LT W01 Bold,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700}.primary.svelte-lkmlwh:hover{background-color:#ff0;border-color:#ff0}h1.svelte-196icgt,h2.svelte-196icgt{font-size:32px;margin:40px 0 20px;text-align:center}p.svelte-196icgt{font-size:24px;margin:20px 0 40px;text-align:center}.cart-items.svelte-1dy776d.svelte-1dy776d{margin:0;padding:0}.cart-item.svelte-1dy776d.svelte-1dy776d{display:flex;align-items:top;margin:20px auto 30px;max-width:500px}@media(min-width:600px){.cart-item.svelte-1dy776d.svelte-1dy776d{display:flex;align-items:top;margin:20px 0 30px;max-width:100%}}img.svelte-1dy776d.svelte-1dy776d{max-height:100px;max-width:100px;width:auto;height:auto}.image.svelte-1dy776d.svelte-1dy776d{display:flex;align-items:top;justify-content:center;flex-shrink:0;width:100px;padding:10px 20px 10px 10px}.title.svelte-1dy776d.svelte-1dy776d,.mobile-title.svelte-1dy776d.svelte-1dy776d{margin-top:0}.mobile-title.svelte-1dy776d.svelte-1dy776d{padding-left:10px}@media(min-width:600px){.mobile-title.svelte-1dy776d.svelte-1dy776d{display:none}}.title.svelte-1dy776d.svelte-1dy776d{display:none}@media(min-width:600px){.title.svelte-1dy776d.svelte-1dy776d{display:block}}.info-wrapper.svelte-1dy776d.svelte-1dy776d{display:flex;flex-direction:column;align-items:top;width:100%}@media(min-width:600px){.info-wrapper.svelte-1dy776d.svelte-1dy776d{flex-direction:row}}.details.svelte-1dy776d.svelte-1dy776d{display:flex;flex-direction:column;padding:10px 10px 0;width:100%;order:2}@media(min-width:600px){.details.svelte-1dy776d.svelte-1dy776d{padding:10px;order:1}}.offer.svelte-1dy776d.svelte-1dy776d{display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-shrink:0;padding:0 10px;width:100%;order:1}@media(min-width:600px){.offer.svelte-1dy776d.svelte-1dy776d{flex-direction:column;align-items:flex-start;padding:10px;width:200px;order:2}}.saved.svelte-1dy776d li.svelte-1dy776d{opacity:.75;transition:opacity .5s ease-out}.saved.svelte-1dy776d li.svelte-1dy776d:hover{opacity:1}.actions.svelte-1dy776d.svelte-1dy776d{display:flex;align-items:top;justify-content:space-between;transition:opacity .2s ease-out;margin-top:auto}@media(min-width:600px){.actions.svelte-1dy776d.svelte-1dy776d{justify-content:flex-start}}.button.svelte-1dy776d.svelte-1dy776d{margin-right:10px}.button.svelte-1dy776d.svelte-1dy776d:last-of-type{margin-right:0}@media(min-width:600px){.quantity.svelte-1dy776d.svelte-1dy776d{margin-top:auto}}.price.svelte-1dy776d.svelte-1dy776d{margin:0}@media(min-width:600px){.price.svelte-1dy776d.svelte-1dy776d{margin:0 0 10px}}p.svelte-1y7jbl9{background-color:#c3ffb6;border-color:#c3ffb6;border-radius:5px;display:block;padding:20px 30px}.searchbar.svelte-1ii5b0m.svelte-1ii5b0m{display:flex;justify-content:center;align-items:center}.home.svelte-1ii5b0m.svelte-1ii5b0m{display:block;text-align:center;margin:40px 0}@media(min-width:600px){.home.svelte-1ii5b0m.svelte-1ii5b0m{display:flex;margin:60px 0}}.search.svelte-1ii5b0m.svelte-1ii5b0m{display:inline-block;position:relative;width:100%;max-width:72vw}@media(min-width:600px){.search.svelte-1ii5b0m.svelte-1ii5b0m{max-width:300px}}.search.svelte-1ii5b0m input.svelte-1ii5b0m{font-family:AvenirNextLTW01-Regular,Helvetica Neue,Helvetica,Arial,sans-serif}.search-phrase.svelte-1ii5b0m.svelte-1ii5b0m{border:2px solid #888;border-radius:10px;font-size:16px;padding:10px 30px 10px 12px;transition:border .3s ease-out;width:100%}@media(min-width:600px){.home.svelte-1ii5b0m .search-phrase.svelte-1ii5b0m{border:3px solid #888;border-radius:15px;font-size:24px;padding:15px 45px 15px 18px}}.search-phrase.svelte-1ii5b0m.svelte-1ii5b0m:focus{outline:none;border-color:#1d5be1}.go.svelte-1ii5b0m.svelte-1ii5b0m{border:none;cursor:pointer;height:18px;-webkit-appearance:none;appearance:none;background:#fff;width:18px;opacity:.5;position:absolute;right:12px;top:calc(50% - 9px);transition:opacity .4s ease-out;padding:0}.go.svelte-1ii5b0m svg.svelte-1ii5b0m{color:#333;height:18px;width:18px}@media(min-width:600px){.home.svelte-1ii5b0m .go svg.svelte-1ii5b0m{height:27px;width:27px}}@media(min-width:600px){.home.svelte-1ii5b0m .go.svelte-1ii5b0m{height:36px;width:36px;top:17px;right:17px}}.go.svelte-1ii5b0m.svelte-1ii5b0m:hover{opacity:1}.department.svelte-1ii5b0m.svelte-1ii5b0m{margin:0 0 0 10px}.home.svelte-1ii5b0m .department.svelte-1ii5b0m{margin:20px 0 0}@media(min-width:600px){.home.svelte-1ii5b0m .department.svelte-1ii5b0m{margin:0 0 0 10px}}ul.svelte-120g71h{margin:0;padding:0}li.svelte-120g71h{list-style:none}article.svelte-184d925{padding-top:10px}.top.svelte-184d925{display:flex;flex-direction:column}@media(min-width:600px){.top.svelte-184d925{flex-direction:row}}.image.svelte-184d925{flex-shrink:0;width:100%}@media(min-width:600px){.image.svelte-184d925{width:320px}}@media(min-width:600px){.info.svelte-184d925{padding-left:20px}}@media(min-width:800px){.info.svelte-184d925{padding-left:40px}}img.svelte-9ip0af{opacity:0;transition:opacity 200ms ease-out}img.loaded.svelte-9ip0af{opacity:1}div.svelte-1c44y5p{width:100%;height:100%}h1.svelte-qvgdp3{margin:0;line-height:16px;font-weight:400}a.svelte-qvgdp3{color:#333;font-family:AvenirNextLTW01-Regular,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:16px;padding:0 0 10px}@media(min-width:600px){a.svelte-qvgdp3{padding:20px}}span.svelte-qvgdp3{font-family:Avenir Next LT W01 Bold,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700}p.svelte-1pvwypj.svelte-1pvwypj{display:inline-block;padding:10px;margin:0 0 5px}@media(min-width:600px){p.svelte-1pvwypj.svelte-1pvwypj{padding:20px}}.icon.svelte-1pvwypj.svelte-1pvwypj{display:block;position:relative;height:36px;width:36px}path.svelte-1pvwypj.svelte-1pvwypj{stroke:#333;transition:background-color .4s ease-out}circle.svelte-1pvwypj.svelte-1pvwypj{fill:#333;transition:background-color .4s ease-out}.active.svelte-1pvwypj path.svelte-1pvwypj{stroke:#1d5be1}.active.svelte-1pvwypj circle.svelte-1pvwypj{fill:#1d5be1}.total.svelte-1pvwypj.svelte-1pvwypj{opacity:0;position:absolute;top:-5px;right:-8px;border-radius:50%;background:#333;color:#fff;height:20px;width:20px;line-height:20px;text-align:center;font-size:10px;transition:background-color .4s ease-out}.active.svelte-1pvwypj .total.svelte-1pvwypj{animation:svelte-1pvwypj-show-total 1s cubic-bezier(.58,-.33,.17,1.52) forwards;background-color:#1d5be1}@keyframes svelte-1pvwypj-show-total{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:none}}ul.svelte-uc52w8{display:flex;flex-wrap:nowrap;margin:0;padding:0}li.svelte-uc52w8{font-size:12px;list-style:none;display:inline-block;padding:2px}@media(min-width:600px){li.svelte-uc52w8{font-size:16px;padding:4px 2px}}li.svelte-uc52w8:first-child{padding-left:0}select.svelte-gfnsba.svelte-gfnsba{color:#fff;display:block;font-size:16px;cursor:pointer;line-height:1.25;padding:10px;box-sizing:border-box;margin:0;width:100%;border:1px solid #1d5be1;box-shadow:none;border-radius:10px;-moz-appearance:none;-webkit-appearance:none;appearance:none;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxOHB4JyBoZWlnaHQ9JzE4cHgnIHZpZXdCb3g9JzAgMCAxOCAxOCc+PGcgc3Ryb2tlPSdub25lJyBzdHJva2Utd2lkdGg9JzEnIGZpbGw9J25vbmUnIGZpbGwtcnVsZT0nZXZlbm9kZCcgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJz48cGF0aCBkPSdNMTMsNC4zNDMxNDU3NSBMMTMsMTUuNjU2ODU0Micgc3Ryb2tlPScjZmZmJyBzdHJva2Utd2lkdGg9JzEuMzQ3MzY4NDInIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDEzLjAwMDAwMCwgMTAuMDAwMDAwKSByb3RhdGUoLTMxNS4wMDAwMDApIHRyYW5zbGF0ZSgtMTMuMDAwMDAwLCAtMTAuMDAwMDAwKSAnPjwvcGF0aD48cGF0aCBkPSdNNSw0LjM0MzE0NTc1IEw1LDE1LjY1Njg1NDInIHN0cm9rZT0nI2ZmZicgc3Ryb2tlLXdpZHRoPScxLjM0NzM2ODQyJyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSg1LjAwMDAwMCwgMTAuMDAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC01LjAwMDAwMCwgLTEwLjAwMDAwMCkgJz48L3BhdGg+PC9nPjwvc3ZnPg==);background-color:#1d5be1;background-repeat:no-repeat;background-position:right 3px top 50%;background-size:5px 7px;font-family:AvenirNextLTW01-Regular,Helvetica Neue,Helvetica,Arial,sans-serif;min-width:60px}@media(min-width:600px){select.svelte-gfnsba.svelte-gfnsba{padding:10px 30px 10px 10px;background-position:right 9px top 50%;background-size:12px 14px}.home.svelte-gfnsba select.svelte-gfnsba{border:2px solid #1d5be1;font-size:24px;padding:15px 45px 15px 15px;background-size:18px 21px;background-position:right 14px top 50%;margin-bottom:0}}select.svelte-gfnsba.svelte-gfnsba::-ms-expand{display:none}select.svelte-gfnsba.svelte-gfnsba:hover{border-color:#888}select.svelte-gfnsba.svelte-gfnsba:focus{border-color:#eee;box-shadow:0 0 1px 3px rgba(59,153,252,.7);box-shadow:0 0 0 3px -moz-mac-focusring;color:#fff;outline:none}.hidden-select.svelte-gfnsba.svelte-gfnsba{opacity:1;position:absolute;top:0;right:0;width:100%}div.svelte-gfnsba.svelte-gfnsba{display:inline-block;position:relative}.flex-wrapper.svelte-gfnsba.svelte-gfnsba{align-items:center;display:flex;position:relative}.label.svelte-gfnsba.svelte-gfnsba{margin:0;padding:0 10px 0 0}.small.svelte-gfnsba select.svelte-gfnsba{background-color:#eee;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxOHB4JyBoZWlnaHQ9JzE4cHgnIHZpZXdCb3g9JzAgMCAxOCAxOCc+PGcgc3Ryb2tlPSdub25lJyBzdHJva2Utd2lkdGg9JzEnIGZpbGw9J25vbmUnIGZpbGwtcnVsZT0nZXZlbm9kZCcgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJz48cGF0aCBkPSdNMTMsNC4zNDMxNDU3NSBMMTMsMTUuNjU2ODU0Micgc3Ryb2tlPScjYWFhJyBzdHJva2Utd2lkdGg9JzEuMzQ3MzY4NDInIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDEzLjAwMDAwMCwgMTAuMDAwMDAwKSByb3RhdGUoLTMxNS4wMDAwMDApIHRyYW5zbGF0ZSgtMTMuMDAwMDAwLCAtMTAuMDAwMDAwKSAnPjwvcGF0aD48cGF0aCBkPSdNNSw0LjM0MzE0NTc1IEw1LDE1LjY1Njg1NDInIHN0cm9rZT0nI2FhYScgc3Ryb2tlLXdpZHRoPScxLjM0NzM2ODQyJyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSg1LjAwMDAwMCwgMTAuMDAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC01LjAwMDAwMCwgLTEwLjAwMDAwMCkgJz48L3BhdGg+PC9nPjwvc3ZnPg==);border:1px solid #eee;color:#333;padding:5px 30px 5px 8px}.measuring-select.svelte-gfnsba.svelte-gfnsba{position:absolute;top:-99999px;left:-99999px;width:auto}.truncated.svelte-gfnsba.svelte-gfnsba:after{content:"";position:absolute;right:10px;top:10px;bottom:10px;width:8px;background:linear-gradient(90deg,rgba(29,91,225,0) 0%,rgba(29,91,225,1) 100%);pointer-events:none}.price.svelte-bc6y0c.svelte-bc6y0c{margin-bottom:0}.discount.svelte-bc6y0c.svelte-bc6y0c{margin:0}.euro.svelte-bc6y0c.svelte-bc6y0c{font-size:24px}.price-only.svelte-bc6y0c .euro.svelte-bc6y0c{font-size:18px}h1.svelte-1pouglr{margin-bottom:5px}h3.svelte-1pouglr{margin-bottom:10px}.product-list.svelte-tyorfx.svelte-tyorfx{display:flex;flex-wrap:wrap;justify-content:space-around;padding:0;margin:0}@media(min-width:815px){.product-list.svelte-tyorfx.svelte-tyorfx{flex-wrap:nowrap}}.product-list.svelte-tyorfx li.svelte-tyorfx{list-style:none;width:50%}@media(min-width:600px){.product-list.svelte-tyorfx li.svelte-tyorfx{width:14em}}.product-list.svelte-tyorfx .image.svelte-tyorfx{display:flex;align-items:center;justify-content:center;height:13em;width:100%}@media(min-width:600px){.product-list.svelte-tyorfx .image.svelte-tyorfx{height:13em;width:13em}}.product-list-img{max-height:12em;max-width:10em}@media(min-width:600px){.product-list-img{max-width:12em}}.product-list.svelte-tyorfx .info.svelte-tyorfx{max-width:10em;text-align:center;margin:0 auto 1em}.product-list.svelte-tyorfx.svelte-tyorfx{display:flex;flex-wrap:wrap;justify-content:space-around;padding:0;margin:0}@media(min-width:815px){.product-list.svelte-tyorfx.svelte-tyorfx{flex-wrap:nowrap}}.product-list.svelte-tyorfx li.svelte-tyorfx{list-style:none;width:50%}@media(min-width:600px){.product-list.svelte-tyorfx li.svelte-tyorfx{width:14em}}.product-list.svelte-tyorfx .image.svelte-tyorfx{display:flex;align-items:center;justify-content:center;height:13em;width:100%}@media(min-width:600px){.product-list.svelte-tyorfx .image.svelte-tyorfx{height:13em;width:13em}}.product-list-img{max-height:12em;max-width:10em}@media(min-width:600px){.product-list-img{max-width:12em}}.product-list.svelte-tyorfx .info.svelte-tyorfx{max-width:10em;text-align:center;margin:0 auto 1em}.product.svelte-10dn4iy{display:flex;align-items:top;margin:10px 0}.listItemImage{max-height:180px;max-width:140px}.image.svelte-10dn4iy{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:160px;padding:10px 0 0}.info-wrapper.svelte-10dn4iy{display:flex;flex-direction:column;align-items:top;width:100%}@media(min-width:600px){.info-wrapper.svelte-10dn4iy{flex-direction:row}}.details.svelte-10dn4iy{padding:10px;padding-bottom:0;width:100%}@media(min-width:600px){.details.svelte-10dn4iy{padding:10px}}.offer.svelte-10dn4iy{padding:0 0 20px 10px;width:100%}@media(min-width:600px){.offer.svelte-10dn4iy{flex-shrink:0;padding:10px 0 10px 10px;width:200px}}.price.svelte-10dn4iy,.discount.svelte-10dn4iy{margin:4px 0}.availability.svelte-10dn4iy{display:none;margin:4px 0}@media(min-width:600px){.availability.svelte-10dn4iy{display:block}}.offer-availability.svelte-10dn4iy{display:block;margin:0}@media(min-width:600px){.offer-availability.svelte-10dn4iy{display:none}}div.svelte-1n680i0{margin:10px 0 0}.container.svelte-tz0mb.svelte-tz0mb{position:relative;display:flex;justify-content:center;height:352px;width:100%;margin-bottom:10px}@media(min-width:600px){.container.svelte-tz0mb.svelte-tz0mb{height:352px;width:320px}}img.svelte-tz0mb.svelte-tz0mb{position:absolute;opacity:0;transition:transform .6s cubic-bezier(0,1,.3,1),opacity .2s ease-out;max-height:320px;max-width:320px}.prev.svelte-tz0mb.svelte-tz0mb{transform:translateX(-20px);pointer-events:none}.next.svelte-tz0mb.svelte-tz0mb{pointer-events:none}@media(min-width:600px){.next.svelte-tz0mb.svelte-tz0mb{transform:translateX(20px)}}.current.svelte-tz0mb.svelte-tz0mb{opacity:1;transition:none;transition:transform .4s .4s cubic-bezier(0,1,.3,1),opacity .2s .4s ease-out}.controls.svelte-tz0mb.svelte-tz0mb{position:absolute;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:space-between;padding:0 10px;width:160px;margin:0 auto}.controls.svelte-tz0mb p.svelte-tz0mb{font-size:12px;margin:0}.controls.svelte-tz0mb button.svelte-tz0mb{-webkit-appearance:none;appearance:none;background:0 0;border:none;opacity:.5;transition:opacity .2s ease-out}.controls.svelte-tz0mb button.svelte-tz0mb:hover{opacity:1}a.svelte-ht6s8n{background-image:url(/prime.png);background-size:52px 15px;font-size:10px;font-family:Verdana,monospace;overflow:hidden;display:inline-block;text-indent:-1000px;height:15px;width:52px;margin-bottom:-3px}9 </style>10 <meta charset="utf-8">11 <meta content="width=device-width,initial-scale=1" name="viewport">12 <base>13 <meta content="#da532c" name="msapplication-TileColor">14 <meta content="#ffffff" name="theme-color">15 <noscript id="sapper-head-start">16 </noscript>17 <title>18 The Beginner's Photography Guide: The Ultimate Step-by-Step Manual for Getting the Most from your Digital Camera - Book - Shop Ireland19 </title>20 <meta content="Shop for The Beginner's Photography Guide: The Ultimate Step-by-Step Manual for Getting the Most from your Digital Camera and other books in Ireland with Shop Ireland." name="description">21 <meta content="The Beginner's Photography Guide: The Ultimate Step-by-Step Manual for Getting the Most from your Digital Camera - Shop Ireland" property="og:title">22 <meta content="Shop for The Beginner's Photography Guide: The Ultimate Step-by-Step Manual for Getting the Most from your Digital Camera and other books in Ireland with Shop Ireland." property="og:description">23 <meta content="" property="og:image">24 <meta content="" property="og:url">25 <meta content="" name="twitter:card">26 <noscript id="sapper-head-end">27 </noscript>28 </head>29 <body>30 <div id="sapper">31 <div>32 <section class="page-container books svelte-88o8v4">33 <section class="svelte-cyi0wn">34 <div class="logo svelte-cyi0wn">35 <h1 class="svelte-qvgdp3">36 <a class="svelte-qvgdp3" rel="prefetch" title="Shop Ireland - Browse Amazon in Euro">37 shop38 <span class="svelte-qvgdp3">39 ireland40 </span>41 .ie42 </a>43 </h1>44 </div>45 <div class="center svelte-cyi0wn">46 <div class="wrapper">47 <div>48 <section class="searchbar svelte-1ii5b0m">49 <section class="search svelte-1ii5b0m">50 <input class="search-phrase svelte-1ii5b0m" placeholder="I'm looking for..." type="text" value>51 <button class="go svelte-1ii5b0m">52 </button>53 </section>54 <section class="department svelte-1ii5b0m">55 <div class="default svelte-gfnsba">56 <select class="measuring-select svelte-gfnsba" this="[object Object]">57 <option value="Books">58 Books59 </option>60 </select>61 <div class="flex-wrapper svelte-gfnsba">62 <select class="svelte-gfnsba" this="[object Object]">63 <option value="Books">64 Books65 </option>66 </select>67 <select class="hidden-select svelte-gfnsba" id="select-category-books">68 <option value="home">69 All departments70 </option>71 <option value="baby">72 Baby73 </option>74 <option value="beauty">75 Beauty76 </option>77 <option selected value="books">78 Books79 </option>80 <option value="automotive">81 Car & Motorbike82 </option>83 <option value="classical">84 Classical85 </option>86 <option value="apparel">87 Clothes88 </option>89 <option value="computers">90 Computers91 </option>92 <option value="digitalmusic">93 Digital Music94 </option>95 <option value="electronics">96 Electronics97 </option>98 <option value="everythingelse">99 Everything Else100 </option>101 <option value="garden">102 Garden & Outdoor103 </option>104 <option value="grocery">105 Grocery & Gourmet Food106 </option>107 <option value="health">108 Health & Personal Care109 </option>110 <option value="jewelry">111 Jewellery112 </option>113 <option value="kindle">114 Kindle Store115 </option>116 <option value="kitchen">117 Kitchen118 </option>119 <option value="lighting">120 Lighting121 </option>122 <option value="luggage">123 Luggage124 </option>125 <option value="movies">126 Movies And TV Shows127 </option>128 <option value="music">129 Music130 </option>131 <option value="musicalinstruments">132 Musical Instruments133 </option>134 <option value="office">135 Office Products136 </option>137 <option value="pets">138 Pet Supplies139 </option>140 <option value="shoes">141 Shoes142 </option>143 <option value="sports">144 Sports & Outdoors145 </option>146 <option value="tools">147 Tools & Home Improvement148 </option>149 <option value="toys">150 Toys & Games151 </option>152 <option value="games">153 Video Games154 </option>155 <option value="watches">156 Watches157 </option>158 </select>159 </div>160 </div>161 </section>162 </section>163 </div>164 </div>165 </div>166 <div class="cart-icon svelte-cyi0wn">167 <p class="svelte-1pvwypj">168 <a>169 <span class="icon svelte-1pvwypj">170 <span class="total svelte-1pvwypj">171 0172 </span>173 </span>174 </a>175 </p>176 </div>177 </section>178 <main class="svelte-88o8v4">179 <ul class="svelte-uc52w8">180 <li class="svelte-uc52w8">181 <a rel="prefetch">182 Home183 </a>184 </li>185 <li class="svelte-uc52w8">186 »187 </li>188 <li class="svelte-uc52w8" title="Musical Instruments">189 <a rel="prefetch">190 Musical Instruments191 </a>192 </li>193 <li class="svelte-uc52w8">194 »195 </li>196 </ul>197 <section class="content svelte-88o8v4">198 <article class="product svelte-184d925">199 <section class="top svelte-184d925">200 <div class="image svelte-184d925">201 <div class="container svelte-tz0mb">202 <img alt="The Beginner's Photography Guide: The Ultimate Step-by-Step Manual for Getting the Most from your Digital Camera" class="svelte-tz0mb current" src="rick.jpg">203 <img alt="The Beginner's Photography Guide: The Ultimate Step-by-Step Manual for Getting the Most from your Digital Camera" class="svelte-tz0mb next" src="rick.jpg">204 <img alt="The Beginner's Photography Guide: The Ultimate Step-by-Step Manual for Getting the Most from your Digital Camera" class="svelte-tz0mb prev" src="rick.jpg">205 <img alt="The Beginner's Photography Guide: The Ultimate Step-by-Step Manual for Getting the Most from your Digital Camera" class="svelte-tz0mb prev" src="rick.jpg">206 <img alt="The Beginner's Photography Guide: The Ultimate Step-by-Step Manual for Getting the Most from your Digital Camera" class="svelte-tz0mb prev" src="rick.jpg">207 <img alt="The Beginner's Photography Guide: The Ultimate Step-by-Step Manual for Getting the Most from your Digital Camera" class="svelte-tz0mb prev" src="rick.jpg">208 <img alt="The Beginner's Photography Guide: The Ultimate Step-by-Step Manual for Getting the Most from your Digital Camera" class="svelte-tz0mb prev" src="rick.jpg">209 <img alt="The Beginner's Photography Guide: The Ultimate Step-by-Step Manual for Getting the Most from your Digital Camera" class="svelte-tz0mb prev" src="rick.jpg">210 <img alt="The Beginner's Photography Guide: The Ultimate Step-by-Step Manual for Getting the Most from your Digital Camera" class="svelte-tz0mb prev" src="rick.jpg">211 <img alt="The Beginner's Photography Guide: The Ultimate Step-by-Step Manual for Getting the Most from your Digital Camera" class="svelte-tz0mb prev" src="rick.jpg">212 <img alt="The Beginner's Photography Guide: The Ultimate Step-by-Step Manual for Getting the Most from your Digital Camera" class="svelte-tz0mb prev" src="rick.jpg">213 <img alt="The Beginner's Photography Guide: The Ultimate Step-by-Step Manual for Getting the Most from your Digital Camera" class="svelte-tz0mb prev" src="rick.jpg">214 <img alt="The Beginner's Photography Guide: The Ultimate Step-by-Step Manual for Getting the Most from your Digital Camera" class="svelte-tz0mb prev" src="rick.jpg">215 <div class="controls svelte-tz0mb">216 <button class="svelte-tz0mb" title="Previous">217 </button>218 <p class="svelte-tz0mb">219 1 of 13220 </p>221 <button class="svelte-tz0mb" title="Next">222 </button>223 </div>224 </div>225 </div>226 <div class="info svelte-184d925">227 <h1 class="svelte-1pouglr">228 The Beginner's Photography Guide: The Ultimate Step-by-Step Manual for Getting the Most from your Digital Camera229 </h1>230 <h3 class="subheading svelte-1pouglr">231 <a>232 DK:233 </a>234 </h3>235 <div class="svelte-1n680i0">236 <button class="button large primary svelte-lkmlwh">237 Add to cart238 </button>239 </div>240 <p class="price svelte-bc6y0c">241 <span class="euro svelte-bc6y0c">242 <strong>243 €16.75244 </strong>245 </span>246 (£14.29)247 </p>248 <p class="discount svelte-bc6y0c">249 Full price: €19.91250- Save 16%251 </p>252 <p>253 <a class="svelte-ht6s8n" target="_blank" title="Subscribe to Amazon prime and get free delivery, Prime Music, Video and254 so much more...">255 Amazon Prime256 </a>257 In stock258Qualifies for free shipping.259 </p>260 </div>261 </section>262 <section class="other-info">263 <h3>264 Features265 </h3>266 <ul>267 <li>268 DORLING KINDERSLEY269 </li>270 <li>271 It ensures you get the best usage for a longer period272 </li>273 <li>274 It ensures you get the best usage for a longer period275 </li>276 </ul>277 <h3 id="info">278 Product info279 </h3>280 <ul>281 <li>282 Contributors:283 <a>284 DK:285 </a>286 </li>287 <li>288 Binding: Flexibound289 </li>290 <li>291 Edition: 1292 </li>293 <li>294 Brand: DK295 </li>296 </ul>297 </section>298 <div class="svelte-1c44y5p">299 </div>300 <h3>301 Find more in...302 </h3>303 <ul>304 <li>305 <a rel="prefetch">306 Photography Equipment307 </a>308 </li>309 <li>310 <a rel="prefetch">311 Digital Photography Techniques & Tips312 </a>313 </li>314 <li>315 <a rel="prefetch">316 The Hobbyist317 </a>318 </li>319 </ul>320 </article>321 </section>322 </main>323 <footer class="svelte-88o8v4">324 <ul class="stores svelte-88o8v4">325 <li class="svelte-88o8v4">326 <a ref="prefetch">327 Books328 </a>329 </li>330 <li class="svelte-88o8v4">331 <a ref="prefetch">332 Electronics333 </a>334 </li>335 <li class="svelte-88o8v4">336 <a ref="prefetch">337 Jewellery338 </a>339 </li>340 <li class="svelte-88o8v4">341 <a ref="prefetch">342 Movies And TV343 </a>344 </li>345 </ul>346 <ul class="stores svelte-88o8v4">347 <li class="svelte-88o8v4">348 <strong>349 <a rel="prefetch">350 See all stores351 </a>352 </strong>353 </li>354 </ul>355 <br>356 <ul class="svelte-88o8v4">357 <li class="svelte-88o8v4">358 <a rel="prefetch">359 About Shop Ireland360 </a>361 </li>362 <li class="svelte-88o8v4">363 <a rel="prefetch">364 Contact Us365 </a>366 </li>367 <li class="svelte-88o8v4">368 <a rel="prefetch">369 Buy Gift Certificates370 </a>371 </li>372 <li class="svelte-88o8v4">373 <a>374 Amazon Prime375 </a>376 </li>377 </ul>378 <h3 class="svelte-88o8v4">379 Browse Amazon by country380 </h3>381 <ul class="countries svelte-88o8v4">382 <li class="svelte-88o8v4">383 <a>384 Amazon UK385 </a>386 </li>387 <li class="svelte-88o8v4">388 <a>389 Amazon Germany390 </a>391 </li>392 <li class="svelte-88o8v4">393 <a>394 Amazon Spain395 </a>396 </li>397 <li class="svelte-88o8v4">398 <a>399 Amazon Italy400 </a>401 </li>402 </ul>403 <div class="last-text svelte-88o8v4">404 <p class="svelte-88o8v4">405 © 2004 - 2023406 <a>407 Shop Ireland408 </a>409 - All rights reserved.410 </p>411 <p class="svelte-88o8v4">412 All prices are approximate and subject to change. All prices, except413books, include VAT at 23% and are updated daily.414 </p>415 <p class="disclaimer svelte-88o8v4">416 ShopIreland.ie is a participant in the Amazon EU Associates Programme,417an affiliate advertising programme418 <br>419 designed to provide a means for sites to earn advertising fees by420advertising and linking to Amazon.co.uk.421 </p>422 <p class="disclaimer svelte-88o8v4">423 As an Amazon Associate I earn from qualifying purchases.424 </p>425 </div>426 </footer>427 </section>428 </div>429 </div>430 </body>431</html>432