Question

In: Computer Science

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 1 year ago
Next > < Previous

Related Solutions

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. Create a form and use JavaScript to validate the user data. Submitting valid data should result in...
Using HTML: Create a Book of the Month Club Web site. The home page should describe...
Using HTML: Create a Book of the Month Club Web site. The home page should describe the current month's selection, including book title, author, publisher, ISBN, and the number of pages. Create separate Web pages for book selections in each of the last three months. Add links to the home page that opens each of the three Web pages. Save the home page as BookClub.html, and save the Web Pages for previous months using the name of the month. BOOK:...
Design an activities page to make this web site complete. a.Use your imagination to create at...
Design an activities page to make this web site complete. a.Use your imagination to create at least four activities. b.Organize these activities in a table. c.Some activities are free but some may charge some fee. d.Once again, the correct resort title and navigation menu bar shall be included.e.Include an image for each activity. Make sure the images’ size are the same.f.When mouse hovers on any image, its size will be enlarged.
what we should do to protect and secure Web Site and Web Application
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...
1. (a)Can you configure your browser to open multiple simultaneous connections to a Web site? (b)What...
1. (a)Can you configure your browser to open multiple simultaneous connections to a Web site? (b)What are the advantages and disadvantages of having a large number of simultaneous TCP connections?
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...
How do I create a backup and restore strategy for a web site and the database...
How do I create a backup and restore strategy for a web site and the database for the site?
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 --------------------------------------------------
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT