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 lang="en" xml:lang="en" xmlns="">3 <head>4 <style>5 @charset "UTF-8";6 7/*8 css Copyright © 2005-2012 Karelia Software. All rights reserved.9 css released under Creative Commons License - http://creativecommons.org/licenses/by-sa/2.5/10 All associated graphics belong to their respective owners and are licensed separately.11*/12 13/* IE7 hacks */14 15*:first-child+html .gridItem img {16 position:relative;17 top:0px;18}19 20*:first-child+html .gridItem h3 {21 position:relative;22 top:0px;23}24 25/* Navigation arrows */26div.text-navigation { text-align:center; margin-bottom:1em;}27div.text-navigation div { display:inline; margin:0px 0.5em; }28.collection-navigation .disabled-navigation { text-indent:-5000px; }29 30/* 2.0 wrap compatibility. 2.0-compatible designs can further adjust these if they need */31.wide { display:block; }32 33.narrow.left { /* Some designs won't respect without !important */34 float:left!important;35 clear:left!important;36}37.narrow.right {38 float:right!important;39 clear:right!important;40}41 42.wide.left .graphic, img.wide.left, .wide.left video, .wide.left audio { display:block; margin-left:0px; margin-right:auto; }43.wide.center .graphic, img.wide.center, .wide.center video, .wide.center audio { display:block; margin-left:auto; margin-right:auto; }44.wide.right .graphic, img.wide.right, .wide.right video, .wide.right audio { display:block; margin-left:auto; margin-right:0px; }45 46 47.ImageElement.left, .AudioElement.left { text-align:left; }48.ImageElement.center, .AudioElement.center { text-align:center; }49.ImageElement.right, .AudioElement.right { text-align:right; }50 51/* Captions should align themselves with the graphic */52.graphic-container.left .caption { text-align:left; }53.graphic-container.center .caption { text-align:center; }54.graphic-container.right .caption { text-align:right; }55 56/* Inline iframes need to display as a block to layout right */57.graphic iframe { display:block; }58 59/* Pagelet photo grids should be generally be auto width (some 1.x designs hardcoded an exact width) */60.pagelet .photogrid-index { width:auto; }61 62/* For content like amazon which forces white background. Design SHOULD set color for A tag and text color. */63.whiteBackground64{65 background-color:white;66}67 68.article-info69{70 margin-bottom:1em;71}72 73/* Firefox reduce dotted lines on links */74.photo-navigation a:focus, .replaced a:focus {overflow:hidden;}75 76/* Disqus correction to prevent overflow scroll bars in some designs */77#dsq-content { overflow:hidden; }78#dsq-content .dsq-auth-header { width: auto!important; }79#dsq-content .dsq-by { margin: 4px 6px 0px 0px; }80#dsq-content .dsq-by a, #dsq-content .dsq-by a:hover { border: 0px none; }81#dsq-content h3 { margin:0px; }82 83/* Site menus. Don't wrap the top level items, and wrap sub-menu items normaly. */84#sitemenu-content ul li span.in { white-space:nowrap;}85* html #sitemenu-content ul li span.in {white-space: normal}86*:first-child+html #sitemenu-content ul li span.in {white-space: normal}87#sitemenu-content ul ul li span.in {white-space: normal}88#sitemenu-content span.in { position: relative; }89 90body { word-wrap:break-word; }91 92/* Make sure scaled-down images look good in IE */93img { -ms-interpolation-mode: bicubic; }94 95 96 97/* Div that contains the entire list */98div.amazonList99{100 margin-top: 20px;101 padding: 6px;102 overflow: auto;103}104 105div.amazonListPlaceholder106{107 width:140px;108 height:200px;109 background:rgba(0,0,0,0.25);110 margin:auto;111 padding:10px;112}113 114div.amazonListWhiteBackground /* additional items for .whiteBackground */115{116 border: 1px solid #AAA;117 padding: 10px 5px;118}119 120 121div.amazonListRow122{123 clear:both;124 margin-bottom: 25px !important;125}126 127 128 129/* Thumbnails */130.amazonProductThumbnail131{132 margin-bottom: 8px !important;133}134 135div.amazonProductThumbnailFrame, img.amazonProductThumbnailFrame136{137 background-color: white !important;138 padding: 3px !important;139 border: 1px solid #AAA; /* not so important, design may have its own */140}141 142.amazonProductThumbnailNoFrame143{144 padding:0 !important;145 border-style:none !important;146}147 148p.amazonText { /* Make sure paragraphs have no top margin or padding so they align with images */149 margin:0 0 6px 0;150 padding:0;151}152 153/* left, right and alternating layout */154.amazonListLayoutLeft .amazonProductThumbnail, .amazonListLayoutAlt .o .amazonProductThumbnail { float:left; margin-right:8px; }155.amazonListLayoutRight .amazonProductThumbnail, .amazonListLayoutAlt .e .amazonProductThumbnail { float:right; margin-left:8px; }156 157.amazonListLayoutLeft p.amazonText, .amazonListLayoutAlt .o p.amazonText { text-align:left !important; }158.amazonListLayoutRight p.amazonText, .amazonListLayoutAlt .e p.amazonText { text-align:right !important; }159 160.amazonListLayoutLeft div.amazonText div.amazonListShowThumbnails, .amazonListLayoutAlt .o div.amazonText div.amazonListShowThumbnails .amazonTextWithThumbnail161{162 margin-left:65px !important;163}164.amazonListLayoutRight div.amazonText div.amazonListShowThumbnails, .amazonListLayoutAlt .e div.amazonText div.amazonListShowThumbnails .amazonTextWithThumbnail165{166 margin-right:65px !important;167}168 169 170/* Centered layout */171.amazonListLayoutCenter .amazonListRow { text-align:center; }172.amazonListLayoutCenter p.amazonText { text-align:center !important; }173 174 175/* twoup layout */176.amazonListLayoutTwoUp { margin:0 5px !important; }177.amazonListLayoutTwoUp .e { clear:none !important; }178.amazonListLayoutTwoUp .amazonText { text-align:center; }179.amazonListLayoutTwoUp .amazonListRow180{181 width:50%;182 margin:0 0 10px 0;183 float:left;184 text-align:center;185}186.amazonListLayoutTwoUp p.amazonText187{188 margin-left:4px;189 margin-right:4px;190}191 192/* Bullets */193li.amazonList { margin: 0 0 8px 0; }194p.amazonListBulletsParagraph195{196 padding:0;197 margin-top: 0px;198 margin-bottom: 0px;199}200 201 202/* Enhanced */203div.amazonListLayoutEnhanced, div.amazonListLayoutRandom { text-align:center; }204 205textarea.fullWidth, input.fullWidth, select.fullWidth {206 width:96%;207 margin:4px 0;208}209textarea.fullWidth, select.fullWidth {210 margin: 4px 1px211}212 213form.contactElement input.submit {214 width:auto;215 display:block;216 margin-left:auto;217 margin-right:2%;218}219form.contactElement th {220 text-align:right;221 font-weight:normal;222 width:25%;223}224 225.contactError { color:red; font-weight:bold; }226 227/* Contact Element For IE 7 */228*:first-child+html form.contactElement input.submit {229 padding:0px 10%;230 min-width: 0px;231}232 233textarea {234 resize: vertical;235}236 237form.contactElement p {238 text-align: left;239}240 241.social-bar-button a {border-bottom-style:none !important;}242 243.photogrid-index-bottom { clear:left; }244 245/* Overall pagelet */246div.rssBadge247{248 margin: 10px;249}250 251/* Small icon option */252img.smallRSSBadgeIcon { vertical-align:middle; }253img.smallRSSBadgeIconLeft { margin-right:3px; }254img.smallRSSBadgeIconRight { margin-left:3px; }255 256/* Large icon option */257div.largeRSSBadgeIcon, p.largeRSSBadgeIcon258{259 margin: 0 10px;260 text-align:center !important;261}262 263img.largeRSSBadgeIcon { margin-bottom: 4px; }264p.largeRSSBadgeIcon { margin: 0; }265 266/* 267 css Copyright © 2005-2012 Karelia Software. All rights reserved.268 css released under Creative Commons License 269 - http://creativecommons.org/licenses/by-sa/2.5/ 270 All associated graphics belong to their respective owners 271 and are licensed separately. 272*/273 274a img { border: none; }275 276 /* General styles */277 278.clear {279 clear: both;280 height: 0;281}282 283.hidden {284 display:none;285}286 287/* Images embedded in text. "narrow" are 200 pixels wide or smaller. */288.narrow {289 display: block;290 clear: right;291 float: right;292}293img.wide {294 clear: both;295 display:block;296}297 298/* Block Level formatting, more or less in descending order */299 300body {301 font-family: "Lucida Grande", verdana, arial, helvetica, sans-serif;302 font-size: 76%;303 margin: 0;304 background: #232323;305 color: #bfc6ca;306}307 308h4, h5, h6 {309 font-size: 100%;310 margin: 0em 0em 0.8em 0em;311}312 313#page {314 margin: auto;315 width: 771px;316 background: #4f4f4f url(background.png) repeat-y;317}318 319#page-top {320 margin:0;321 margin-left: 17px;322 margin-right: 23px;323 border-top: 1px solid #7a7a7a;324 background: url(new_header_bkgd.png) no-repeat;325}326 327#title {328 padding-top: 2px;329 330}331 332h1 {333 font-size: 2.9em;334 text-align: left;335 margin: 10px 25px 4px 25px;336 display: block;337 font-weight:normal;338 text-shadow: 0px -1.5px 0px black;339}340 341/* IE Hack */342 343/* Hides from IE5-mac \*/344* html h1 {345 height: 1%;346}347/* End hide from IE5-mac */348 349h1 a {350 text-decoration:none;351 color: #bfc6ca;352}353 354h1 a:hover, h1 a:focus, h1 a:active {355 border-bottom: 1px solid #bfc6ca;356}357 358/* gives better spacing in IE 7 */359*:first-child+html #title {360 border-bottom: 1px solid transparent;361}362 363#title img {364 float: left;365 margin: 3px;366 margin-right: 10px;367 position: relative;368}369 370#title p {371 font-size: 0.9em;372 text-align: left;373 margin: 0px 25px 14px 25px;374 font-style: italic;375 text-shadow: 0px -1px 0px black;376}377 378/* IE Hack */379/* Hides from IE5-mac \*/380* html #title p {381 height: 1%;382}383/* End hide from IE5-mac */384 385 386/* BANNER HANDLING */387 388body.has-custom-banner #page-top {389 background: center top no-repeat;390}391 392body.has-custom-banner h1 {393 margin-top: 32px;394}395 396body.has-custom-banner #title {397 min-height: 140px;398}399 400* html body.has-custom-banner #title {401 padding: 10px;402}403 404body.has-custom-banner #title h1, body.has-custom-banner #title h1 a, body.has-custom-banner #title p {405 color: #fff;406 font-weight: bold;407}408 409 410 411/* SITEMENU */412 413#sitemenu-container {414 clear:both;415}416 417#sitemenu {418 background: rgb(10, 152, 210) url(links_bkgd.png) repeat-x;419 min-height: 30px;420 border-top: 1px solid #585858;421 border-bottom: 1px solid #232323;422 border-left: 1px solid #525252;423 border-right: 1px solid #525252;424 font-size: 1.1em;425/* overflow: hidden; */426}427 428#sitemenu-content ul {429 text-align: center;430 padding: 3px 0px 0px 0px;431 margin: 0 10px auto 10px;432/* overflow: hidden; */433 line-height: 200%;434}435 436#sitemenu-content ul li ul {437 line-height: 160%;438 background: #232323;439}440 441#sitemenu-content ul li ul li span.in {442 border-color: #232323;443}444 445#sitemenu-content li {446 margin: -1px 5px 0px 0px;447 padding: 8px 5px 4px 5px;448 display:inline;449}450 451#sitemenu-content a {452 text-decoration: none;453 color: white;454 text-shadow: 0px 1.5px 2px black;455}456 457#sitemenu-content a:hover {458 text-decoration: underline;459}460 461#sitemenu-content li li,462#sitemenu-content li.currentPage li,463#sitemenu-content li.currentParent li > a > span.in {464 background: rgb(10, 152, 210) url(links_bkgd.png) repeat-x;465}466 467#sitemenu-content li.currentPage, 468#sitemenu-content li li.currentParent > a > span.in,469#sitemenu-content li.currentParent {470 background: url(links_bkgd_current.png) top left repeat-x;471 color: white;472 text-shadow: 0px 1.5px 2px black;473}474 475#sitemenu-content ul ul li.currentPage {476 text-decoration: underline;477}478 479#sitemenu-content ul ul li.currentPage li {480 text-decoration: none;481}482 483#sitemenu-content ul li ul li span.in{484 border-bottom:solid 1px #222 !important;485}486#page-content {487 width: 731px;488 margin: auto;489 clear: both;490}491 492body.no-sidebar #page-content {493 width: 726px;494}495 496#page-content a, #page-bottom a {497 color: #bfc6ca;498 text-decoration: underline;499}500 501#page-content a:hover, #page-content a:focus, #page-content a:active, #page-bottom a:hover, #page-bottom a:focus, #page-bottom a:active {502 color: #839ab1;503}504 505#page .imageLink {506 border: 0px none;507}508 509#sidebar {510 margin-top: 8px;511 float: left;512 width: 200px;513 padding-right: 5px;514 margin-right: 5px;515 font-size: 0.8em;516 background: url(sidebar_bkgd.png) top right repeat-y;517}518 519#sidebar p {520 margin-left: 5px;521 margin-right: 5px;522 text-align: left;523}524 525.pagelet {526 width:200px;527 overflow:hidden;528}529 530#sidebar .pagelet h4, #sidebar h5.index-title{ text-align:center;}531#sidebar h5.index-title{ border:0; margin:0; padding:0;}532 533.callout .pagelet {534 padding:5px;535}536 537.callout .pagelet.bordered {538 background: #343434; 539}540 541.pagelet h4, .pagelet h5, .pagelet h6 {542 margin: 0px 3px 6px 3px;543 padding-top:14px;544 font-weight: normal;545 font-size: 1.3em;546 text-shadow: 0px -1px 1px #343434;547 border-bottom: 1px solid #3f3f3f;548 padding-bottom: 4px;549 text-align: center;550}551 552.pagelet.bordered h4 {553 border-bottom-color: rgb(158,158,158);554}555 556.blockquote-container>.pagelet-body, .blockquote-container>.graphic {557 position: relative;558 padding: 10px 15px 10px 10px;559 background: -27px 0px no-repeat;560 background-image: url(QuotationMarks-SmoothDark.png);561}562 563.blockquote-container .pagelet-body:after, .blockquote-container .graphic:after {564 display: block;565 position: absolute;566 height: 70px;567 width: 70px;568 bottom: 0px;569 right: 0px;570 content: "";571 background: transparent 50px 50px no-repeat;572 background-image: url(QuotationMarks-SmoothDark.png);573} 574 575.blockquote-container blockquote {576 margin: 0px;577 padding-left: 10px;578 z-index: 100;579 position: relative;580 font-style: italic;581}582 583#sidebar blockquote p, blockquote p {584 margin: 0px;585}586 587#main {588 min-height: 190px;589}590 591/* photo-page, html-page (in some cases), iframe-page don't have sidebar */592body.no-sidebar #main {593 margin-left: 8px;594 margin-right: 13px;595 font-size: 1em;596}597 598/* Most other pages have sidebars */599body.allow-sidebar #main {600 margin-right: 10px;601 float: right;602 width: 490px;603 font-size: 1em;604}605 606/* IE Hack */607 608/* Hides from IE5-mac \*/609* html .body.allow-sidebar #main {610 margin:0;611 padding:0;612 margin-right: 2px;613 width: 513px;614}615/* End hide from IE5-mac */616 617/* IE5/Mac Love */618* html>body.allow-sidebar #main {619 width: 470px;620}621 622 623.has-photo-navigation h2 {624 min-height:23px;625 padding-right:130px;626}627 628h2 {629 display: block;630 font-weight: normal;631 text-shadow: 0px -1px 1px #343434;632 633 padding-left: 15px;634 padding-top: 13px;635 padding-bottom: 13px;636 margin: 0px -7px;637 border-bottom: 1px solid #3f3f3f;638}639 640/* Hides from IE5-mac \*/641* html h2 {642 height: 30px;643 margin-right: -15px;644 margin-top: -15px;645}646/* End hide from IE5-mac */647 648#main ul, #sidebar ul {649 margin: 0;650 padding: 0;651 list-style: none;652 margin-left: 5px;653}654 655#main li ul {656 padding-top:8px!important;657}658 659#main ul li, #sidebar ul li {660 padding-left: 25px;661 background: url(bullet.png) no-repeat;662 padding-bottom: 6px;663 padding-top:2px;664}665 666ol {667 padding-left: 25px;668}669 670dd {671 margin-left: 25px;672}673 674.article, .no-callouts {675 margin:0px 10px 10px 10px!important;676 /*overflow: auto;*/677 padding-bottom: 6px;678 border-bottom: 1px solid #3f3f3f;679}680 681.article h3 {682 padding: 5px;683 text-shadow: 0px -1px 1px #343434;684 font-weight: normal;685}686 687/* remove excessive spacing if the heading is used in a collection index */688li h3 {689 margin:0px;690}691 692 693 694.imageLink {695 border: 0px none;696}697 698.article img {699 border: none;700}701 702.article.narrow{703 float: left; 704 margin:5px 10px 5px 0; 705}706.narrow.left{707 margin:5px 10px 5px 0;708}709.narrow.right{710 margin:5px 0 5px 10px;711}712.article-info {713 clear: right;714}715 716.article-thumbnail {717 float: left;718 margin: 5px 10px 5px 0;719 clear:left; 720}721h3.index-title, .timestamp{722 clear:left;723} 724.callout {725 float: right;726 margin: 10px;727 margin-right: 0px;728 border: 1px solid rgb(158, 158, 158);729}730 731.callout li, #sidebar li {732 background: url(bullet.png) no-repeat !important;733}734 735.callout h4 {736 font-weight: normal !important;737 font-size: 1.1em !important;738}739 740#page-bottom {741 background: url(footer.png) no-repeat bottom ;742 font-size: 1em;743 text-shadow: 0px -1px 1px #090909;744 color: #b3b9bd;745 min-height: 25px;746 padding: 11px 30px 15px 30px; 747}748 749/*#page-bottom div {750 overflow:hidden;751 height:20px;752}*/753 754#page-bottom p {755 display:inline;756}757 758#page-bottom p+p:before {759 content: ' \002022 ';760}761 762div.photo-viewer-summary .article {763 margin: auto;764}765 766.HTMLElement {767 margin-bottom: 10px;768}769 770.ImageElement, .VideoElement {771 text-align: center;772/* padding-top:20px;773*/}774 775 776.caption {777 padding: 10px;778}779 780/* Used on Photo Grid Pages ... */781 782.photogrid-index {783 text-align: center;784 margin: 10px;785 padding: 5px;786 width: 480px;787 /*float:left;*/788}789 790.photogrid-index:after{font-size:0px; line-height:0px; height:0px; content:'.'; visibility:hidden; display:block; clear:both}791 792body.no-sidebar .photogrid-index {793 width: 634px;794 margin-left:33px;795}796 797* html body.no-sidebar .photogrid-index {798 width:652px!important;799}800 801/* IE:Mac Hackery */802/*\*//*/803.photogrid-index { 804 margin-right:0px;805}806/**/807 808.photogrid-index a {809 color:#000;810 text-decoration:none;811 border:0px;812}813 814.photogrid-index a:hover {815 text-decoration:underline;816}817 818.gridItem {819 float: left;820 position:relative;821 width:152px;822 height:192px; /* room for caption */823 overflow: hidden;824 margin: 3px;825 padding-top: 6px;826}827 828.gridItem h3 {829 font-size:12px;830 font-weight:normal;831 margin-top: 10px;832 margin-left: 7px;833 margin-right: 7px;834 padding: 0px;835 height: 48px;836 overflow: hidden;837 position:absolute;838 top: 140px; /* needs to leave 38px from the bottom of the gridItem */839 width: 136px;840 border: 0px;841}842 843.gridItem img {844 border: 1px solid rgb(80, 80, 80);845 margin: auto;846 display:block;847 position: absolute;848 top: 0;849 bottom: 40px;850 right: 0;851 left: 0;852}853 854* html .gridItem img {855 position: relative;856 top:6px;857}858 859/* IE Hack */860/* Hides from IE5-mac \*/861 862 863* html .gridItem h3 {864 position: relative;865 top: 0px;866}867 868#sidebar .photogrid-index{869 width:auto;870 margin-left:20px;871}872 873 874/* End hide from IE5-mac */875 876 877/* Used on index summary pages */878.listing-index li h3 a {879 font-weight:normal;880}881 882 883/* make linked lists look less blue */884li a {885 text-decoration:none;886}887 888li a:hover {889 text-decoration:underline;890}891 892/* Individual Photo Pages */893 894.photo-navigation {895 position: relative;896 z-index: 100;897 height: 3px;898 padding:0px;899}900 901/* Hides from IE5-mac \*/902* html .photo-navigation {903 margin-top: 2px;904}905/* End hide from IE5-mac */906 907.photo-navigation a:active {908 border: none;909}910 911#previous-photo {912 width: 35px;913 height: 35px;914 background: url(photo-buttons-disabled.png) no-repeat;915 position: absolute;916 left: 594px;917 margin-top: -42px;918 text-indent: -5000em;919}920 921.allow-sidebar #previous-photo {922 left:384px;923}924 925 926#previous-photo a {927 width: 35px;928 height: 35px;929 display: block;930 background: url(photo-buttons.png) no-repeat;931}932 933#next-photo {934 text-indent: -5000em;935 width: 35px;936 height: 35px;937 background: url(photo-buttons-disabled-03.png) no-repeat;938 position: absolute;939 left: 664px;940 margin-top: -42px;941}942 943.allow-sidebar #next-photo {944 left: 454px;945}946 947#next-photo a {948 width: 35px;949 height: 35px;950 display: block;951 background: url(photo-buttons-03.png) no-repeat;952}953 954#photo-list {955 text-indent: -5000em;956 width: 35px;957 height: 35px;958 background: url(photo-buttons-disabled-02.png) no-repeat;959 position: absolute;960 left: 629px;961 margin-top: -42px;962}963 964.allow-sidebar #photo-list {965 left:419px;966}967 968 969 970#photo-list a {971 width: 35px;972 height: 35px;973 display: block;974 background: url(photo-buttons-02.png) no-repeat;975}976 977 978.text-navigation{width:auto!important; padding:15px 0;}979.text-navigation #previous-photo, .text-navigation #next-photo, .text-navigation #photo-list, .text-navigation a, .text-navigation a:hover{980 background:none!important;981 width:auto!important;982 font-weight:bold;983 text-indent:0!important;984 left:auto;985 position:relative;986 display:inline!important;987}988 989.whiteBackground p990{991 color:#4f4f4f;992}993.whiteBackground p a{994 color:#335c85!important;995 }996 997 998 999/* IE:Mac Hackery */1000 1001/*\*//*/1002 1003 1004.article {1005 margin:0;1006 margin-top: -30px;1007 background: none;1008 border: none;1009 padding-bottom: 0;1010 padding-top: 0;1011}1012 1013.article p {1014 clear: none;1015}1016 1017.article a {1018 text-decoration: underline;1019 border-bottom: none;1020}1021 1022.article a:hover, a:focus, a:active {1023 border-bottom: none;1024 color: blue;1025}1026 1027.article-summary {1028 padding: 0;1029 margin: 0;1030 clear: none;1031}1032 1033#page-bottom p {1034 margin-top: 0;1035}1036 1037/**/1038.no-page-title .photo-navigation {margin-top:49px;}1039 1040 1041.callout-container, .graphic-container { clear:both; }1042 </style>1043 <meta charset="utf-8">1044 <meta content="IE=edge" http-equiv="X-UA-Compatible">1045 <title>1046 Farewell Party, December 1966 | Rock ’n' Roll Soldier1047 </title>1048 <meta content="Dean Kohler, Mike Ioli, John Voina, Army, Fort Bragg, Captain Leadbetter, 127th Military Police Company" name="keywords">1049 <meta content="Dean Kohler, Mike Ioli and John Voina performing for the Army's 127th Military Police Company prior to shipping out for Vietnam." name="description">1050 <meta content="all" name="robots">1051 <meta content="Sandvox 2.10.12" name="generator">1052 <meta content="width=772" name="viewport">1053 <meta content="f11Y6WDbtICMIAKAYYsl8QnuGR8vx/Q7lNiUpRQnzzQ=" name="verify-v1">1054 <!--[if lt IE 6]>1055 <![endif]-->1056 <!--1057 Photo credits for this website's design: <http://www.rocknrollsoldieramemoir.com/sandvox_SmoothDark/Credits.rtf>1058 Licensing for this website's design: <http://www.rocknrollsoldieramemoir.com/sandvox_SmoothDark/License.rtf>1059 -->1060 <style type="text/css">1061 #sidebar { font-size: 1.1em; }1062 </style>1063 </head>1064 <body class="sandvox has-page-title no-sidebar no-custom-banner has-photo-navigation IR" id="www_rocknrollsoldieramemoir_com">1065 <div id="page-container">1066 <div id="page">1067 <div class="no-logo has-title has-tagline" id="page-top">1068 <div id="title">1069 <h1 class="title in">1070 <a>1071 <span class="in">1072 <span style="font-size: 50px; font-family: Impact; color: rgb(242, 242, 242);">1073 Rock ’n' Roll Soldier1074 </span>1075 </span>1076 </a>1077 </h1>1078 <p id="tagline">1079 <span class="in">1080 <span>1081 <span>1082 <span>1083 <span>1084 <span style="font-family: Arial; font-size: 18px; font-style: normal;">1085 <b>1086 <span>1087 <span>1088 <span style="color: rgb(242, 242, 242);">1089 <span>1090 <span style="font-size: 26px;">1091 A Memoir1092 </span>1093 </span>1094 1095 <span style="font-size: 12px;">1096 by Dean Ellis Kohler with Susan VanHecke 1097 </span>1098 </span>1099 </span>1100 </span>1101 </b>1102 </span>1103 </span>1104 </span>1105 </span>1106 </span>1107 </span>1108 </p>1109 </div>1110 <!-- title -->1111 <div id="sitemenu-container">1112 <div id="sitemenu">1113 <h2 class="hidden">1114 Site Navigation1115 <a rel="nofollow">1116 [Skip]1117 </a>1118 </h2>1119 <div id="sitemenu-content">1120 <ul>1121 <li class="i1 o currentParent">1122 <a title="Vietnam Photo Gallery">1123 <span class="in">1124 Vietnam Photo Gallery1125 </span>1126 </a>1127 </li>1128 <li class="i2 e">1129 <a title="Watch">1130 <span class="in">1131 Watch1132 </span>1133 </a>1134 </li>1135 <li class="i3 o">1136 <a title="Listen">1137 <span class="in">1138 Listen1139 </span>1140 </a>1141 </li>1142 <li class="i4 e">1143 <a title="More Stories of the 127th">1144 <span class="in">1145 More Stories of the 127th1146 </span>1147 </a>1148 </li>1149 </ul>1150 </div>1151 <!-- /sitemenu-content -->1152 </div>1153 <!-- /sitemenu -->1154 </div>1155 <!-- sitemenu-container -->1156 </div>1157 <!-- page-top -->1158 <div class="clear below-page-top">1159 </div>1160 <div class="has-photo-navigation" id="page-content">1161 <div id="main">1162 <div id="main-top">1163 </div>1164 <div id="main-content">1165 <h2 class="title">1166 <span class="in">1167 <font color="#FFFFFF">1168 Farewell Party, December 1966 1169 </font>1170 <br>1171 </span>1172 </h2>1173 <div class="collection-navigation photo-navigation">1174 <div class="previous-page" id="previous-photo">1175 <a class="imageLink">1176 Previous1177 </a>1178 </div>1179 <div class="next-page" id="next-photo">1180 <a class="imageLink">1181 Next1182 </a>1183 </div>1184 <div class="collection-index" id="photo-list">1185 <a class="imageLink">1186 List1187 </a>1188 </div>1189 </div>1190 <div class="article">1191 <div class="article-content">1192 <div class="RichTextElement">1193 <div>1194 <p>1195 </p>1196 <p>1197 <span style="font-family: Arial;">1198 <span style="color: white;">1199 The night before we shipped out, Captain Leadbetter threw us a going-away party at the local enlisted club. Loaded us all onto trucks and shuttled us over.1200 </span>