First blog post different design

The CMS Questions
1

Hi!

I have a question. I try to build a website with Kirby 3.
I am currently making the blog page. So for the blog overview page I have the following design:

Screenshotkirby
Screenshotkirby1216×1001 12.9 KB

The first part shows only the latest blog. Here I want also show the cover image of the blog.

I made the second part already (blogpost without image). This is my code:

<section class="section events-list">
    <div class="container">
        <div class="row">
          <?php foreach ($notes = $page->children()->listed()->sortBy('date', 'desc') as $note): ?>
            <div class="col-lg-4 fade-from-top" data-delay="<?= ($note->indexOf($note)+1)*50 ?>">
                <div class="event">
                    <div class="event__date date"><time><?= $note->date()->toDate('d F Y') ?></time></div>
                    <h3 class="event__title"><a href="<?= $note->url() ?>"><?= $note->title() ?></a></h3>
                    <?php if($note->location()->isNotEmpty()) : ?>
                      <div class="event__loc location"><i class="icomoon-pin"></i> <?= $note->location() ?></div>
                    <?php endif ?>       
                </div>
            </div>
            <?php endforeach ?>
        </div>
    </div>
</section>

And this is the HTML for the first part:

<section class="event-big">
    <div class="container">
        <div class="event">
            <div class="row">
                <div class="col-lg-5 mb-5 mb-lg-0 fade-from-top">
                    <div class="event__date date">July 24, 2020</div>
                    <h3 class="event__title"><a href="/">Lorum ipsum delor: Art x Film</a></h3>
                    <div class="event__loc location"><i class="icomoon-pin"></i> Copenhagen, Denmark</div>
                    <div class="event__text">Lorum ipsum delor lorum epsu.</div>
                    <a class="event__more" href="/">Find out more</a>
                </div>
                <div class="col-lg-7">
                    <div class="slide-image-wrap">
                        <img src="/assets/images/event_1.jpg" class="slide-image-left event__thumb" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Can anybody tells me how I can achieve this?

Thanks!

2

Second part, start with offset of one

<?php
$firstNote = $page->children()->listed()->sortBy('date', 'desc')->first();
$notes = $page->children()->listed()->sortBy('date', 'desc')->offset(1);
?>

<!-- Html for first part, using the $firstNote variable -->


<?php foreach ($notes as $note): ?>
<!-- HTML for 2nd part -->
<?php endforeach ?>
3

You are awesome! :rocket: Finally fixed it.
Thank you!