Write a one-page, douti process that you\'ll be able to use as you begin to desi
ID: 3722295 • Letter: W
Question
Write a one-page, douti process that you'll be able to use as you begin to design websites for sional use Be sure toinclude the URL of the resources thatyou eor t Han Task chap chap WEBSITE CASE STUDY Styling for the Mobile Web Each of the folowing case studies continues throughout most of the text. This Task 2. configuros the webste for dsplay on mobile devices JavaJam Coffee House See Chapter 2 for an introduction to the Java.Jam Coffee House case study. Figure 2.30 you will configure the shows a site map for the Java.Jam website. In this case study, You will code media queries for moble styles; modity the current desktop styles: and shown in Figure 7.17 update the Home, Menu, and Music pages. Use the Chapter 6 JavaJam website starting point for this case study,. When you are finished, the website will look as a desktop browsers (see Figure 6.50). The mobile display should be similar to Figure 7.37 or 7.38. You have seven tasks in this case study: 1. Create a new folder for this JavaJam case study 2. Modify the Home page to include a viewport meta tag. 3. Modity the Menu page to be consistent with the Home page 4. Modily the Music page to be consistent with the Home page. 5. Modify the desktop styles in javajam.css 6. Modity javajam.css and code a media query for tablet display. 7. Modily javajam.css and code a media query for typical smartphone display aJam Coffee House avaJam Coffee: Shose Follow the Winding Road to JavaJam ure 7.38 A teat of the new tablet (or highExplanation / Answer
<!------ ****************** HOME PAGE(index.html) --------------------!>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<a id="mobile" href="tel:888-555-5555"> 888-555-5555</a>
<span id ="desktop"> 888-555-5555</a>
</body>
</html>
<!------ ****************** MENU PAGE(menu.html) --------------------!>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</body>
</html>
<!------ ****************** MUSIC PAGE(music.html) --------------------!>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</body>
</html>
<!----- ************** javajam.css *********** ------!>
#mobile{ display:none;}
#desktop {display:inline}
@media only screen and (max-width: 1024px){
body{ margin:0; background-image:none}
#wrapper{min-width:0;margin:0;padding:0;box-shadow:none;}
header{border-bottom:5px solid #FEF6C2}
h1{margin:0;margin-bottom:1em;padding-top:1em;padding-bottom:1em; font-size:2.5em}
nav{float:none;width:auto;padding-top:0;margin:10px;font-size:1.3em}
nav li{display:inline-block}
nav a{padding:1em;width:8em;font-weight:bold;border-style:none;}
nav ul{padding:0;margin:0}
#heroroad,#heromugs, #heroguitar{margin:0;padding:0}
main{padding:0;margin:0;font-size:90%}
}
@media only screen and (max-width:768px){
header{background-image:"javajammini.jpg";background-height:128px}
h1{font-size:2em; text-align:center;padding-left:0}
nav{margin:0}
nav a{display:block;padding:0.2em;width:auto;border-bottom:1px solid @FEF6C2}
nav li{display:block}
main{padding-top:1px}
h2{padding-top:0.5em;padding-right:0;padding-bottom:0; padding-left:0.5em;margin-right:0.5em}
.details{padding-left:0;padding-right:0}
#hereoroad, #hereomugs, #heroguitar{background-image:none;height:auto}
.floatLeft{padding-right:0.5em}
#mobile{display:inline;}
#desktop{display:none}
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.