svelte website example

<!--src/Components/About/About.svelte-->

<script>
  export let aboutData = {};
  const { HEADING, TITLE, IMAGE_URL, WHY_CHOOSE_US_LIST } = aboutData;
</script>
<!------------------------------------------->
<!----------------MARKUP----------------------->
<!------------------------------------------->
<section id="about-us" class="section grey-bgcolor">
  <div class="container">
    <h2 class="title text-center">{HEADING}</h2>
    <div class="row section-body">
      <div class="col-md-6">
        <h3 class="about-title">{TITLE}</h3>
        <ul>
          {#each WHY_CHOOSE_US_LIST as list}
            <li>{list}</li>
          {/each}
        </ul>
      </div>
      <div class="col-md-6">
        <img src={IMAGE_URL} alt="" class="img-fluid" />
      </div>
    </div>
  </div>
</section>

<!------------------------------------------->
<!----------------STYLE----------------------->
<!------------------------------------------->
<style>
  .about-title {
    margin-top: 8%;
    margin-bottom: 20px;
  }

  section ul li {
    margin: 10px 0;
  }

  section ul {
    padding-left: 23px;
  }
</style>

View another examples Add Own solution

4.5

Walljam7 105 points

                                    &lt;!--src/Components/Testimonials/Testimonials.svelte--&gt;

&lt;script&gt;
  export let testimonialData = {};
  const { HEADING, TESTIMONIAL_LIST } = testimonialData;
&lt;/script&gt;
&lt;!-------------------------------------------&gt;
&lt;!----------------MARKUP-----------------------&gt;
&lt;!-------------------------------------------&gt;

&lt;section id=&quot;testimonials&quot; class=&quot;section&quot;&gt;
  &lt;div class=&quot;container&quot;&gt;
    &lt;h2 class=&quot;title text-center&quot;&gt;{HEADING}&lt;/h2&gt;
    &lt;div class=&quot;row offset-1 section-body&quot;&gt;
      {#each TESTIMONIAL_LIST as list}
        &lt;div class=&quot;col-md-5 testimonial&quot;&gt;
          &lt;p&gt;{list.DESCRIPTION}&lt;/p&gt;
          &lt;img src={list.IMAGE_URL} alt=&quot;&quot; /&gt;
          &lt;p class=&quot;user-details&quot;&gt;
            &lt;b&gt;{list.NAME}&lt;/b&gt;
            &lt;br /&gt;
            {list.DESIGNATION}
          &lt;/p&gt;
        &lt;/div&gt;
      {/each}
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/section&gt;
&lt;!-------------------------------------------&gt;
&lt;!----------------STYLE-----------------------&gt;
&lt;!-------------------------------------------&gt;
&lt;style&gt;
  .testimonial {
    border-left: 4px solid #0072ff80;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .testimonial img {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    margin: 0 10px;
  }

  .user-details {
    display: inline-block;
    font-size: 12px;
  }
&lt;/style&gt;

Thank you! 3