How To Create A Blog Page Using HTML CSS And jQuery

byPosted at
How To Create A Blog Page Using HTML CSS And jQuery
Blog Template Website HTML CSS

We will create a blog website template using HTML, CSS, and JavaScript. This blog page template is completely responsive and easy to use in an HTML website. I also provide you HTML, CSS, And JavaScript Code which helps you to understand this Tutorial.

How to make a blog template website using HTML, CSS, and JavaScript

  1. 00:00 - 02:18 min : Intro
  2. 02:18 - 47.00 min: Create Blog website Using HTML, CSS, and JavaScript


Basic HTML Code

This is the basic HTML which is important for all HTML files. I import Poppins in this HTML file using Styling from google because most people do not have Poppins font on their devices. 


  <html>
<head>
<meta charset="utf-8">
<meta content="IE-edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, intial-scale=1.0" name="viewport">
<title>Blog Website</title>
	<!--style----->
	<style>
		body{
			font-family:poppins;
		}
	</style>
	
</head>

<body>
</body>
</html>

➤Blog Website HTML Code have given below.


<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--==Title==================================-->
<title>Blog</title>

<!--Stylesheet===============================-->
<link rel="stylesheet" href="css/style.css">

<!--==fav-icon===============================-->
<link rel="shortcut icon" href="images/fav-icon.png"/>

<!--==Import-poppins-font-family=============-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">


</head>

<body>

    <!--==Page-Scroll-progress-bar==============-->
    <div id="progress">
        <span id="progress-value"></span>
    </div>


    <!--==navigation=============================-->
    <nav class="navigation">

        <!--logo------------>
        <a class="logo" href="#">Blog</a>

        <!--menu-btn-------->
        <input type="checkbox" class="menu-btn" id="menu-btn">
        <label for="menu-btn" class="menu-icon">
            <span class="nav-icon"></span>
        </label>

        <!--menu------------>
        <ul class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Blog</a></li>
            <li><a class="nav-contact" href="#">Contact</a></li>
        </ul>

    </nav>











    <!--==page-container========================================-->
    <div class="page-container">

        <!--==top-bar=============================-->
        <div class="top-bar">
            <span>NB/<br/>Blog</span>
            <div class="article-number"><span>37</span><br/>Article</div>
        </div>


        <!--==Blog-Section=========================-->
        <section id="blog">

            <!--heading------------->
            <div class="blog-heading">
                <h1>Musing, working, and everything in between.</h1>
            </div>

            <!--filter-------------->
            <ul class="blog-filter">
                <li class="list blog-filter-active" data-filter="all">All</li>/
                <li class="list" data-filter="insights">insights</li>/
                <li class="list" data-filter="projects">projects</li>/
                <li class="list" data-filter="culture">nb culture</li>/
                <li class="list" data-filter="news">news</li>
            </ul>



            <!--blog-box-container------------------>
            <div class="blog-container">

                <!--box-1-------->
                <a class="blog-box insights" href="#">

                    <!--img--->
                    <div class="blog-img">
                        <img alt="1" src="images/blog-1.jpg">
                    </div>

                    <!--text-->
                    <div class="blog-text">
                        <span class="category">insights</span>
                        <strong>Has covid eased some divisions?</strong>
                        <span class="blog-post-time">June 9 - 5 min read</span>
                    </div>

                </a>


                <!--box-2-------->
                <a class="blog-box projects" href="#">

                    <!--img--->
                    <div class="blog-img">
                        <img alt="1" src="images/blog-2.jpg">
                    </div>

                    <!--text-->
                    <div class="blog-text">
                        <span class="category">project</span>
                        <strong>Inspiring media agencies and brands to use TikTok</strong>
                        <span class="blog-post-time">June 9 - 5 min read</span>
                    </div>

                </a>


                <!--box-3-------->
                <a class="blog-box insights" href="#">

                    <!--img--->
                    <div class="blog-img">
                        <img alt="1" src="images/blog-3.jpg">
                    </div>

                    <!--text-->
                    <div class="blog-text">
                        <span class="category">insights</span>
                        <strong>Talent pool: Need better staff? Get better principles.</strong>
                        <span class="blog-post-time">June 9 - 5 min read</span>
                    </div>

                </a>


                <!--box-4-------->
                <a class="blog-box culture" href="#">

                    <!--img--->
                    <div class="blog-img">
                        <img alt="1" src="images/blog-4.png">
                    </div>

                    <!--text-->
                    <div class="blog-text">
                        <span class="category">NB culture</span>
                        <strong>Our sustainability journey</strong>
                        <span class="blog-post-time">June 9 - 5 min read</span>
                    </div>

                </a>


                <!--box-5-------->
                <a class="blog-box news" href="#">

                    <!--img--->
                    <div class="blog-img">
                        <img alt="1" src="images/blog-5.jpg">
                    </div>

                    <!--text-->
                    <div class="blog-text">
                        <span class="category">News</span>
                        <strong>Inspiring media agencies and brands to use TikTok</strong>
                        <span class="blog-post-time">June 9 - 5 min read</span>
                    </div>

                </a>

                <!--box-6-------->
                <a class="blog-box culture" href="#">

                    <!--img--->
                    <div class="blog-img">
                        <img alt="1" src="images/blog-6.jpg">
                    </div>

                    <!--text-->
                    <div class="blog-text">
                        <span class="category">NB culture</span>
                        <strong>Talent pool: Need better staff? Get better principles.</strong>
                        <span class="blog-post-time">June 9 - 5 min read</span>
                    </div>

                </a>

            </div>
            

        </section>


    </div>
    <!--page-container-end--------------------->




    <!--footer=========================================-->
    <footer>
        <div class="footer-container">

            <!--heading----------------->
            <div class="footer-heading">

                <h4>It's time to stop scrolling.
                    <br/>
                    Let's create something.
                </h4>

                <h3>get in touch.</h3>

            </div>


            <!--footer-content----------------------------->
            <div class="footer-content">

                <!--box------------->
                <div class="footer-box">
                    <strong>explore</strong>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Project</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>

                <!--box------------->
                <div class="footer-box">
                    <strong>Social</strong>
                    <ul>
                        <li><a href="#">Instagram</a></li>
                        <li><a href="#">Dribble</a></li>
                        <li><a href="#">Behance</a></li>
                    </ul>
                </div>

                <!--box------------->
                <div class="footer-box">
                    <strong>Contact</strong>
                    <ul>
                        <li><a href="#">hi@GTN.io</a></li>
                        <li><a href="#">+123456789</a></li>
                    </ul>
                </div>

                <!--box------------->
                <div class="footer-box">
                    <strong>GTN.io</strong>
                    <ul>
                        <li>manteuffelstr.60b</li>
                        <li>l0qqq berlin</li>
                        <li>germany</li>
                    </ul>
                </div>

            </div>


            <!--footer-bottom------------->
            <div class="footer-bottom">

                <!--links----->
                <div class="footer-bottom-link">
                    <a href="#">privacy</a>
                    <a href="#">site info</a>
                    <a href="#">terms</a>
                </div>

                <!--copyright-->
                <div class="copyright">
                    <span>Made by GTI</span>
                    <span>&#169; 2021 GTN</span>
                </div>

            </div>

        </div>
    </footer>


 <!--==JQuery=================================-->
    <script src="js/jquery.js"></script>


</body>

</html>

➤Blog Website CSS Code is have given below.

*{
    margin: 0px;
    padding: 0px;
    font-family: poppins;
    box-sizing: border-box;
}
body{
    margin: 0px;
    padding: 0px;
    font-family: poppins;
    background-color: #14171c;
    width: 100%;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
body::-webkit-scrollbar{
    display: none;
}

a{
    text-decoration: none;
}
ul{
    list-style: none;
}
::selection{
    background-color: #ffffff;
    color: #14171c;
}
/*==navigation=====================================*/
.navigation{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 2%;
    z-index: 2;
}
.menu{
    display: flex;
}
.menu li a{
    padding: 12px 20px;
    color: #ffffff;
    font-size: 0.9rem;
    margin: 4px 10px;
    letter-spacing: 0.5px;
    transition: all ease 0.3s;
}
.menu li a:hover{
    opacity: 0.8;
    transition: all ease 0.3s;
}
.nav-contact{
    background-color: #ffffff;
    font-size: 0.8rem;
    font-weight: 500;
    color: #1c1f25 !important;
}
.logo{
    background-color: #161616;
    min-width: 50px;
    height: 50px;
    padding: 0px 10px;
    border: 1px solid rgba(255,255,255,0.137);
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: 3px;
}
/*==page-container===============================*/
.page-container{
    max-width: 1200px;
    margin: auto;
    display: flex;
    flex-direction: column;
}
.top-bar{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #9f9f9f48;
    padding: 30px 0px;
    margin: 5px auto 0px auto;
}
.top-bar span,
.article-number{
    color: #9f9f9f;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}
/*==blog=======================================*/
#blog{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 0px;
}
.blog-heading{
    margin: 20px 0px;
}
.blog-heading h1{
    font-size: 5.2rem;
    color: #ffffff;
    line-height: 94px;
}
.blog-filter{
    display: flex;
    align-items: center;
    margin: 40px 0px 20px 0px;
    color: #78809e59;
}
.blog-filter li{
    color: #ffffff;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 2px;
    margin: 0px 5px;
    cursor: pointer;
    user-select: none;
}
.blog-filter li:hover{
    opacity: 0.7;
    transform: all ease 0.3s;
}
.blog-filter-active{
    border-bottom: 1px solid #e2d40c;
}
.blog-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 40px;
    margin: 10px 0px 50px 0px;
}
.blog-box{
    transition: all ease 0.3s;
}
.blog-box:hover{
    opacity: 0.8;
    transition: all ease 0.3s;
}
.blog-img{
    width:100%;
    max-height: 220px;
    overflow:hidden;
}
.blog-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.blog-text{
    display: flex;
    flex-direction: column;
    padding: 10px 3px;
}
.blog-text .category{
    color: #ffffff;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 2px;
}
.blog-text strong{
    font-size: 1.3rem;
    color: #ffffff;
    font-weight: 500;
    margin: 5px 0px;
    letter-spacing: 0.7px;
}
.blog-text .blog-post-time{
    color: #9f9f9f;
    font-size: 0.8rem;
    letter-spacing: 1px;
}
/*==footer====================================*/
footer{
    background-color: #0f1012;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 120px 0px 50px 0px;
}
.footer-container{
    width: 100%;
    max-width: 980px;
    margin: auto;
}
.footer-heading h3,
.footer-heading h4{
    color: #ffffff;
}
.footer-heading h3{
    font-size: 5rem;
    margin-top: 20px;
    font-weight: 600;
}
.footer-heading h4{
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 1px;
}
.footer-content{
    display: flex;
    justify-content: space-between;
    margin-top: 100px;
}
.footer-box strong{
    color: #ffffff;
    font-size: 2rem;
    text-transform: lowercase;
}
.footer-box ul{
    margin-top: 15px;
}
.footer-box ul li a,
.footer-box ul li{
    color: #ffffff;
    font-size: 0.9rem;
    text-transform: lowercase;
    opacity: 0.9;
    padding: 2px 0px;
    transition: all ease 0.3s;
}
.footer-box ul li{
    margin: 8px 0px;
}
.footer-box ul li:hover,
.footer-box ul li a:hover{
    opacity: 0.6;
    transition: all ease 0.3s;
}
.footer-bottom{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 100px;
}
.footer-bottom-link{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.footer-bottom-link a,
.copyright span{
    color: #78809e;
    font-size: 0.9rem;
    margin: 0px 10px;
    transition: all ease 0.3s;
}
.footer-bottom-link a:hover{
    opacity: 0.6;
    transition: all ease 0.3s;
}
/*==scroll=progress==============================*/
#progress{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: fixed;
    bottom: 25px;
    right: 25px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
    display: grid;
    place-items: center;
    z-index: 105;
}
#progress-value{
    display: block;
    height: calc(100% - 5px);
    width: calc(100% - 5px);
    background-color: #1c1f25;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 0px;
}
/*==making-blog-page-reponsive===========================*/
.menu-icon,
.menu-btn{
    display: none;
}
@media(max-width:1250px){
    .blog-heading h1{
        font-size: 3rem;
        line-height: 60px;
    }
    .page-container{
        max-width: 100%;
        width: 90%;
    }
}
@media(max-width:1060px){
    .footer-container{
        max-width: 800px;
    }
}
@media(max-width:850px){
    .blog-container{
        grid-template-columns: 1fr 1fr;
    }
    .footer-container{
        width: 90%;
    }
    .footer-content{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;
    }
    .footer-box{
        margin: 0px auto;
    }
    .footer-heading{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}
@media(max-width:750px){
    .navigation{
        justify-content: space-between;
        height: 65px;
        padding: 35px 25px;
    }
    .logo{
        font-size: 1.2rem;
    }
    .navigation .menu{
        display: none;
        position: absolute;
        left: 0px;
        top: 65px;
        background-color: #14171c;
        border-bottom: 1px solid #1c1f25;
        width: 100%;
        padding: 0px;
        margin: 0px;
        z-index: 100;
    }
    .navigation .menu li{
        width:100%;
        margin: 0px;
        padding: 0px;
    }
    .navigation .menu li a{
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        margin: 0px;
        padding: 30px 20px;
        border: 1px solid rgba(211,211,211,0.01);
    }
    .navigation .menu li a:hover{
        color: #14171c;
        background-color: #ffffff;
        transition: all ease 0.3s;
        opacity: 1;
    }
    .menu-icon{
        display: block;
    }
    .navigation .menu-icon{
        cursor: pointer;
        float: right;
        padding: 5px;
        position: relative;
        user-select: none;
        z-index: 106;
    }
    .navigation .menu-icon .nav-icon{
        background-color: #ffffff;
        display: block;
        position: relative;
        height: 2px;
        transition: background 0.2s ease-out;
        width: 25px;
    }
    .navigation .menu-icon .nav-icon::before,
    .navigation .menu-icon .nav-icon::after{
        background-color: #ffffff;
        content: '';
        position: absolute;
        height: 100%;
        transition: all ease-out 0.2s;
        width: 100%;
    }
    .navigation .menu-icon .nav-icon::before{
        top: 5px;
    }
    .navigation .menu-icon .nav-icon::after{
        top: -5px;
    }
    .navigation .menu-icon:checked ~ .menu-icon .nav-icon,
    .navigation .menu-icon .nav-icon{
        background-color: transparent;
    }
    .navigation .menu-btn:checked ~ .menu-icon .nav-icon::before{
        transform: rotate(-45deg);
        top: 0px;
    }
    .navigation .menu-btn:checked ~ .menu-icon .nav-icon::after{
        transform: rotate(45deg);
        top: 0px;
    }

    .navigation .menu-btn:checked ~ .menu{
        display: block;
    }
}
@media(max-width:680px){
    .footer-heading h4{
        font-size: 1.6rem;
        line-height: 30px;
    }
    .footer-heading h3{
        font-size: 2.3rem;
    }
    .footer-bottom{
        flex-wrap: wrap;
        justify-content:space-between;
        align-items: center;
        padding: 0px 20px;
    }
}
@media(max-width:530px){
    .blog-container{
        grid-template-columns: 1fr;
    }
    .blog-heading h1{
        font-size: 2rem;
        line-height: 40px;
    }
    .blog-heading{
        margin: 20px 0px;
    }
    .blog-filter{
        flex-wrap: wrap;
    }
    .blog-filter li{
        margin-top: 8px;
    }
}
@media(max-width:340px){
    .footer-content{
        grid-template-columns: 1fr;
        margin-top: 40px;
    }
    .footer-box{
        margin: 0px;
    }
    .footer-box strong{
        font-size: 1.5rem;
    }
}

➤Blog Website JS Code is have given below.

 
/*--==Scroll-bar-script======================-*/

    let scrollPercentage = () => {
        let scrollProgress = document.getElementById("progress");
        let progressValue = document.getElementById("progress-value");
        let pos = document.documentElement.scrollTop;
        let calcHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
        let scrollValue = Math.round( pos * 100 / calcHeight);
        scrollProgress.style.background = `conic-gradient(#e2d30c ${scrollValue}%, #2b2f38 ${scrollValue}%)`;
        progressValue.textcontent = `${scrollValue}%`;

    }
    window.onscroll = scrollPercentage;
    window.onload = scrollPercentage;


    /*--==Post-Filter-Script=================================--*/
    
        $(document).on('click','.blog-filter li', function(){
            $(this).addClass('blog-filter-active').siblings().removeClass('blog-filter-active')
        });

        /*--filter------------------------*/
        $(document).ready(function(){
            $('.list').click(function(){
                const value = $(this).attr('data-filter');
                if(value == 'all'){
                    $('.blog-box').show('1000');
                }
                else{
                    $('.blog-box').not('.'+value).hide('1000');
                    $('.blog-box').filter('.'+value).show('1000');
                }
            });
        });





How To Dowload Files
Share
Post a Comment Labels,

Comments


Archive

Contact Form

Send