The question is: Create a newspaper layout as depicted in the image(Which is looking same as the output of my code) using bootstrap and html components
Image link: https://drive.google.com/file/d/1KwcUdHZznQvVtKlsGVD-TZK7tWR5-d6X/view?usp=sharing
Concept Covered : Bootstrap Typography
Note :-
The layout should be as given in the picture.
Create a parent div within the body element with class as container.
The title "THE NEWS" must be a h2 heading and the abbreviation for NEWS must be indicated as North South East West on mouse over [ use appropriate bootstrap typography components ].
The text below "THE NEWS" must have a contextual success background.
Make sure the "National News" and "World News" is being highlighted using bootstrap typography component.
National News and World News must be in two separate panels. But both should be within the same panel group.
The national news and world news panel body must be in small typography.
The copyright info must be in uppercase using bootstrap class applied to a paragraph tag which is inside the appropriate bootstrap component.
Similarly the warning info must be in a bootstrap warning class and the quote must be in reverse direction as indicated in the image.
<html lang="en"> <!-- DO NOT CHANGE ANY THING UNDER HEAD SECTION --> <head> <title>Bootstrap Example</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.0/css/bootstrap.min.css"> <script src="/additional_files/js/webtechnology/bootstrap/bootstrap.min.js"></script> <script src="/additional_files/js/webtechnology/jquery/jquery.min.js"></script> </head> <body> <!-- CREATE THE PAGE LAYOUT ACCORDING TO GIVEN SPECIFICATIONS --> <!-- HINT :- Use PANEL,abbr,mark,small,Various helper classes and various responsive utilities concepts related to bootstrap --> <div class="container"> <h2>THE <u><abbr title="North">N</abbr><abbr title="East">E</abbr><abbr title="West">W</abbr><abbr title="South">S</abbr></u></h2> <p class="bg-success">This is an e-paper that collates national and world news</p> <div class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"><mark>National News</mark></div> <div class="panel-body text-primary"><small>This section displays all national news and events</small></div> </div> <div class="panel panel-default"> <div class="panel-heading"><mark>World News</mark></div> <div class="panel-body"><small>This section displays all world news and events</small></div> </div> </div> </div> <div><p class="text-uppercase">COPYRIGHT:- THE NEWS INDIA COMPANY</p> <blockquote class="blockquote-reverse warning"> Warning:- Do Not Reproduce </blockquote> </div> </body> </html> <!-- end snippet -->
This code is giving the output properly with an error which I don't know how to resolve
The error message showing is: No class attribute with appropriate values for uppercase and reverse not found
