Tweaking the hero unit

OK. Now, let’s clean up our hero unit and put in some decent text. Let’s open the app/views/main.html file and change the content within the hero unit element as follows:

<div class="hero-unit">
  <h1>Welcome to dunebook blog</h1>
  <p>This is a Rapid Prototype demo on how you can use angularjs with Angular UI and Bootstrap to quickly build a clickable prototype that can be shown to clients</p>
</div>

You’ll notice that the hero unit is quite narrow and feels claustrophobic; we can make it look nicer by adding the following class in the styles/main.css file.

.hero-unit {
    font-size: 18px;
    font-weight: 200;
    line-height: 30px;
    background-color: #eee;
    border-radius: 6px;
    padding: 60px;
}

Adding the three content blocks




Things are taking shape! Let’s now add the three blocks under the hero unit. We will use the same approach of keeping the data within the model and the markup in the partial.

Open up the app/scripts/controllers/main.js, and let’s create another model named content, as we want to use images from lorempixel there too. We will follow the same structure for the content model as we did for the slides model.

Add the following code for the content model just after the slides model:

// Model for the 3 content blocks
var baseURL='http://lorempixel.com/200/200/'
$scope.content=[
{
   img:baseURL+'people',
   title:'About Us',
   summary:'We are good, we are the best out there'
},
{
   img:baseURL+'business',
   title:'Our Services',
   summary:'We offer advice on staying Healthly, what to eat...
   what are the best exercises for you etc.'
},
{

   img:baseURL+'transport',
   title:'Contact Us',
   summary:'#111, Good Health Blvd, Happy Place, Antartica, Zip-432167'
}
]

Here, we are using 200 x 200 px size images from lorempixel.com.

The structure of the model object is very similar to that of slides, so understanding this should be easy.

Now, let’s add the markup in our app/views/main.html partial.

After the hero unit markup, let’s create the row container that will contain the following <div> tags for the three blocks:

<div class="row-fluid">

</div>

To create the three blocks, we’ll need three containers, and each of them would be four columns wide.

Note

As the default Bootstrap is 12 columns wide, the width for each of the three columns is simply 12 / 3 = 4.

Within the row-fluid class, let’s create the markup for one of the blocks which we will repeat using ng-repeat. The code is as follows:

   <div class="col-md-4" ng-repeat="block in content">
         <img ng-src="{{block.img}}">
         <h3>{{block.title}}</h3>
         <p>{{block.summary}} </p>
   </div>

Save the file and load the page on your browser to see the changes take effect.

Things look OK, but those square images within the blocks don’t look that great; maybe we should put them within circles.

With Bootstrap, it’s just a question of adding the img-circle class to the <img> tag as follows:

<img class="img-circle" ng-src="{{block.img}}">

Save the file and ensure that the images within the three blocks are now in a circle. In case you want the images with a rounded corner or with a polaroid effect, then simply replace the img-circle class with img-rounded or img-polaroid.

This completes the home page.