my first bootstrap and javascript website
TRANSCRIPT
My first Bootstrap and Javascript website (practice)
Base code:<!DOCTYPE html><html>
<head> <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet"> <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css"> <link rel="stylesheet" href="main.css"> </head>
<body> <div class="nav"> <div class="container"> <ul class="pull-left"> <li><a href="#">Name</a></li> <li><a href="#">Browse</a></li> </ul> <ul class="pull-right"> <li><a href="#">Sign Up</a></li> <li><a href="#">Log In</a></li> <li><a href="#">Help</a></li> </ul> </div> </div>
<div class="jumbotron"> <div class="container"> <h1>Find a place to stay.</h1> <p>Rent from people in over 34,000 cities and 192 countries.</p> <a href="#">Learn More</a> </div> </div>
<div class="neighborhood-guides"> <div class="container"> <h2>Neighborhood Guides</h2> <p>Not sure where to stay? We've created neighborhood guides for cities all around the world.</p> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <img src="http://goo.gl/0sX3jq" > </div> <div class="thumbnail"> <img src="http://goo.gl/an2HXY" > </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="http://goo.gl/Av1pac" > </div> <div class="thumbnail"> <img src="http://goo.gl/vw43v1"> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="http://goo.gl/0Kd7UO" > </div> </div> </div> </div> </div>
<div class="learn-more"> <div class="container"> <div class="row"> <div class="col-md-4">
<h3>Travel</h3><p>From apartments and rooms to treehouses and boats: stay in unique spaces
in 192 countries.</p><p><a href="#">See how to travel on Airbnb</a></p>
</div>
<div class="col-md-4"><h3>Host</h3><p>Renting out your unused space could pay your bills or fund your next
vacation.</p><p><a href="#">Learn more about hosting</a></p>
</div>
<div class="col-md-4"><h3>Trust and Safety</h3><p>From Verified ID to our worldwide customer support team, we've got your
back.</p><p><a href="#">Learn about trust at Airbnb</a></p>
</div> </div> </div></div>
</body></html>
CSS:.nav a { color: #5a5a5a; font-size: 11px; font-weight: bold; padding: 14px 10px; text-transform: uppercase;}
.nav li { display: inline;}
.jumbotron { background-image: url('http://goo.gl/04j7Nn'); height: 500px; background-repeat: no-repeat; background-size: cover;}
.jumbotron .container { position: relative; top:100px;}
.jumbotron h1 { color: #fff; font-size: 48px; font-family: 'Shift', sans-serif; font-weight: bold;}
.jumbotron p { font-size: 20px; color: #fff;}
.learn-more { background-color: #f7f7f7;}
.learn-more h3 { font-family: 'Shift', sans-serif; font-size: 18px; font-weight: bold;}
.learn-more a { color: #00b0ff;}
.neighborhood-guides { background-color: #efefef; border-bottom: 1px solid #dbdbdb;}
.neighborhood-guides h2 { color: #393c3d; font-size: 24px;}
.neighborhood-guides p { font-size: 15px; margin-bottom: 13px;}
Webpage:
Webpage (continued):