Commit 1c9e58f5 authored by santiaago's avatar santiaago
Browse files

what is carousel 

#45
parent a7699766

app/assets/css/whatis.css

0 → 100644
+14 −0
Original line number Diff line number Diff line 
/* CUSTOMIZE THE CAROUSEL

-------------------------------------------------- */



/* Carousel base class */

.carousel-whatis {

  height: 263px;

  margin-bottom: 0px;

  position: relative;

}



/* Declare heights because of positioning of img element */

.carousel-whatis .item {

  height: 263px;

}
 
 No newline at end of file

app/index.html

+1 −0
Original line number Diff line number Diff line
@@ -19,6 +19,7 @@ 
	<![endif]-->

    <!-- Custom styles for this template -->

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

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

  </head>

  <body>

    <div class="tinygraphs-browsehappy" ng-include="'partials/browsehappy.html'"></div>

app/partials/marketing/whatisit.html

+26 −1
Original line number Diff line number Diff line
@@ -3,6 +3,31 @@ 
    <h2 class="text-left" id="whatisit">WHAT IS IT</h2>

    <p class="lead text-left"><b>Tinygraphs</b> is an open source avatar generator web service. You can use it to generate a consistent avatars for your web app.</p>

  </div><div class="col-md-2"></div>

  <div class="col-md-3"><img src="/squares/tinygrap?theme=sugarsweets&numcolors=4">

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

    <!-- <img src="/squares/tinygrap?theme=sugarsweets&numcolors=4"> -->

    <div id="Carousel" class="carousel carousel-whatis slide">

      <ol class="carousel-indicators">

	<li data-target="Carousel" data-slide-to="0" class="active"></li>

	<li data-target="Carousel" data-slide-to="1"></li>

	<li data-target="Carousel" data-slide-to="2"></li>

      </ol>

      <div class="carousel-inner carousel-inner-whatis">

	<div class="item active">

          <img src="/squares/tinygrap?theme=sugarsweets&numcolors=4" class="img-responsive">

	</div>

	<div class="item">

          <img src="/squares/tinygrap?theme=bythepool&numcolors=4" class="img-responsive">

	</div>

	<div class="item">

          <img src="/squares/tinygrap?theme=frogideas&numcolors=4" class="img-responsive">

	</div>

      </div>

      <span class="left carousel-control" data-target="#Carousel" data-slide="prev">

	<span class="glyphicon glyphicon-chevron-left"></span>

      </span>

      <span class="right carousel-control" data-target="#Carousel" data-slide="next">

	<span class="glyphicon glyphicon-chevron-right"></span>

      </span>

    </div>

  </div>

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