YES!!
- looka great!
- class names easy to understand
- pretty close to the figma mock-up. :) 
- great job with display: flex
- CSS formatting is consistent

Some suggestions:

HTML:
- add title
- missing closed paragraph tag
- darkblue-text class not needed (place in body's style rule)
- use alt properties with description values for SEO, screen readers,
and slow internet
- indent children (will make it easier to understand flexbox)
- use semantic html (header, main, section, footer):
 - https://www.freecodecamp.org/news/semantic-html5-elements
    - it is much easier to read
    - it has greater accessibility. Search engines and assistive technologies are also able to better understand the context and content of your website, meaning a better experience for your users
    - semantic elements also lead to more consistent code
 
 CSS:
- place in body:
    color: #1D3557;
refactor:
    - .hero-title and .hero-subtitle classes
    .hero-title,
    .hero-subtitle {
        color: #ffffff;
        padding: 5px 10px;
        border-radius: 5px;
    }
    
.hero class - image not showing properly - need to add some styles
    
.activity class - remove display: flex

great website to understand flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

since you have these body rules:
    - text-align: center;
        - no need for justify-content: center for .activities-list class rule
no need to set display flex on .activity class
    - its children have default of flex-direction: row
    
add a box-shadow: 5px 5px 8px #888888; to .activity-img and .guide-img

remove these styles - not needed because of text-align: center; in body rule
.guide-card {
    justify-content: space-around;
    text-align: center;
}
but fix vertical alignment by adding:
align-items: center;