I am trying to get the image styles for both page one and two, so all six images, from the html files to the css file. could someone help me as I am not allowed to have style elements on my html sheets, only css. HTML for PAGE 1: 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. HTML for PAGE 2: Flexbox Coding Link to Page 1 Link to Page 2 Much did had call new drew that kept. Limits expect wonder law she. Now has you views woman noisy match money rooms. To up remark it eldest length oh passed. Off because yet mistake feeling has men. Consulted disposing to moonlight ye extremity. Engage piqued in on coming. And sir dare view but over man. So at within mr to simple assure. Mr disposing continued it offending arranging in we. Extremity as if breakfast agreement. Off now mistress provided out horrible opinions. Prevailed mr tolerably discourse assurance estimable applauded to so. Him everything melancholy uncommonly but solicitude inhabiting projection off. Connection stimulated estimating excellence an to impression. CSS CODE: body { background-color: black; margin: 0; padding: 0; } .flex-container { display: flex; } .flex-container > div { background-color: white; width: 50%; margin: 10px; padding: 10px; font-size: 16px; } .header-image img { width: 100%; height: auto; } .footer-image { text-align: center; background-color: black; padding: 20px; } .footer-image img { width: 100%; height: auto; } }
I am trying to get the image styles for both page one and two, so all six images, from the html files to the css file. could someone help me as I am not allowed to have style elements on my html sheets, only css.
HTML for PAGE 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flexbox Coding</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header-image">
<img src="57mBcYi.jpeg" alt="Header Image">
</header>
<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>
<ul>
<li>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.</li>
<li><img src="5.jpg" style="width: 15%"/></li>
<li><img src="lego-star-wars.jpg" style="width: 20%" /></li>
</ul>
</div>
<div>
<ul>
<li>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.</li>
<li><img src="OIP.jpg" style="width: 15%" /></li>
</ul>
</div>
</div>
<footer class="footer-image">
<img src="banner.jpg" alt="Footer Image">
</footer>
</body>
</html>
HTML for PAGE 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flexbox Coding</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header-image">
<img src="57mBcYi.jpeg" alt="Header Image">
</header>
<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>
<ul>
<li> Much did had call new drew that kept. Limits expect wonder law she. Now has you views woman noisy match money rooms. To up remark it eldest length oh passed. Off because yet mistake feeling has men. Consulted disposing to moonlight ye extremity. Engage piqued in on coming.</li>
<li><img src="1.jpg" style="width: 15%" /></li>
<li><img src="2.jpg" style="width: 20%" /></li>
</ul>
</div>
<div>
<ul>
<li>And sir dare view but over man. So at within mr to simple assure. Mr disposing continued it offending arranging in we. Extremity as if breakfast agreement. Off now mistress provided out horrible opinions. Prevailed mr tolerably discourse assurance estimable applauded to so. Him everything melancholy uncommonly but solicitude inhabiting projection off. Connection stimulated estimating excellence an to impression.</li>
<li><img src="3.jpg" style="width: 15%" /></li>
</ul>
</div>
</div>
<footer class="footer-image">
<img src="banner.jpg" alt="Footer Image">
</footer>
</body>
</html>
CSS CODE:
body {
background-color: black;
margin: 0;
padding: 0;
}
.flex-container {
display: flex;
}
.flex-container > div {
background-color: white;
width: 50%;
margin: 10px;
padding: 10px;
font-size: 16px;
}
.header-image img {
width: 100%;
height: auto;
}
.footer-image {
text-align: center;
background-color: black;
padding: 20px;
}
.footer-image img {
width: 100%;
height: auto;
}
}
Step by step
Solved in 3 steps with 1 images
