Tourism blog

 Tourism Blog Front End

Introduction:

In This Blog We Provide The How To Create Tourism Blog Front End Using HTML, CSS and little bit Java Script? In This Blog We Provide Solution of this question ❓ Hey Guys ✊ See the actual code we provide in this blog.

First Step is any project creation to create specific folder πŸ“  And That Folder create assets folder πŸ“‚ this folder store all images of that project. Second Folder Create Blog folder This folder store all blogs. Next step create simple file name is script.js, index.html,style.css.

In this project we use The google fronts, and font awesome icons, link is given bellow:πŸ‘‡

Google FontsπŸ‘‰https://fonts.google.com/

Font Awesome IconsπŸ‘‰https://fontawesome.com/v4.7/icons/

Let's See actual code ,

Index.html CodeπŸ‘‡\

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>To Travel Is To Live</title>

    <!-- ---------Font Awsome CDN-------------- -->

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

    <!-- ----X-----Font Awsome CDN----X-------- -->


    <!-- ----------Google Fonts---------------- -->

        <link rel="preconnect" href="https://fonts.gstatic.com">

        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital@0;1&display=swap" rel="stylesheet">

    <!-- -------X---Google Fonts------X-------- -->


    <!-- ---------External Style Sheet--------- -->

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

    <!-- -----X---External Style Sheet----X---- -->

</head>

<body>

    <!-- ---------------Navigation Menu--------------------- --->

        <nav class="nav-bar">

            <div class="nav-menu d-flex">

                <div class="nav-brand">

                    <a href="#">Tourisum <p>Blog</p></a>

                </div>

                <div class="toggle" id="nav-toggle">

                    <i class="fa fa-bars" aria-hidden="true"></i>

                </div>

                <div class="nav-collaps">

                    <ul class="nav-items">

                        <li class="nav-link">

                            <a href="#">Home</a>

                        </li>

                        <li class="nav-link">

                            <a href="#about">About us</a>

                        </li>

                        <li class="nav-link">

                            <a href="#blog">Blog</a>

                        </li>

                        <li class="nav-link">

                            <a href="#contact-us">Countact us</a>

                        </li>

                    </ul>

                </div>

                <div class="nav-collaps">

                    <ul class="nav-social">

                        <li class="nav-link">

                            <a href="#"><i class="fa fa-search" aria-hidden="true"></i></a>

                        </li>

                        <li class="nav-link">

                            <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>

                        </li>

                        <li class="nav-link">

                            <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>

                        </li>

                        <li class="nav-link">

                            <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>

                        </li>

                    </ul>

                </div>

            </div>

        </nav>

    <!-- ---------X------Navigation Menu--------x------------ -->


    <!-- ----------------Home Banner------------------------- -->

        <div class="caption" id="home">

            <h2>Open Your Eyes !</h2>

            <h1>To The Beautiful World</h1>

            <h3>We provide the best tourisum blogs.</h3>

        </div>

        <div class="home-img">

            <img src="assets/banner/banner.jpg" alt="">

        </div>

    <!-- --------X-------Home Banner---------X--------------- -->


    <!-- ---------------------About Us----------------------- -->

       <div class="about" id="about">

            <h2>About Us</h2>

            <div class="line"></div>

            <div class="about-row">

                <div class="cotant-about">

                    <p><span><i class="fa fa-quote-left" aria-hidden="true"></i></span>  our team create the Tourisum blog. this blog esse to understand.  <span><i class="fa fa-quote-right" aria-hidden="true"></i></span></p>

                </div>

                <div class="img-about">

                    <img src="assets/about/about.jpg" alt="">

                </div>

            </div>

       </div>

    <!-- -------X-------------About Us---------X------------- -->


    <!-- -----------------Our Blog--------------------------- -->

       <div class="blog" id="blog">

            <h2>Our Bloges</h2>

            <div class="line"></div>

            <div class="blog-row">

                <!-- blog-1 -->

                    <div class="blog-card">

                        <div class="blog-image">

                            <img src="assets/blog/Agra1.jpg" alt="">

                        </div>

                        <div class="blog-information">

                            <h3>The Taj Mahal – Visit India’s Favourite Heritage Monument In 2021!</h3>

                            <p> Famous poet Rabindranath Tagore portrayed it as ‘a teardrop on the cheek of the universe’ and Rudyard Kipling called it ‘the embodiment of all things pure’. Mughal emperor Shah Jahan famously said – “it made the moon and the sun drop tears on it”.</p>

                        </div>

                        <div class="blog-footer">

                            <div class="blog-update">

                                <div class="creater-name">

                                    <p><i class="fa fa-user" aria-hidden="true"></i> <span>Kanika Saxena</span></p>

                                </div>

                                <div class="blog-time">

                                    <p><i class="fa fa-clock-o" aria-hidden="true"></i> <span>Jan 1, 2021</span></p>

                                </div>

                                <div class="blog-comments">

                                    <p><i class="fa fa-commenting-o" aria-hidden="true"></i> <span>32</span></p>

                                </div>

                                <div class="blog-more">

                                    <a href="blogs/blog-1.html"><button class="blog-more-btn">Read More</button></a>

                                </div>

                            </div>

                        </div>

                    </div>

                <!-- -X-Blog-1 Card-X -->


                <!-- blog-2 -->

                    <div class="blog-card">

                        <div class="blog-image">

                            <img src="assets/blog/Agra1.jpg" alt="">

                        </div>

                        <div class="blog-information">

                            <h3>The Taj Mahal – Visit India’s Favourite Heritage Monument In 2021!</h3>

                            <p> Famous poet Rabindranath Tagore portrayed it as ‘a teardrop on the cheek of the universe’ and Rudyard Kipling called it ‘the embodiment of all things pure’. Mughal emperor Shah Jahan famously said – “it made the moon and the sun drop tears on it”.</p>

                        </div>

                        <div class="blog-footer">

                            <div class="blog-update">

                                <div class="creater-name">

                                    <p><i class="fa fa-user" aria-hidden="true"></i> <span>Kanika Saxena</span></p>

                                </div>

                                <div class="blog-time">

                                    <p><i class="fa fa-clock-o" aria-hidden="true"></i> <span>Jan 1, 2021</span></p>

                                </div>

                                <div class="blog-comments">

                                    <p><i class="fa fa-commenting-o" aria-hidden="true"></i> <span>32</span></p>

                                </div>

                                <div class="blog-more">

                                    <a href="blogs/blog-1.html"><button class="blog-more-btn">Read More</button></a>

                                </div>

                            </div>

                        </div>

                    </div>

                <!-- -X-Blog-1 Card-X -->


                <!-- blog-3 -->

                    <div class="blog-card">

                        <div class="blog-image">

                            <img src="assets/blog/Agra1.jpg" alt="">

                        </div>

                        <div class="blog-information">

                            <h3>The Taj Mahal – Visit India’s Favourite Heritage Monument In 2021!</h3>

                            <p> Famous poet Rabindranath Tagore portrayed it as ‘a teardrop on the cheek of the universe’ and Rudyard Kipling called it ‘the embodiment of all things pure’. Mughal emperor Shah Jahan famously said – “it made the moon and the sun drop tears on it”.</p>

                        </div>

                        <div class="blog-footer">

                            <div class="blog-update">

                                <div class="creater-name">

                                    <p><i class="fa fa-user" aria-hidden="true"></i> <span>Kanika Saxena</span></p>

                                </div>

                                <div class="blog-time">

                                    <p><i class="fa fa-clock-o" aria-hidden="true"></i> <span>Jan 1, 2021</span></p>

                                </div>

                                <div class="blog-comments">

                                    <p><i class="fa fa-commenting-o" aria-hidden="true"></i> <span>32</span></p>

                                </div>

                                <div class="blog-more">

                                    <a href="blogs/blog-1.html"><button class="blog-more-btn">Read More</button></a>

                                </div>

                            </div>

                        </div>

                    </div>

                <!-- -X-Blog-3 Card-X -->


                <!-- blog-4 -->

                    <div class="blog-card">

                        <div class="blog-image">

                            <img src="assets/blog/Agra1.jpg" alt="">

                        </div>

                        <div class="blog-information">

                            <h3>The Taj Mahal – Visit India’s Favourite Heritage Monument In 2021!</h3>

                            <p> Famous poet Rabindranath Tagore portrayed it as ‘a teardrop on the cheek of the universe’ and Rudyard Kipling called it ‘the embodiment of all things pure’. Mughal emperor Shah Jahan famously said – “it made the moon and the sun drop tears on it”.</p>

                        </div>

                        <div class="blog-footer">

                            <div class="blog-update">

                                <div class="creater-name">

                                    <p><i class="fa fa-user" aria-hidden="true"></i> <span>Kanika Saxena</span></p>

                                </div>

                                <div class="blog-time">

                                    <p><i class="fa fa-clock-o" aria-hidden="true"></i> <span>Jan 1, 2021</span></p>

                                </div>

                                <div class="blog-comments">

                                    <p><i class="fa fa-commenting-o" aria-hidden="true"></i> <span>32</span></p>

                                </div>

                                <div class="blog-more">

                                    <a href="blogs/blog-1.html"><button class="blog-more-btn">Read More</button></a>

                                </div>

                            </div>

                        </div>

                    </div>

                <!-- -X-Blog-4 Card-X -->


                <!-- blog-5 -->

                    <div class="blog-card">

                        <div class="blog-image">

                            <img src="assets/blog/Agra1.jpg" alt="">

                        </div>

                        <div class="blog-information">

                            <h3>The Taj Mahal – Visit India’s Favourite Heritage Monument In 2021!</h3>

                            <p> Famous poet Rabindranath Tagore portrayed it as ‘a teardrop on the cheek of the universe’ and Rudyard Kipling called it ‘the embodiment of all things pure’. Mughal emperor Shah Jahan famously said – “it made the moon and the sun drop tears on it”.</p>

                        </div>

                        <div class="blog-footer">

                            <div class="blog-update">

                                <div class="creater-name">

                                    <p><i class="fa fa-user" aria-hidden="true"></i> <span>Kanika Saxena</span></p>

                                </div>

                                <div class="blog-time">

                                    <p><i class="fa fa-clock-o" aria-hidden="true"></i> <span>Jan 1, 2021</span></p>

                                </div>

                                <div class="blog-comments">

                                    <p><i class="fa fa-commenting-o" aria-hidden="true"></i> <span>32</span></p>

                                </div>

                                <div class="blog-more">

                                    <a href="blogs/blog-1.html"><button class="blog-more-btn">Read More</button></a>

                                </div>

                            </div>

                        </div>

                    </div>

                <!-- -X-Blog-5 Card-X -->

            </div>

        </div>

    <!-- --------X---------Our Blog----------X--------------- -->

    <!-- https://traveltriangle.com/blog/famous-historical-places-in-india/ -->

    <!-- -----------------Testiomonials----------------------- -->

        <div class="testimonials">

            <h2>Testimonials</h2>

            <div class="line"></div>

            <div class="testimonials-row">

                <div class="testimonials-card-body">

                    <div class="testimonials-person-information">

                        <div class="person-image">

                            <img src="assets/testiomonial/testimonial1.jpg" alt="">

                        </div>

                        <div class="prson-name">

                            <h3>Jena Karlis</h3>

                        </div>

                    </div>

                    <div class="testimonials-person-experiance">

                        <p><span><i class="fa fa-quote-left" aria-hidden="true"></i></span>  This Provided blog is very helpfull me for trip planning. <span><i class="fa fa-quote-right" aria-hidden="true"></i></span></p>

                    </div>

                </div>

                <div class="testimonials-card-body">

                    <div class="testimonials-person-information">

                        <div class="person-image">

                            <img src="assets/testiomonial/testimonials-2.jpg" alt="">

                        </div>

                        <div class="prson-name">

                            <h3>John Larson</h3>

                        </div>

                    </div>

                    <div class="testimonials-person-experiance">

                        <p><span><i class="fa fa-quote-left" aria-hidden="true"></i></span> This Provided blog is very helpfull me for trip planning. <span><i class="fa fa-quote-right" aria-hidden="true"></i></span></p>

                    </div>

                </div>

                <div class="testimonials-card-body">

                    <div class="testimonials-person-information">

                        <div class="person-image">

                            <img src="assets/testiomonial/testimonials-3.jpg" alt="">

                        </div>

                        <div class="prson-name">

                            <h3>Sara Wilsson</h3>

                        </div>

                    </div>

                    <div class="testimonials-person-experiance">

                        <p><span><i class="fa fa-quote-left" aria-hidden="true"></i></span>  This Provided blog is very helpfull me for trip planning.    <span><i class="fa fa-quote-right" aria-hidden="true"></i></span></p>

                    </div>

                </div>

                <div class="testimonials-card-body">

                    <div class="testimonials-person-information">

                        <div class="person-image">

                            <img src="assets/testiomonial/testimonials-4.jpg" alt="">

                        </div>

                        <div class="prson-name">

                            <h3>saul Goodman</h3>

                        </div>

                    </div>

                    <div class="testimonials-person-experiance">

                        <p><span><i class="fa fa-quote-left" aria-hidden="true"></i></span> This Provided blog is very helpfull me for trip planning.   <span><i class="fa fa-quote-right" aria-hidden="true"></i></span></p>

                    </div>

                </div>

            </div>

        </div>

    <!-- ------------X----Testiomonials---X---------------------->


    <!-- ------------------Countact Us----------------------- -->

        <div class="contact-us" id="contact-us">

            <h2>Countact Us</h2>

            <div class="line"></div>

            <div class="countact-row">

                <div class="countact-location-information">

                    <div class="countact-address">

                        <i class="fa fa-map-marker" aria-hidden="true"></i>

                        <h3>Our Address</h3>

                        <p>A108 Adam Street, New York, NY 535022</p>

                    </div>

                    <div class="other-countact-detailes">

                        <div class="contact-mail">

                            <i class="fa fa-envelope-o" aria-hidden="true"></i>

                            <h3>Email Us</h3>

                            <p>countact@tourisum.com</p>

                        </div>

                        <div class="countact-phone">

                            <i class="fa fa-phone" aria-hidden="true"></i>

                            <h3>Call Us</h3>

                            <p>+1 5589 55488 55</p>

                        </div>

                    </div>

                </div>

                <div class="countact-form">

                    <div class="cotact-input">

                        <div class="contact-in-name">

                            <input type="text" placeholder="Your Name">

                        </div>

                        <div class="contact-in-email">

                            <input type="email" placeholder="Your Email">

                        </div>

                    </div>

                    <div class="contact-subject">

                        <input type="text" placeholder="Subject">

                    </div>

                    <div class="contact-message">

                        <textarea name="" id="" cols="30" rows="9" placeholder="Message"></textarea>

                    </div>

                    <div class="submit">

                        <button class="countact-submit-btn">Send Message</button>

                    </div>

                </div>

            </div>

        </div>

    <!-- -----------X------Countact Us-------X--------------- -->


    <!-- ---------------------Footer------------------------- -->

        <div class="footer">

            <div class="footer-row">

                <h2>Tourisum</h2>

                <h3>Blog</h3><br>

                <p>&copy; Tourisum Blog ~ 2021. All rights reserved.</p>

            </div>

            <div class="developer">

                <div class="develop-name">

                    <p>Designed by ~ <span>RCP Student Krushnali Rajput & Team</span></p>

                </div>

                <div class="developer-contact">

                    <a href="https://pruthviraj-rajput-portfolio.rf.gd/"><i class="fa fa-handshake-o" aria-hidden="true"></i></a>

                    <a href="https://www.linkedin.com/in/pruthviraj-rajput-131ba61b4/"><i class="fa fa-linkedin" aria-hidden="true"></i></a>

                    <a href="https://github.com/pruthvi7384"><i class="fa fa-github" aria-hidden="true"></i></a>

                </div>

            </div>

        </div>

    <!-- ------------X--------Footer--------X---------------- -->


    <!-- --------Java Script File Link Here------------ -->

    <script src="js/script.js"></script>

    <!-- -X------Java Script File Link Here---X-------- -->

</body>

</html>


Style.css CodeπŸ‘‡

*{

    margin:0;

    padding:0;

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

  }

body{

    font-family: 'Open Sans', sans-serif;

    background-color: #fff;

}


/* ===========Declear the Global Class============== */

    .message{

        Display: none;

    }

    ul{

        list-style-type: none;

    }

    a{

        text-decoration: none;

    }

    .d-flex{

        display:flex;

        flex-direction:row;

        flex-wrap: wrap;

    }

    .line{

        width: 5%;

        margin-top: 8px;

        height: 3px;

        position: absolute;

        right: 47%;

        left: 47%;

        border-radius:3px;

        background-color: #6494ed;

    }

    input{

        border-radius: 5px;

        border:1px solid #000;

    }

    textarea{

        border-radius: 5px;

        border:1px solid #000;

    }

    input:focus{

        outline: none;

    }

    textarea:focus{

        outline: none;

    }

/* =======X===Declear the Global Class====X========= */


/* ================Section Styleing======================= */


    /* ============Navigation bar styleing============= */

        .nav-bar{

            padding: 15px 15px;

            background-color: #FFFFFF;

        }

        .nav-menu{

            justify-content: space-between;

            align-items: center;

        }

        .nav-brand{

            padding: 0px 15px;

        }

        .nav-link{

            padding: 0px 15px;

        }

        .nav-link a{

            font-size: 18px;

            color: #111111;

            font-weight: bold;

            text-transform:uppercase;

            transition: 0.5s ease-in-out; 

        }

        .nav-link a:hover{

            color:#6494ed;

        }

        .nav-brand a{

            font-size:30px;

            color: #111111;

            font-weight: bold;

        }

        .nav-brand a p{

            font-size: 25px;

        }

        .nav-items,.nav-social{

            display: flex;

        }

        .toggle i{

            font-size:28px;

            color: #111111;

            display:none

        }

    /* =======X====Navigation bar styleing=====X======= */


    /*==========Home Section (Banner Styleing)===========  */

        .home-img img{

            width: 100%;

            height: 85vh;

        }

        .caption{

        position: absolute;

        width: 100%;

        height: 85vh;

        display:flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        text-align: center;

        background-color: #6494ed8e;

        }

        .caption h2{

            font-size: 30px;

            color:#FFFFFF;

            text-transform: capitalize;

        }

        .caption h1{

            font-size: 50px;

            text-transform: uppercase;

            color:#FFFFFF;

        }

        .caption h3{

            font-size: 25px;

            color:#FFFFFF;

            text-transform: capitalize;

        }

    /*======X===Home Section (Banner Styleing)======X==== */


    /* ==========About section style================== */

        .about{

            width: 100%;

            margin-top: 50px;

            padding: 0 15%;

        }

        .about-row{

            display: flex;

            flex-direction: row;

            justify-content: space-around;

            align-items: center;

            margin-top: 30px;

        }

        .about h2{

            margin-top: 10px;

            text-align: center;

            text-transform: uppercase;

            font-size:32px;

            color: #444444;

        }

        .img-about img{

            height: 400px;

        }

        .cotant-about p{

            font-size: 28px;

            font-weight: bold;

            color: #1111119d;

            text-transform: capitalize;

            cursor: pointer;

        }

        .cotant-about p span{

            font-size: 35px;

        }

    /* ======X===About section style=====X=========== */


    /* ===============Blog Section=================== */

        .blog{

            width: 100%;

            margin-top: 50px;

            padding: 0 15px;

        }

        .blog h2{

            margin-top: 10px;

            text-align: center;

            text-transform: uppercase;

            font-size:32px;

            color: #444444;

        }

        .blog-row{

            margin-top: 50px;

            display: flex;

            justify-content: space-around;

            flex-wrap: wrap;

            padding: 15px;

        }

        .blog-card{

            width: 33%;

            background-color: #FFFFFF;

            box-shadow: 0 4px 16px rgb(0 0 0 / 10%);

            margin: 10px 2px;

        }

        .blog-image img{

            width: 100%;

        }

        .blog-information{

            padding: 20px;

            border-bottom: 1px solid rgba(0, 0, 0, 0.342);

            cursor: pointer;

        }

        .blog-information h3{

            font-size: 28px;

            color:#111111;

            font-weight: bold;

            text-transform: capitalize;

        }

        .blog-information p{

            margin-top: 8px;

            font-size: 16px;

            color:#444444;

        }

        .blog-update{

            display: flex;

            justify-content: space-around;

            flex-wrap: wrap;

            padding:10px;

            align-items: center;

            cursor: pointer;

        }

        .blog-update p{

            font-size: 14px;

            color: #777777;

            text-transform: capitalize;

        }

        .blog-update p i{

            font-size: 16px;

        }

        .blog-update .blog-more .blog-more-btn{

            padding:10px 20px;

            background-color: #6494ed;

            color: #FFFFFF;

            border: none;

            border-radius: 3px;

            cursor: pointer;

            margin-top: 5px;

        }

        .blog-update .blog-more .blog-more-btn:focus{

            outline: none;

        }

    /* =======X=======Blog Section======X============= */


    /* ==============testimonials====================== */

        .testimonials{

            width: 100%;

            margin-top: 50px;

        }

        .testimonials h2{

            margin-top: 10px;

            text-align: center;

            text-transform: uppercase;

            font-size:32px;

            color: #444444;

        }

        .testimonials-row{

            margin-top: 10px;

            display: flex;

            padding: 50px;

            overflow-y: scroll;

            scroll-behavior: smooth;

        }

        .testimonials-row::-webkit-scrollbar {

            display: none;

          }

        .testimonials-card-body{

            background-color: #FFFFFF;

            box-shadow: 0 4px 16px rgb(0 0 0 / 10%);

            padding: 20px;

            margin: 0px 10px;

            cursor: pointer;

            transition: all 0.5s ease-in-out;

            border-radius: 10px;

        }

        .testimonials-card-body:hover{

            transform: translateY(-10px);

            box-shadow: 0 4px 16px #6494ed;

        }

        .testimonials-person-information{

            margin-top:10px;

            display: flex;

            flex-direction:column;

            justify-content: space-evenly;

            align-items: center;

        }

        .testimonials-person-information .person-image img{

            width: 100px;

            height: 100px;

            border-radius: 50%;

        }

        .prson-name h3{

            font-size: 18px;

            color: #111111;

            text-transform: capitalize;

        }

        .testimonials-person-experiance{

            margin-top: 10px;

        }

        .testimonials-person-experiance p{

            font-size: 16px;

            color: #444444;

        }

        .testimonials-person-experiance p span{

            font-size: 18px;

            color: #444444;

        }

    /* =========X====testimonials========X============= */


    /* =================Contact Us====================== */

        .contact-us{

            width: 100%;

            margin-top: 10px;

        }

        .contact-us h2{

            margin-top: 10px;

            text-align: center;

            text-transform: uppercase;

            font-size:32px;

            color: #444444;

        }

        .countact-row{

            margin-top: 10px;

            display: flex;

            justify-content: center;

            align-items: center;

            padding: 50px;

        }

        .countact-location-information{

            display: flex;

            flex-direction: column;

            text-align: center;

        }

        .countact-location-information i{

            font-size: 32px;

            color: #6494ed;

            cursor: pointer;

            background-color: #FFFFFF;

            box-shadow: 0 4px 16px rgb(0 0 0 / 10%);

            padding: 10px;

            border-radius: 50%;

        }

        .countact-location-information h3{

            color:#777777;

            font-size: 20px;

        }

        .countact-location-information p{

            color: #444444;

            font-size:14px;

        }

        .countact-address{

            background-color: #FFFFFF;

            box-shadow: 0 4px 16px rgb(0 0 0 / 10%);

            padding: 40px;

        }

        .other-countact-detailes{

            margin-top: 10px;

            display: flex;

            justify-content: space-between;

        }

        .contact-mail{

            background-color: #FFFFFF;

            box-shadow: 0 4px 16px rgb(0 0 0 / 10%);

            padding: 40px;

        }

        .countact-phone{

            background-color: #FFFFFF;

            box-shadow: 0 4px 16px rgb(0 0 0 / 10%);

            padding: 40px;

            margin-left:10px;

        }

        .countact-form{

            background-color: #FFFFFF;

            box-shadow: 0 4px 16px rgb(0 0 0 / 10%);

            padding: 30px;

            margin-left: 15px;

        }

        .cotact-input{

            display: flex;

            justify-content: space-between;

        }

        .contact-in-name input{

            padding: 10px;

        }

        .contact-in-email input{

            padding: 10px;

            margin-left: 10px;

        }

        .contact-subject input{

            width: 100%;

            padding: 10px;

            margin-top: 10px;

        }

        .contact-message textarea{

            width: 100%;

            padding: 10px;

            margin-top: 10px;

        }

        .submit{

            text-align: center;

        }

        .countact-submit-btn{

            margin-top: 10px;

            padding: 10px 20px;

            background-color: #6494ed;

            color: #FFFFFF;

            border: none;

            border-radius: 3px;

            cursor: pointer;

        }

        .countact-submit-btn:focus{

            outline: none;

        }

    /* ====X============Countact Us===================== */


    /* ===================Footer======================== */

        .footer{

            width: 100%;

            margin-top: 10px;

        }

        .footer-row{

            margin-top: 10px;

            padding: 50px;

            background-color: #1b1b1b;

            text-align: center;

            color: #FFFFFF;

            border-bottom: 1px solid #ccc;

        }

        .footer-row h2{

            font-size: 38px;

        }

        .footer-row h3{

            font-size: 25px;color: #6494ed;

        }

        .developer{

            padding:10px;

            background-color: #111111;

            display: flex;

            justify-content:space-around;

            align-items:center;

        }

        .develop-name p{

            color: #ffffff;

        }

        .develop-name p span{

            color: #6494ed;

            font-size: 20px;

            text-transform: capitalize;

        }

        .developer-contact a{

            padding:10px;

            font-size:20px;

            color: #6494ed;

        }

    /* ======X=============Footer=====X================= */

/* ========X=======Section Styleing===============X======= */


/* =============Responsive===================== */

        @media(max-width:1256px){

            .img-about img{

                height:300px;

            }

            .blog-card{

                width:45%;

            }

        }

        @media(max-width:1000px){

            .countact-row{

                flex-direction: column;

            }

            .countact-form{

                margin-left: 0px;

                margin-top: 10px;

            }

        }

        @media(max-width:900px){

            .d-flex{

                flex-direction: column;

            }

            .nav-items,.nav-social{

                padding-top: 30px;

            }

            .img-about img{

                height:250px;

            }

        }

        @media(max-width:768px){

            .img-about img{

                height:200px;

            }

        }

        @media(max-width:650px){

            .about-row{

                flex-direction: column;

            }

            .line{

                width:10%;

            }

            .blog-card{

                width: 100%;

            }

            .testimonials-row{

                padding:0px;

                margin-top:50px;

            }

            .other-countact-detailes{

                flex-direction: column;

            }

            .countact-phone{

                margin-left: 0px;

            }

            .countact-phone{

                margin-top: 10px;

            }

        }

        @media(max-width:464px){

            .developer{

                flex-direction: column;

                text-align: center;

            }

            .nav-items{

                flex-direction: column;

                align-items: center;

            }

            .nav-menu{

                overflow: hidden;

            }

            .nav-collaps{

               height:100px;

               display:none;

               transition: all 0.5s ease-in-out;

            }

            .nav-collaps-show{

                display:block;

            }

            .nav-social{

                padding-top:50px;

            }

            .countact-form{

                margin-left: 0px;

            }

            .cotact-input{

                flex-direction: column;

            }

            .contact-in-name input{

                width: 100%;

            }

            .contact-in-email input{

                margin-left: 0px;

                margin-top:10px;

                width: 100%;

            }

            .toggle i{

                position: absolute;

                padding:40px 10px;

                top: 0;

                right: 0;

                display:block;

            }

        }


/* =============Responsive===================== */


/* ==================Blog Body========================= */


    /* ==============Blog Path================== */

        .blog-path{

            width: 100%;

            padding: 20px;

            background-color: #2b2b2b;

        }

        .blog-path-row ul{

            padding:10px;

            display: flex;

            align-items:center;

        }

        .blog-path-row ul li{

            padding: 0px 10px;

        }

        .blog-path-row ul li a{

            color: #aaaaaa;

            transition: all 0.5s ease-in-out;

        }

        .blog-path-row ul li a:hover{

            color: #fff;

        }

    /* =====X========Blog Path========X========= */


    /* =================Blog================= */

        .blog-post{

            width: 100%;

            padding:50px;

            display:flex;

        }

        .blog-left-body{

            width:70%;

        }

        .blog-post-body{

            background-color: #FFFFFF;

            box-shadow: 0 4px 16px rgb(0 0 0 / 10%);

        }

        .blog-post-body .blog-post-img img{

            width: 100%;

        }

        .blog-post-detailes{

            padding: 20px 30px;

            cursor: pointer;

        }

        .blog-post-detailes h3{

            padding: 0px 0px 20px 0px;

            font-size: 28px;

            color:#111111;

            font-weight: bold;

            text-transform: capitalize;

        }

        .blog-post-detailes ul{

            display: flex;

        }

        .blog-post-detailes ul li{

            padding-right: 30px;

            color: #444444;

            font-size: 16px;

        }

        .blog-post-detailes ul li span{

            font-size:14px;

        }

        .blog-post-detailes img{

            width:60%;

            border:2px solid #6494ed;

            box-shadow: 0 4px 16px #6494ed;

            border-radius:5px;

        }

        .blog-post-detailes p{

            margin-top: 20px;

            color: #444444;

            font-size:16px;

        }

        .blog-post-detailes b{

            font-size:22px;

            color: #444444;

            font-weight: bold;

        }

    /* ===========X=====Blog======X========== */


    /* ==============Publisher details ============ */

        .publisher-details{

            background-color: #FFFFFF;

            box-shadow: 0 4px 16px rgb(0 0 0 / 10%);

            margin-top: 10px;

            padding:20px 30px;

        }

        .publisher-details{

            display: flex;

            align-items: center;

        }

        .publisher-details img{

            border-radius: 50%;

        }

        .publisher-details div{

            padding: 20px;

        }

    /* =======X======Publisher details =====X====== */


    /* ===============Comments======================= */

        .commaints{

            margin-top: 20px;

        }

        .commaints h2{

            font-size:30px;

            text-transform: capitalize;

            color: #111111;

        }

        .commaints h2 span{

            font-size:38px;

            color: #6494ed;

        }

        .comments-row{

            margin-top: 20px;

        }

        .comments-body{

            display: flex;

            padding: 20px;

        }

        .comments-body img{

            border-radius:50%;

            width: 100px;

            height: 100px;

            padding: 10px;

        }

        .comments-body div{

            padding: 10px;

        }

    /* ==========X====Comments=======X============== */


    /* ===============Replay form============== */

        .replay-form{

            background-color: #FFFFFF;

            box-shadow: 0 4px 16px rgb(0 0 0 / 10%);

            margin-top: 10px;

            padding:20px 30px;

            display:flex;

            flex-direction: column;

        }

        .replay-form h3{

            font-size: 22px;

            color:#444444;

            text-align: center;

        }

        .replay-form input{

            width: 100%;

            padding: 10px;

            margin:10px 0px;

        }

    /* =========X=====Replay form=====X======== */


    /* ===========Right Recent Post Section===== */

        .related-blog{

            background-color: #FFFFFF;

            box-shadow: 0 4px 16px rgb(0 0 0 / 10%);

            margin-left:15px;

            width:30%;

            padding:20px;

        }

        .related-blog h3{

            text-align: center;

            font-size:30px;

            color: #444444;

        }

        .rcent-post{

            display: flex;

            align-items: center;

            cursor: pointer;

            margin-top: 10px;

        }

        .rcent-post img{

            width:100px;

            height: 100px;

            border-radius: 3px;

            border:2px solid #6494ed;

        }

        .recent-post-detailes{

            padding:8px;

        }

        .recent-post-detailes p{

            font-size:16px;

            color:#111111;

            font-weight: bold;

        }

        .recent-post-detailes p span{

            font-size:15px;

            color:#444444;

            font-weight: normal;

        }

        .recent-post-column{

            margin-top: 10px;

        }

    /* ======X====Right Recent Post Section===X==*/


    /* ====================Responsive Blog===================== */

        @media(max-width:1000px) {

            .blog-post{

                flex-direction: column;

            }

            .blog-left-body,.related-blog{

                width: 100%;

            }

            .rcent-post{

                margin-top: 20px;

            }

            .blog-post-detailes img{

                width: 70%;

            }

            .related-blog{

                margin-top: 10px;

                margin-left: 0px;

            }

        }

        @media (max-width:600px){

            .blog-post{

                padding:10px;

            }

            .blog-post-detailes img{

                width: 80%;

            }

            .comments-body,.publisher-details,.rcent-post{

                flex-direction: column;

            }

            .commaints h2{

                margin-top: 10px;

                text-align: center;

            }

            .comments-body{

                align-items:center;

            }

        }

    /* ==========X=========Responsive Blog==========X========= */

/* ========X=========Blog Body================X======== */


script.jsπŸ‘‡

const toggle = document.querySelector('.nav-bar #nav-toggle');

const nav = document.querySelectorAll('.nav-bar .nav-collaps');

toggle.addEventListener('click',function(){

   nav.forEach(col=>col.classList.toggle('nav-collaps-show'))

})


Blog.html codeπŸ‘‡

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>To Travel Is To Live</title>

    <!-- ---------Font Awsome CDN-------------- -->

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

    <!-- ----X-----Font Awsome CDN----X-------- -->


    <!-- ----------Google Fonts---------------- -->

        <link rel="preconnect" href="https://fonts.gstatic.com">

        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital@0;1&display=swap" rel="stylesheet">

    <!-- -------X---Google Fonts------X-------- -->


    <!-- ---------External Style Sheet--------- -->

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

    <!-- -----X---External Style Sheet----X---- -->

</head>

<body>

    <!-- ---------------Navigation Menu--------------------- --->

        <nav class="nav-bar">

            <div class="nav-menu d-flex">

                <div class="nav-brand">

                    <a href="../index.html">Tourisum <p>Blog</p></a>

                </div>

                <div class="toggle" id="nav-toggle">

                    <i class="fa fa-bars" aria-hidden="true"></i>

                </div>

                <div class="nav-collaps">

                    <ul class="nav-items">

                        <li class="nav-link">

                            <a href="../index.html">Home</a>

                        </li>

                        <li class="nav-link">

                            <a href="#about">About us</a>

                        </li>

                        <li class="nav-link">

                            <a href="#blog">Blog</a>

                        </li>

                        <li class="nav-link">

                            <a href="#contact-us">Countact us</a>

                        </li>

                    </ul>

                </div>

                <div class="nav-collaps">

                    <ul class="nav-social">

                        <li class="nav-link">

                            <a href="#"><i class="fa fa-search" aria-hidden="true"></i></a>

                        </li>

                        <li class="nav-link">

                            <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>

                        </li>

                        <li class="nav-link">

                            <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>

                        </li>

                        <li class="nav-link">

                            <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>

                        </li>

                    </ul>

                </div>

            </div>

        </nav>

    <!-- ---------X------Navigation Menu--------x------------ -->


    <!-- -----------------Blog Path------------------------ -->

        <div class="blog-path">

            <div class="blog-path-row">

                <ul>

                    <li>

                        <a href="../index.html">Home</a>

                    </li>

                    <li>

                        <a href="#">/</a>

                    </li>

                    <li>

                        <a href="#">Blog</a>

                    </li>

                    <li>

                        <a href="#">/</a>

                    </li>

                    <li>

                        <a href="#">Taj Mahal blog</a>

                    </li>

                </ul>

            </div>

        </div>

    <!-- ---------X-------Blog Path------X----------------- -->


    <!-- ------------------Blog Body----------------------- -->

        <div class="blog-post">

            <div class="blog-left-body">

                <!-- Blog Post -->

                    <div class="blog-post-body">

                        <div class="blog-post-img">

                            <img src="../assets/blog/Agra1.jpg" alt="">

                        </div>

                        <div class="blog-post-detailes">

                            <h3>The Taj Mahal – Visit India’s Favourite Heritage Monument In 2021!</h3>

                            <ul>

                                <li style="color:#777777;"><i class="fa fa-user" aria-hidden="true"></i> <span>Kanika Saxena</span></li>

                                <li style="color:#777777;"><i class="fa fa-clock-o" aria-hidden="true"></i> <span>Jan 1, 2021</span></li>

                                <li style="color:#777777;"><i class="fa fa-commenting-o" aria-hidden="true"></i> <span>32</span></li>

                            </ul>

                            <p>&nbsp;&nbsp;&nbsp;&nbsp;Famous poet Rabindranath Tagore portrayed it as ‘a teardrop on the cheek of the universe’ and Rudyard Kipling called it ‘the embodiment of all things pure’. Mughal emperor Shah Jahan famously said – “it made the moon and the sun drop tears on it”. What is it that we are talking about? Of course the one and only <b>Taj Mahal</b>, a monument built out of immense love and memory, a monument that made hundreds of thousands of people bow down to their knees, a monument that made the city of Agra a famous and widely visited tourist spot in India. It is a place where you’ll fall in love with the Mughal Era and pleasure yourself with the architecture and royalty. And have you seen Taj Mahal at night? If not, then let us tell you it is one of the most magnificent sights ever!<br><br>

                            <b>About The Taj Mahal In India</b><br><br>

                            <center><img src="../assets/blog/About-The-Taj-Mahal-In-India.jpg" alt=""></center><br>

                            &nbsp;&nbsp;&nbsp;&nbsp;People widely consider it as one of the most beautiful buildings in the world. Located in the historical city of Agra, the Taj Mahal is called as the ‘symbol of love’. A wide range of visitors come around admiring the beauty of the monument and appreciate the architecture. Taj Mahal is known as the Crown of Palaces in Persian, giving a breathtaking sight to its aficionados.<br><br>

                            &nbsp;&nbsp;&nbsp;&nbsp;Regarded as one of the finest illustrations of Mughal architecture in India, Taj Mahal is a UNESCO World Heritage Site. One of the best parts of visiting the Taj Mahal is to appreciate the elegance of aptness of extents and luxuriousness of geometrical prototypes of such gracefully done gardens that enhance the dignity of the Taj Mahal, adding glory to the slenderness of this symbol of love, perseverance and beauty.<br><br>

                            <b>Best Time To Visit Taj Mahal</b><br><br>

                            &nbsp;&nbsp;&nbsp;&nbsp;One is advised to visit the Taj either during sunrise or sunset since these two timings in the day provide breathtaking views of this monument against the colors of the sky.<br><br>

                            <b>History Of Taj Mahal</b><br><br>

                            <center><img src="../assets/blog/Tajmahal-backwater-view-in-Agra.jpg" alt=""></center><br>

                            &nbsp;&nbsp;&nbsp;&nbsp;The famous Taj Mahal story always tends to intrigue listeners! The Taj was built by Emperor Shah Jahan in the loving memory of his third wife, Mumtaz Mahal, who is said to have passed away after giving birth to their 14th child in 1631. Call it a symbol of immense love, the emperor was left so heartbroken that his hair turned grey eventually in grief. That’s when he decided to build a memorial in her memory and the construction began the following year, 1632.<br><br>

                            &nbsp;&nbsp;&nbsp;&nbsp;It is said that the main building took eight years to finish. The whole monument wasn’t completed until 1653. The sad part is, Shah Jahan was overthrown by his own son Aurangzeb soon after the building was finished. He was imprisoned inside the Agra Fort for the rest of his life where he used to look at his remarkable creation through the window, admiring it and remembering his beloved Mumtaz. He died in 1666 and was buried alongside his wife Mumtaz inside the tomb of Taj Mahal.<br><br>

                            &nbsp;&nbsp;&nbsp;&nbsp;It is said that over 20,000 people from India and Central Asia were recruited to work on the architecture. Shah Jahan was keen to bring some specialists from Europe to produce the delicate white marbles and pietra dura (marble inlay work), which was made up of thousands of semiprecious stones. In the year 1983, the Taj was given a highly reputed designation and it was recognized as a World Heritage Site. It underwent a big restoration project in the early 20th century. It is not just the beauty of this glittering white marble structure but also the Taj Mahal history that attract people from around the world to Agra.<br><br>

                            <b>Interesting Facts About Taj Mahal</b><br><br>

                            <center><img src="../assets/blog/Interesting-Facts-About-Taj-Mahal.jpg" alt=""></center><br>

                            &nbsp;&nbsp;&nbsp;&nbsp;Any Taj Mahal information is incomplete without mentioning some interesting details about this place. Being one of the seven wonders of the world itself makes the Taj Mahal location an interesting spot to visit and explore. But here are some of the facts that we didn’t know about earlier. Let’s dig some of them:<br><br>

                            <ul style="flex-direction: column; list-style-type: disc;">

                                <li>There is one small hole located on the ceiling of the main hall right above the tombstone of Shah Jahan’s beloved Mumtaz Mahal. Seems like there is a flaw in the magnificent Taj. It is said that one of the artisans decided to sabotage the emperor’s dream of having a flawless monument, so he made a hole which is perpendicular to the tombstone of the queen.

                                </li><br>

                                <li>

                                    The minarets were built leaning outwards. It was done so to protect the monument from natural calamities like earthquakes. It’s just a matter of keen observing and you’ll notice that the four minarets are leaning outwards. It was done to ensure the safety of the tomb.

                                </li><br>

                                <li>

                                    There was a temple built and named after the infamous and one of the biggest Indian conman Natwarlal who apparently had sold the grandiose Taj Mahal at least thrice to some wealthy individuals. The infamous Natwarlal is widely known for selling the Taj repeatedly so his native villagers decided to build a temple on his name with his statue.

                                </li><br>

                                <li>

                                    The groundwork of the Taj would have worn out years ago if it hadn’t been for the Yamuna River. The foundation was actually not ever-lasting. The wood used would have rotten over time and eventually ruined. Thanks to the Yamuna river, it kept the wood strong and moist.

                                </li><br>

                                <li>

                                    The illustrious interior of Taj can blind any with its magnificent decorative work. The inside of Taj Mahal is made up of different kinds of extremely rare and very precious stones, sourced from different parts of the world including China, Sri Lanka, Tibet and some parts of India. The British era had violated the monument a number of times because of these stones. The restoration work started in the late 19th century. It’s fair to say anyone would be blinded by the richness of the mahal.

                                </li><br>

                                <li>

                                    It is strange but it is a fact that the magnificent Mahal is quite taller than Delhi’s heritage monument – the Qutub Minar. The lofty Taj is actually five feet taller than Delhi’s Qutub Minar. Strange but true.

                                </li><br>

                                <li>

                                    If we ever decide to find out how expensive the Taj Mahal would be now, it sure will take a breath away. Shah Jahan had spent around 32 million rupees on the architecture during that time. If we do the calculations keeping the present rate in mind, the amount would be around 1,062,834,098 USD. Quite Expensive!

                                </li><br>

                                <li>

                                    In the year 2000, the famous Indian magician PC Sorkar Jr. vanished the whole of Taj by his optical illusion trick. One of his greatest tricks – this had completely astonished his audience.

                                </li>

                                <li>

                                    The Taj is visited by over 12,000 people every day.

                                </li><br>

                                <li>

                                    Had Aurangzeb not imprisoned his father – the emperor Shah Jahan, we might be able to see another Taj Mahal, a black Taj Mahal. Yes, emperor Shah Jahan had a desire to build a black Taj Mahal for himself, just like the one he built for his beloved Mumtaz. According to the historians and experts, Shah Jahan had begun to erect his own tomb, but could not get on with it as his son dethroned and imprisoned him.

                                </li><br>

                                <li>

                                    The monument changes colors. Depending on the light outside and the time of the day, the monument can appear to change its colors. The beautiful Taj will look a little pink in the morning, white in the day time and golden-ish after the sun sets.

                                </li>

                            </ul><br><br>

                            <b>Taj Mahal Timings And Entry Fee</b><br><br>

                            <center><img src="../assets/blog/Taj-Mahal-Entry-Fee.jpg" alt=""></center><br>

                            &nbsp;&nbsp;&nbsp;&nbsp;Taj Mahal, Agra timing is not set. The Taj opens 30-45 minutes before the sunrise and closes its gates about 30 minutes before the sunset each day. Also, one should note that the Taj Mahal remains closed on Fridays for public viewing.<br><br>

                            &nbsp;&nbsp;&nbsp;&nbsp;The entry fee for this monument differs for the citizens of different countries. The normal fee structure is such:<br><br>

                            <b>Foreign nationals: </b>INR 1100/- per person<br>

                            <b>SAARC and BIMSTEC nationals: </b>INR 540/- per person<br>

                            <b>Indian nationals: </b> INR 50/-<br>

                            <b>Main Mausoleum: </b>INR 200/-<br><br>

                            <b>Note: </b>Photography and videography are permitted inside the premises, but not inside the mausoleum. Tripods are strictly forbidden. Make sure you remove or cover your shoes before entering.

                        </p>

                        </div>

                    </div>

                <!--X- Blog Post -X-->


                <!-- Blog-post-details -->

                    <div class="publisher-details">

                        <img src="../assets/blog/publisher/publisher.jpg" alt="">

                        <div>

                            <p>Written by</p>

                            <h3>Kanika Saxena</h3><br>

                            <p><span><i class="fa fa-quote-left" aria-hidden="true"></i></span> Kanika has 4 years of experience in writing blogs and marketing content for travel. And when she’s not writing, she’s either exploring new terrains in a different corner of the world, or out in the city freezing urban scenarios in her camera. <span><i class="fa fa-quote-right" aria-hidden="true"></i></span></p>

                        </div>

                    </div>

                <!--X- Blog-post-details -X-->


                <!-- Blog Comments -->

                    <div class="commaints">

                        <h2><span>04</span> Comments</h2>

                        <div class="comments-row">

                            <div class="comments-body">

                                <img src="../assets/blog/comments-1.jpg" alt="">

                                <div>

                                    <h3>Georgia Reader</h3>

                                    <p>01 Jan, 2020</p>

                                    <p>Very useful information</p>

                                </div>

                            </div>


                            <div class="comments-body">

                                <img src="../assets/blog/comments-2.jpg" alt="">

                                <div>

                                    <h3>Aron Alvarado</h3>

                                    <p>01 Jan, 2020</p>

                                    <p>Very useful information</p>

                                </div>

                            </div>


                            <div class="comments-body">

                                <img src="../assets/blog/comments-3.jpg" alt="">

                                <div>

                                    <h3>Lynda Small</h3>

                                    <p>01 Jan, 2020</p>

                                    <p>Very useful information</p>

                                </div>

                            </div>


                            <div class="comments-body">

                                <img src="../assets/blog/comments-4.jpg" alt="">

                                <div>

                                    <h3>Sianna Ramsay</h3>

                                    <p>01 Jan, 2020</p>

                                    <p>Very useful information</p>

                                </div>

                            </div>

                        </div>

                    </div>

                <!--X-Blog Comments  -X-->


                <!-- Replay Section -->

                    <div class="replay-form">

                        <h3>Leave a Reply</h3>

                        <div class="replay-input">

                            <input type="text" placeholder="Your Name">

                        </div>

                        <div class="repaly-in-email">

                            <input type="email" placeholder="Your Email">

                        </div>

                        <div class="contact-message">

                            <textarea name="" id="" rows="5" placeholder="Your Comment"></textarea>

                        </div>

                        <div class="post-replay">

                            <button class="countact-submit-btn">Post Comment</button>

                        </div>

                    </div>

                <!---X--Replay Section---X -->

            </div>


            <!-- Related Blog -->

                <div class="related-blog">

                    <h3>Recent Posts</h3>

                    <div class="recent-post-column">

                        <div class="rcent-post">

                            <img src="../assets/blog/About-The-Taj-Mahal-In-India.jpg" alt="">

                            <div class="recent-post-detailes">

                                <p>The Taj Mahal – Visit India’s Favourite Heritage Monument In 2021!</p>

                                <p><span>Jan 1, 2021</span></p>

                            </div>

                        </div>


                        <div class="rcent-post">

                            <img src="../assets/blog/About-The-Taj-Mahal-In-India.jpg" alt="">

                            <div class="recent-post-detailes">

                                <p>The Taj Mahal – Visit India’s Favourite Heritage Monument In 2021!</p>

                                <p><span>Jan 1, 2021</span></p>

                            </div>

                        </div>


                        <div class="rcent-post">

                            <img src="../assets/blog/About-The-Taj-Mahal-In-India.jpg" alt="">

                            <div class="recent-post-detailes">

                                <p>The Taj Mahal – Visit India’s Favourite Heritage Monument In 2021!</p>

                                <p><span>Jan 1, 2021</span></p>

                            </div>

                        </div>


                        <div class="rcent-post">

                            <img src="../assets/blog/About-The-Taj-Mahal-In-India.jpg" alt="">

                            <div class="recent-post-detailes">

                                <p>The Taj Mahal – Visit India’s Favourite Heritage Monument In 2021!</p>

                                <p><span>Jan 1, 2021</span></p>

                            </div>

                        </div>

                    </div>

                </div>

            <!--X- Related Blog -X-->

        </div>

    <!-- ----------X-------Blog Body--------X-------------- -->


    <!-- ---------------------Footer------------------------- -->

        <div class="footer">

            <div class="footer-row">

                <h2>Tourisum</h2>

                <h3>Blog</h3><br>

                <p>&copy; Tourisum Blog ~ 2021. All rights reserved.</p>

            </div>

            <div class="developer">

                <div class="develop-name">

                    <p>Designed by ~ <span>RCP Student Krushnali Rajput & Team.</span></p>

                </div>

                <div class="developer-contact">

                    <a href="#"><i class="fa fa-handshake-o" aria-hidden="true"></i></a>

                    <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>

                    <a href="#"><i class="fa fa-github" aria-hidden="true"></i></a>

                </div>

            </div>

        </div>

    <!-- ------------X--------Footer--------X---------------- -->


    <!-- --------Java Script File Link Here------------ -->

    <script src="../js/script.js"></script>

    <!-- -X------Java Script File Link Here---X-------- -->

</body>

</html>


 Thank You

Comments

Popular posts from this blog

Switching Tab in wix

Culture Interactive Project Research

Bootstrap /Flex-Boxs / Grids