Pirate Web | Snippets that build the web.

Snippets that build the web.

Snippet Information

Title: Featured Post Section

Description: A featured post layout with one main featured post and two secondary posts.

Tags: html, css, js, featured post

Author: danc0

View Demo

Snippet Body

View HTML expand_more

Copy Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Featured Post - 1</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <main>
        <section id="featured-stories">
            <article class="main-featured"
                data-bg="https://images.unsplash.com/photo-1596436831831-87dd84a69101?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80">
                <h2>Travel To Somewhere</h2>
                <h3>Discover the sights and sounds of somewhere today.</h3>
                <a href="#" title="Learn More About Somewhere">Continue Reading</a>
            </article>
            <article class="sub-featured-1 secondary"
                data-bg="https://images.unsplash.com/photo-1574970324184-746b18c8bd49?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80">
                <h2>Travel To Somewhere</h2>
                <h3>Discover the sights and sounds of somewhere today.</h3>
                <a href="#" title="Learn More About Somewhere">Continue Reading</a>
            </article>
            <article class="sub-featured-2 secondary"
                data-bg="https://images.unsplash.com/photo-1618679343069-2c148023c592?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80">
                <h2>Travel To Somewhere</h2>
                <h3>Discover the sights and sounds of somewhere today.</h3>
                <a href="#" title="Learn More About Somewhere">Continue Reading</a>
            </article>
        </section>
    </main>
    <script src="main.js"></script>
</body>

</html>

View CSS expand_more

Copy Code

* {
    padding:0;
    margin:0;
    box-sizing: border-box;
}

#featured-stories{
    height:50vh;
    width:80%;
    margin:20px auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "featured-1 featured-1 featured-2"
    "featured-1 featured-1 featured-3";
    column-gap: 10px;
    row-gap: 10px;
}

#featured-stories article{
    background-size:cover;
    background-position:top;
    background-color:#3e4144;
    background-blend-mode: soft-light;
    padding:30px;
    font-family: Arial, Helvetica, sans-serif;
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
}

#featured-stories article.secondary {
    padding:20px;
}

.main-featured {
    grid-area: featured-1;
}

.sub-featured-1{
    grid-area:featured-2
}
.sub-featured-2{
    grid-area:featured-3
}

#featured-stories article h2{
    font-family: Arial, Helvetica, sans-serif;
    font-size:48pt;
    color:#8de781;
    margin-bottom:5px;
}

#featured-stories article.secondary h2 {
    font-size:20pt;
}

#featured-stories article h3 {
    font-weight:700;
    color:#fff;
    font-size:16pt;
}

#featured-stories article.secondary h3 {
    font-size:14pt;
}

#featured-stories article a{
    padding:20px;
    width:auto;
    margin:20px 0;
    border:3px solid #fff;
    background:transparent;
    color:#fff;
    font-size:14pt;
    font-weight:700;
    text-decoration: none;
    transition: all .3s ease-in-out;
}

#featured-stories article.secondary a {
    font-size:10pt;
}

#featured-stories article a:hover{
    border:3px solid #8de781;
    color:#8de781;
}

@media screen and (max-width:1000px) {
    #featured-stories{
        height:50vh;
        width:80%;
        margin:20px auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas:
        "featured-1 featured-1"
        "featured-2 featured-3";
        column-gap: 10px;
        row-gap: 10px;
    }
}
@media screen and (max-width:700px) {
    #featured-stories{
        width:90%;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
        "featured-1"
        "featured-2" 
        "featured-3";
    }
}

View JS expand_more

Copy Code

(() => {
    const articles = document.querySelectorAll('article');

    articles.forEach(item => {
        item.style.backgroundImage = `url(${item.getAttribute('data-bg')})`
    })
})()