Skip to content

Bootst WC (Updated and branch instead of master) #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wilsonwtcheng wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Bootst WC (Updated and branch instead of master) #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
be0fae1
progress of bootstrap
Mar 23, 2015
e8ed60c
bootstrap homework
Mar 24, 2015
9e12bda
updated BootSt
Mar 24, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added .DS_Store
View file
Open in desktop
Binary file not shown.
44 changes: 43 additions & 1 deletion css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,43 @@
/* You can include your custom styling here */
/*.jumbotron {
border-style: 10px solid red;
}*/
/*body {background: lightgrey;}
*/
.pink {background-color: pink;
}
.blue {background-color: blue;
}
.grey {background-color: #F8F8F8 ;
}
.white {background-color: white;
border: 1px solid lightgrey;
}
.green {background-color: green;
}
.purple {background-color: purple;
}
.yellow {background-color: yellow;
}
.red {background-color: red;
color: red;
}
.byben1 {font-style: italic;
}
.support {
margin: 15px auto;
}
''
/* You can include your custom styling here */

<!-- Box test codes start -->
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6 yellow"> WHAT</div> <!-- this sets the stage for the left hand side column -->
<div class="col-sm-6 col-md-6 green col-lg-6 purple"> <!-- this sets the stage for the right hand side column -->
<div class="col-sm-12 col-md-12 col-lg-12 red">Red</div> <!-- the top box within the right hand side column will take the full width of the RHS column - span 12 -->
<div class="col-sm-12 col-md-12 col-lg-12 green">Green</div> <!-- the bottom box within the right hand side column will ALSO take the full width of the RHS column - span 12 -->
</div>
</div>
</div>


<!-- box test codes end -->
144 changes: 118 additions & 26 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@
</head>

<body>

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
Expand Down Expand Up @@ -49,33 +48,88 @@
</div>
</nav>

<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Analytics</a></li>
<li><a href="#">Export</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">Nav item</a></li>
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
<li><a href="">More navigation</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1>News Content</h1>
<!-- below is the left handside bar -->

<div class="container-fluid grey">

<div class="rows">
<div class="hidden-sm col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Analytics</a></li>
<li><a href="#">Export</a></li>
</ul>

<ul class="nav nav-sidebar">
<li><a href="#">Nav item</a></li>
<li><a href="#">Nav item again</a></li>
<li><a href="#">One more nav</a></li>
<li><a href="#">Another nav item</a></li>
<li><a href="#">More navigation</a></li>
</ul>

<ul class="nav nav-sidebar">
<li><a href="#">Nav item again</a></li>
<li><a href="#">One more nav</a></li>
<li><a href="#">Another nav item</a></li>
</ul>
</div>

<div class="hidden-xs col-md-offset-3 support text-center">Support TNW - <span style="color: orange; text-decoration: underline">become Pro</span> and we can ditch the banners.
</div>

<div class="jumbotron white col-md-offset-3">

<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6 ">
<img src="images/main/square-reader-520x245.jpg" class="img-responsive">
<p>
<span style="font-style: italic; color:grey; font-family: sans-serif; font-size: 12px">By </span>
<span style="color: orange; font-size: 12px">BEN WOODS</span>
<span style="font-style: italic; color:grey; font-family: sans-serif; font-size: 12px"> 20-Nov- '14</span>
</p>
<h2>Square officially launches its Register software platform worldwide</h2>
<div>
<span style="color: grey">
Square has today announced that its point-of-sale (POS) software Square Register is now available globally, having previously been restricted to users in the US, Canada and Japan. Announced at The Financial...
</span>
<a href="http://www.nba.com"><span style="color: orange">Keep Reading -></span></a>
<br></br>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="col-sm-12 col-md-12 col-lg-12">
<img src="images/main/well-dressed-man-in-coat-520x245.jpg" class="img-responsive">
<p>
<span style="font-style: italic; color:grey; font-family: sans-serif; font-size: 12px">By </span>
<span style="color: orange; font-size: 12px">JORY MACKAY</span>
<span style="font-style: italic; color:grey; font-family: sans-serif; font-size: 12px"> 20-Nov- '14</span>
</p>
<h4>The weird science of first impressions</h4>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<img src="images/main/fireshot-screen-capture-357-adidas-originals-i-mi-ZX-flux-photo-print-app-www_adidas_co_uk_mizxflux-520x245.png" class="img-responsive">
<p>
<span style="font-style: italic; color:grey; font-family: sans-serif; font-size: 12px">By </span>
<span style="color: orange; font-size: 12px">PAUL SAWERS</span>
<span style="font-style: italic; color:grey; font-family: sans-serif; font-size: 12px"> 20-Nov- '14</span>
</p>
<h4>Adidas now lets Americans print photos on their sneakers too</h4>
</div>
</div>
</div>
</div>
</div> <!-- end of jumbotron -->


</div>

<footer class="footer col-sm-offset-3">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>

<!-- Bootstrap core JavaScript
================================================== -->
Expand All @@ -86,4 +140,42 @@ <h1>News Content</h1>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
</html>



<!-- <div class="row">

<div class="col-sm-9 col-md-10 col-md-offset-2 main pink">
<div>
<img src="images/main/square-reader-520x245.jpg" id="photobanner">

</div>
<p>
<span style="font-style: italic; color:grey; font-family: sans-serif">By </span>
<span style="color: orange">BEN WOODS</span>
<span style="font-style: italic; color:grey; font-family: sans-serif"> 20-Nov- '14</span>
</p>
<h2>Square officially launches its Register software platform worldwide</h2>
<div>
<span style="color: grey">
Square has today announced that its point-of-sale (POS) software Square Register is now available globally, having previously been restricted to users in the US, Canada and Japan. Announced at The Financial...
</span>
<a href="http://www.nba.com"><span style="color: orange">Keep Reading -></span></a>
</div>
</div>
</div>

<div>
<div class="col-sm-3 col-md-3 col-md-offset-2 main green">
<img src="images/main/well-dressed-man-in-coat-520x245.jpg" id="photobanner">
<div class="row">
<div class="col-xs-6 pink col-sm-6 col-md-6"> The weird science of first impressions.
</div>

<div class="col-xs-6 blue col-sm-6 col-md-6"> 2 I'm md n the right I'm md and on the right
</div>
</div>
</div>
</div>
<br></br> -->
161 changes: 161 additions & 0 deletions testing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="images/favicon/favicon.ico">

<title>The Next Web</title>

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

<link href="http://getbootstrap.com/examples/dashboard/dashboard.css" rel="stylesheet">

<script src="js/ie-emulation-modes-warning.js"></script><style type="text/css"></style>

<link href="css/custom.css" rel="stylesheet">

<style type "text/css">

.pink {background-color: pink;}
.blue {background-color: blue;}
.grey {background-color: grey;}
.white {background-color: white;
border: 5px solid grey}
.green {background-color: green;}
.yellow {background-color: yellow;}
.red {background-color: red;}
.byben1 {font-style: italic; }

.imgSt {
display:block;
height: auto;
max-width: 100%;
}

</style>



</head>

<body>




<div class="container-fluid grey"> <!-- this is the container below the top title bar? -->

<!-- below is the left handside bar -->



<div class="white col-sm-offset-0.5">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-3 col-lg-4 yellow col-lg-offset-3 ">
<!-- <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main pink"> -->
<img src="images/main/square-reader-520x245.jpg" class="imgSt">
</img>
<p>
<span style="font-style: italic; color:grey; font-family: sans-serif">By </span>
<span style="color: orange">BBBEN WOODS</span>
<span style="font-style: italic; color:grey; font-family: sans-serif"> 20-Nov- '14</span>
</p>
<h2>Square officially launches its Register software platform worldwide</h2>
<div>
<span style="color: grey">
Square has today announced that its point-of-sale (POS) software Square Register is now available globally, having previously been restricted to users in the US, Canada and Japan. Announced at The Financial...
</span>
<a href="http://www.nba.com"><span style="color: orange">Keep Reading -></span></a>
</div>
</div>
<div class="col-sm-3 col-md-5 green col-lg-5">
<div class="col-sm-12 col-md-12 col-lg-12">
<img src="images/main/well-dressed-man-in-coat-520x245.jpg" class="imgSt"></img>
<p>
<span style="font-style: italic; color:grey; font-family: sans-serif">By </span>
<span style="color: orange">JORY MACKAY</span>
<span style="font-style: italic; color:grey; font-family: sans-serif"> 20-Nov- '14</span>
</p>
<h4>The weird science of first impressions</h4>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<img src="images/main/fireshot-screen-capture-357-adidas-originals-i-mi-ZX-flux-photo-print-app-www_adidas_co_uk_mizxflux-520x245.png" class="imgSt"></img>
<p>
<span style="font-style: italic; color:grey; font-family: sans-serif">By </span>
<span style="color: orange">PAUL SAWERS</span>
<span style="font-style: italic; color:grey; font-family: sans-serif"> 20-Nov- '14</span>
</p>
<h4>Adidas now lets Americans print photos on their sneakers too</h4>
</div>
</div>
</div>
</div>


<!--
<div class"row">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-4 green">Green</div>
<div class="hidden-xs col-sm-8 col-md-3 col-lg-4 red">red</div>
<div class="hidden-xs col-sm-1 col-md-6 col-lg-4 blue">blue</div>
</div> -->



</div>




<!-- <div class="row">

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main pink">
<div>
<img src="images/main/square-reader-520x245.jpg" id="photobanner">
</img>
</div>
<p>
<span style="font-style: italic; color:grey; font-family: sans-serif">By </span>
<span style="color: orange">BEN WOODS</span>
<span style="font-style: italic; color:grey; font-family: sans-serif"> 20-Nov- '14</span>
</p>
<h2>Square officially launches its Register software platform worldwide</h2>
<div>
<span style="color: grey">
Square has today announced that its point-of-sale (POS) software Square Register is now available globally, having previously been restricted to users in the US, Canada and Japan. Announced at The Financial...
</span>
<a href="http://www.nba.com"><span style="color: orange">Keep Reading -></span></a>
</div>
</div>
</div>

<div>
<div class="col-sm-3 col-sm-offset-3 col-md-3 col-md-offset-2 main green">
<img src="images/main/well-dressed-man-in-coat-520x245.jpg" id="photobanner"></img>
<div class="row">
<div class="col-xs-6 pink col-sm-6 col-md-6"> The weird science of first impressions.
</div>

<div class="col-xs-6 blue col-sm-6 col-md-6"> 2 I'm md n the right I'm md and on the right
</div>
</div>
</div>
</div>
<br></br> -->



<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>