card with text overlay and text

PHOTO EMBED

Sun Apr 17 2022 03:28:04 GMT+0000 (UTC)

Saved by @realsantosm #css

<div class="card card--overlay">
    <img src="https://picsum.photos/id/1/300" alt="Man sitting in front of computer" />
    <div class="card--info">
        <p class="card--title">Web Development</p>
        <p class="card--author">by Hiteshp</p>
    </div>
    <p class="card--description">
        Learn web development in easy and simple way by building small
        projects
    </p>

    <div class="card--footer">
        <div class="card--btn--action">
            <a href="#" class="link link--information">Learn</a>
            <a href="#" class="link link--secondary">Bookmark</a>
        </div>
        <div class="card--btn--icons">
            <button class="btn icon--btn">
                <i class="far fa-heart" aria-hidden="true"></i>
            </button>
            <button class="btn icon--btn">
                <i class="fas fa-share-alt" aria-hidden="true"></i>
            </button>
            <button class="btn icon--btn">
                <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
            </button>
        </div>
    </div>
</div>

<div class="card card--text">
    <img src="https://picsum.photos/id/1/300" alt="Man sitting in front of computer" />
    <div class="card--info">
        <p class="card--title">Web Development</p>
        <p class="card--author">by Hitesh</p>
    </div>
    <p class="card--description">
        Learn web development in easy and simple way by building small
        projects
    </p>

    <div class="card--footer">
        <div class="card--btn--action">
            <a href="#" class="link link--information">Learn</a>
            <a href="#" class="link link--secondary">Bookmark</a>
        </div>
        <div class="card--btn--icons">
            <button class="btn icon--btn">
                <i class="far fa-heart" aria-hidden="true"></i>
            </button>
            <button class="btn icon--btn">
                <i class="fas fa-share-alt" aria-hidden="true"></i>
            </button>
            <button class="btn icon--btn">
                <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
            </button>
        </div>
    </div>
</div>
content_copyCOPY