How To A Create Blog Website Using HTML CSS And jQuery

byPosted at

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

Learn how to make a blog website using HTML, CSS, and JavaScript. Learn how to make a responsive blog template in HTML. You will easily make this website by following my YouTube video tutorial. I also provide you HTML and CSS which helps you to understand this Tutorial.



How To Create A Blog Website Using HTML, CSS, and JavaScript

  1. 00:00 - 03:00 min : Intro
  2. 03:00 - 57:00 min: Create A Blog Website in HTML


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>Side Login and Registration Form Bar</title>
	<!--style----->
	<style>
		body{
			font-family:poppins;
		}
	</style>
	
</head>

<body>
</body>
</html>

Blog Website Home Page HTML
Create Blog Website Template in HTML

You can easily make this Blog Website by watching my youtube video tutorial which I gave at the start of this post or by copy the HTML, CSS, and JavaScript code that I give below. Paste this HTML, CSS, and JavaScript code into your HTML, CSS, and JavaScript file. On the youtube video tutorial, I tell you all the important points which help you to make a Blog Website like that for your website. So I recommended you watch the Video Tutorial on how can I make this Blog Website. This Blog Website Design is fully responsive and all browsers compatible. HTML and CSS code I have given below this code help you to better understand the Nike Website UI Design video tutorial on how I make this. You can use this without any copyright.


➤Home page HTML Code have given below.


  <!--doctype html-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, intial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Blog Website HTML</title>
<!--Stylesheet----------------------------------->
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<!--fav-icon------------------------------------->
<link rel="shortcut icon" href="images/fav-icon.png"/>
<!--using-font-awesome--------------------------->
<script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
<!--poppins-font-family-------------------------->
<link rel="preconnect" href="https://fonts.gstatic.com">
<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>

    <section id="blog">

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

            <!--logo---------->
            <a href="index.html" class="logo">
                <i class="fas fa-blog"></i> Blog
            </a>

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

                <!--filter--------->
                <ul class="blog-filter">
                    <li class="list blog-filter-active" data-filter="all">All</li>
                    <li class="list" data-filter="web">Web Design</li>
                    <li class="list" data-filter="app">App Design</li>
                    <li class="list" data-filter="new">New</li>
                </ul>
            </nav>

        </div>



        <!--ad--------------------------->
        <div class="ad">
            <a href="#">
                <img alt="ads" src="images/ad-home.png">
            </a>
        </div>



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

            <!--box-1----------------------------------------------->
            <div class="blog-box app">

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

                <!--text---->
                <div class="blog-text">

                    <!--title------------------------>
                    <a href="article.html">
                        <strong>How To Create Ramdan Time App Design</strong>
                    </a>

                    <!--time-and-category------------->
                    <div class="category-time">
                        <span class="blog-category">App Design</span>
                        <span class="published-time">11-03-2021</span>
                    </div>

                    <!--publisher-profile------------->
                    <div class="publisher-profile">
                        <img alt="Publisher" src="images/p-1.png">
                        <span>Touseeq Ijaz</span>
                    </div>

                </div>

            </div>


            <!--box-2---------------------------------------->
            <div class="blog-box web">

                <!--img----->
                <div class="blog-img">
                    <img alt="img" src="images/b-2.jpg">
                    <span class="category">Web</span>
                </div>

                <!--text---->
                <div class="blog-text">

                    <!--title------------------------>
                    <a href="#">
                        <strong>How To Create Ramdan Time App Design</strong>
                    </a>

                    <!--time-and-category------------->
                    <div class="category-time">
                        <span class="blog-category">Web Design</span>
                        <span class="published-time">11-03-2021</span>
                    </div>

                    <!--publisher-profile------------->
                    <div class="publisher-profile">
                        <img alt="Publisher" src="images/p-1.png">
                        <span>Touseeq Ijaz</span>
                    </div>

                </div>

            </div>


            <!--box-3-------------------------------------------------->
            <div class="blog-box new">

                <!--img----->
                <div class="blog-img">
                    <img alt="img" src="images/b-3.jpg">
                    <span class="category">New</span>
                </div>

                <!--text---->
                <div class="blog-text">

                    <!--title------------------------>
                    <a href="#">
                        <strong>How To Create Ramdan Time App Design</strong>
                    </a>

                    <!--time-and-category------------->
                    <div class="category-time">
                        <span class="blog-category">App Design</span>
                        <span class="published-time">11-03-2021</span>
                    </div>

                    <!--publisher-profile------------->
                    <div class="publisher-profile">
                        <img alt="Publisher" src="images/p-1.png">
                        <span>Touseeq Ijaz</span>
                    </div>

                </div>

            </div>



            <!--box--4---------------------------------------------------------->
            <div class="blog-box app">

                <!--img----->
                <div class="blog-img">
                    <img alt="img" src="images/b-4.jpg">
                    <span class="category">App</span>
                </div>

                <!--text---->
                <div class="blog-text">

                    <!--title------------------------>
                    <a href="#">
                        <strong>How To Create Ramdan Time App Design</strong>
                    </a>

                    <!--time-and-category------------->
                    <div class="category-time">
                        <span class="blog-category">App Design</span>
                        <span class="published-time">11-03-2021</span>
                    </div>

                    <!--publisher-profile------------->
                    <div class="publisher-profile">
                        <img alt="Publisher" src="images/p-1.png">
                        <span>Touseeq Ijaz</span>
                    </div>

                </div>

            </div>



            <!--box--5----------------------------------------->
            <div class="blog-box web">

                <!--img----->
                <div class="blog-img">
                    <img alt="img" src="images/b-5.jpg">
                    <span class="category">Web</span>
                </div>

                <!--text---->
                <div class="blog-text">

                    <!--title------------------------>
                    <a href="#">
                        <strong>How To Create Ramdan Time App Design</strong>
                    </a>

                    <!--time-and-category------------->
                    <div class="category-time">
                        <span class="blog-category">Web Design</span>
                        <span class="published-time">11-03-2021</span>
                    </div>

                    <!--publisher-profile------------->
                    <div class="publisher-profile">
                        <img alt="Publisher" src="images/p-1.png">
                        <span>Touseeq Ijaz</span>
                    </div>

                </div>

            </div>



            <!--box--6--------------------------------->
            <div class="blog-box app">

                <!--img----->
                <div class="blog-img">
                    <img alt="img" src="images/b-6.jpg">
                    <span class="category">App</span>
                </div>

                <!--text---->
                <div class="blog-text">

                    <!--title------------------------>
                    <a href="#">
                        <strong>How To Create Ramdan Time App Design</strong>
                    </a>

                    <!--time-and-category------------->
                    <div class="category-time">
                        <span class="blog-category">App Design</span>
                        <span class="published-time">11-03-2021</span>
                    </div>

                    <!--publisher-profile------------->
                    <div class="publisher-profile">
                        <img alt="Publisher" src="images/p-1.png">
                        <span>Touseeq Ijaz</span>
                    </div>

                </div>

            </div>




            <!--box--7---------------------------------------->
            <div class="blog-box new">

                <!--img----->
                <div class="blog-img">
                    <img alt="img" src="images/b-7.jpg">
                    <span class="category">New</span>
                </div>

                <!--text---->
                <div class="blog-text">

                    <!--title------------------------>
                    <a href="#">
                        <strong>How To Create Ramdan Time App Design</strong>
                    </a>

                    <!--time-and-category------------->
                    <div class="category-time">
                        <span class="blog-category">App Design</span>
                        <span class="published-time">11-03-2021</span>
                    </div>

                    <!--publisher-profile------------->
                    <div class="publisher-profile">
                        <img alt="Publisher" src="images/p-1.png">
                        <span>Touseeq Ijaz</span>
                    </div>

                </div>

            </div>



            <!--box-9------------------------------------------>
            <div class="blog-box app">

                <!--img----->
                <div class="blog-img">
                    <img alt="img" src="images/b-8.jpg">
                    <span class="category">App</span>
                </div>

                <!--text---->
                <div class="blog-text">

                    <!--title------------------------>
                    <a href="#">
                        <strong>How To Create Ramdan Time App Design</strong>
                    </a>

                    <!--time-and-category------------->
                    <div class="category-time">
                        <span class="blog-category">App Design</span>
                        <span class="published-time">11-03-2021</span>
                    </div>

                    <!--publisher-profile------------->
                    <div class="publisher-profile">
                        <img alt="Publisher" src="images/p-1.png">
                        <span>Touseeq Ijaz</span>
                    </div>

                </div>

            </div>



            <!--box---9------------------------------->
            <div class="blog-box app">

                <!--img----->
                <div class="blog-img">
                    <img alt="img" src="images/b-3.jpg">
                    <span class="category">App</span>
                </div>

                <!--text---->
                <div class="blog-text">

                    <!--title------------------------>
                    <a href="#">
                        <strong>How To Create Ramdan Time App Design</strong>
                    </a>

                    <!--time-and-category------------->
                    <div class="category-time">
                        <span class="blog-category">App Design</span>
                        <span class="published-time">11-03-2021</span>
                    </div>

                    <!--publisher-profile------------->
                    <div class="publisher-profile">
                        <img alt="Publisher" src="images/p-1.png">
                        <span>Touseeq Ijaz</span>
                    </div>

                </div>

            </div>



            <!--box-10--------------------------------------->
            <div class="blog-box web">

                <!--img----->
                <div class="blog-img">
                    <img alt="img" src="images/b-6.jpg">
                    <span class="category">Web</span>
                </div>

                <!--text---->
                <div class="blog-text">

                    <!--title------------------------>
                    <a href="#">
                        <strong>How To Create Ramdan Time App Design</strong>
                    </a>

                    <!--time-and-category------------->
                    <div class="category-time">
                        <span class="blog-category">App Design</span>
                        <span class="published-time">11-03-2021</span>
                    </div>

                    <!--publisher-profile------------->
                    <div class="publisher-profile">
                        <img alt="Publisher" src="images/p-1.png">
                        <span>Touseeq Ijaz</span>
                    </div>

                </div>

            </div>



            <!--box--11---------------------------------->
            <div class="blog-box app">

                <!--img----->
                <div class="blog-img">
                    <img alt="img" src="images/b-4.jpg">
                    <span class="category">App</span>
                </div>

                <!--text---->
                <div class="blog-text">

                    <!--title------------------------>
                    <a href="#">
                        <strong>How To Create Ramdan Time App Design</strong>
                    </a>

                    <!--time-and-category------------->
                    <div class="category-time">
                        <span class="blog-category">App Design</span>
                        <span class="published-time">11-03-2021</span>
                    </div>

                    <!--publisher-profile------------->
                    <div class="publisher-profile">
                        <img alt="Publisher" src="images/p-1.png">
                        <span>Touseeq Ijaz</span>
                    </div>

                </div>

            </div>



            <!--box-12---------------------------------->
            <div class="blog-box web">

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

                <!--text---->
                <div class="blog-text">

                    <!--title------------------------>
                    <a href="#">
                        <strong>How To Create Ramdan Time App Design</strong>
                    </a>

                    <!--time-and-category------------->
                    <div class="category-time">
                        <span class="blog-category">Web Design</span>
                        <span class="published-time">11-03-2021</span>
                    </div>

                    <!--publisher-profile------------->
                    <div class="publisher-profile">
                        <img alt="Publisher" src="images/p-1.png">
                        <span>Touseeq Ijaz</span>
                    </div>

                </div>

            </div>


        </div>




        <!--ad----------------------->
        <div class="ad">
            <a href="#">
                <img alt="ads" src="images/ad-home.png">
            </a>
        </div>

    </section>


    <!--footer------------------------------------->
    <footer>
        <span class="copyright">Copyright 2021 - GoingToInternet</span>
        <!--social-links------->
        <div class="footer-social">
            <a href="#"><i class="fab fa-facebook-f"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
        </div>
    </footer>


    <!--JQuery----------------------->
    <script type="text/javascript" src="js/jquery.js"></script>
    
    <!--script----------------------->
    <script type="text/javascript">
    
        /*blog-filter-menu----------------------------*/
        $(document).on('click','.blog-filter li',function(){
            $(this).addClass('blog-filter-active').siblings().removeClass('blog-filter-active')
        });


        /*post-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');
                }
            });
        });
    

        /*for-fix-filter-menu-----------------------------*/
        $(window).scroll(function(){
            if($(document).scrollTop() > 80){
                $('nav').addClass('fix-nav');
            }
            else{
                $('nav').removeClass('fix-nav');
            }
        });
    </script>
    
</body>
</html>

➤Home Page 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: #f4f6f8;
}
a{
    text-decoration: none;
}
ul{
    list-style: none;
}
::selection{
    background-color: #7f71ff;
    color: #ffffff;
}
.navigation{
    display: flex;
    flex-direction: column;
}
.logo{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #272727;
    font-weight: 800;
    color: #ffffff;
    font-size: 2rem;
    text-transform: uppercase;
    padding: 10px;
}
.logo i{
    margin-right: 5px;
}
nav{
    background-color: #ffffff;
}
.blog-filter{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 20px;
    border-top: 1px solid rgba(0,0,0,0.05);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    background-color: #fafafa;
}
.blog-filter li{
    padding: 5px 15px;
    color: #838eab;
    cursor: pointer;
    margin: 3px;
    font-weight: 400;
    letter-spacing: 0.5px;
    user-select: none;
}
.blog-filter li:hover,
.blog-filter-active{
    background-color: rgba(0,0,0,0.03);
    color: #534f75 !important;
    transition: all ease 0.3s;
}
.ad{
    width:40%;
    margin: 20px auto;
    display: flex;
    box-shadow: 2px 2px 30px rgba(0,0,0,0.06);
}
.ad img{
    width:100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.blog-container{
    display: grid;
    max-width: 1200px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    margin: auto;
}
.blog-box{
    padding: 20px;
    background-color: #ffffff;
    margin: 20px;
    box-shadow: 2px 2px 30px rgba(0,0,0,0.05);
}
.blog-img{
    display: flex;
    width:100%;
    min-height: 185px;
    overflow: hidden;
    border-radius: 5px;
    position: relative;
}
.blog-img img{
    width:100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.category{
    color: #ffffff;
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 2px 10px;
    font-size: 0.9rem;
}
.app .category{
    background-color: #6e5eff;
}
.new .category{
    background-color: #ff695e;
}
.web .category{
    background-color: #ff5eb7;
}
.blog-text strong{
    font-size: 1.2rem;
    color: #20232b;
    display: flex;
    font-weight: 400;
    margin: 10px 0px;
    line-height: 25px;
}
.category-time{
    display: flex;
    align-items: center;
}
.category-time span{
    font-size: 0.8rem;
}
.blog-category{
    padding: 3px 6px;
    color: #484f61;
    font-weight: 500;
    background-color: rgba(0,0,0,0.06);
}
.published-time{
    margin-left: 10px;
    color: #db3838;
    font-weight: 500;
}
.publisher-profile{
    display: flex;
    align-items: center;
    margin-top: 10px;
}
.publisher-profile img{
    width:30px;
    height: 30px;
    object-position: center;
    object-fit: cover;
    border-radius: 50%;
    overflow: hidden;
}
.publisher-profile span{
    color: #6d7ca1;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    font-weight: 500;
    margin-left: 10px;
}
footer{
    padding: 20px;
    margin-top: 10px;
    background-color: #ffffff;
    width:100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid rgba(0,0,0,0.08);
}
footer span{
    color: #131313;
    font-size: 0.9rem;
    letter-spacing: 1px;
}
.footer-social{
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer-social a{
    padding: 0px 10px;
    color: #20232b;
}
.footer-social a:hover{
    color: #6a5ceb;
    transition: all ease 0.3s;
}
.fix-nav{
    position: fixed;
    top: 0px;
    left: 0px;
    width:100%;
    box-shadow: 2px 2px 30px rgba(0,0,0,0.15);
    z-index: 105;
    animation: nav-animation 0.3s;

}
@keyframes nav-animation{
    0%{
        top: -100%;
    }
    100%{
        top: 0px;
    }
}

nav .menu-btn{
    display: none;
}
/*making-home-page-responsive----------------------------*/
@media(max-width:1200px){
    .blog-container{
        max-width:1000px;
    }
    .blog-img{
        min-height: auto;
        height: 170px;
    }
}
@media(max-width:900px){
    .blog-container{
        max-width: 100%;
        grid-template-columns: 1fr 1fr;
    }
    .ad{
        width:60%;
    }
}
@media(max-width:600px){
    .blog-container{
        width:90%;
        grid-template-columns: 1fr;
    }
    .blog-img{
        height: auto;
    }
    .logo{
        font-size: 1.5rem;
    }
    nav{
        display: flex;
        justify-content: center;
        flex-direction: column;
        height: 70px;
        position: relative;
        padding: 0px 20px;
    }
    .blog-filter{
       display:none;
       flex-direction: column;
       position: absolute;
       left: 0px;
       top: 70px;
       width:100%;
       border-bottom: 2px solid #e2e2e2;
       z-index: 105;
    }
    .blog-filter li{
        width:100%;
    }
    nav .menu-icon{
        cursor: pointer;
        float: right;
        padding: 5px;
        position: relative;
        user-select: none;
        z-index: 2;
    }
    nav .menu-icon .nav-icon{
        background-color: #000000cc;
        display: block;
        height: 2px;
        position: relative;
        transition: background 0.2s ease-out;
        width: 25px;
    }
    nav .menu-icon .nav-icon::before,
    nav .menu-icon .nav-icon::after{
        background-color: #000000cc;
        content: '';
        position: absolute;
        height: 100%;
        display: block;
        width: 100%;
        transition: all ease-out 0.2s;
    }
    nav .menu-icon .nav-icon::before{
        top: 5px;
    }
    nav .menu-icon .nav-icon::after{
        top: -5px;
    }
    nav .menu-icon .nav-icon,
    nav .menu-icon:checked ~ .menu-icon .nav-icon{
        background-color: transparent;
    }
    nav .menu-btn:checked ~ .menu-icon .nav-icon::before{
        transform: rotate(-45deg);
        top: 0px;
    }
    nav .menu-btn:checked ~ .menu-icon .nav-icon::after{
        transform: rotate(45deg);
        top: 0px;
    }
    nav .menu-btn:checked ~ .blog-filter{
        display: flex;
    }

}
@media(max-width:500px){
    .blog-container{
        width:100%;
    }
    footer{
        flex-direction: column;
    }
    .footer-social{
        margin-top: 10px;
    }
    .ad{
        width: 90%;
    }
}
.blog-text a strong:hover{
    color: #6d7ca1;
    transition: all ease 0.2s;
}
Article Page Code
Create Blog Article Page HTML

➤Article Page HTML Code have given below.


  <!--doctype html-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, intial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Blog - Article</title>
<!--Stylesheet----------------------------------->
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<!--fav-icon------------------------------------->
<link rel="shortcut icon" href="images/fav-icon.png"/>
<!--using-font-awesome--------------------------->
<script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
<!--poppins-font-family-------------------------->
<link rel="preconnect" href="https://fonts.gstatic.com">
<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>


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

            <!--logo---------->
            <a href="index.html" class="logo">
                <i class="fas fa-blog"></i> Blog
            </a>

        </div>
    



        <section id="blog-artcile">

            <!--side-ad---------->
            <div class="side-ad">
                <a href="#">
                    <img alt="ads" src="images/side-ad.jpg">
                </a>
            </div>




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

                <!--main-heading------------------->
                <div class="article-main-heading">
                    <h1>How to Create Ramdan Time App Design</h1>
                </div>

                <!--publisher-name-and-date-------->
                <div class="by-date">
                    <!--name------->
                    <div class="article-by">
                        <i class="far fa-user"></i>
                        <span>Touseeq Ijaz</span>
                    </div>
                    <!--date------->
                    <div class="article-date">
                        <i class="far fa-clock"></i>
                        <p><span>20</span>-<span>05</span>-<span>2021</span></p>
                    </div>
                </div>


                <!--article-img--------------------------------->
                <div class="article-img">
                    <img alt="img" src="images/app.png"/>
                </div>

                <!--ad-------------------------------------->
                <div class="content-ad">
                    <a href="#">
                        <img alt="ads" src="images/ad-home.png">
                    </a>
                </div>

                <!--text----------------------------------->
                <div class="article-text">

                    <!--box-1-------------->
                    <div class="article-text-box">
                        <strong>Heading 1</strong>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam omnis aperiam, ipsa quis accusamus, doloremque sit explicabo error, earum aut fugiat! Non a quidem molestias soluta alias quasi dignissimos veniam!</p>
                        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis esse, ratione natus velit minus, labore vero distinctio error nulla similique accusantium. Sapiente dolores ipsam nesciunt ducimus soluta iusto, tempore dolorem?</p>
                    </div>

                    <!--box-1-------------->
                    <div class="article-text-box">
                        <strong>Heading 2</strong>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam omnis aperiam, ipsa quis accusamus, doloremque sit explicabo error, earum aut fugiat! Non a quidem molestias soluta alias quasi dignissimos veniam!</p>
                    </div>

                    <!--box-1-------------->
                    <div class="article-text-box">
                        <strong>Heading 3</strong>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam omnis aperiam, ipsa quis accusamus, doloremque sit explicabo error, earum aut fugiat! Non a quidem molestias soluta alias quasi dignissimos veniam!</p>
        
                    </div>

                    <!--box-1-------------->
                    <div class="article-text-box">
                        <strong>Heading 4</strong>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam omnis aperiam, ipsa quis accusamus, doloremque sit explicabo error, earum aut fugiat! Non a quidem molestias soluta alias quasi dignissimos veniam!</p>
                        
                    </div>

                </div>
            </div>




            <!--side-ad----------->
            <div class="side-ad">
                <a href="#">
                    <img alt="ads" src="images/side-ad.jpg">
                </a>
            </div>

        </section>


        <!--ad----------------------->
        <div class="ad">
            <a href="#">
                <img alt="ads" src="images/ad-home.png">
            </a>
        </div>


    <!--footer------------------------------------->
    <footer>
        <span class="copyright">Copyright 2021 - GoingToInternet</span>
        <!--social-links------->
        <div class="footer-social">
            <a href="#"><i class="fab fa-facebook-f"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
        </div>
    </footer>


</body>
</html>

➤Article Page CSS Code is have given below.

/*--Article-page----------------------------*/
#blog-artcile{
    display: grid;
    grid-template-columns: 1fr 900px 1fr;
}
.article-container{
    background-color: #ffffff;
    border-left: 1px solid rgba(0,0,0,0.13);
    border-right: 1px solid rgba(0,0,0,0.13);
    padding: 30px;
}
.side-ad{
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.side-ad a{
    position: fixed;
}
.article-main-heading{
    display: flex;
    justify-content: center;
    align-items: center;
}
.article-main-heading h1{
    color: #313131;
    font-size: 2rem;
    font-weight: 600;
    line-height: 40px;
}
.by-date{
    display: flex;
    align-items: center;
    justify-content: center;
    width:100%;
}
.article-by,
.article-date{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    color: #838eab;
}
.article-by i,
.article-date i{
    margin: 0px 10px;
}
.article-img{
    width:100%;
    min-height: 500px;
    margin: 10px 0px;
    display: flex;
    border-radius: 10px;
    overflow: hidden;
}
.article-img img{
    width:100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.content-ad{
    width:80%;
    display: flex;
    margin: 20px auto 10px auto;
}
.content-ad img{
    width:100%;
    object-position: center;
    object-fit: contain;
}
.article-text{
    display: flex;
    flex-direction: column;
}
.article-text-box{
    margin: 10px 0px;
    box-shadow: 2px 2px 30px rgba(0,0,0,0.06);
    padding: 10px;
    border-left: 2px solid #20232b;
    background-color: #ffffff;
}
.article-text-box strong{
    color: #20232b;
    font-size: 1.3rem;
    margin-top: 4px;
    font-weight: 500;
}
.article-text-box p{
    color: #6d6d6d;
}
/*---Making-article-page-responsive--------------------*/
@media(max-width:1250px){
    #blog-artcile{
        grid-template-columns: 1fr 800px 1fr;
    }
}
@media(max-width:1150px){
    #blog-artcile{
        display: flex;
        width:80%;
        margin: auto;
    }
    .side-ad{
        display: none;
    }
}
@media(max-width:1000px){
    #blog-artcile{
        width:90%;
    }
    .article-img{
        max-height: auto;
        min-height: auto;
    }
}
@media(max-width:600px){
    #blog-artcile{
        width:100%;
        padding: 0px 10px;
    }
    .article-container{
        padding: 20px 10px;
    }
    .article-main-heading h1{
        font-size: 1.8rem;
        line-height: 30px;
    }
    .content-ad{
        width:100%;
    }
    .article-text-box p{
        font-size: 0.9rem;
    }
}





How To Dowload Files
Share
Post a Comment Labels, ,

Comments


Archive

Contact Form

Send