Make an HTML page with this code in it: Sample DoggoLand Rides Doggotron Doggolator Dogarium Tickets Location Doggos Hello, doggo fans! DoggLand is the barkiest place in the world. Learn more Doggos are the best! Rosie A cute Jack Russel terrier. A little hyper. Now and then. Go somewhere Change it, to use the Superhero theme from Bootswatch. (https://bootswatch.com) GIVE ALL CODES. thank you i will upvote.
Make an HTML page with this code in it:
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <title>Sample</title>
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
- integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
- </head>
- <body>
- <div class="container">
- <div class="row">
- <div class="col">
- <nav class="navbar navbar-expand-lg navbar-light bg-light">
- <a class="navbar-brand" href="javascript:void(0)" title="Home">DoggoLand</a>
- <button class="navbar-toggler" type="button" data-toggle="collapse"
- data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
- aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse" id="navbarSupportedContent">
- <ul class="navbar-nav mr-auto">
- <li class="nav-item dropdown">
- <a class="nav-link dropdown-toggle" title="Get your thrill on!" href="javascript:void(0)"
- id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
- aria-expanded="false">
- Rides
- </a>
- <div class="dropdown-menu" aria-labelledby="navbarDropdown">
- <a class="dropdown-item" title="Spinning fun!" href="javascript:void(0)">Doggotron</a>
- <a class="dropdown-item" title="I'll be bark" href="javascript:void(0)">Doggolator</a>
- <a class="dropdown-item" title="A bazillion happy doggos" href="javascript:void(0)">Dogarium</a>
- </div>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="javascript:void(0)" title="Buy your tickets here" tabindex="-1"
- aria-disabled="true">Tickets</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="javascript:void(0)" title="Where we are">Location</span></a>
- </li>
- </ul>
- </div>
- </nav>
- <h1>Doggos</h1>
- <div class="mt-4 p-5 bg-light rounded">
- <h1 class="display-4">Hello, doggo fans!</h1>
- <p class="lead">DoggLand is the barkiest place in the world. </p>
- <a class="btn btn-primary btn-lg" href="javascript:void(0)" role="button">Learn more</a>
- </div>
- <p>Doggos are the <em>best!</em></p>
- <div class="card" style="width: 18rem;">
- <img src="https://web.skilling.us/sites/default/files/lessons/basic-sites/images/rosie1.jpg"
- class="card-img-top" alt="Rosie">
- <div class="card-body">
- <h5 class="card-title">Rosie</h5>
- <p class="card-text">A cute Jack Russel terrier. A little hyper. Now and then.</p>
- <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
- integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
- crossorigin="anonymous"></script>
- </body>
- </html>
Change it, to use the Superhero theme from Bootswatch. (https://bootswatch.com)
GIVE ALL CODES. thank you i will upvote.
Algorithm Title: Using the Superhero Theme from Bootswatch
Step 1: Create an HTML file.
- Create a new text file and save it with a ".html" extension, e.g., "index.html."
Step 2: Set up the HTML structure.
- Open the HTML file in a text editor.
- Add the HTML structure:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Sample</title>
</head>
<body>
<!-- Your content goes here -->
</body>
</html>
Step 3: Link to Bootstrap and Superhero Theme.
- Inside the `<head>` section, add links to Bootstrap and the Superhero theme from Bootswatch:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@5.2.0/superhero/bootstrap.min.css">
Step 4: Add your content.
- Inside the `<body>` section, add your content, such as navigation, headings, text, and images. Customize the content to fit your needs.
Step 5: Include Bootstrap JavaScript.
- At the bottom of the `<body>` section, add a script tag to include Bootstrap JavaScript:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
Step 6: Save the HTML file.
- Save the HTML file with your changes.
Step 7: Open in a Web Browser.
- Open the HTML file in a web browser to view your web page with the Superhero theme from Bootswatch.
Step 8: Further customization (optional).
- Customize the content and styling of your web page to suit your specific needs and design preferences.
Step 9: Test and deploy.
- Test your web page in various web browsers to ensure compatibility.
- Deploy your web page to a web server if you intend to make it publicly accessible.
End of Algorithm.
Step by step
Solved in 4 steps with 2 images
