Commit 97807367 authored by santiaago's avatar santiaago
Browse files

features text position 

issue #46
parent ded2197f

app/assets/css/features.css

+16 −1
Original line number Diff line number Diff line
@@ -5,7 +5,7 @@ 
.features--square{

    padding-bottom: 50px;

    padding-top: 50px;

    height: 300px;

    height: 404px;

    border-top: solid 1px #CBCBCB;

    border-bottom: solid 1px #CBCBCB;

    border-left: solid 1px #CBCBCB;
@@ -15,3 +15,18 @@ 
.features--backgroundGreen{

    background: #43BF86;

}



.features-content--position{

    position: relative;

    top: 33%;

    text-align:center;

    transform: translateY(-50%);

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

}



.features-contentText--postion{

    position: relative;

    top: 40%;

    transform: translateY(-50%);

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

}
 
 No newline at end of file

app/partials/marketing/features.html

+22 −7
Original line number Diff line number Diff line 
<div class="row features--background">

  <div class="col-md-3 features--square features--backgroundGreen">

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

      <h1>FEATURES</h1>

    </div>

  </div>

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

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

      <h4>MULTIPLE GRIDS</h4>

    <p>Tinygraphs images are based on geometric shapes and patterns: squares, triangles, ...</p>

    </div>

    <div class="features-contentText--postion">

      <p class="text-left">Tinygraphs images are based on geometric shapes and patterns: squares, triangles, ...</p>

    </div>

  </div>

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

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

      <h4>COLOR THEMES</h4>

    <p>You can generate images with 2, 3 or 4 colors from a set of color palettes. You can also create your own color theme.</p>

    </div>

    <div class="features-contentText--postion">



      <p class="text-left">You can generate images with 2, 3 or 4 colors from a set of color palettes. You can also create your own color theme.</p>

    </div>

  </div>

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

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

      <h4>AVATARS AS A SERVICE</h4>

    <p>Use Tinygraphs to generate avatars and banners for your users and website.</p>

    </div>

    <div class="features-contentText--postion">

      <p class="text-left">Use Tinygraphs to generate avatars and banners for your users and website.</p>

    </div>

  </div>

</div>