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"> © 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"> © 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"> © 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"> © 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"> © 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"> © 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"> © 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"> © 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;
}
}