User Account For Phone

Tutorials of (User account for phone) by Sachin bhandari

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>User Account For Phone</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/css/materialize.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Poppins|Work+Sans|Ubuntu'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

   <div class="hide-on-large-only">
    <nav>
      <div class="container-fluid">
  
      <i class="fa fa-arrow-left"></i>
      <i class="material-icons right">home</i>
  
      </div>
  
    </nav>
    <Section class="profile-card">
      <div class="pro-picture">
     
      </div>
      <center>
      <p>
        <span class="photo-name">Sachin</span>
      <br>
    
        <span class="white-text"><i class="fa fa-map-marker white-text">&nbsp; &nbsp; </i>Punjab </span>
      </p>
    </center>
   </Section>
    <ul id="tabs-swipe-demo" class="tabs">
      <li class="tab col s3 "><a href="#test-swipe-1"><i class="fa fa-low-vision"></i>&nbsp;Overview</a></li>
      <li class="tab col s3"><a class="active" href="#test-swipe-2"><i class="fa fa-credit-card"></i>&nbsp;Coupons</a></li>
      <li class="tab col s3"><a href="#test-swipe-3"><i class="fa fa-edit"></i>&nbsp;Reviews</a></li>
    </ul>

    <div id="test-swipe-1" class="col s12 hoverable">
      <br>
      <div class="container ">
        <div class="row">
           <p class="review col s12" style="font-weight:bolder; font-family: 'Poppins', sans-serif;"><i class="fa fa-edit" style="font-weight:bolder; color:#2196F3"></i>&nbsp; Profile <i class="fa fa-angle-right right" style="font-weight:bolder"></i><br><br></p>
        <p class="review-information">
          Lorem Ipsum hui.. You are active from long time
          Lorem Ipsum hui.. You are active from long time
          Lorem Ipsum hui.. You are active from long time
          <br>
          <br>
        </p>
        
                   <p class="col s12" style="font-weight:bolder; font-family: 'Poppins', sans-serif;"><i class="fa fa-dollar" style="font-weight:bolder; color:#4CAF50;"></i>&nbsp; Earning <i class="fa fa-angle-right right" style="font-weight:bolder"></i><br><br></p>
               
        <p class="col s12" style="font-weight:bolder;font-family: 'Poppins', sans-serif;"><i class="fa fa-heart" style="font-weight:bolder; color:#F44336;"></i>&nbsp; Likes<i class="fa fa-angle-right right" style="font-weight:bolder"></i><br><br></p>
        
        <p class="col s12" style="font-weight:bolder;font-family: 'Poppins', sans-serif;"><i class="fa fa-line-chart" style="font-weight:bolder; color:#673AB7"></i>&nbsp; Companies <i class="fa fa-angle-right right" style="font-weight:bolder"></i><br><br></p>
            
        
        
      </div>
    </div>

  </div>
    <div id="test-swipe-2" class="col s12 ">Test 2</div>
    <div id="test-swipe-3" class="col s12 ">Test 3</div>
   
   <div class="footer">
     <div class="row">
    <div class="col s4 footer-section1">
      <center>
     <i class="fa fa-bank" class="footer-font" style="font-size: 20px; display:block; cursor:pointer;"></i>
     Home
      </center>
     </div>
     <div class="col s4 footer-section2">
       <i class="fa fa-gift" class="footer-font" style="font-size: 20px; display:block; cursor:pointer"> </i>
       Redeem
     </div>
     <div class="col s4 footer-section3">
       <i class="fa fa-meh-o" class="footer-font" style="font-size: 20px; display:block; cursor:pointer"> </i>
       Review
     </div>
     </div>
</div>
</div>


 

<div class ="hide-on-med-and-down">

  <nav class="nav-center z-depth-0" style="background-color:white;">
    <div class="nav-wrapper ">
      <ul >
        <li style="margin-left:15%;"><a href="sass.html" >Home</a></li>
        <li style="border-bottom: 3px solid #26A6E5"><a href="badges.html" style="color:#26A6E5;">Profile</a></li>
        <li ><a href="collapsible.html" >Companies</a></li>
      </ul>
        
    </div>
  </nav>
  <ul class="sidenav sidenav-fixed">
    <li><div class="user-view">
      <div class="background">
      </div>
      <center>
      <a href="#!user"><img class="circle" src="https://orig00.deviantart.net/0c10/f/2013/278/2/0/tumblr_profile_by_padder-d6pclrf.jpg" style="height:120px; width:120px;"></a>
      <a href="#!name"><span class="white-text photo-name name">Sachin Bhandari</span></a>
      <span class="white-text"><i class="fa fa-map-marker white-text">&nbsp; &nbsp; </i>Punjab</span>
        <br>
        <button class="button-pro">Update Profile</button>
      </center>
    </div></li>
    <li class="options">
      <center>
        <i class="fa fa-laptop" style="display:block;  font-size:40px; "></i>
        <span class="option-name">Dashboard</span>
      </center>
  </li>
    <li class="options">
      <center>
      <i class="fa fa-credit-card" style="display:block; font-size:40px; "></i>
        <span class="option-name">My Coupons</span>
      </center>
        </li>
    <li class="options">
      <center>
        <i class="fa fa-thumbs-o-up" style="display:block;  font-size:40px;"></i>
        <span class="option-name">My Reviews</span>
      </center>
        </li>
  </ul>
  <div class="main">
    <div class="container">
      <center>
      <h1 style="color: #25292C; font-size:26px; font-family:'Poppins', sans-serif;">
       Profile strength
    </h1>
      </center>
     
    </div>
    <div class="row">
      
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/js/materialize.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>
/* Downloaded from https://www.codeseek.co/ */
.body
{
  margin:0%;
  padding:0%;
}

@media(max-width:990px)
{
nav
{
  margin:0%;
  height:10vh;
  background-color:#2A58AD;
}

nav > .container-fluid > i 
{
  color:white; 
  margin-top:2%;
  padding:10px;
  font-size:20px;
} 

.material-icons
{
  margin-top:-2vh !important;
  font-size: 22px !important;
}

.profile-card
{
  height:35vh;
background-color:#2A58AD;
}

.pro-picture
{
  background-image: url('https://orig00.deviantart.net/0c10/f/2013/278/2/0/tumblr_profile_by_padder-d6pclrf.jpg');
  height:20vh;
  background-size:cover;
  background-position:center center;
  width:20vh;
  border-radius:50%;
  margin: auto;
  border: 5px solid white;
}

.photo-name
{
  margin-top:3%;
  color:white;
  width:20vh;
  height:20vh;
  font-size: 20px;
  font-family: 'Poppins', sans-serif;
}

.tabs
{
  background-color:#2A58AD;
}

.tabs > li > a
{
  color:#ffffff !important;
  font-family: 'Work Sans', sans-serif;
  font-size:15px !important;
  text-transform :  capitalize !important;
}

.container > .row > p
{
  border-bottom: 0.1px solid #BDBDBD !important;
  cursor: pointer;
}
.review-information
{
  display:none;
}
.fa-angle-right{
  transition : transform 0.5s ease-in;
}
.fa-angle-right.rotate{
  transform : rotate(90deg);
}
  .footer {
  height:8vh;
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
    font-weight:bolder;
   background-color: #2A58AD;
   color: #7F9CCE;
    font-family: 'Work Sans', sans-serif;
   text-align: center;
}
  
  .footer-section1:hover{
    color:#ffffff;
  }
  .footer-section2:hover{
    color:#ffffff;
  }
  .footer-section3:hover{
    color:#ffffff;
  }
   
}




@media(min-width:950px)
{

.background{
  background-color:#2A58AD;
}
.sidenav{
  background-color:#2A58AD;
}


.photo-name
{
  color:white;
  font-size: 20px !important;
  font-family: 'Poppins', sans-serif;
}

.button-pro
{
outline:none;
padding:12px;
text-align:center;
font-family: 'Work Sans', sans-serif;
border:2px solid #207CC4;
color: #ffffff;
background-color: #2A58AD;
 border-radius:50px;
  cursor: pointer;
}

.options{
  padding:20px;
  cursor:pointer;
  color:#7F9CCE;
  transition : color 0.2s ease-in;
}


.option-name{
  text-transform:upper;
  font-size:20px;
  font-family: 'Ubuntu', sans-serif;
}

.options:hover{
  color:#ffffff;
  background-color:#1D4C9E;
  border-left: 4px solid #23A4E5;
}
  
nav.nav-center ul {
    text-align: center;
}
nav.nav-center ul li {
    display: inline;
    float: none;
 }
nav.nav-center ul li a {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    color:#56687D;
    font-size:18px;
}
  
  nav.nav-center ul li a:hover{
    color:#26A6E5;
  }
  .z-depth-0{
    box-shadow: none !important;
  }
  .main{
    display:block;
    margin-left:20vw;
  } 
} 
/* Downloaded from https://www.codeseek.co/ */
  $(document).ready(function(){
    $('.tabs').tabs({
      swipeable: true
    });
    $('.review').on('click',function(){
      $('.review-information').slideToggle(500);
      $('.fa-angle-right').toggleClass('rotate');
    });
    $('.sidenav').sidenav();
  });

This awesome code ( User Account For Phone ) is write by SACHIN BHANDARI, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © SACHIN BHANDARI