Change Arizona State University to your favorite team name 2. Replace the ASU Trident image with...

  

Transcribed Image Text:

Change "Arizona State University" to your favorite team name 2. Replace the ASU Trident image with your team's logo. I recommend using something with a natural size around 150px x 150px. 3. Alternate the div colors to match your team colors 4. Change the fonts colors appropriately 5. You can leave the "menu" and "Lorem ipsum..." alone 6. Change Firstname and Lastname in the footer to reflect your name. 7. Viewport defined meta tag 8. Correct box model 9. All units are relative, no absolute units 10. No matter how small or big there will be no scrollbars RWD Homework: Responsive Team Webpage Your task is to make a webpage for your favorite team that is completely responsive. It follows all of the rules for a responsive page including: 1. Viewport defined meta tag 2. Correct box model 3. All units are relative, no absolute units 4. No matter how small or big there will be no scrollbars Start with the HTML/CSS template given to you. Make a webpage with the following model Arizona State University Menu Menu Menu Menu Menu Menu My Favorate Team Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, saepe, harum. Architecto quisquam asperiores corporis fugiat, repellendus sunt, maiores deserunt esse sed atque maxime alias totam est iste molestias quaerat? Illo consequuntur possimus laudantium magni ipsum odit cupiditate nisi similique tempore necessitatibus officia quaerat provident, voluptatibus accusamus tenetur. Illo laudantium, magni maiores assumenda distinctio ratione est voluptates veritatis suscipit. Sit. ©Firstname Lastname Hints: You have seen demonstrations of column widths with a grid, and block heights with vh/vw units. I would create the grid first, then set the heights. You have to set the height of each div inside of the row. Make use of classes to make it easier. Font sizes could be managed with classes as well. For the image, it is tricky to get images to scale and center perfectly. Put the <img> inside a div, <div class="imageDiv"> <img src="..."></div> and style the imageDiv as shown below. Heading: 9 columns wide 30 vh tall Font-size: 8vh Image tag and styling .image Div {display: flex; } Menu: Font-size: 3vh img { margin: auto auto; Main: max-width: 24vw; 10 columns wide max-height: 20vh; 60 vh tall Heading Font-size: 5vh Text font-size: 3vh } Footer: 12 columns wide 10 vh tall Font-size: 3vh LOS ANGELES LAKERS Change "Arizona State University" to your favorite team name 2. Replace the ASU Trident image with your team's logo. I recommend using something with a natural size around 150px x 150px. 3. Alternate the div colors to match your team colors 4. Change the fonts colors appropriately 5. You can leave the "menu" and "Lorem ipsum..." alone 6. Change Firstname and Lastname in the footer to reflect your name. 7. Viewport defined meta tag 8. Correct box model 9. All units are relative, no absolute units 10. No matter how small or big there will be no scrollbars RWD Homework: Responsive Team Webpage Your task is to make a webpage for your favorite team that is completely responsive. It follows all of the rules for a responsive page including: 1. Viewport defined meta tag 2. Correct box model 3. All units are relative, no absolute units 4. No matter how small or big there will be no scrollbars Start with the HTML/CSS template given to you. Make a webpage with the following model Arizona State University Menu Menu Menu Menu Menu Menu My Favorate Team Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, saepe, harum. Architecto quisquam asperiores corporis fugiat, repellendus sunt, maiores deserunt esse sed atque maxime alias totam est iste molestias quaerat? Illo consequuntur possimus laudantium magni ipsum odit cupiditate nisi similique tempore necessitatibus officia quaerat provident, voluptatibus accusamus tenetur. Illo laudantium, magni maiores assumenda distinctio ratione est voluptates veritatis suscipit. Sit. ©Firstname Lastname Hints: You have seen demonstrations of column widths with a grid, and block heights with vh/vw units. I would create the grid first, then set the heights. You have to set the height of each div inside of the row. Make use of classes to make it easier. Font sizes could be managed with classes as well. For the image, it is tricky to get images to scale and center perfectly. Put the <img> inside a div, <div class="imageDiv"> <img src="..."></div> and style the imageDiv as shown below. Heading: 9 columns wide 30 vh tall Font-size: 8vh Image tag and styling .image Div {display: flex; } Menu: Font-size: 3vh img { margin: auto auto; Main: max-width: 24vw; 10 columns wide max-height: 20vh; 60 vh tall Heading Font-size: 5vh Text font-size: 3vh } Footer: 12 columns wide 10 vh tall Font-size: 3vh LOS ANGELES LAKERS

Answer rating: 100% (QA)

Heres a breakdown of ... View the full answer