The structure is not followed

[jgui1129]

https://github.com/assasin-dev/UISlides/blob/a10526129579b8fb22ed81b7451e0779b05a31e7/index.html#L20

This element is a blog post. It should have this structure.
piyush608/portfolio#6

[jgui1129]

These are one of the code i made to generate the blog post design.
It has a structure and by changing a class, it will change the design. That how it should work.

By changing the utd-post.post-portfolio-blog inti utd-post.blogpost-list it will completely change the design w/out changing the structure at all. The HTML elements should have the same structure.

<div class="section-container">
      <div class="container">
          <div class="utd-post post-portfolio-blog">

              <div class="utd-post--item">
                  <div class="utd-post--inner">
                      <div class="utd-post--media">
                          <div class="utd-post--image">
                              <a href="#" class="utd-post--image-link">
                                  <img class="utd-post--image-data"
                                      src="https://uptodatewebdesign.s3.eu-west-3.amazonaws.com/uploads/photos-1592379048015.jpeg"
                                      alt="">
                              </a>
                          </div>
                      </div>
                      <div class="utd-post--meta">
                          <div class="utd-post--date">
                              <p class="utd-post--date-data">woensdag, 3 januari 2020
                              </p>
                          </div>
                          <div class="utd-post--title">
                              <a href="#" class="utd-post--title-link">
                                  <h3 class="utd-post--title-data">Sed ut perspiciatis unde omnis iste natus</h3>
                              </a>
                          </div>
                          <div class="utd-post--labels">
                              <ul class="utd-post--labels-ul">
                                  <li class="utd-post--labels-li"><a href="#">Label 1</a></li>
                                  <li class="utd-post--labels-li"><a href="#">Label 2</a></li>
                              </ul>
                          </div>
                          <div class="utd-post--description">
                              <p class="utd-post--description-data">Sed ut perspiciatis unde omnis iste natus error
                                  sit
                                  voluptatem
                                  accusantium doloremque laudantium,
                              </p>
                          </div>
                          <div class="utd-post--read-more">
                              <a class="utd-post--read-more-data utd-btn w-250 btn-primary" href="#">Read More</a>
                          </div>
                      </div>

                  </div>
                  <div class="utd-post--outer"></div>
              </div>

              <div class="utd-post--item">
                  <div class="utd-post--inner">
                      <div class="utd-post--media">
                          <div class="utd-post--image">
                              <a href="#" class="utd-post--image-link">
                                  <img class="utd-post--image-data"
                                      src="https://uptodatewebdesign.s3.eu-west-3.amazonaws.com/uploads/photos-1592379048015.jpeg"
                                      alt="">
                              </a>
                          </div>
                      </div>
                      <div class="utd-post--meta">
                          <div class="utd-post--date">
                              <p class="utd-post--date-data">woensdag, 3 januari 2020
                              </p>
                          </div>
                          <div class="utd-post--title">
                              <a href="#" class="utd-post--title-link">
                                  <h3 class="utd-post--title-data">Sed ut perspiciatis unde omnis iste natus</h3>
                              </a>
                          </div>
                          <div class="utd-post--labels">
                              <ul class="utd-post--labels-ul">
                                  <li class="utd-post--labels-li"><a href="#">Label 1</a></li>
                                  <li class="utd-post--labels-li"><a href="#">Label 2</a></li>
                              </ul>
                          </div>
                          <div class="utd-post--description">
                              <p class="utd-post--description-data">Sed ut perspiciatis unde omnis iste natus error
                                  sit
                                  voluptatem
                                  accusantium doloremque laudantium,
                              </p>
                          </div>
                          <div class="utd-post--read-more">
                              <a class="utd-post--read-more-data utd-btn w-250 btn-primary" href="#">Read More</a>
                          </div>
                      </div>

                  </div>
                  <div class="utd-post--outer"></div>
              </div>

              <div class="utd-post--item">
                  <div class="utd-post--inner">
                      <div class="utd-post--media">
                          <div class="utd-post--image">
                              <a href="#" class="utd-post--image-link">
                                  <img class="utd-post--image-data"
                                      src="https://uptodatewebdesign.s3.eu-west-3.amazonaws.com/uploads/photos-1592379048015.jpeg"
                                      alt="">
                              </a>
                          </div>
                      </div>
                      <div class="utd-post--meta">
                          <div class="utd-post--date">
                              <p class="utd-post--date-data">woensdag, 3 januari 2020
                              </p>
                          </div>
                          <div class="utd-post--title">
                              <a href="#" class="utd-post--title-link">
                                  <h3 class="utd-post--title-data">Sed ut perspiciatis unde omnis iste natus</h3>
                              </a>
                          </div>
                          <div class="utd-post--labels">
                              <ul class="utd-post--labels-ul">
                                  <li class="utd-post--labels-li"><a href="#">Label 1</a></li>
                                  <li class="utd-post--labels-li"><a href="#">Label 2</a></li>
                              </ul>
                          </div>
                          <div class="utd-post--description">
                              <p class="utd-post--description-data">Sed ut perspiciatis unde omnis iste natus error
                                  sit
                                  voluptatem
                                  accusantium doloremque laudantium,
                              </p>
                          </div>
                          <div class="utd-post--read-more">
                              <a class="utd-post--read-more-data utd-btn w-250 btn-primary" href="#">Read More</a>
                          </div>
                      </div>

                  </div>
                  <div class="utd-post--outer"></div>
              </div>

              <div class="utd-post--item">
                  <div class="utd-post--inner">
                      <div class="utd-post--media">
                          <div class="utd-post--image">
                              <a href="#" class="utd-post--image-link">
                                  <img class="utd-post--image-data"
                                      src="https://uptodatewebdesign.s3.eu-west-3.amazonaws.com/uploads/photos-1592379048015.jpeg"
                                      alt="">
                              </a>
                          </div>
                      </div>
                      <div class="utd-post--meta">
                          <div class="utd-post--date">
                              <p class="utd-post--date-data">woensdag, 3 januari 2020
                              </p>
                          </div>
                          <div class="utd-post--title">
                              <a href="#" class="utd-post--title-link">
                                  <h3 class="utd-post--title-data">Sed ut perspiciatis unde omnis iste natus</h3>
                              </a>
                          </div>
                          <div class="utd-post--labels">
                              <ul class="utd-post--labels-ul">
                                  <li class="utd-post--labels-li"><a href="#">Label 1</a></li>
                                  <li class="utd-post--labels-li"><a href="#">Label 2</a></li>
                              </ul>
                          </div>
                          <div class="utd-post--description">
                              <p class="utd-post--description-data">Sed ut perspiciatis unde omnis iste natus error
                                  sit
                                  voluptatem
                                  accusantium doloremque laudantium,
                              </p>
                          </div>
                          <div class="utd-post--read-more">
                              <a class="utd-post--read-more-data utd-btn w-250 btn-primary" href="#">Read More</a>
                          </div>
                      </div>

                  </div>
                  <div class="utd-post--outer"></div>
              </div>
          </div>
      </div>
  </div>

[jgui1129]

Take a look at this part

 <div class="utd-post--item">
                  <div class="utd-post--inner">
                      <div class="utd-post--media">
                          <div class="utd-post--image">
                              <a href="#" class="utd-post--image-link">
                                  <img class="utd-post--image-data"
                                      src="https://uptodatewebdesign.s3.eu-west-3.amazonaws.com/uploads/photos-1592379048015.jpeg"
                                      alt="">
                              </a>
                          </div>
                      </div>
                      <div class="utd-post--meta">
                          <div class="utd-post--date">
                              <p class="utd-post--date-data">woensdag, 3 januari 2020
                              </p>
                          </div>
                          <div class="utd-post--title">
                              <a href="#" class="utd-post--title-link">
                                  <h3 class="utd-post--title-data">Sed ut perspiciatis unde omnis iste natus</h3>
                              </a>
                          </div>
                          <div class="utd-post--labels">
                              <ul class="utd-post--labels-ul">
                                  <li class="utd-post--labels-li"><a href="#">Label 1</a></li>
                                  <li class="utd-post--labels-li"><a href="#">Label 2</a></li>
                              </ul>
                          </div>
                          <div class="utd-post--description">
                              <p class="utd-post--description-data">Sed ut perspiciatis unde omnis iste natus error
                                  sit
                                  voluptatem
                                  accusantium doloremque laudantium,
                              </p>
                          </div>
                          <div class="utd-post--read-more">
                              <a class="utd-post--read-more-data utd-btn w-250 btn-primary" href="#">Read More</a>
                          </div>
                      </div>

                  </div>
                  <div class="utd-post--outer"></div>
              </div>

This contains the post element, and is looped by the javascript to contain the blog post item that's why the structure has to be followed.

[jgui1129]

And the label/title/button always has to be wrapped w/ a link.

[jgui1129]

The element is like this, take a look.
https://dipsss-belgium.blogspot.com/p/klantenverhalen.html

[jgui1129]

You can see there also w/c one is clickable or not. It's like a blog post on every article, the image is clickable, the title, label, button to read more are all clickable.

[jgui1129]

Look at the structure :-) That's what you are working now, slides 50