Robots and Social Media Meta Tags, Favicon, Page Title & Inline CSS
Sitewide Meta Tags
<meta name="robots" content="noindex">
<meta property="og:title" content="Biringan City">
<meta property="og:description" content="Biringan City is a hidden gem in the Philippines, a beautiful and mystical place that is said to be home to magical beings. Visitors to Biringan City can expect to see stunning scenery, meet friendly locals, and perhaps even catch a glimpse of real-life witches! Whether you believe in fantasy or not, Biringan City is worth a visit.">
<meta property="og:image" content="https://biringan.markllego.com/assets/images/Biringan.png">
<meta property="og:url" content="https://biringan.markllego.com/">
<meta property="og:site_name" content="Biringan City">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@markllego">
<meta name="twitter:creator" content="@markllego">
<meta name="twitter:title" content="Biringan City">
<meta name="twitter:description" content="Biringan City is a hidden gem in the Philippines, a beautiful and mystical place that is said to be home to magical beings. Visitors to Biringan City can expect to see stunning scenery, meet friendly locals, and perhaps even catch a glimpse of real-life witches! Whether you believe in fantasy or not, Biringan City is worth a visit.">
<meta name="twitter:image" content="https://biringan.markllego.com/assets/images/Biringan.png">
<link rel="icon" href="assets/images/Favicon.png">
<title>Biringan City - A place where anything is possible.</title>
<link rel="stylesheet" href="assets/css/style.css">
<style>>
#calltoaction {
background-color: #f56f46;
}
</style>
1. The first line tells search engines not to index the page. This is because the page is not meant for search engines but for website users.
2. The next 11 lines are meta tags for social media. The first 8 lines are for Facebook, and the next 3 lines are for Twitter.
3. The next line of code are for the favicon of the page. You can use a png, ico, or gif file for the favicon. It is recommended to use a 16x16 pixel image for the favicon.
4. The next line of code defines the title of the page. This will show up on the tab of the browser.
5. The next lines of code are for the css style of the page. You can use a css file or you can use inline css.
6. The last lines of code are for inline css. This is where you can put the css code directly on the html file.
Hero Section
Biringan City Homepage
<section class="hero">
<div class="px-4 pt-5 my-5 text-center">
<h1 class="display-1 fw-bold">BIRINGAN CITY</h1>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4 fs-4">Whether you’re looking for a relaxing vacation or an adventure-filled trip, Biringan City is the perfect destination. There is something for everyone in this city. So come and explore all that Biringan has to offer. You won’t be disappointed.</p>
<p class="lead fs-4">Biringan is a place where anything is possible.</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-4"> <a class="btn btn-primary btn-primary btn-lg px-4 me-sm-3 d-none d-sm-block" href="#tourist" role="button">EXPLORE</a> </div>
</div>
<div class="overflow-hidden" style="max-height: 80vh;">
<div class="container"> <img src="assets/images/Biringan.png" class="rounded img-fluid" alt="Biringan City" width="1024" height="1024" loading="lazy"> </div>
</div>
</div>
</section>
1. The div with the class "px-4 pt-5 my-5 text-center" creates the padding and margins for the text and the image.
2. The h1 tag creates the heading of the page.
3. The div with the class "col-lg-6 mx-auto" creates the padding for the text and the margin for the left and right side of the text.
4. The p tag creates the text that is displayed on the page.
5. The a tag creates the button that takes you to the next page.
6. The div with the class "overflow-hidden" creates the padding for the image and the margin for the left and right side of the image.
7. The div with the class "container" creates the padding for the image.
8. The img tag creates the image that is displayed on the page.
9. The style attribute is used to set the height of the iframe to 80% of the viewport height.
10. The max-height CSS property sets the maximum height of the iframe to 80% of the viewport height.
11. The "alt" attribute is a text description of the image. This is used by screen readers to help the visually impaired.
12. The "width" and "height" attributes tell the browser the size of the image in pixels.
13. The "loading" attribute tells the browser whether to load the image immediately or when the browser is about to display it.
14. loading="lazy" - this is the attribute that will make the image lazy load.
15. The img-fluid class is used for the images to be responsive.
Hero with Image on the Left or Right Side
Biringan City Homepage
<section class="bg-light" id="aquarium">
<div class="container col-xxl-8 px-4 py-5">
<div class="row flex-lg-row-reverse align-items-center g-5 py-5">
<div> class="col"> <img src="assets/images/Aquarium.png" class="rounded-circle d-block mx-lg-auto img-fluid" alt="Biringan Aquarium" width="1024" height="1024" loading="lazy"> </div>
<div class="col-lg-6">
<h2> class="display-4 fw-bold lh-1 mb-3">SEA CREATURES</h2>
<p> class="lead">Biringan Aquarium is a magical place where sea creatures come to life. The colors are so vibrant, and the animals so exotic that it's like being in another world.</p>
<p> class="lead">The aquarium is also home to some of the most dangerous creatures in the sea, but they are all behind glass, so there is no need to worry.</p>
<p> class="lead">The aquarium is a popular tourist destination, and it's easy to see why. It's a place where people of all ages can learn about and appreciate the ocean's wonders.</p>
<div> class="d-grid gap-2 d-md-flex justify-content-md-start"> </div>
</div>
</div>
</div>
</section>
1. The section tag is used to group content together.
2. The div tag is used to define a container to hold the content that will be displayed on the webpage.
3. The container class is used to set the width of the container.
4. The col-xxl-8 class is used to set the number of columns to 8.
5. The px-4 class is used to set the padding of the container to 4.
6. The py-5 class is used to set the padding of the container to 5.
7. The row class is used to create a row.
8. The flex-lg-row class is used to set the display of the row to flex.
9. The 'flex-lg-row-reverse' class is added to reverse the alignment of the columns on the large screen.
10. The align-items-center class is used to align the items in the row to the center.
11. The g-5 class is used to set the gap of the row to 5.
12. The py-5 class is used to set the padding of the row to 5.
13. The col class is used to set the number of columns to 1.
14. The img tag is used to display an image on the webpage.
15. The src attribute is used to define the source of the image.
16. The class attribute is used to define the class name for the tag.
17. The rounded class is used to set the border radius of the image to 50%.
18. The d-block class is used to set the display of the image to block.
19. The mx-lg-auto class is used to set the margin of the image to auto.
20. The img-fluid class is used to set the width of the image to 100%.
21. The alt attribute is used to define the alternative text of the image.
22. The width attribute is used to define the width of the image.
23. The height attribute is used to define the height of the image.
24. The loading attribute is used to define the loading of the image.
25. The col-lg-6 class is used to set the number of columns to 6.
26. The h2 tag is used to display a heading on the webpage.
27. The display-4 class is used to set the size of the heading to 4.
28. The fw-bold class is used to set the font weight of the heading to bold.
29. The lh-1 class is used to set the line height of the heading to 1.
30. The mb-3 class is used to set the bottom margin of the heading to 3.
31. The lead class is used to set the font size of the paragraph to 1.25rem.
32. The d-grid class is used to set the display of the div tag to grid.
33. The gap-2 class is used to set the gap of the div tag to 2.