Create a static website using HTML & Bootstrap that matches the 4 screenshots as closely as you can.
There are two pages in the website, the Home page and the Contact Us page.
Each page should match the corresponding screenshot at the given sizes:
XS (less than 576px)
XL (greater than 1200px)
Between those sizes you can choose how to layout the pages - whatever looks nice to you. The "Dimensions: Responsive" option in the Device Toolbar in the browser's Developer Tools is a convenient way to check particular pixel widths.
You shouldn't need to write any CSS or use any CSS/Bootstrap/Sass variables to get the page to match the screenshots, just HTML with Bootstrap classes applied to the elements.
The screenshots were created using Bootstrap v5.3. Using another version of Bootstrap may affect your ability to match the screenshots without writing your own CSS.
The footer of every page should have links to the following websites:
- https://wildlandsconservancy.org/
- https://www.brycecanyon.org/
- https://sonomalandtrust.org/
- https://www.visitredwoods.com/
All the images are provided in the assets folder.
(For convenient copying into various places in the page)
...
All the beauty of nature in one place.
...
Nestled amidst lush landscapes and teeming with vibrant flora and fauna, our sanctuary is a haven for those seeking solace and connection with the natural world.
...
Nature is not a place to visit. It is home.
...
Environmental Commitment At the Nature Preserve, we are deeply committed to eco preservation and sustainability. We believe that it is our responsibility to protect and preserve the environment for future generations. We actively implement environmentally-friendly practices throughout our operations, striving to minimize our ecological footprint and maximize positive impact.
- Each page matches both screenshots at both size
- Home page matches screenshot to best of your ability at >1200px wide
- Home page matches screenshot to best of your ability at <576px wide
- Contact Us page matches screenshot to best of your ability at >1200px wide
- Contact Us page matches screenshot to best of your ability at <576px wide
- At the XS size on both pages, the navbar menu opens and shows the Home and Contact Us links
- Only Bootstrap columns are directly inside of Bootstrap rows and all columns are inside a row
- All the relative links in the navbar work
- All the absolute links in the footer work
- All the images display correctly
- Clicking on each of the labels in the form (Full Name, Email, Reason for Contacting, Comments, and Send me spam) focuses the form element (input, select or textarea) it is labeling
- HTML filenames have no spaces or capital letters and end in .html
- The head element has a title element inside it with a title of your choice
- HTML is indented correctly
- Opening and closing tags are on lines that are indented the same amount
- Content inside of tags is indented one more than the tags they are inside of (indenting head and body is optional)
- All opening tags have closing tags (or tag is self-closing)
- All tag names and attribute names are lowercase
- There are no spaces around attribute equal signs