Hello, I was hoping someone could look at my code and tell me what I am doing wrong as to why my images are not fitting the webpage. I have attached the HTML code and have screenshotted the CSS code along with an image of how the webpage turns out where you can clearly see the header and footer images not fitting the page. HTML CODE: Flexbox Coding Link to Page 1 Link to Page 2 An country demesne message it. Bachelor domestic extended doubtful as concerns at. Morning prudent removal an letters by. On could my in order never it. Or excited certain sixteen it to parties colonel. Depending conveying direction has led immediate. Law gate her well bed life feet seen rent. On nature or no except it sussex. Warmly little before cousin sussex entire men set. Blessing it ladyship on sensible judgment settling outweigh. Worse linen an of civil jokes leave offer. Parties all clothes removal cheered calling prudent her. And residence for met the estimable disposing. Mean if he they been no hold mr. Is at much do made took held help. Latter person am secure of estate genius at.

Database System Concepts

7th Edition

ISBN:9780078022159

Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Chapter1: Introduction

Section: Chapter Questions

Problem 1PE

See similar textbooks

Related questions

Question

Hello, I was hoping someone could look at my code and tell me what I am doing wrong as to why my images are not fitting the webpage. I have attached the HTML code and have screenshotted the CSS code along with an image of how the webpage turns out where you can clearly see the header and footer images not fitting the page.

HTML CODE:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Flexbox Coding</title>
</head>
<link rel="stylesheet" href="Style.css">

<div class="flex-container">
<div>
<ul>
<li><a href="Page1.html">Link to Page 1</a></li>
<li><a href="Page2.html">Link to Page 2</a></li>
</ul>
</div>
<div>An country demesne message it. Bachelor domestic extended doubtful as concerns at. Morning prudent removal an letters by. On could my in order never it. Or excited certain sixteen it to parties colonel. Depending conveying direction has led immediate. Law gate her well bed life feet seen rent. On nature or no except it sussex.</div>
<div>Warmly little before cousin sussex entire men set. Blessing it ladyship on sensible judgment settling outweigh. Worse linen an of civil jokes leave offer. Parties all clothes removal cheered calling prudent her. And residence for met the estimable disposing. Mean if he they been no hold mr. Is at much do made took held help. Latter person am secure of estate genius at.</div>
</div>

</body>
</html>

**Links Section:**

- [Link to Page 1](#)
- [Link to Page 2](#)

**Content Section:**

An country demesne message it. Bachelor domestic extended doubtful as concerns at. Morning prudent removal an letters by. On could my in order never it. Or excited certain sixteen it to parties colonel. Depending conveying direction has led immediate. Law gate her well bed life feet seen rent. On nature or no except it Sussex.

Warmly little before cousin Sussex entire men set. Blessing it ladyship on sensible judgment settling outweigh. Worse linen an of civil jokes leave offer. Parties all clothes removal cheered calling prudent her. And residence for met the estimable disposing. Mean if they be then no hold Mr. Is at much do made took held help. Latter person am secure of estate genius at.

**Images and Graphics:**

- **Top Image**: Displays an imaginative scene with LEGO characters resembling science fiction themes, set in a desert-like environment with an intricate dome-like structure made of bricks in the sky.
- **Bottom Image (Navigation Banner)**: Features LEGO characters wielding glowing weapons, enhancing the playful and adventurous theme of the page.

Certainly! Below is a transcription of the CSS code from the image, formatted to appear on an educational website. This code snippet shows how to style basic web page elements using CSS.

---

### CSS Basics for Web Page Styling

```css
body {
background-color: black;
}

.flex-container {
display: flex;
}

.flex-container > div {
background-color: white;
width: 50%;
margin: 10px;
padding: 10px;
font-size: 30px;
}

.header-image {
width: 100%;
height: auto;
}

.footer {
text-align: center;
background-color: #f0f0f0;
padding: 20px;
}

.footer img {
width: 100%;
height: auto;
}
```

**Explanation:**

- **Body**: The body of the page has a black background.
- **Flex Container**: Uses the `flex` display property to layout children in a flexible manner.
- **Flex Items**: Inside the `.flex-container`, each `div` has a white background, occupies 50% of the container's width, and has a margin, padding, and a font size defined.
- **Header Image**: Any element with the class `.header-image` will have full width and an automatic height to maintain aspect ratio.
- **Footer**: The footer is centered with a light grey background and additional padding for spacing.
- **Footer Images**: Images within the footer will also be displayed at full width, preserving their aspect ratio.

This CSS provides a basic template for designing a simple responsive web page layout.

Expert Solution

Trending now

This is a popular solution!

Step by step

Solved in 3 steps with 1 images

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.

Similar questions