Create a web site to share your travel blog stories from multiple trips. Desktop site should...

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.

Solutions

Expert Solution

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!

venereology answered 4 months ago

Next > < Previous

Related Solutions

Create a web site to share your travel blog stories from multiple trips. Desktop site should...

what we should do to protect and secure Web Site and Web Application

You are to develop from the beginning a web site about yourself with regards to your...

You are to develop from the beginning a web site about yourself with regards to your course studies and any certifications you have done so far. This web site provides certain required details about your education/studies which you did. You will design and develop your web site with Notepad/Notepad++, HTML, Java Script and CSS. The purpose of this assignment is for you to build a web site that will contain some details about all of your course degrees you have...

Visit one of your favorite websites in your desktop browser, and then visit the same site...

Visit one of your favorite websites in your desktop browser, and then visit the same site using the browser on a mobile device (tablet or phone). What, if any, differences do you see? Why do you think those differences exist? Are some activities easier on the desktop site than on the mobile site, or vice versa? Would you suggest any changes to the desktop or mobile sites based on your comparison? Does your LinkedIn profile contain the following elements? Demonstrate...

Create a program that will prompt for user information for a Web site. Use a structure...

Create a program that will prompt for user information for a Web site. Use a structure to store the data. The structure will need to include the following items: First Name - string Last Name - string Full Name - string Birth Date - int (assume format yyyymmdd) IsLeasingAutomobile - bool yearlySalary - float Create a single structure from the items listed above. Prompt for all items except "Full Name" and load the input directly into a variable based on...

Create one a one day travel package for 'Allocentric tourists' - The travel package should satisfy...

Create one a one day travel package for 'Allocentric tourists' - The travel package should satisfy the needs of these type of tourists - Travel package can be one or two pages long. - It should include the following information: - Which city/destination? You may choose a destination from the following countries: - USA/Canada/Nepal/Denmark - Detail of Activities Attractions to be visited Transportation Accommodation Food & beverage arrangements - What is the price in Canadian Dollars Per Person --------------------------------------------------

Please use markup language HTML5 please. For this homework assignment, you will create a Web site...

Please use markup language HTML5 please. For this homework assignment, you will create a Web site made up of three different pages and links between those pages Index.htm The Web pages in a site should have a similar look-and-feel. For this site, you should create a simple menu as follows: Create a horizontal line across the very top and bottom of the page. Also on the home (Index) page, create links to the other two pages. The links should appear...

Referencing the blog posts from Karl Denniger’s Market Ticker blog and your textbook readings this week...

Referencing the blog posts from Karl Denniger’s Market Ticker blog and your textbook readings this week analyze how income and cultural trends can impact an individual’s diet. Cite examples that support your conclusions. http://market-ticker.org/akcs-www?singlepost=3356715. http://market-ticker.org/akcs-www?singlepost=3356669. Please reference those links for the answer an put the link in APA format and also use APA for citing references in-txt and end of document citations.

2 -Create the code to generate a web page that contains a table. The table should...

2 -Create the code to generate a web page that contains a table. The table should have 4 columns and 4 rows. Each cell should be 100 pixels wide by 100 pixels high. The border should be 2 pixels.

1 -Create the code to generate a default web page. The contents of this page should...

1 -Create the code to generate a default web page. The contents of this page should be YourName, right justified

Subjects