Description
The contact section is where you put important information such as the address, phone number, email, and location. Include a location inside the <iframe> tag that embeds a Google Map script. The location can be any place you want. Make sure to use eager loading when embedding the Google Map script. Use Bootstrap's aspect ratios to make <iframe> responsive. In addition to this, add a welcoming image next to <iframe>.
The contact information titles should be written in bold:
Address:Phone Number:Email:
The phone number and email texts should be a link with href attributes suitable for phone numbers and emails.
In this stage, we are working on the contact ID.
The layout of the HTML body for this stage should follow the structure below:
<body>
<header.../>
<main>
<div (container)>
<div id=home.../>
<div id=about (container)/>
<div id=products (container)/>
<div id=reviews (container)/>
<div id=contact (container)>
<div (container)>
<h2.../>
<div (container)>
<p.../>
<p.../>
<p.../>
</div>
</div>
<div (container)>
<div (wrapper)>
<iframe.../>
</div>
<div (container)>
<img.../>
</div>
</div>
</div>
</div>
</main>
<script (Bootstrap)/>
<script (JS)/>
</body>Objectives
In this stage, your website should contain:
- A
<h2>tag withContact Us; - Any contact information;
- An image next to the
<iframe>location; - An embedded
<iframe>from Google Map showing the location.
Examples
Example 1: the contact section on a large screen
Example 2: the contact section on a smaller screen
