Commit c4ed56bd authored by santiaago's avatar santiaago
Browse files

better about page. #83 

* new css file.
parent c2208fa3

app/assets/css/about.css

0 → 100644
+114 −0
Original line number Diff line number Diff line 
.about--backgroundGreen{

    /* background: #43BF86; */

    background: url(/labs/isogrids/banner/gradient?theme=frogideas&p=0.2&xt=4&h=580&w=400&gx1=0&gy1=0&gy2=40&gx2=40);



}



.about--backgroundGrey{

    background: #F4F4F4;

}



.about--backgroundWhite{

    background: #FFF;

}



.about-square--noPadding{

    padding-bottom: 0px;

    padding-top: 0px;

    padding-left: 0px;

    padding-right: 0px;

    height: 580px;

    border-top: solid 1px #CBCBCB;

    border-bottom: solid 1px #CBCBCB;

    border-left: solid 1px #CBCBCB;

}



.about--squareHeader,

.about--square{

    padding-bottom: 50px;

    padding-top: 50px;

    height: 404px;

    border-top: solid 1px #CBCBCB;

    border-bottom: solid 1px #CBCBCB;

    border-left: solid 1px #CBCBCB;

}



.about-square--noborder{

    border-top: 0;

    border-bottom: 0;

    border-left: 0;

    border-right: 0;

}



.about-square--borderRight{

    border-right: solid 1px #CBCBCB;

}



.about-innerSquare--borderBottom{

    border-bottom: solid 1px #CBCBCB;

}



.about--square2{

    height: 290px;

}



.about-content--position{

    position: relative;

    top: 55%;

    text-align:center;

    transform: translateY(-50%);

    -webkit-transform: translateY(-50%);

}



.about-contentText--position{

    position: relative;

    top: 15%;

    transform: translateY(-50%);

    -webkit-transform: translateY(-0%);

}



.about-content--positionTop{

    position: relative;

    top: 0%;

    text-align:center;

    transform: translateY(-50%);

    -webkit-transform: translateY(-50%);

}



.about-content--positionCenter{

    position: relative;

    top: 50%;

    text-align:center;

    transform: translateY(-50%);

    -webkit-transform: translateY(-50%);

}



.about-content--White{

    color: #FFF;

}



.about-title{

    color: #FFF;

    text-shadow: 0 1px 2px rgba(0,0,0,.6);

}



@media (max-width: 950px){

    .about-square--noPadding{

	height: 175px;

    }



    .about--squareHeader{

	height: 50px;	

	padding-top: 0px;

	padding-bottom: 0px;

    }

    .about--square2{

	height: 75px;

	padding-top: 0px;

	padding-bottom: 0px;

    }



    .about--square{

    	height: 220px;

    }

}

app/index.html

+1 −0
Original line number Diff line number Diff line
@@ -29,6 +29,7 @@ 
    <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/about.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/about.html

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

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

    <h2 class="text-center" id="about">ABOUT US</h2>

<div id="about" class="row about--backgroundGrey">

  <div class="col-md-3 about--squareHeader about--backgroundGreen">

    <div class="about-content--positionTop about-content--White about-title">

      <h1>ABOUT US</h1>

    </div>

    <div class="about-contentText--position about-content--White">

      <p>We are Taironas, a group of friends that spend our free time doing fun web projects like tinygraphs.</p>

      <p>You can find our group on github!</p>

    </div>

  </div> <!-- / col-md-3 -->

  <div class="col-md-3 about--square">

    <div class="about-content--position">

      <img alt="santiago" src="assets/img/santiago.jpg" class="img-thumbnail" title="Santiago">

    </div>

  </div> <!-- / col-md-3 -->

  <div class="col-md-3 about--square">

    <div class="about-content--position">

      <img alt="remy" src="assets/img/remy.jpg" class="img-thumbnail" title="Remy">

    </div>

  </div> <!-- / col-md-3 -->

  <div class="col-md-3 about--square">

    <div class="about-content--position">

      <img alt="carmen" src="assets/img/carmen.jpg" class="img-thumbnail" title="Carmen">

    </div>

  </div> <!-- / col-md-3 -->

</div>

<!-- about the project -->

<div class="row">

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

    <h2>tinygraphs: A web application that generates avatars.</h2>

    <p class="lead">While building <a href="http://www.gonawin.com">gonawin</a> we found that the avatar service that we were using was not in sync with the designs/colors of our web app.</p>

    <p class="lead">We decided to build <b>tinygraphs</b>, to have the colors <b>combine</b> with the web page itself. Also, as we were having so much fun building it, we decided to extend the patterns used to generate the images. We plan to add more patterns and more choices in the future. This is a free web app, and we plan to keep like that. Right now the only cost is the domain name.</p>

    <h3>The code:</h3>

    <p class="lead">You can find the code in github: <a href="http://www.github.com/taironas/tinygraphs">tinygraphs</a>. You will find the description of how we built it and the stack of technologies that we used.</p>

    <h3>Collaborators:</h3>

    <div class="row centered">

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

        <img alt="santiago" src="assets/img/santiago.jpg" class="img-thumbnail" title="Santiago" height="264" width="264">

  <div class="col-md-4 about--square about-square--noborder">

    <div class="about-content--positionTop">

      <h3>ABOUT THE PROJECT</h3>

    </div>

    <div class="about-contextText--position">

      <p class="text-left">While building <a href="http://www.gonawin.com">gonawin</a> we found that the avatar service that we were using was not in sync with the designs/colors of our web app.</p>

      <p class="text-left">We decided to build <b>tinygraphs</b>, to have the colors <b>combine</b> with the web page itself. Also, as we were having so much fun building it, we decided to extend the patterns used to generate the images. We plan to add more patterns and more choices in the future. This is a free web app, and we plan to keep like that. Right now the only cost is the domain name.</p>

    </div>

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

        <img alt="remy" src="assets/img/remy.jpg" class="img-thumbnail" title="Remy" height="264" width="264">

  </div> <!-- / col-md-4 -->

  <div class="col-md-4 about--square about-square--noborder">

    <div class="about-content--positionTop">

      <h3>THE CODE</h3>

    </div>

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

        <img alt="carmen" src="assets/img/carmen.jpg" class="img-thumbnail" title="Carmen" height="264" width="264">

    <div class="about-contextText--position">

      <p class="text-left">You can find the code in github: <a href="http://www.github.com/taironas/tinygraphs">tinygraphs</a>. You will find the description of how we built it and the stack of technologies that we used.</p>

    </div>

  </div> <!-- / col-md-4 -->

  <div class="col-md-4 about--square about-square--noborder">

    <div class="about-content--positionTop">

      <h3>LICENSE</h3>

    </div>

    </br>

    <h3>License</h3>

    <p class="lead"><a href="https://tinygraphs.com/">tinygraphs</a> logo is property of tinygraphs, you must always request the permission to use it to <a href="https://plus.google.com/u/0/+CarmenRebolledo/">Carmen</a>.</p>

    <p class="lead">Tinygraphs images are available for free. As a thank you, we only ask that you include a link back to <b>tinygraphs</b> whenever possible.</p>

    <div class="about-contextText--position">

      <p class="text-left"><a href="https://tinygraphs.com/">tinygraphs</a> logo is property of tinygraphs, you must always request the permission to use it to <a href="https://plus.google.com/u/0/+CarmenRebolledo/">Carmen</a>.</p>

    <p class="text-left">Tinygraphs images are available for free. As a thank you, we only ask that you include a link back to <b>tinygraphs</b> whenever possible.</p>

    </div>

  </div> <!-- / col-md-4 -->

</div>