In: Computer Science
Create a web site to share your travel blog stories from multiple trips. Desktop site should have three columns, the left being navigation, middle is your text, the right is some basic facts about the location that you visited. Tablet site should have two columns, dropping the right column. Mobile phone site should have one column, with the navigation becoming the drop-down list.
In HTML, also don't worry about putting information on the columns you can just put some kind of generic text. Please and thank you.
Please find below the HTML code fulfilling the requirements you have asked for in the question.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Travel Blog</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Travel Blog Stories</h1>
<p>Blog stories from multiple trips.</p>
<nav class="navbar navbar-default hidden-sm hidden-md hidden-lg">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Menu</a> </div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#user2">Places I have visited</a></li>
<li><a href="#user3">Photos</a></li>
<li><a href="#user3">About Me</a></li>
<li><a href="#user3">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-2 col-sm-2 hidden-xs">
<ul class="nav nav-pills nav-stacked">
<li><a href="#user1" data-toggle="tab">Home</a></li>
<li><a href="#user2" data-toggle="tab">Places I visited</a></li>
<li><a href="#user3" data-toggle="tab">Photos</a></li>
<li><a href="#user3" data-toggle="tab">About Me</a></li>
<li><a href="#user3" data-toggle="tab">Contact</a></li>
</ul>
</div>
<div class="col-md-6 col-sm-10" style="padding:2px 16px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo ligula tincidunt neque fringilla, in dignissim erat auctor. Nullam id tortor posuere, maximus felis vel, semper sapien. Maecenas ac quam felis. Fusce accumsan mi at ante elementum lacinia. Ut dapibus porta augue vel tempor. Quisque sodales molestie tortor, nec aliquam dolor. Donec mollis posuere tortor in consequat. Etiam finibus purus fermentum neque porttitor, et mattis metus mollis. Praesent iaculis enim pulvinar, eleifend risus ac, vestibulum risus. Duis in risus mollis, vestibulum felis eget, viverra risus. Fusce pharetra lobortis tincidunt. Ut vitae facilisis metus, at lacinia tellus. Cras in arcu commodo, congue leo ut, imperdiet orci. Sed vitae ex eu odio laoreet aliquam. Duis accumsan vel nulla non pretium. Mauris imperdiet commodo metus vitae mollis.</p>
<p>Nam vehicula iaculis nulla, non laoreet magna pellentesque sit amet. Morbi lobortis ultricies mi vel consequat. Phasellus in laoreet sem, pretium venenatis tortor. Nam vitae congue massa. Donec varius risus vel nisl lacinia sodales. Morbi vestibulum, urna ac tincidunt volutpat, tortor diam scelerisque neque, at pharetra eros nibh in est. Sed suscipit, mi sit amet sollicitudin vehicula, eros nisi lacinia metus, posuere aliquet turpis justo sit amet nisi. Donec elementum est eu aliquam efficitur. Praesent eu fermentum velit, at imperdiet est. Integer diam arcu, tempor id ipsum eu, consequat tincidunt nunc. Nulla facilisi. Pellentesque malesuada mattis ex non dignissim. Sed mattis tellus et nunc sagittis, imperdiet aliquam lectus luctus.</p>
<p>Duis finibus venenatis mi sed rutrum. Vivamus suscipit metus eu efficitur tincidunt. In non ante lorem. Aenean ut luctus urna. Nulla ac nibh interdum, pulvinar sem et, faucibus velit. Duis ligula nisi, maximus pretium nibh vitae, volutpat mattis mauris. Vivamus luctus elit ex, a molestie tellus varius a. Pellentesque nec rhoncus quam. Ut pharetra tincidunt nulla, non vestibulum ligula rutrum a.Duis finibus venenatis mi sed rutrum. Vivamus suscipit metus eu efficitur tincidunt. In non ante lorem. Aenean ut luctus urna. Nulla ac nibh interdum, pulvinar sem et, faucibus velit. Duis ligula nisi, maximus pretium nibh vitae, volutpat mattis mauris.</p>
</div>
<div class="col-md-4 hidden-sm hidden-xs">
<p><b>Here are some incredible, geographic facts about this planet we call Earth.</b></p>
<p>1. Continents shift at about the same rate as your fingernails grow.</p>
<p>2. Mt. Thor on Baffin Island, Canada, has Earth’s greatest sheer vertical drop (4,101 feet).You can take one step off the peak and fall nearly a mile before you hit anything.</p>
<p>3. Ninety percent of Earth's population lives in the Northern Hemisphere.</p>
<p>4. California has more people than all of Canada. Canada: 35.85 million. California: 39.14 million. (According to data from 2015.)</p>
<p>5. Australia is wider than the moon.</p>
<p>6. In the Philippines, there’s an island that’s within a lake, on an island that’s within a lake, on an island.You might need to read that a second time</p>
<p>7. The Dead Sea is currently 429 meters below sea level and sinking about 1 meter a year.</p>
<p>8. At certain times of the year you could walk from the United States to Russia because of two islands known as Big (Russian) and Little (U.S.) Diomede.</p>
</div>
</div>
</div>
</body>
</html>
Hope it helps. Thanks!