Skip to content

Commit

Permalink
HW4: Big diagram responsive index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@carlosrogue
carlosrogue committed Jul 17, 2013
1 parent d64925b commit 1a784db
Showing 1 changed file with 200 additions and 55 deletions.
255 changes: 200 additions & 55 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,96 +3,241 @@
<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">
<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">
body {
padding-top: 20px;
padding-bottom: 40px;
@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;

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


.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;
}

.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;

.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

<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>

<div class="container">

<div class="row-fluid heading">
<div class="span12">
<h1>Bitstarter Title</h1>
<h1>Product</h1>
</div>
</div>
<div class="row subheading">
<div class="row-fluid subheading">
<div class="span12">
<p class="lead">This is my first bitstarter project.</p>
<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">
Thermometer

<div class="span5 actions">
<div class="span8 offset2">
<div class="statistics">
<div class="span4">
<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="order">
Order
<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 class="social">
Social
<div class="span6 offset3 order">
<button class="btn btn-success btn-large">Preorder</button>
</div>
<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 section1">
<div class="span12">
Marketing Section 1
</div>
<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. Donec
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
</p>
</div>
</div>
<div class="row section2">
<div class="span12">
Marketing Section 2

<div class="row-fluid section2">
<div class="span5 offset1 copy copy-right">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
</p>
</div>
<div class="span5 asset">
<img class="img-polaroid" src="http://placehold.it/480x300">
</div>
</div>
<div class="row faq">
<div class="span12">
FAQ

<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 class="row footer">

<div class="row-fluid footer">
<div class="span12">
Footer
<p>This work is licensed under
ther <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>
Expand Down

0 comments on commit 1a784db

Please sign in to comment.