Skip to content

Commit

Permalink
Media Section added. Start Page Updated.
Browse files Browse the repository at this point in the history
  • Loading branch information
Siddharth Bhagwan committed Oct 28, 2014
1 parent 0054f18 commit e0551e5
Show file tree
Hide file tree
Showing 10 changed files with 107 additions and 67 deletions.
2 changes: 1 addition & 1 deletion css/style-wide.min.css
View file

Large diffs are not rendered by default.

67 changes: 47 additions & 20 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,12 @@
font-size: 110%;
}

.example_step {
border-bottom: 1px solid lightgray;
padding-bottom: 1.4em;
margin-bottom: 1.4em;
}

.pre-order-bg {
background-color: #83d3c9 !important;
}
Expand All @@ -50,7 +56,7 @@
font-size: 75%;
}

.apple_badge {
.img_hyperlink {
border-bottom: none;
}

Expand All @@ -62,22 +68,27 @@
background: #f3f6fa;
}

.media_logos {
padding: 1%;
max-width: 250px;
}

@-moz-document url-prefix() {
.goo {
padding: 0.6em 0px !important;
}
}

.sprite { background: url('sprite.png') no-repeat top left; width: 95px; height: 95px; }
.sprite.Android { background-position: 0px 0px; }
.sprite.Arduino { background-position: 0px -105px; }
.sprite.Beacon { background-position: 0px -210px; }
.sprite.Bluetooth { background-position: 0px -315px; }
.sprite.iOS { background-position: 0px -420px; }
.sprite.OpenHW { background-position: 0px -525px; }
.sprite.OpenSW { background-position: 0px -630px; }
.sprite.PlugPlay { background-position: 0px -735px; }
.sprite.USB { background-position: 0px -840px; }
.sprite.Android { background-position: 0px 0px; }
.sprite.Arduino { background-position: 0px -105px; }
.sprite.Beacon { background-position: 0px -210px; }
.sprite.Bluetooth { background-position: 0px -315px; }
.sprite.iOS { background-position: 0px -420px; }
.sprite.OpenHW { background-position: 0px -525px; }
.sprite.OpenSW { background-position: 0px -630px; }
.sprite.PlugPlay { background-position: 0px -735px; }
.sprite.USB { background-position: 0px -840px; }

.example_step {
border-bottom: 1px solid lightgray;
Expand All @@ -93,10 +104,6 @@
margin-bottom:5em
}

#specs_title {
padding-top: 3em;
}

.pre-order-button {
padding: 0em 0.75em !important;
}
Expand Down Expand Up @@ -129,19 +136,39 @@
padding-bottom: 1em;
}

#tah_powerup {
margin-top: -35%;
@media (max-width: 1500px) {
#tah_powerup, #tah_connect {
margin-top: -65%;
}
}

@media (max-width: 800px) {
#tah_powerup {
max-width: 60% !important;
margin-top: 0%;
}

#tah_connect {
margin-top: 0%;
}
}

.twitter_feed {
margin-top: 5%;
/*margin-top: 10%;*/
}

.section_title {
padding-top: 3em;
}

#specs_row_id {
margin: 9px !important;
}

.specs_row {
border: 1px solid lightgray;
padding: 2% 0% 2% 0%;
margin: 0.5em !important;
padding-right: 3%
padding-right: 3%;
}

.single_spec {
Expand Down Expand Up @@ -1205,7 +1232,7 @@
border-top: 0;
}

#topPanel .indent-1,
#topPanel .indent ,
#sidePanel .indent-1 {
display: inline-block;
width: 1em;
Expand Down
2 changes: 1 addition & 1 deletion css/style.min.css
View file

Large diffs are not rendered by default.

Binary file added images/engadget180.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/gdgtarena180.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/hackaday180.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/instructables180.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified images/tah_connect.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
46 changes: 33 additions & 13 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,11 @@ <h1 id="logo"><a href="banner"><img src="./images/tah_new.jpg" width="30px" clas
<li class="current" id="menu_banner"><a href="index.html">Home</a></li>
<li id="menu_what_is_tah"><a href="#main">What is Tah?</a></li>
<li id="menu_tah_features"><a href="#tah_features">Features</a></li>
<li id="menu_specs"><a href="#specs">Specs</a></li>
<li><a href="https://www.crowdsupply.com/revealing-hour/tah-open-ble-arduino-board" target="_blank" class="button special pre-order-bg">Pre-order now</a></li>
<!-- <li id="menu_specs"><a href="#specs">Specs</a></li> -->
<li><a href="http://blog.tah.io">Blog</a></li>
<li><a href="http://docs.tah.io">Docs</a></li>
<li><a href="http://discuss.tah.io">Forum</a></li>
<li><a href="https://www.crowdsupply.com/revealing-hour/tah-open-ble-arduino-board" target="_blank" class="button special pre-order-bg">Buy now</a></li>
</ul>
</nav>
</header>
Expand Down Expand Up @@ -109,11 +112,11 @@ <h3><strong>Smartphone</strong> Controlled</h3>
</div>
<center>
<div>
<a href="https://itunes.apple.com/us/app/tah/id909883039?ls=1&mt=8" target="_blank" class="apple_badge"><img src="./images/AppleBadge.png" width="172" height="60" alt="Apple" style="max-width:100%;"></a>
<a href="https://itunes.apple.com/us/app/tah/id909883039?ls=1&mt=8" target="_blank" class="apple_badge img_hyperlink"><img src="./images/AppleBadge.png" width="172" height="60" alt="Apple" style="max-width:100%;"></a>
</div>
<div class="campaign_live">
<h3>OUR CROWDFUNDING CAMPAIGN IS NOW LIVE ON CROWD SUPPLY!</h3>
<div><a href="https://www.crowdsupply.com/revealing-hour/tah-open-ble-arduino-board" target="_blank" class="button special pre-order-bg pre-order-button">Pre-order now</a></div>
<div><a href="https://www.crowdsupply.com/revealing-hour/tah-open-ble-arduino-board" target="_blank" class="button special pre-order-bg pre-order-button">Buy now</a></div>
</div>
</center>
</section>
Expand Down Expand Up @@ -152,9 +155,9 @@ <h2>Features</h2>
</section>

<section id="specs" class="title">
<h2 style="text-align:center;" id="specs_title">Specifications</h2>
<h2 style="text-align:center;" class="section_title">Specifications</h2>
<div class="container specs_container">
<div class="row specs_row">
<div class="row specs_row" id="specs_row_id" style=".row{margin:9px;}">
<div class="6u">
<div class="single_spec">
<span class="icon fa-check-square-o bullet_features"></span>
Expand Down Expand Up @@ -233,7 +236,7 @@ <h2 style="text-align:center;" id="specs_title">Specifications</h2>
<!-- CTA -->
<section id="cta" class="title">
<div>
<a href="https://www.crowdsupply.com/revealing-hour/tah-open-ble-arduino-board" target="_blank" class="button special pre-order-bg pre-order-button">Pre-order now</a>
<a href="https://www.crowdsupply.com/revealing-hour/tah-open-ble-arduino-board" target="_blank" class="button special pre-order-bg pre-order-button">Buy now</a>
</div><br/>

<div class="new">Stay updated. Sign up for our newsletter.</div><br/>
Expand All @@ -252,13 +255,30 @@ <h2 style="text-align:center;" id="specs_title">Specifications</h2>
</ul>
</form>
</footer>
</section>

<div class="twitter_feed">
<center>
<a class="twitter-timeline" href="https://twitter.com/tah_io" width="520" data-widget-id="512144523997085696">Tweets by @tah_io</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</center>
</div>
<section id="press" class="title main">
<center><h2 class="section_title"> Tah on social media </h2></center>
<div class="wrapper style3 container special">
<div class="row">
<div class="6u">
<div class="twitter_feed">
<center>
<a class="twitter-timeline" href="https://twitter.com/tah_io" width="520" data-widget-id="512144523997085696">Tweets by @tah_io</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
</center>
</div>
</div>
<div class="6u">
<center><a href="https://www.facebook.com/instructables/posts/10152761667701913" class="img_hyperlink"><img src="/images/instructables180.jpg" class="media_logos" style="margin-top:3%" /></a></center>
<center><a href="http://hackaday.com/2014/09/23/bluetooth-thingies-at-maker-faire/" class="img_hyperlink"><img src="/images/hackaday180.jpg" class="media_logos" style="margin-top:9%" /></a></center>
<center><a href="http://www.engadget.com/2014/10/03/tah-bluetooth-arduino-board/" class="img_hyperlink"><img src="/images/engadget180.jpg" class="media_logos" /></a></center>
<center><a href="http://gdgtarena.com/2014/10/05/tah/" class="img_hyperlink"><img src="/images/gdgtarena180.png" class="media_logos" style="margin-top:8%" /></a></center>
</div>
</div>

</div>
</section>

<footer id="footer">
Expand Down
57 changes: 25 additions & 32 deletions start.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,72 +41,65 @@ <h1 id="logo"><a href="../index.html"><img src="../images/tah_new.jpg" width="30
<ul>
<li id="menu_banner"><a href="index.html">Home</a></li>
<li id="start" class="current"><a href="#">Start</a></li>
<li><a href="https://www.crowdsupply.com/revealing-hour/tah-open-ble-arduino-board" target="_blank" class="button special pre-order-bg">Pre-order now</a></li>
<li><a href="http://blog.tah.io">Blog</a></li>
<li><a href="http://docs.tah.io">Docs</a></li>
<li><a href="http://discuss.tah.io">Forum</a></li>
<li><a href="https://www.crowdsupply.com/revealing-hour/tah-open-ble-arduino-board" target="_blank" class="button special pre-order-bg">Buy now</a></li>
</ul>
</nav>
</header>


<article id="main">

<center style="margin-top:5%;"><h2><strong>Getting started with Tah</strong></h2></center>

<center style="margin-top:5%;"><h2>Getting started with Tah</h2></center>
<section class="wrapper style4 container">

<h3>Requirements</h3>
<ul class="task-list">
<li>Tah</li>
<li>Android or iOS device</li>
</ul>

<div class="row">
<div class="12u">
<div>
Now let's get started with using the Tah.Things that you will require :
</div>

<ul class="task-list">
<li>Tah</li>
<li>Android or iOS device</li>
</ul>
</div>
</div>

<div class="row half">
<div class="8u">
<h4><strong><a name="user-content-step-1-power-up-the-tah" class="anchor" href="#step-1-power-up-the-tah" aria-hidden="true"><span class="octicon octicon-link"></span></a>Step 1: Power up the Tah</strong></h4>
<div class="row" style="margin-bottom:5%; border-bottom: 1px solid lightgray;">
<div class="8u">
<h3><a name="user-content-step-1-power-up-the-tah" class="anchor" href="#step-1-power-up-the-tah" aria-hidden="true"><span class="octicon octicon-link"></span></a>Step 1: Power up the Tah</h3>

<p>Connect the Tah to any USB port. It can be on your PC, laptop or Mac.<br>
You can also connect the Tah to a USB wall adapter, like the one you use <br>with your smartphone.<br/>
Make sure that the red LED is always on and the blue LED is blinking.</p>
</div>

<div class="3u">
<img src="./images/tah.gif" width="100%" alt="BlueBlink" style="max-width:100%;" id="tah_powerup"></a></p>
<center><img src="./images/tah.gif" width="100%" alt="BlueBlink" style="max-width:100%;" id="tah_powerup"></a></p></center>
</div>
</div>

<div class="row">
<div class="12u">
<h4><strong><a name="user-content-step-2-install-our-application" class="anchor" href="#step-2-install-our-application" aria-hidden="true"><span class="octicon octicon-link"></span></a>Step 2: Install our application</strong></h4>
<div class="app_links">
<a href="#" target="_blank" class="apple_badge"><img src="./images/AppleBadge.png" width="172" height="60" alt="Apple" style="max-width:100%;"></a>
<div class="5u">
<h3><a name="user-content-step-2-install-our-application" class="anchor" href="#step-2-install-our-application" aria-hidden="true"><span class="octicon octicon-link"></span></a>Step 2: Install our application</h3>
<div class="app_links"><center>
<a href="#" target="_blank" class="apple_badge" style="border-bottom:none;"><img src="./images/AppleBadge.png" width="172" height="60" alt="Apple" style="max-width:100%;"></a></center>
</div>
</div>
</div>

<div class="row">
<div class="8u">
<h4><strong><a name="user-content-step-3-connect-to-the-tah" class="anchor" href="#step-3-connect-to-the-tah" aria-hidden="true"><span class="octicon octicon-link"></span></a>Step 3: Connect to the Tah</strong></h4>
<div class="6u">
<h3><a name="user-content-step-3-connect-to-the-tah" class="anchor" href="#step-3-connect-to-the-tah" aria-hidden="true"><span class="octicon octicon-link"></span></a>Step 3: Connect to the Tah</h3>

<p>Scan for BLE devices using the Tah app and connect <br/> to the device named Tah</p>
Scan for BLE devices using the Tah app and connect <br/> to the device named Tah
</div>
</div>

<div class="row">
<div class="row" style="border-bottom:1px solid lightgray; padding-bottom:3%;">
<div class="5u">
<h4><strong><a name="user-content-step-4-control-led" class="anchor" href="#step-4-control-led" aria-hidden="true"><span class="octicon octicon-link"></span></a>Step 4: Control LED</strong></h4>
<h3><a name="user-content-step-4-control-led" class="anchor" href="#step-4-control-led" aria-hidden="true"><span class="octicon octicon-link"></span></a>Step 4: Control LED</h3>

<p>We have a green LED connected to pin 13. Toggle the state of pin 13 to turn on/off the green the LED.</p>
</div>


<div class="7u">
<img src="./images/tah_connect.gif" width="100%" alt="BlueBlink" style="max-width:100%;" id="tah_powerup"></a></p>
<center><img src="./images/tah_connect.gif" width="100%" alt="Tah Connect" style="max-width:100%;" id="tah_connect"></center>
</div>
</div>

Expand Down

0 comments on commit e0551e5

Please sign in to comment.