Commit e989d753 authored by santiaago's avatar santiaago
Browse files

start style of get-started section #83

parent 350a2389

app/assets/css/get-started.css

0 → 100644
+36 −0
Original line number Diff line number Diff line 
.getstarted--backgroundGrey{

    background: #F4F4F4;

}



.getstarted--backgroundWhite{

    background: #FFF;

}



.getstarted-square--noPadding{

    padding-bottom: 0px;

    padding-top: 0px;

    padding-left: 0px;

    padding-right: 0px;

    height: 400px;

    border-bottom: solid 1px #CBCBCB;

    border-left: solid 1px #CBCBCB;

}



.getstarted--square{

    padding-bottom: 50px;

    padding-top: 50px;

    height: 400px;

    border-bottom: solid 1px #CBCBCB;

    border-left: solid 1px #CBCBCB;

}



.getstarted-right--borderRigth{

    border-right: solid 1px #CBCBCB;

}



/* @media (max-width: 950px){ */

/*     .getstarted-square--noPadding{ */

/* 	height: 175px; */

/*     } */



/* } */

app/index.html

+1 −0
Original line number Diff line number Diff line
@@ -28,6 +28,7 @@ 
    <link href="assets/css/features.css" rel="stylesheet">

    <link href="assets/css/examples.css" rel="stylesheet">

    <link href="assets/css/editor.css" rel="stylesheet">

    <link href="assets/css/get-started.css" rel="stylesheet">

    <link href="assets/css/footer.css" rel="stylesheet">

    <script src="//google-code-prettify.googlecode.com/svn/loader/prettify.js"></script>

    <script src="//google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

app/partials/marketing/get-started.html

+3 −3
Original line number Diff line number Diff line 
<div class="row">

  <div class="col-md-8">

  <div class="col-md-8 getstarted--square">

    <h1 id="getstarted">GET STARTED</h1>

    <p>To use tinygraphs in your webside just set the source of your <code>&lt;img&gt;</code> element to the url of a tinygraphs image like so:</p>

    <p><pre class="prettyprint lang-html">&lt;img src=&quot;http://tinygraphs.com/squares/helloworld&quot;&gt;</pre></p>

    <p>You can also choose to download your creation and upload it on your website. Just use our editor and then click on the download button.</p>

    <a href="">try it out</a>

  </div> <!-- / col -->

  <div class="col-md-4">

  <div class="col-md-4 getstarted--square getstarted-right--borderRigth">

    <h2 class="text-center" id="getstarted">LOOKING FOR MORE OPTIONS?</h2>

    <p>You can see all the options in our github page such as colors and color combinations, shapes, sizes and more. </p>

    <a href="">find us on github</a>

    <a href="https://github.com/taironas/tinygraphs">find us on github</a>

  </div> <!-- / col -->

</div><!-- / row -->