cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div id="main" ng-app="benendenApp" ng-controller="mainCtrl" ng-class="currentPage">
  <div class="pageContainer">
    <div id="login-page" class="page">
    <img id="logo" src="https://www.benenden.co.uk/your-body-on-sugar/images/logo.png" alt="" />
    <div id="subtitle">Simplifying Healthcare</div>
    <form action="" novalidate onsubmit="return false;">
      <div class="validate">
        <input type="email" placeholder="Email" required/>
        <div class="valid"></div>
      </div>
      <div class="validate">
        <input type="password" placeholder="Password" required/>
        <div class="valid"></div>
      </div>
      <div class="login-links">
        Forgot your <a href="#">email</a> or <a href="#">password</a>.
      </div>
      <input type="submit" value="Login" ng-click="currentPage = 'articles'" />
    </form>
    <div id="join-register">
      Join Online
    </div>
  </div>
    <div id="home-page" class="page">
    <article>
      <img src="https://benenden-contenthub-prod-staging.azurewebsites.net/media/1046/appsforhealth_sml.jpg?anchor=center&mode=crop&width=480&heightratio=0.5714&slimmage=true&rnd=131205666650000000" alt="" />
      <div class="title">Seven apps for a healthier life</div>
      <div class="info">By Sarah Burns - 23/02/16</div>
      <div class="desc">Losing weight, moving more or drinking less – whatever your fitness goal, there’s an app for that. Here’s our list of apps that your body will thank you for.</div>
    </article>
    <article>
      <img src="https://benenden-contenthub-prod-staging.azurewebsites.net/media/1019/alancassidyclimber_lg.jpg?anchor=center&mode=crop&width=480&heightratio=0.5714&slimmage=true&rnd=131205663140000000" alt="" />
      <div class="title">Leading British climber Alan Cassidy on building fitness</div>
      <div class="info">By Lewis Dodson - 22/02/16</div>
      <div class="desc">As a director of one of the UK’s top indoor bouldering centres and one of the best climbers in the country, Alan’s love of his sport features in every aspect of his life.</div>
    </article>
    <article>
      <img src="https://benenden-contenthub-prod-staging.azurewebsites.net/media/1033/familyeatinginthedock_lg.jpg?anchor=center&mode=crop&width=480&heightratio=0.5714&slimmage=true&rnd=131205663140000000" alt="" />
      <div class="title">Shocking verdict as UK family eating goes in the dock</div>
      <div class="info">By Paul Smith - 21/02/16</div>
      <div class="desc">More than two-thirds of adults and school pupils exceed recommended intakes of sugar, salt and saturated fat. Here are some of the report’s key figures.</div>
    </article>
    <article>
      <img src="https://benenden-contenthub-prod-staging.azurewebsites.net/media/1043/alansgrief_lg.jpg?anchor=center&mode=crop&width=480&heightratio=0.5714&slimmage=true&rnd=131205663140000000" alt="" />
      <div class="title">Widower Alan Ainsley talks about the illness of his pathological grief</div>
      <div class="info">By Steve Carlson - 21/02/16</div>
      <div class="desc">I met my wife, Emma Louise Page, 13 or 14 years ago. About six months later, she slipped and broke her leg, and that was due to what turned out to be a tumour – a benign tumour.</div>
    </article>
  </div>
    <div id="account-page" class="page">
      <div class="listview" ng-class="{'active' : accountPage && !accountPageExit}">
      <ul>
        <li ng-click="accountPage = 1; accountPageExit = false;">Personal Details</li>
        <li ng-click="accountPage = 2; accountPageExit = false;">Your Additional Members</li>
        <li ng-click="accountPage = 3; accountPageExit = false;">Contact Preferences</li>
        <li ng-click="accountPage = 4; accountPageExit = false;">My Documents</li>
        <li ng-click="accountPage = 5; accountPageExit = false;">Change Password</li>
      </ul>
      <div class="membershipNumber">
        Membership Number<br><span>011976074</span>
      </div>
    </div>
  </div>
    <div id="products-page" class="page">
    <article>
      <img src="https://www.benenden.co.uk/media/2372478/phc-young-family-riding-bikes.jpg" style="width:100%;top:100px;" alt="" />
      <div class="title">Personal Healthcare</div>
    </article>
    <article>
      <img src="https://www.benenden.co.uk/media/2372484/phc-young-females-having-coffee.jpg" style="width:100%;top:30px;" alt="" />
      <div class="title">Home Insurance</div>
    </article>
    <article>
      <img src="https://www.benenden.co.uk/media/2391668/travel-Image.jpg" style="width:250%;top:60px;left:auto;" alt="" />
      <div class="title">Travel Insurance</div>
    </article>
    <article>
      <img src="https://www.benenden.co.uk/media/1423355/health-condition-pod.jpg" alt="" />
      <div class="title">Health Assessments</div>
    </article>
  </div>
  </div>
  
  <div id="account-subpage" class="page" ng-class="{'active' : accountPage && !accountPageExit}" ng-if="currentPage == 'account'">
    <div class="page" ng-show="accountPage == 1">
      <!-- Personal Details -->
      <div class="formElements">
        <div class="inputTitle">Title</div>
        <div class="input">
          <select name="title">
            <option value="" disabled>Select Title</option>
            <option value="" selected>Mr</option>
            <option value="">Ms</option>
            <option value="">Miss</option>
            <option value="">Mrs</option>
            <option value="">Dr</option>
          </select>
        </div>
        <div class="inputTitle">First name</div>
        <div class="input"><input type="text" value="Louis"/></div>
        <div class="inputTitle">Surname</div>
        <div class="input"><input type="text" value="Dickinson"/></div>
        <div class="inputTitle">Email</div>
        <div class="input"><input type="text" value="louis.dickinson@benenden.co.uk"/></div>
      </div>
      <div class="formElements">
        <div class="inputTitle">Address Line 1</div>
        <div class="input"><input type="text" value="34 Dramphton" placeholder="Address Line 1"/></div>
        <div class="inputTitle">Address Line 2</div>
        <div class="input"><input type="text" value="Benorth" placeholder="Address Line 2"/></div>
        <div class="inputTitle">City</div>
        <div class="input"><input type="text" value="Leeds" placeholder="City"/></div>
        <div class="inputTitle">Post Code</div>
        <div class="input"><input type="text" value="LS2 5ZN" placeholder="Post Code"/></div>
      </div>
      <div class="formElements">
        <div class="inputTitle">Phone Number</div>
        <div class="input"><input type="text" value="078 4897 5883" placeholder="Phone Number"/></div>
      </div>
      <div class="formElements">
        <div class="button">
          Save Details
        </div>
      </div>
    </div>
    <div class="page" ng-show="accountPage == 2">
      <!-- Your Additional Members -->
    </div>
    <div class="page" ng-show="accountPage == 3">
      <!-- Contact Preferences -->
    </div>
    <div class="page" ng-show="accountPage == 4">
      <!-- My Documents -->
    </div>
    <div class="page" ng-show="accountPage == 5">
      <!-- Change Password -->
      <div class="formElements">
        <div class="inputTitle">Old password</div>
        <div class="input"><input type="password" /></div>
        <div class="inputTitle">New password</div>
        <div class="input"><input type="password" /></div>
        <div class="inputDesc">Passwords must contain at least eight characters, including a number, one upper and one lower case character.</div>
        <div class="inputTitle">Confirm new password</div>
        <div class="input"><input type="password" /></div>
      </div>
      <div class="formElements">
        <div class="button">
          Save New Password
        </div>
      </div>
    </div>
  </div>
  <div class="page-title" ng-show="currentPage == 'articles'">Articles</div>
  <div class="page-title twoTitles"  ng-show="currentPage == 'account'" ng-class="{'active' : accountPage && !accountPageExit}">
    <div class="back" ng-click="accountPageExit = true"></div>
    <div class="titleContainer">My Account</div>
    <div class="titleContainer">
      {{getAccountPage()}}
    </div>
  </div>
  <div class="page-title" ng-show="currentPage == 'products'">Products</div>
  <div class="page-title" ng-show="currentPage == 'community'">Community</div>
  <div id="tabbar">
    <a href="#" ng-click="currentPage = 'articles'" ng-class="{'clicked' : currentPage == 'articles'}">
      <i class="fa fa-home" aria-hidden="true"></i>ARTICLES</a>
    <a href="#" ng-click="currentPage = 'products'" ng-class="{'clicked' : currentPage == 'products'}">
      <i class="fa fa-heart" aria-hidden="true"></i>PRODUCTS</a>
    <a href="#" ng-click="currentPage = 'account'" ng-class="{'clicked' : currentPage == 'account'}">
      <i class="fa fa-user" aria-hidden="true"></i>ACCOUNT</a>
    <a href="#" ng-click="currentPage = 'community'" ng-class="{'clicked' : currentPage == 'community'}">
      <i class="fa fa-users" aria-hidden="true"></i>COMMUNITY</a>
  </div>
</div>
            
          
!
            
              ::-webkit-scrollbar { 
    display: none; 
}
body {
  font-family:'Varela round';
  background:#f9f9f9;
}
#main {
  position: relative;
  margin:40px auto;
  width:350px;
  height:600px;
  background:#fbfbfb;
  box-shadow:0 50px 70px -20px rgba(0,0,0,0.4);
  border-radius:5px;
  overflow:hidden;
}
#login-page {
  background:#954975;
  z-index:999999;
  bottom:0;
}
.pageContainer {
  position:absolute;
  margin:auto;
  top:0;
  left:0;
  width:500%;
  height:100%;
  background:#fff;
  transition:0.25s ease-in-out;
}
#main.login .pageContainer {
  transform:translate3d(0,0,0);
}
#main.articles .pageContainer {
  transform:translate3d(-20%,0,0);
}
#main.products .pageContainer {
  transform:translate3d(-40%,0,0);
}
#main.account .pageContainer {
  transform:translate3d(-60%,0,0);
}
#main.community .pageContainer {
  transform:translate3d(-80%,0,0);
}
.page {
  width:20%;
  margin:60px 0;
  height:calc(100% - 120px);
  float:left;
  overflow:hidden;
  overflow-y:auto;
}
.page .page {
  padding-bottom:0;
}
#login-page,
#home-page {
  display:block;
}
#login-page {
  margin:0;
  padding:0;
  height:100%;
}
#logo {
  margin:60px auto 10px;
  width:160px;
  height:auto;
  display:block;
}
#subtitle {
  margin:0 auto 60px;
  font-size:14px;
  text-align:center;
  color:#fff;
}
.page-title {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  margin-bottom:0;
  font-size:18px;
  font-weight:700;
  text-align:center;
  line-height:50px;
  box-shadow:0 3px 25px rgba(0,0,0,0.1);
  background:#fff;
  color:#954975;
  transform:translate3d(0,0,0);
  transition:0.25s ease-in-out;
  zindex:999;
}
#main.login .page-title {
  transform:translate3d(0,-100%,0);
}
.page-title.twoTitles {
  width:200%;
  transition:0.35s ease-in-out;
}
.page-title.twoTitles .titleContainer {
  width:50%;
  float:left;
}
.page-title.twoTitles.active {
  transform:translate3d(-50%,0,0);
}
.page-title .back {
  position:absolute;
  top:0;
  left:0;
  width:50px;
  height:50px;
  cursor:pointer;
}
.page-title.twoTitles .back {
  left:50%;
}
.page-title .back:before {
  position:absolute;
  margin:auto;
  top:0;
  left:2px;
  right:0;
  bottom:0;
  width:10px;
  height:10px;
  border:solid #954975;
  border-width:0 0 2px 2px;
  transform:rotate(45deg);
  content:'';
}
.membershipNumber {
  margin:15px;
  text-align:center;
  color:#fff;
  background:#954975;
  padding:10px 0;
  border-radius:5px;
  font-size:13px;
  box-shadow:0 3px 10px rgba(0,0,0,0.2);
}
.membershipNumber span {
  padding-top:8px;
  font-size:19px;
  display:inline-block;
}
.listview {
  margin:10px 0;
  color:#954975;
  transform:translate3d(0,0,0);
  transition:0.35s ease-in-out;
}
.listview.active {
  transform:translate3d(-100%,0,0);
}
.listview li {
  position:relative;
  height:45px;
  line-height:45px;
  padding-left:20px;
  background:#fff;
  border-top:1px solid rgba(0,0,0,0.1);
  overflow:hidden;
  cursor:pointer;
}
.listview li:last-child {
  border-bottom:1px solid rgba(0,0,0,0.1);
}
.listview li:after {
  position:absolute;
  margin:auto;
  top:17px;
  right:15px;
  width:8px;
  height:8px;
  border:solid #954975;
  border-width:2px 2px 0 0;
  transform:rotate(45deg);
  content:'';
}
#account-subpage {
  position:absolute;
  margin:auto;
  top:0;
  left:0;
  bottom:50px;
  width:100%;
  transform:translate3d(100%,0,0);
  transition:0.35s ease-in-out;
}
#account-subpage.active {
  transform:translate3d(0,0,0);
}
#account-subpage .subpageTitle {
  font-size:17px;
  padding:10px;
  font-weight:700;
  text-align:center;
  color:#954975;
}
form input {
  margin:0;
  width:100%;
  border:0;
  border-radius:4px;
  padding:12.5px 45px 12.5px 10px;
  font-size:16px;
  box-sizing:border-box;
  display:block;
}
form input:focus {
  outline:0;
}
form .validate {
  position: relative;
  margin:0 auto 15px;
  width:90%;
  overflow:hidden;
}
form .validate .valid {
  position:absolute;
  margin:auto;
  top:0;
  right:-30px;
  bottom:0;
  width:25px;
  height:25px;
  background:#954975;
  border-radius:100%;
  transition:0.35s ease-out;
}
form .validate input:valid + .valid {
  right:10px;
}
form .validate .valid:before {
  margin:5px auto 0;
  width:5px;
  height:10px;
  display:block;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  content:'';
}
form input[type="submit"] {
  margin:auto;
  padding:12.5px 0;
  width:85%;
  background:rgba(255,255,255,0.1);
  color:#fff;
  cursor:pointer;
}
form .login-links {
  margin:0 auto 15px;
  font-size:14px;
  text-align:center;
  color:#fff;
}
form .login-links a {
  color:#fff;
}
#join-register {
  position:absolute;
  margin:auto;
  left:0;
  width:20%;
  bottom:0;
  height:60px;
  line-height:60px;
  text-align:center;
  color:#fff;
  background:rgba(255,255,255,0.1);
  cursor:pointer;
}
.page article{
  margin:0 15px 30px;
  border-radius:4px;
  background:#fff;
  box-shadow:0 2px 3px rgba(0,0,0,0.1);
  overflow:hidden;
}
.page article:first-child {
  margin-top:10px;
}
.page article img {
  width:100%;
  display:block;
}
.page article .title,
.page article .info,
.page article .desc{
  padding:10px 10px 5px;
}
.page article .info,
.page article .desc {
  padding:0 10px 10px;
  font-size:14px;
  opacity:0.5;
}
#products-page article {
  position:relative;
  margin:10px 20px 20px;
}
#products-page article img{
  position:absolute;
  margin:auto;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
}
#products-page article .title {
  position:relative;
  color:#fff;
  font-size:26px;
  padding:37px 30px;
  text-align:center;
  background:rgba(0,0,0,0.3);
}

.formElements {
  margin:15px;
}
.formElements .inputTitle {
  font-size:17px;
  font-weight:400;
  padding:0 0 6px;
}
.formElements .input{
  padding-bottom:15px;
}
.formElements .input input[type="text"],
.formElements .input input[type="password"], 
.formElements .input select {
  width:100%;
  height:35px;
  font-size:16px;
  padding:0 10px;
  border:1px solid #d2d2d2;
  border-radius:4px;
  box-sizing:border-box;
}
.formElements .inputDesc {
  padding-bottom:15px;
  font-size:15px;
}
.formElements .button {
  position:relative;
  padding:20px 0;
  text-align:center;
  color:#fff;
  border-radius:5px;
  background:#954975;
}
.formElements .button:after {
  margin:0 10px 1px;
  width:5px;
  height:5px;
  border:solid #fff;
  border-width:2px 2px 0 0;
  display:inline-block;
  transform:rotate(45deg);
  content:'';
}
#tabbar {
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:50px;
  background:#fff;
  box-shadow:0 -2px 6px rgba(0,0,0,0.1);
  transition:0.25s ease-in-out;
}
#main.login #tabbar {
  transform:translate3d(0,100%,0);
}
#tabbar a{
  font-size:9px;
  text-align:center;
  width:25%;
  height:50px;
  line-height:15px;
  float:left;
  display:block;
  color:#444;
  text-decoration:none;
}
#tabbar a i {
  margin-top:8.5px;
  font-size:20px;
  display:block;
}
#tabbar a:hover,
#tabbar a.clicked{
  color:#954975;
}
            
          
!
            
              (function(){
  var app = angular.module('benendenApp', []);
  app.controller('mainCtrl', function($scope) {
    $scope.currentPage = 'login';
    $scope.accountPageExit = false;
    $scope.getAccountPage = function(){
      switch($scope.accountPage) {
        case 1:
          return 'Personal Details';
          break;
        case 2:
          return 'Your Additinal Members';
          break;
        case 3:
          return 'Contact Preferences';
          break;
        case 4:
          return 'My Documents';
          break;
        case 5:
          return 'Change Password';
          break;
      }
    };
  });  
})();
            
          
!
999px
Loading ..................

Console