The CSS Requirements Separate your style sheets into three files: o Istyles/colors.css o Istyles/formatting.css Istyles/transitions-animations.css
This is a solution I got earlier from one of your people it is almost perfect except for some reason they skip the part where they were supposed to divide that one stylesheet into three separate smaller style sheets so I'm reposting their solution so that this can be fixed
The part they missed is highlighted once this has been fixed I will be completely done asking about this problem thank you very much
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--Added main tag-->
<main>
<!--Added nav tag-->
<nav>
<a href="index.html">Home</a>
<a href="contact.html">Contact</a>
<a href="about.html">About</a>
</nav>
<h1>Welcome to my (about me) site</h1>
<picture>
<source media="(min-width:650px)" srcset="./images/me3-650.jpg">
<source media="(min-width:465px)" srcset="./images/me3-465.jpg">
<img src="./images/me3.JPG" alt="ME" style="width:auto;">
</picture>
<h3>HI there this is one of my favorite songs down below.</h3>
<iframe width="420" height="345"
src="https://www.bing.com/search?q=Nirvana%20-%20The%20Man%20Who%20Sold%20The %20World&pc=0TTE&ptag=C1N2A04173C0C08&form=CONBNT&conlogo=CT3210127&shtp=GetUrl&shid=38702244-8c35-477e-a042- 805b2b2d81bc&shtk=TmlydmFuYSAtIFRoZSBNYW4gV2hvIFNvbGQgVGhlIFdvcmxkIChNVFYgVW5wbHVnZ2VkKQ%3D %3D&shdk=UkVNQVNURVJFRCBJTiBIRCEgVGFrZW4gZnJvbSB0aGUgMjV0aCBBbm5pdmVyc2FyeSBFZGl0aW9ucyBvZiBOaXJ2YW5hIGI%3D&shhk=7xVtP%2FaZHQw%2B31lGYV%2F3cJukwLOZgUcFMDTYwdmuLsA %3D&shth=OVP.2ZxeDKLNemtX7dQ99X3ETQHgFo">
</iframe>
<footer>
<div class="foot">
<p>Author: Josiah McSweeney<br>
<p>Copyright Reserved</p>
</div>
</footer>
</main>
</body>
</html>
style.css:
*{
margin: 0;
padding: 0;
}
@media (min-width:1224px){
body{
background-color: darkblue;
color: white;
}
main{
display: grid;
grid-template-areas: "nav"
"h1"
"picture"
"h3"
"iframe"
"footer";
grid-template-columns: auto;
grid-template-rows: auto;
}
nav{
display: flex;
flex-direction: row;
justify-content: end;
background-color: lightcoral;
}
picture{
text-align: center;
}
nav>a{
padding: 10px;
margin: 10px;
}
main>h1, h3{
text-align: center;
}
iframe{
margin: auto;
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color:antiquewhite;
color: black;
}
footer>.foot{
padding: 10px;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.foot:nth-of-type(1) {
flex-shrink: 1;
}
.foot:nth-of-type(2) {
flex-grow: 1;
}
}
@media (min-width:726px){
body{
background-color: darkblue;
color: white;
}
main{
display: grid;
grid-template-areas: "nav"
"h1"
"picture"
"h3"
"iframe"
"footer";
grid-template-columns: auto;
grid-template-rows: auto;
}
nav{
display: flex;
flex-direction: row;
justify-content: end;
background-color: lightcoral;
}
picture{
text-align: center;
}
nav>a{
padding: 10px;
margin: 10px;
}
main>h1, h3{
text-align: center;
}
iframe{
margin: auto;
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color:antiquewhite;
color: black;
}
footer>.foot{
padding: 10px;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.foot:nth-of-type(1) {
flex-grow: 1;
}
.foot:nth-of-type(2) {
flex-shrink: 1;
}
}
@media (min-width:320px) and (max-width:726px){
body{
background-color: darkblue;
color: white;
}
main{
display: grid;
grid-template-areas: "nav"
"h1"
"picture"
"h3"
"iframe"
"footer";
grid-template-columns: auto;
grid-template-rows: auto;
}
nav{
display: flex;
flex-direction: row;
justify-content: center;
background-color: lightcoral;
}
picture{
text-align: center;
}
nav>a{
padding: 10px;
margin: 10px;
}
main>h1, h3{
font-size: 16px;
text-align: center;
}
iframe{
margin: auto;
width: 300px;
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color:antiquewhite;
color: black;
}
footer>.foot{
padding: 10px;
display: flex;
flex-direction: column;
text-align: center;
}
}
Step by step
Solved in 6 steps with 1 images
