Article HTML Template Page Using HTML and CSS
Hello Coder! Welcome to the Codewithrandom blog. Today we are going to create an Article/Blog Details Page Using Html and Css. this is a Completely Responsive Article Details Page.
I hope you enjoy our blog so let’s start with a basic HTML structure for the Article Details Page.
| Code by | Josh Allen |
| Project Download | Link Available below |
| Language used | HTML, CSS, and JavaScript |
| External link / Dependencies | No |
| Responsive | Yes |
HTML Code:-
<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." — 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" — 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. We Add a Heading, Paragraph, Images, and links to the article PageOutput
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: "
Plus Jakarta Sans"
, 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 >
span:not(:nth-child(2))::before {
content: "
, "
;
}
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("
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("
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: "
img1 img1 img2 img3"
"
img1 img1 img4 img5"
;
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;
}
Gym Website Using HTML and CSS With Source Codethis is all Css for styling the Html article details page element. here is the updated output with Html and Css.Html and Css Update Output
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 Of Article HTML Template Page
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 an 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/AnkiCode By – Josh AllenWhich code editor do you use for this Weather App project coding?
I personally recommend using VS Code Studio, it’s very simple and easy to use.
is this project responsive or not?
Yes! this project is a responsive project.
Do you use any external links to create this project?
No
