Logo

Snippets that build the web.

Snippet Information

Title: NYT Style Briefing Section

Description: Briefing/Breaking news area inspired by the NYT Briefing Section

Tags: html, css, js, featured, briefing, nyt

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>NYT Briefing Style</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <main>
        <section id="briefings">
            <article data-url="#">
                <img src="bg1.jpeg" alt="Article Image" />
                <section>
                    <h2>Travel To Somewhere</h2>
                    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua.</h3>
                </section>
            </article>
            <article data-url="#">
                <img src="bg2.jpeg" alt="Article Image" />
                <section>
                    <h2>Travel To Somewhere</h2>
                    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua.</h3>
                </section>
            </article>
            <article data-url="#">
                <img src="bg3.jpg" alt="Article Image" />
                <section>
                    <h2>Travel To Somewhere</h2>
                    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua.</h3>
                </section>
            </article>
        </section>
    </main>
    <script src="main.js"></script>
</body>

</html>

View CSS expand_more

Copy Code
*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}
#briefings {
    font-family: Arial, Helvetica, sans-serif;
    width:80%;
    margin:5px auto 20px;
    padding:5px 0;
    border-top:1px solid #121212;
    border-bottom:1px solid #121212;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    height:66px;
    column-gap: 15px;
    position: relative;
}

#briefings::after{
    position:absolute;
    content: ' ';
    display:block;
    height:2px;
    border-bottom:1px solid #121212;
    width:100%;
    grid-column: 1/4;
    top:calc(100% + 2px);
    left:0;
}

#briefings article {
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    border-right:1px solid #ccc;
    color:#121212;
}

#briefings article:hover{
    cursor: pointer;
}

#briefings article h2{
    font-size:11pt;
    font-weight:700;
    padding-bottom:3px;
}
#briefings article h3{
    font-size:9pt;
    font-weight:500;
    color:#555;
}

#briefings article:last-of-type{
    border-right:unset;
}

#briefings article img {
    height:50px;
    margin-right:10px
}

@media screen and (max-width:1600px) {
    #briefings{
        width:90%;
    }
}
@media screen and (max-width:1430px) {
    #briefings{
        width:98%;
        height:70px;
    }
}
@media screen and (max-width:1000px) {
    #briefings{
        height:90px;
    }
}

@media screen and (max-width:820px) {
    #briefings{
        height:120px;
    }
}
@media screen and (max-width:750px) {
    #briefings{
        height:200px;
    }
}

View JS expand_more

Copy Code
(() => {
    const article = document.querySelectorAll('article')

    article.forEach(item => {
        item.addEventListener('click', e => {
            window.location = item.getAttribute('data-url');
        })
    })
})()