JavaJam WEBSITE CASE STUDY Styling for the Mobile Web cotqures the webaite for d
ID: 3751376 • Letter: J
Question
JavaJam
Explanation / Answer
The base code was not provided so generating it on my own using the matching and relevant content as shown in Screenshot.
Please find below the HTML codes for the 3 Different pages and the properly commented and working CSS for Desktop, Tablet and Smartphone devices.
home.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaJam Coffee House</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="javajam.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>JavaJam Coffee House</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="#">Jobs</a></li>
</ul>
</nav>
<main>
<h2>Following the winding road to JavaJam...</h2>
<img class="floatright" src="windingroad.jpg" height="156" width="333" alt="The Winding Road">
<ul>
<li>Specialty Coffee and Tea</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night</li>
</ul>
<div>
12312 Main Street<br>
Mountain Home, CA 93923<br>
<a id="mobile" href="tel:1-888-555-5555">1-888-555-5555</a>
<span id="desktop">1-888-555-5555</span><br><br>
</div>
</main>
<footer>
Copyright © 2018 JavaJam Coffee House<br>
<a href="mailto:example@example.com">example@example.com</a>
</footer>
</div>
</body>
</html>
menu.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaJam Coffee House Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="javajam.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>JavaJam Coffee House</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="jobs.html">Jobs</a></li>
</ul>
</nav>
<main>
<dl>
<dt><strong>Just Java</strong></dt>
<dd>Regular house blend, decaffinated coffee, or flavor of the day.<br>
Endless Cup $2.00</dd>
<dt><strong>Cafe Au Lait</strong><dt>
<dd>House blended coffee infused into a smooth, steamed milk.<br>
Single $2.00 Double $3.00</dd>
<dt><strong>Iced Cappucino</strong></dt>
<dd>Sweetened espresso blended with icy-cold milk and served in chilled glass.<br>
Single $4.75 Double $5.75</dd>
</dl>
</main>
<footer>
Copyright © 2018 JavaJam Coffee House<br>
<a href="mailto:example@example.com">example@example.com</a>
</footer>
</div>
</body>
</html>
music.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaJam Coffee House Music</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="javajam.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>JavaJam Coffee House</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="jobs.html">Jobs</a></li>
</ul>
</nav>
<main>
<p>The first Friday night each month at JavaJam is a special night! Join us from 8pm to 11pm for some music you won’t want to miss!</p>
<h2>January</h2>
<p class="details"><a href="melanie.jpg"><img src="melaniethumb.jpg" height="80" width="80" alt="Melanie Morris"></a>Melanie Morris entertains with her melodic folk style. Check out the podcast! CDs are now available.</p>
<h2>February</h2>
<p class="details"><a href="greg.jpg"><img src="gregthumb.jpg" width="80" height="80" alt="Tahoe Greg"></a>Tahoe Greg’s back from his tour. New songs. New stories. CDs are now available.</p>
</main>
<footer>
Copyright © 2018 JavaJam Coffee House<br>
<a href="mailto:example@example.com">example@example.com</a>
</footer>
</div>
</body>
</html>
javajam.css
/* Generic CSS and Desktop */
header,
nav,
main,
footer {
display: block;
}
body {
background-color: #ffffcc;
background-image: url(background.gif);
color: #330000;
font-family: Tahoma, Verdana, sans-serif;
}
header {
background-image: url(javalogo.gif);
background-position: center;
background-repeat: no-repeat;
background-color: #ccaa66;
height: 160px;
}
h1 {
background-color: #ccaa66;
color: #000000;
text-align: center;
margin: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
footer {
background-color: #ccaa66;
color: #000000;
font-size: small;
font-style: italic;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
footer:link {
color: #ffffcc;
}
footer:visited {
color: #f2eab7;
}
footer:hover {
color: #330000;
}
nav {
text-align: center;
float: left;
width: 100px;
font-weight: bold;
padding-top: 10px;
}
nav a {
text-decoration: none;
padding-bottom: 15px;
}
nav a:link {
color: #996633;
}
nav a:visited {
color: #ccaa66;
}
nav a:hover {
color: #330000;
}
nav ul {
list-style-type: none;
}
#wrapper {
background-color: #ffffcc;
margin-left: auto;
margin-right: auto;
width: 80%;
min-width: 700px;
max-width: 1024px;
box-shadow: 3px 3px 3px;
}
h2 {
text-transform: uppercase;
background-color: #ffffcc;
color: #663300;
font-size: 1.2em;
border-bottom: 1px solid #000000;
padding: 5px 0 0 5px;
margin-right: 20px;
clear: left;
}
main {
padding: 10px 20px 30px 20px;
margin-left: 150px;
background-color: #f2eab7;
color: #000000;
overflow: auto;
}
.details {
padding-left: 20%;
padding-right: 20%;
overflow: auto;
}
img {
border: 0;
}
.floatright {
float: right;
padding-left: 20px;
}
.floatleft {
float: left;
padding: 0 20px 20px 0;
}
#mobile {
display: none;
}
#desktop {
display: inline;
}
/* CSS for Tablet Devices */
@media only screen and (max-width: 1024px) {
body {
background-image: none;
margin: 0;
}
#wrapper {
width: auto;
min-width: 0;
margin: 0;
box-shadow: none;
}
header {
background-image: url(javalogomobile.gif);
background-repeat: no-repeat;
background-position: center;
height: 80px;
}
nav {
float: none;
width: auto;
padding-top: 0;
margin-top: 0;
}
nav li {
display: inline-block;
}
nav a {
padding: 1em;
font-size: 1.3em;
width: 8em;
font-weight: bold;
border-style: none;
}
nav ul {
padding: 0;
margin: 0;
}
main {
padding: 2em;
margin: 0;
font-size: 90%;
}
}
/* CSS for Smartphones */
@media only screen and (max-width: 768px) {
nav a {
display: block;
padding: 0.2em;
width: auto;
border-bottom: 1px;
border-bottom-color: #330000;
}
nav li {
display: block;
}
h2 {
padding: 0.5em 0 0 0.5em;
margin-right: 0.5em;
}
details {
padding-left: 0;
padding-right: 0;
}
.floatright {
display: none;
}
.floatleft {
padding-left: 0.5em;
padding-right: 0.5em;
}
#mobile {
display: inline;
}
#desktop {
display: none;
}
}
Feel free to case in you have any query.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.