<body class="special-color-dark">
<div class="main_div_class mdb-color darken-3">
<!--Navbar-->
<nav class="navbar navbar-light">
<button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="white-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<!-- Navbar brand -->
<a class="navbar-brand" href="#"><i class="far fa-share-square white-text"></i></a>
<!-- Collapse button -->
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link white-text" href="#">Profile <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link white-text" href="#">Statistics</a>
</li>
<li class="nav-item">
<a class="nav-link white-text" href="#">Log Out</a>
</li>
</ul>
<!-- Links -->
</div>
<!-- Collapsible content -->
</nav>
<!--/.Navbar-->
<main>
<div class="container">
<div class="row">
<div class="col-md-12 float-left name">
Wojciech
</div>
</div>
<div class="row">
<div class="col-md-4 date-yesterday">
yesterday<br>
3 July 2019
</div>
<div class="col-md-4 date-today">
Today<br>
4 July 2019
</div>
<div class="col-md-4 target-set">
<div class="target-button grey-text">
<i class="fas fa-bullseye"></i> Target
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="big-chart-steps">
<div class="big-chart-calories">
<i class="fas fa-running running-icon fa-4x"></i>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="small-chart-steps">
<div class="steps-count">6881</div>
<i class="fas fa-shoe-prints steps-icon"></i>
</div>
</div>
<div class="col-md-6">
<div class="small-chart-calories">
<div class="calories-count">0.25</div>
<i class="fas fa-fire-alt calories-icon"></i>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="last-card">
<div class="statistics">STATISTICS</div>
<i class="fas fa-chart-pie small-chart fa-4x"></i>
</div>
</div>
</div>
</div>
</main>
</div>
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
html{
font-family: 'Roboto', sans-serif;
}
.main_div_class{
overflow:hidden;
width: 360px;
height: 640px;
border: 4px solid black;
border-radius: 15px;
margin:auto;
color:white;
}
.navbar a{
color: white;
}
.name{
margin-left:20px;
margin-top: 10px;
font-size: 3rem;
font-weight: 500;
color: #728096;
}
.date-yesterday{
font-size: 10px;
text-align: center;
color:lightgrey;
}
.date-today{
font-size: 13px;
font-weight: 400;
text-align: center;
color:white;
}
.target-set{
text-align:center;
}
.target-button{
font-size: 12px;
height:30px;
width:70px;
border-radius: 15px;
padding-top:7px;
background-color:#3b465e;
}
.target-button:hover{
cursor: pointer;
background-color:#2e3951;
}
.big-chart-steps{
margin-left:auto;
margin-right:auto;
margin-top:10px;
width:150px;
height:150px;
border-radius: 75px;
border: 12px solid lightseagreen;
stroke-linecap: round;
border-right-color: #3b465e;
transform: rotate(-45deg);
}
.big-chart-calories{
margin:auto;
margin-top: 3px;
width:120px;
height:120px;
border-radius: 60px;
border: 12px solid orange;
border-bottom-color: #3b465e;
border-right-color: #3b465e;
border-left-color: #3b465e;
}
.running-icon{
color: lightseagreen;
margin-top:17px;
margin-left:17px;
transform: rotate(45deg);
}
.small-chart-steps{
border: 6px solid lightseagreen;
height:75px;
width:75px;
border-radius: 37.5px;
margin: auto;
margin-top:20px;
}
.small-chart-calories{
border: 6px solid orange;
height:75px;
width:75px;
border-radius: 37.5px;
margin: auto;
margin-top:20px;
}
.steps-count{
margin-left:13px;
margin-top:5px;
}
.steps-icon{
color: lightseagreen;
transform: rotate(-90deg);
margin-left:19px;
}
.calories-count{
margin-top:5px;
margin-left:17px;
}
.calories-icon{
color: orange;
margin-left:25px;
}
.last-card{
margin-top:20px;
width: 320px;
height:100px;
background-color:#2e3951;
border-radius:10px;
display:inline-block;
}
.last-card:hover{
cursor:pointer;
background-color:#3b465e;
color: grey;
}
.statistics{
font-size:25px;
margin-top:30px;
margin-left:15px;
float:left;
}
.small-chart{
float:right;
margin-right:15px;
margin-top:18px;
}