Udacity Project Personal Website

This is the first project of Udacity Front End course.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personal Blog</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <header class="header">
        <h1>Personal Travel Blog</h1>
        <nav class="navbar">
            <a href="index.html">Home</a>
            <a href="#">About</a>
            <a href="blogs.html">Blog</a>
            <a href="#">Contact</a>
        </nav>
    </header>
    <div class="container">
        <main class="travel_grid">
                <div class="travel_card" id="nepal">
                    <img src="images/nepal.jpg" alt="picture of nepal">
                    <div class="card_text">
                        <h3>My 10 Days Trip To Nepal</h3>
                        <p>Lorem ipsum dolor sit amet consectetur,
                            adipisicing elit. Cupiditate omnis unde
                        </p>
                        <button class="btn"><a href="nepal.html">See More</a></button>
                    </div>
                </div>
                <div class="travel_card" id="china">
                    <img src="images/china.jpg" alt="picture of china">
                    <div class="card_text">
                        <h3>My 14 Days Trip To China</h3>
                        <p>Lorem ipsum dolor sit amet consectetur,
                            adipisicing elit. Cupiditate omnis unde
                        </p>
                        <button class="btn"><a href="china.html">See More</a></button>
                    </div>
                </div>
                <div class="travel_card" id="hongkong">
                    <img src="images/hongkong.jpg" alt="picture of hong kong">
                    <div class="card_text">
                        <h3>My Short Vaccation in Hong Kong</h3>
                        <p>Lorem ipsum dolor sit amet consectetur,
                            adipisicing elit. Cupiditate omnis unde
                        </p>
                        <button class="btn"><a href="hongkong.html">See More</a></button>
                    </div>
                </div>
                <div class="travel_card" id="italy">
                    <img src="images/italy.jpg" alt="picture of italy">
                    <div class="card_text">
                        <h3>My Second Trip To Italy</h3>
                        <p>Lorem ipsum dolor sit amet consectetur,
                            adipisicing elit. Cupiditate omnis unde
                        </p>
                        <button class="btn"><a href="italy.html">See More</a></button>
                    </div>
                </div>
                <div class="travel_card" id="japan">
                    <img src="images/japan.jpg" alt="picture of japan">
                    <div class="card_text">
                        <h3>My 10 Days Trip To Japan</h3>
                        <p>Lorem ipsum dolor sit amet consectetur,
                            adipisicing elit. Cupiditate omnis unde
                        </p>
                        <button class="btn"><a href="japan.html">See More</a></button>
                    </div>
                </div>
                <div class="travel_card" id="spain">
                    <img src="images/spain.jpg" alt="picture of spain">
                    <div class="card_text">
                        <h3>Summer Vacction in Spain</h3>
                        <p>Lorem ipsum dolor sit amet consectetur,
                            adipisicing elit. Cupiditate omnis unde
                        </p>
                        <button class="btn"><a href="spain.html">See More</a></button>
                    </div>
                </div>
        </main>
    </div>
    <footer class="footer">
        <div class="footer_container">
            <h2>Stay Connected</h2>
            <div class="footer_social">
                <a href="#">Facebook</a>
                <a href="#">Instagram</a>
                <a href="#">YouTube</a>
                <a href="#">Twitter</a>
            </div>
            <div class="footer_navbar">
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="blogs.html">Blog</a>
                <a href="#">Contact</a>
                <a href="#">Privacy</a>
            </div>
        </div>
        <div class="copyright"> &copy; Udacity Project 2023 </div>
    </footer>
</body>
</html>

index.css

@import url("general.css");
@import url("header.css");
@import url("footer.css");

.container{
    width: 95%;
    margin: 0 auto;
}

.travel_card{
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
img{
    width: 100%;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

.card_text{
    width: 100%;
    padding: 15px;
    color: #fff;
    background-color: #000;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}
.btn{
    width: 100%;
    padding: 5px;
    margin: 9px 0;
    font-size: 18px;
    color: #000;
    border-radius: 5px;
    background-color: #ffd400;
    cursor: pointer;
}
.btn a{
    color: #000;
    text-decoration: none;
}

@media (min-width: 568px) {
    .travel_grid{
        display: grid;
        grid-template-areas: 
        "np np ch ch"
        "np np ch ch"
        "hk hk it it"
        "hk hk it it"
        "sp sp jp jp"
        "sp sp jp jp";
        gap: 25px;
    }
    #nepal{
        grid-area: np;
    }
    #china{
        grid-area: ch;
    }
    #hongkong{
        grid-area: hk;
    }
    #japan{
        grid-area: jp;
    }
    #italy{
        grid-area: it;
    }
    #spain{
        grid-area: sp;
    }
  }
@media (min-width: 768px) {
    .travel_grid{
        display: grid;
        grid-template-areas: 
        "np np np np ch ch hk hk"
        "np np np np ch ch hk hk"
        "np np np np jp jp jp jp"
        "np np np np jp jp jp jp"
        "it it sp sp jp jp jp jp"
        "it it sp sp jp jp jp jp";
        gap: 25px;
    }

  }

general.css

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');

html{
    box-sizing: border-box;
}
*, *::after, *::before{
    box-sizing: inherit;
    padding: 0;
    margin: 0;
}
body{
    padding: 0;
    margin: 0;
    font-family: 'Roboto Mono', monospace;
}

header.css

.header{
    width: 95%;
    margin: 0 auto;
    padding: 15px;
    margin-bottom: 25px;
    border-bottom: 3px solid #ffd400;
}
.header h1{
    text-align: center;
}
.navbar{
    width: 300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.navbar a{
    font-size: 19px;
    text-decoration: none;
    color: #000;
  
}
.navbar a:hover{
    text-decoration: underline;
    color: #000;
  
}
@media (min-width: 768px) {
    .header{
        display: flex;
        justify-content: space-between;

    }
   .navbar{
    margin-right: 0px;
   }
}

footer.css

.footer{
    margin-top: 25px;
    padding: 25px;
    color: #fff;
    background-color: #212121;
}

.footer_container h2{
    text-align: center;
}
.footer_social{
    margin: 20px 0;
    padding: 5px;
    background-color: #ffd400;
    border-radius: 9px;
    display: flex;
    justify-content: space-evenly;
}
.footer_social a{
    color: #000;
    text-decoration: none;
}
.footer_navbar{
    margin: 20px 0;
    display: flex;
    justify-content: space-evenly;
}
.footer_navbar a{
    color: #fff;
    text-decoration: none;
}

.footer .copyright{
    color: #ffd400;
    text-align: center;
} 

@media (min-width: 768px) {
    .footer_container{
        width: 45%;
        margin: 0 auto;
    }
}

blogs.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blogs</title>
    <link rel="stylesheet" href="css/blogs.css">
</head>
<body>
    <header class="header">
        <h1>Personal Travel Blog</h1>
        <nav class="navbar">
            <a href="index.html">Home</a>
            <a href="#">About</a>
            <a href="blogs.html">Blog</a>
            <a href="#">Contact</a>
        </nav>
    </header>
    <div class="container">
        <main class="travel_grid">
                <div class="travel_card" id="nepal">
                    <img src="images/nepal.jpg" alt="picture of nepal">
                    <div class="card_text">
                        <h3>My 10 Days Trip To Nepal</h3>
                        <p>Lorem ipsum dolor sit amet consectetur,
                            adipisicing elit. Cupiditate omnis unde
                            non qui tempora. Deserunt quas esse.
                        </p>
                        <button class="btn"><a href="nepal.html">See More</a></button>
                    </div>
                </div>
                <div class="travel_card" id="china">
                    <img src="images/china.jpg" alt="picture of china">
                    <div class="card_text">
                        <h3>My 14 Days Trip To China</h3>
                        <p>Lorem ipsum dolor sit amet consectetur,
                            adipisicing elit. Cupiditate omnis unde
                            non qui tempora. Deserunt quas esse.
                        </p>
                        <button class="btn"><a href="china.html">See More</a></button>
                    </div>
                </div>
                <div class="travel_card" id="hongkong">
                    <img src="images/hongkong.jpg" alt="picture of hong kong">
                    <div class="card_text">
                        <h3>My Short Vaccation in Hong Kong</h3>
                        <p>Lorem ipsum dolor sit amet consectetur,
                            adipisicing elit. Cupiditate omnis unde
                            non qui tempora. Deserunt quas esse.
                        </p>
                        <button class="btn"><a href="hongkong.html">See More</a></button>
                    </div>
                </div>
                <div class="travel_card" id="italy">
                    <img src="images/italy.jpg" alt="picture of italy">
                    <div class="card_text">
                        <h3>My Second Trip To Italy</h3>
                        <p>Lorem ipsum dolor sit amet consectetur,
                            adipisicing elit. Cupiditate omnis unde
                            non qui tempora. Deserunt quas esse.
                        </p>
                        <button class="btn"><a href="italy.html">See More</a></button>
                    </div>
                </div>
                <div class="travel_card" id="japan">
                    <img src="images/japan.jpg" alt="picture of japan">
                    <div class="card_text">
                        <h3>My 10 Days Trip To Japan</h3>
                        <p>Lorem ipsum dolor sit amet consectetur,
                            adipisicing elit. Cupiditate omnis unde
                            non qui tempora. Deserunt quas esse.
                        </p>
                        <button class="btn"><a href="japan.html">See More</a></button>
                    </div>
                </div>
                <div class="travel_card" id="spain">
                    <img src="images/spain.jpg" alt="picture of spain">
                    <div class="card_text">
                        <h3>Summer Vacction in Spain</h3>
                        <p>Lorem ipsum dolor sit amet consectetur,
                            adipisicing elit. Cupiditate omnis unde
                            non qui tempora. Deserunt quas esse.
                        </p>
                        <button class="btn"><a href="spain.html">See More</a></button>
                    </div>
                </div>
        </main>
    </div>
    <footer class="footer">
        <div class="footer_container">
            <h2>Stay Connected</h2>
            <div class="footer_social">
                <a href="#">Facebook</a>
                <a href="#">Instagram</a>
                <a href="#">YouTube</a>
                <a href="#">Twitter</a>
            </div>
            <div class="footer_navbar">
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="blogs.html">Blog</a>
                <a href="#">Contact</a>
                <a href="#">Privacy</a>
            </div>
        </div>
        
        <div class="copyright"> &copy; Udacity Project 2023 </div>
    </footer>
</body>
</html>

blogs.css

@import url("general.css");
@import url("header.css");
@import url("footer.css");

.container{
    width: 95%;
    margin: 0 auto;
}
.travel_card{
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
img{
    width: 100%;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

.card_text{
    width: 100%;
    padding: 15px;
    color: #fff;
    background-color: #000;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}
.btn{
    width: 100%;
    padding: 5px;
    margin: 9px 0;
    font-size: 18px;
    color: #000;
    border-radius: 5px;
    background-color: #ffd400;
    cursor: pointer;
}
.btn a{
    text-decoration: none;
}
.footer{
    margin-top: 15px;
    padding: 15px;
    color: #ffd400;
    text-align: center;
    background-color: #212121;
}

@media (min-width: 568px) {
    .travel_grid{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 25px;
        grid-row-gap: 25px;
    }
  }

  @media (min-width: 768px) {
    .travel_grid{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 25px;
        grid-row-gap: 25px;
    }
  }

china.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nepal</title>
    <link rel="stylesheet" href="css/blog.css">
<body>
    <header class="header">
        <h1>Personal Travel Blog</h1>
        <nav class="navbar">
            <a href="index.html">Home</a>
            <a href="#">About</a>
            <a href="blogs.html">Blog</a>
            <a href="#">Contact</a>
        </nav>
    </header>
    <div class="container">
        <article>
            <img src="images/china.jpg" alt="china">
            <figcaption>Fujian, China.</figcaption>
            <h1>Trip To China</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis cum porro voluptatibus
                possimus, illum, ipsa, quaerat enim consectetur officiis earum exercitationem provident.
                Deleniti corrupti debitis dicta maiores vitae ipsam ex.
            </p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis cum porro voluptatibus
                possimus, illum, ipsa, quaerat enim consectetur officiis earum exercitationem provident.
                Deleniti corrupti debitis dicta maiores vitae ipsam ex.
            </p>
            <h2>Understand</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo nulla debitis ut possimus quos
                illum vero laborum sapiente necessitatibus, molestiae ipsa dolorem neque dicta earum quia voluptatem
                quae. Eligendi, nostrum?
                Illum consequuntur error molestias temporibus maiores fugit, quibusdam aut, sed placeat alias assumenda
                voluptatum quae, accusamus voluptas hic esse quod excepturi! Laboriosam beatae at qui deserunt voluptatibus
                quaerat eaque aliquam.
            </p>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi, officiis aut dolorum error vitae
                dolor, nisi alias odio ullam explicabo molestias reiciendis dicta quia, debitis fugit beatae
                saepe ratione molestiae?
                Possimus tempora reiciendis esse sed facere incidunt suscipit non corrupti nulla accusamus mollitia 
                quia iure debitis laudantium doloremque veniam maiores, quasi, voluptatem consequatur. Minima, nostrum
                omnis quasi praesentium nisi neque.
                Rerum sint mollitia dolore voluptatum repudiandae in id obcaecati numquam tempore cum totam sapiente soluta
                ducimus, quisquam maiores maxime doloremque a magnam officiis! Quo asperiores perspiciatis sequi molestias
                labore optio!
            </p>
            <h2>Books</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque dicta perferendis veniam, ex et
                ducimus iste. Adipisci ducimus non voluptatum ad velit ipsam recusandae eum ex, aliquid itaque
                assumenda eveniet?
            </p>
            <ul>
                <li><strong>Sit amet Consectetur adipisicing elit</strong> Laudantium similique soluta porro
                    voluptatem, deserunt adipisci natus excepturi consequatur culpa aut iusto pariatur, quam
                    perferendis earum veniam? Voluptatibus impedit laboriosam cumque.
                </li>
                <li><strong>Laudantium similique soluta porro</strong> voluptatem, deserunt adipisci natus
                    excepturi consequatur culpa aut iusto pariatur, quam
                    perferendis earum veniam? Voluptatibus impedit laboriosam cumque.
                </li>
                <li><strong>Voluptatibus impedit laboriosam cumque</strong> Lorem ipsum, dolor sit amet consectetur
                    adipisicing elit. Laudantium similique soluta porro
                    voluptatem, deserunt adipisci natus excepturi consequatur culpa aut iusto pariatur, quam
                    perferendis earum veniam?
                </li>
                <li><strong>Excepturi Consequatur Culpa</strong> Lorem ipsum, dolor sit amet consectetur
                    adipisicing elit. Laudantium similique soluta porro voluptatem, deserunt adipisci natus
                    aut iusto pariatur, quam perferendis earum veniam? Voluptatibus impedit laboriosam cumque.
                </li>
              </ul>
              <h2>Get Around</h2>
              <h3>By Taxi</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, ex! Labore quam eaque dignissimos
                excepturi rem alias ex deserunt explicabo, nisi adipisci sed odit nesciunt, aut dolores error sunt
                quaerat.
              </p>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, explicabo temporibus accusamus aperiam
                eaque quo praesentium quibusdam reprehenderit suscipit culpa commodi quia repellat, dicta dolores nesciunt
                autem! Similique, earum est?
                Aspernatur eligendi laudantium quo ab neque voluptate ullam nisi aliquid consectetur possimus eveniet earum
                quos, hic dolor id repellendus qui atque minus, et expedita tempora sunt soluta quaerat! Nesciunt, quaerat.
                Placeat rerum inventore atque eum aspernatur velit, id repellendus, dolorum debitis odit est possimus architecto
                autem eius, ut saepe. Nulla molestiae placeat minus voluptas architecto doloremque non. Ullam, molestias tempore.
                Sapiente vel alias quaerat ipsam totam. Amet, voluptatem saepe quibusdam est repellat similique laborum cum
                deserunt ut mollitia aut cupiditate nam facere tempora dolore praesentium? Expedita inventore temporibus debitis odio.
            </p>
            <h3>By Bus</h3>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam soluta ducimus, dicta maxime sit, facilis aut similique
                saepe deleniti assumenda necessitatibus aperiam qui est sapiente modi dolores alias eius exercitationem.
                Eum ut, impedit ullam ipsum, ab totam quia illo vel aut possimus nihil accusamus magni at? Omnis voluptate natus
                a recusandae nemo est enim minima porro! Beatae molestias possimus odio.
            </p>
            <ul>
                <li>Red Bus</li>
                <li>Mini Bus</li>
                <li>General Bus</li>
                <li>Green Bus</li>
            </ul>
            <h3>By Metro</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam dignissimos repellat facilis. Reprehenderit odio quos,
                possimus dolor vero, sunt impedit omnis totam deleniti reiciendis eaque dolores sapiente, ullam maxime corrupti?
                Facere blanditiis ipsam dolor repellendus officia ex explicabo magni odio aut, similique iste tempora maiores dicta
                culpa iusto ea nostrum numquam debitis esse accusantium, officiis porro eius tenetur delectus? Nesciunt.
                Numquam fuga reprehenderit ipsa dolor quibusdam quia minima molestias delectus necessitatibus, nesciunt, tempora non.
                Deleniti fugit neque explicabo perferendis omnis vero doloremque autem fuga. Aliquam a fugiat repellat facere sit.
                Quisquam dicta natus sint temporibus, ad laudantium quasi iusto commodi corrupti, fugit autem! Sint natus omnis facilis
                dignissimos quidem! Inventore beatae cum optio nam, pariatur itaque ad corrupti numquam tenetur?
            </p>

        </article>
        <aside>
            <div class="about_container">
                <h3>About</h3>
                <img src="images/author.jpg" alt="author">
                <p>Simpson Homer</p>
                <p><em>Contributor</em></p>
                <br>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis numquam dicta, cumque 
                    quos dolore quasi minus ratione iste enim illo reiciendis neque ut porro aspernatur unde,
                </p>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam, eos distinctio neque sed placeat
                    ullam doloribus reiciendis impedit ipsum vitae.
                </p>
            </div>
            <div class="related_blogs">
                <h3>Other Blogs</h3>
                <a href="china.html">Trip To China</a>
                <a href="spain.html">Trip To Spain</a>
                <a href="japan.html">Trip To Japan</a>
                <a href="italy.html">Trip To Italy</a>
                <a href="hongkong.html">Trip To Hong Kong</a>
                <a href="nepal.html">Trip To Nepal</a>
            </div>
        </aside>
    </div>
    <footer class="footer">
        <div class="footer_container">
            <h2>Stay Connected</h2>
            <div class="footer_social">
                <a href="#">Facebook</a>
                <a href="#">Instagram</a>
                <a href="#">YouTube</a>
                <a href="#">Twitter</a>
            </div>
            <div class="footer_navbar">
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="blogs.html">Blog</a>
                <a href="#">Contact</a>
                <a href="#">Privacy</a>
            </div>
        </div>
        <div class="copyright"> &copy; Udacity Project 2023 </div>
    </footer>
   
</body>
</html>

hongkong.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nepal</title>
    <link rel="stylesheet" href="css/blog.css">
<body>
    <header class="header">
        <h1>Personal Travel Blog</h1>
        <nav class="navbar">
            <a href="index.html">Home</a>
            <a href="#">About</a>
            <a href="blogs.html">Blog</a>
            <a href="#">Contact</a>
        </nav>
    </header>
    <div class="container">
        <article>
            <img src="images/hongkong.jpg" alt="hong kong">
            <figcaption>Harbour TST, Hong Kong.</figcaption>
            <h1>Trip To Hong Kong</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis cum porro voluptatibus
                possimus, illum, ipsa, quaerat enim consectetur officiis earum exercitationem provident.
                Deleniti corrupti debitis dicta maiores vitae ipsam ex.
            </p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis cum porro voluptatibus
                possimus, illum, ipsa, quaerat enim consectetur officiis earum exercitationem provident.
                Deleniti corrupti debitis dicta maiores vitae ipsam ex.
            </p>
            <h2>Understand</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo nulla debitis ut possimus quos
                illum vero laborum sapiente necessitatibus, molestiae ipsa dolorem neque dicta earum quia voluptatem
                quae. Eligendi, nostrum?
                Illum consequuntur error molestias temporibus maiores fugit, quibusdam aut, sed placeat alias assumenda
                voluptatum quae, accusamus voluptas hic esse quod excepturi! Laboriosam beatae at qui deserunt voluptatibus
                quaerat eaque aliquam.
            </p>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi, officiis aut dolorum error vitae
                dolor, nisi alias odio ullam explicabo molestias reiciendis dicta quia, debitis fugit beatae
                saepe ratione molestiae?
                Possimus tempora reiciendis esse sed facere incidunt suscipit non corrupti nulla accusamus mollitia 
                quia iure debitis laudantium doloremque veniam maiores, quasi, voluptatem consequatur. Minima, nostrum
                omnis quasi praesentium nisi neque.
                Rerum sint mollitia dolore voluptatum repudiandae in id obcaecati numquam tempore cum totam sapiente soluta
                ducimus, quisquam maiores maxime doloremque a magnam officiis! Quo asperiores perspiciatis sequi molestias
                labore optio!
            </p>
            <h2>Books</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque dicta perferendis veniam, ex et
                ducimus iste. Adipisci ducimus non voluptatum ad velit ipsam recusandae eum ex, aliquid itaque
                assumenda eveniet?
            </p>
            <ul>
                <li><strong>Sit amet Consectetur adipisicing elit</strong> Laudantium similique soluta porro
                    voluptatem, deserunt adipisci natus excepturi consequatur culpa aut iusto pariatur, quam
                    perferendis earum veniam? Voluptatibus impedit laboriosam cumque.
                </li>
                <li><strong>Laudantium similique soluta porro</strong> voluptatem, deserunt adipisci natus
                    excepturi consequatur culpa aut iusto pariatur, quam
                    perferendis earum veniam? Voluptatibus impedit laboriosam cumque.
                </li>
                <li><strong>Voluptatibus impedit laboriosam cumque</strong> Lorem ipsum, dolor sit amet consectetur
                    adipisicing elit. Laudantium similique soluta porro
                    voluptatem, deserunt adipisci natus excepturi consequatur culpa aut iusto pariatur, quam
                    perferendis earum veniam?
                </li>
                <li><strong>Excepturi Consequatur Culpa</strong> Lorem ipsum, dolor sit amet consectetur
                    adipisicing elit. Laudantium similique soluta porro voluptatem, deserunt adipisci natus
                    aut iusto pariatur, quam perferendis earum veniam? Voluptatibus impedit laboriosam cumque.
                </li>
              </ul>
              <h2>Get Around</h2>
              <h3>By Taxi</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, ex! Labore quam eaque dignissimos
                excepturi rem alias ex deserunt explicabo, nisi adipisci sed odit nesciunt, aut dolores error sunt
                quaerat.
              </p>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, explicabo temporibus accusamus aperiam
                eaque quo praesentium quibusdam reprehenderit suscipit culpa commodi quia repellat, dicta dolores nesciunt
                autem! Similique, earum est?
                Aspernatur eligendi laudantium quo ab neque voluptate ullam nisi aliquid consectetur possimus eveniet earum
                quos, hic dolor id repellendus qui atque minus, et expedita tempora sunt soluta quaerat! Nesciunt, quaerat.
                Placeat rerum inventore atque eum aspernatur velit, id repellendus, dolorum debitis odit est possimus architecto
                autem eius, ut saepe. Nulla molestiae placeat minus voluptas architecto doloremque non. Ullam, molestias tempore.
                Sapiente vel alias quaerat ipsam totam. Amet, voluptatem saepe quibusdam est repellat similique laborum cum
                deserunt ut mollitia aut cupiditate nam facere tempora dolore praesentium? Expedita inventore temporibus debitis odio.
            </p>
            <h3>By Bus</h3>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam soluta ducimus, dicta maxime sit, facilis aut similique
                saepe deleniti assumenda necessitatibus aperiam qui est sapiente modi dolores alias eius exercitationem.
                Eum ut, impedit ullam ipsum, ab totam quia illo vel aut possimus nihil accusamus magni at? Omnis voluptate natus
                a recusandae nemo est enim minima porro! Beatae molestias possimus odio.
            </p>
            <ul>
                <li>Red Bus</li>
                <li>Mini Bus</li>
                <li>General Bus</li>
                <li>Green Bus</li>
            </ul>
            <h3>By Metro</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam dignissimos repellat facilis. Reprehenderit odio quos,
                possimus dolor vero, sunt impedit omnis totam deleniti reiciendis eaque dolores sapiente, ullam maxime corrupti?
                Facere blanditiis ipsam dolor repellendus officia ex explicabo magni odio aut, similique iste tempora maiores dicta
                culpa iusto ea nostrum numquam debitis esse accusantium, officiis porro eius tenetur delectus? Nesciunt.
                Numquam fuga reprehenderit ipsa dolor quibusdam quia minima molestias delectus necessitatibus, nesciunt, tempora non.
                Deleniti fugit neque explicabo perferendis omnis vero doloremque autem fuga. Aliquam a fugiat repellat facere sit.
                Quisquam dicta natus sint temporibus, ad laudantium quasi iusto commodi corrupti, fugit autem! Sint natus omnis facilis
                dignissimos quidem! Inventore beatae cum optio nam, pariatur itaque ad corrupti numquam tenetur?
            </p>

        </article>
        <aside>
            <div class="about_container">
                <h3>About</h3>
                <img src="images/author.jpg" alt="author">
                <p>Simpson Homer</p>
                <p><em>Contributor</em></p>
                <br>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis numquam dicta, cumque 
                    quos dolore quasi minus ratione iste enim illo reiciendis neque ut porro aspernatur unde,
                </p>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam, eos distinctio neque sed placeat
                    ullam doloribus reiciendis impedit ipsum vitae.
                </p>
            </div>
            <div class="related_blogs">
                <h3>Other Blogs</h3>
                <a href="china.html">Trip To China</a>
                <a href="spain.html">Trip To Spain</a>
                <a href="japan.html">Trip To Japan</a>
                <a href="italy.html">Trip To Italy</a>
                <a href="hongkong.html">Trip To Hong Kong</a>
                <a href="nepal.html">Trip To Nepal</a>
            </div>
        </aside>
    </div>
    <footer class="footer">
        <div class="footer_container">
            <h2>Stay Connected</h2>
            <div class="footer_social">
                <a href="#">Facebook</a>
                <a href="#">Instagram</a>
                <a href="#">YouTube</a>
                <a href="#">Twitter</a>
            </div>
            <div class="footer_navbar">
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="blogs.html">Blog</a>
                <a href="#">Contact</a>
                <a href="#">Privacy</a>
            </div>
        </div>
        <div class="copyright"> &copy; Udacity Project 2023 </div>
    </footer>
   
</body>
</html>

italy.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nepal</title>
    <link rel="stylesheet" href="css/blog.css">
<body>
    <header class="header">
        <h1>Personal Travel Blog</h1>
        <nav class="navbar">
            <a href="index.html">Home</a>
            <a href="#">About</a>
            <a href="blogs.html">Blog</a>
            <a href="#">Contact</a>
        </nav>
    </header>
    <div class="container">
        <article>
            <img src="images/italy.jpg" alt="italy">
            <figcaption>Amalfi Coast, Italy.</figcaption>
            <h1>Trip To Italy</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis cum porro voluptatibus
                possimus, illum, ipsa, quaerat enim consectetur officiis earum exercitationem provident.
                Deleniti corrupti debitis dicta maiores vitae ipsam ex.
            </p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis cum porro voluptatibus
                possimus, illum, ipsa, quaerat enim consectetur officiis earum exercitationem provident.
                Deleniti corrupti debitis dicta maiores vitae ipsam ex.
            </p>
            <h2>Understand</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo nulla debitis ut possimus quos
                illum vero laborum sapiente necessitatibus, molestiae ipsa dolorem neque dicta earum quia voluptatem
                quae. Eligendi, nostrum?
                Illum consequuntur error molestias temporibus maiores fugit, quibusdam aut, sed placeat alias assumenda
                voluptatum quae, accusamus voluptas hic esse quod excepturi! Laboriosam beatae at qui deserunt voluptatibus
                quaerat eaque aliquam.
            </p>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi, officiis aut dolorum error vitae
                dolor, nisi alias odio ullam explicabo molestias reiciendis dicta quia, debitis fugit beatae
                saepe ratione molestiae?
                Possimus tempora reiciendis esse sed facere incidunt suscipit non corrupti nulla accusamus mollitia 
                quia iure debitis laudantium doloremque veniam maiores, quasi, voluptatem consequatur. Minima, nostrum
                omnis quasi praesentium nisi neque.
                Rerum sint mollitia dolore voluptatum repudiandae in id obcaecati numquam tempore cum totam sapiente soluta
                ducimus, quisquam maiores maxime doloremque a magnam officiis! Quo asperiores perspiciatis sequi molestias
                labore optio!
            </p>
            <h2>Books</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque dicta perferendis veniam, ex et
                ducimus iste. Adipisci ducimus non voluptatum ad velit ipsam recusandae eum ex, aliquid itaque
                assumenda eveniet?
            </p>
            <ul>
                <li><strong>Sit amet Consectetur adipisicing elit</strong> Laudantium similique soluta porro
                    voluptatem, deserunt adipisci natus excepturi consequatur culpa aut iusto pariatur, quam
                    perferendis earum veniam? Voluptatibus impedit laboriosam cumque.
                </li>
                <li><strong>Laudantium similique soluta porro</strong> voluptatem, deserunt adipisci natus
                    excepturi consequatur culpa aut iusto pariatur, quam
                    perferendis earum veniam? Voluptatibus impedit laboriosam cumque.
                </li>
                <li><strong>Voluptatibus impedit laboriosam cumque</strong> Lorem ipsum, dolor sit amet consectetur
                    adipisicing elit. Laudantium similique soluta porro
                    voluptatem, deserunt adipisci natus excepturi consequatur culpa aut iusto pariatur, quam
                    perferendis earum veniam?
                </li>
                <li><strong>Excepturi Consequatur Culpa</strong> Lorem ipsum, dolor sit amet consectetur
                    adipisicing elit. Laudantium similique soluta porro voluptatem, deserunt adipisci natus
                    aut iusto pariatur, quam perferendis earum veniam? Voluptatibus impedit laboriosam cumque.
                </li>
              </ul>
              <h2>Get Around</h2>
              <h3>By Taxi</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, ex! Labore quam eaque dignissimos
                excepturi rem alias ex deserunt explicabo, nisi adipisci sed odit nesciunt, aut dolores error sunt
                quaerat.
              </p>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, explicabo temporibus accusamus aperiam
                eaque quo praesentium quibusdam reprehenderit suscipit culpa commodi quia repellat, dicta dolores nesciunt
                autem! Similique, earum est?
                Aspernatur eligendi laudantium quo ab neque voluptate ullam nisi aliquid consectetur possimus eveniet earum
                quos, hic dolor id repellendus qui atque minus, et expedita tempora sunt soluta quaerat! Nesciunt, quaerat.
                Placeat rerum inventore atque eum aspernatur velit, id repellendus, dolorum debitis odit est possimus architecto
                autem eius, ut saepe. Nulla molestiae placeat minus voluptas architecto doloremque non. Ullam, molestias tempore.
                Sapiente vel alias quaerat ipsam totam. Amet, voluptatem saepe quibusdam est repellat similique laborum cum
                deserunt ut mollitia aut cupiditate nam facere tempora dolore praesentium? Expedita inventore temporibus debitis odio.
            </p>
            <h3>By Bus</h3>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam soluta ducimus, dicta maxime sit, facilis aut similique
                saepe deleniti assumenda necessitatibus aperiam qui est sapiente modi dolores alias eius exercitationem.
                Eum ut, impedit ullam ipsum, ab totam quia illo vel aut possimus nihil accusamus magni at? Omnis voluptate natus
                a recusandae nemo est enim minima porro! Beatae molestias possimus odio.
            </p>
            <ul>
                <li>Red Bus</li>
                <li>Mini Bus</li>
                <li>General Bus</li>
                <li>Green Bus</li>
            </ul>
            <h3>By Metro</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam dignissimos repellat facilis. Reprehenderit odio quos,
                possimus dolor vero, sunt impedit omnis totam deleniti reiciendis eaque dolores sapiente, ullam maxime corrupti?
                Facere blanditiis ipsam dolor repellendus officia ex explicabo magni odio aut, similique iste tempora maiores dicta
                culpa iusto ea nostrum numquam debitis esse accusantium, officiis porro eius tenetur delectus? Nesciunt.
                Numquam fuga reprehenderit ipsa dolor quibusdam quia minima molestias delectus necessitatibus, nesciunt, tempora non.
                Deleniti fugit neque explicabo perferendis omnis vero doloremque autem fuga. Aliquam a fugiat repellat facere sit.
                Quisquam dicta natus sint temporibus, ad laudantium quasi iusto commodi corrupti, fugit autem! Sint natus omnis facilis
                dignissimos quidem! Inventore beatae cum optio nam, pariatur itaque ad corrupti numquam tenetur?
            </p>

        </article>
        <aside>
            <div class="about_container">
                <h3>About</h3>
                <img src="images/author.jpg" alt="author">
                <p>Simpson Homer</p>
                <p><em>Contributor</em></p>
                <br>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis numquam dicta, cumque 
                    quos dolore quasi minus ratione iste enim illo reiciendis neque ut porro aspernatur unde,
                </p>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam, eos distinctio neque sed placeat
                    ullam doloribus reiciendis impedit ipsum vitae.
                </p>
            </div>
            <div class="related_blogs">
                <h3>Other Blogs</h3>
                <a href="china.html">Trip To China</a>
                <a href="spain.html">Trip To Spain</a>
                <a href="japan.html">Trip To Japan</a>
                <a href="italy.html">Trip To Italy</a>
                <a href="hongkong.html">Trip To Hong Kong</a>
                <a href="nepal.html">Trip To Nepal</a>
            </div>
        </aside>
    </div>
    <footer class="footer">
        <div class="footer_container">
            <h2>Stay Connected</h2>
            <div class="footer_social">
                <a href="#">Facebook</a>
                <a href="#">Instagram</a>
                <a href="#">YouTube</a>
                <a href="#">Twitter</a>
            </div>
            <div class="footer_navbar">
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="blogs.html">Blog</a>
                <a href="#">Contact</a>
                <a href="#">Privacy</a>
            </div>
        </div>
        <div class="copyright"> &copy; Udacity Project 2023 </div>
    </footer>
   
</body>
</html>

japan.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nepal</title>
    <link rel="stylesheet" href="css/blog.css">
<body>
    <header class="header">
        <h1>Personal Travel Blog</h1>
        <nav class="navbar">
            <a href="index.html">Home</a>
            <a href="#">About</a>
            <a href="blogs.html">Blog</a>
            <a href="#">Contact</a>
        </nav>
    </header>
    <div class="container">
        <article>
            <img src="images/japan.jpg" alt="japan">
            <figcaption>Mount Fuji, Japan.</figcaption>
            <h1>Trip To Japan</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis cum porro voluptatibus
                possimus, illum, ipsa, quaerat enim consectetur officiis earum exercitationem provident.
                Deleniti corrupti debitis dicta maiores vitae ipsam ex.
            </p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis cum porro voluptatibus
                possimus, illum, ipsa, quaerat enim consectetur officiis earum exercitationem provident.
                Deleniti corrupti debitis dicta maiores vitae ipsam ex.
            </p>
            <h2>Understand</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo nulla debitis ut possimus quos
                illum vero laborum sapiente necessitatibus, molestiae ipsa dolorem neque dicta earum quia voluptatem
                quae. Eligendi, nostrum?
                Illum consequuntur error molestias temporibus maiores fugit, quibusdam aut, sed placeat alias assumenda
                voluptatum quae, accusamus voluptas hic esse quod excepturi! Laboriosam beatae at qui deserunt voluptatibus
                quaerat eaque aliquam.
            </p>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi, officiis aut dolorum error vitae
                dolor, nisi alias odio ullam explicabo molestias reiciendis dicta quia, debitis fugit beatae
                saepe ratione molestiae?
                Possimus tempora reiciendis esse sed facere incidunt suscipit non corrupti nulla accusamus mollitia 
                quia iure debitis laudantium doloremque veniam maiores, quasi, voluptatem consequatur. Minima, nostrum
                omnis quasi praesentium nisi neque.
                Rerum sint mollitia dolore voluptatum repudiandae in id obcaecati numquam tempore cum totam sapiente soluta
                ducimus, quisquam maiores maxime doloremque a magnam officiis! Quo asperiores perspiciatis sequi molestias
                labore optio!
            </p>
            <h2>Books</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque dicta perferendis veniam, ex et
                ducimus iste. Adipisci ducimus non voluptatum ad velit ipsam recusandae eum ex, aliquid itaque
                assumenda eveniet?
            </p>
            <ul>
                <li><strong>Sit amet Consectetur adipisicing elit</strong> Laudantium similique soluta porro
                    voluptatem, deserunt adipisci natus excepturi consequatur culpa aut iusto pariatur, quam
                    perferendis earum veniam? Voluptatibus impedit laboriosam cumque.
                </li>
                <li><strong>Laudantium similique soluta porro</strong> voluptatem, deserunt adipisci natus
                    excepturi consequatur culpa aut iusto pariatur, quam
                    perferendis earum veniam? Voluptatibus impedit laboriosam cumque.
                </li>
                <li><strong>Voluptatibus impedit laboriosam cumque</strong> Lorem ipsum, dolor sit amet consectetur
                    adipisicing elit. Laudantium similique soluta porro
                    voluptatem, deserunt adipisci natus excepturi consequatur culpa aut iusto pariatur, quam
                    perferendis earum veniam?
                </li>
                <li><strong>Excepturi Consequatur Culpa</strong> Lorem ipsum, dolor sit amet consectetur
                    adipisicing elit. Laudantium similique soluta porro voluptatem, deserunt adipisci natus
                    aut iusto pariatur, quam perferendis earum veniam? Voluptatibus impedit laboriosam cumque.
                </li>
              </ul>
              <h2>Get Around</h2>
              <h3>By Taxi</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, ex! Labore quam eaque dignissimos
                excepturi rem alias ex deserunt explicabo, nisi adipisci sed odit nesciunt, aut dolores error sunt
                quaerat.
              </p>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, explicabo temporibus accusamus aperiam
                eaque quo praesentium quibusdam reprehenderit suscipit culpa commodi quia repellat, dicta dolores nesciunt
                autem! Similique, earum est?
                Aspernatur eligendi laudantium quo ab neque voluptate ullam nisi aliquid consectetur possimus eveniet earum
                quos, hic dolor id repellendus qui atque minus, et expedita tempora sunt soluta quaerat! Nesciunt, quaerat.
                Placeat rerum inventore atque eum aspernatur velit, id repellendus, dolorum debitis odit est possimus architecto
                autem eius, ut saepe. Nulla molestiae placeat minus voluptas architecto doloremque non. Ullam, molestias tempore.
                Sapiente vel alias quaerat ipsam totam. Amet, voluptatem saepe quibusdam est repellat similique laborum cum
                deserunt ut mollitia aut cupiditate nam facere tempora dolore praesentium? Expedita inventore temporibus debitis odio.
            </p>
            <h3>By Bus</h3>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam soluta ducimus, dicta maxime sit, facilis aut similique
                saepe deleniti assumenda necessitatibus aperiam qui est sapiente modi dolores alias eius exercitationem.
                Eum ut, impedit ullam ipsum, ab totam quia illo vel aut possimus nihil accusamus magni at? Omnis voluptate natus
                a recusandae nemo est enim minima porro! Beatae molestias possimus odio.
            </p>
            <ul>
                <li>Red Bus</li>
                <li>Mini Bus</li>
                <li>General Bus</li>
                <li>Green Bus</li>
            </ul>
            <h3>By Metro</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam dignissimos repellat facilis. Reprehenderit odio quos,
                possimus dolor vero, sunt impedit omnis totam deleniti reiciendis eaque dolores sapiente, ullam maxime corrupti?
                Facere blanditiis ipsam dolor repellendus officia ex explicabo magni odio aut, similique iste tempora maiores dicta
                culpa iusto ea nostrum numquam debitis esse accusantium, officiis porro eius tenetur delectus? Nesciunt.
                Numquam fuga reprehenderit ipsa dolor quibusdam quia minima molestias delectus necessitatibus, nesciunt, tempora non.
                Deleniti fugit neque explicabo perferendis omnis vero doloremque autem fuga. Aliquam a fugiat repellat facere sit.
                Quisquam dicta natus sint temporibus, ad laudantium quasi iusto commodi corrupti, fugit autem! Sint natus omnis facilis
                dignissimos quidem! Inventore beatae cum optio nam, pariatur itaque ad corrupti numquam tenetur?
            </p>

        </article>
        <aside>
            <div class="about_container">
                <h3>About</h3>
                <img src="images/author.jpg" alt="author">
                <p>Simpson Homer</p>
                <p><em>Contributor</em></p>
                <br>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis numquam dicta, cumque 
                    quos dolore quasi minus ratione iste enim illo reiciendis neque ut porro aspernatur unde,
                </p>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam, eos distinctio neque sed placeat
                    ullam doloribus reiciendis impedit ipsum vitae.
                </p>
            </div>
            <div class="related_blogs">
                <h3>Other Blogs</h3>
                <a href="china.html">Trip To China</a>
                <a href="spain.html">Trip To Spain</a>
                <a href="japan.html">Trip To Japan</a>
                <a href="italy.html">Trip To Italy</a>
                <a href="hongkong.html">Trip To Hong Kong</a>
                <a href="nepal.html">Trip To Nepal</a>
            </div>
        </aside>
    </div>
    <footer class="footer">
        <div class="footer_container">
            <h2>Stay Connected</h2>
            <div class="footer_social">
                <a href="#">Facebook</a>
                <a href="#">Instagram</a>
                <a href="#">YouTube</a>
                <a href="#">Twitter</a>
            </div>
            <div class="footer_navbar">
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="blogs.html">Blog</a>
                <a href="#">Contact</a>
                <a href="#">Privacy</a>
            </div>
        </div>
        <div class="copyright"> &copy; Udacity Project 2023 </div>
    </footer>
   
</body>
</html>

nepal.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nepal</title>
    <link rel="stylesheet" href="css/blog.css">
<body>
    <header class="header">
        <h1>Personal Travel Blog</h1>
        <nav class="navbar">
            <a href="index.html">Home</a>
            <a href="#">About</a>
            <a href="blogs.html">Blog</a>
            <a href="#">Contact</a>
        </nav>
    </header>
    <div class="container">
        <article>
            <img src="images/nepal.jpg" alt="nepal">
            <figcaption>Everst Base Camp, Nepal.</figcaption>
            <h1>Trip To Nepal</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis cum porro voluptatibus
                possimus, illum, ipsa, quaerat enim consectetur officiis earum exercitationem provident.
                Deleniti corrupti debitis dicta maiores vitae ipsam ex.
            </p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis cum porro voluptatibus
                possimus, illum, ipsa, quaerat enim consectetur officiis earum exercitationem provident.
                Deleniti corrupti debitis dicta maiores vitae ipsam ex.
            </p>
            <h2>Understand</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo nulla debitis ut possimus quos
                illum vero laborum sapiente necessitatibus, molestiae ipsa dolorem neque dicta earum quia voluptatem
                quae. Eligendi, nostrum?
                Illum consequuntur error molestias temporibus maiores fugit, quibusdam aut, sed placeat alias assumenda
                voluptatum quae, accusamus voluptas hic esse quod excepturi! Laboriosam beatae at qui deserunt voluptatibus
                quaerat eaque aliquam.
            </p>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi, officiis aut dolorum error vitae
                dolor, nisi alias odio ullam explicabo molestias reiciendis dicta quia, debitis fugit beatae
                saepe ratione molestiae?
                Possimus tempora reiciendis esse sed facere incidunt suscipit non corrupti nulla accusamus mollitia 
                quia iure debitis laudantium doloremque veniam maiores, quasi, voluptatem consequatur. Minima, nostrum
                omnis quasi praesentium nisi neque.
                Rerum sint mollitia dolore voluptatum repudiandae in id obcaecati numquam tempore cum totam sapiente soluta
                ducimus, quisquam maiores maxime doloremque a magnam officiis! Quo asperiores perspiciatis sequi molestias
                labore optio!
            </p>
            <h2>Books</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque dicta perferendis veniam, ex et
                ducimus iste. Adipisci ducimus non voluptatum ad velit ipsam recusandae eum ex, aliquid itaque
                assumenda eveniet?
            </p>
            <ul>
                <li><strong>Sit amet Consectetur adipisicing elit</strong> Laudantium similique soluta porro
                    voluptatem, deserunt adipisci natus excepturi consequatur culpa aut iusto pariatur, quam
                    perferendis earum veniam? Voluptatibus impedit laboriosam cumque.
                </li>
                <li><strong>Laudantium similique soluta porro</strong> voluptatem, deserunt adipisci natus
                    excepturi consequatur culpa aut iusto pariatur, quam
                    perferendis earum veniam? Voluptatibus impedit laboriosam cumque.
                </li>
                <li><strong>Voluptatibus impedit laboriosam cumque</strong> Lorem ipsum, dolor sit amet consectetur
                    adipisicing elit. Laudantium similique soluta porro
                    voluptatem, deserunt adipisci natus excepturi consequatur culpa aut iusto pariatur, quam
                    perferendis earum veniam?
                </li>
                <li><strong>Excepturi Consequatur Culpa</strong> Lorem ipsum, dolor sit amet consectetur
                    adipisicing elit. Laudantium similique soluta porro voluptatem, deserunt adipisci natus
                    aut iusto pariatur, quam perferendis earum veniam? Voluptatibus impedit laboriosam cumque.
                </li>
              </ul>
              <h2>Get Around</h2>
              <h3>By Taxi</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, ex! Labore quam eaque dignissimos
                excepturi rem alias ex deserunt explicabo, nisi adipisci sed odit nesciunt, aut dolores error sunt
                quaerat.
              </p>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, explicabo temporibus accusamus aperiam
                eaque quo praesentium quibusdam reprehenderit suscipit culpa commodi quia repellat, dicta dolores nesciunt
                autem! Similique, earum est?
                Aspernatur eligendi laudantium quo ab neque voluptate ullam nisi aliquid consectetur possimus eveniet earum
                quos, hic dolor id repellendus qui atque minus, et expedita tempora sunt soluta quaerat! Nesciunt, quaerat.
                Placeat rerum inventore atque eum aspernatur velit, id repellendus, dolorum debitis odit est possimus architecto
                autem eius, ut saepe. Nulla molestiae placeat minus voluptas architecto doloremque non. Ullam, molestias tempore.
                Sapiente vel alias quaerat ipsam totam. Amet, voluptatem saepe quibusdam est repellat similique laborum cum
                deserunt ut mollitia aut cupiditate nam facere tempora dolore praesentium? Expedita inventore temporibus debitis odio.
            </p>
            <h3>By Bus</h3>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam soluta ducimus, dicta maxime sit, facilis aut similique
                saepe deleniti assumenda necessitatibus aperiam qui est sapiente modi dolores alias eius exercitationem.
                Eum ut, impedit ullam ipsum, ab totam quia illo vel aut possimus nihil accusamus magni at? Omnis voluptate natus
                a recusandae nemo est enim minima porro! Beatae molestias possimus odio.
            </p>
            <ul>
                <li>Red Bus</li>
                <li>Mini Bus</li>
                <li>General Bus</li>
                <li>Green Bus</li>
            </ul>
            <h3>By Metro</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam dignissimos repellat facilis. Reprehenderit odio quos,
                possimus dolor vero, sunt impedit omnis totam deleniti reiciendis eaque dolores sapiente, ullam maxime corrupti?
                Facere blanditiis ipsam dolor repellendus officia ex explicabo magni odio aut, similique iste tempora maiores dicta
                culpa iusto ea nostrum numquam debitis esse accusantium, officiis porro eius tenetur delectus? Nesciunt.
                Numquam fuga reprehenderit ipsa dolor quibusdam quia minima molestias delectus necessitatibus, nesciunt, tempora non.
                Deleniti fugit neque explicabo perferendis omnis vero doloremque autem fuga. Aliquam a fugiat repellat facere sit.
                Quisquam dicta natus sint temporibus, ad laudantium quasi iusto commodi corrupti, fugit autem! Sint natus omnis facilis
                dignissimos quidem! Inventore beatae cum optio nam, pariatur itaque ad corrupti numquam tenetur?
            </p>

        </article>
        <aside>
            <div class="about_container">
                <h3>About</h3>
                <img src="images/author.jpg" alt="author">
                <p>Simpson Homer</p>
                <p><em>Contributor</em></p>
                <br>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis numquam dicta, cumque 
                    quos dolore quasi minus ratione iste enim illo reiciendis neque ut porro aspernatur unde,
                </p>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam, eos distinctio neque sed placeat
                    ullam doloribus reiciendis impedit ipsum vitae.
                </p>
            </div>
            <div class="related_blogs">
                <h3>Other Blogs</h3>
                <a href="china.html">Trip To China</a>
                <a href="spain.html">Trip To Spain</a>
                <a href="japan.html">Trip To Japan</a>
                <a href="italy.html">Trip To Italy</a>
                <a href="hongkong.html">Trip To Hong Kong</a>
                <a href="nepal.html">Trip To Nepal</a>
            </div>
        </aside>
    </div>
    <footer class="footer">
        <div class="footer_container">
            <h2>Stay Connected</h2>
            <div class="footer_social">
                <a href="#">Facebook</a>
                <a href="#">Instagram</a>
                <a href="#">YouTube</a>
                <a href="#">Twitter</a>
            </div>
            <div class="footer_navbar">
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="blogs.html">Blog</a>
                <a href="#">Contact</a>
                <a href="#">Privacy</a>
            </div>
        </div>
        <div class="copyright"> &copy; Udacity Project 2023 </div>
    </footer>
   
</body>
</html>

spain.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nepal</title>
    <link rel="stylesheet" href="css/blog.css">
<body>
    <header class="header">
        <h1>Personal Travel Blog</h1>
        <nav class="navbar">
            <a href="index.html">Home</a>
            <a href="#">About</a>
            <a href="blogs.html">Blog</a>
            <a href="#">Contact</a>
        </nav>
    </header>
    <div class="container">
        <article>
            <img src="images/spain.jpg" alt="spain">
            <figcaption>Real Madrid, Spain</figcaption>
            <h1>Trip To Spain</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis cum porro voluptatibus
                possimus, illum, ipsa, quaerat enim consectetur officiis earum exercitationem provident.
                Deleniti corrupti debitis dicta maiores vitae ipsam ex.
            </p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis cum porro voluptatibus
                possimus, illum, ipsa, quaerat enim consectetur officiis earum exercitationem provident.
                Deleniti corrupti debitis dicta maiores vitae ipsam ex.
            </p>
            <h2>Understand</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo nulla debitis ut possimus quos
                illum vero laborum sapiente necessitatibus, molestiae ipsa dolorem neque dicta earum quia voluptatem
                quae. Eligendi, nostrum?
                Illum consequuntur error molestias temporibus maiores fugit, quibusdam aut, sed placeat alias assumenda
                voluptatum quae, accusamus voluptas hic esse quod excepturi! Laboriosam beatae at qui deserunt voluptatibus
                quaerat eaque aliquam.
            </p>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi, officiis aut dolorum error vitae
                dolor, nisi alias odio ullam explicabo molestias reiciendis dicta quia, debitis fugit beatae
                saepe ratione molestiae?
                Possimus tempora reiciendis esse sed facere incidunt suscipit non corrupti nulla accusamus mollitia 
                quia iure debitis laudantium doloremque veniam maiores, quasi, voluptatem consequatur. Minima, nostrum
                omnis quasi praesentium nisi neque.
                Rerum sint mollitia dolore voluptatum repudiandae in id obcaecati numquam tempore cum totam sapiente soluta
                ducimus, quisquam maiores maxime doloremque a magnam officiis! Quo asperiores perspiciatis sequi molestias
                labore optio!
            </p>
            <h2>Books</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque dicta perferendis veniam, ex et
                ducimus iste. Adipisci ducimus non voluptatum ad velit ipsam recusandae eum ex, aliquid itaque
                assumenda eveniet?
            </p>
            <ul>
                <li><strong>Sit amet Consectetur adipisicing elit</strong> Laudantium similique soluta porro
                    voluptatem, deserunt adipisci natus excepturi consequatur culpa aut iusto pariatur, quam
                    perferendis earum veniam? Voluptatibus impedit laboriosam cumque.
                </li>
                <li><strong>Laudantium similique soluta porro</strong> voluptatem, deserunt adipisci natus
                    excepturi consequatur culpa aut iusto pariatur, quam
                    perferendis earum veniam? Voluptatibus impedit laboriosam cumque.
                </li>
                <li><strong>Voluptatibus impedit laboriosam cumque</strong> Lorem ipsum, dolor sit amet consectetur
                    adipisicing elit. Laudantium similique soluta porro
                    voluptatem, deserunt adipisci natus excepturi consequatur culpa aut iusto pariatur, quam
                    perferendis earum veniam?
                </li>
                <li><strong>Excepturi Consequatur Culpa</strong> Lorem ipsum, dolor sit amet consectetur
                    adipisicing elit. Laudantium similique soluta porro voluptatem, deserunt adipisci natus
                    aut iusto pariatur, quam perferendis earum veniam? Voluptatibus impedit laboriosam cumque.
                </li>
              </ul>
              <h2>Get Around</h2>
              <h3>By Taxi</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, ex! Labore quam eaque dignissimos
                excepturi rem alias ex deserunt explicabo, nisi adipisci sed odit nesciunt, aut dolores error sunt
                quaerat.
              </p>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, explicabo temporibus accusamus aperiam
                eaque quo praesentium quibusdam reprehenderit suscipit culpa commodi quia repellat, dicta dolores nesciunt
                autem! Similique, earum est?
                Aspernatur eligendi laudantium quo ab neque voluptate ullam nisi aliquid consectetur possimus eveniet earum
                quos, hic dolor id repellendus qui atque minus, et expedita tempora sunt soluta quaerat! Nesciunt, quaerat.
                Placeat rerum inventore atque eum aspernatur velit, id repellendus, dolorum debitis odit est possimus architecto
                autem eius, ut saepe. Nulla molestiae placeat minus voluptas architecto doloremque non. Ullam, molestias tempore.
                Sapiente vel alias quaerat ipsam totam. Amet, voluptatem saepe quibusdam est repellat similique laborum cum
                deserunt ut mollitia aut cupiditate nam facere tempora dolore praesentium? Expedita inventore temporibus debitis odio.
            </p>
            <h3>By Bus</h3>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam soluta ducimus, dicta maxime sit, facilis aut similique
                saepe deleniti assumenda necessitatibus aperiam qui est sapiente modi dolores alias eius exercitationem.
                Eum ut, impedit ullam ipsum, ab totam quia illo vel aut possimus nihil accusamus magni at? Omnis voluptate natus
                a recusandae nemo est enim minima porro! Beatae molestias possimus odio.
            </p>
            <ul>
                <li>Red Bus</li>
                <li>Mini Bus</li>
                <li>General Bus</li>
                <li>Green Bus</li>
            </ul>
            <h3>By Metro</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam dignissimos repellat facilis. Reprehenderit odio quos,
                possimus dolor vero, sunt impedit omnis totam deleniti reiciendis eaque dolores sapiente, ullam maxime corrupti?
                Facere blanditiis ipsam dolor repellendus officia ex explicabo magni odio aut, similique iste tempora maiores dicta
                culpa iusto ea nostrum numquam debitis esse accusantium, officiis porro eius tenetur delectus? Nesciunt.
                Numquam fuga reprehenderit ipsa dolor quibusdam quia minima molestias delectus necessitatibus, nesciunt, tempora non.
                Deleniti fugit neque explicabo perferendis omnis vero doloremque autem fuga. Aliquam a fugiat repellat facere sit.
                Quisquam dicta natus sint temporibus, ad laudantium quasi iusto commodi corrupti, fugit autem! Sint natus omnis facilis
                dignissimos quidem! Inventore beatae cum optio nam, pariatur itaque ad corrupti numquam tenetur?
            </p>

        </article>
        <aside>
            <div class="about_container">
                <h3>About</h3>
                <img src="images/author.jpg" alt="author">
                <p>Simpson Homer</p>
                <p><em>Contributor</em></p>
                <br>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis numquam dicta, cumque 
                    quos dolore quasi minus ratione iste enim illo reiciendis neque ut porro aspernatur unde,
                </p>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam, eos distinctio neque sed placeat
                    ullam doloribus reiciendis impedit ipsum vitae.
                </p>
            </div>
            <div class="related_blogs">
                <h3>Other Blogs</h3>
                <a href="china.html">Trip To China</a>
                <a href="spain.html">Trip To Spain</a>
                <a href="japan.html">Trip To Japan</a>
                <a href="italy.html">Trip To Italy</a>
                <a href="hongkong.html">Trip To Hong Kong</a>
                <a href="nepal.html">Trip To Nepal</a>
            </div>
        </aside>
    </div>
    <footer class="footer">
        <div class="footer_container">
            <h2>Stay Connected</h2>
            <div class="footer_social">
                <a href="#">Facebook</a>
                <a href="#">Instagram</a>
                <a href="#">YouTube</a>
                <a href="#">Twitter</a>
            </div>
            <div class="footer_navbar">
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="blogs.html">Blog</a>
                <a href="#">Contact</a>
                <a href="#">Privacy</a>
            </div>
        </div>
        <div class="copyright"> &copy; Udacity Project 2023 </div>
    </footer>
   
</body>
</html>

blog.css

@import url("general.css");
@import url("header.css");
@import url("footer.css");

.container{
    width: 95%;
    margin: 0 auto;
}
article img{
    width: 100%;
    height: auto;
}
article h1,h2{
    margin: 20px 0;
}
article ul{
    width: 90%;
    margin: 19px;
}
.about_container{
    margin-top: 30px;
    padding: 25px;
    background-color: #f3f3ff;
}
.about_container img{
    height: 150px;
    width: 150px;
    border-radius: 50%;
}
.related_blogs{
    margin-top: 15px;
    display: flex;
    flex-direction: column;
}
.related_blogs a{
    color: #000;
}

@media (min-width: 768px) {
    .container{
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-template-rows: auto;
        gap: 25px;
    }
    .about_container{
        margin-top: 0;
    }
}