Skip to content

Instantly share code, notes, and snippets.

Created April 17, 2017 05:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/5d8bde1f196b919dab297560ff85b072 to your computer and use it in GitHub Desktop.
Save anonymous/5d8bde1f196b919dab297560ff85b072 to your computer and use it in GitHub Desktop.
bayside
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bayside Beat: Cable Cars</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<nav>
<h2 #menulink>
<ul #navlink>
</nav>
<body>
<div id ="wrapper">
<header>
<h1> Bayside Beat</h1>
<nav>
<h2 id="menulink"><a href="#navlinks">Menu</a></h2>
<ul id="navlinks">
<li> <a href = "#"> Home </a></li>
<li> <a href = "#">Sights </a></li>
<li> <a href = "#">Dining </a></li>
<li> <a href = "#">Events </a></li>
<li> <a href = "#">Lodging </a></li>
</ul>
</nav>
</header>
<div id="hero">
<img src ="https://upload.wikimedia.org/wikipedia/commons/0/0c/GoldenGateBridge-001.jpg" >
<p>Bayside Beat keeps you informed of the best places to see, eat, and sleep in the City by the Bay.</p>
</div>
<main>
<h2>Riding the Cable Cars</h2>
<p> No visit to San Francisco is complete without a ride on the iconic cable cars that climb up the vertiginous hills of the city. Of the twenty-three lines established between 1873 and 1890, three remain: two routes from downtown near Union Square to Fisherman's Wharf, and a third route along California Street.</p>
<p>The cable cars rely on cables running constantly beneath the road’s surface. The driver—or gripman—uses a lever to grip the cable to pull the car and its passengers up the hill. The gripman requires not only great strength, but also great skill. He needs to know where to release the cable to coast over crossing cables and points. The conductor works in close cooperation with the gripman, operating the brake at the rear of the car to prevent it from running out of control on the downward slopes.</p>
<figure> <img src = "http://www.hdwallpapers.in/walls/lotus_flowers-wide.jpg" class="grayscale" >
<figcaption>The cable car terminus near Union Square.
</figcaption>
</figure>
<p>Although the cable cars are now mainly a tourist attraction, they’re still used by local commuters to get to and from work. The California Street line is particularly popular among commuters on weekdays. </p>
</main>
<aside>
<h2>Cable Car Tips</h2>
<p>A single ride on a cable car costs $7. If you plan to travel around the city, it’s often cheaper to buy a Muni Passport, which gives you unlimited rides on San Francisco’s extensive public transport system, including the cable cars (but not the BART subway system). Even a single-day passport ($20) will save you money if you make a return trip, and stop off to visit Chinatown one way.</p>
<p>There are often long lines at the cable car terminus, particularly on the Powell-Mason and Powell-Hyde routes. If you don’t want to wait, try walking a few stops along the route. The conductor usually leaves a small number of places to pick up passengers on the way. The California Street route is generally less crowded (but not as spectacular).</p>
</aside>
<footer>
<p>© Copyright 2013–16 Bayside Beat</p>
</footer>
</div>
</body>
</html>
@charset "utf-8";
#wrapper {
}
h1, h2 {
color: #1E1E1E;
font-style: normal;
font-weight: 400;
}
h1 {
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 20px;
}
#wrapper #hero {
max-height: 400px;
overflow: hidden;
}
#menulink {
margin: 0;
text-align: center;
background-color: #1E1E1E;
}
#menulink a {
text-transform: uppercase;
color: white;
font-weight: 200;
text-decoration: none;
display: block;
padding-top: 0.1em;
padding-bottom: 0.1em;
}
#navlinks {
position: absolute;
width: 100%;
margin: 0;
padding: 0;
text-align: center;
background-color: rgba(0,0,0,0.53);
}
#navlinks a {
display: block;
padding-top: 10px;
padding-bottom: 10px;
font-weight: 400;
text-decoration: none;
text-transform: uppercase;
}
#wrapper #hero img {
max-width: 100%;
}
figure {
width: 400px;
margin-left: auto;
margin-right: auto;
}
figure img {
max-width: 100%;
}
.grayscale {
filter: grayscale(100%);
}
.grayscale:hover {
filter: grayscale(0%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment