You are currently viewing Article Details Page Using Html Css Javascript | Free Code

Article Details Page Using Html Css Javascript | Free Code

Article Details Page Using Html Css Javascript | Free Code

Welcome🎉 to Code With Random blog. This blog teaches us how we create a Article Details Page. We use HTML, Css, and javascript for the Article Details Page. I hope you enjoy our blog so let’s start with a basic HTML structure for the Article Details Page. 

HTML Code

Table of Contents

<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>Article Details Page</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <article>
        <header
            style="background-image: url('https://images.unsplash.com/photo-1520808663317-647b476a81b9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2073&q=80');">
            <div class="upper-header">
                <div class="mini-title">article</div>
                <div class="date-since">
                    <p><span class="date-value" id="sinceData"></span></p>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
                        <defs>
                            <style>
                                .d {
                                    width: 20px;
                                    fill: #fff;
                                    opacity: .5;
                                }
                            </style>
                        </defs>
                        <path class="d"
                            d="M15,0C6.75,0,0,6.75,0,15s6.75,15,15,15,15-6.75,15-15S23.25,0,15,0Zm7.35,16.65h-7.35c-.83,0-1.5-.67-1.5-1.5V7.8c0-.9,.6-1.5,1.5-1.5s1.5,.6,1.5,1.5v5.85h5.85c.9,0,1.5,.6,1.5,1.5s-.6,1.5-1.5,1.5Z" />
                    </svg>
                </div>
            </div>
            <div class="lower-header">
                <div class="tags-container">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                        <defs>
                            <style>
                                .d {
                                    width: 20px;
                                    fill: #fff;
                                    opacity: .75;
                                }
                            </style>
                        </defs>
                        <path class="d"
                            d="M19.22,9.66L10.77,1.21c-.74-.74-1.86-1.21-2.97-1.21H1.67C.75,0,0,.75,0,1.67V7.8c0,1.11,.46,2.23,1.3,2.97l8.45,8.46c1,1,2.62,1,3.62,0l5.94-5.95c.93-.93,.93-2.6-.09-3.62ZM6.96,6.35c-.59,.59-1.56,.59-2.15,0-.59-.59-.59-1.56,0-2.15,.59-.59,1.56-.59,2.15,0,.59,.59,.59,1.56,0,2.15Z" />
                    </svg>
                    <span>Nature</span><span>Animal</span>
                </div>
                <h1 class="title">Birds, Birds, Birds!</h1>
                <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet ut quam
                    sit amet vehicula.</p>
            </div>
        </header>
        <section class="summary">
            <div class="summary-item">
                <h5 class="item-title">Reading Time</h5>
                <p class="item-text"><span class="item-data">6</span> Mins</p>
            </div>
            <div class="summary-item">
                <h5 class="item-title">View</h5>
                <p class="item-text"><span class="item-data">1288</span> Views</p>
            </div>
            <div class="summary-item">
                <h5 class="item-title">Publish Date</h5>
                <p class="item-text"><span class="item-data" id="dateData"></span></p>
            </div>
        </section>
        <section class="main-article">
            <h4>You Gotta Love Birds</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet ut quam sit amet vehicula.
                Donec sit amet facilisis quam. Integer mollis, urna accumsan tempor hendrerit, risus neque tincidunt
                neque, in aliquam elit eros quis tortor. Sed id venenatis massa, ut malesuada sem. Nam lacinia sodales
                tellus nec efficitur. Vestibulum fringilla nisl ac iaculis ultricies. Sed commodo imperdiet metus vitae
                molestie. In laoreet rutrum pretium. Aenean a enim ac lacus tincidunt pellentesque ac a tellus.</p>
            <p>Donec imperdiet efficitur risus in venenatis. Aenean ornare iaculis orci a condimentum. Praesent
                tincidunt, purus ac placerat posuere, lacus risus suscipit lacus, et sollicitudin turpis metus in enim.
                Vestibulum at imperdiet magna, ac vehicula magna. Praesent placerat sapien bibendum, faucibus lectus at,
                euismod elit. Nunc velit est, faucibus et faucibus eu, tempus non nisi. Fusce hendrerit auctor lectus
                non auctor. Vestibulum luctus metus eget sapien volutpat congue. Fusce eget augue mauris. Ut egestas mi
                et feugiat sagittis. Cras ac convallis elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet ut quam sit amet vehicula.
                Donec sit amet facilisis quam. Integer mollis, urna accumsan tempor hendrerit, risus neque tincidunt
                neque, in aliquam elit eros quis tortor. Sed id venenatis massa, ut malesuada sem. Nam lacinia sodales
                tellus nec efficitur. Vestibulum fringilla nisl ac iaculis ultricies. Sed commodo imperdiet metus vitae
                molestie. In laoreet rutrum pretium. Aenean a enim ac lacus tincidunt pellentesque ac a tellus.</p>
            <p>Nam tincidunt vel risus et dictum. Quisque efficitur quam vel libero pellentesque interdum. Lorem ipsum
                dolor sit amet, consectetur adipiscing elit. Sed iaculis ligula ut aliquam aliquet. Vivamus vel
                elementum lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque vel erat leo.
                Donec rhoncus nec orci eget rutrum.</p>
            <div class="gallery">
                <div class="gallery-mask mask-off">
                    <img class="mask-image" src="" alt="" width="200">
                </div>
                <div class="image-item image-1" alt="" width="200"
                    style="background-image: url('https://images.unsplash.com/photo-1551668231-6a07c2b7d544?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1777&q=80');">
                </div>
                <div class="image-item image-2" alt="" width="200"
                    style="background-image: url('https://images.unsplash.com/photo-1605092675701-0dafa674328e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=465&q=80');">
                </div>
                <div class="image-item image-3" alt="" width="200"
                    style="background-image: url('https://images.unsplash.com/photo-1604946591005-c481923435b7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1780&q=80');">
                </div>
                <div class="image-item image-4" alt="" width="200"
                    style="background-image: url('https://images.unsplash.com/photo-1603741583823-e588bae552b2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1964&q=80');">
                </div>
                <div class="image-item image-5" alt="" width="200"
                    style="background-image: url('https://images.unsplash.com/photo-1618611157876-3517925c6285?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80');">
                </div>
            </div>
            <h4>Flapping Around, Flying All Over</h4>
            <p>Donec imperdiet efficitur risus in venenatis. Aenean ornare iaculis orci a condimentum. Praesent
                tincidunt, purus ac placerat posuere, lacus risus suscipit lacus, et sollicitudin turpis metus in enim.
                Vestibulum at imperdiet magna, ac vehicula magna. Praesent placerat sapien bibendum, faucibus lectus at,
                euismod elit. Nunc velit est, faucibus et faucibus eu, tempus non nisi. Fusce hendrerit auctor lectus
                non auctor. Vestibulum luctus metus eget sapien volutpat congue. Fusce eget augue mauris. Ut egestas mi
                et feugiat sagittis. Cras ac convallis elit.</p>
            <p>In hac habitasse platea dictumst. Aenean sit amet libero lorem. Quisque in sagittis nisl, placerat auctor
                tellus. Suspendisse scelerisque eget tortor eu porta. Nulla sollicitudin justo et ipsum placerat
                efficitur vel vel dui. Vestibulum placerat lorem ac leo mollis, et finibus nisl finibus. Pellentesque
                tempus ut ante non ullamcorper. Vivamus neque tellus, varius quis mi eu, fermentum laoreet orci. Quisque
                nisi elit, fringilla in ligula ut, molestie ultricies massa. Curabitur nec suscipit metus.</p>
            <p>Donec eu eros augue. Fusce blandit sed lacus ut pretium. Vivamus lacus ligula, fringilla sit amet nibh
                non, bibendum auctor nisi. In quis mollis mauris. Aliquam eget arcu ut arcu rhoncus posuere nec sit amet
                mauris. Integer consequat felis vitae quam ultricies, eu ultrices mi finibus. Cras eget nunc at nisl
                venenatis lacinia. Duis non tempus purus. Donec ut tristique turpis. Nunc non lacinia lectus, in
                ullamcorper erat.</p>
            <blockquote class="pullquote">"Be like the bird who, pausing in her flight awhile on boughs too slight,
                feels them give way beneath her, and yet sings, knowing she hath wings." &mdash; Victor Hugo
            </blockquote>
            <p>Nam tincidunt vel risus et dictum. Quisque efficitur quam vel libero pellentesque interdum. Lorem ipsum
                dolor sit amet, consectetur adipiscing elit. Sed iaculis ligula ut aliquam aliquet. Vivamus vel
                elementum lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque vel erat leo.
                Donec rhoncus nec orci eget rutrum.</p>
            <p>In hac habitasse platea dictumst. Aenean sit amet libero lorem. Quisque in sagittis nisl, placerat auctor
                tellus. Suspendisse scelerisque eget tortor eu porta. Nulla sollicitudin justo et ipsum placerat
                efficitur vel vel dui. Vestibulum placerat lorem ac leo mollis, et finibus nisl finibus. Pellentesque
                tempus ut ante non ullamcorper. Vivamus neque tellus, varius quis mi eu, fermentum laoreet orci. Quisque
                nisi elit, fringilla in ligula ut, molestie ultricies massa. Curabitur nec suscipit metus.</p>
            <p>Donec imperdiet efficitur risus in venenatis. Aenean ornare iaculis orci a condimentum. Praesent
                tincidunt, purus ac placerat posuere, lacus risus suscipit lacus, et sollicitudin turpis metus in enim.
                Vestibulum at imperdiet magna, ac vehicula magna. Praesent placerat sapien bibendum, faucibus lectus at,
                euismod elit. Nunc velit est, faucibus et faucibus eu, tempus non nisi. Fusce hendrerit auctor lectus
                non auctor. Vestibulum luctus metus eget sapien volutpat congue. Fusce eget augue mauris. Ut egestas mi
                et feugiat sagittis. Cras ac convallis elit.</p>
            <p>Etiam ac pretium erat. Nullam mollis, enim sed pretium pellentesque, urna dolor faucibus nisi, interdum
                luctus neque eros blandit justo. Morbi non urna scelerisque, condimentum ex nec, bibendum sem.
                Pellentesque ullamcorper quis dui non condimentum. Ut aliquam neque metus, in suscipit lorem volutpat
                eget. Mauris ac dictum nulla, eu suscipit justo.
            <p>In hac habitasse platea dictumst. Aenean sit amet libero lorem. Quisque in sagittis nisl, placerat auctor
                tellus. Suspendisse scelerisque eget tortor eu porta. Nulla sollicitudin justo et ipsum placerat
                efficitur vel vel dui. Vestibulum placerat lorem ac leo mollis, et finibus nisl finibus. Pellentesque
                tempus ut ante non ullamcorper. Vivamus neque tellus, varius quis mi eu, fermentum laoreet orci. Quisque
                nisi elit, fringilla in ligula ut, molestie ultricies massa. Curabitur nec suscipit metus.</p>
            <h4>Building Nests, Eating Bugs</h4>
            <p>Mauris eu nunc a dolor aliquam molestie vitae non turpis. Curabitur mollis vehicula euismod. Mauris
                eleifend, ipsum nec tempor condimentum, massa arcu lobortis erat, eget iaculis turpis turpis id nisi.
                Fusce iaculis velit nibh, a molestie neque placerat interdum. Phasellus eget erat placerat, viverra quam
                vitae, viverra ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
                turpis egestas. Nulla dictum, enim vitae eleifend vehicula, augue arcu dapibus metus, non accumsan nulla
                urna id mauris. Nunc non mi turpis. Nullam bibendum magna in metus tincidunt, vel dapibus neque
                placerat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                Vestibulum felis libero, consequat vel congue et, ultricies ornare arcu. Mauris vitae felis vitae nulla
                ornare condimentum.</p>
            <p>Nunc nisi justo, lobortis venenatis consectetur vel, porttitor in felis. Praesent tincidunt, mi non
                tincidunt egestas, libero risus finibus ex, volutpat facilisis nulla libero ut arcu. Proin consequat
                ligula non libero viverra, ut semper sem rhoncus. Morbi at viverra nisl, in convallis lorem. Proin ut
                dapibus ex, eu hendrerit mi. Donec tempus arcu quis purus consequat, sed congue nulla consequat. Donec
                tempor posuere lacus eget placerat. Maecenas euismod congue ornare. Vestibulum tincidunt eros ut
                faucibus blandit.</p>
            <p>In hac habitasse platea dictumst. Aenean sit amet libero lorem. Quisque in sagittis nisl, placerat auctor
                tellus. Suspendisse scelerisque eget tortor eu porta. Nulla sollicitudin justo et ipsum placerat
                efficitur vel vel dui. Vestibulum placerat lorem ac leo mollis, et finibus nisl finibus. Pellentesque
                tempus ut ante non ullamcorper. Vivamus neque tellus, varius quis mi eu, fermentum laoreet orci. Quisque
                nisi elit, fringilla in ligula ut, molestie ultricies massa. Curabitur nec suscipit metus.</p>
            <p>Nam tincidunt vel risus et dictum. Quisque efficitur quam vel libero pellentesque interdum. Lorem ipsum
                dolor sit amet, consectetur adipiscing elit. Sed iaculis ligula ut aliquam aliquet. Vivamus vel
                elementum lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque vel erat leo.
                Donec rhoncus nec orci eget rutrum.</p>
            <h4>Singing Little Songs, Looking Fancy</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet ut quam sit amet vehicula.
                Donec sit amet facilisis quam. Integer mollis, urna accumsan tempor hendrerit, risus neque tincidunt
                neque, in aliquam elit eros quis tortor. Sed id venenatis massa, ut malesuada sem. Nam lacinia sodales
                tellus nec efficitur. Vestibulum fringilla nisl ac iaculis ultricies. Sed commodo imperdiet metus vitae
                molestie. In laoreet rutrum pretium. Aenean a enim ac lacus tincidunt pellentesque ac a tellus.</p>
            <blockquote class="pullquote">"I'd rather learn from one bird how to sing than teach ten thousand stars how
                not to dance" &mdash; e.e. cummings</blockquote>
            <p>In hac habitasse platea dictumst. Aenean sit amet libero lorem. Quisque in sagittis nisl, placerat auctor
                tellus. Suspendisse scelerisque eget tortor eu porta. Nulla sollicitudin justo et ipsum placerat
                efficitur vel vel dui. Vestibulum placerat lorem ac leo mollis, et finibus nisl finibus. Pellentesque
                tempus ut ante non ullamcorper. Vivamus neque tellus, varius quis mi eu, fermentum laoreet orci. Quisque
                nisi elit, fringilla in ligula ut, molestie ultricies massa. Curabitur nec suscipit metus.</p>
            <p>Etiam ac pretium erat. Nullam mollis, enim sed pretium pellentesque, urna dolor faucibus nisi, interdum
                luctus neque eros blandit justo. Morbi non urna scelerisque, condimentum ex nec, bibendum sem.
                Pellentesque ullamcorper quis dui non condimentum. Ut aliquam neque metus, in suscipit lorem volutpat
                eget. Mauris ac dictum nulla, eu suscipit justo.
            <p>Pellentesque suscipit metus et lorem pharetra vehicula. Maecenas luctus urna sed posuere feugiat. Proin
                pharetra eu nisl et vestibulum. Maecenas sollicitudin at velit non faucibus. Suspendisse faucibus at
                tellus rutrum tempus. Proin sollicitudin vehicula dolor sit amet efficitur. Nulla finibus massa a
                consectetur dapibus.</p>
            <p>Nam tincidunt vel risus et dictum. Quisque efficitur quam vel libero pellentesque interdum. Lorem ipsum
                dolor sit amet, consectetur adipiscing elit. Sed iaculis ligula ut aliquam aliquet. Vivamus vel
                elementum lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque vel erat leo.
                Donec rhoncus nec orci eget rutrum.</p>
            <p>Nunc nisi justo, lobortis venenatis consectetur vel, porttitor in felis. Praesent tincidunt, mi non
                tincidunt egestas, libero risus finibus ex, volutpat facilisis nulla libero ut arcu. Proin consequat
                ligula non libero viverra, ut semper sem rhoncus. Morbi at viverra nisl, in convallis lorem. Proin ut
                dapibus ex, eu hendrerit mi. Donec tempus arcu quis purus consequat, sed congue nulla consequat. Donec
                tempor posuere lacus eget placerat. Maecenas euismod congue ornare. Vestibulum tincidunt eros ut
                faucibus blandit.</p>
            <p>Donec vel tempor velit. Nulla facilisi. Praesent feugiat arcu risus, sollicitudin finibus purus
                sollicitudin et. Quisque a consequat nulla. Fusce eu sapien ac libero luctus posuere. Sed vulputate erat
                ante, sit amet varius lorem ultrices a. Nam id faucibus mi. Nunc pretium malesuada lorem, ut mollis elit
                aliquam ac. Morbi iaculis tellus ullamcorper, mollis tellus ut, egestas mi. Nunc convallis dolor eget
                sem egestas, et egestas est scelerisque.</p>
            <h4>Birds: They're Great!</h2>
                <p>Donec vel mi a ipsum ornare venenatis. Etiam imperdiet nunc leo. Morbi faucibus elit in orci viverra
                    posuere. Nunc eget urna ac lectus sagittis mollis vel auctor diam. Vivamus sodales, nulla id lacinia
                    congue, massa velit laoreet nunc, vitae interdum mauris leo sed quam. Integer tincidunt quis sem non
                    consectetur. Nam elementum nibh eu fermentum imperdiet. Nullam nec quam at enim fringilla porta et
                    non lectus. Aliquam tempus odio id enim cursus bibendum. Nullam a metus augue. Cras elit leo,
                    convallis in commodo eget, tempus scelerisque mauris. Quisque ultricies dolor eget eleifend
                    consectetur. Nulla eu lorem dignissim nulla interdum consequat. Donec non maximus tellus. Aliquam
                    erat volutpat. Nulla porttitor odio in turpis convallis, ac rhoncus tellus pellentesque.</p>
                <p>In hac habitasse platea dictumst. Aenean sit amet libero lorem. Quisque in sagittis nisl, placerat
                    auctor tellus. Suspendisse scelerisque eget tortor eu porta. Nulla sollicitudin justo et ipsum
                    placerat efficitur vel vel dui. Vestibulum placerat lorem ac leo mollis, et finibus nisl finibus.
                    Pellentesque tempus ut ante non ullamcorper. Vivamus neque tellus, varius quis mi eu, fermentum
                    laoreet orci. Quisque nisi elit, fringilla in ligula ut, molestie ultricies massa. Curabitur nec
                    suscipit metus.</p>
                <p>Nunc nisi justo, lobortis venenatis consectetur vel, porttitor in felis. Praesent tincidunt, mi non
                    tincidunt egestas, libero risus finibus ex, volutpat facilisis nulla libero ut arcu. Proin consequat
                    ligula non libero viverra, ut semper sem rhoncus. Morbi at viverra nisl, in convallis lorem. Proin
                    ut dapibus ex, eu hendrerit mi. Donec tempus arcu quis purus consequat, sed congue nulla consequat.
                    Donec tempor posuere lacus eget placerat. Maecenas euismod congue ornare. Vestibulum tincidunt eros
                    ut faucibus blandit.</p>
                <p>Mauris eu nunc a dolor aliquam molestie vitae non turpis. Curabitur mollis vehicula euismod. Mauris
                    eleifend, ipsum nec tempor condimentum, massa arcu lobortis erat, eget iaculis turpis turpis id
                    nisi. Fusce iaculis velit nibh, a molestie neque placerat interdum. Phasellus eget erat placerat,
                    viverra quam vitae, viverra ligula. Pellentesque habitant morbi tristique senectus et netus et
                    malesuada fames ac turpis egestas. Nulla dictum, enim vitae eleifend vehicula, augue arcu dapibus
                    metus, non accumsan nulla urna id mauris. Nunc non mi turpis. Nullam bibendum magna in metus
                    tincidunt, vel dapibus neque placerat. Orci varius natoque penatibus et magnis dis parturient
                    montes, nascetur ridiculus mus. Vestibulum felis libero, consequat vel congue et, ultricies ornare
                    arcu. Mauris vitae felis vitae nulla ornare condimentum.</p>
        </section>
    </article>
    <!-- Javascript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment.min.js"></script>
<script src="app.js"></script>
</body>

</html>

 

There is all the HTML code for the Article Details Page. Now, you can see an output with an Article Details Page then we write Css & javascript for the Article Details Page.

Output

Article Details Page html

Article Details Page html

CSS Code

* {
     box-sizing: border-box;
}
 body {
     display: flex;
     justify-content: center;
     width: 100%;
     height: calc(max(100vh, 400px));
     padding: 100px;
     color: #222;
     font-family: &#34;
    Plus Jakarta Sans&#34;
    , sans-serif;
}
 body article {
     width: 100%;
     max-width: 1000px;
}
 body article header {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     width: 100%;
     min-height: 400px;
     padding: 50px;
     border-radius: 16px;
     color: #fff;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
}
 body article header .upper-header {
     display: flex;
     justify-content: space-between;
     padding-bottom: 20px;
}
 body article header .upper-header .mini-title {
     font-size: 1.125rem;
     font-weight: bold;
     letter-spacing: 0.4rem;
     text-transform: uppercase;
     opacity: 0.9;
}
 body article header .upper-header .date-since {
     display: flex;
     align-items: center;
     opacity: 0.5;
     font-size: 0.875rem;
}
 body article header .upper-header .date-since .date-value {
     display: inline-block;
     padding-bottom: 2px;
}
 body article header .upper-header .date-since svg {
     width: 20px;
     margin-left: 10px;
}
 body article header .lower-header {
     padding-top: 50px;
}
 body article header .lower-header .tags-container {
     display: flex;
     align-items: center;
     opacity: 0.75;
     margin-bottom: 12px;
}
 body article header .lower-header .tags-container &gt;
 span:not(:nth-child(2))::before {
     content: &#34;
    , &#34;
    ;
}
 body article header .lower-header .tags-container svg {
     width: 20px;
     margin-right: 10px;
}
 body article header .lower-header .tags-container span {
     font-size: 0.875rem;
}
 body article header .lower-header .title {
     margin: 20px 0;
     font-size: 3rem;
     font-weight: bold;
     opacity: 0.9;
}
 body article header .lower-header .subtitle {
     width: 50%;
     margin-top: 10px;
     opacity: 0.75;
     line-height: 1.75;
}
 body .summary {
     width: 100%;
     display: flex;
     justify-content: space-between;
     margin-top: 50px;
     padding: 30px 50px;
     border-radius: 16px;
     box-shadow: 0 0 0 1px #f2f2f2;
}
 body .summary .summary-item {
     width: 100%;
     padding-right: 20px;
}
 body .summary .summary-item .item-title {
     color: #999;
}
 body .summary .summary-item .item-text {
     margin-top: 12px;
     font-size: 1.5rem;
}
 body .main-article {
     width: 100%;
     margin-top: 50px;
     padding-bottom: 50px;
     line-height: 1.75;
}
 body .main-article h4 {
     margin-top: 60px;
     margin-bottom: 20px;
     font-size: 1.25em;
}
 body .main-article p {
     margin-bottom: 20px;
     color: #777;
     font-size: 1.125em;
}
 body .main-article blockquote {
     position: relative;
     margin: 40px 0;
     padding: 40px;
     background-color: #f8f8f8;
     border-radius: 16px;
}
 body .main-article blockquote::before {
     content: url(&#34;
    https://icons.craftwork.design/static/media/QuotesFill.f65b03951f44e212816420b00909f4df.svg"
    );
     position: absolute;
     top: -10px;
     left: -10px;
     transform: scale(2);
     opacity: 0.1;
}
 body .main-article blockquote::after {
     content: url(&#34;
    https://icons.craftwork.design/static/media/QuotesFill.f65b03951f44e212816420b00909f4df.svg"
    );
     position: absolute;
     bottom: -10px;
     right: -10px;
     transform: scale(2) rotate(180deg);
     opacity: 0.1;
}
 body .main-article .gallery {
     display: grid;
     gap: 20px;
     grid-template-areas: &#34;
    img1 img1 img2 img3&#34;
     &#34;
    img1 img1 img4 img5&#34;
    ;
     min-height: 400px;
     margin-top: 40px;
}
 body .main-article .gallery .image-item {
     min-height: 200px;
     background-color: #eee;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     border-radius: 8px;
     transition: 250ms;
}
 body .main-article .gallery .image-item:hover {
     opacity: 0.9;
     cursor: pointer;
}
 body .main-article .gallery .image-1 {
     grid-area: img1;
}
 body .main-article .gallery .image-2 {
     grid-area: img2;
}
 body .main-article .gallery .image-3 {
     grid-area: img3;
}
 body .main-article .gallery .image-4 {
     grid-area: img4;
}
 body .main-article .gallery .image-5 {
     grid-area: img5;
}
 body .main-article .gallery .gallery-mask {
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1;
     width: 100vw;
     height: 100vh;
     padding: 40px;
     background-color: #222 88;
     transition: 500ms;
}
 body .main-article .gallery .gallery-mask img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     transition: 500ms;
}
 body .main-article .gallery .mask-off {
     visibility: hidden;
     background-color: #222 0;
}
 body .main-article .gallery .mask-off img {
     visibility: hidden;
     opacity: 0;
}
 

Css Updated output

Article Details Page css

Javascript Code

// Layout will not be affected after remove below javascript code

// Handle Image Gallery
const galleryMask = document.querySelector(".gallery-mask");
const maskImage = document.querySelector(".mask-image");
const galleryImgs = document.querySelectorAll(".image-item");

galleryMask.addEventListener("click", () => {
    galleryMask.classList.add("mask-off");
});

galleryImgs.forEach((item) => {
    item.addEventListener("click", () => {
        let styleValue = item.getAttribute("style");
        maskImage.setAttribute(
            "src",
            styleValue.slice(styleValue.indexOf(": url(") + 7, -3)
        );
        galleryMask.classList.remove("mask-off");
    });
});

// Handle Publish Date
const dateData = document.getElementById("dateData");
const sinceData = document.getElementById("sinceData");
let publishDate = "2022-04-26";

dateData.innerHTML = moment(publishDate).format("LL");
sinceData.innerHTML = moment(publishDate).fromNow();

Final output

Article Details Page Javascript

 

Now that we have completed our javascript section, our updated output with javascript. I hope you like the Article Details Page. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you!

This post teaches us how to create a Article Details Page using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

Code By – Josh Allen

Check out more…..

1. 50 front-end projects html Css

2. add to cart button

3. quiz app javascript

Leave a Reply