Skip to content

Commit

Permalink
homework 4, part 1, simply copy and paste
Browse files Browse the repository at this point in the history
  • Loading branch information
Ubuntu committed Jul 23, 2013
1 parent 17b42b1 commit 69fb18f
Show file tree
Hide file tree
Showing 2 changed files with 255 additions and 63 deletions.
316 changes: 254 additions & 62 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,100 +1,292 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- saved from url=(0070)https://spark-public.s3.amazonaws.com/startup/code/bitstarter-hw4.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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">
<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:300,400,600,700,800,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
<style type="text/css">
body {
padding-top:20px;
padding-bottom:40px;

/* Large desktop */
@media (min-width: 980px) {
body {
padding-top: 60px;
}
.linediv-l {
border-right: 1px white solid;
}
.linediv-r {
border-left: 1px white solid;
}
}
.container {
width:960px;

/* Landscape phones and down */
@media (max-width: 480px) {
.copy {
padding: 2.5% 10%;
}
.linediv-l {
border-bottom: 1px white solid;
}
.linediv-r {
border-top: 1px white solid;
}
}

/* 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:15px;
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%;
}
.navigation, .pitch, .section1, .section2, .faq, .footer {
padding: 10px 0px 10px 0px;
.actions {
background-color: #343434;
padding: 3% 0%;
}
.video, .thermometer, .order, .social {
border: 1px dotted;
.video, .thermometer, .order, .social, .statistics {
text-align: center;
}
.video {
height: 124px;
line-height:124px;
.statistics h3, .statistics p {
color: white;
}
.thermometer, .order, .social {
height:40px;
line-height:40px;

/* Marketing Copy and Footer */
.copy {
padding-top: 2.5%;
padding-bottom: 2.5%;
text-align: justify;
}
div.row {
border: 1px solid;
.asset {
padding: 2.5% 0%;
}
.footer {
color: #cccccc;
text-align: center;
}
.footer p {
font-size: 11px;
}
.footer a {
color: #ccccff;
}
</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
<body style="">

<!-- Mobile-friendly navbar adapted from example. -->
<!-- http://twitter.github.io/bootstrap/examples/starter-template.html -->
<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 class="row heading">
</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>Bitstarter Title</h1>
<h1>Product</h1>
</div>
</div>
<div class="row subheading">
</div>
<div class="row-fluid subheading">
<div class="span12">
<p class="lead">This is my first bitstarter project.</p>
<!-- 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 pitch">
<div class="span6 video">
Video
<div class="row-fluid pitch">
<div class="span5 offset1 video">
<img class="img-polaroid" src="http://placehold.it/480x300">
</div>
<div class="span6">
<div class="thermometer">
Thermomenter

<!-- 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">
<!-- linediv-l and linediv-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="order">
Order
<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="social">
Social
<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>
<div class="row section1">
<div class="span12">
Marketing Section1

<!-- 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>
<div class="row section2">
<div class="span12">
Marketing Section2
<div class="span5 copy">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
porta, dui sagittis hendrerit rutrum, nunc leo tempus nisl, eu
mollis justo velit at nunc. Fusce nec egestas sem. Donec
fringilla ante lectus, a pellentesque lacus dignissim ac. Sed
volutpat lorem ut congue malesuada. In facilisis scelerisque
turpis sed lacinia. Donec in orci lectus. Donec auctor semper
quam, eget rhoncus purus fringilla id. Phasellus id nibh eu
risus ultrices adipiscing. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Donec porta, dui sagittis hendrerit
rutrum, nunc leo tempus nisl, eu mollis justo velit at
nunc. Fusce nec egestas sem. Donec fringilla.
</p>
</div>
</div>
<div class="row faq">
<div class="span12">
FAQ

<div class="row-fluid section2">
<div class="span5 offset1 copy copy-right">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
porta, dui sagittis hendrerit rutrum, nunc leo tempus nisl, eu
mollis justo velit at nunc. Fusce nec egestas sem. Donec
fringilla ante lectus, a pellentesque lacus dignissim ac. Sed
volutpat lorem ut congue malesuada. In facilisis scelerisque
turpis sed lacinia. Donec in orci lectus. Donec auctor semper
quam, eget rhoncus purus fringilla id. Phasellus id nibh eu
risus ultrices adipiscing. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Donec porta, dui sagittis hendrerit
rutrum, nunc leo tempus nisl, eu mollis justo velit at
nunc. Fusce nec egestas sem. Donec fringilla.
</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>
<div class="row footer">

<!-- 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">
Footer
<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>


</body></html>

2 changes: 1 addition & 1 deletion web.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ app.get('/', function(request, response) {
console.log("message:" + getMessage);
});

var port = process.env.PORT || 5000;
var port = process.env.PORT || 8080;
app.listen(port, function() {
console.log("Listening on " + port);
});
Expand Down

0 comments on commit 69fb18f

Please sign in to comment.