There must be at least one Grid layout and one Flex layout on your website Grid style requirements: • grid-template-areas • gid-template-columns • grid-template-rows • grid-area Flex style requirements: • flex-direction (can be set to row our column) • flex-wrap • flex-basis • flex-grow - you must have one item that grows more than other flex items given available space! • flex-shrink - you must have one item that shrinks more than other flex items given available space! Create at least one animation on your website Create at least one transition on each page
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<style>
*{
margin: 0;
padding: 0;
}
@media (min-width:1200px){
body{
background-color: skyblue;
}
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: aqua;
}
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;
}
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:720px){
body{
background-color: skyblue;
}
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: aqua;
}
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;
}
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:720px){
body{
background-color: skyblue;
}
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: aqua;
}
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;
}
footer>.foot{
padding: 10px;
display: flex;
flex-direction: column;
text-align: center;
}
}
</style>
</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>
<p>Author: Josiah McSweeney<br>
<p>Copyright Reserved</p>
</div>
</footer>
</main>
</body>
</html>
Step by step
Solved in 5 steps with 4 images
