Immortal Ideas
Adding H2 & Paragraph
Let's now add some H2 and paragraph
So after the hero image, below it, let's add an H2 - "Who We Are"
<!DOCTYPE html>
<html>
<head>
<style>
img.hero {
width:100%; height:auto
}
#Firstheading {
background-color: crimson;
color: white;
padding-bottom: 25px;
padding-top: 25px;
text-align: center;
}
</style>
</head>
<body>
<h1 ID="Firstheading">Mars Calling. Get Your Tickets Now!</h1>
<img class="hero" src="Images/Mars-Photo.jpg">
<h2>Who We Are?</h2>
</body>
</html>
The End Result Is-
As you can see, we need to align the H2 to the center so that it looks good.
Now, since there will be many Headings on our website, that will be aligned to the center, instead of using ID tag to mark it, let's use the Class tag. Why? Because you can ID identifies one single element, but with class, you can identify any number of elements. This means that we can group together those headings that we want to be in the center using just one class attribute.
<h2 class="center-heading">Who We Are?</h2>
Let's now add a stylesheet in the header.
The full code will look like this - the stylesheet is highlighted in blue.
<!DOCTYPE html>
<html>
<head>
<style>
img.hero {
width:100%; height:auto
}
#Firstheading {
background-color: crimson;
color: white;
padding-bottom: 25px;
padding-top: 25px;
text-align: center;
}
h2.center-heading {
text-align:center;
}
</style>
</head>
<body>
<h1 ID="Firstheading">Mars Calling. Get Your Tickets Now!</h1>
<img class="hero" src="Images/Mars-Photo.jpg">
<h2 class="center-heading">Who We Are?</h2>
</body>
</html>
The size of the heading is quite smaller. Let's make it big.
Lets add another line to the same style sheet
h2.center-heading {
text-align:center;
font-size: 50px;
}
If you want to make it bigger, you can use 70px, 80px... You get the idea.
Now to add some paragraph, we have to add a <p> element
<body>
<h1 ID="Firstheading">Mars Calling. Get Your Tickets Now!</h1>
<img class="hero" src="Images/Mars-Photo.jpg">
<h2 class="center-heading">Who We Are?</h2>
<p>We are the premier Mars tourism services in India. Pack your bags and come to us.
We'll provide you a smooth ride to the Red Planet. Marvel at the alien civilization.
Explore the aesthetic beauty of the 4th rock from the sun.
You might even get to see some alien insects if you are lucky.
And then we will take you safely back to Earth. It will be a once in a lifetime experience.
Come. Buy the ticket to the Red Planet today!</p>
</body>
</html>