Skip to content

Commit

Permalink
HW4-Part1
Browse files Browse the repository at this point in the history
  • Loading branch information
ubuntu committed Jul 19, 2013
1 parent d45a1d5 commit 16211ea
Showing 1 changed file with 214 additions and 63 deletions.
277 changes: 214 additions & 63 deletions client/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,104 +3,255 @@
<head>
<meta charset = "utf-8">
<title>My First Bitstarter</title>
<meta name="viewport" content ='width=device-width, initial-scale=1.0'>
<link type="text/css" rel="stylesheet"
href = "vendor/bootstrap/css/bootstrap.css">

<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 white solid;
}
.linediv-r {
border-left: 1px white solid;
}
}
/* 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 */
body {
padding-top: 20px;
padding-bottom: 40px;
}.container {
width: 960px;
font-family: 'Open Sans' , Helvetica , Arial , sans-serif;
}
p.lead{
padding-top: 15px;
.heading, .subheading{
font-family: 'Ubuntu', Helvetica , Arial , sans-serif;
text-align: center;
}
.navigation, .pitch, .section1, .section2, .faq, .footer{
padding: 10px 0px 10px 0px;
p.lead {
padding-top : 1.5%;
font-size: 24px;
line-height: 30px;
}
.video, .thermometer, .order, .social {
border: 1px dotted;
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;
}
.video {
/* Internal boarder have 1px eidth, thus we need to add 4 x 1px to 120px */
height : 124px;
line-height: 124px;
.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;
}
.thermometer, .order, .social {
/* line height to vertically center : http://phrogz.net/css/vertical-align/index.html*/
height: 40px;
line-height: 40px;
.footer p {
font-size: 11px;
}
div.row {
border: 1px solid;
.footer a {
color: #ccccff;
}

</style>
</head>

<body>

<!-- Mobile-friendly navbar adapted from expample. -->
<!-- http://twitter.github.io/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-toogle="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 resiable layout -->
<!-- blogs.edjin.com/2013/04/tips-for-implementing-responsive-design-using-bootstrap/ -->
<!-- http:/stackoverflow.com/a/12270322 -->
<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 class="row-fluid heading">
<div class="span12">
<h1>Product</h1>
</div>
</div>

<div class = "row heading">
<div class = "span12"> <h1>Bitstarter Title</h1></div>
<div class="row-fluid subheading">
<div class="span12">
<p class="lead">One sentence description. </p>
</div>
<div class = "row subheading">
<div class="span12">
<p class = "lead">This is my first bitstarter project</p>
</div>
</div>

<div class="row-fluid pitch">
<div class="span5 offset1 video">
<img class="img-polaroid" src="http://placehold.it/480x300">
</div>
<div class = "row pitch">
<div class = "span6 video">
Video
</div>
<div class = "span6">
<div class = " thermometer">
Thermometer
</div>
<div class = " order">
Order

<!-- 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 diferent 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>$6300</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 class = " social">
Social
</div>

<div class= "span10 offset1">
<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>

<div class = "row section1">
<div class = "span12">
Makreting Section 1
<div class= "span6 offset3 order">
<button class="btn btn-success btn-large">Preorder</button>
</div>
</div>

<div class = "row section2">
<div class = "span12">
Makreting Section 2
<div class= "span8 offset2 social">
<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 faq">
<div class = "span12">
FAQ
</div>
<!-- marketing copy -->
<div class= "row-fluid section1">
<div class= "span5 offset1 asset">
<img class="img-polaroid" src="http://placehold.it/480x300">
</div>

<div class = "row footer">
<div class = "span12">
Footer
<div class="span5 copy">
<p>sdfasdfasg dsakfj; klasdjf;l lskdj asjkdfh kskadjfh skdfh </p>
</div>
</div>

<div class= "row-fluid section2">
<div class= "span5 offset1 copy copy-right">
<p>sdafs adf hfd fsdadf da gfsda f </p>
</div>
<div class='span5 asset'>
<img class="img-polariod" src="http://placehold.it/480x300">
</div>
</div>

<!-- some JS -->
<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 FAQ is used?
</a>
</div>
<div id= "collapseOne" class= "accordion-body collapse">
<div class= "accordion-inner">
Frequent Ask 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 FAQ is used?
</a>
</div>
<div id= "collapseTwo" class= "accordion-body collapse">
<div class= "accordion-inner">
Frequent Ask Question
</div>
</div>
</div>
</div>
</div>
</div>

<div class = "row-fluid footer">
<div class= "span12"></div>
<p> This works is under licensed under the
<a href="http://creativecommons.org/license/by-sa/3.0"> CC By-SA 3.0 </a>
, without all the cruft that would otherwise be put at the bottom of page.
</p>
</div>
</div>

</body>
</html>

0 comments on commit 16211ea

Please sign in to comment.