Team Ai
Datasetpublic

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.

sourceHugging Faceodc-byupdated 3y agoView on Hugging Face
22likes2.8kdownloads
17639.html839 linesDownload Raw Back to root
1<!DOCTYPE html>2<html>3 <head>4  <style>5   /**6 * Reset some basic elements7 */8body, h1, h2, h3, h4, h5, h6,9p, blockquote, pre, hr,10dl, dd, ol, ul, figure {11  margin: 0;12  padding: 0;13}14 15/**16 * Basic styling17 */18body {19  font: 400 19px/1.6 "Georgia", "Helvetica Neue", Helvetica, Arial, sans-serif;20  color: #363636;21  background-color: #fdfdfd;22  -webkit-text-size-adjust: 100%;23  -webkit-font-feature-settings: "kern" 1;24  -moz-font-feature-settings: "kern" 1;25  -o-font-feature-settings: "kern" 1;26  font-feature-settings: "kern" 1;27  font-kerning: normal;28}29 30@media only screen and (max-width: 600px) {31  body {32    font-size: 18px;33  }34}35/**36 * Set `margin-bottom` to maintain vertical rhythm37 */38h1, h2, h3, h4, h5, h6,39p, blockquote, pre,40ul, ol, dl, figure,41.highlight {42  margin-bottom: 20px;43}44 45/**46 * Images47 */48img {49  max-width: 100%;50  margin: 2rem auto;51  display: block;52}53 54iframe {55  width: 95%;56  margin: 2rem auto;57  display: block;58}59 60@media only screen and (max-width: 600px) {61  iframe {62    height: 225px;63    width: 100%;64  }65}66hr {67  width: 90%;68  margin: 2rem auto;69  color: #c9c9c9;70}71 72/**73 * Figures74 */75figure > img {76  display: block;77}78 79figcaption {80  color: #636363;81  font-size: 16.625px;82  text-align: right;83  font-style: italic;84  margin-top: -1.5rem;85}86 87.sharing-text {88  margin-top: 2rem;89  font-size: 16.625px;90  text-align: center;91  font-style: italic;92}93 94/**95 * Lists96 */97ul, ol {98  margin-left: 30px;99}100 101li > ul,102li > ol {103  margin-bottom: 0;104}105 106/**107 * Headings108 */109h1, h2, h3, h4, h5, h6 {110  font-family: "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;111  font-weight: bold;112  line-height: 1.4;113  color: #272727;114}115 116h2 {117  margin-top: 2rem;118  margin-bottom: 1rem;119}120 121h2.post-index {122  margin-top: 0;123  margin-bottom: 0;124}125 126/**127 * Links128 */129a {130  color: #2a7ae2;131  text-decoration: none;132}133a:visited {134  color: #1756a9;135}136a:hover {137  color: #363636;138  text-decoration: underline;139}140 141/**142 * Blockquotes143 */144blockquote {145  color: #636363;146  border-left: 0.3rem solid #c9c9c9;147  padding: 0 1rem 0 1.75rem;148  margin: 1.75rem 0;149}150blockquote > :last-child {151  margin-bottom: 0;152}153 154.message {155  margin-bottom: 1rem;156  padding: 1rem;157  color: #717171;158  background-color: #f9f9f9;159}160 161/**162 * Code formatting163 */164pre,165code {166  font-size: 15px;167  border: 1px solid #c9c9c9;168  border-radius: 3px;169  background-color: #eef;170}171 172code {173  padding: 1px 5px;174}175 176pre {177  padding: 8px 12px;178  overflow-x: auto;179}180pre > code {181  border: 0;182  padding-right: 0;183  padding-left: 0;184}185 186/**187 * Wrapper188 */189.wrapper {190  max-width: -webkit-calc(700px - (30px * 2));191  max-width: calc(700px - (30px * 2));192  margin-right: auto;193  margin-left: auto;194  padding-right: 30px;195  padding-left: 30px;196}197@media screen and (max-width: 650px) {198  .wrapper {199    max-width: -webkit-calc(700px - (30px));200    max-width: calc(700px - (30px));201    padding-right: 15px;202    padding-left: 15px;203  }204}205 206/**207 * Clearfix208 */209.footer-col-wrapper:after, .wrapper:after {210  content: "";211  display: table;212  clear: both;213}214 215/**216 * Icons217 */218.icon > svg {219  display: inline-block;220  width: 16px;221  height: 16px;222  vertical-align: middle;223}224.icon > svg path {225  fill: #636363;226}227 228/**229 * Site header230 */231.site-header {232  border-top: 5px solid #232323;233  border-bottom: 1px solid #c9c9c9;234  min-height: 56px;235  position: relative;236}237 238.site-title {239  font-size: 26px;240  font-weight: 300;241  line-height: 56px;242  letter-spacing: -1px;243  margin-bottom: 0;244  float: left;245}246.site-title, .site-title:visited {247  color: #232323;248}249 250.site-nav {251  float: right;252  line-height: 56px;253}254.site-nav .menu-icon {255  display: none;256}257.site-nav .page-link {258  color: #363636;259  line-height: 1.6;260}261.site-nav .page-link:not(:last-child) {262  margin-right: 20px;263}264@media screen and (max-width: 600px) {265  .site-nav {266    position: absolute;267    top: 9px;268    right: 15px;269    background-color: #fdfdfd;270    border: 1px solid #c9c9c9;271    border-radius: 5px;272    text-align: right;273  }274  .site-nav .menu-icon {275    display: block;276    float: right;277    width: 36px;278    height: 26px;279    line-height: 0;280    padding-top: 10px;281    text-align: center;282  }283  .site-nav .menu-icon > svg {284    width: 18px;285    height: 15px;286  }287  .site-nav .menu-icon > svg path {288    fill: #232323;289  }290  .site-nav .trigger {291    clear: both;292    display: none;293  }294  .site-nav:hover .trigger {295    display: block;296    padding-bottom: 5px;297  }298  .site-nav .page-link {299    display: block;300    padding: 5px 10px;301    margin-left: 20px;302  }303  .site-nav .page-link:not(:last-child) {304    margin-right: 0;305  }306}307 308/**309 * Site footer310 */311.site-footer {312  border-top: 1px solid #c9c9c9;313  padding: 30px 0;314}315 316.footer-heading {317  font-size: 18px;318  margin-bottom: 15px;319}320 321.contact-list,322.social-media-list {323  list-style: none;324  margin-left: 0;325}326 327.footer-col-wrapper {328  font-size: 15px;329  color: #636363;330  margin-left: -15px;331}332 333.footer-col {334  float: left;335  margin-bottom: 15px;336  padding-left: 15px;337}338 339.footer-col-1 {340  width: -webkit-calc(35% - (30px / 2));341  width: calc(35% - (30px / 2));342}343 344.footer-col-2 {345  width: -webkit-calc(20% - (30px / 2));346  width: calc(20% - (30px / 2));347}348 349.footer-col-3 {350  width: -webkit-calc(45% - (30px / 2));351  width: calc(45% - (30px / 2));352}353 354@media screen and (max-width: 650px) {355  .footer-col-1,356  .footer-col-2 {357    width: -webkit-calc(50% - (30px / 2));358    width: calc(50% - (30px / 2));359  }360  .footer-col-3 {361    width: -webkit-calc(100% - (30px / 2));362    width: calc(100% - (30px / 2));363  }364}365@media screen and (max-width: 600px) {366  .footer-col {367    float: none;368    width: -webkit-calc(100% - (30px / 2));369    width: calc(100% - (30px / 2));370  }371}372/**373 * Page content374 */375.page-content {376  padding: 30px 0;377}378 379.page-heading {380  font-size: 20px;381}382 383.post-list {384  margin-left: 0;385  list-style: none;386}387.post-list > li {388  margin-bottom: 30px;389}390 391.post-meta {392  font-size: 16.625px;393  color: #636363;394}395 396.post-link {397  display: block;398  font-size: 24px;399}400 401/**402 * Posts403 */404.post-header {405  margin-bottom: 30px;406}407 408.post-title {409  font-size: 42px;410  letter-spacing: -1px;411  line-height: 1;412}413@media screen and (max-width: 650px) {414  .post-title {415    font-size: 36px;416  }417}418 419.post-content {420  margin-bottom: 30px;421}422.post-content h2 {423  font-size: 32px;424}425@media screen and (max-width: 650px) {426  .post-content h2 {427    font-size: 28px;428  }429}430.post-content h3 {431  font-size: 26px;432}433@media screen and (max-width: 650px) {434  .post-content h3 {435    font-size: 22px;436  }437}438.post-content h4 {439  font-size: 20px;440}441@media screen and (max-width: 650px) {442  .post-content h4 {443    font-size: 18px;444  }445}446 447/**448 * Syntax highlighting styles449 */450.highlight {451  background: #fff;452}453.highlighter-rouge .highlight {454  background: #eef;455}456.highlight .c {457  color: #998;458  font-style: italic;459}460.highlight .err {461  color: #a61717;462  background-color: #e3d2d2;463}464.highlight .k {465  font-weight: bold;466}467.highlight .o {468  font-weight: bold;469}470.highlight .cm {471  color: #998;472  font-style: italic;473}474.highlight .cp {475  color: #999;476  font-weight: bold;477}478.highlight .c1 {479  color: #998;480  font-style: italic;481}482.highlight .cs {483  color: #999;484  font-weight: bold;485  font-style: italic;486}487.highlight .gd {488  color: #000;489  background-color: #fdd;490}491.highlight .gd .x {492  color: #000;493  background-color: #faa;494}495.highlight .ge {496  font-style: italic;497}498.highlight .gr {499  color: #a00;500}501.highlight .gh {502  color: #999;503}504.highlight .gi {505  color: #000;506  background-color: #dfd;507}508.highlight .gi .x {509  color: #000;510  background-color: #afa;511}512.highlight .go {513  color: #888;514}515.highlight .gp {516  color: #555;517}518.highlight .gs {519  font-weight: bold;520}521.highlight .gu {522  color: #aaa;523}524.highlight .gt {525  color: #a00;526}527.highlight .kc {528  font-weight: bold;529}530.highlight .kd {531  font-weight: bold;532}533.highlight .kp {534  font-weight: bold;535}536.highlight .kr {537  font-weight: bold;538}539.highlight .kt {540  color: #458;541  font-weight: bold;542}543.highlight .m {544  color: #099;545}546.highlight .s {547  color: #d14;548}549.highlight .na {550  color: #008080;551}552.highlight .nb {553  color: #0086B3;554}555.highlight .nc {556  color: #458;557  font-weight: bold;558}559.highlight .no {560  color: #008080;561}562.highlight .ni {563  color: #800080;564}565.highlight .ne {566  color: #900;567  font-weight: bold;568}569.highlight .nf {570  color: #900;571  font-weight: bold;572}573.highlight .nn {574  color: #555;575}576.highlight .nt {577  color: #000080;578}579.highlight .nv {580  color: #008080;581}582.highlight .ow {583  font-weight: bold;584}585.highlight .w {586  color: #bbb;587}588.highlight .mf {589  color: #099;590}591.highlight .mh {592  color: #099;593}594.highlight .mi {595  color: #099;596}597.highlight .mo {598  color: #099;599}600.highlight .sb {601  color: #d14;602}603.highlight .sc {604  color: #d14;605}606.highlight .sd {607  color: #d14;608}609.highlight .s2 {610  color: #d14;611}612.highlight .se {613  color: #d14;614}615.highlight .sh {616  color: #d14;617}618.highlight .si {619  color: #d14;620}621.highlight .sx {622  color: #d14;623}624.highlight .sr {625  color: #009926;626}627.highlight .s1 {628  color: #d14;629}630.highlight .ss {631  color: #990073;632}633.highlight .bp {634  color: #999;635}636.highlight .vc {637  color: #008080;638}639.highlight .vg {640  color: #008080;641}642.highlight .vi {643  color: #008080;644}645.highlight .il {646  color: #099;647}648 649/*# sourceMappingURL=main.css.map */650 651 652.rrssb-buttons{box-sizing:border-box;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:12px;height:36px;margin:0;padding:0;width:100%}.rrssb-buttons:after{clear:both}.rrssb-buttons:after,.rrssb-buttons:before{content:' ';display:table}.rrssb-buttons li{box-sizing:border-box;float:left;height:100%;line-height:13px;list-style:none;margin:0;padding:0 2px}.rrssb-buttons li.rrssb-email a{background-color:#0a88ff}.rrssb-buttons li.rrssb-email a:hover{background-color:#006ed6}.rrssb-buttons li.rrssb-facebook a{background-color:#306199}.rrssb-buttons li.rrssb-facebook a:hover{background-color:#244872}.rrssb-buttons li.rrssb-tumblr a{background-color:#32506d}.rrssb-buttons li.rrssb-tumblr a:hover{background-color:#22364a}.rrssb-buttons li.rrssb-linkedin a{background-color:#007bb6}.rrssb-buttons li.rrssb-linkedin a:hover{background-color:#005983}.rrssb-buttons li.rrssb-twitter a{background-color:#26c4f1}.rrssb-buttons li.rrssb-twitter a:hover{background-color:#0eaad6}.rrssb-buttons li.rrssb-googleplus a{background-color:#e93f2e}.rrssb-buttons li.rrssb-googleplus a:hover{background-color:#ce2616}.rrssb-buttons li.rrssb-youtube a{background-color:#df1c31}.rrssb-buttons li.rrssb-youtube a:hover{background-color:#b21627}.rrssb-buttons li.rrssb-reddit a{background-color:#8bbbe3}.rrssb-buttons li.rrssb-reddit a:hover{background-color:#62a3d9}.rrssb-buttons li.rrssb-pinterest a{background-color:#b81621}.rrssb-buttons li.rrssb-pinterest a:hover{background-color:#8a1119}.rrssb-buttons li.rrssb-pocket a{background-color:#ed4054}.rrssb-buttons li.rrssb-pocket a:hover{background-color:#e4162d}.rrssb-buttons li.rrssb-github a{background-color:#444}.rrssb-buttons li.rrssb-github a:hover{background-color:#2b2b2b}.rrssb-buttons li.rrssb-instagram a{background-color:#125688}.rrssb-buttons li.rrssb-instagram a:hover{background-color:#0c3a5b}.rrssb-buttons li.rrssb-delicious a{background-color:#0b79e5}.rrssb-buttons li.rrssb-delicious a:hover{background-color:#095fb4}.rrssb-buttons li.rrssb-vk a{background-color:#4d71a9}.rrssb-buttons li.rrssb-vk a:hover{background-color:#3d5a86}.rrssb-buttons li.rrssb-hackernews a{background-color:#f60}.rrssb-buttons li.rrssb-hackernews a:hover{background-color:#cc5200}.rrssb-buttons li a{background-color:#ccc;border-radius:2px;box-sizing:border-box;display:block;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:700;height:100%;padding:11px 7px 12px 27px;position:relative;text-align:center;text-decoration:none;text-transform:uppercase;-webkit-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out;width:100%}.rrssb-buttons li a .rrssb-icon{display:block;left:10px;padding-top:9px;position:absolute;top:0;width:10%}.rrssb-buttons li a .rrssb-icon svg{height:17px;width:17px}.rrssb-buttons li a .rrssb-icon svg path{fill:#fff}.rrssb-buttons li a .rrssb-text{color:#fff}.rrssb-buttons li a:active{box-shadow:inset 1px 3px 15px 0 rgba(22,0,0,.25)}.rrssb-buttons li.small a{padding:0}.rrssb-buttons li.small a .rrssb-icon{left:auto;margin:0 auto;overflow:hidden;position:relative;top:auto;width:100%}.rrssb-buttons li.small a .rrssb-text{visibility:hidden}.rrssb-buttons.large-format,.rrssb-buttons.large-format li{height:auto}.rrssb-buttons.large-format li a{-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:.2em;padding:8.5% 0 8.5% 12%}.rrssb-buttons.large-format li a .rrssb-icon{height:100%;left:7%;padding-top:0;width:12%}.rrssb-buttons.large-format li a .rrssb-icon svg{height:100%;position:absolute;top:0;width:100%}.rrssb-buttons.large-format li a .rrssb-text{-webkit-backface-visibility:hidden;backface-visibility:hidden}.rrssb-buttons.small-format{padding-top:5px}.rrssb-buttons.small-format li{height:80%;padding:0 1px}.rrssb-buttons.small-format li a .rrssb-icon{height:100%;padding-top:0}.rrssb-buttons.small-format li a .rrssb-icon svg{height:48%;position:relative;top:6px;width:80%}.rrssb-buttons.tiny-format{height:22px;position:relative}.rrssb-buttons.tiny-format li{padding-right:7px}.rrssb-buttons.tiny-format li a{background-color:transparent;padding:0}.rrssb-buttons.tiny-format li a .rrssb-icon svg{height:70%;width:100%}.rrssb-buttons.tiny-format li a:active,.rrssb-buttons.tiny-format li a:hover{background-color:transparent}.rrssb-buttons.tiny-format li.rrssb-email a .rrssb-icon svg path{fill:#0a88ff}.rrssb-buttons.tiny-format li.rrssb-email a .rrssb-icon:hover .rrssb-icon svg path{fill:#0054a3}.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon svg path{fill:#306199}.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon:hover .rrssb-icon svg path{fill:#18304b}.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon svg path{fill:#32506d}.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon:hover .rrssb-icon svg path{fill:#121d27}.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon svg path{fill:#007bb6}.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon:hover .rrssb-icon svg path{fill:#003650}.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon svg path{fill:#26c4f1}.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon:hover .rrssb-icon svg path{fill:#0b84a6}.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon svg path{fill:#e93f2e}.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon:hover .rrssb-icon svg path{fill:#a01e11}.rrssb-buttons.tiny-format li.rrssb-youtube a .rrssb-icon svg path{fill:#df1c31}.rrssb-buttons.tiny-format li.rrssb-youtube a .rrssb-icon:hover .rrssb-icon svg path{fill:#84111d}.rrssb-buttons.tiny-format li.rrssb-reddit a .rrssb-icon svg path{fill:#8bbbe3}.rrssb-buttons.tiny-format li.rrssb-reddit a .rrssb-icon:hover .rrssb-icon svg path{fill:#398bcf}.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon svg path{fill:#b81621}.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon:hover .rrssb-icon svg path{fill:#5d0b11}.rrssb-buttons.tiny-format li.rrssb-pocket a .rrssb-icon svg path{fill:#ed4054}.rrssb-buttons.tiny-format li.rrssb-pocket a .rrssb-icon:hover .rrssb-icon svg path{fill:#b61124}.rrssb-buttons.tiny-format li.rrssb-github a .rrssb-icon svg path{fill:#444}.rrssb-buttons.tiny-format li.rrssb-github a .rrssb-icon:hover .rrssb-icon svg path{fill:#111}.rrssb-buttons.tiny-format li.rrssb-instagram a .rrssb-icon svg path{fill:#125688}.rrssb-buttons.tiny-format li.rrssb-instagram a .rrssb-icon:hover .rrssb-icon svg path{fill:#061d2e}.rrssb-buttons.tiny-format li.rrssb-delicious a .rrssb-icon svg path{fill:#0b79e5}.rrssb-buttons.tiny-format li.rrssb-delicious a .rrssb-icon:hover .rrssb-icon svg path{fill:#064684}.rrssb-buttons.tiny-format li.rrssb-vk a .rrssb-icon svg path{fill:#4d71a9}.rrssb-buttons.tiny-format li.rrssb-vk a .rrssb-icon:hover .rrssb-icon svg path{fill:#2d4263}.rrssb-buttons.tiny-format li.rrssb-hackernews a .rrssb-icon svg path{fill:#f60}.rrssb-buttons.tiny-format li.rrssb-hackernews a .rrssb-icon:hover .rrssb-icon svg path{fill:#993d00}653 654 655@font-face {656  font-family: 'Merriweather';657  font-style: normal;658  font-weight: 400;659  src: url(https://fonts.gstatic.com/s/merriweather/v30/u-440qyriQwlOrhSvowK_l5-fCZJ.ttf) format('truetype');660}661@font-face {662  font-family: 'PT Sans';663  font-style: normal;664  font-weight: 400;665  src: url(https://fonts.gstatic.com/s/ptsans/v17/jizaRExUiTo99u79D0KEwA.ttf) format('truetype');666}667@font-face {668  font-family: 'PT Serif';669  font-style: normal;670  font-weight: 400;671  src: url(https://fonts.gstatic.com/s/ptserif/v18/EJRVQgYoZZY2vCFuvAFWzro.ttf) format('truetype');672}673  </style>674  <meta charset="utf-8">675  <meta content="IE=edge" http-equiv="X-UA-Compatible">676  <meta content="width=device-width, initial-scale=1" name="viewport">677  <!-- Begin Jekyll SEO tag v2.8.0 -->678  <title>679   A Reaction to the Gospel: &ldquo;Did God Tell You That?!?&rdquo; | mark4.co680  </title>681  <meta content="Jekyll v4.3.2" name="generator">682  <meta content="A Reaction to the Gospel: &ldquo;Did God Tell You That?!?&rdquo;" property="og:title">683  <meta content="Living Missions" name="author">684  <meta content="en_US" property="og:locale">685  <meta content="This Ramadan I really enjoyed getting out and talking to the heaps of very friendly people that were out breaking their fast and lounging around late into the night. To give you a feel of what talking to these people is like, here&rsquo;s something that happened last week. While walking through the busy park with my friend, I felt pulled towards a group of guys sitting in the midst of a cluster of people and benches. To be truthful, I was pretty doubtful anything good would happen because one of them looked exactly like the kind of guy who would not be very interested or friendly at all. When we sat down beside this group though, another lady in front of us started immediately filling our hands with some snacks her and her son were eating. Yes, people can be that friendly. We had a nice chat with her and her son, and also exchanged a few questions and pleasantries with the group I originally felt led to. After a little talk about language, the guy I was most doubtful about got up, joyfully plunked himself right in front of me and said in a super-friendly manner, &ldquo;I&rsquo;m really interested in you. What&rsquo;s your religion??&rdquo; I started to tell him and his 3 friends about what I believed about God and what Jesus did for me. They leaned in and eagerly listened as I went on and on about Jesus&rsquo; love and sacrifice on the cross. It was wonderful to get to lay it forth so clearly for such open ears. They asked about the Bible being changed and untrustable. I explained that just because priests in the middle ages sold indulgances and organized crusades and did all sorts of horrible stuff, it doesn&rsquo;t mean that they were able to distort the Bible&hellip; it just means that they weren&rsquo;t following it. They were silenced and very impressed by this. Two other ladies were curiously eavesdropping and one jumped in and wanted to tell us all how sure they were that the Bible couldn&rsquo;t be trusted, then went away. I continued to talk with the guys, and one particularly religious one began to wax elloquent about how wonderful his fellowship that he belonged to was and all the great people and things they had in their history. I looked at him straight in the eye and said, &ldquo;That&rsquo;s all great, but what about you? Have you been able to make peace with God?&rdquo; &ldquo;No, of course not&rdquo; he responded, a little flustered, and explained how they&rsquo;ve been taught that Satan will always be assaulting them condemnation and doubt until the end of their lives. I gladly looked at all of them and said &ldquo;See, that&rsquo;s the thing. I don&rsquo;t have any doubt or condemnation. It&rsquo;s all gone because Jesus died to take it away!&rdquo; The guy sitting across from me was a little perplexed, &ldquo;Who says that all your sins are forgiven and you&rsquo;re on good terms with God. Is there anyone who can tell you that?&rdquo; &ldquo;God tells me.&rdquo; I said confidently. &ldquo;What?!&rdquo; he responded in shock, &ldquo;You mean God&rsquo;s actually communicated with you??!!&rdquo; The conversation ended around that point, and they went off probably thinking I was a little nuts. But if they do grow hungry for that salvation and peace that I talked about, they now have something freshly planted into their brains that they can grab on to. :-) Years ago I couldn&rsquo;t even imagine having conversations like this with random guys in crowded parks. God gladly and graciously teaches his people to reveal the depths of his mercy and grace that he&rsquo;s stored up in the simple story of Christ. He calls his servants forward into new places, languages, and cultures and turns the timid into powerful preachers. Trust him." name="description">686  <meta content="This Ramadan I really enjoyed getting out and talking to the heaps of very friendly people that were out breaking their fast and lounging around late into the night. To give you a feel of what talking to these people is like, here&rsquo;s something that happened last week. While walking through the busy park with my friend, I felt pulled towards a group of guys sitting in the midst of a cluster of people and benches. To be truthful, I was pretty doubtful anything good would happen because one of them looked exactly like the kind of guy who would not be very interested or friendly at all. When we sat down beside this group though, another lady in front of us started immediately filling our hands with some snacks her and her son were eating. Yes, people can be that friendly. We had a nice chat with her and her son, and also exchanged a few questions and pleasantries with the group I originally felt led to. After a little talk about language, the guy I was most doubtful about got up, joyfully plunked himself right in front of me and said in a super-friendly manner, &ldquo;I&rsquo;m really interested in you. What&rsquo;s your religion??&rdquo; I started to tell him and his 3 friends about what I believed about God and what Jesus did for me. They leaned in and eagerly listened as I went on and on about Jesus&rsquo; love and sacrifice on the cross. It was wonderful to get to lay it forth so clearly for such open ears. They asked about the Bible being changed and untrustable. I explained that just because priests in the middle ages sold indulgances and organized crusades and did all sorts of horrible stuff, it doesn&rsquo;t mean that they were able to distort the Bible&hellip; it just means that they weren&rsquo;t following it. They were silenced and very impressed by this. Two other ladies were curiously eavesdropping and one jumped in and wanted to tell us all how sure they were that the Bible couldn&rsquo;t be trusted, then went away. I continued to talk with the guys, and one particularly religious one began to wax elloquent about how wonderful his fellowship that he belonged to was and all the great people and things they had in their history. I looked at him straight in the eye and said, &ldquo;That&rsquo;s all great, but what about you? Have you been able to make peace with God?&rdquo; &ldquo;No, of course not&rdquo; he responded, a little flustered, and explained how they&rsquo;ve been taught that Satan will always be assaulting them condemnation and doubt until the end of their lives. I gladly looked at all of them and said &ldquo;See, that&rsquo;s the thing. I don&rsquo;t have any doubt or condemnation. It&rsquo;s all gone because Jesus died to take it away!&rdquo; The guy sitting across from me was a little perplexed, &ldquo;Who says that all your sins are forgiven and you&rsquo;re on good terms with God. Is there anyone who can tell you that?&rdquo; &ldquo;God tells me.&rdquo; I said confidently. &ldquo;What?!&rdquo; he responded in shock, &ldquo;You mean God&rsquo;s actually communicated with you??!!&rdquo; The conversation ended around that point, and they went off probably thinking I was a little nuts. But if they do grow hungry for that salvation and peace that I talked about, they now have something freshly planted into their brains that they can grab on to. :-) Years ago I couldn&rsquo;t even imagine having conversations like this with random guys in crowded parks. God gladly and graciously teaches his people to reveal the depths of his mercy and grace that he&rsquo;s stored up in the simple story of Christ. He calls his servants forward into new places, languages, and cultures and turns the timid into powerful preachers. Trust him." property="og:description">687  <meta content="" property="og:url">688  <meta content="mark4.co" property="og:site_name">689  <meta content="article" property="og:type">690  <meta content="2014-07-31T00:00:00+00:00" property="article:published_time">691  <meta content="summary" name="twitter:card">692  <meta content="A Reaction to the Gospel: &ldquo;Did God Tell You That?!?&rdquo;" property="twitter:title">693  <meta content="@mark4co" name="twitter:site">694  <meta content="@mark4co" name="twitter:creator">695  <!-- End Jekyll SEO tag -->696  <meta content="AymqwRC7u88Y4JPvfIF2F37QKylC04248hLCdJAsh8xgOfe/dVJPV3XS3wLFca1ZMVOtnBfVjaCMTVudWM//5g4AAAB7eyJvcmlnaW4iOiJodHRwczovL3d3dy5nb29nbGV0YWdtYW5hZ2VyLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjk1MTY3OTk5LCJpc1RoaXJkUGFydHkiOnRydWV9" http-equiv="origin-trial">697 </head>698 <body>699  <header class="site-header">700   <div class="wrapper">701    <a class="site-title">702     mark4.co703    </a>704    <span class="site-title">705     &nbsp;/&nbsp;706    </span>707    <a class="site-title">708     articles709    </a>710    <nav class="site-nav">711     <a class="menu-icon">712     </a>713     <div class="trigger">714      <a class="page-link">715       Topics716      </a>717      <a class="page-link">718       Blog719      </a>720      <a class="page-link">721       FAQ722      </a>723     </div>724    </nav>725   </div>726  </header>727  <div class="page-content">728   <div class="wrapper">729    <article class="post" itemscope itemtype="">730     <header class="post-header">731      <h1 class="post-title" itemprop="name headline">732       A Reaction to the Gospel: "Did God Tell You That?!?"733      </h1>734      <p class="post-meta">735       <time datetime="2014-07-31T00:00:00+00:00" itemprop="datePublished">736        Jul 31, 2014737       </time>738      </p>739     </header>740     <div class="post-content" itemprop="articleBody">741      <p>742       This Ramadan I really enjoyed getting out and talking to the heaps of very friendly people that were out breaking their fast and lounging around late into the night. To give you a feel of what talking to these people is like, here&rsquo;s something that happened last week.743      </p>744      <p>745       While walking through the busy park with my friend, I felt pulled towards a group of guys sitting in the midst of a cluster of people and benches. To be truthful, I was pretty doubtful anything good would happen because one of them looked exactly like the kind of guy who would not be very interested or friendly at all.746      </p>747      <p>748       I started to tell him and his 3 friends about what I believed about God and what Jesus did for me. They leaned in and eagerly listened as I went on and on about Jesus&rsquo; love and sacrifice on the cross.749      </p>750      <p>751       Years ago I couldn&rsquo;t even imagine having conversations like this with random guys in crowded parks. God gladly and graciously teaches his people to reveal the depths of his mercy and grace that he&rsquo;s stored up in the simple story of Christ.752      </p>753     </div>754    </article>755    <p class="sharing-text">756     Share this on...757    </p>758    <div style="margin-bottom: 3em;">759     <ul class="rrssb-buttons rrssb-1 large-format" style="font-size: 17.4167px;">760      <li class="rrssb-facebook" data-initwidth="33.333333333333336" data-size="72" style="width: 33.3333%;">761       <!--  Replace with your URL. For best results, make sure you page has the proper FB Open Graph tags in header:762            https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/ -->763       <a class="popup">764        <span class="rrssb-icon">765        </span>766        <span class="rrssb-text">767         facebook768        </span>769       </a>770      </li>771      <li class="rrssb-twitter" data-initwidth="33.333333333333336" data-size="60" style="width: 33.3333%;">772       <!-- Replace href with your Meta and URL information  -->773       <a class="popup">774        <span class="rrssb-icon">775        </span>776        <span class="rrssb-text">777         twitter778        </span>779       </a>780      </li>781      <li class="rrssb-linkedin" data-initwidth="33.333333333333336" data-size="64" style="width: 33.3333%;">782       <!-- Replace href with your meta and URL information -->783       <a class="popup">784        <span class="rrssb-icon">785        </span>786        <span class="rrssb-text">787         linkedin788        </span>789       </a>790      </li>791     </ul>792    </div>793    <div id="disqus_recommendations" style="margin-bottom: 12px;">794    </div>795    <div id="disqus_thread">796    </div>797    <noscript>798     Please enable JavaScript to view the799     <a rel="nofollow">800      comments powered by Disqus.801     </a>802    </noscript>803    <h2>804     Related Posts805    </h2>806    <h3>807     <a>808      When Did We Lose Evangelism in Missions?809      <small>810       19 Nov 2019811      </small>812     </a>813    </h3>814    <h3>815     <a>816      Every Time You Go Out...817      <small>818       28 Aug 2019819      </small>820     </a>821    </h3>822    <h3>823     <a>824      Reaching the Unreached is Like Playing Hockey825      <small>826       05 Jul 2019827      </small>828     </a>829    </h3>830    <h2>831     <a>832      Other articles...833     </a>834    </h2>835   </div>836  </div>837 </body>838</html>839