rdbdyj

index.html

<div ng-app="app" ng-controller="mainController">
   <header>
      <div class="img-responsive">
         <div class="col-md-12 col-lg-12 col-ms-12 d-sm-none">
            <img class="logo" src="https://media.yoox.biz/ytos/resources/FEDTEST/images/logo-ynap/logo-ynap.svg" />
         </div>
         <img src="https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-768w.jpg" />
      </div>
   </header>
   <div id="content">
      <div class="row">
         <div class="img-responsive col-md-12 col-lg-12 col-ms-12 d-none d-sm-block">
            <img class="logo" src="https://media.yoox.biz/ytos/resources/FEDTEST/images/logo-ynap/logo-ynap.svg" />
         </div>
      </div>
      <div class="row">
         <div class="col-md-12 col-lg-12 col-ms-12 description">
            YOOX NET-A-PORTER GROUP is the
            <b>world's leading online luxuty fashion retailer.</b> The Group is a GLobal company with Angio-Italian roots,
            the result of a game-changing merger, which in October 2015 brought together YOOX GROUP and THE NET-A-PORTER
            GROUP, two companies that have
            <b>revolutionized the luxury fashion industry</b>
            since their birth in 2000.
         </div>
      </div>
      <div class="row pages">
         <div class="col-md-12">
            <span ng-repeat="item in data">
            <button  ng-click="showNewText($index)" class="btn btn-default" ng-class="{'btn-default': $index != indice, 'btn-success': $index == indice }">{{item.id}}</button>
            </span>
         </div>
         <div class="col-md-12">
            <div class="row desc">
               <div class="col-md-4 col-lg-4 col-sm-4 col-xs-12">
                  <b class="ng-binding">{{title}}</b>
               </div>
               <div class="col-md-8 col-lg-8 col-sm-8 col-xs-12">
                  <div>{{body}}</div>
               </div>
            </div>
         </div>
      </div>
      <div class="row newsletter">
         <div class="col-md-4 col-lg-4 col-sm-4 col-xs-12">
            <h4>NEWSLETTER</h4>
         </div>
         <div class="col-md-8 col-lg-8 col-sm-8 col-xs-12">
            <form>
               <div class="row">
                  <div class="col-md-8 col-lg-10 col-sm-8 col-xs-12">
                     <input type="email" class="form-control floatLeft" required>
                  </div>
                  <div class="col-md-4 col-lg-2 col-sm-4 col-xs-12">
                     <button class="btn btn-default" >Subscribe</button>
                  </div>
               </div>
            </form>
         </div>
      </div>
   </div>
   <footer>
      <span>
      COPYRIGHT @ 2000-2017 YOOX NET-A-PORTER GROUP
      </span>
   </footer>
</div>

rdbdyj.markdown

rdbdyj

A Pen by Captain Anonymous on CodePen.

License.

script.js

var appTest = angular.module('app', []);

// create the controller and inject Angular's $scope
appTest.controller('mainController', function ($scope, $http){
    $scope.data = [];
    $scope.body = "";
    $scope.title = "";
    $scope.indice = 0;
    $scope.init = function(){
      $scope.getData();
    }
    $scope.getData = function(){
        $http.get('https://jsonplaceholder.typicode.com/posts/')
            .then(
            function (results) {
                $scope.data = results.data.slice(0,5);
                $scope.showNewText($scope.indice);
                console.log($scope.data, "ciao "); 
            })
    }
    $scope.showNewText = function(index){
      $scope.indice = index;
      $scope.body = "";
      for(var i =0; i< 5 ; i++){
        $scope.body = $scope.body + $scope.data[index].body;
      }
      $scope.title = $scope.data[index].title;
    }
    $scope.init();
});

style.less

body {
    font-size: 15px;
    background-color: #FFF;
    color: #666666;
}
.floatLeft {
    float: left;
}
.paddingZero {
    padding-right: 0;
    padding-left: 0;
}
#content {
    padding: 20px;
    .title {
        font-size: 20px;
    }
    .description {
        margin-top: 20px;
        font-size: 1em;
    }
    .pages {
        margin-top: 20px;
        background-color: #cccccc;
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 5px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 5px;
        button {
            float: left;
            margin-left: 5px;
        }
        .desc {
            margin-top: 10px;
            .col-md-8 {
                -webkit-column-count: 2;
                -moz-column-count: 2;
                column-count: 2;
            }
            .col-md-3 {
                text-transform: uppercase;
            }
        }
    }
}
.newsletter {
    margin-top: 20px;
    padding-left: 15px;
    padding-right: 15px;
    .row {
        padding-right: 15px;
        .col-md-4 button {
            max-width: 100%;
        }
        .col-md-8 {
            .paddingZero;
        }
    }
    .col-md-4 {
        .paddingZero;
    }
}
footer {
    background-color: #333333;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
    span {
        color: #FFF;
        font-size: 0.8em;
    }
}
.img-responsive {
    img {
        width: 100%;
    }
    .logo {
        width: 200px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
}