Skip to content
Browse files

HW4 part 1.

  • Loading branch information...
1 parent 0ea1b0f commit 09748e112c9b2a4143adf53402e5bba61ad33464 @jest committed Jul 27, 2013
Showing with 292 additions and 100 deletions.
  1. +292 −100 index.html
View
392 index.html
@@ -1,103 +1,295 @@
<!DOCTYPE html>
<html lang="en">
- <head>
- <meta charset="utf-8">
- <title>My First Bitstarter</title>
- <link type="text/css" rel="stylesheet"
- href="https://d396qusza40orc.cloudfront.net/startup%2Fcode%2Fbootstrap-2.3.2.css">
- <style type="text/css">
- body {
- padding-top: 20px;
- padding-bottom: 40px;
- }
- .container {
- width: 960px;
- }
- p.lead {
- padding-top: 15px;
- }
- .navigation, .pitch, .section1, .section2, .faq, .footer {
- padding: 10px 0px 10px 0px;
- }
- .video, .thermometer, .order, .social {
- border: 1px dotted;
- text-align: center;
- }
- .video {
- /* Internal borders have 1px width, thus need to add 4 x 1px to 120px. */
- height: 124px;
- line-height: 124px;
- }
- .thermometer, .order, .social {
- /* line-height to vertically center: http://phrogz.net/css/vertical-align/index.html */
- height: 40px;
- line-height: 40px;
- }
- div.row {
- border: 1px solid;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <div class="row navigation">
- <div class="span2 logo">
- Logo
- </div>
- <div class="span6 blank">
- Blank
- </div>
- <div class="span4 about">
- About
- </div>
- </div>
- <div class="row heading">
- <div class="span12">
- <h1>Bitstarter Title</h1>
- </div>
- </div>
- <div class="row subheading">
- <div class="span12">
- <p class="lead">This is my first bitstarter project.</p>
- </div>
- </div>
- <div class="row pitch">
- <div class="span6 video">
- Video
- </div>
- <div class="span6">
- <div class="thermometer">
- Thermometer
- </div>
- <div class="order">
- Order
- </div>
- <div class="social">
- Social
- </div>
- </div>
- </div>
- <div class="row section1">
- <div class="span12">
- Marketing Section 1
- </div>
- </div>
- <div class="row section2">
- <div class="span12">
- Marketing Section 2
- </div>
- </div>
- <div class="row faq">
- <div class="span12">
- FAQ
- </div>
- </div>
- <div class="row footer">
- <div class="span12">
- Footer
- </div>
- </div>
- </div>
- </body>
-</html>
+<head>
+ <meta charset="utf-8">
+ <title>My First Bitstarter</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="https://d396qusza40orc.cloudfront.net/startup%2Fcode%2Fbootstrap-combined.no-icons.min.css">
+ <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css">
+ <link rel="stylesheet" href="https://d396qusza40orc.cloudfront.net/startup%2Fcode%2Fsocial-buttons.css">
+ <script src="https://d396qusza40orc.cloudfront.net/startup%2Fcode%2Fjquery.js"></script>
+ <script src="https://d396qusza40orc.cloudfront.net/startup%2Fcode%2Fbootstrap.js"></script>
+ <link href="http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic" rel="stylesheet" type="text/css">
+ <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,300,400,600,700,800" rel="stylesheet" type="text/css">
+ <style type="text/css">
+ /* Large desktop */
+ @media (min-width: 980px) {
+ body {
+ padding-top: 60px;
+ }
+ .linediv-l {
+ border-right: 1px solid white;
+ }
+ .linediv-r {
+ border-left: 1px solid white;
+ }
+ }
+
+ /* Landscape phones and down */
+ @media (max-width: 480px) {
+ .copy {
+ padding: 2.5% 10%;
+ }
+ .linediv-l {
+ border-bottom: 1px solid white;
+ }
+ .linediv-r {
+ border-top: 1px solid white;
+ }
+ }
+
+ /* All form factors */
+
+ /* Main body and headings */
+ body {
+ font-family: 'Open Sans', Helvetica, Arial, sans-serif;
+ }
+
+ .heading,.subheading {
+ font-family: Ubuntu, Helvetica, Arial, sans-serif;
+ text-align: center;
+ }
+
+ p.lead {
+ padding-top: 1.5%;
+ font-size: 24px;
+ line-height: 30px;
+ }
+
+ p {
+ font-size: 18px;
+ line-height: 24px;
+ }
+
+ /* Video pitch and Action */
+ .pitch {
+ padding: 2.5% 0%;
+ }
+
+ .order {
+ padding: 2% 0%;
+ }
+
+ .actions {
+ background-color: #343434;
+ padding: 3% 0%;
+ }
+
+ .video,.thermometer,.order,.social,.statistics {
+ text-align: center;
+ }
+
+ .statistics h3, .statistics p {
+ color: white;
+ }
+
+ /* Marketing Copy and Footer */
+ .copy {
+ padding-top: 2.5%;
+ padding-bottom: 2.5%;
+ text-align: justify;
+ }
+
+ .asset {
+ padding: 2.5% 0%;
+ }
+
+ .footer {
+ color: #cccccc;
+ text-align: center;
+ }
+
+ .footer p {
+ font-size: 11px;
+ }
+
+ .footer a {
+ color: #ccccff;
+ }
+ </style>
+</head>
+<body>
+ <!-- Mobile-frindly navbar adopted from example. -->
+ <!-- http://twitter.github.io/bootstrap/examples/starter-template.html -->
+ <!-- TODO not working anymore as of 2013-07-27 -->
+ <div class="navbar navbar-inverse navbar-fixed-top">
+ <div class="navbar-inner">
+ <div class="container">
+ <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <a class="brand" href="#">Bitstarter</a>
+ <div class="nav-collapse collapse">
+ <ul class="nav">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#about">About</a></li>
+ <li><a href="#contact">Contact</a></li>
+ </ul>
+ </div> <!-- /.nav-collapse -->
+ </div>
+ </div>
+ </div>
+
+ <!-- We use row-fluid inside containers to achieve a resizable layout. -->
+ <!-- blogs.endjin.com/2013/04/tips-for-implementing-responsive-designs-using-bootstrap/ -->
+ <!-- http://stackoverflow.com/a/12270322 -->
+ <div class="container">
+ <!-- Font and paired font of .heading/.subheading and body from Google Fonts -->
+ <!-- www.google.com/fonts/specimen/Ubuntu -->
+ <!-- www.google.com/fonts/specimen/Ubuntu#pairings -->
+ <div class="row-fluid heading">
+ <div class="span12">
+ <h1>Product</h1>
+ </div>
+ </div>
+ <div class="row-fluid subheading">
+ <div class="span12">
+ <!-- Special typography from Bootstrap for lead paragraph. -->
+ <!-- http://twitter.github.io/bootstrap/base-css.html#typography -->
+ <p class="lead">One sentence description.</p>
+ </div>
+ </div>
+ <div class="row-fluid pitch">
+ <div class="span5 offset1 video">
+ <img class="img-polaroid" src="http://placehold.it/480x300">
+ </div>
+
+ <!-- We define a new 'actions' div to contain statistics, order, and share buttons. -->
+ <div class="span5 actions">
+ <div class="span8 offset2">
+ <div class="statistics">
+ <div class="span4">
+ <!-- livediv-l and livediv-r give dividing lines that look
+ different in horizontal and vertical layouts, illustrating
+ media queries. -->
+ <div class="linediv-l">
+ <h3>1000</h3> <p>backers</p>
+ </div>
+ </div>
+ <div class="span4">
+ <div class="linediv-c">
+ <h3>$6000</h3> <p>of $10,000</p>
+ </div>
+ </div>
+ <div class="span4">
+ <div class="linediv-r">
+ <h3>10</h3> <p>days left</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="span10 offset1">
+ <!-- Bootstrap progress bar -->
+ <!-- http://twitter.github.io/bootstrap/components.html#progress -->
+ <div class="thermometer progress active">
+ <div class="bar bar-success" style="width: 60%"></div>
+ <div class="bar bar-warning" style="width: 40%"></div>
+ </div>
+ </div>
+ <div class="span6 offset3 order">
+ <!-- Standard Bootstrap button -->
+ <!-- http://twitter.github.io/bootstrap/base-css.html#buttons -->
+ <button class="btn btn-success btn-large">Preorder</button>
+ </div>
+ <div class="span8 offset2 social">
+ <!-- Social buttons are not included in default Bootstrap -->
+ <!-- See: http://noizwaves.github.io/bootstrap-social-buttons -->
+ <button class="btn btn-twitter"><i class="icon-twitter"></i> | Twitter</button>
+ <button class="btn btn-facebook"><i class="icon-facebook"></i> | Facebook</button>
+ </div>
+ </div>
+ </div>
+
+ <!-- Beyond this part the marketing copy begins. -->
+ <!-- https://developer.mozilla.org/en-US/docs/Web/CSS/text-align -->
+ <!-- http://twitter.github.io/bootstrap/base-css.html#images -->
+ <!-- http://placehold.it -->
+ <div class="row-fluid section1">
+ <div class="span5 offset1 asset">
+ <img class="img-polaroid" src="http://placehold.it/480x300">
+ </div>
+ <div class="span5 copy">
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ </p>
+ </div>
+ </div>
+ <div class="row-fluid section2">
+ <div class="span5 offset1 copy copy-right">
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ </p>
+ </div>
+ <div class="span5 asset">
+ <img class="img-polaroid" src="http://placehold.it/480x300">
+ </div>
+ </div>
+
+ <!-- For the FAQ, we introduce a little bit of JS, using the accordion. -->
+ <!-- This brings in jquery.js and bootstrap.js as dependencies. -->
+ <!-- http://twitter.github.io/bootstrap/javascript.html#collapse -->
+ <div class="row-fluid faq">
+ <div class="span10 offset1">
+ <h3>FAQ</h3>
+ <div class="accordion" id="accordion2">
+ <div class="accordion-group">
+ <div class="accordion-heading">
+ <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
+ What does FAQ stand for?
+ </a>
+ </div>
+ <div id="collapseOne" class="accordion-body collapse">
+ <div class="accordion-inner">
+ Frequently Asked Question.
+ </div>
+ </div>
+ </div>
+ <div class="accordion-group">
+ <div class="accordion-heading">
+ <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
+ What's a Frequently Asked Question?
+ </a>
+ </div>
+ <div id="collapseTwo" class="accordion-body collapse">
+ <div class="accordion-inner">
+ A question which is commonly asked by users.
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Not crucial, but we put this under a CC By-SA 3.0 license. -->
+ <!-- http://creativecommons.org/licenses/ -->
+ <div class="row-fluid footer">
+ <div class="span12">
+ <p>This work is licensed under
+ the <a href="http://creativecommons.org/licenses/by-sa/3.0/">CC By-SA 3.0</a>,
+ without all the cruft that would otherwise be put at the bottom of the page.</p>
+ </div>
+ </div>
+ </div>
+</body>
+</html>

0 comments on commit 09748e1

Please sign in to comment.
Something went wrong with that request. Please try again.