HTML and CSS Independent Challenge 3 //Nearby files <!DOCTYPE html> <html lang=\
ID: 3817661 • Letter: H
Question
HTML and CSS Independent Challenge 3
//Nearby files
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hotel Natoma - San Francisco Museums</title>
<!--
Hotel Natoma what's nearby web page
Filename: nearby.html
Author:
Date:
HTML5 and CSS3 Illustrated Unit L, Independent Challenge 3
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="modernizr.custom.28018.js"></script>
<link href="http://fonts.googleapis.com/css?family=Krona+One" rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="icon" sizes="192x192" href="images/android.png">
</head>
<body>
<div class="container">
<p class="skipnavigation"><a href="#contentstart">Skip navigation</a></p>
<header>
<h1><a href="index.html"><img src="images/logo.gif" width="368" height="65" alt="Hotel Natoma"></a></h1>
</header>
<nav class="sitenavigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="nearby.html">What’s Nearby</a></li>
<li><a href="museums.html">Museums</a></li>
<li><a href="greensf.html">Green SF</a></li>
<li><a href="reserve.html">Reservations</a></li>
</ul>
</nav>
<article>
<h2 id="contentstart">What’s Nearby</h2>
<section class="aam">
<h3>Asian Art Museum</h3>
<p>The museum features a stunning permanent collection along with regular special exhibits. Themed galleries include China, Korea, Japan, South Asia, The Persian World and West Asia, Southeast Asia, and The Himalayas and the Tibetan Buddhist World.</p>
</section>
<section class="cablecar">
<h3>Cable Car Turnaround</h3>
<p>Watch cable car operators keep century-old technology alive, turning the cars by hand. You can also buy a ticket here and hop a ride on these San Francisco icons.</p>
</section>
<section class="cityhall">
<h3>City Hall</h3>
<p>Enjoy the architecture of this centerpiece of Civic Center, both inside and out. You can also take a guided tour, or you can just explore the building on your own.</p>
</section>
<section class="ccplaza">
<h3>Civic Center Plaza</h3>
<p>Lined with sycamores, the plaza affords a great view of City Hall. It’s also a great place for a picnic on a sunny day.</p>
</section>
<section class="unplaza">
<h3>United Nations Plaza</h3>
<p>Decorated with memorials to the founding of the UN in San Francisco, the plaza hosts farmers’ markets and swap meets most days.</p>
</section>
</article>
<footer>
<p>568 Natoma St. • San Francisco, CA 94103 • (415) 555-8378</p>
</footer>
</div>
</body>
</html>
////
Styles
/*
Hotel Natoma style sheet
Filename: styles.css
Author:
Date:
HTML5 and CSS3 Illustrated Unit L, Independent Challenge 3
*/
/* reset styles */
html {
font-size: 20px;
}
a, article, body, div, figcaption, figure, footer, header, h1,
h2, h3, img, li, nav, p, section, textarea, ul {
border: 0;
padding: 0;
margin: 0;
}
img {
max-width: 100%;
height: auto;
width: auto;
}
ul {
list-style-type: none;
}
/* body and page container */
body {
font-family: Arial, Helvetica, sans-serif;
}
.container {
max-width: 960px;
margin: 0 auto;
border-left: 3px solid black;
border-right: 3px solid black;
position: relative;
border-top-left-radius: 25px;
border-bottom-right-radius: 25px;
}
/* skip navigation link */
p.skipnavigation a {
position: absolute;
left: -10000px;
}
p.skipnavigation a:focus {
left: auto;
right: 1em;
top: 1em;
background-color: white;
color: #082008;
z-index: 2;
}
/* header section */
header {
padding: 0.5em;
background-color: #082008;
border-top-left-radius: 22px;
}
h1 img {
margin: 0 auto;
display: block;
}
/* site navigation */
nav.sitenavigation {
padding: 2%;
text-align: center;
background-color: #93ad78;
}
nav.sitenavigation li {
margin: 0 1em;
padding: 0.2em;
display: inline-block;
}
nav.sitenavigation li:hover {
background: #082008;
border-radius: 0.2em;
}
nav.sitenavigation a:link {
color: white;
text-decoration: none;
font-weight: bold;
}
nav.sitenavigation a:visited {
color: #dddddd;
}
nav.sitenavigation a:hover, nav.sitenavigation a:focus {
text-shadow: 0 0 6px #082008;
}
/* main content */
article {
padding: 2%;
background-color: linen;
overflow: auto;
}
article h2 {
margin-bottom: 0.6em;
font-family: "Krona One", Arial, Helvetica, sans-serif;
font-size: 1.6em;
line-height: 2em;
font-weight: 400;
text-align: center;
}
article p {
margin: 0 2em 0.5em;
}
/* footer section */
footer {
padding: 10px;
text-align: center;
color: white;
background-color: #082008;
border-bottom-right-radius: 22px;
}
/* print styles */
@media print {
article {
width: 100%;
}
article, body, .container, footer {
border: 0;
color: rgb(0,0,0);
background-color: rgb(255,255,255);
}
body {
max-width: 100%;
}
nav {
display: none;
}
}
@page {
margin: 0.75in;
}
//Captions
WEBVTT FILE
NOTE
Hotel Natoma cable car turnaround video captions
Filename: captions.vtt
Author:
Date:
HTML5 and CSS3 Illustrated Unit L, Independent Challenge 3
Descriptions
WEBVTT FILE
NOTE
Hotel Natoma cable car turnaround video descriptions
Filename: descriptions.vtt
Author:
Date:
HTML5 and CSS3 Illustrated Unit L, Independent Challenge 3
Explanation / Answer
HTML
-----------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hotel Natoma - Reservations</title>
<link type="text/css" rel="stylesheet" media="screen" href="hnform.css" />
<link type="text/css" rel="stylesheet" media="print" href="hnprint.css" />
<link rel="shortcut icon" href="favicon.ico" />
<!--[if lt IE 9]>
<script src="scripts/semantic.js"></script>
<![endif]-->
</head>
<body>
<div id="box">
<p id="skipnav"><a href="#main">Skip navigation</a></p>
<h1>
<img src="images/natoma.gif" width="368" height="65" alt="Hotel Natoma" title="" />
</h1>
<nav>
<ul id="mainnav">
<li><a href="index.html">Home</a></li>
<li><a href="nearby.html">What's Nearby</a></li>
<li><a href="http://bit.ly/bb3Sic" target="_blank">Location</a></li>
<li><a href="museums.html">SF Museums</a></li>
<li><a href="greensf.html">Green SF</a></li>
<li><a href="reserve.html">Reservations</a></li>
</ul>
</nav>
<article>
<h2 id="main">Reservations</h2>
<form name="contact" id="contact">
<fieldset id="contactinfo">
<legend><span>Contact Information</span></legend>
<label for="nameinput">
Name
<input type="text" id="nameinput" name="name" placeholder="First and last name" />
</label>
<label for="emailinput">
Email
<input type="email" id="emailinput" name="email" placeholder="address@example.com" />
</label>
<label for="phoneinput">
Phone
<input type="text" id="phoneinput" name="phone" />
</label>
</fieldset>
<fieldset id="reserveinfo">
<legend><span>Reservation Information</span></legend>
<fieldset id="partybox">
<legend>Party size</legend>
<label for="partynum">
Number in your party
<input type="text" id="partynum" name="partynum" />
</label>
<label for="roomnum">
Number of rooms required
<input type="text" id="roomnum" name="roomnum" />
</label>
</fieldset>
<fieldset id="bedbox">
<legend>Bed preference</legend>
<label for="king">
<input type="checkbox" id="king" name="bed" value="King/Queen" />
King/Queen
</label>
<label for="twin">
<input type="checkbox" id="twin" name="bed" value="Twin" />
Twin
</label>
<label for="other">
<input type="checkbox" id="other" name="bed" value="Other/Mix (please specify in Additional Information section below)" />
Other/Mix (please specify in Additional Information section below)
</label>
</fieldset>
<fieldset id="checkin">
<legend>Check-in date</legend>
<select id="inmonth" name="inmonth">
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="indate" name="indate">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select id="inyear" name="inyear">
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
</select>
</fieldset>
<fieldset id="checkout">
<legend>Check-out date</legend>
<select id="outmonth" name="outmonth">
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="outdate" name="outdate">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select id="outyear" name="outyear">
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
</select>
</fieldset>
<fieldset id="parkingbox">
<legend>Parking</legend>
<label for="parking">
I need parking for
<input type="text" id="parking" name="parking" />
vehicles
</label>
</fieldset>
</fieldset>
<fieldset id="additionalinfo">
<legend><span>Additional information</span></legend>
<label for="feedback">
Feedback, special requests, or other information
</p> <textarea id="feedback" name="feedback" rows="5" cols="55"></textarea> <p/>
</label>
</fieldset>
<fieldset id="submitbutton">
<input type="button" id="submit" value="Submit" />
</fieldset>
</form>
</article>
<footer>
<p id="contact">568 Natoma St. • San Francisco, CA 94103 • (415) 555-8378</p>
</footer>
</div>
<p> Victoria Laudeman, HTML5 Unit I, Independent Challenge 3 </p>
</body>
</html>
--------------------------------------------------------------------------------
CSS
--------------------------------------------------------------------------------
/* Hotel Natoma */
/* HTML5 Unit I, Independent Challenge 3 */
@font-face {
font-family: 'PTSansCaption';
src: url('fonts/PTC55F-webfont.eot');
src: local(''), url('fonts/PTC55F-webfont.woff') format('woff'), url('fonts/PTC55F-webfont.ttf') format('truetype'), url('fonts/PTC55F-webfont.svg#webfontaMnF3Xb4') format('svg');
font-weight: normal;
font-style: normal;
}
article, aside, body, dd, div, dl, dt, figcaption, figure, footer, h1, h2, h3, header, li, nav, ol, p, section, table, th, td, ul {
margin: 0;
padding: 0;
}
article, aside, figure, header, footer, nav {
display: block;
}
body {
font-family: tahoma, verdana, arial, sans-serif;
margin: 0 auto;
width: 960px;
}
figcaption {
position: absolute;
bottom: 0;
left: 0;
padding: 0.1em;
width: 100%;
margin-bottom: 0.5em;
background: rgb(255, 255, 255);
background: rgba(255, 255, 255, 0.6);
}
figure {
display: block;
float: right;
margin: 0 0 0.5em 1em;
text-align: center;
position: relative;
}
figure img {
display: block;
margin-bottom: 0.5em;
}
footer {
clear: both;
text-align: center;
background: #93AD78;
-webkit-border-bottom-right-radius: 35px;
-moz-border-radius-bottomright: 35px;
border-bottom-right-radius: 35px;
}
footer p {
padding: 0.5em;
}
h1 {
text-align: center;
font-family: tahoma, verdana, arial, sans-serif;
font-weight: normal;
background: #082008;
color: white;
font-size: 2em;
-webkit-border-top-left-radius: 35px;
-moz-border-radius-topleft: 35px;
border-top-left-radius: 35px;
}
h2 {
font-size: 1.5em;
text-align: center;
padding: 15px 0;
}
nav {
background: #93AD78;
border-bottom: 0.25em solid #082008;
padding: 0.5em;
text-align: left;
}
ol {
padding-left: 40px;
}
ul {
padding-left: 40px;
}
legend, #submit {
font-family: tahoma, verdana, arial, sans-serif;
}
fieldset {
margin-bottom: 12px;
position: relative;
padding: 2.5em 1em 0.5em 1em;
background: #93AD78;
border: 0.25em solid #082008;
}
fieldset fieldset {
padding-top: 10px;
}
form {
background: #082008;
padding: 5px;
}
input, textarea {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size: 1em;
}
input:focus, textarea:focus {
background: #e3d5ba;
}
legend span {
position: absolute;
left: 0;
font-size: 1.25em;
margin-top: 0.5em;
margin-left: 0.5em;
}
#box {
border: 0.25em solid #082008;
background: #FDF5E6;
position: relative;
-webkit-border-top-left-radius: 40px;
-webkit-border-bottom-right-radius: 40px;
-moz-border-radius-topleft: 40px;
-moz-border-radius-bottomright: 40px;
border-top-left-radius: 40px;
border-bottom-right-radius: 40px;
}
#contactinfo, #reserveinfo, #additionalinfo, #submitbutton {
border: none;
}
#contactinfo label {
display: block;
position: relative;
margin: 12px 0;
}
#contactinfo input {
position: absolute;
left: 100px;
}
#nameinput, #emailinput {
width: 30em;
}
#phoneinput {
width: 12em;
}
#partynum, #roomnum {
width: 3em;
margin-right: 20px;
}
#checkin {
//position: relative;
float: left;
}
#checkout {
//position: relative;
float: right;
}
#parking {
width: 3em;
}
#bedbox label, #parkingbox label, #partybox label {
margin-right: 25px;
}
#submit {
background: #e3d5ba;
font-size: 1.25em;
display: inline;
list-style-type: none;
padding: 4px 12px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#submitbutton {
border: none;
padding: 1em 0;
text-align: center;
}
#logo {
background: #082008;
}
#logo img {
display: block;
margin: 0 auto;
}
#mainnav, {
text-align: left;
padding: 0.5em;
border-bottom: 0.25em solid #082008;
margin: 0;
}
#mainnav li {
display: inline;
list-style-type: none;
padding: 4px 12px;
background: #082008;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
}
#mainnav li a {
text-decoration: none;
}
#nameinput, #emailinput {
width: 30em;
}
#skipnav {
color: white;
position: absolute;
top: 0;
right: 10px;
z-index: 10;
}
#skipnav a {
text-decoration: none;
}float: right;
.center {
margin: 0 auto;
}
.center img {
display: block;
padding: 0 0 2em 0;
margin: 0 auto;
}
.right {
margin: 0 1em 0 0;
float: right;
clear: right;
}
.right img {
display: block;
}
a:link {
color: black;
}
a:visited {
color: #082008;
}
a:hover {
text-decoration: underline;
}
a:active {
color: #082008;
}
#mainnav a:link, #skipnav a:link {
color: white;
}
#mainnav a:visited, #skipnav a:visited {
color: #ffffcc;
}
#mainnav a:hover, #skipnav a:hover {
text-decoration: underline;
}
#mainnav a:active, #skipnav a:active {
color: white;
}
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.