Immortal Ideas
Manipulating Images With Flexbox
With flexbox, you can place images side by side.
After the 'Who We Are' part, I want to place some kind of separator, before going ahead and writing the 'Why Us' part. So my plan is to place three small images of rocket to indicate a line break.
Like this-
Placing images side by side is possible in a number of different ways. I'll use flexbox.
First of all save the images of the rocket and put it into the images folder of the main html folder.
First, create a div container after the Who We Are part.
<div>
</div>
Now we give the div element a class attribute.
<div class="container">
</div>
Third, we place the image of the rocket three times inside the div container.
<div class="container">
<img src="Images/rocket.png">
<img src="Images/rocket.png">
<img src="Images/rocket.png">
</div>
Now let's move to the style section in the <head> </head> part.
We have to give the div element a display property of flex.
.container {
display: flex;
}
To keep the rockets in the center, we have to justify the content.
.container {
display: flex;
justify-content: center;
}
So all in all, the whole code looks like this-
<!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;
font-size: 50px;
}
p.whitespace {
margin: 0px 185px 0px 185px;
text-align: center;
font-size: large;
line-height: 110%;
}
#gradient1 {
background-image: linear-gradient(to right, #3494e6, #ec6ead);
margin-top: -45px
}
.container {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<h1 ID="Firstheading">Mars Calling. Get Your Tickets Now!</h1>
<img class="hero" src="Images/Mars-Photo.jpg">
<div ID=gradient1>
<br>
<br>
<h2 class="center-heading">Who We Are?</h2>
<p class="whitespace"> <strong>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!</strong></p>
<br>
<br>
</div>
<div class="container">
<img src="Images/rocket.png">
<img src="Images/rocket.png">
<img src="Images/rocket.png">
</div>
</body>
</body>
</html>
Contact
I'm always looking for new and exciting opportunities. Let's connect.
123-456-7890