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 @font-face {6 font-family: 'Open Sans';7 font-style: normal;8 font-weight: 400;9 font-stretch: normal;10 font-display: swap;11 src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0C4n.ttf) format('truetype');12}13@font-face {14 font-family: 'Open Sans';15 font-style: normal;16 font-weight: 700;17 font-stretch: normal;18 font-display: swap;19 src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1y4n.ttf) format('truetype');20}21 22 23 24@font-face {25 font-family: 'Open Sans';26 font-style: normal;27 font-weight: 400;28 font-stretch: normal;29 font-display: swap;30 src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0C4n.ttf) format('truetype');31}32@font-face {33 font-family: 'Open Sans';34 font-style: normal;35 font-weight: 700;36 font-stretch: normal;37 font-display: swap;38 src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1y4n.ttf) format('truetype');39}40 </style>41 <meta charset="utf-8" data-n-head="ssr">42 <meta content="width=device-width, initial-scale=1" data-n-head="ssr" name="viewport">43 <meta content="gabrieldane's Campsite.bio profile. Create your own bio link for free today." data-hid="description" data-n-head="ssr" name="description">44 <meta content="" data-hid="image" data-n-head="ssr" name="image" property="og:image">45 <meta content="" data-hid="twitter:image" data-n-head="ssr" name="twitter:image">46 <meta content="630" data-hid="og:image:height" data-n-head="ssr" name="og:image:height" property="og:image:height">47 <meta content="1200" data-hid="og:image:width" data-n-head="ssr" name="og:image:width" property="og:image:width">48 <meta content="profile" data-n-head="ssr" property="og:type">49 <meta content="gabrieldane" data-n-head="ssr" name="profile:username">50 <meta content="Campsite.bio" data-n-head="ssr" property="og:site_name">51 <meta content="Campsite.bio" data-n-head="ssr" name="twitter:domain">52 <meta content="summary" data-n-head="ssr" name="twitter:card">53 <meta content="gabrieldane's Campsite.bio" data-n-head="ssr" name="twitter:title">54 <meta content="gabrieldane's Campsite.bio profile. Create your own bio link for free today." data-n-head="ssr" name="twitter:description">55 <title>56 gabrieldane's Campsite.bio57 </title>58 <style data-hid="head-css" data-n-head="ssr">59 :root {60 --g-color-primary: #121212;61--g-color-secondary: #030303;62--g-color-bg: #fff;63--g-color-on-primary: #fff;64--g-color-on-secondary: #fff;65--g-color-on-bg: #2c2c2c;66--g-color-placeholder: #787878;67--g-color-focus: #F2BA43;68--g-color-anchor: #2c2c2c;69--g-color-error: #c42f29;70--g-color-success: #78b627;71--g-color-info: #F2BA43;72--g-color-gray-100: #f4f4f4;73--g-color-gray-200: #E0E0E0;74--g-color-gray-300: #C8C8C8;75--g-color-gray-400: #888;76--g-color-gray-500: #707070;77--g-color-gray-600: #505050;78--g-color-gray-700: #383838;79--g-color-gray-800: #282828;80--g-color-gray-900: #101010;81--g-font-body-family: "Open Sans", sans-serif;82--g-font-header-family: "Open Sans", sans-serif;83--g-font-header-weight: 800;84--g-font-header-text-transform: none;85--g-font-button-family: "Open Sans", sans-serif;86--g-font-input-family: "Open Sans", sans-serif;87--g-button-font-weight: 700;88--g-button-text-transform: none;89--g-button-letter-spacing: 0;90--g-zindex-drawer-overlay: 9996;91--g-zindex-drawer: 9997;92--g-zindex-modal: 9998;93--g-zindex-popup: 9999;94--p-bg-color: #4ABDAC;95--p-bg-gradient-color: null;96--p-bg-gradient-direction: 180deg;97--p-btn-margin-bottom: 12px;98--p-text-color: #363538;99--p-font-family: 'Open Sans', sans-serif;100--p-image-border-color: #e9e9e9;101--p-btn-bg-color: #F7B733;102--p-btn-color: #222;103--p-btn-box-shadow: none;104--p-btn-box-shadow-color: 0deg 0% 0%;105--p-btn-box-shadow-size: 0px;106--p-btn-shadow-style: null;107--p-btn-border-width: 0px;108--p-btn-border-color: #F7B733;109--p-btn-border-radius: 8px;110--p-btn-font-family: 'Open Sans', sans-serif;111--p-btn-font-weight: 700;112--p-btn-style: filled;113--p-carousel-bg-color: #f4f4f4;114--p-carousel-loader-color: #787878;115--p-divider-color: #DFDCE3;116--p-title-color: #363538;117--p-title-font-family: 'Open Sans', sans-serif;118--p-title-font-weight: 700;119--p-social-color: #DFDCE3;120--p-bg-pattern: none;121--p-logo-fill: rgb(247, 183, 51);122--p-mark-fill: rgb(245, 169, 12);123--g-border-radius-min: 0.1875rem;124--g-border-radius-standard: 0.1875rem;125--g-border-radius-large: 0.375rem;126--g-duration-shortest: 150ms;127--g-duration-shorter: 200ms;128--g-duration-short: 250ms;129--g-duration-standard: 300ms;130--g-duration-complex: 375ms;131--g-duration-entering-screen: 225ms;132--g-duration-leaving-screen: 195ms;133 --g-transition-speed: 250ms;134 }135 </style>136 <style data-hid="global-css" data-n-head="ssr">137 *,138 *:before,139 *:after {140 box-sizing: border-box;141 }142 143 html {144 height: 100%;145 }146 147 .sr-only {148 position: absolute;149 width: 1px;150 height: 1px;151 padding: 0;152 margin: -1px;153 overflow: hidden;154 clip: rect(0, 0, 0, 0);155 border: 0;156 }157 158 .text-left {159 text-align: left;160 }161 162 .text-right {163 text-align: right;164 }165 </style>166 <style data-vue-ssr-id="0db15521:0 84d303d4:0 46f577a2:0 467b387d:0 data-v-33e4ee3f_0 data-v-32a6a0fc_0 data-v-49b5a4a0_0 708bd1b4:0 3996a949:0 data-v-57c5a2c2_0">167 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}*,:after,:before{box-sizing:border-box}html{height:100%}.sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.site{background-color:var(--p-bg-color);color:var(--p-text-color);font:400 18px/1.4 var(--p-font-family);min-height:100%;position:relative}.site--has-bg-image .site-bg{background-image:var(--bg-mobile-src);background-position:50%;background-size:cover}@media(min-width:544px){.site--has-bg-image .site-bg{background-image:var(--bg-tablet-src)}}@media(min-width:992px){.site--has-bg-image .site-bg{background-image:var(--bg-desktop-src)}}.site-bg{height:100vh;height:100lvh;left:0;pointer-events:none;position:fixed;top:0;width:100%}.site.site--iframe-no-bg,.site.site--iframe-no-bg .site-container{background:none}.site.site--iframe-no-bg .site-bg{display:none}.site.site--iframe-no-bg .site__header{padding-top:0}.site.site--iframe-no-bg .site__footer{padding-bottom:0}.site h1,.site h2,.site h3{font-family:var(--p-title-font-family)}a,button{-webkit-text-decoration:none;text-decoration:none;transition:all .25s}@keyframes gradient{0%{background-position:0 0}50%{background-position:100% 100%}to{background-position:0 0}}.site-container{background-color:var(--p-bg-color);min-height:100vh;overflow:hidden;padding-bottom:5rem;padding-left:.925rem;padding-right:.925rem;position:relative}.site--hide-branding .site-container{padding-bottom:1.125rem}.site--iframe .site-container{min-height:auto}.site--has-gradient .site-container{background:var(--p-bg-gradient);background-color:var(--p-bg-color)}.site--has-animated-gradient .site-container{animation:gradient 15s ease infinite;background-size:400% 400%}.site--has-bg-pattern .site-container{background-image:var(--p-bg-pattern);background-repeat:repeat}.site--coming-soon .site-container{background:#fff!important;color:#000!important}.site--coming-soon .site-container .site-bg{display:none}.site--coming-soon .site-container .site__footer-logo,.site--coming-soon .site-container .site__username{color:#222}.site--coming-soon .site-container .path-1{fill:#000}.site--coming-soon .site-container .path-2{fill:#fff}.site__main{margin:0 auto;max-width:650px}.site__share-container{position:relative}.site__share{position:absolute;right:-.35rem;top:.5rem;z-index:1}@media(min-width:768px){.site__share{right:0;top:1rem;transform:translateX(100%)}}.site__links{list-style:none;margin:20px 0 0;padding:0;position:relative}168.nuxt-progress{background-color:#273d3b;height:2px;left:0;opacity:1;position:fixed;right:0;top:0;transition:width .1s,opacity .4s;width:0;z-index:999999}.nuxt-progress.nuxt-progress-notransition{transition:none}.nuxt-progress-failed{background-color:red}169.site__header{padding-top:3rem;position:relative;text-align:center}.site__header--align-left{display:flex;gap:1rem;padding-top:2.5rem;text-align:left}.site__header--has-profile-image:not(.site__header--align-left),.site__header--no-share{padding-top:2rem}.site__header__img{flex-shrink:0}.site__profile-img{background:#fff;border:none;border-radius:50%;height:100px;margin-bottom:.325rem;-o-object-fit:cover;object-fit:cover;width:100px}.site__header--align-left .site__profile-img{height:70px;width:70px}.site__profile-img--has-border{border:.125rem solid var(--p-image-border-color)}.site__header--align-left .site__header__content{flex-grow:1}.site__intro,.site__location,.site__username{margin:.325rem 0}.site__username{color:var(--p-title-color);font-family:var(--p-title-font-family);font-size:1.325rem;font-weight:var(--p-title-font-weight);line-height:1.25;margin-bottom:.425rem}.site__header--align-left .site__username{font-size:1.125rem}.site__intro,.site__location{font-size:.925rem;font-weight:400;line-height:1.6;margin-left:auto;margin-right:auto;max-width:450px}.site__header--align-left .site__intro,.site__header--align-left .site__location{font-size:.825rem;margin-left:0;margin-right:0}.site__location{font-size:.825rem}.site__location>*{align-items:center;color:inherit;display:inline-flex;gap:.25rem;-webkit-text-decoration:none;text-decoration:none}170.site__links[data-v-181a20d6]{margin-top:20px;position:relative}.link-wrapper[data-v-33e4ee3f]{--c-container-transition-speed:500ms;margin-bottom:var(--p-btn-margin-bottom);position:relative;transition:height var(--c-container-transition-speed)}.link-wrapper--pb[data-v-33e4ee3f]{padding-bottom:var(--p-btn-box-shadow-size)}171.site-btn{align-items:center;background:var(--p-btn-bg-color);border:var(--p-btn-border-width) solid var(--p-btn-border-color);border-radius:var(--p-btn-border-radius);color:var(--p-btn-color);cursor:pointer;display:flex;font-family:var(--p-btn-font-family);font-size:.945rem;padding:0;position:relative;overflow:hidden;width:100%;text-decoration:none;transition:transform var(--g-transition-speed) cubic-bezier(.4,0,.2,1)}.site-btn--large{--border-height:calc(var(--p-btn-border-width) * 2);min-height:calc(75px + var(--border-height))}.site-btn:focus,.site-btn:hover{animation-duration:var(--g-transition-speed);animation-timing-function:linear;animation-iteration-count:1;background:var(--p-btn-bg-color);border-color:var(--p-btn-border-color);color:var(--p-btn-color);transform:scale(1.02)}.site-btn--hollow,.site-btn--hollow:focus,.site-btn--hollow:hover{background-color:transparent;border-color:var(--p-btn-color);color:var(--p-btn-color)}.site-btn--soft-shadow{box-shadow:var(--p-btn-box-shadow)}.site-btn--hard-shadow{--move-distance:calc(var(--p-btn-box-shadow-size) / 2);box-shadow:var(--p-btn-box-shadow);transition:none}.site-btn--hard-shadow:focus,.site-btn--hard-shadow:hover{box-shadow:var(--move-distance) var(--move-distance) 0 var(--p-btn-box-shadow-color);transform:translate(var(--move-distance),var(--move-distance))}.site-btn--hard-shadow:active{box-shadow:none;transform:translate(var(--p-btn-box-shadow-size),var(--p-btn-box-shadow-size))}.site-btn--four-corners{--border-width:6px;border:3px solid var(--p-btn-border-color);border-radius:0;overflow:unset}.site-btn--four-corners:focus,.site-btn--four-corners:hover{transform:none}.site-btn--four-corners:focus:before,.site-btn--four-corners:hover:before{transform:scaleY(0)}.site-btn--four-corners:focus:after,.site-btn--four-corners:hover:after{transform:scaleX(0)}.site-btn--four-corners:after,.site-btn--four-corners:before{background-color:var(--p-btn-bg-color);content:"";position:absolute;transition:transform var(--g-transition-speed) cubic-bezier(.4,0,.2,1);z-index:1}.site-btn--four-corners:before{top:8px;left:calc(-1 * var(--border-width)/ 2);height:calc(100% - 16px);width:calc(100% + var(--border-width));transform:scaleY(1)}.site-btn--four-corners:after{left:8px;top:calc(-1 * var(--border-width)/ 2);height:calc(100% + var(--border-width));width:calc(100% - 16px);transform:scaleX(1)}.site-btn--four-corners .site-btn__icon-right,.site-btn--four-corners .site-btn__img,.site-btn--four-corners .site-btn__text{z-index:2}.site-btn--glossy,.site-btn--glossy:focus,.site-btn--glossy:hover{background:var(--p-btn-bg-color)}.site-btn--glossy:before,.site-btn--glossy:focus:before,.site-btn--glossy:hover:before{content:"";position:absolute;top:0;left:0;width:100%;height:50%;background:rgba(225,225,225,.2)}.site-btn--glossy .site-btn__icon-right,.site-btn--glossy .site-btn__img,.site-btn--glossy .site-btn__text,.site-btn--glossy:focus .site-btn__icon-right,.site-btn--glossy:focus .site-btn__img,.site-btn--glossy:focus .site-btn__text,.site-btn--glossy:hover .site-btn__icon-right,.site-btn--glossy:hover .site-btn__img,.site-btn--glossy:hover .site-btn__text{z-index:2}.site-btn--offset,.site-btn--offset:focus,.site-btn--offset:hover{transform:none;background:0 0;border-color:transparent;overflow:unset}.site-btn--offset:after,.site-btn--offset:before,.site-btn--offset:focus:after,.site-btn--offset:focus:before,.site-btn--offset:hover:after,.site-btn--offset:hover:before{content:"";position:absolute;top:-2px;left:-2px;height:calc(100% + 4px);width:calc(100% + 4px);transition:all var(--g-transition-speed);z-index:1}.site-btn--offset:before,.site-btn--offset:focus:before,.site-btn--offset:hover:before{background:var(--p-btn-bg-color);transform:translate(4px,4px);height:calc(100% + 3px);width:calc(100% + 3px)}.site-btn--offset:after,.site-btn--offset:focus:after,.site-btn--offset:hover:after{border:2px solid var(--p-btn-border-color)}.site-btn--offset:focus:before,.site-btn--offset:focus:focus:before,.site-btn--offset:focus:hover:before,.site-btn--offset:hover:before,.site-btn--offset:hover:focus:before,.site-btn--offset:hover:hover:before{transform:translate(0,0)}.site-btn--offset .site-btn__icon-right,.site-btn--offset .site-btn__img,.site-btn--offset .site-btn__text,.site-btn--offset:focus .site-btn__icon-right,.site-btn--offset:focus .site-btn__img,.site-btn--offset:focus .site-btn__text,.site-btn--offset:hover .site-btn__icon-right,.site-btn--offset:hover .site-btn__img,.site-btn--offset:hover .site-btn__text{z-index:2}.site-btn--3d{--move-distance:calc(var(--p-btn-box-shadow-size) / 3);--shadow-size:calc(var(--move-distance) * 2);box-shadow:var(--p-btn-box-shadow);border:none;transition:none}.site-btn--3d:focus,.site-btn--3d:hover{transform:translateY(var(--move-distance));box-shadow:0 var(--shadow-size) 0 var(--p-btn-box-shadow-color)}.site-btn--3d:active{transform:translateY(var(--p-btn-box-shadow-size));box-shadow:none}.site-btn--disabled,.site-btn:disabled,.site-btn[disabled]{pointer-events:none}.site-btn__img{flex-shrink:0;display:block;height:52px;pointer-events:none;width:52px;position:absolute;left:0;top:50%;transform:translateY(-50%);transition:all var(--g-transition-speed)}.site-btn--large .site-btn__img{height:75px;width:75px}.site-btn--large .site-btn__img svg{padding:.75rem}.site-btn__img--circle{margin-left:3px;height:46px;width:46px}.site-btn--large .site-btn__img--circle{height:69px;width:69px}.site-btn__img--circle img{border-radius:50%}.site-btn__img img,.site-btn__img svg{height:100%;object-fit:cover;object-position:center;width:100%}.site-btn__img svg{padding:.5rem}.site-btn__text{align-items:center;display:flex;font-weight:var(--p-btn-font-weight);flex-grow:1;line-height:1.4;padding:1rem 1.125rem;max-width:100%;justify-content:center;text-align:center;word-wrap:break-word;overflow-wrap:break-word;white-space:normal}.site-btn__text--small{font-size:13px}.site-btn--has-icon .site-btn__text{padding-left:44px;padding-right:44px}.site-btn--has-img .site-btn__text{padding-left:66px;padding-right:66px}.site-btn--has-img.site-btn--large .site-btn__text{padding-left:89px;padding-right:1.125rem}.site-btn--has-img.site-btn--large.site-btn--has-icon .site-btn__text{padding-right:44px}.site-btn__icon-right{display:inline-flex;position:absolute;font-size:1.35em;top:50%;right:1rem;transform:translateY(-50%);transition:all var(--g-transition-speed)}.site-btn--anim-slide-right{animation:slide-in-right 4s .5s cubic-bezier(.25,.46,.45,.94) both 2}@keyframes slide-in-right{0%{transform:translateX(500px);opacity:0}20%{transform:translateX(0);opacity:1}21%{opacity:1}}.site-btn--anim-slide-left{animation:slide-in-left 4s .5s cubic-bezier(.25,.46,.45,.94) both 2}@keyframes slide-in-left{0%{transform:translateX(-500px);opacity:0}20%{transform:translateX(0);opacity:1}21%{opacity:1}}.site-btn--anim-grow{animation:grow 4s .5s cubic-bezier(.25,.46,.45,.94) both 2}@keyframes grow{0%{transform:scale(0);opacity:0}20%{transform:scale(1);opacity:1}}.site-btn--anim-shake{animation:shake-btn 4s .5s cubic-bezier(.455,.03,.515,.955) both 2}@keyframes shake-btn{0%,20%,21%{transform:rotate(0)}2%{transform:rotate(4deg)}12%,4%,8%{transform:rotate(-6deg)}10%,14%,6%{transform:rotate(6deg)}16%{transform:rotate(-4deg)}18%{transform:rotate(4deg)}}.site-btn--anim-bounce-left{animation:bounce-left 4s .5s both 2}@keyframes bounce-left{0%{transform:translateX(-48px);animation-timing-function:ease-in;opacity:0}4%{opacity:1}8%{transform:translateX(-26px);animation-timing-function:ease-in}13%{transform:translateX(-13px);animation-timing-function:ease-in}16%{transform:translateX(-6.5px);animation-timing-function:ease-in}18%{transform:translateX(-4px);animation-timing-function:ease-in}11%,15%,17%,19%,5%{transform:translateX(0);animation-timing-function:ease-out}20%{transform:translateX(0);animation-timing-function:ease-out;opacity:1}21%{opacity:1}}.site-btn--anim-bounce-right{animation:bounce-right 4s .5s both 2}@keyframes bounce-right{0%{transform:translateX(48px);animation-timing-function:ease-in;opacity:0}4%{opacity:1}8%{transform:translateX(26px);animation-timing-function:ease-in}13%{transform:translateX(13px);animation-timing-function:ease-in}16%{transform:translateX(6.5px);animation-timing-function:ease-in}18%{transform:translateX(4px);animation-timing-function:ease-in}11%,15%,17%,19%,5%{transform:translateX(0);animation-timing-function:ease-out}20%{transform:translateX(0);animation-timing-function:ease-out;opacity:1}21%{opacity:1}}.site-btn--anim-rubberband{animation:rubberBand 5s .5s both 2}@keyframes rubberBand{0%,20%,21%{transform:scale3d(1,1,1)}6%{transform:scale3d(1.25,.75,1)}8%{transform:scale3d(.75,1.25,1)}10%{transform:scale3d(1.15,.85,1)}13%{transform:scale3d(.95,1.05,1)}15%{transform:scale3d(1.05,.95,1)}}172.site-links-title{color:var(--p-title-color);font-weight:var(--p-title-font-weight);font-family:var(--p-title-font-family);font-size:1.25rem;line-height:1.25;margin:2rem 0 .75rem;text-align:center}173 174.site__footer{bottom:0;left:0;padding-bottom:15px;position:absolute;text-align:center;width:100%}175.site__footer-logo{align-items:center;display:inline-flex;padding:3px 6px;-webkit-text-decoration:none;text-decoration:none}.site__footer-logo:focus,.site__footer-logo:hover{transform:scale(1.02)}.v-logo[data-v-57c5a2c2]{align-items:center;display:inline-flex;font-size:var(--c-size)}.v-logo__svg[data-v-57c5a2c2]{fill:var(--c-color);height:1em;width:6.45em}.v-logo--icon-only .v-logo__svg[data-v-57c5a2c2]{width:.8em}.v-logo__mark[data-v-57c5a2c2]{fill:var(--c-mark-color,var(--c-color))}176 </style>177 <style type="text/css">178 .cs-overlay[data-v-dcee29f6]{align-content:center;align-items:center;background:var(--g-color-bg);color:var(--g-color-on-bg);display:flex;flex-direction:column;font:400 18px/1.4 var(--g-font-body-family);height:100vh;justify-content:space-between;margin-left:-.925rem;margin-right:-.925rem;padding:2.5rem .925rem;place-content:center space-between;text-align:center}.cs-overlay__content[data-v-dcee29f6]{margin-top:5rem;max-width:600px;width:92%}.cs-overlay__logo[data-v-dcee29f6]{margin-bottom:1.5rem}.cs-overlay__actions[data-v-dcee29f6]{font-size:1rem;margin-top:2rem}.cs-overlay__title.cs-overlay__title[data-v-dcee29f6]{margin-bottom:.5rem}.cs-overlay__text.cs-overlay__text[data-v-dcee29f6]{margin-bottom:1rem}179 </style>180 <style type="text/css">181 .site-social{--icon-padding:0.425rem;align-items:center;-moz-column-gap:.75rem;column-gap:.75rem;display:flex;flex-wrap:wrap;justify-content:center;list-style:none;margin:1.25rem 0 0;padding:0;position:relative;row-gap:.425rem}.site__header--align-left .site-social{-moz-column-gap:.425rem;column-gap:.425rem;justify-content:flex-start;margin-bottom:0;margin-left:calc(var(--icon-padding)*-1);margin-top:.5rem;row-gap:.125rem}.site-social--top{margin-bottom:-.325rem;margin-top:.75rem}.site-social a{color:var(--p-social-color);display:inline-flex;font-size:1.925rem;padding:var(--icon-padding);transition:transform var(--g-transition-speed) cubic-bezier(.4,0,.2,1);vertical-align:top}.site__header--align-left .site-social a{font-size:1.5rem}.site-social a:focus,.site-social a:hover{color:var(--p-social-color);transform:scale(1.1)}.site-social a .v-svg-icon{flex-shrink:0}182 </style>183 <style type="text/css">184 .site__links[data-v-9b77c50a]{margin-top:20px;position:relative}.dummy[data-v-9b77c50a]{background:linear-gradient(180deg,#b9b9b9,#ccc);height:60px;margin-bottom:var(--p-btn-margin-bottom)}185 </style>186 <style type="text/css">187 .link-wrapper[data-v-33e4ee3f]{--c-container-transition-speed:500ms;margin-bottom:var(--p-btn-margin-bottom);position:relative;transition:height var(--c-container-transition-speed)}.link-wrapper--pb[data-v-33e4ee3f]{padding-bottom:var(--p-btn-box-shadow-size)}188 </style>189 <style type="text/css">190 .site-btn{align-items:center;background:var(--p-btn-bg-color);border:var(--p-btn-border-width) solid var(--p-btn-border-color);border-radius:var(--p-btn-border-radius);color:var(--p-btn-color);cursor:pointer;display:flex;font-family:var(--p-btn-font-family);font-size:.945rem;padding:0;position:relative;overflow:hidden;width:100%;text-decoration:none;transition:transform var(--g-transition-speed) cubic-bezier(.4,0,.2,1)}.site-btn--large{--border-height:calc(var(--p-btn-border-width) * 2);min-height:calc(75px + var(--border-height))}.site-btn:focus,.site-btn:hover{animation-duration:var(--g-transition-speed);animation-timing-function:linear;animation-iteration-count:1;background:var(--p-btn-bg-color);border-color:var(--p-btn-border-color);color:var(--p-btn-color);transform:scale(1.02)}.site-btn--hollow,.site-btn--hollow:focus,.site-btn--hollow:hover{background-color:transparent;border-color:var(--p-btn-color);color:var(--p-btn-color)}.site-btn--soft-shadow{box-shadow:var(--p-btn-box-shadow)}.site-btn--hard-shadow{--move-distance:calc(var(--p-btn-box-shadow-size) / 2);box-shadow:var(--p-btn-box-shadow);transition:none}.site-btn--hard-shadow:focus,.site-btn--hard-shadow:hover{box-shadow:var(--move-distance) var(--move-distance) 0 var(--p-btn-box-shadow-color);transform:translate(var(--move-distance),var(--move-distance))}.site-btn--hard-shadow:active{box-shadow:none;transform:translate(var(--p-btn-box-shadow-size),var(--p-btn-box-shadow-size))}.site-btn--four-corners{--border-width:6px;border:3px solid var(--p-btn-border-color);border-radius:0;overflow:unset}.site-btn--four-corners:focus,.site-btn--four-corners:hover{transform:none}.site-btn--four-corners:focus:before,.site-btn--four-corners:hover:before{transform:scaleY(0)}.site-btn--four-corners:focus:after,.site-btn--four-corners:hover:after{transform:scaleX(0)}.site-btn--four-corners:after,.site-btn--four-corners:before{background-color:var(--p-btn-bg-color);content:"";position:absolute;transition:transform var(--g-transition-speed) cubic-bezier(.4,0,.2,1);z-index:1}.site-btn--four-corners:before{top:8px;left:calc(-1 * var(--border-width)/ 2);height:calc(100% - 16px);width:calc(100% + var(--border-width));transform:scaleY(1)}.site-btn--four-corners:after{left:8px;top:calc(-1 * var(--border-width)/ 2);height:calc(100% + var(--border-width));width:calc(100% - 16px);transform:scaleX(1)}.site-btn--four-corners .site-btn__icon-right,.site-btn--four-corners .site-btn__img,.site-btn--four-corners .site-btn__text{z-index:2}.site-btn--glossy,.site-btn--glossy:focus,.site-btn--glossy:hover{background:var(--p-btn-bg-color)}.site-btn--glossy:before,.site-btn--glossy:focus:before,.site-btn--glossy:hover:before{content:"";position:absolute;top:0;left:0;width:100%;height:50%;background:rgba(225,225,225,.2)}.site-btn--glossy .site-btn__icon-right,.site-btn--glossy .site-btn__img,.site-btn--glossy .site-btn__text,.site-btn--glossy:focus .site-btn__icon-right,.site-btn--glossy:focus .site-btn__img,.site-btn--glossy:focus .site-btn__text,.site-btn--glossy:hover .site-btn__icon-right,.site-btn--glossy:hover .site-btn__img,.site-btn--glossy:hover .site-btn__text{z-index:2}.site-btn--offset,.site-btn--offset:focus,.site-btn--offset:hover{transform:none;background:0 0;border-color:transparent;overflow:unset}.site-btn--offset:after,.site-btn--offset:before,.site-btn--offset:focus:after,.site-btn--offset:focus:before,.site-btn--offset:hover:after,.site-btn--offset:hover:before{content:"";position:absolute;top:-2px;left:-2px;height:calc(100% + 4px);width:calc(100% + 4px);transition:all var(--g-transition-speed);z-index:1}.site-btn--offset:before,.site-btn--offset:focus:before,.site-btn--offset:hover:before{background:var(--p-btn-bg-color);transform:translate(4px,4px);height:calc(100% + 3px);width:calc(100% + 3px)}.site-btn--offset:after,.site-btn--offset:focus:after,.site-btn--offset:hover:after{border:2px solid var(--p-btn-border-color)}.site-btn--offset:focus:before,.site-btn--offset:focus:focus:before,.site-btn--offset:focus:hover:before,.site-btn--offset:hover:before,.site-btn--offset:hover:focus:before,.site-btn--offset:hover:hover:before{transform:translate(0,0)}.site-btn--offset .site-btn__icon-right,.site-btn--offset .site-btn__img,.site-btn--offset .site-btn__text,.site-btn--offset:focus .site-btn__icon-right,.site-btn--offset:focus .site-btn__img,.site-btn--offset:focus .site-btn__text,.site-btn--offset:hover .site-btn__icon-right,.site-btn--offset:hover .site-btn__img,.site-btn--offset:hover .site-btn__text{z-index:2}.site-btn--3d{--move-distance:calc(var(--p-btn-box-shadow-size) / 3);--shadow-size:calc(var(--move-distance) * 2);box-shadow:var(--p-btn-box-shadow);border:none;transition:none}.site-btn--3d:focus,.site-btn--3d:hover{transform:translateY(var(--move-distance));box-shadow:0 var(--shadow-size) 0 var(--p-btn-box-shadow-color)}.site-btn--3d:active{transform:translateY(var(--p-btn-box-shadow-size));box-shadow:none}.site-btn--disabled,.site-btn:disabled,.site-btn[disabled]{pointer-events:none}.site-btn__img{flex-shrink:0;display:block;height:52px;pointer-events:none;width:52px;position:absolute;left:0;top:50%;transform:translateY(-50%);transition:all var(--g-transition-speed)}.site-btn--large .site-btn__img{height:75px;width:75px}.site-btn--large .site-btn__img svg{padding:.75rem}.site-btn__img--circle{margin-left:3px;height:46px;width:46px}.site-btn--large .site-btn__img--circle{height:69px;width:69px}.site-btn__img--circle img{border-radius:50%}.site-btn__img img,.site-btn__img svg{height:100%;object-fit:cover;object-position:center;width:100%}.site-btn__img svg{padding:.5rem}.site-btn__text{align-items:center;display:flex;font-weight:var(--p-btn-font-weight);flex-grow:1;line-height:1.4;padding:1rem 1.125rem;max-width:100%;justify-content:center;text-align:center;word-wrap:break-word;overflow-wrap:break-word;white-space:normal}.site-btn__text--small{font-size:13px}.site-btn--has-icon .site-btn__text{padding-left:44px;padding-right:44px}.site-btn--has-img .site-btn__text{padding-left:66px;padding-right:66px}.site-btn--has-img.site-btn--large .site-btn__text{padding-left:89px;padding-right:1.125rem}.site-btn--has-img.site-btn--large.site-btn--has-icon .site-btn__text{padding-right:44px}.site-btn__icon-right{display:inline-flex;position:absolute;font-size:1.35em;top:50%;right:1rem;transform:translateY(-50%);transition:all var(--g-transition-speed)}.site-btn--anim-slide-right{animation:slide-in-right 4s .5s cubic-bezier(.25,.46,.45,.94) both 2}@keyframes slide-in-right{0%{transform:translateX(500px);opacity:0}20%{transform:translateX(0);opacity:1}21%{opacity:1}}.site-btn--anim-slide-left{animation:slide-in-left 4s .5s cubic-bezier(.25,.46,.45,.94) both 2}@keyframes slide-in-left{0%{transform:translateX(-500px);opacity:0}20%{transform:translateX(0);opacity:1}21%{opacity:1}}.site-btn--anim-grow{animation:grow 4s .5s cubic-bezier(.25,.46,.45,.94) both 2}@keyframes grow{0%{transform:scale(0);opacity:0}20%{transform:scale(1);opacity:1}}.site-btn--anim-shake{animation:shake-btn 4s .5s cubic-bezier(.455,.03,.515,.955) both 2}@keyframes shake-btn{0%,20%,21%{transform:rotate(0)}2%{transform:rotate(4deg)}12%,4%,8%{transform:rotate(-6deg)}10%,14%,6%{transform:rotate(6deg)}16%{transform:rotate(-4deg)}18%{transform:rotate(4deg)}}.site-btn--anim-bounce-left{animation:bounce-left 4s .5s both 2}@keyframes bounce-left{0%{transform:translateX(-48px);animation-timing-function:ease-in;opacity:0}4%{opacity:1}8%{transform:translateX(-26px);animation-timing-function:ease-in}13%{transform:translateX(-13px);animation-timing-function:ease-in}16%{transform:translateX(-6.5px);animation-timing-function:ease-in}18%{transform:translateX(-4px);animation-timing-function:ease-in}11%,15%,17%,19%,5%{transform:translateX(0);animation-timing-function:ease-out}20%{transform:translateX(0);animation-timing-function:ease-out;opacity:1}21%{opacity:1}}.site-btn--anim-bounce-right{animation:bounce-right 4s .5s both 2}@keyframes bounce-right{0%{transform:translateX(48px);animation-timing-function:ease-in;opacity:0}4%{opacity:1}8%{transform:translateX(26px);animation-timing-function:ease-in}13%{transform:translateX(13px);animation-timing-function:ease-in}16%{transform:translateX(6.5px);animation-timing-function:ease-in}18%{transform:translateX(4px);animation-timing-function:ease-in}11%,15%,17%,19%,5%{transform:translateX(0);animation-timing-function:ease-out}20%{transform:translateX(0);animation-timing-function:ease-out;opacity:1}21%{opacity:1}}.site-btn--anim-rubberband{animation:rubberBand 5s .5s both 2}@keyframes rubberBand{0%,20%,21%{transform:scale3d(1,1,1)}6%{transform:scale3d(1.25,.75,1)}8%{transform:scale3d(.75,1.25,1)}10%{transform:scale3d(1.15,.85,1)}13%{transform:scale3d(.95,1.05,1)}15%{transform:scale3d(1.05,.95,1)}}191 </style>192 <style type="text/css">193 .site-links-title{color:var(--p-title-color);font-weight:var(--p-title-font-weight);font-family:var(--p-title-font-family);font-size:1.25rem;line-height:1.25;margin:2rem 0 .75rem;text-align:center}194 </style>195 <style type="text/css">196 .v-logo[data-v-57c5a2c2]{align-items:center;display:inline-flex;font-size:var(--c-size)}.v-logo__svg[data-v-57c5a2c2]{fill:var(--c-color);height:1em;width:6.45em}.v-logo--icon-only .v-logo__svg[data-v-57c5a2c2]{width:.8em}.v-logo__mark[data-v-57c5a2c2]{fill:var(--c-mark-color,var(--c-color))}197 </style>198 </head>199 <body class="site" data-n-head="%7B%22class%22:%7B%22ssr%22:%22site%22%7D%7D">200 <div id="__nuxt">201 <!-- -->202 <div id="__layout">203 <div class="site-container" id="site-container">204 <!-- -->205 <div class="site-bg">206 </div>207 <main class="site__main">208 <header class="site__header site__header--has-profile-image">209 <div class="site__header__img">210 <img alt="Profile picture" class="site__profile-img site__profile-img--has-border" height="100" src="rick.jpg" width="100">211 </div>212 <div class="site__header__content">213 <h1 class="site__username">214 Gabe Charbonneau215 </h1>216 <!-- -->217 <p class="site__intro">218 Physician entrepreneur disrupting the healthcare status quo 🚀219 </p>220 </div>221 </header>222 <div class="site__links" data-v-181a20d6>223 <div class="link-wrapper link-wrapper--pb" data-v-181a20d6 data-v-33e4ee3f>224 <a class="v-profile-btn site-btn site-btn--filled" data-v-33e4ee3f rel="noopener ugc" target="_blank">225 <!-- -->226 <span class="site-btn__text">227 Join Medicine Forward! ➡️228 </span>229 <!-- -->230 </a>231 </div>232 <div class="link-wrapper link-wrapper--pb" data-v-181a20d6 data-v-33e4ee3f>233 <a class="v-profile-btn site-btn site-btn--filled" data-v-33e4ee3f rel="noopener ugc" target="_blank">234 <!-- -->235 <span class="site-btn__text">236 Burnout Warriors 👕237 </span>238 <!-- -->239 </a>240 </div>241 <div class="link-wrapper link-wrapper--pb" data-v-181a20d6 data-v-33e4ee3f>242 <a class="v-profile-btn site-btn site-btn--filled" data-v-33e4ee3f rel="noopener ugc" target="_blank">243 <!-- -->244 <span class="site-btn__text">245 Check burnout risk (2-min) 🔥246 </span>247 <!-- -->248 </a>249 </div>250 <div class="link-wrapper link-wrapper--pb" data-v-181a20d6 data-v-33e4ee3f>251 <a class="v-profile-btn site-btn site-btn--filled" data-v-33e4ee3f rel="noopener ugc" target="_blank">252 <!-- -->253 <span class="site-btn__text">254 Download SwiftWire EHR macro app (free & open source) 💻255 </span>256 <!-- -->257 </a>258 </div>259 <h2 class="site-links-title" data-v-181a20d6>260 On a mission to ⬆️ compassion & flourishing for everyone ❤️261 </h2>262 </div>263 <!-- -->264 <footer class="site__footer">265 <a aria-label="Campsite.bio" class="site__footer-logo" target="_blank">266 <div class="v-logo" data-v-57c5a2c2 style="--c-size: 25px; --c-color: rgb(247, 183, 51);">267 </div>268 </a>269 </footer>270 </main>271 </div>272 </div>273 </div>274 </body>275</html>276